@workday/canvas-kit-preview-css 15.0.0-alpha.1303-next.0 → 15.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/color-picker.css +16 -16
  2. package/divider.css +2 -3
  3. package/loading-sparkles.css +2 -2
  4. package/multi-select.css +48 -36
  5. package/package.json +3 -3
  6. package/radio.css +63 -77
  7. package/side-panel.css +7 -7
  8. package/status-indicator.css +20 -26
  9. package/switch.css +123 -0
  10. package/avatar.css +0 -188
  11. package/information-highlight.css +0 -124
  12. package/pill.css +0 -229
  13. package/segmented-control.css +0 -153
package/color-picker.css CHANGED
@@ -3,10 +3,10 @@
3
3
  display: flex;
4
4
  align-items: center;
5
5
  justify-content: flex-start;
6
- width: calc(100% + var(--cnvs-sys-space-x8));
7
- height: var(--cnvs-sys-space-x8);
8
- margin: calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x4) * -1) var(--cnvs-sys-space-x2);
9
- padding: 0 var(--cnvs-sys-space-x4);
6
+ width: calc(100% + var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem)));
7
+ height: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
8
+ margin: calc(var(--cnvs-base-size-100, 0.5rem) * -1) calc(var(--cnvs-sys-size-xxxs, var(--cnvs-sys-space-x4, 1rem)) * -1) var(--cnvs-base-size-100, 0.5rem);
9
+ padding: 0 var(--cnvs-sys-padding-md, var(--cnvs-sys-space-x4, 1rem));
10
10
  white-space: nowrap;
11
11
  border: none;
12
12
  outline: none;
@@ -20,34 +20,34 @@
20
20
  }
21
21
 
22
22
  .cnvs-preview-reset-button:active, .cnvs-preview-reset-button.active {
23
- background-color: var(--cnvs-sys-color-bg-alt-strong);
23
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
24
24
  }
25
25
 
26
26
  .cnvs-preview-reset-button:focus-visible, .cnvs-preview-reset-button.focus {
27
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
27
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
28
28
  }
29
29
 
30
30
  .cnvs-preview-reset-button [data-part="reset-button-label"] {
31
- margin-left: var(--cnvs-sys-space-x2);
31
+ margin-left: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
32
32
  }
33
33
 
34
34
 
35
35
  .cnvs-preview-color-picker-swatch-book {
36
- --cnvs-preview-color-picker-swatch-book-shadow: var(--cnvs-sys-color-border-inverse) 0 0 0 0.125rem,var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;
36
+ --cnvs-preview-color-picker-swatch-book-shadow: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1))) 0 0 0 0.125rem,var(--cnvs-sys-color-border-input-default) 0 0 0 0.1875rem;
37
37
  box-sizing: border-box;
38
38
  display: flex;
39
39
  flex-wrap: wrap;
40
- margin: 0 calc(var(--cnvs-sys-space-x2) * -1) calc(var(--cnvs-sys-space-x2) * -1) 0;
40
+ margin: 0 calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) calc(var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) * -1) 0;
41
41
  }
42
42
 
43
43
  .cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"] {
44
44
  display: flex;
45
- width: 1.25rem;
46
- height: 1.25rem;
45
+ width: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
46
+ height: var(--cnvs-sys-size-xxs, var(--cnvs-sys-space-x5, 1.25rem));
47
47
  cursor: pointer;
48
- border-radius: var(--cnvs-sys-shape-half);
48
+ border-radius: var(--cnvs-sys-shape-sm, var(--cnvs-sys-shape-x1, 0.25rem));
49
49
  transition: box-shadow 120ms ease;
50
- margin: 0px var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x2) 0px;
50
+ margin: 0px var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem)) 0px;
51
51
  }
52
52
 
53
53
  .cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"]:hover {
@@ -56,7 +56,7 @@
56
56
 
57
57
  .cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"]:focus-visible {
58
58
  outline: none;
59
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
59
+ box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse-default, var(--cnvs-base-palette-neutral-0)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
60
60
  }
61
61
 
