@fluentui/web-components 3.0.0-beta.6 → 3.0.0-beta.7

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 (70) hide show
  1. package/CHANGELOG.md +11 -2
  2. package/dist/dts/theme/design-tokens.d.ts +384 -384
  3. package/dist/dts/theme/set-theme.d.ts +1 -2
  4. package/dist/esm/accordion-item/accordion-item.styles.js +25 -25
  5. package/dist/esm/accordion-item/accordion-item.styles.js.map +1 -1
  6. package/dist/esm/avatar/avatar.styles.js +100 -100
  7. package/dist/esm/avatar/avatar.styles.js.map +1 -1
  8. package/dist/esm/badge/badge.styles.js +3 -3
  9. package/dist/esm/badge/badge.styles.js.map +1 -1
  10. package/dist/esm/button/button.styles.js +63 -63
  11. package/dist/esm/button/button.styles.js.map +1 -1
  12. package/dist/esm/checkbox/checkbox.styles.js +37 -37
  13. package/dist/esm/checkbox/checkbox.styles.js.map +1 -1
  14. package/dist/esm/compound-button/compound-button.styles.js +18 -18
  15. package/dist/esm/compound-button/compound-button.styles.js.map +1 -1
  16. package/dist/esm/counter-badge/counter-badge.styles.js +2 -2
  17. package/dist/esm/counter-badge/counter-badge.styles.js.map +1 -1
  18. package/dist/esm/dialog/dialog.styles.js +21 -21
  19. package/dist/esm/dialog/dialog.styles.js.map +1 -1
  20. package/dist/esm/divider/divider.styles.js +13 -13
  21. package/dist/esm/divider/divider.styles.js.map +1 -1
  22. package/dist/esm/image/image.styles.js +4 -4
  23. package/dist/esm/image/image.styles.js.map +1 -1
  24. package/dist/esm/label/label.styles.js +14 -14
  25. package/dist/esm/label/label.styles.js.map +1 -1
  26. package/dist/esm/menu-item/menu-item.styles.js +16 -16
  27. package/dist/esm/menu-item/menu-item.styles.js.map +1 -1
  28. package/dist/esm/menu-list/menu-list.styles.js +4 -4
  29. package/dist/esm/menu-list/menu-list.styles.js.map +1 -1
  30. package/dist/esm/progress-bar/progress-bar.styles.js +25 -25
  31. package/dist/esm/progress-bar/progress-bar.styles.js.map +1 -1
  32. package/dist/esm/radio/radio.styles.js +32 -32
  33. package/dist/esm/radio/radio.styles.js.map +1 -1
  34. package/dist/esm/radio-group/radio-group.styles.js +9 -9
  35. package/dist/esm/radio-group/radio-group.styles.js.map +1 -1
  36. package/dist/esm/slider/slider.styles.js +23 -22
  37. package/dist/esm/slider/slider.styles.js.map +1 -1
  38. package/dist/esm/spinner/spinner.styles.js +5 -5
  39. package/dist/esm/spinner/spinner.styles.js.map +1 -1
  40. package/dist/esm/styles/partials/badge.partials.js +75 -75
  41. package/dist/esm/styles/partials/badge.partials.js.map +1 -1
  42. package/dist/esm/switch/switch.styles.js +34 -34
  43. package/dist/esm/switch/switch.styles.js.map +1 -1
  44. package/dist/esm/tab/tab.styles.js +20 -20
  45. package/dist/esm/tab/tab.styles.js.map +1 -1
  46. package/dist/esm/tab-panel/tab-panel.styles.js +1 -1
  47. package/dist/esm/tab-panel/tab-panel.styles.js.map +1 -1
  48. package/dist/esm/tabs/tabs.styles.js +49 -49
  49. package/dist/esm/tabs/tabs.styles.js.map +1 -1
  50. package/dist/esm/text/text.styles.js +27 -27
  51. package/dist/esm/text/text.styles.js.map +1 -1
  52. package/dist/esm/text-input/text-input.styles.js +67 -67
  53. package/dist/esm/text-input/text-input.styles.js.map +1 -1
  54. package/dist/esm/theme/design-tokens.js +385 -386
  55. package/dist/esm/theme/design-tokens.js.map +1 -1
  56. package/dist/esm/theme/set-theme.js +2 -2
  57. package/dist/esm/theme/set-theme.js.map +1 -1
  58. package/dist/esm/toggle-button/toggle-button.styles.js +24 -24
  59. package/dist/esm/toggle-button/toggle-button.styles.js.map +1 -1
  60. package/dist/fluent-web-components.api.json +3077 -1541
  61. package/dist/storybook/iframe.html +1 -1
  62. package/dist/storybook/main.b095c2e8.iframe.bundle.js +2 -0
  63. package/dist/storybook/project.json +1 -1
  64. package/dist/web-components.d.ts +385 -386
  65. package/dist/web-components.js +683 -1705
  66. package/dist/web-components.min.js +191 -191
  67. package/docs/api-report.md +385 -386
  68. package/package.json +1 -1
  69. package/dist/storybook/main.c651bad5.iframe.bundle.js +0 -2
  70. /package/dist/storybook/{main.c651bad5.iframe.bundle.js.LICENSE.txt → main.b095c2e8.iframe.bundle.js.LICENSE.txt} +0 -0
