Skip to content

Commit dca4293

Browse files
rezrahrezrah
committed
update buttons and form controls
1 parent 617e7a3 commit dca4293

261 files changed

Lines changed: 255 additions & 67 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.changeset/fair-heroes-wave.md‎

Lines changed: 6 additions & 0 deletions

‎.changeset/fresh-controls-shine.md‎

Lines changed: 68 additions & 0 deletions

‎.changeset/green-primary-buttons.md‎

Lines changed: 3 additions & 0 deletions

‎.changeset/quiet-icons-dance.md‎

Lines changed: 6 additions & 0 deletions

‎.changeset/sharp-checkboxes-smile.md‎

Lines changed: 12 additions & 0 deletions

‎packages/design-tokens/src/tokens/functional/components/button/colors.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,8 @@ module.exports = {
77
dark: 'var(--base-color-scale-green-5)',
88
},
99
hover: {
10-
value:
11-
'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), var(--base-color-scale-green-6)', // 000000 at 16% opacity
12-
dark: 'linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0.16) 100%), var(--base-color-scale-green-5)', // 000000 at 16% opacity
10+
value: 'color-mix(in srgb, var(--base-color-scale-green-6), #000 16%)',
11+
dark: 'color-mix(in srgb, var(--base-color-scale-green-5), #000 16%)',
1312
},
1413
active: {
1514
value:

‎packages/design-tokens/src/tokens/functional/components/control/colors.js‎

Lines changed: 74 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,48 +27,76 @@ module.exports = {
2727
dark: 'var(--base-color-scale-gray-5)',
2828
},
2929
},
30+
focus: {
31+
value: 'var(--base-color-scale-blue-6)',
32+
dark: 'var(--base-color-scale-blue-2)',
33+
},
3034
},
3135
checkbox: {
3236
bg: {
3337
default: {
3438
value: 'var(--base-color-scale-white-0)',
3539
dark: 'var(--base-color-scale-gray-7)',
3640
},
41+
hover: {
42+
value: 'var(--brand-color-canvas-subtle)',
43+
dark: 'var(--brand-color-canvas-subtle)',
44+
},
3745
checked: {
38-
value: 'var(--base-color-scale-black-0)',
39-
dark: 'var(--base-color-scale-white-0)',
46+
value: 'var(--base-color-scale-green-6)',
47+
dark: 'var(--base-color-scale-green-5)',
48+
},
49+
'checked-hover': {
50+
value: 'color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)',
51+
dark: '#309A4D', // var(--base-color-scale-green-5) + #fff at 16% opacity
4052
},
4153
indeterminate: {
42-
value: 'var(--base-color-scale-black-0)',
43-
dark: 'var(--base-color-scale-white-0)',
54+
value: 'var(--base-color-scale-green-6)',
55+
dark: 'var(--base-color-scale-green-5)',
56+
},
57+
'indeterminate-hover': {
58+
value: 'color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)',
59+
dark: '#309A4D', // var(--base-color-scale-green-5) + #fff at 16% opacity
4460
},
4561
disabled: {
46-
value: 'var(--base-color-scale-gray-1)',
47-
dark: 'var(--base-color-scale-gray-4)',
62+
value: 'var(--brand-color-canvas-default)',
63+
dark: 'var(--brand-color-canvas-default)',
4864
},
4965
},
5066
fg: {
5167
checked: {
5268
value: 'var(--base-color-scale-white-0)',
53-
dark: 'var(--base-color-scale-black-0)',
69+
dark: 'var(--base-color-scale-white-0)',
5470
},
5571
},
5672
border: {
5773
default: {
5874
value: 'var(--base-color-scale-gray-4)',
5975
dark: 'var(--base-color-scale-gray-4)',
6076
},
77+
hover: {
78+
value: 'var(--base-color-scale-gray-4)',
79+
dark: 'var(--base-color-scale-gray-5)',
80+
},
6181
checked: {
62-
value: 'var(--base-color-scale-black-0)',
63-
dark: 'var(--base-color-scale-white-0)',
82+
value: 'var(--base-color-scale-green-6)',
83+
dark: '#077726', // computed value
84+
},
85+
'checked-hover': {
86+
value: 'var(--brand-color-text-emphasized)',
87+
dark: 'rgba(0, 0, 0, 0.12)',
6488
},
6589
indeterminate: {
66-
value: 'var(--base-color-scale-black-0)',
67-
dark: 'var(--base-color-scale-white-0)',
90+
value: 'var(--base-color-scale-green-6)',
91+
dark: '#077726', // computed value
92+
},
93+
'indeterminate-hover': {
94+
value: 'var(--brand-color-text-emphasized)',
95+
dark: 'rgba(0, 0, 0, 0.12)',
6896
},
6997
disabled: {
70-
value: 'var(--base-color-scale-gray-2)',
71-
dark: 'var(--base-color-scale-gray-4)',
98+
value: 'var(--base-color-scale-gray-4)',
99+
dark: 'var(--base-color-scale-gray-5)',
72100
},
73101
},
74102
},
@@ -78,30 +106,58 @@ module.exports = {
78106
value: 'var(--base-color-scale-white-0)',
79107
dark: 'var(--base-color-scale-black-0)',
80108
},
109+
hover: {
110+
value: 'var(--brand-color-canvas-subtle)',
111+
dark: 'var(--brand-color-canvas-subtle)',
112+
},
81113
checked: {
82114
value: 'var(--base-color-scale-white-0)',
83115
dark: 'var(--base-color-scale-black-0)',
84116
},
117+
'checked-hover': {
118+
value: 'var(--brand-color-canvas-subtle)',
119+
dark: 'var(--brand-color-canvas-subtle)',
120+
},
85121
disabled: {
86-
value: 'var(--base-color-scale-gray-1)',
87-
dark: 'var(--base-color-scale-gray-4)',
122+
value: 'var(--brand-color-canvas-default)',
123+
dark: 'var(--brand-color-canvas-default)',
88124
},
89125
},
90126
border: {
91127
default: {
92128
value: 'var(--brand-control-color-border-default)',
93-
dark: 'var(--base-color-scale-white-0)',
129+
dark: 'var(--base-color-scale-gray-4)',
130+
},
131+
hover: {
132+
value: 'var(--base-color-scale-gray-4)',
133+
dark: 'var(--base-color-scale-gray-5)',
94134
},
95135
checked: {
96-
value: 'var(--base-color-scale-black-0)',
97-
dark: 'var(--base-color-scale-white-0)',
136+
value: 'var(--base-color-scale-green-6)',
137+
dark: '#077726', // computed value
138+
},
139+
'checked-hover': {
140+
value: 'var(--brand-color-text-emphasized)',
141+
dark: 'rgba(0, 0, 0, 0.12)',
142+
},
143+
disabled: {
144+
value: 'var(--base-color-scale-gray-4)',
145+
dark: 'var(--base-color-scale-gray-5)',
98146
},
99147
},
100148
dot: {
101149
default: {
102150
value: 'var(--base-color-scale-black-0)',
103151
dark: 'var(--base-color-scale-white-0)',
104152
},
153+
checked: {
154+
value: 'var(--base-color-scale-green-6)',
155+
dark: 'var(--base-color-scale-green-5)',
156+
},
157+
'checked-hover': {
158+
value: 'color-mix(in srgb, var(--brand-color-text-emphasized), #000 26%)',
159+
dark: '#309A4D', // var(--base-color-scale-green-5) + #fff at 16% opacity
160+
},
105161
},
106162
},
107163
},

‎packages/react/src/ActionMenu/ActionMenu.module.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@
214214

215215
.ActionMenu__item--medium {
216216
padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal);
217-
min-height: var(--brand-control-medium-size);
217+
min-height: 43px; /* To match the height of Brand Refactor buttons */
218218
}
219219

220220
.ActionMenu__item--medium:has(.ActionMenu__item-anchor) {

‎packages/react/src/ActionMenu/ActionMenu.visual.spec.ts-snapshots/Visual-Comparison-ActionMenu-ActionMenu-Anchored-Positioning-Overrides-1-darwin.png‎

-4.95 KB

‎packages/react/src/ActionMenu/ActionMenu.visual.spec.ts-snapshots/Visual-Comparison-ActionMenu-ActionMenu-Default-1-darwin.png‎

-1.07 KB

0 commit comments

Comments
 (0)