62
62
  .cnvs-preview-color-picker-swatch-book [data-part="color-picker-swatch-book-tile"][aria-selected="true"] {
@@ -83,13 +83,13 @@
83
83
  display: flex;
84
84
  flex-direction: row;
85
85
  justify-content: space-between;
86
- margin-block-start: var(--cnvs-sys-space-x4);
86
+ margin-block-start: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
87
87
  }
88
88
 
89
89
  .cnvs-preview-color-picker [data-part="color-picker-input-wrapper"] {
90
90
  display: flex;
91
91
  flex-direction: column;
92
- margin: var(--cnvs-sys-space-zero);
92
+ margin: 0;
93
93
  }
94
94
 
95
95
  .cnvs-preview-color-picker [data-part="color-picker-button"] {
package/divider.css CHANGED
@@ -1,10 +1,9 @@
1
1
  .cnvs-preview-divider {
2
- --cnvs-preview-divider-space: var(--cnvs-sys-space-x4);
3
2
  box-sizing: border-box;
4
3
  display: block;
5
4
  height: 0.0625rem;
6
5
  border: none;
7
- border-top: 1px solid var(--cnvs-sys-color-border-divider);
8
- margin: calc(var(--cnvs-preview-divider-space) / 2) 0;
6
+ border-top: 1px solid var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
7
+ margin: calc(var(--cnvs-preview-divider-space, var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem))) / 2) 0;
9
8
  }
10
9
 
package/loading-sparkles.css CHANGED
@@ -1,4 +1,4 @@
1
- @keyframes animation-37hvz5 {
1
+ @keyframes animation-eifyv {
2
2
  0%, 79%, 100% {
3
3
  opacity: 0.2;
4
4
  transform: scale(0.55);
@@ -26,7 +26,7 @@
26
26
  animation-duration: 1230ms;
27
27
  animation-fill-mode: both;
28
28
  animation-iteration-count: infinite;
29
- animation-name: animation-37hvz5;
29
+ animation-name: animation-eifyv;
30
30
  animation-timing-function: ease-in-out;
31
31
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-ai);
32
32
  }
package/multi-select.css CHANGED
@@ -3,38 +3,38 @@
3
3
  border: 1px solid var(--cnvs-sys-color-border-input-default);
4
4
  display: flex;
5
5
  flex-direction: column;
6
- background-color: var(--cnvs-sys-color-bg-default);
7
- border-radius: var(--cnvs-sys-shape-x1-half);
8
- min-height: var(--cnvs-sys-space-x10);
6
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
7
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
8
+ min-height: var(--cnvs-sys-size-md, var(--cnvs-sys-space-x10, 2.5rem));
9
9
  transition: 0.2s box-shadow,0.2s border-color;
10
10
  margin: 0;
11
11
  --cnvs-text-input-width: 100%;
12
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
12
13
  }
13
14
 
14
15
  .cnvs-preview-multi-select-input:hover, .cnvs-preview-multi-select-input.hover {
15
- border-color: var(--cnvs-sys-color-border-input-strong);
16
+ border-color: var(--cnvs-sys-color-border-input-hover, var(--cnvs-sys-color-border-input-strong, oklch(0.1595 0.0431 250.87 / 0.7)));
16
17
  }
17
18
 
18
19
  .cnvs-preview-multi-select-input:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.focus {
19
- border-color: var(--cnvs-sys-color-border-primary-default);
20
- box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-border-primary-default);
20
+ border-color: var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
21
+ box-shadow: inset 0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
21
22
  }
22
23
 