@@ -8,18 +8,18 @@ export const styles = css `
8
8
  ${display('flex')}
9
9
 
10
10
  :host {
11
- --dialog-backdrop: ${colorBackgroundOverlay};
11
+ --dialog-backdrop: var(${colorBackgroundOverlay});
12
12
  }
13
13
 
14
14
  dialog {
15
- background: ${colorNeutralBackground1};
16
- border: ${strokeWidthThin} solid ${colorTransparentStroke};
15
+ background: var(${colorNeutralBackground1});
16
+ border: var(${strokeWidthThin}) solid var(${colorTransparentStroke});
17
17
  z-index: 2;
18
18
  margin: auto auto;
19
19
  max-width: 100%;
20
20
  width: 100vw;
21
- border-radius: ${borderRadiusXLarge};
22
- box-shadow: ${shadow64};
21
+ border-radius: var(${borderRadiusXLarge});
22
+ box-shadow: var(${shadow64});
23
23
  max-height: 100vh;
24
24
  height: fit-content;
25
25
  overflow: unset;
@@ -38,16 +38,16 @@ export const styles = css `
38
38
  flex-direction: column;
39
39
  overflow: unset;
40
40
  max-height: calc(100vh - 48px);
41
- padding: ${spacingVerticalXXL} ${spacingHorizontalXXL};
41
+ padding: var(${spacingVerticalXXL}) var(${spacingHorizontalXXL});
42
42
  }
43
43
 
44
44
  .title {
45
- font-size: ${fontSizeBase500};
46
- line-height: ${lineHeightBase500};
47
- font-weight: ${fontWeightSemibold};
48
- font-family: ${fontFamilyBase};
49
- color: ${colorNeutralForeground1};
50
- margin-bottom: ${spacingVerticalS};
45
+ font-size: var(${fontSizeBase500});
46
+ line-height: var(${lineHeightBase500});
47
+ font-weight: var(${fontWeightSemibold});
48
+ font-family: var(${fontFamilyBase});
49
+ color: var(${colorNeutralForeground1});
50
+ margin-bottom: var(${spacingVerticalS});
51
51
  display: flex;
52
52
  justify-content: space-between;
53
53
  align-items: flex-start;
@@ -57,11 +57,11 @@ export const styles = css `
57
57
  .content {
58
58
  vertical-align: top;
59
59
  min-height: 32px;
60
- color: ${colorNeutralForeground1};
61
- font-size: ${fontSizeBase300};
62
- line-height: ${lineHeightBase300};
63
- font-weight: ${fontWeightRegular};
64
- font-family: ${fontFamilyBase};
60
+ color: var(${colorNeutralForeground1});
61
+ font-size: var(${fontSizeBase300});
62
+ line-height: var(${lineHeightBase300});
63
+ font-weight: var(${fontWeightRegular});
64
+ font-family: var(${fontFamilyBase});
65
65
  overflow-y: auto;
66
66
  box-sizing: border-box;
67
67
  }
@@ -71,8 +71,8 @@ export const styles = css `
71
71
  grid-column-start: 1;
72
72
  flex-direction: column;
73
73
  max-width: 100vw;
74
- row-gap: ${spacingVerticalS};
75
- padding-top: ${spacingVerticalXXL};
74
+ row-gap: var(${spacingVerticalS});
75
+ padding-top: var(${spacingVerticalXXL});
76
76
  justify-self: stretch;
77
77
  width: 100%;
78
78
  }
@@ -93,8 +93,8 @@ export const styles = css `
93
93
  flex-direction: row;
94
94
  justify-content: flex-end;
95
95
  align-items: center;
96
- column-gap: ${spacingHorizontalS};
97
- padding-top: ${spacingVerticalS};
96
+ column-gap: var(${spacingHorizontalS});
97
+ padding-top: var(${spacingVerticalS});
98
98
  box-sizing: border-box;
99
99
  }
100
100
  }
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;yBAGM,sBAAsB;;;;kBAI7B,uBAAuB;cAC3B,eAAe,UAAU,sBAAsB;;;;;qBAKxC,kBAAkB;kBACrB,QAAQ;;;;;;;;;;;;;;;;;;;eAmBX,kBAAkB,IAAI,oBAAoB;;;;iBAIxC,eAAe;mBACb,iBAAiB;mBACjB,kBAAkB;mBAClB,cAAc;aACpB,uBAAuB;qBACf,gBAAgB;;;;;;;;;;aAUxB,uBAAuB;iBACnB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;mBACjB,cAAc;;;;;;;;;;eAUlB,gBAAgB;mBACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;oBAqBjB,kBAAkB;qBACjB,gBAAgB;;;;CAIpC,CAAC"}
1
+ {"version":3,"file":"dialog.styles.js","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACL,kBAAkB,EAClB,sBAAsB,EACtB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,QAAQ,EACR,kBAAkB,EAClB,oBAAoB,EACpB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;6BAGU,sBAAsB;;;;sBAI7B,uBAAuB;kBAC3B,eAAe,eAAe,sBAAsB;;;;;yBAK7C,kBAAkB;sBACrB,QAAQ;;;;;;;;;;;;;;;;;;;mBAmBX,kBAAkB,SAAS,oBAAoB;;;;qBAI7C,eAAe;uBACb,iBAAiB;uBACjB,kBAAkB;uBAClB,cAAc;iBACpB,uBAAuB;yBACf,gBAAgB;;;;;;;;;;iBAUxB,uBAAuB;qBACnB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;uBACjB,cAAc;;;;;;;;;;mBAUlB,gBAAgB;uBACZ,kBAAkB;;;;;;;;;;;;;;;;;;;;;wBAqBjB,kBAAkB;yBACjB,gBAAgB;;;;CAIxC,CAAC"}
@@ -14,12 +14,12 @@ export const styles = css `
14
14
  :host::after,
