From f2a44c391f8f63ad80f967d5b642c1c7cd6f7ff0 Mon Sep 17 00:00:00 2001 From: Pelayo Felgueroso Date: Thu, 2 Oct 2025 17:03:30 +0200 Subject: [PATCH] Added new semantic tokens and rename existent to avoid repeating its name on the alias and core tokens --- packages/lib/src/styles/tokens.tsx | 177 +++++++++++++++----------- packages/lib/src/styles/variables.css | 177 +++++++++++++++----------- 2 files changed, 208 insertions(+), 146 deletions(-) diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.tsx index d9ff8dfe9..f8e5aa559 100644 --- a/packages/lib/src/styles/tokens.tsx +++ b/packages/lib/src/styles/tokens.tsx @@ -73,36 +73,46 @@ export const coreTokens: Record = { "--color-tertiary-700": "#6c5a12", "--color-tertiary-800": "#57490f", "--color-tertiary-900": "#3d3309", - "--color-success-50": "#f3fcf5", - "--color-success-100": "#d1f5db", - "--color-success-200": "#acecbe", - "--color-success-300": "#87e3a0", - "--color-success-400": "#53cb75", - "--color-success-500": "#47ae64", - "--color-success-600": "#39884f", - "--color-success-700": "#2a673b", - "--color-success-800": "#225230", - "--color-success-900": "#183921", - "--color-warning-50": "#fffbf6", - "--color-warning-100": "#fde9d2", - "--color-warning-200": "#fbd9b3", - "--color-warning-300": "#f9c78f", - "--color-warning-400": "#f5a344", - "--color-warning-500": "#d58a35", - "--color-warning-600": "#a76d2b", - "--color-warning-700": "#7f5121", - "--color-warning-800": "#66421a", - "--color-warning-900": "#3d3309", - "--color-error-50": "#fff7f6", - "--color-error-100": "#ffe6e4", - "--color-error-200": "#ffd3d0", - "--color-error-300": "#ffc1bd", - "--color-error-400": "#ff9896", - "--color-error-500": "#ff696f", - "--color-error-600": "#e33248", - "--color-error-700": "#a92c37", - "--color-error-800": "#87262d", - "--color-error-900": "#5b1f21", + "--color-semantic01-50": "#f8fcff", + "--color-semantic01-100": "#d9efff", + "--color-semantic01-200": "#bce3ff", + "--color-semantic01-300": "#a0d7ff", + "--color-semantic01-400": "#61bdff", + "--color-semantic01-500": "#30a1f1", + "--color-semantic01-600": "#267fbf", + "--color-semantic01-700": "#1d6091", + "--color-semantic01-800": "#174e74", + "--color-semantic01-900": "#103651", + "--color-semantic02-50": "#f3fcf5", + "--color-semantic02-100": "#d1f5db", + "--color-semantic02-200": "#acecbe", + "--color-semantic02-300": "#87e3a0", + "--color-semantic02-400": "#53cb75", + "--color-semantic02-500": "#47ae64", + "--color-semantic02-600": "#39884f", + "--color-semantic02-700": "#2a673b", + "--color-semantic02-800": "#225230", + "--color-semantic02-900": "#183921", + "--color-semantic03-50": "#fffbf6", + "--color-semantic03-100": "#fde9d2", + "--color-semantic03-200": "#fbd9b3", + "--color-semantic03-300": "#f9c78f", + "--color-semantic03-400": "#f5a344", + "--color-semantic03-500": "#d58a35", + "--color-semantic03-600": "#a76d2b", + "--color-semantic03-700": "#7f5121", + "--color-semantic03-800": "#66421a", + "--color-semantic03-900": "#3d3309", + "--color-semantic04-50": "#fff7f6", + "--color-semantic04-100": "#ffe6e4", + "--color-semantic04-200": "#ffd3d0", + "--color-semantic04-300": "#ffc1bd", + "--color-semantic04-400": "#ff9896", + "--color-semantic04-500": "#ff696f", + "--color-semantic04-600": "#e33248", + "--color-semantic04-700": "#a92c37", + "--color-semantic04-800": "#87262d", + "--color-semantic04-900": "#5b1f21", "--color-neutral-50": "#fbfbfb", "--color-neutral-100": "#ebebeb", "--color-neutral-200": "#dedede", @@ -156,10 +166,21 @@ export const coreTokens: Record = { }; export const aliasTokens: Record = { - "--border-color-error-light": "var(--color-error-300)", - "--border-color-error-medium": "var(--color-error-600)", - "--border-color-error-strong": "var(--color-error-700)", - "--border-color-error-stronger": "var(--color-error-800)", + "--border-color-info-lightest-halstack": "var(--color-semantic01-50)", + "--border-color-info-lighter-halstack": "var(--color-semantic01-100)", + "--border-color-info-light-halstack": "var(--color-semantic01-200)", + "--border-color-info-medium-halstack": "var(--color-semantic01-300)", + "--border-color-info-strong-halstack": "var(--color-semantic01-600)", + "--border-color-info-stronger-halstack": "var(--color-semantic01-700)", + "--border-color-info-strongest-halstack": "var(--color-semantic01-800)", + "--border-color-success-light": "var(--color-semantic02-300)", + "--border-color-success-medium": "var(--color-semantic02-600)", + "--border-color-warning-light": "var(--color-semantic03-300)", + "--border-color-warning-medium": "var(--color-semantic03-500)", + "--border-color-error-light": "var(--color-semantic04-300)", + "--border-color-error-medium": "var(--color-semantic04-600)", + "--border-color-error-strong": "var(--color-semantic04-700)", + "--border-color-error-stronger": "var(--color-semantic04-800)", "--border-color-neutral-bright": "var(--color-neutral-50)", "--border-color-neutral-brighter": "var(--color-absolutes-white)", "--border-color-neutral-dark": "var(--color-neutral-900)", @@ -180,22 +201,11 @@ export const aliasTokens: Record = { "--border-color-secondary-strong": "var(--color-secondary-600)", "--border-color-secondary-stronger": "var(--color-secondary-700)", "--border-color-secondary-strongest": "var(--color-secondary-800)", - "--border-color-success-light": "var(--color-success-300)", - "--border-color-success-medium": "var(--color-success-600)", - "--border-color-warning-light": "var(--color-warning-300)", - "--border-color-warning-medium": "var(--color-warning-500)", "--color-bg-overlay-dark": "var(--color-alpha-800-a)", "--color-bg-yellow-light": "var(--color-tertiary-100)", "--color-bg-alpha-light": "var(--color-alpha-300-a)", "--color-bg-alpha-medium": "var(--color-alpha-800-a)", "--color-bg-alpha-strong": "var(--color-alpha-900-a)", - "--color-bg-error-light": "var(--color-error-200)", - "--color-bg-error-lighter": "var(--color-error-100)", - "--color-bg-error-lightest": "var(--color-error-50)", - "--color-bg-error-medium": "var(--color-error-300)", - "--color-bg-error-strong": "var(--color-error-600)", - "--color-bg-error-stronger": "var(--color-error-700)", - "--color-bg-error-strongest": "var(--color-error-800)", "--color-bg-neutral-light": "var(--color-neutral-100)", "--color-bg-neutral-lighter": "var(--color-neutral-50)", "--color-bg-neutral-lightest": "var(--color-absolutes-white)", @@ -217,25 +227,55 @@ export const aliasTokens: Record = { "--color-bg-secondary-strong": "var(--color-secondary-600)", "--color-bg-secondary-stronger": "var(--color-secondary-700)", "--color-bg-secondary-strongest": "var(--color-secondary-800)", - "--color-bg-success-light": "var(--color-success-200)", - "--color-bg-success-lighter": "var(--color-success-100)", - "--color-bg-success-lightest": "var(--color-success-50)", - "--color-bg-success-medium": "var(--color-success-300)", - "--color-bg-success-strong": "var(--color-success-600)", - "--color-bg-success-stronger": "var(--color-success-700)", - "--color-bg-success-strongest": "var(--color-success-800)", - "--color-bg-warning-light": "var(--color-warning-200)", - "--color-bg-warning-lighter": "var(--color-warning-100)", - "--color-bg-warning-lightest": "var(--color-warning-50)", - "--color-bg-warning-medium": "var(--color-warning-300)", - "--color-bg-warning-strong": "var(--color-warning-500)", - "--color-bg-warning-stronger": "var(--color-warning-600)", - "--color-bg-warning-strongest": "var(--color-warning-700)", - "--color-fg-error-light": "var(--color-error-300)", - "--color-fg-error-lighter": "var(--color-error-200)", - "--color-fg-error-medium": "var(--color-error-600)", - "--color-fg-error-strong": "var(--color-error-700)", - "--color-fg-error-stronger": "var(--color-error-800)", + "--color-bg-info-lightest": "var(--color-semantic01-50)", + "--color-bg-info-lighter": "var(--color-semantic01-100)", + "--color-bg-info-light": "var(--color-semantic01-200)", + "--color-bg-info-medium": "var(--color-semantic01-300)", + "--color-bg-info-strong": "var(--color-semantic01-600)", + "--color-bg-info-stronger": "var(--color-semantic01-700)", + "--color-bg-info-strongest": "var(--color-semantic01-800)", + "--color-bg-success-light": "var(--color-semantic02-200)", + "--color-bg-success-lighter": "var(--color-semantic02-100)", + "--color-bg-success-lightest": "var(--color-semantic02-50)", + "--color-bg-success-medium": "var(--color-semantic02-300)", + "--color-bg-success-strong": "var(--color-semantic02-600)", + "--color-bg-success-stronger": "var(--color-semantic02-700)", + "--color-bg-success-strongest": "var(--color-semantic02-800)", + "--color-bg-warning-light": "var(--color-semantic03-200)", + "--color-bg-warning-lighter": "var(--color-semantic03-100)", + "--color-bg-warning-lightest": "var(--color-semantic03-50)", + "--color-bg-warning-medium": "var(--color-semantic03-300)", + "--color-bg-warning-strong": "var(--color-semantic03-500)", + "--color-bg-warning-stronger": "var(--color-semantic03-600)", + "--color-bg-warning-strongest": "var(--color-semantic03-700)", + "--color-bg-error-light": "var(--color-semantic04-200)", + "--color-bg-error-lighter": "var(--color-semantic04-100)", + "--color-bg-error-lightest": "var(--color-semantic04-50)", + "--color-bg-error-medium": "var(--color-semantic04-300)", + "--color-bg-error-strong": "var(--color-semantic04-600)", + "--color-bg-error-stronger": "var(--color-semantic04-700)", + "--color-bg-error-strongest": "var(--color-semantic04-800)", + "--color-fg-info-lightest": "var(--color-semantic01-50)", + "--color-fg-info-lighter": "var(--color-semantic01-100)", + "--color-fg-info-light": "var(--color-semantic01-200)", + "--color-fg-info-medium": "var(--color-semantic01-300)", + "--color-fg-info-strong": "var(--color-semantic01-600)", + "--color-fg-info-stronger": "var(--color-semantic01-700)", + "--color-fg-info-strongest": "var(--color-semantic01-800)", + "--color-fg-success-light": "var(--color-semantic02-300)", + "--color-fg-success-lighter": "var(--color-semantic02-200)", + "--color-fg-success-medium": "var(--color-semantic02-600)", + "--color-fg-success-strong": "var(--color-semantic02-700)", + "--color-fg-success-stronger": "var(--color-semantic02-800)", + "--color-fg-warning-light": "var(--color-semantic03-300)", + "--color-fg-warning-medium": "var(--color-semantic03-500)", + "--color-fg-warning-strong": "var(--color-semantic03-600)", + "--color-fg-warning-stronger": "var(--color-semantic03-800)", + "--color-fg-error-light": "var(--color-semantic04-300)", + "--color-fg-error-lighter": "var(--color-semantic04-200)", + "--color-fg-error-medium": "var(--color-semantic04-600)", + "--color-fg-error-strong": "var(--color-semantic04-700)", + "--color-fg-error-stronger": "var(--color-semantic04-800)", "--color-fg-neutral-bright": "var(--color-absolutes-white)", "--color-fg-neutral-dark": "var(--color-neutral-900)", "--color-fg-neutral-light": "var(--color-neutral-400)", @@ -258,15 +298,6 @@ export const aliasTokens: Record = { "--color-fg-secondary-strong": "var(--color-secondary-700)", "--color-fg-secondary-stronger": "var(--color-secondary-800)", "--color-fg-secondary-strongest": "var(--color-secondary-900)", - "--color-fg-success-light": "var(--color-success-300)", - "--color-fg-success-lighter": "var(--color-success-200)", - "--color-fg-success-medium": "var(--color-success-600)", - "--color-fg-success-strong": "var(--color-success-700)", - "--color-fg-success-stronger": "var(--color-success-800)", - "--color-fg-warning-light": "var(--color-warning-300)", - "--color-fg-warning-medium": "var(--color-warning-500)", - "--color-fg-warning-strong": "var(--color-warning-600)", - "--color-fg-warning-stronger": "var(--color-warning-800)", "--shadow-dark": "var(--color-alpha-400-a)", "--shadow-light": "var(--color-alpha-300-a)", "--border-radius-none": "var(--dimensions-0)", diff --git a/packages/lib/src/styles/variables.css b/packages/lib/src/styles/variables.css index d88b33dc9..cad795574 100644 --- a/packages/lib/src/styles/variables.css +++ b/packages/lib/src/styles/variables.css @@ -75,36 +75,46 @@ --color-tertiary-700: #6c5a12; --color-tertiary-800: #57490f; --color-tertiary-900: #3d3309; - --color-success-50: #f3fcf5; - --color-success-100: #d1f5db; - --color-success-200: #acecbe; - --color-success-300: #87e3a0; - --color-success-400: #53cb75; - --color-success-500: #47ae64; - --color-success-600: #39884f; - --color-success-700: #2a673b; - --color-success-800: #225230; - --color-success-900: #183921; - --color-warning-50: #fffbf6; - --color-warning-100: #fde9d2; - --color-warning-200: #fbd9b3; - --color-warning-300: #f9c78f; - --color-warning-400: #f5a344; - --color-warning-500: #d58a35; - --color-warning-600: #a76d2b; - --color-warning-700: #7f5121; - --color-warning-800: #66421a; - --color-warning-900: #3d3309; - --color-error-50: #fff7f6; - --color-error-100: #ffe6e4; - --color-error-200: #ffd3d0; - --color-error-300: #ffc1bd; - --color-error-400: #ff9896; - --color-error-500: #ff696f; - --color-error-600: #e33248; - --color-error-700: #a92c37; - --color-error-800: #87262d; - --color-error-900: #5b1f21; + --color-semantic01-50: #f8fcff; + --color-semantic01-100: #d9efff; + --color-semantic01-200: #bce3ff; + --color-semantic01-300: #a0d7ff; + --color-semantic01-400: #61bdff; + --color-semantic01-500: #30a1f1; + --color-semantic01-600: #267fbf; + --color-semantic01-700: #1d6091; + --color-semantic01-800: #174e74; + --color-semantic01-900: #103651; + --color-semantic02-50: #f3fcf5; + --color-semantic02-100: #d1f5db; + --color-semantic02-200: #acecbe; + --color-semantic02-300: #87e3a0; + --color-semantic02-400: #53cb75; + --color-semantic02-500: #47ae64; + --color-semantic02-600: #39884f; + --color-semantic02-700: #2a673b; + --color-semantic02-800: #225230; + --color-semantic02-900: #183921; + --color-semantic03-50: #fffbf6; + --color-semantic03-100: #fde9d2; + --color-semantic03-200: #fbd9b3; + --color-semantic03-300: #f9c78f; + --color-semantic03-400: #f5a344; + --color-semantic03-500: #d58a35; + --color-semantic03-600: #a76d2b; + --color-semantic03-700: #7f5121; + --color-semantic03-800: #66421a; + --color-semantic03-900: #3d3309; + --color-semantic04-50: #fff7f6; + --color-semantic04-100: #ffe6e4; + --color-semantic04-200: #ffd3d0; + --color-semantic04-300: #ffc1bd; + --color-semantic04-400: #ff9896; + --color-semantic04-500: #ff696f; + --color-semantic04-600: #e33248; + --color-semantic04-700: #a92c37; + --color-semantic04-800: #87262d; + --color-semantic04-900: #5b1f21; --color-neutral-50: #fbfbfb; --color-neutral-100: #ebebeb; --color-neutral-200: #dedede; @@ -157,10 +167,21 @@ --line-style-solid: solid; /* Alias tokens */ - --border-color-error-light: var(--color-error-300); - --border-color-error-medium: var(--color-error-600); - --border-color-error-strong: var(--color-error-700); - --border-color-error-stronger: var(--color-error-800); + --border-color-info-lightest-halstack: var(--color-semantic01-50); + --border-color-info-lighter-halstack: var(--color-semantic01-100); + --border-color-info-light-halstack: var(--color-semantic01-200); + --border-color-info-medium-halstack: var(--color-semantic01-300); + --border-color-info-strong-halstack: var(--color-semantic01-600); + --border-color-info-stronger-halstack: var(--color-semantic01-700); + --border-color-info-strongest-halstack: var(--color-semantic01-800); + --border-color-success-light: var(--color-semantic02-300); + --border-color-success-medium: var(--color-semantic02-600); + --border-color-warning-light: var(--color-semantic03-300); + --border-color-warning-medium: var(--color-semantic03-500); + --border-color-error-light: var(--color-semantic04-300); + --border-color-error-medium: var(--color-semantic04-600); + --border-color-error-strong: var(--color-semantic04-700); + --border-color-error-stronger: var(--color-semantic04-800); --border-color-neutral-bright: var(--color-neutral-50); --border-color-neutral-brighter: var(--color-absolutes-white); --border-color-neutral-dark: var(--color-neutral-900); @@ -181,22 +202,11 @@ --border-color-secondary-strong: var(--color-secondary-600); --border-color-secondary-stronger: var(--color-secondary-700); --border-color-secondary-strongest: var(--color-secondary-800); - --border-color-success-light: var(--color-success-300); - --border-color-success-medium: var(--color-success-600); - --border-color-warning-light: var(--color-warning-300); - --border-color-warning-medium: var(--color-warning-500); --color-bg-overlay-dark: var(--color-alpha-800-a); --color-bg-yellow-light: var(--color-tertiary-100); --color-bg-alpha-light: var(--color-alpha-300-a); --color-bg-alpha-medium: var(--color-alpha-800-a); --color-bg-alpha-strong: var(--color-alpha-900-a); - --color-bg-error-light: var(--color-error-200); - --color-bg-error-lighter: var(--color-error-100); - --color-bg-error-lightest: var(--color-error-50); - --color-bg-error-medium: var(--color-error-300); - --color-bg-error-strong: var(--color-error-600); - --color-bg-error-stronger: var(--color-error-700); - --color-bg-error-strongest: var(--color-error-800); --color-bg-neutral-light: var(--color-neutral-100); --color-bg-neutral-lighter: var(--color-neutral-50); --color-bg-neutral-lightest: var(--color-absolutes-white); @@ -218,25 +228,55 @@ --color-bg-secondary-strong: var(--color-secondary-600); --color-bg-secondary-stronger: var(--color-secondary-700); --color-bg-secondary-strongest: var(--color-secondary-800); - --color-bg-success-light: var(--color-success-200); - --color-bg-success-lighter: var(--color-success-100); - --color-bg-success-lightest: var(--color-success-50); - --color-bg-success-medium: var(--color-success-300); - --color-bg-success-strong: var(--color-success-600); - --color-bg-success-stronger: var(--color-success-700); - --color-bg-success-strongest: var(--color-success-800); - --color-bg-warning-light: var(--color-warning-200); - --color-bg-warning-lighter: var(--color-warning-100); - --color-bg-warning-lightest: var(--color-warning-50); - --color-bg-warning-medium: var(--color-warning-300); - --color-bg-warning-strong: var(--color-warning-500); - --color-bg-warning-stronger: var(--color-warning-600); - --color-bg-warning-strongest: var(--color-warning-700); - --color-fg-error-light: var(--color-error-300); - --color-fg-error-lighter: var(--color-error-200); - --color-fg-error-medium: var(--color-error-600); - --color-fg-error-strong: var(--color-error-700); - --color-fg-error-stronger: var(--color-error-800); + --color-bg-info-lightest: var(--color-semantic01-50); + --color-bg-info-lighter: var(--color-semantic01-100); + --color-bg-info-light: var(--color-semantic01-200); + --color-bg-info-medium: var(--color-semantic01-300); + --color-bg-info-strong: var(--color-semantic01-600); + --color-bg-info-stronger: var(--color-semantic01-700); + --color-bg-info-strongest: var(--color-semantic01-800); + --color-bg-success-light: var(--color-semantic02-200); + --color-bg-success-lighter: var(--color-semantic02-100); + --color-bg-success-lightest: var(--color-semantic02-50); + --color-bg-success-medium: var(--color-semantic02-300); + --color-bg-success-strong: var(--color-semantic02-600); + --color-bg-success-stronger: var(--color-semantic02-700); + --color-bg-success-strongest: var(--color-semantic02-800); + --color-bg-warning-light: var(--color-semantic03-200); + --color-bg-warning-lighter: var(--color-semantic03-100); + --color-bg-warning-lightest: var(--color-semantic03-50); + --color-bg-warning-medium: var(--color-semantic03-300); + --color-bg-warning-strong: var(--color-semantic03-500); + --color-bg-warning-stronger: var(--color-semantic03-600); + --color-bg-warning-strongest: var(--color-semantic03-700); + --color-bg-error-light: var(--color-semantic04-200); + --color-bg-error-lighter: var(--color-semantic04-100); + --color-bg-error-lightest: var(--color-semantic04-50); + --color-bg-error-medium: var(--color-semantic04-300); + --color-bg-error-strong: var(--color-semantic04-600); + --color-bg-error-stronger: var(--color-semantic04-700); + --color-bg-error-strongest: var(--color-semantic04-800); + --color-fg-info-lightest: var(--color-semantic01-50); + --color-fg-info-lighter: var(--color-semantic01-100); + --color-fg-info-light: var(--color-semantic01-200); + --color-fg-info-medium: var(--color-semantic01-300); + --color-fg-info-strong: var(--color-semantic01-600); + --color-fg-info-stronger: var(--color-semantic01-700); + --color-fg-info-strongest: var(--color-semantic01-800); + --color-fg-success-light: var(--color-semantic02-300); + --color-fg-success-lighter: var(--color-semantic02-200); + --color-fg-success-medium: var(--color-semantic02-600); + --color-fg-success-strong: var(--color-semantic02-700); + --color-fg-success-stronger: var(--color-semantic02-800); + --color-fg-warning-light: var(--color-semantic03-300); + --color-fg-warning-medium: var(--color-semantic03-500); + --color-fg-warning-strong: var(--color-semantic03-600); + --color-fg-warning-stronger: var(--color-semantic03-800); + --color-fg-error-light: var(--color-semantic04-300); + --color-fg-error-lighter: var(--color-semantic04-200); + --color-fg-error-medium: var(--color-semantic04-600); + --color-fg-error-strong: var(--color-semantic04-700); + --color-fg-error-stronger: var(--color-semantic04-800); --color-fg-neutral-bright: var(--color-absolutes-white); --color-fg-neutral-dark: var(--color-neutral-900); --color-fg-neutral-light: var(--color-neutral-400); @@ -259,15 +299,6 @@ --color-fg-secondary-strong: var(--color-secondary-700); --color-fg-secondary-stronger: var(--color-secondary-800); --color-fg-secondary-strongest: var(--color-secondary-900); - --color-fg-success-light: var(--color-success-300); - --color-fg-success-lighter: var(--color-success-200); - --color-fg-success-medium: var(--color-success-600); - --color-fg-success-strong: var(--color-success-700); - --color-fg-success-stronger: var(--color-success-800); - --color-fg-warning-light: var(--color-warning-300); - --color-fg-warning-medium: var(--color-warning-500); - --color-fg-warning-strong: var(--color-warning-600); - --color-fg-warning-stronger: var(--color-warning-800); --border-radius-none: var(--dimensions-0); --border-radius-xs: var(--dimensions-2); --border-radius-s: var(--dimensions-4);