Skip to content

Commit 21ef3de

Browse files
librowskilibrowski
committed
fix(ui): restore the contracts and metrics the repoint changed
The public snackbar background variables carry the complete layered value again - a status tint over the surface, consumed as one background - because two SDK surfaces read them directly and lost their tint when the tint moved into a private rule. Selector and switch dimensions go back to the values they had. The size scale has no step for most of them, so snapping to the nearest one silently resized every checkbox, radio and switch; a token is bound only where it resolves to the same value. The date-picker popup takes the base surface again, so hovering a day is visible, and the generic radio dot rule no longer overrides the size classes that follow it.
1 parent c6d56da commit 21ef3de

6 files changed

Lines changed: 36 additions & 44 deletions

File tree

‎packages/ui/src/components/checkbox/checkbox.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:root {
2-
--ax-public-checkbox-size-medium: var(--wb-size-300);
3-
--ax-public-checkbox-size-small: var(--wb-size-200);
4-
--ax-public-checkbox-size-extra-small: var(--wb-size-150);
2+
--ax-public-checkbox-size-medium: 1.25rem;
3+
--ax-public-checkbox-size-small: 1.125rem;
4+
--ax-public-checkbox-size-extra-small: var(--wb-size-200);
55

6-
--ax-public-checkbox-icon-size-medium: var(--wb-size-200);
6+
--ax-public-checkbox-icon-size-medium: 0.875rem;
77
--ax-public-checkbox-icon-size-small: var(--wb-size-150);
8-
--ax-public-checkbox-icon-size-extra-small: var(--wb-size-100);
8+
--ax-public-checkbox-icon-size-extra-small: 0.625rem;
99

1010
--ax-public-checkbox-border-radius-medium: var(--wb-radius-50);
1111
--ax-public-checkbox-border-radius-small: var(--wb-radius-50);

‎packages/ui/src/components/date-picker/variables.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
@import 'react-day-picker/style.css' layer(ui.base);
55

66
:root {
7-
--ax-public-date-picker-dropdown-background: var(--wb-components-datepicker-bg-secondary);
7+
--ax-public-date-picker-dropdown-background: var(--wb-ui-bg-base);
88
--ax-public-date-picker-dropdown-border-color: var(--wb-ui-stroke-default);
99
--ax-public-date-picker-dropdown-box-shadow: 0px 4px 20px var(--wb-shadow-ui-color);
1010

‎packages/ui/src/components/radio-button/radio-size.module.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
:root {
2-
--ax-public-radio-size-medium: var(--wb-size-300);
3-
--ax-public-radio-size-small: var(--wb-size-200);
4-
--ax-public-radio-size-extra-small: var(--wb-size-150);
2+
--ax-public-radio-size-medium: 1.25rem;
3+
--ax-public-radio-size-small: 1.125rem;
4+
--ax-public-radio-size-extra-small: var(--wb-size-200);
55

6-
--ax-public-radio-dot-size-medium: var(--wb-size-150);
6+
--ax-public-radio-dot-size-medium: 0.625rem;
77
--ax-public-radio-dot-size-small: var(--wb-size-100);
8-
--ax-public-radio-dot-size-extra-small: var(--wb-size-50);
8+
--ax-public-radio-dot-size-extra-small: var(--wb-size-100);
99
}
1010

1111
@layer ui.component {

‎packages/ui/src/components/radio-button/radio.module.css‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@
3636
top: 50%;
3737
left: 50%;
3838
transform: translate(-50%, -50%);
39-
width: var(--ax-public-radio-dot-size-small);
40-
height: var(--ax-public-radio-dot-size-small);
4139
border-radius: var(--ax-public-radio-border-radius);
4240
background-color: var(--ax-public-radio-dot-color);
4341
opacity: 0;

‎packages/ui/src/components/snackbar/snackbar.module.css‎

Lines changed: 16 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,26 @@
1414
--ax-public-snackbar-default-icon-color: var(--wb-ui-text-muted-default);
1515

1616
--ax-public-snackbar-success-border: var(--wb-components-snackbar-stroke-success);
17-
--ax-public-snackbar-success-background: var(--wb-ui-bg-base);
17+
--ax-public-snackbar-success-background:
18+
linear-gradient(var(--wb-components-snackbar-bg-success), var(--wb-components-snackbar-bg-success)),
19+
var(--wb-ui-bg-base);
1820
--ax-public-snackbar-success-icon-color: var(--wb-components-snackbar-stroke-success);
1921

2022
--ax-public-snackbar-error-border: var(--wb-components-snackbar-stroke-critical);
21-
--ax-public-snackbar-error-background: var(--wb-ui-bg-base);
23+
--ax-public-snackbar-error-background:
24+
linear-gradient(var(--wb-components-snackbar-bg-critical), var(--wb-components-snackbar-bg-critical)),
25+
var(--wb-ui-bg-base);
2226
--ax-public-snackbar-error-icon-color: var(--wb-components-snackbar-stroke-critical);
2327

2428
--ax-public-snackbar-warning-border: var(--wb-components-snackbar-stroke-warning);
25-
--ax-public-snackbar-warning-background: var(--wb-ui-bg-base);
29+
--ax-public-snackbar-warning-background:
30+
linear-gradient(var(--wb-components-snackbar-bg-warning), var(--wb-components-snackbar-bg-warning)),
31+
var(--wb-ui-bg-base);
2632
--ax-public-snackbar-warning-icon-color: var(--wb-components-snackbar-stroke-warning);
2733

2834
--ax-public-snackbar-info-border: var(--wb-components-snackbar-stroke-info);
29-
--ax-public-snackbar-info-background: var(--wb-ui-bg-base);
35+
--ax-public-snackbar-info-background:
36+
linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info)), var(--wb-ui-bg-base);
3037
--ax-public-snackbar-info-icon-color: var(--wb-components-snackbar-stroke-info);
3138
}
3239

