From 9346fc65c5c766f80968081fac9b60cbad5d2194 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Fri, 3 Oct 2025 12:48:24 +0200 Subject: [PATCH 1/4] Reimplemented button using semantic token --- packages/lib/src/button/utils.ts | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index 8d6374de3..abd57501a 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -61,11 +61,11 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-success-light);`; break; case "info": - enabled = `background-color: var(--color-bg-secondary-strong);`; - hover = `background-color: var(--color-bg-secondary-stronger);`; - active = `background-color: var(--color-bg-secondary-strongest);`; - disabled = `background-color: var(--color-bg-secondary-lightest); - color: var(--color-fg-secondary-lighter);`; + enabled = `background-color: var(--color-bg-info-strong);`; + hover = `background-color: var(--color-bg-info-stronger);`; + active = `background-color: var(--color-bg-info-strongest);`; + disabled = `background-color: var(--color-bg-info-lightest); + color: var(--color-fg-info-lighter);`; break; } return `${commonStyles} @@ -124,14 +124,14 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | color: var(--color-fg-success-light);`; break; case "info": - enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-secondary-strong); - color: var(--color-fg-secondary-medium);`; - hover = `background: var(--color-bg-secondary-strong); + enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-strong); + color: var(--color-fg-info-medium);`; + hover = `background: var(--color-bg-info-strong); color: var(--color-fg-neutral-bright);`; - active = `background-color: var(--color-bg-secondary-stronger); + active = `background-color: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; - disabled = `border-color: var(--border-color-secondary-light); - color: var(--color-fg-secondary-lighter);`; + disabled = `border-color: var(--border-color-info-light); + color: var(--color-fg-info-lighter);`; break; } return `${commonStyles} @@ -175,10 +175,10 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | disabled = `color: var(--color-fg-success-light);`; break; case "info": - enabled = `color: var(--color-fg-secondary-medium);`; - hover = `background-color: var(--color-bg-secondary-lighter);`; - active = `background-color: var(--color-bg-secondary-light);`; - disabled = `color: var(--color-fg-secondary-lighter);`; + enabled = `color: var(--color-fg-info-medium);`; + hover = `background-color: var(--color-bg-info-lighter);`; + active = `background-color: var(--color-bg-info-light);`; + disabled = `color: var(--color-fg-info-lighter);`; break; } return `${commonStyles} From f94ea4a94c006b5ec6d17b8f288dd0d43aab2299 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 19 Nov 2025 16:15:35 +0100 Subject: [PATCH 2/4] Fixed mapping from info values --- packages/lib/src/button/utils.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/lib/src/button/utils.ts b/packages/lib/src/button/utils.ts index abd57501a..9bd0f81cb 100644 --- a/packages/lib/src/button/utils.ts +++ b/packages/lib/src/button/utils.ts @@ -65,7 +65,7 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | hover = `background-color: var(--color-bg-info-stronger);`; active = `background-color: var(--color-bg-info-strongest);`; disabled = `background-color: var(--color-bg-info-lightest); - color: var(--color-fg-info-lighter);`; + color: var(--color-fg-info-medium);`; break; } return `${commonStyles} @@ -125,13 +125,13 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | break; case "info": enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-strong); - color: var(--color-fg-info-medium);`; + color: var(--color-fg-info-strong);`; hover = `background: var(--color-bg-info-strong); color: var(--color-fg-neutral-bright);`; active = `background-color: var(--color-bg-info-stronger); color: var(--color-fg-neutral-bright);`; - disabled = `border-color: var(--border-color-info-light); - color: var(--color-fg-info-lighter);`; + disabled = `border-color: var(--border-color-info-medium); + color: var(--color-fg-info-medium);`; break; } return `${commonStyles} @@ -175,10 +175,10 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" | disabled = `color: var(--color-fg-success-light);`; break; case "info": - enabled = `color: var(--color-fg-info-medium);`; + enabled = `color: var(--color-fg-info-strong);`; hover = `background-color: var(--color-bg-info-lighter);`; active = `background-color: var(--color-bg-info-light);`; - disabled = `color: var(--color-fg-info-lighter);`; + disabled = `color: var(--color-fg-info-medium);`; break; } return `${commonStyles} From b982039fe4b47fd964108f1981f913603f3ef29a Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 19 Nov 2025 16:23:49 +0100 Subject: [PATCH 3/4] Fixed tokens in HalstackContext stories --- packages/lib/src/HalstackContext.stories.tsx | 38 ++++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/lib/src/HalstackContext.stories.tsx b/packages/lib/src/HalstackContext.stories.tsx index 9354e19e2..06fb5ac3f 100644 --- a/packages/lib/src/HalstackContext.stories.tsx +++ b/packages/lib/src/HalstackContext.stories.tsx @@ -36,16 +36,16 @@ const Provider = () => { "--color-primary-700": "#2b470b", "--color-primary-800": "#1c2f07", "--color-primary-900": "#0d1503", - "--color-secondary-50": "#fff9d6", - "--color-secondary-100": "#ffed99", - "--color-secondary-200": "#ffe066", - "--color-secondary-300": "#e6c84d", - "--color-secondary-400": "#ccad33", - "--color-secondary-500": "#b39426", - "--color-secondary-600": "#8f741f", - "--color-secondary-700": "#6b5517", - "--color-secondary-800": "#47370f", - "--color-secondary-900": "#241b08", + "--color-semantic01-50": "#fff9d6", + "--color-semantic01-100": "#ffed99", + "--color-semantic01-200": "#ffe066", + "--color-semantic01-300": "#e6c84d", + "--color-semantic01-400": "#ccad33", + "--color-semantic01-500": "#b39426", + "--color-semantic01-600": "#8f741f", + "--color-semantic01-700": "#6b5517", + "--color-semantic01-800": "#47370f", + "--color-semantic01-900": "#241b08", "--color-alpha-800-a": "#9a2257cc", }); const options = [ @@ -76,15 +76,15 @@ const Provider = () => { "--color-primary-800": "#441423", "--color-primary-900": "#220a12", "--color-brown-50": "#f3e6db", - "--color-secondary-100": "#e2c7a9", - "--color-secondary-200": "#d1a577", - "--color-secondary-300": "#b88252", - "--color-secondary-400": "#99673f", - "--color-secondary-500": "#7a5232", - "--color-secondary-600": "#5c3f26", - "--color-secondary-700": "#3e2b19", - "--color-secondary-800": "#21170d", - "--color-secondary-900": "#100b06", + "--color-semantic01-100": "#e2c7a9", + "--color-semantic01-200": "#d1a577", + "--color-semantic01-300": "#b88252", + "--color-semantic01-400": "#99673f", + "--color-semantic01-500": "#7a5232", + "--color-semantic01-600": "#5c3f26", + "--color-semantic01-700": "#3e2b19", + "--color-semantic01-800": "#21170d", + "--color-semantic01-900": "#100b06", "--color-alpha-800-a": "#fabadacc", }) } From f5063cd2d8a562ff7c35560323dbbc252b222781 Mon Sep 17 00:00:00 2001 From: Mil4n0r Date: Wed, 19 Nov 2025 17:01:55 +0100 Subject: [PATCH 4/4] Removed typo from alias tokens --- packages/lib/src/styles/tokens.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/lib/src/styles/tokens.tsx b/packages/lib/src/styles/tokens.tsx index f8e5aa559..ae41a7996 100644 --- a/packages/lib/src/styles/tokens.tsx +++ b/packages/lib/src/styles/tokens.tsx @@ -166,13 +166,13 @@ export const coreTokens: Record = { }; export const aliasTokens: Record = { - "--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-info-lightest": "var(--color-semantic01-50)", + "--border-color-info-lighter": "var(--color-semantic01-100)", + "--border-color-info-light": "var(--color-semantic01-200)", + "--border-color-info-medium": "var(--color-semantic01-300)", + "--border-color-info-strong": "var(--color-semantic01-600)", + "--border-color-info-stronger": "var(--color-semantic01-700)", + "--border-color-info-strongest": "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)",