Skip to content

Commit efc380d

Browse files
YakutocYakutoc
committed
fix(button): fix hover state
1 parent 4a8198c commit efc380d

File tree

2 files changed

+57
-25
lines changed

2 files changed

+57
-25
lines changed

‎packages/sdds-platform-ai/src/components/Button/Button.config.ts‎

Lines changed: 30 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,16 @@ export const config = {
1010
view: {
1111
default: css`
1212
${buttonTokens.buttonColor}: var(--inverse-text-primary);
13+
1314
${buttonTokens.buttonTextColor}: var(--inverse-text-primary);
1415
${buttonTokens.buttonIconColor}: var(--inverse-text-primary);
1516
${buttonTokens.buttonValueColor}: var(--inverse-text-secondary);
17+
1618
${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
19+
${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
20+
${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
21+
1722
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
18-
${buttonTokens.buttonColorHover}: var(--inverse-text-primary-hover);
19-
${buttonTokens.buttonColorActive}: var(--inverse-text-primary-active);
2023
`,
2124
accent: css`
2225
${buttonTokens.buttonColor}: var(--text-primary);
@@ -39,8 +42,8 @@ export const config = {
3942
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
4043
4144
${buttonTokens.buttonBorderColor}: var(--outline-solid-default);
42-
${buttonTokens.buttonBorderColorHover}: var(--outline-solid-default);
43-
${buttonTokens.buttonBorderColorActive}: var(--outline-solid-default);
45+
${buttonTokens.buttonBorderColorHover}: var(--outline-solid-default-hover);
46+
${buttonTokens.buttonBorderColorActive}: var(--outline-solid-default-active);
4447
`,
4548
clear: css`
4649
${buttonTokens.buttonColor}: var(--text-primary);
@@ -49,49 +52,60 @@ export const config = {
4952
${buttonTokens.buttonValueColor}: var(--text-secondary);
5053
5154
${buttonTokens.buttonBackgroundColor}: var(--surface-clear);
55+
${buttonTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default);
56+
${buttonTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default);
57+
5258
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
53-
${buttonTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
54-
${buttonTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
5559
`,
5660
positive: css`
5761
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
5862
${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
5963
${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
6064
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
6165
${buttonTokens.buttonBackgroundColor}: var(--surface-positive);
62-
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
6366
${buttonTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
6467
${buttonTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
68+
69+
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
6570
`,
6671
warning: css`
6772
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
6873
${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
6974
${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
7075
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
76+
7177
${buttonTokens.buttonBackgroundColor}: var(--surface-warning);
72-
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
7378
${buttonTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
7479
${buttonTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
80+
81+
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
7582
`,
7683
negative: css`
7784
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
7885
${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
7986
${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
8087
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
88+
8189
${buttonTokens.buttonBackgroundColor}: var(--surface-negative);
82-
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
8390
${buttonTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
8491
${buttonTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
92+
93+
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
8594
`,
8695
dark: css`
8796
${buttonTokens.buttonColor}: var(--on-dark-text-primary);
97+
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
98+
${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
99+
88100
${buttonTokens.buttonTextColor}: var(--on-dark-text-primary);
89101
${buttonTokens.buttonIconColor}: var(--on-dark-text-primary);
90102
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
103+
91104
${buttonTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
105+
${buttonTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
106+
${buttonTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
107+
92108
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
93-
${buttonTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
94-
${buttonTokens.buttonColorActive}: var(--on-dark-text-primary-active);
95109
`,
96110
black: css`
97111
${buttonTokens.buttonColor}: var(--text-accent);
@@ -101,6 +115,8 @@ export const config = {
101115
${buttonTokens.buttonValueColor}: var(--on-dark-text-secondary);
102116
103117
${buttonTokens.buttonBackgroundColor}: var(--surface-solid-default);
118+
${buttonTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
119+
${buttonTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
104120
105121
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
106122
`,
@@ -114,6 +130,9 @@ export const config = {
114130
${buttonTokens.buttonValueColor}: var(--on-light-text-secondary);
115131
116132
${buttonTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
133+
${buttonTokens.buttonBackgroundColorHover}: var(--surface-clear);
134+
${buttonTokens.buttonBackgroundColorActive}: var(--surface-clear);
135+
117136
${buttonTokens.buttonLoadingBackgroundColor}: var(${buttonTokens.buttonBackgroundColor});
118137
`,
119138
},

‎packages/sdds-platform-ai/src/components/ButtonGroup/ButtonGroup.config.ts‎

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,12 @@ export const config = {
1212
${buttonGroupTokens.buttonTextColor}: var(--inverse-text-primary);
1313
${buttonGroupTokens.buttonIconColor}: var(--inverse-text-primary);
1414
${buttonGroupTokens.buttonValueColor}: var(--inverse-text-secondary);
15+
1516
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default);
17+
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
18+
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
19+
1620
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
17-
${buttonGroupTokens.buttonColorHover}: var(--inverse-text-primary-hover);
18-
${buttonGroupTokens.buttonColorActive}: var(--inverse-text-primary-active);
1921
`,
2022
accent: css`
2123
${buttonGroupTokens.buttonColor}: var(--text-primary);
@@ -25,6 +27,7 @@ export const config = {
2527
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
2628
2729
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-accent-gradient);
30+
2831
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
2932
`,
3033
secondary: css`
@@ -38,8 +41,8 @@ export const config = {
3841
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
3942
4043
${buttonGroupTokens.buttonBorderColor}: var(--outline-solid-default);
41-
${buttonGroupTokens.buttonBorderColorHover}: var(--outline-solid-default);
42-
${buttonGroupTokens.buttonBorderColorActive}: var(--outline-solid-default);
44+
${buttonGroupTokens.buttonBorderColorHover}: var(--outline-solid-default-hover);
45+
${buttonGroupTokens.buttonBorderColorActive}: var(--outline-solid-default-active);
4346
`,
4447
clear: css`
4548
${buttonGroupTokens.buttonColor}: var(--text-primary);
@@ -48,49 +51,57 @@ export const config = {
4851
${buttonGroupTokens.buttonValueColor}: var(--text-secondary);
4952
5053
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-clear);
54+
${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-dark-surface-solid-default);
55+
${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-dark-surface-solid-default);
5156
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
52-
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
53-
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-transparent-secondary-active);
5457
`,
5558
positive: css`
5659
${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
5760
${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
5861
${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
5962
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
63+
6064
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-positive);
61-
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
6265
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-positive-hover);
6366
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-positive-active);
67+
68+
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
6469
`,
6570
warning: css`
6671
${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
6772
${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
6873
${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
6974
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
75+
7076
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-warning);
71-
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
7277
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-warning-hover);
7378
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-warning-active);
79+
80+
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
7481
`,
7582
negative: css`
7683
${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
7784
${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
7885
${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
7986
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
87+
8088
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-negative);
81-
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
8289
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-negative-hover);
8390
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-negative-active);
91+
92+
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
8493
`,
8594
dark: css`
8695
${buttonGroupTokens.buttonColor}: var(--on-dark-text-primary);
8796
${buttonGroupTokens.buttonTextColor}: var(--on-dark-text-primary);
8897
${buttonGroupTokens.buttonIconColor}: var(--on-dark-text-primary);
8998
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
99+
90100
${buttonGroupTokens.buttonBackgroundColor}: var(--on-light-surface-transparent-deep);
101+
${buttonGroupTokens.buttonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
102+
${buttonGroupTokens.buttonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
103+
91104
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
92-
${buttonGroupTokens.buttonColorHover}: var(--on-dark-text-primary-hover);
93-
${buttonGroupTokens.buttonColorActive}: var(--on-dark-text-primary-active);
94105
`,
95106
black: css`
96107
${buttonGroupTokens.buttonColor}: var(--text-accent);
@@ -100,19 +111,21 @@ export const config = {
100111
${buttonGroupTokens.buttonValueColor}: var(--on-dark-text-secondary);
101112
102113
${buttonGroupTokens.buttonBackgroundColor}: var(--surface-solid-default);
114+
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-solid-default-hover);
115+
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-solid-default-active);
103116
104117
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
105118
`,
106119
white: css`
107120
${buttonGroupTokens.buttonColor}: var(--on-light-text-primary);
108-
${buttonGroupTokens.buttonColorHover}: var(--on-light-text-primary-hover);
109-
${buttonGroupTokens.buttonColorActive}: var(--on-light-text-primary-active);
110-
111121
${buttonGroupTokens.buttonTextColor}: var(--on-light-text-primary);
112122
${buttonGroupTokens.buttonIconColor}: var(--on-light-text-primary);
113123
${buttonGroupTokens.buttonValueColor}: var(--on-light-text-secondary);
114124
115125
${buttonGroupTokens.buttonBackgroundColor}: var(--on-dark-surface-solid-default);
126+
${buttonGroupTokens.buttonBackgroundColorHover}: var(--surface-clear);
127+
${buttonGroupTokens.buttonBackgroundColorActive}: var(--surface-clear);
128+
116129
${buttonGroupTokens.buttonLoadingBackgroundColor}: var(${buttonGroupTokens.buttonBackgroundColor});
117130
`,
118131
},

0 commit comments

Comments
 (0)