Skip to content

Commit 6048ed2

Browse files
JialeclJialecl
authored
Merge pull request #2305 from dxc-technology/Mil4n0r/fix_button_semantic
Reimplemented button using semantic token
2 parents 9dd8053 + 97b5f0a commit 6048ed2

3 files changed

Lines changed: 41 additions & 41 deletions

File tree

‎packages/lib/src/HalstackContext.stories.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -36,16 +36,16 @@ const Provider = () => {
3636
"--color-primary-700": "#2b470b",
3737
"--color-primary-800": "#1c2f07",
3838
"--color-primary-900": "#0d1503",
39-
"--color-secondary-50": "#fff9d6",
40-
"--color-secondary-100": "#ffed99",
41-
"--color-secondary-200": "#ffe066",
42-
"--color-secondary-300": "#e6c84d",
43-
"--color-secondary-400": "#ccad33",
44-
"--color-secondary-500": "#b39426",
45-
"--color-secondary-600": "#8f741f",
46-
"--color-secondary-700": "#6b5517",
47-
"--color-secondary-800": "#47370f",
48-
"--color-secondary-900": "#241b08",
39+
"--color-semantic01-50": "#fff9d6",
40+
"--color-semantic01-100": "#ffed99",
41+
"--color-semantic01-200": "#ffe066",
42+
"--color-semantic01-300": "#e6c84d",
43+
"--color-semantic01-400": "#ccad33",
44+
"--color-semantic01-500": "#b39426",
45+
"--color-semantic01-600": "#8f741f",
46+
"--color-semantic01-700": "#6b5517",
47+
"--color-semantic01-800": "#47370f",
48+
"--color-semantic01-900": "#241b08",
4949
"--color-alpha-800-a": "#9a2257cc",
5050
});
5151
const options = [
@@ -76,15 +76,15 @@ const Provider = () => {
7676
"--color-primary-800": "#441423",
7777
"--color-primary-900": "#220a12",
7878
"--color-brown-50": "#f3e6db",
79-
"--color-secondary-100": "#e2c7a9",
80-
"--color-secondary-200": "#d1a577",
81-
"--color-secondary-300": "#b88252",
82-
"--color-secondary-400": "#99673f",
83-
"--color-secondary-500": "#7a5232",
84-
"--color-secondary-600": "#5c3f26",
85-
"--color-secondary-700": "#3e2b19",
86-
"--color-secondary-800": "#21170d",
87-
"--color-secondary-900": "#100b06",
79+
"--color-semantic01-100": "#e2c7a9",
80+
"--color-semantic01-200": "#d1a577",
81+
"--color-semantic01-300": "#b88252",
82+
"--color-semantic01-400": "#99673f",
83+
"--color-semantic01-500": "#7a5232",
84+
"--color-semantic01-600": "#5c3f26",
85+
"--color-semantic01-700": "#3e2b19",
86+
"--color-semantic01-800": "#21170d",
87+
"--color-semantic01-900": "#100b06",
8888
"--color-alpha-800-a": "#fabadacc",
8989
})
9090
}

‎packages/lib/src/button/utils.ts‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -61,11 +61,11 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" |
6161
color: var(--color-fg-success-light);`;
6262
break;
6363
case "info":
64-
enabled = `background-color: var(--color-bg-secondary-strong);`;
65-
hover = `background-color: var(--color-bg-secondary-stronger);`;
66-
active = `background-color: var(--color-bg-secondary-strongest);`;
67-
disabled = `background-color: var(--color-bg-secondary-lightest);
68-
color: var(--color-fg-secondary-lighter);`;
64+
enabled = `background-color: var(--color-bg-info-strong);`;
65+
hover = `background-color: var(--color-bg-info-stronger);`;
66+
active = `background-color: var(--color-bg-info-strongest);`;
67+
disabled = `background-color: var(--color-bg-info-lightest);
68+
color: var(--color-fg-info-medium);`;
6969
break;
7070
}
7171
return `${commonStyles}
@@ -124,14 +124,14 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" |
124124
color: var(--color-fg-success-light);`;
125125
break;
126126
case "info":
127-
enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-secondary-strong);
128-
color: var(--color-fg-secondary-medium);`;
129-
hover = `background: var(--color-bg-secondary-strong);
127+
enabled = `border: var(--border-width-s) var(--border-style-default) var(--border-color-info-strong);
128+
color: var(--color-fg-info-strong);`;
129+
hover = `background: var(--color-bg-info-strong);
130130
color: var(--color-fg-neutral-bright);`;
131-
active = `background-color: var(--color-bg-secondary-stronger);
131+
active = `background-color: var(--color-bg-info-stronger);
132132
color: var(--color-fg-neutral-bright);`;
133-
disabled = `border-color: var(--border-color-secondary-light);
134-
color: var(--color-fg-secondary-lighter);`;
133+
disabled = `border-color: var(--border-color-info-medium);
134+
color: var(--color-fg-info-medium);`;
135135
break;
136136
}
137137
return `${commonStyles}
@@ -175,10 +175,10 @@ export const getButtonStyles = (mode: Mode, semantic: Semantic | "unselected" |
175175
disabled = `color: var(--color-fg-success-light);`;
176176
break;
177177
case "info":
178-
enabled = `color: var(--color-fg-secondary-medium);`;
179-
hover = `background-color: var(--color-bg-secondary-lighter);`;
180-
active = `background-color: var(--color-bg-secondary-light);`;
181-
disabled = `color: var(--color-fg-secondary-lighter);`;
178+
enabled = `color: var(--color-fg-info-strong);`;
179+
hover = `background-color: var(--color-bg-info-lighter);`;
180+
active = `background-color: var(--color-bg-info-light);`;
181+
disabled = `color: var(--color-fg-info-medium);`;
182182
break;
183183
}
184184
return `${commonStyles}

‎packages/lib/src/styles/tokens.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -166,13 +166,13 @@ export const coreTokens: Record<string, string | number> = {
166166
};
167167

168168
export const aliasTokens: Record<string, string | number> = {
169-
"--border-color-info-lightest-halstack": "var(--color-semantic01-50)",
170-
"--border-color-info-lighter-halstack": "var(--color-semantic01-100)",
171-
"--border-color-info-light-halstack": "var(--color-semantic01-200)",
172-
"--border-color-info-medium-halstack": "var(--color-semantic01-300)",
173-
"--border-color-info-strong-halstack": "var(--color-semantic01-600)",
174-
"--border-color-info-stronger-halstack": "var(--color-semantic01-700)",
175-
"--border-color-info-strongest-halstack": "var(--color-semantic01-800)",
169+
"--border-color-info-lightest": "var(--color-semantic01-50)",
170+
"--border-color-info-lighter": "var(--color-semantic01-100)",
171+
"--border-color-info-light": "var(--color-semantic01-200)",
172+
"--border-color-info-medium": "var(--color-semantic01-300)",
173+
"--border-color-info-strong": "var(--color-semantic01-600)",
174+
"--border-color-info-stronger": "var(--color-semantic01-700)",
175+
"--border-color-info-strongest": "var(--color-semantic01-800)",
176176
"--border-color-success-light": "var(--color-semantic02-300)",
177177
"--border-color-success-medium": "var(--color-semantic02-600)",
178178
"--border-color-warning-light": "var(--color-semantic03-300)",

0 commit comments

Comments
 (0)