23
24
  .cnvs-preview-multi-select-input [data-part="user-input"] {
24
25
  font-family: var(--cnvs-sys-font-family-default);
26
+ font-size: var(--cnvs-sys-font-size-subtext-lg, var(--cnvs-sys-font-size-subtext-large, 0.875rem));
25
27
  font-weight: var(--cnvs-sys-font-weight-normal);
26
- line-height: var(--cnvs-sys-line-height-subtext-large);
27
- font-size: var(--cnvs-sys-font-size-subtext-large);
28
- letter-spacing: var(--cnvs-base-letter-spacing-150);
29
- background-color: var(--cnvs-sys-color-bg-transparent-default);
30
- border-radius: var(--cnvs-sys-shape-x1);
28
+ line-height: var(--cnvs-sys-line-height-subtext-lg, var(--cnvs-sys-line-height-subtext-large, 1.25rem));
29
+ background-color: var(--cnvs-sys-color-surface-transparent, var(--cnvs-sys-color-bg-transparent-default, oklch(0 0 0 / 0)));
30
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
31
31
  border: none!important;
32
32
  box-shadow: none!important;
33
33
  outline-width: 0px;
34
34
  }
35
35
 
36
36
  .cnvs-preview-multi-select-input [data-part="user-input"]:where([data-part="user-input"], [data-part="form-input"]) {
37
- height: calc(var(--cnvs-sys-space-x10) - 0.125rem);
37
+ height: 2.375rem;
38
38
  }
39
39
 
40
40
  .cnvs-preview-multi-select-input [data-part="user-input"]:where(:not([aria-autocomplete])) {
@@ -46,67 +46,79 @@
46
46
  background-color: transparent;
47
47
  }
48
48
 
49
+ .cnvs-preview-multi-select-input:has(:disabled, .disabled) :where([data-part="user-input"]) {
50
+ opacity: var(--cnvs-sys-opacity-disabled);
51
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
52
+ }
53
+
49
54
  .cnvs-preview-multi-select-input:has(:disabled, .disabled) {
50
- border-color: var(--cnvs-sys-color-border-input-disabled);
51
- color: var(--cnvs-sys-color-text-disabled);
52
- background-color: var(--cnvs-sys-color-bg-alt-softer);
55
+ opacity: var(--cnvs-sys-opacity-disabled);
56
+ --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
57
+ }
58
+
59
+ .cnvs-preview-multi-select-input:has(:disabled, .disabled) :where([data-part="form-input"]) {
60
+ opacity: 0;
53
61
  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-disabled);
54
62
  }
55
63
 
56
64
  .cnvs-preview-multi-select-input :where([data-part="form-input"]) {
57
65
  position: absolute;
58
- top: var(--cnvs-sys-space-zero);
59
- bottom: var(--cnvs-sys-space-zero);
60
- left: var(--cnvs-sys-space-zero);
61
- right: var(--cnvs-sys-space-zero);
62
- opacity: var(--cnvs-sys-opacity-zero);
66
+ top: 0;
67
+ bottom: 0;
68
+ left: 0;
69
+ right: 0;
70
+ opacity: 0;
63
71
  cursor: default;
64
72
  pointer-events: none;
65
73
  }
66
74
 
67
75
  .cnvs-preview-multi-select-input :where([data-part="separator"]) {
68
- background-color: var(--cnvs-sys-color-border-divider);
76
+ background-color: var(--cnvs-sys-color-border-default, var(--cnvs-sys-color-border-divider, oklch(0.3057 0.079 256.22 / 0.13)));
69
77
  height: 1px;
70
- margin: var(--cnvs-sys-space-zero) var(--cnvs-sys-space-x2);
78
+ margin: 0 var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
71
79
  }
72
80
 
73
81
  .cnvs-preview-multi-select-input :where([data-part="list"]) {
74
82
  display: flex;
75
- gap: var(--cnvs-sys-space-x2);
76
- padding: var(--cnvs-sys-space-x2);
83
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
84
+ padding: var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
77
85
  flex-wrap: wrap;
78
86
  }
79
87
 
80
88
 
81
89
  .cnvs-preview-multi-select-input.error-error {
82
- border-color: var(--cnvs-brand-common-error-inner);
83
- box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner);
84
- background-color: var(--cnvs-brand-error-lightest);
90
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
91
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1)));
92
+ background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
85
93
  }
86
94
 
87
95
  .cnvs-preview-multi-select-input.error-error:has(:hover, :disabled, :focus-visible), .cnvs-preview-multi-select-input.error-error:is(.hover, .disabled, .focus) {
88
- border-color: var(--cnvs-brand-common-error-inner);
96
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
89
97
  }
