Skip to content

Added new semantic tokens #2298

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Jialecl merged 1 commit into from
Oct 2, 2025
Merged

Added new semantic tokens #2298

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
177 changes: 104 additions & 73 deletions packages/lib/src/styles/tokens.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,36 +73,46 @@ export const coreTokens: Record<string, string | number> = {
"--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",
Expand Down Expand Up @@ -156,10 +166,21 @@ export const coreTokens: Record<string, string | number> = {
};

export const aliasTokens: Record<string, string | number> = {
"--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)",
Expand All @@ -180,22 +201,11 @@ export const aliasTokens: Record<string, string | number> = {
"--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)",
Expand All @@ -217,25 +227,55 @@ export const aliasTokens: Record<string, string | number> = {
"--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)",
Expand All @@ -258,15 +298,6 @@ export const aliasTokens: Record<string, string | number> = {
"--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)",
Expand Down
Loading