15
15
  :host::before {
16
16
  align-self: center;
17
- background: ${colorNeutralStroke2};
17
+ background: var(${colorNeutralStroke2});
18
18
  box-sizing: border-box;
19
19
  content: '';
20
20
  display: flex;
21
21
  flex-grow: 1;
22
- height: ${strokeWidthThin};
22
+ height: var(${strokeWidthThin});
23
23
  }
24
24
 
25
25
  :host([inset]) {
@@ -27,10 +27,10 @@ export const styles = css `
27
27
  }
28
28
 
29
29
  :host ::slotted(*) {
30
- color: ${colorNeutralForeground2};
31
- font-family: ${fontFamilyBase};
32
- font-size: ${fontSizeBase200};
33
- font-weight: ${fontWeightRegular};
30
+ color: var(${colorNeutralForeground2});
31
+ font-family: var(${fontFamilyBase});
32
+ font-size: var(${fontSizeBase200});
33
+ font-weight: var(${fontWeightRegular});
34
34
  margin: 0;
35
35
  padding: 0 12px;
36
36
  }
@@ -71,7 +71,7 @@ export const styles = css `
71
71
 
72
72
  :host([orientation='vertical'])::before,
73
73
  :host([orientation='vertical'])::after {
74
- width: ${strokeWidthThin};
74
+ width: var(${strokeWidthThin});
75
75
  min-height: 20px;
76
76
  height: 100%;
77
77
  }
@@ -92,24 +92,24 @@ export const styles = css `
92
92
 
93
93
  :host([appearance='strong'])::before,
94
94
  :host([appearance='strong'])::after {
95
- background: ${colorNeutralStroke1};
95
+ background: var(${colorNeutralStroke1});
96
96
  }
97
97
  :host([appearance='strong']) ::slotted(*) {
98
- color: ${colorNeutralForeground1};
98
+ color: var(${colorNeutralForeground1});
99
99
  }
100
100
  :host([appearance='brand'])::before,
101
101
  :host([appearance='brand'])::after {
102
- background: ${colorBrandStroke1};
102
+ background: var(${colorBrandStroke1});
103
103
  }
104
104
  :host([appearance='brand']) ::slotted(*) {
105
- color: ${colorBrandForeground1};
105
+ color: var(${colorBrandForeground1});
106
106
  }
107
107
  :host([appearance='subtle'])::before,
108
108
  :host([appearance='subtle'])::after {
109
- background: ${colorNeutralStroke3};
109
+ background: var(${colorNeutralStroke3});
110
110
  }
111
111
  :host([appearance='subtle']) ::slotted(*) {
112
- color: ${colorNeutralForeground3};
112
+ color: var(${colorNeutralForeground3});
113
113
  }
114
114
  `.withBehaviors(forcedColorsStylesheetBehavior(css `
115
115
  :host([appearance='strong'])::before,
@@ -1 +1 @@
1
- {"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;kBASD,mBAAmB;;;;;cAKvB,eAAe;;;;;;;;aAQhB,uBAAuB;mBACjB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAyCvB,eAAe;;;;;;;;;;;;;;;;;;;;;kBAqBV,mBAAmB;;;aAGxB,uBAAuB;;;;kBAIlB,iBAAiB;;;aAGtB,qBAAqB;;;;kBAIhB,mBAAmB;;;aAGxB,uBAAuB;;CAEnC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"divider.styles.js","sourceRoot":"","sources":["../../../src/divider/divider.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,qBAAqB,EACrB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;sBASG,mBAAmB;;;;;kBAKvB,eAAe;;;;;;;;iBAQhB,uBAAuB;uBACjB,cAAc;qBAChB,eAAe;uBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAyCvB,eAAe;;;;;;;;;;;;;;;;;;;;;sBAqBV,mBAAmB;;;iBAGxB,uBAAuB;;;;sBAIlB,iBAAiB;;;iBAGtB,qBAAqB;;;;sBAIhB,mBAAmB;;;iBAGxB,uBAAuB;;CAEvC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;GAYjC,CAAC,CACH,CAAC"}
@@ -20,7 +20,7 @@ export const styles = css `
20
20
  height: auto;
21
21
  }
22
22
  :host([bordered]) ::slotted(img) {
23
- border: ${strokeWidthThin} solid ${colorNeutralStroke2};
23
+ border: var(${strokeWidthThin}) solid var(${colorNeutralStroke2});
24
24
  }
25
25
  :host([fit='none']) ::slotted(img) {
26
26
  object-fit: none;
@@ -47,13 +47,13 @@ export const styles = css `
47
47
  width: 100%;
48
48
  }
49
49
  :host([shadow]) ::slotted(img) {
50
- box-shadow: ${shadow4};
50
+ box-shadow: var(${shadow4});
51
51
  }
52
52
  :host([shape='circular']) ::slotted(img) {
53
- border-radius: ${borderRadiusCircular};
53
+ border-radius: var(${borderRadiusCircular});
54
54
  }
55
55
  :host([shape='rounded']) ::slotted(img) {
56
- border-radius: ${borderRadiusMedium};
56
+ border-radius: var(${borderRadiusMedium});
57
57
  }
58
58
  `;
59
59
  //# sourceMappingURL=image.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACP,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;cAgBX,eAAe,UAAU,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;kBA2BxC,OAAO;;;qBAGJ,oBAAoB;;;qBAGpB,kBAAkB;;CAEtC,CAAC"}
1
+ {"version":3,"file":"image.styles.js","sourceRoot":"","sources":["../../../src/image/image.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,OAAO,EACP,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;kBAgBP,eAAe,eAAe,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;sBA2B7C,OAAO;;;yBAGJ,oBAAoB;;;yBAGpB,kBAAkB;;CAE1C,CAAC"}
@@ -8,31 +8,31 @@ export const styles = css `
8
8
  ${display('flex')}
9
9
 
10
10
  :host {
11
- font-family: ${fontFamilyBase};
12
- font-size: ${fontSizeBase300};
13
- line-height: ${lineHeightBase300};
14
- font-weight: ${fontWeightRegular};
15
- color: ${colorNeutralForeground1};
11
+ font-family: var(${fontFamilyBase});
12
+ font-size: var(${fontSizeBase300});
13
+ line-height: var(${lineHeightBase300});
14
+ font-weight: var(${fontWeightRegular});
15
+ color: var(${colorNeutralForeground1});
16
16
  }
17
17
  .asterisk {
18
- color: ${colorPaletteRedForeground1};
19
- margin-left: ${spacingHorizontalXS};
18
+ color: var(${colorPaletteRedForeground1});
19
+ margin-left: var(${spacingHorizontalXS});
20
20
  }
21
21
  :host([size='small']) {
22
- font-size: ${fontSizeBase200};
23
- line-height: ${lineHeightBase200};
22
+ font-size: var(${fontSizeBase200});
23
+ line-height: var(${lineHeightBase200});
24
24
  }
25
25
  :host([size='large']) {
26
- font-size: ${fontSizeBase400};
27
- line-height: ${lineHeightBase400};
28
- font-weight: ${fontWeightSemibold};
26
+ font-size: var(${fontSizeBase400});
27
+ line-height: var(${lineHeightBase400});
28
+ font-weight: var(${fontWeightSemibold});
29
29
  }
30
30
  :host([weight='semibold']) {
31
- font-weight: ${fontWeightSemibold};
31
+ font-weight: var(${fontWeightSemibold});
32
32
  }
33
33
  :host([disabled]),
34
34
  :host([disabled]) .asterisk {
35
- color: ${colorNeutralForegroundDisabled};
35
+ color: var(${colorNeutralForegroundDisabled});
36
36
  }
37
37
  `;
38
38
  //# sourceMappingURL=label.styles.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;mBAGA,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;aACvB,uBAAuB;;;aAGvB,0BAA0B;mBACpB,mBAAmB;;;iBAGrB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;mBACjB,kBAAkB;;;mBAGlB,kBAAkB;;;;aAIxB,8BAA8B;;CAE1C,CAAC"}
1
+ {"version":3,"file":"label.styles.js","sourceRoot":"","sources":["../../../src/label/label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;uBAGI,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;iBACvB,uBAAuB;;;iBAGvB,0BAA0B;uBACpB,mBAAmB;;;qBAGrB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;uBACjB,kBAAkB;;;uBAGlB,kBAAkB;;;;iBAIxB,8BAA8B;;CAE9C,CAAC"}
@@ -12,10 +12,10 @@ export const styles = css `
12
12
  align-items: center;
13
13
  grid-gap: 4px;
14
14
  height: 32px;
15
- background: ${colorNeutralBackground1};
16
- font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
17
- border-radius: ${borderRadiusMedium};
18
- color: ${colorNeutralForeground2};
15
+ background: var(${colorNeutralBackground1});
16
+ font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
17
+ border-radius: var(${borderRadiusMedium});
18
+ color: var(${colorNeutralForeground2});
19
19
  padding: 0 10px;
20
20
  cursor: pointer;
21
21
  overflow: visible;
@@ -23,7 +23,7 @@ export const styles = css `
23
23
  }
24
24
 
25
25
  :host(:hover) {
26
- background: ${colorNeutralBackground1Hover};
26
+ background: var(${colorNeutralBackground1Hover});
27
27
  }
28
28
 
29
29
  .content {
@@ -47,14 +47,14 @@ export const styles = css `
47
47
  display: inline-flex;
48
48
  justify-content: center;
49
49
  align-items: center;
50
- color: ${colorNeutralForeground2};
50
+ color: var(${colorNeutralForeground2});
51
51
  }
52
52
 
53
53
  .expand-collapse-glyph-container,
54
54
  ::slotted([slot='start']),
55
55
  ::slotted([slot='end']) {
56
56
  height: 32px;
57
- font-size: ${fontSizeBase500};
57
+ font-size: var(${fontSizeBase500});
58
58
  width: fit-content;
59
59
  }
60
60
 
@@ -63,8 +63,8 @@ export const styles = css `
63
63
  }
64
64
 
65
65
  ::slotted([slot='end']) {
66
- color: ${colorNeutralForeground3};
67
- font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
66
+ color: var(${colorNeutralForeground3});
67
+ font: var(${fontWeightRegular}) var(${fontSizeBase200}) / var(${lineHeightBase200}) var(${fontFamilyBase});
68
68
  white-space: nowrap;
69
69
  grid-column: 4 / span 1;
70
70
  justify-self: flex-end;
@@ -78,36 +78,36 @@ export const styles = css `
78
78
  :host(:hover) .input-container,
79
79
  :host(:hover) .expand-collapse-glyph-container,
80
80
  :host(:hover) .content {
81
- color: ${colorNeutralForeground2Hover};
81
+ color: var(${colorNeutralForeground2Hover});
82
82
  }
83
83
 
84
84
  :host([icon]:hover) ::slotted([slot='start']) {
85
- color: ${colorCompoundBrandForeground1Hover};
85
+ color: var(${colorCompoundBrandForeground1Hover});
86
86
  }
87
87
 
88
88
  :host(:active) {
89
- background-color: ${colorNeutralBackground1Selected};
89
+ background-color: var(${colorNeutralBackground1Selected});
90
90
  }
91
91
 
92
92
  :host(:active) .input-container,
93
93
  :host(:active) .expand-collapse-glyph-container,
94
94
  :host(:active) .content {
95
- color: ${colorNeutralForeground2Pressed};
95
+ color: var(${colorNeutralForeground2Pressed});
96
96
  }
97
97
 
98
98
  :host(:active) ::slotted([slot='start']) {
99
- color: ${colorCompoundBrandForeground1Pressed};
99
+ color: var(${colorCompoundBrandForeground1Pressed});
100
100
  }
101
101
 
102
102
  :host([disabled]) {
103
- background-color: ${colorNeutralBackgroundDisabled};
103
+ background-color: var(${colorNeutralBackgroundDisabled});
104
104
  }
105
105
 
106
106
  :host([disabled]) .content,
107
107
  :host([disabled]) .expand-collapse-glyph-container,
108
108
  :host([disabled]) ::slotted([slot='end']),
109
109
  :host([disabled]) ::slotted([slot='start']) {
110
- color: ${colorNeutralForegroundDisabled};
110
+ color: var(${colorNeutralForegroundDisabled});
111
111
  }
112
112
 
113
113
  :host([data-indent]) {
@@ -1 +1 @@
1
- {"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,kCAAkC,EAClC,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;kBAOD,uBAAuB;YAC7B,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;qBACpE,kBAAkB;aAC1B,uBAAuB;;;;;;;;kBAQlB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;aAwBjC,uBAAuB;;;;;;;iBAOnB,eAAe;;;;;;;;;aASnB,uBAAuB;YACxB,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;;aAc5E,4BAA4B;;;;aAI5B,kCAAkC;;;;wBAIvB,+BAA+B;;;;;;aAM1C,8BAA8B;;;;aAI9B,oCAAoC;;;;wBAIzB,8BAA8B;;;;;;;aAOzC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE1C,CAAC"}
1
+ {"version":3,"file":"menu-item.styles.js","sourceRoot":"","sources":["../../../src/menu-item/menu-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,kCAAkC,EAClC,oCAAoC,EACpC,uBAAuB,EACvB,4BAA4B,EAC5B,+BAA+B,EAC/B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,8BAA8B,EAC9B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;sBAOG,uBAAuB;gBAC7B,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;yBACnF,kBAAkB;iBAC1B,uBAAuB;;;;;;;;sBAQlB,4BAA4B;;;;;;;;;;;;;;;;;;;;;;;;iBAwBjC,uBAAuB;;;;;;;qBAOnB,eAAe;;;;;;;;;iBASnB,uBAAuB;gBACxB,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;;;;;;;;;;;;;;iBAc3F,4BAA4B;;;;iBAI5B,kCAAkC;;;;4BAIvB,+BAA+B;;;;;;iBAM1C,8BAA8B;;;;iBAI9B,oCAAoC;;;;4BAIzB,8BAA8B;;;;;;;iBAOzC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwE9C,CAAC"}
@@ -13,10 +13,10 @@ export const styles = css `
13
13
  max-width: 300px;
14
14
  min-width: 160px;
15
15
  width: auto;
16
- background-color: ${colorNeutralBackground1};
17
- border: 1px solid ${colorTransparentStroke};
18
- border-radius: ${borderRadiusMedium};
19
- box-shadow: ${shadow16};
16
+ background-color: var(${colorNeutralBackground1});
17
+ border: 1px solid var(${colorTransparentStroke});
18
+ border-radius: var(${borderRadiusMedium});
19
+ box-shadow: var(${shadow16});
20
20
  padding: 4px;
21
21
  row-gap: 2px;
22
22
  }
@@ -1 +1 @@
1
- {"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;wBAQK,uBAAuB;wBACvB,sBAAsB;qBACzB,kBAAkB;kBACrB,QAAQ;;;;CAIzB,CAAC"}
1
+ {"version":3,"file":"menu-list.styles.js","sourceRoot":"","sources":["../../../src/menu-list/menu-list.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,QAAQ,GACT,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;4BAQS,uBAAuB;4BACvB,sBAAsB;yBACzB,kBAAkB;sBACrB,QAAQ;;;;CAI7B,CAAC"}
@@ -11,7 +11,7 @@ export const styles = css `
11
11
  align-items: center;
12
12
  height: 2px;
13
13
  overflow-x: hidden;
14
- border-radius: ${borderRadiusMedium};
14
+ border-radius: var(${borderRadiusMedium});
15
15
  contain: content;
16
16
  }
17
17
 
@@ -28,50 +28,50 @@ export const styles = css `
28
28
  }
29
29
 
30
30
  :host([validation-state='error']) .determinate {
31
- background-color: ${colorPaletteRedBackground3};
31
+ background-color: var(${colorPaletteRedBackground3});
32
32
  }
33
33
 
34
34
  :host([validation-state='error']) .indeterminate-indicator-1,
35
35
  :host([validation-state='error']) .indeterminate-indicator-2 {
36
36
  background: linear-gradient(
37
37
  to right,
38
- ${colorPaletteRedBackground2} 0%,
39
- ${colorPaletteRedBackground3} 50%,
40
- ${colorPaletteRedBackground2}
38
+ var(${colorPaletteRedBackground2}) 0%,
39
+ var(${colorPaletteRedBackground3}) 50%,
40
+ var(${colorPaletteRedBackground2})
41
41
  );
42
42
  }
43
43
 
44
44
  :host([validation-state='warning']) .determinate {
45
- background-color: ${colorPaletteDarkOrangeBackground3};
45
+ background-color: var(${colorPaletteDarkOrangeBackground3});
46
46
  }
47
47
 
48
48
  :host([validation-state='warning']) .indeterminate-indicator-1,
49
49
  :host([validation-state='warning']) .indeterminate-indicator-2 {
50
50
  background: linear-gradient(
51
51
  to right,
52
- ${colorPaletteDarkOrangeBackground2} 0%,
53
- ${colorPaletteDarkOrangeBackground3} 50%,
54
- ${colorPaletteDarkOrangeBackground2}
52
+ var(${colorPaletteDarkOrangeBackground2}) 0%,
53
+ var(${colorPaletteDarkOrangeBackground3}) 50%,
54
+ var(${colorPaletteDarkOrangeBackground2})
55
55
  );
56
56
  }
57
57
 
58
58
  :host([validation-state='success']) .determinate {
59
- background-color: ${colorPaletteGreenBackground3};
59
+ background-color: var(${colorPaletteGreenBackground3});
60
60
  }
61
61
 
62
62
  :host([validation-state='success']) .indeterminate-indicator-1,
63
63
  :host([validation-state='success']) .indeterminate-indicator-2 {
64
64
  background: linear-gradient(
65
65
  to right,
66
- ${colorPaletteGreenBackground2} 0%,
67
- ${colorPaletteGreenBackground3} 50%,
68
- ${colorPaletteGreenBackground2}
66
+ var(${colorPaletteGreenBackground2}) 0%,
67
+ var(${colorPaletteGreenBackground3}) 50%,
68
+ var(${colorPaletteGreenBackground2})
69
69
  );
70
70
  }
71
71
 
72
72
  .progress {
73
- background-color: ${colorNeutralBackground6};
74
- border-radius: ${borderRadiusMedium};
73
+ background-color: var(${colorNeutralBackground6});
74
+ border-radius: var(${borderRadiusMedium});
75
75
  width: 100%;
76
76
  height: 2px;
77
77
  display: flex;
@@ -80,8 +80,8 @@ export const styles = css `
80
80
  }
81
81
 
82
82
  .determinate {
83
- background-color: ${colorCompoundBrandBackground};
84
- border-radius: ${borderRadiusMedium};
83
+ background-color: var(${colorCompoundBrandBackground});
84
+ border-radius: var(${borderRadiusMedium});
85
85
  height: 2px;
86
86
  transition: all 0.2s ease-in-out;
87
87
  display: flex;
@@ -93,11 +93,11 @@ export const styles = css `
93
93
  height: 100%;
94
94
  background: linear-gradient(
95
95
  to right,
96
- ${colorBrandBackground2} 0%,
97
- ${colorCompoundBrandBackground} 50%,
98
- ${colorBrandBackground2}
96
+ var(${colorBrandBackground2}) 0%,
97
+ var(${colorCompoundBrandBackground}) 50%,
98
+ var(${colorBrandBackground2})
99
99
  );
100
- border-radius: ${borderRadiusMedium};
100
+ border-radius: var(${borderRadiusMedium});
101
101
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
102
102
  width: 40%;
103
103
  animation: indeterminate-1 3s infinite;
@@ -109,11 +109,11 @@ export const styles = css `
109
109
  height: 100%;
110
110
  background: linear-gradient(
111
111
  to right,
112
- ${colorBrandBackground2} 0%,
113
- ${colorCompoundBrandBackground} 50%,
114
- ${colorBrandBackground2}
112
+ var(${colorBrandBackground2}) 0%,
113
+ var(${colorCompoundBrandBackground}) 50%,
114
+ var(${colorBrandBackground2})
115
115
  );
116
- border-radius: ${borderRadiusMedium};
116
+ border-radius: var(${borderRadiusMedium});
117
117
  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
118
118
  width: 60%;
119
119
  animation: indeterminate-2 3s infinite;
@@ -1 +1 @@
1
- {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;qBAME,kBAAkB;;;;;;;;;;;;;;;;;wBAiBf,0BAA0B;;;;;;;QAO1C,0BAA0B;QAC1B,0BAA0B;QAC1B,0BAA0B;;;;;wBAKV,iCAAiC;;;;;;;QAOjD,iCAAiC;QACjC,iCAAiC;QACjC,iCAAiC;;;;;wBAKjB,4BAA4B;;;;;;;QAO5C,4BAA4B;QAC5B,4BAA4B;QAC5B,4BAA4B;;;;;wBAKZ,uBAAuB;qBAC1B,kBAAkB;;;;;;;;;wBASf,4BAA4B;qBAC/B,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;QAY/B,qBAAqB;QACrB,4BAA4B;QAC5B,qBAAqB;;qBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"progress-bar.styles.js","sourceRoot":"","sources":["../../../src/progress-bar/progress-bar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,4BAA4B,EAC5B,uBAAuB,EACvB,iCAAiC,EACjC,iCAAiC,EACjC,4BAA4B,EAC5B,4BAA4B,EAC5B,0BAA0B,EAC1B,0BAA0B,GAC3B,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;yBAMM,kBAAkB;;;;;;;;;;;;;;;;;4BAiBf,0BAA0B;;;;;;;YAO1C,0BAA0B;YAC1B,0BAA0B;YAC1B,0BAA0B;;;;;4BAKV,iCAAiC;;;;;;;YAOjD,iCAAiC;YACjC,iCAAiC;YACjC,iCAAiC;;;;;4BAKjB,4BAA4B;;;;;;;YAO5C,4BAA4B;YAC5B,4BAA4B;YAC5B,4BAA4B;;;;;4BAKZ,uBAAuB;yBAC1B,kBAAkB;;;;;;;;;4BASf,4BAA4B;yBAC/B,kBAAkB;;;;;;;;;;;;YAY/B,qBAAqB;YACrB,4BAA4B;YAC5B,qBAAqB;;yBAER,kBAAkB;;;;;;;;;;;;YAY/B,qBAAqB;YACrB,4BAA4B;YAC5B,qBAAqB;;yBAER,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwC1C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBjC,CAAC,CACH,CAAC"}
@@ -10,7 +10,7 @@ export const styles = css `
10
10
  :host {
11
11
  grid-auto-flow: column;
12
12
  grid-template-columns: max-content;
13
- gap: ${spacingHorizontalXS};
13
+ gap: var(${spacingHorizontalXS});
14
14
  align-items: center;
15
15
  height: 32px;
16
16
  cursor: pointer;
@@ -18,23 +18,23 @@ export const styles = css `
18
18
  position: relative;
19
19
  user-select: none;
20
20
  color: blue;
21
- color: var(--state-color, ${colorNeutralForeground3});
22
- padding-inline-end: ${spacingHorizontalS};
23
- --control-border-color: ${colorNeutralStrokeAccessible};
24
- --checked-indicator-background-color: ${colorCompoundBrandForeground1};
25
- --state-color: ${colorNeutralForeground3};
21
+ color: var(--state-color, var(${colorNeutralForeground3}));
22
+ padding-inline-end: var(${spacingHorizontalS});
23
+ --control-border-color: var(${colorNeutralStrokeAccessible});
24
+ --checked-indicator-background-color: var(${colorCompoundBrandForeground1});
25
+ --state-color: var(${colorNeutralForeground3});
26
26
  }
27
27
  :host([disabled]) {
28
- --control-border-color: ${colorNeutralForegroundDisabled};
29
- --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
30
- --state-color: ${colorNeutralForegroundDisabled};
28
+ --control-border-color: var(${colorNeutralForegroundDisabled});
29
+ --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
30
+ --state-color: var(${colorNeutralForegroundDisabled});
31
31
  }
32
32
  .label {
33
33
  cursor: pointer;
34
- font-family: ${fontFamilyBase};
35
- font-size: ${fontSizeBase300};
36
- font-weight: ${fontWeightRegular};
37
- line-height: ${lineHeightBase300};
34
+ font-family: var(${fontFamilyBase});
35
+ font-size: var(${fontSizeBase300});
36
+ font-weight: var(${fontWeightRegular});
37
+ line-height: var(${lineHeightBase300});
38
38
  }
39
39
  .label__hidden {
40
40
  display: none;
@@ -42,67 +42,67 @@ export const styles = css `
42
42
  .control {
43
43
  box-sizing: border-box;
44
44
  align-items: center;
45
- border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
46
- border-radius: ${borderRadiusCircular};
45
+ border: 1px solid var(--control-border-color, var(${colorNeutralStrokeAccessible}));
46
+ border-radius: var(${borderRadiusCircular});
47
47
  display: flex;
48
48
  height: 16px;
49
49
  justify-content: center;
50
- margin: ${spacingVerticalS} ${spacingHorizontalS};
50
+ margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
51
51
  position: relative;
52
52
  width: 16px;
53
53
  justify-self: center;
54
54
  }
55
55
  .checked-indicator {
56
- border-radius: ${borderRadiusCircular};
56
+ border-radius: var(${borderRadiusCircular});
57
57
  height: 10px;
58
58
  opacity: 0;
59
59
  width: 10px;
60
60
  }
61
61
  :host([aria-checked='false']:hover) .control {
62
- color: ${colorNeutralForeground2};
62
+ color: var(${colorNeutralForeground2});
63
63
  }
64
64
  :host(:focus-visible) {
65
- border-radius: ${borderRadiusSmall};
66
- box-shadow: 0 0 0 3px ${colorStrokeFocus2};
67
- outline: 1px solid ${colorStrokeFocus1};
65
+ border-radius: var(${borderRadiusSmall});
66
+ box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
67
+ outline: 1px solid var(${colorStrokeFocus1});
68
68
  }
69
69
  :host(:hover) .control {
70
- border-color: ${colorNeutralStrokeAccessibleHover};
70
+ border-color: var(${colorNeutralStrokeAccessibleHover});
71
71
  }
72
72
  :host(:active) .control {
73
- border-color: ${colorNeutralStrokeAccessiblePressed};
73
+ border-color: var(${colorNeutralStrokeAccessiblePressed});
74
74
  }
75
75
  :host([aria-checked='true']) .checked-indicator {
76
76
  opacity: 1;
77
77
  }
78
78
  :host([aria-checked='true']) .control {
79
- border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
79
+ border-color: var(--control-border-color, var(${colorNeutralStrokeAccessible}));
80
80
  }
81
81
  :host([aria-checked='true']) .checked-indicator {
82
- background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
82
+ background-color: var(--checked-indicator-background-color, var(${colorCompoundBrandForeground1}));
83
83
  }
84
84
  :host([aria-checked='true']:hover) .control {
85
- border-color: ${colorCompoundBrandStrokeHover};
85
+ border-color: var(${colorCompoundBrandStrokeHover});
86
86
  }
87
87
  :host([aria-checked='true']:hover) .checked-indicator {
88
- background-color: ${colorCompoundBrandStrokeHover};
88
+ background-color: var(${colorCompoundBrandStrokeHover});
89
89
  }
90
90
  :host([aria-checked='true']:active) .control {
91
- border-color: ${colorCompoundBrandStrokePressed};
91
+ border-color: var(${colorCompoundBrandStrokePressed});
92
92
  }
93
93
  :host([aria-checked='true']:active) .checked-indicator {
94
- background: ${colorCompoundBrandForeground1Pressed};
94
+ background: var(${colorCompoundBrandForeground1Pressed});
95
95
  }
96
96
  :host([disabled]) {
97
- color: ${colorNeutralForegroundDisabled};
97
+ color: var(${colorNeutralForegroundDisabled});
98
98
  pointer-events: none;
99
99
  }
100
100
  :host([disabled]) .control {
101
101
  pointer-events: none;
102
- border-color: ${colorNeutralForegroundDisabled};
102
+ border-color: var(${colorNeutralForegroundDisabled});
103
103
  }
104
104
  :host([disabled]) .checked-indicator {
105
- background: ${colorNeutralForegroundDisabled};
105
+ background: var(${colorNeutralForegroundDisabled});
106
106
  }
107
107
  `.withBehaviors(forcedColorsStylesheetBehavior(css `
108
108
  :host .control {
@@ -1 +1 @@
1
- {"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;WAKf,mBAAmB;;;;;;;;gCAQE,uBAAuB;0BAC7B,kBAAkB;8BACd,4BAA4B;4CACd,6BAA6B;qBACpD,uBAAuB;;;8BAGd,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;;mBAIhC,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;oDAQgB,4BAA4B;qBAC3D,oBAAoB;;;;cAI3B,gBAAgB,IAAI,kBAAkB;;;;;;qBAM/B,oBAAoB;;;;;;aAM5B,uBAAuB;;;qBAGf,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;;oBAGtB,iCAAiC;;;oBAGjC,mCAAmC;;;;;;gDAMP,4BAA4B;;;kEAGV,6BAA6B;;;oBAG3E,6BAA6B;;;wBAGzB,6BAA6B;;;oBAGjC,+BAA+B;;;kBAGjC,oCAAoC;;;aAGzC,8BAA8B;;;;;oBAKvB,8BAA8B;;;kBAGhC,8BAA8B;;CAE/C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}
1
+ {"version":3,"file":"radio.styles.js","sourceRoot":"","sources":["../../../src/radio/radio.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,yCAAyC,CAAC;AAClG,OAAO,EACL,oBAAoB,EACpB,iBAAiB,EACjB,6BAA6B,EAC7B,oCAAoC,EACpC,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;eAKX,mBAAmB;;;;;;;;oCAQE,uBAAuB;8BAC7B,kBAAkB;kCACd,4BAA4B;gDACd,6BAA6B;yBACpD,uBAAuB;;;kCAGd,8BAA8B;gDAChB,8BAA8B;yBACrD,8BAA8B;;;;uBAIhC,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;wDAQgB,4BAA4B;yBAC3D,oBAAoB;;;;kBAI3B,gBAAgB,SAAS,kBAAkB;;;;;;yBAMpC,oBAAoB;;;;;;iBAM5B,uBAAuB;;;yBAGf,iBAAiB;gCACV,iBAAiB;6BACpB,iBAAiB;;;wBAGtB,iCAAiC;;;wBAGjC,mCAAmC;;;;;;oDAMP,4BAA4B;;;sEAGV,6BAA6B;;;wBAG3E,6BAA6B;;;4BAGzB,6BAA6B;;;wBAGjC,+BAA+B;;;sBAGjC,oCAAoC;;;iBAGzC,8BAA8B;;;;;wBAKvB,8BAA8B;;;sBAGhC,8BAA8B;;CAEnD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;GAUjC,CAAC,CACH,CAAC"}