90
98
 
91
99
  .cnvs-preview-multi-select-input.error-error:has(:focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-error.focus {
92
- border-color: var(--cnvs-brand-common-error-inner);
93
- box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-error-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
100
+ border-color: var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
101
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-critical, var(--cnvs-brand-common-error-inner, oklch(0.6495 0.2369 30.04 / 1))),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
94
102
  outline-offset: 0.125rem;
95
103
  }
96
104
 
97
105
 
98
106
  .cnvs-preview-multi-select-input.error-caution {
99
- border-color: var(--cnvs-brand-common-alert-outer);
100
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner);
101
- background-color: var(--cnvs-brand-alert-lightest);
107
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
108
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1)));
109
+ background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
102
110
  outline-offset: 0.125rem;
103
111
  }
104
112
 
105
- .cnvs-preview-multi-select-input.error-caution:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .focus:not(:has([disabled])) {
106
- border-color: var(--cnvs-brand-common-alert-outer);
113
+ .cnvs-preview-multi-select-input.error-caution:has(:hover, .hover, :disabled, .disabled, :focus-visible:not([disabled])), .cnvs-preview-multi-select-input.error-caution .focus:not(:has([disabled])) {
114
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
115
+ }
116
+
117
+ .cnvs-preview-multi-select-input.error-caution:hover, .cnvs-preview-multi-select-input.error-caution.hover {
118
+ border-color: var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
107
119
  }
108
120
 
109
121
  .cnvs-preview-multi-select-input.error-caution:has(:focus-visible, .focus):not(:has([disabled])) {
110
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-common-alert-inner),0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
122
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),0 0 0 2px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 4px var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
111
123
  }
112
124
 
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-preview-css",
3
- "version": "15.0.0-alpha.1303-next.0",
3
+ "version": "15.0.0",
4
4
  "description": "The parent module that contains all Workday Canvas Kit Preview CSS components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
7
7
  "sideEffects": false,
8
8
  "repository": {
9
9
  "type": "git",
10
- "url": "https://github.com/workday/canvas-kit.git",
10
+ "url": "https://github.com/Workday/canvas-kit.git",
11
11
  "directory": "modules/preview-css"
12
12
  },
13
13
  "files": [
@@ -25,5 +25,5 @@
25
25
  "components",
26
26
  "workday"
27
27
  ],
28
- "gitHead": "4dc1e2083d2767fd402c2d014bedd8b35a014490"
28
+ "gitHead": "d7401bd7648fa6dbe66fdf3400e05770b77b030b"
29
29
  }
package/radio.css CHANGED
@@ -1,11 +1,11 @@
1
1
  .cnvs-preview-radio-input {
2
2
  box-sizing: border-box;
3
3
  cursor: pointer;
4
- height: 1.125rem;
5
- width: 1.125rem;
6
- border-radius: var(--cnvs-sys-shape-round);
4
+ height: var(--cnvs-base-size-225, 1.125rem);
5
+ width: var(--cnvs-base-size-225, 1.125rem);
6
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
7
7
  position: absolute;
8
- margin: var(--cnvs-sys-space-zero);
8
+ margin: 0;
9
9
  }
10
10
 