@@ -36,7 +43,7 @@
3643
width: calc(var(--ax-public-snackbar-width) + 2 * var(--wb-space-200) + 2 * var(--ax-public-snackbar-border-size));
3744
border: var(--ax-public-snackbar-border-size) solid var(--ax-public-snackbar-default-border);
3845
border-radius: var(--ax-public-snackbar-border-radius);
39-
background-color: var(--ax-public-snackbar-default-background);
46+
background: var(--ax-public-snackbar-default-background);
4047
padding: var(--ax-public-snackbar-padding);
4148

4249
.content {
@@ -47,35 +54,22 @@
4754
}
4855

4956
&.success {
50-
background-color: var(--ax-public-snackbar-success-background);
51-
background-image: linear-gradient(
52-
var(--wb-components-snackbar-bg-success),
53-
var(--wb-components-snackbar-bg-success)
54-
);
57+
background: var(--ax-public-snackbar-success-background);
5558
border-color: var(--ax-public-snackbar-success-border);
5659
}
5760

5861
&.error {
59-
background-color: var(--ax-public-snackbar-error-background);
60-
background-image: linear-gradient(
61-
var(--wb-components-snackbar-bg-critical),
62-
var(--wb-components-snackbar-bg-critical)
63-
);
62+
background: var(--ax-public-snackbar-error-background);
6463
border-color: var(--ax-public-snackbar-error-border);
6564
}
6665

6766
&.warning {
68-
background-color: var(--ax-public-snackbar-warning-background);
69-
background-image: linear-gradient(
70-
var(--wb-components-snackbar-bg-warning),
71-
var(--wb-components-snackbar-bg-warning)
72-
);
67+
background: var(--ax-public-snackbar-warning-background);
7368
border-color: var(--ax-public-snackbar-warning-border);
7469
}
7570

7671
&.info {
77-
background-color: var(--ax-public-snackbar-info-background);
78-
background-image: linear-gradient(var(--wb-components-snackbar-bg-info), var(--wb-components-snackbar-bg-info));
72+
background: var(--ax-public-snackbar-info-background);
7973
border-color: var(--ax-public-snackbar-info-border);
8074
}
8175
}

‎packages/ui/src/components/switch/switch-size.module.css‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
:root {
2-
--ax-public-switch-width-medium: var(--wb-size-500);
3-
--ax-public-switch-height-medium: var(--wb-size-300);
4-
--ax-public-switch-thumb-padding-medium: var(--wb-size-25);
2+
--ax-public-switch-width-medium: 1.875rem;
3+
--ax-public-switch-height-medium: 1.25rem;
4+
--ax-public-switch-thumb-padding-medium: var(--wb-size-37);
55

6-
--ax-public-switch-width-small: var(--wb-size-400);
7-
--ax-public-switch-height-small: var(--wb-size-200);
8-
--ax-public-switch-thumb-padding-small: var(--wb-size-25);
6+
--ax-public-switch-width-small: 1.75rem;
7+
--ax-public-switch-height-small: 1.125rem;
8+
--ax-public-switch-thumb-padding-small: var(--wb-size-37);
99

10-
--ax-public-switch-width-extra-small: var(--wb-size-300);
11-
--ax-public-switch-height-extra-small: var(--wb-size-150);
12-
--ax-public-switch-thumb-padding-extra-small: var(--wb-size-25);
10+
--ax-public-switch-width-extra-small: 1.625rem;
11+
--ax-public-switch-height-extra-small: var(--wb-size-200);
12+
--ax-public-switch-thumb-padding-extra-small: var(--wb-size-37);
1313
}
1414

1515
:root {

0 commit comments

Comments
 (0)