11
11
  .cnvs-preview-radio-input:focus-visible, .cnvs-preview-radio-input.focus, .cnvs-preview-radio-input:active {
@@ -14,20 +14,12 @@
14
14
 
15
15
  .cnvs-preview-radio-input:disabled, .cnvs-preview-radio-input.disabled {
16
16
  cursor: auto;
17
- }
18
-
19
- .cnvs-preview-radio-input:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.disabled +.cnvs-radio-check {
20
- border-color: var(--cnvs-sys-color-border-input-disabled);
21
- background-color: var(--cnvs-sys-color-bg-alt-softer);
22
- }
23
-
24
- .cnvs-preview-radio-input:disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:hover+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.hover+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.hover+.cnvs-radio-check {
25
- border-color: var(--cnvs-sys-color-border-input-disabled);
17
+ opacity: var(--cnvs-sys-opacity-disabled);
26
18
  }
27
19
 
28
20
  .cnvs-preview-radio-input:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.disabled.checked+.cnvs-radio-check {
29
- background-color: var(--cnvs-brand-primary-accent);
30
- border: 0.3125rem solid var(--cnvs-brand-primary-base);
21
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
22
+ border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
31
23
  }
32
24
 
33
25
  .cnvs-preview-radio-input +.cnvs-radio-check {
@@ -35,11 +27,11 @@
35
27
  flex-direction: column;
36
28
  align-items: center;
37
29
  background-color: var(--cnvs-sys-color-bg-default);
38
- border-radius: var(--cnvs-sys-shape-round);
39
30
  box-sizing: border-box;
40
31
  border: 0.0625rem solid var(--cnvs-sys-color-border-input-default);
41
- height: 1.125rem;
42
- width: 1.125rem;
32
+ height: var(--cnvs-base-size-225, 1.125rem);
33
+ width: var(--cnvs-base-size-225, 1.125rem);
34
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
43
35
  justify-content: center;
44
36
  pointer-events: none;
45
37
  position: absolute;
@@ -48,100 +40,100 @@
48
40
  }
49
41
 
50
42
  .cnvs-preview-radio-input:hover+.cnvs-radio-check, .cnvs-preview-radio-input.hover+.cnvs-radio-check {
51
- border-color: var(--cnvs-sys-color-border-input-strong);
43
+ border-color: var(--cnvs-sys-color-border-input-default);
52
44
  }
53
45
 
54
46
  .cnvs-preview-radio-input:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.focus+.cnvs-radio-check {
55
- border-color: var(--cnvs-sys-color-border-primary-default);
56
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-inverse),0 0 0 1px var(--cnvs-brand-common-focus-outline);
57
- }
58
-
59
- .cnvs-preview-radio-input:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover+.cnvs-radio-check {
60
47
  outline: transparent;
48
+ border-color: var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
49
+ box-shadow: 0 0 0 0px var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 1px var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
61
50
  }
62
51
 
63
52
  .cnvs-preview-radio-input:checked+.cnvs-radio-check, .cnvs-preview-radio-input.checked+.cnvs-radio-check {
64
- background-color: var(--cnvs-brand-primary-accent);
65
- border: 0.3125rem solid var(--cnvs-brand-primary-base);
53
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
54
+ border: 0.3125rem solid var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
66
55
  }
67
56
 
68
57
  .cnvs-preview-radio-input:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.focus:hover:checked+.cnvs-radio-check {
69
58
  outline: transparent;
70
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse),0 0 0 4px var(--cnvs-brand-common-focus-outline);
59
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1))),0 0 0 0.25rem var(--cnvs-sys-color-brand-focus-primary, var(--cnvs-brand-common-focus-outline, oklch(0.6023 0.2032 255.68 / 1)));
71
60
  }
72
61
 
73
62
 
74
- .cnvs-preview-radio-input.variant-inverse +.cnvs-radio-check {
75
- background-color: var(--cnvs-sys-color-bg-alt-softer);
76
- border-color: var(--cnvs-sys-color-border-input-inverse);
63
+ .cnvs-preview-radio-input.variant-inverse +[data-part="cnvs-radio-check"] {
64
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
65
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
77
66
  }
78
67
 
79
68
  .cnvs-preview-radio-input.variant-inverse:disabled, .cnvs-preview-radio-input.variant-inverse.disabled {
80
69
  opacity: var(--cnvs-sys-opacity-disabled);
81
70
  }
82
71
 
83
- .cnvs-preview-radio-input.variant-inverse:disabled +.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled +.cnvs-radio-check {
84
- background-color: var(--cnvs-sys-color-bg-alt-softer);
85
- border-color: var(--cnvs-sys-color-border-input-disabled);
86
- opacity: var(--cnvs-sys-opacity-disabled);
72
+ .cnvs-preview-radio-input.variant-inverse:disabled +[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.disabled +[data-part="cnvs-radio-check"] {
73
+ background-color: var(--cnvs-sys-color-surface-inverse, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
74
+ border-color: var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
87
75
  }
88
76
 
89
- .cnvs-preview-radio-input.variant-inverse:disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:disabled.checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.disabled.checked+.cnvs-radio-check {
90
- background-color: var(--cnvs-brand-primary-base);
91
- border-color: var(--cnvs-sys-color-border-inverse);
77
+ .cnvs-preview-radio-input.variant-inverse:disabled:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.disabled:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse:disabled.checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.disabled.checked+[data-part="cnvs-radio-check"] {
78
+ background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
79
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
92
80
  }
93
81
 
94
- .cnvs-preview-radio-input.variant-inverse:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.hover+.cnvs-radio-check {
95
- border-color: var(--cnvs-sys-color-border-input-inverse);
82
+ .cnvs-preview-radio-input.variant-inverse:hover+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.hover+[data-part="cnvs-radio-check"] {
83
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
96
84
  }
97
85
 
98
- .cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check {
99
- border-color: var(--cnvs-sys-color-border-input-inverse);
86
+ .cnvs-preview-radio-input.variant-inverse:focus-visible+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.focus+[data-part="cnvs-radio-check"] {
87
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
100
88
  }
101
89
 
102
- .cnvs-preview-radio-input.variant-inverse:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.checked+.cnvs-radio-check {
103
- background-color: var(--cnvs-brand-primary-base);
104
- border-color: var(--cnvs-sys-color-border-inverse);
90
+ .cnvs-preview-radio-input.variant-inverse:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.checked+[data-part="cnvs-radio-check"] {
91
+ background-color: var(--cnvs-sys-color-brand-accent-primary, var(--cnvs-brand-primary-base, oklch(0.5198 0.1782 256.11 / 1)));
92
+ border-color: var(--cnvs-sys-color-border-inverse-default, var(--cnvs-sys-color-border-inverse, oklch(1 0 0 / 1)));
105
93
  }
106
94
 
107
- .cnvs-preview-radio-input.variant-inverse:focus-visible+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover+.cnvs-radio-check {
108
- box-shadow: 0 0 0 0px var(--cnvs-sys-color-border-contrast-default),0 0 0 2px var(--cnvs-sys-color-border-inverse);
95
+ .cnvs-preview-radio-input.variant-inverse:focus-visible+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse:focus-visible:hover+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.focus+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.focus:hover+[data-part="cnvs-radio-check"] {
96
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-primary, oklch(0.6023 0.2032 255.68 / 1));
109
97
  }
110
98
 
111
- .cnvs-preview-radio-input.variant-inverse:focus-visible:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse:focus-visible:hover:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:checked+.cnvs-radio-check, .cnvs-preview-radio-input.variant-inverse.focus:hover:checked+.cnvs-radio-check {
112
- box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-contrast-default),0 0 0 4px var(--cnvs-sys-color-border-inverse);
99
+ .cnvs-preview-radio-input.variant-inverse:focus-visible:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse:focus-visible:hover:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.focus:checked+[data-part="cnvs-radio-check"], .cnvs-preview-radio-input.variant-inverse.focus:hover:checked+[data-part="cnvs-radio-check"] {
100
+ box-shadow: 0 0 0 0.125rem var(--cnvs-sys-color-border-contrast-default),0 0 0 0.25rem var(--cnvs-sys-color-focus-inverse, var(--cnvs-sys-color-border-input-inverse, oklch(1 0 0 / 1)));
113
101
  }
114
102
 
115
103
 
116
- .cnvs-preview-radio-input-wrapper-styles {
104
+ .cnvs-preview-radio-input-wrapper {
117
105
  box-sizing: border-box;
118
- height: 1.125rem;
119
- width: 1.125rem;
106
+ height: var(--cnvs-base-size-225, 1.125rem);
107
+ width: var(--cnvs-base-size-225, 1.125rem);
120
108
  flex: 0 0 auto;
121
109
  }
122
110
 
123
- .cnvs-preview-radio-input-wrapper-styles ::before {
111
+ .cnvs-preview-radio-input-wrapper ::before {
124
112
  content: '';
125
113
  position: absolute;
126
- border-radius: var(--cnvs-sys-shape-round);
127
- height: 1.125rem;
114
+ border-radius: var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));
115
+ height: var(--cnvs-base-size-225, 1.125rem);
128
116
  transition: box-shadow 150ms ease-out;
129
- width: 1.125rem;
117
+ width: var(--cnvs-base-size-225, 1.125rem);
130
118
  pointer-events: none;
131
119
  opacity: var(--cnvs-sys-opacity-full);
132
120
  }
133
121
 
134
- .cnvs-preview-radio-input-wrapper-styles:hover:before, .cnvs-preview-radio-input-wrapper-styles.hover:before {
135
- box-shadow: 0 0 0 calc(var(--cnvs-sys-space-x2) - 0.0625rem) var(--cnvs-sys-color-bg-alt-soft);
122
+ .cnvs-preview-radio-input-wrapper:hover:before, .cnvs-preview-radio-input-wrapper.hover:before {
123
+ box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-default, oklch(0.3343 0.0951 253.3 / 0.05));
136
124
  }
137
125
 
138
126
 
139
- .cnvs-preview-radio-input-wrapper-styles.variant-inverse ::before {
140
- opacity: var(--cnvs-sys-opacity-disabled);
127
+ .cnvs-preview-radio-input-wrapper.variant-inverse:hover:before, .cnvs-preview-radio-input-wrapper.variant-inverse.hover:before {
128
+ box-shadow: 0 0 0 0.4375rem var(--cnvs-sys-color-surface-overlay-hover-inverse, oklch(1 0 0 / 0.16));
141
129
  }
142
130
 
143
131
 
144
- .cnvs-preview-radio-input-wrapper-styles.disabled:hover:before, .cnvs-preview-radio-input-wrapper-styles.disabled.hover:before {
132
+ .cnvs-preview-radio-input-wrapper.disabled {
133
+ opacity: var(--cnvs-sys-opacity-disabled);
134
+ }
135
+
136
+ .cnvs-preview-radio-input-wrapper.disabled:hover:before, .cnvs-preview-radio-input-wrapper.disabled.hover:before {
145
137
  box-shadow: none;
146
138
  cursor: auto;
147
139
  }
@@ -154,18 +146,12 @@
154
146
 
155
147
 
156
148
  .cnvs-preview-radio-text.variant-inverse {
157
- color: var(--cnvs-sys-color-text-inverse);
149
+ color: var(--cnvs-sys-color-fg-inverse);
158
150
  }
159
151
 
160
152
 
161
153
  .cnvs-preview-radio-text.disabled {
162
154
  cursor: default;
163
- color: var(--cnvs-sys-color-text-disabled);
164
- }
165
-
166
-
167
- .cnvs-preview-radio-text.variant-inverse.disabled {
168
- color: var(--cnvs-sys-color-text-inverse);
169
155
  opacity: var(--cnvs-sys-opacity-disabled);
170
156
  }
171
157
 
@@ -173,9 +159,9 @@
173
159
  .cnvs-preview-radio-label {
174
160
  box-sizing: border-box;
175
161
  align-items: flex-start;
176
- min-height: var(--cnvs-sys-space-x6);
162
+ min-height: var(--cnvs-base-size-225, 1.125rem);
177
163
  position: relative;
178
- gap: var(--cnvs-sys-space-x3);
164
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
179
165
  }
180
166
 
181
167
 
@@ -183,23 +169,23 @@
183
169
  box-sizing: border-box;
184
170
  display: flex;
185
171
  flex-direction: column;
186
- border-radius: var(--cnvs-sys-shape-x1-half);
187
- gap: var(--cnvs-sys-space-x2);
188
- padding: 0.625rem var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x2);
189
- margin: 0 calc(var(--cnvs-sys-space-x3) * -1);
172
+ border-radius: var(--cnvs-sys-shape-md, var(--cnvs-sys-shape-x2, 0.5rem));
173
+ gap: var(--cnvs-sys-gap-sm, var(--cnvs-sys-space-x2, 0.5rem));
174
+ padding: 0.625rem var(--cnvs-base-size-150, 0.75rem) var(--cnvs-sys-padding-xs, var(--cnvs-sys-space-x2, 0.5rem));
175
+ margin: 0 calc(var(--cnvs-base-size-150, 0.75rem) * -1);
190
176
  transition: 100ms box-shadow;
191
177
  width: fit-content;
192
178
  }
193
179
 
194
180
 
195
181
  .cnvs-preview-radio-group.error-error {
196
- box-shadow: inset 0 0 0 0.125rem var(--cnvs-brand-error-base);
197
- background-color: var(--cnvs-brand-error-lightest);
182
+ box-shadow: inset 0 0 0 0.125rem var(--cnvs-sys-color-brand-border-critical, oklch(0.6495 0.2369 30.04 / 1));
183
+ background-color: var(--cnvs-sys-color-brand-surface-critical-default, oklch(0.6289 0.2567 29.11 / 0.04));
198
184
  }
199
185
 
200
186
 
201
187
  .cnvs-preview-radio-group.error-caution {
202
- background-color: var(--cnvs-brand-alert-lightest);
203
- box-shadow: inset 0 0 0 0.0625rem var(--cnvs-brand-common-alert-inner),inset 0 0 0 0.1875rem var(--cnvs-brand-common-alert-outer);
188
+ background-color: var(--cnvs-sys-color-brand-surface-caution-default, oklch(0.7982 0.159 92.57 / 0.1));
189
+ box-shadow: inset 0 0 0 0.0625rem var(--cnvs-sys-color-brand-focus-caution-inner, var(--cnvs-brand-common-alert-inner, oklch(0.7909 0.1711 70.15 / 1))),inset 0 0 0 0.1875rem var(--cnvs-sys-color-brand-border-caution, var(--cnvs-brand-alert-dark, oklch(0.6601 0.1537 60.7 / 1)));
204
190
  }
205
191
 
package/side-panel.css CHANGED
@@ -1,9 +1,9 @@
1
1
  .cnvs-preview-side-panel-toggle-button {
2
2
  box-sizing: border-box;
3
3
  position: absolute;
4
- top: var(--cnvs-sys-space-x6);
5
- width: var(--cnvs-sys-space-x8);
6
- inset-inline-end: var(--cnvs-sys-space-x4);
4
+ top: var(--cnvs-sys-gap-lg, var(--cnvs-sys-space-x6, 1.5rem));
5
+ width: var(--cnvs-sys-size-sm, var(--cnvs-sys-space-x8, 2rem));
6
+ inset-inline-end: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
7
7
  }
8
8
 
9
9
 
@@ -58,19 +58,19 @@
58
58
 
59
59
  .cnvs-preview-side-panel-toggle-button.state-collapsing.origin-right {
60
60
  transform: scaleX(-1);
61
- inset-inline-start: var(--cnvs-sys-space-x4);
61
+ inset-inline-start: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
62
62
  }
63
63
 
64
64
 
65
65
  .cnvs-preview-side-panel-toggle-button.state-expanded.origin-right {
66
66
  transform: scaleX(1);
67
- inset-inline-start: var(--cnvs-sys-space-x4);
67
+ inset-inline-start: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
68
68
  }
69
69
 
70
70
 
71
71
  .cnvs-preview-side-panel-toggle-button.state-expanding.origin-right {
72
72
  transform: scaleX(1);
73
- inset-inline-start: var(--cnvs-sys-space-x4);
73
+ inset-inline-start: var(--cnvs-sys-gap-md, var(--cnvs-sys-space-x4, 1rem));
74
74
  }
75
75
 
76
76
 
@@ -91,7 +91,7 @@
91
91
 
92
92
 
93
93
  .cnvs-preview-panel.variant-standard {
94
- background-color: var(--cnvs-sys-color-bg-alt-softer);
94
+ background-color: var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1)));
95
95
  }
96
96
 
97
97