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

package/dist/esm/image/image.styles.js

@@ -20,7 +20,7 @@ export const styles = css `
     height: auto;
   }
   :host([bordered]) ::slotted(img) {
-    border: ${strokeWidthThin} solid ${colorNeutralStroke2};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke2});
   }
   :host([fit='none']) ::slotted(img) {
     object-fit: none;
@@ -47,13 +47,13 @@ export const styles = css `
     width: 100%;
   }
   :host([shadow]) ::slotted(img) {
-    box-shadow: ${shadow4};
+    box-shadow: var(${shadow4});
   }
   :host([shape='circular']) ::slotted(img) {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
   :host([shape='rounded']) ::slotted(img) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 `;
 //# sourceMappingURL=image.styles.js.map

package/dist/esm/image/image.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from './button/index.js';
 export * from './checkbox/index.js';
 export * from './compound-button/index.js';
 export * from './counter-badge/index.js';
+export * from './dialog/index.js';
 export * from './divider/index.js';
 export * from './image/index.js';
 export * from './label/index.js';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC;AAChC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AAEzC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kBAAkB,CAAC"}

package/dist/esm/label/label.styles.js

@@ -8,31 +8,31 @@ export const styles = css `
   ${display('flex')}
 
   :host {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightRegular};
-    color: ${colorNeutralForeground1};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightRegular});
+    color: var(${colorNeutralForeground1});
   }
   .asterisk {
-    color: ${colorPaletteRedForeground1};
-    margin-left: ${spacingHorizontalXS};
+    color: var(${colorPaletteRedForeground1});
+    margin-left: var(${spacingHorizontalXS});
   }
   :host([size='small']) {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
   :host([size='large']) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-    font-weight: ${fontWeightSemibold};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
+    font-weight: var(${fontWeightSemibold});
   }
   :host([weight='semibold']) {
-    font-weight: ${fontWeightSemibold};
+    font-weight: var(${fontWeightSemibold});
   }
   :host([disabled]),
   :host([disabled]) .asterisk {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 `;
 //# sourceMappingURL=label.styles.js.map

package/dist/esm/label/label.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/menu-item/menu-item.styles.js

@@ -12,10 +12,10 @@ export const styles = css `
     align-items: center;
     grid-gap: 4px;
     height: 32px;
-    background: ${colorNeutralBackground1};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
-    border-radius: ${borderRadiusMedium};
-    color: ${colorNeutralForeground2};
+    background: var(${colorNeutralBackground1});
+    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
+    border-radius: var(${borderRadiusMedium});
+    color: var(${colorNeutralForeground2});
     padding: 0 10px;
     cursor: pointer;
     overflow: visible;
@@ -23,7 +23,7 @@ export const styles = css `
   }
 
   :host(:hover) {
-    background: ${colorNeutralBackground1Hover};
+    background: var(${colorNeutralBackground1Hover});
   }
 
   .content {
@@ -47,14 +47,14 @@ export const styles = css `
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
 
   .expand-collapse-glyph-container,
   ::slotted([slot='start']),
   ::slotted([slot='end']) {
     height: 32px;
-    font-size: ${fontSizeBase500};
+    font-size: var(${fontSizeBase500});
     width: fit-content;
   }
 
@@ -63,8 +63,8 @@ export const styles = css `
   }
 
   ::slotted([slot='end']) {
-    color: ${colorNeutralForeground3};
-    font: ${fontWeightRegular} ${fontSizeBase200} / ${lineHeightBase200} ${fontFamilyBase};
+    color: var(${colorNeutralForeground3});
+    font: var(${fontWeightRegular}) var(${fontSizeBase200}) / var(${lineHeightBase200}) var(${fontFamilyBase});
     white-space: nowrap;
     grid-column: 4 / span 1;
     justify-self: flex-end;
@@ -78,36 +78,36 @@ export const styles = css `
   :host(:hover) .input-container,
   :host(:hover) .expand-collapse-glyph-container,
   :host(:hover) .content {
-    color: ${colorNeutralForeground2Hover};
+    color: var(${colorNeutralForeground2Hover});
   }
 
   :host([icon]:hover) ::slotted([slot='start']) {
-    color: ${colorCompoundBrandForeground1Hover};
+    color: var(${colorCompoundBrandForeground1Hover});
   }
 
   :host(:active) {
-    background-color: ${colorNeutralBackground1Selected};
+    background-color: var(${colorNeutralBackground1Selected});
   }
 
   :host(:active) .input-container,
   :host(:active) .expand-collapse-glyph-container,
   :host(:active) .content {
-    color: ${colorNeutralForeground2Pressed};
+    color: var(${colorNeutralForeground2Pressed});
   }
 
   :host(:active) ::slotted([slot='start']) {
-    color: ${colorCompoundBrandForeground1Pressed};
+    color: var(${colorCompoundBrandForeground1Pressed});
   }
 
   :host([disabled]) {
-    background-color: ${colorNeutralBackgroundDisabled};
+    background-color: var(${colorNeutralBackgroundDisabled});
   }
 
   :host([disabled]) .content,
   :host([disabled]) .expand-collapse-glyph-container,
   :host([disabled]) ::slotted([slot='end']),
   :host([disabled]) ::slotted([slot='start']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([data-indent]) {

package/dist/esm/menu-item/menu-item.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/menu-list/menu-list.styles.js

@@ -13,10 +13,10 @@ export const styles = css `
     max-width: 300px;
     min-width: 160px;
     width: auto;
-    background-color: ${colorNeutralBackground1};
-    border: 1px solid ${colorTransparentStroke};
-    border-radius: ${borderRadiusMedium};
-    box-shadow: ${shadow16};
+    background-color: var(${colorNeutralBackground1});
+    border: 1px solid var(${colorTransparentStroke});
+    border-radius: var(${borderRadiusMedium});
+    box-shadow: var(${shadow16});
     padding: 4px;
     row-gap: 2px;
   }

package/dist/esm/menu-list/menu-list.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/progress-bar/progress-bar.styles.js

@@ -11,7 +11,7 @@ export const styles = css `
     align-items: center;
     height: 2px;
     overflow-x: hidden;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     contain: content;
   }
 
@@ -28,50 +28,50 @@ export const styles = css `
   }
 
   :host([validation-state='error']) .determinate {
-    background-color: ${colorPaletteRedBackground3};
+    background-color: var(${colorPaletteRedBackground3});
   }
 
   :host([validation-state='error']) .indeterminate-indicator-1,
   :host([validation-state='error']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteRedBackground2} 0%,
-      ${colorPaletteRedBackground3} 50%,
-      ${colorPaletteRedBackground2}
+      var(${colorPaletteRedBackground2}) 0%,
+      var(${colorPaletteRedBackground3}) 50%,
+      var(${colorPaletteRedBackground2})
     );
   }
 
   :host([validation-state='warning']) .determinate {
-    background-color: ${colorPaletteDarkOrangeBackground3};
+    background-color: var(${colorPaletteDarkOrangeBackground3});
   }
 
   :host([validation-state='warning']) .indeterminate-indicator-1,
   :host([validation-state='warning']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteDarkOrangeBackground2} 0%,
-      ${colorPaletteDarkOrangeBackground3} 50%,
-      ${colorPaletteDarkOrangeBackground2}
+      var(${colorPaletteDarkOrangeBackground2}) 0%,
+      var(${colorPaletteDarkOrangeBackground3}) 50%,
+      var(${colorPaletteDarkOrangeBackground2})
     );
   }
 
   :host([validation-state='success']) .determinate {
-    background-color: ${colorPaletteGreenBackground3};
+    background-color: var(${colorPaletteGreenBackground3});
   }
 
   :host([validation-state='success']) .indeterminate-indicator-1,
   :host([validation-state='success']) .indeterminate-indicator-2 {
     background: linear-gradient(
       to right,
-      ${colorPaletteGreenBackground2} 0%,
-      ${colorPaletteGreenBackground3} 50%,
-      ${colorPaletteGreenBackground2}
+      var(${colorPaletteGreenBackground2}) 0%,
+      var(${colorPaletteGreenBackground3}) 50%,
+      var(${colorPaletteGreenBackground2})
     );
   }
 
   .progress {
-    background-color: ${colorNeutralBackground6};
-    border-radius: ${borderRadiusMedium};
+    background-color: var(${colorNeutralBackground6});
+    border-radius: var(${borderRadiusMedium});
     width: 100%;
     height: 2px;
     display: flex;
@@ -80,8 +80,8 @@ export const styles = css `
   }
 
   .determinate {
-    background-color: ${colorCompoundBrandBackground};
-    border-radius: ${borderRadiusMedium};
+    background-color: var(${colorCompoundBrandBackground});
+    border-radius: var(${borderRadiusMedium});
     height: 2px;
     transition: all 0.2s ease-in-out;
     display: flex;
@@ -93,11 +93,11 @@ export const styles = css `
     height: 100%;
     background: linear-gradient(
       to right,
-      ${colorBrandBackground2} 0%,
-      ${colorCompoundBrandBackground} 50%,
-      ${colorBrandBackground2}
+      var(${colorBrandBackground2}) 0%,
+      var(${colorCompoundBrandBackground}) 50%,
+      var(${colorBrandBackground2})
     );
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     width: 40%;
     animation: indeterminate-1 3s infinite;
@@ -109,11 +109,11 @@ export const styles = css `
     height: 100%;
     background: linear-gradient(
       to right,
-      ${colorBrandBackground2} 0%,
-      ${colorCompoundBrandBackground} 50%,
-      ${colorBrandBackground2}
+      var(${colorBrandBackground2}) 0%,
+      var(${colorCompoundBrandBackground}) 50%,
+      var(${colorBrandBackground2})
     );
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
     width: 60%;
     animation: indeterminate-2 3s infinite;

package/dist/esm/progress-bar/progress-bar.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/radio/radio.styles.js

@@ -10,7 +10,7 @@ export const styles = css `
   :host {
     grid-auto-flow: column;
     grid-template-columns: max-content;
-    gap: ${spacingHorizontalXS};
+    gap: var(${spacingHorizontalXS});
     align-items: center;
     height: 32px;
     cursor: pointer;
@@ -18,23 +18,23 @@ export const styles = css `
     position: relative;
     user-select: none;
     color: blue;
-    color: var(--state-color, ${colorNeutralForeground3});
-    padding-inline-end: ${spacingHorizontalS};
-    --control-border-color: ${colorNeutralStrokeAccessible};
-    --checked-indicator-background-color: ${colorCompoundBrandForeground1};
-    --state-color: ${colorNeutralForeground3};
+    color: var(--state-color, var(${colorNeutralForeground3}));
+    padding-inline-end: var(${spacingHorizontalS});
+    --control-border-color: var(${colorNeutralStrokeAccessible});
+    --checked-indicator-background-color: var(${colorCompoundBrandForeground1});
+    --state-color: var(${colorNeutralForeground3});
   }
   :host([disabled]) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
+    --control-border-color: var(${colorNeutralForegroundDisabled});
+    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
+    --state-color: var(${colorNeutralForegroundDisabled});
   }
   .label {
     cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
   }
   .label__hidden {
     display: none;
@@ -42,67 +42,67 @@ export const styles = css `
   .control {
     box-sizing: border-box;
     align-items: center;
-    border: 1px solid var(--control-border-color, ${colorNeutralStrokeAccessible});
-    border-radius: ${borderRadiusCircular};
+    border: 1px solid var(--control-border-color, var(${colorNeutralStrokeAccessible}));
+    border-radius: var(${borderRadiusCircular});
     display: flex;
     height: 16px;
     justify-content: center;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     position: relative;
     width: 16px;
     justify-self: center;
   }
   .checked-indicator {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
     height: 10px;
     opacity: 0;
     width: 10px;
   }
   :host([aria-checked='false']:hover) .control {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
   :host(:focus-visible) {
-    border-radius: ${borderRadiusSmall};
-    box-shadow: 0 0 0 3px ${colorStrokeFocus2};
-    outline: 1px solid ${colorStrokeFocus1};
+    border-radius: var(${borderRadiusSmall});
+    box-shadow: 0 0 0 3px var(${colorStrokeFocus2});
+    outline: 1px solid var(${colorStrokeFocus1});
   }
   :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([aria-checked='true']) .checked-indicator {
     opacity: 1;
   }
   :host([aria-checked='true']) .control {
-    border-color: var(--control-border-color, ${colorNeutralStrokeAccessible});
+    border-color: var(--control-border-color, var(${colorNeutralStrokeAccessible}));
   }
   :host([aria-checked='true']) .checked-indicator {
-    background-color: var(--checked-indicator-background-color, ${colorCompoundBrandForeground1});
+    background-color: var(--checked-indicator-background-color, var(${colorCompoundBrandForeground1}));
   }
   :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']:hover) .checked-indicator {
-    background-color: ${colorCompoundBrandStrokeHover};
+    background-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+    border-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorCompoundBrandForeground1Pressed};
+    background: var(${colorCompoundBrandForeground1Pressed});
   }
   :host([disabled]) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
     pointer-events: none;
   }
   :host([disabled]) .control {
     pointer-events: none;
-    border-color: ${colorNeutralForegroundDisabled};
+    border-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host .control {

package/dist/esm/radio/radio.styles.js.map

@@ -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"}
+{"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"}

package/dist/esm/radio-group/radio-group.styles.js

@@ -10,17 +10,17 @@ export const styles = css `
   :host {
     align-items: flex-start;
     flex-direction: column;
-    row-gap: ${spacingVerticalS};
+    row-gap: var(${spacingVerticalS});
   }
   :host([disabled]) ::slotted([role='radio']) {
-    --control-border-color: ${colorNeutralForegroundDisabled};
-    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};
-    --state-color: ${colorNeutralForegroundDisabled};
+    --control-border-color: var(${colorNeutralForegroundDisabled});
+    --checked-indicator-background-color: var(${colorNeutralForegroundDisabled});
+    --state-color: var(${colorNeutralForegroundDisabled});
   }
   ::slotted([slot='label']) {
-    color: ${colorNeutralForeground1};
-    padding: ${spacingVerticalS} ${spacingHorizontalS} ${spacingVerticalS} ${spacingHorizontalXS};
-    font: ${fontWeightRegular} ${fontSizeBase300} / ${lineHeightBase300} ${fontFamilyBase};
+    color: var(${colorNeutralForeground1});
+    padding: var(${spacingVerticalS}) var(${spacingHorizontalS}) var(${spacingVerticalS}) var(${spacingHorizontalXS});
+    font: var(${fontWeightRegular}) var(${fontSizeBase300}) / var(${lineHeightBase300}) var(${fontFamilyBase});
     cursor: default;
   }
   .positioning-region {
@@ -35,12 +35,12 @@ export const styles = css `
     flex-direction: row;
   }
   :host([orientation='horizontal']) ::slotted([role='radio']) {
-    padding-inline-end: ${spacingHorizontalS};
+    padding-inline-end: var(${spacingHorizontalS});
   }
   :host([orientation='horizontal'][stacked]) ::slotted([role='radio']) {
     display: flex;
     flex-direction: column;
-    padding-inline: ${spacingHorizontalS};
+    padding-inline: var(${spacingHorizontalS});
     height: auto;
     align-items: center;
     justify-content: center;

package/dist/esm/radio-group/radio-group.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.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,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,MAAM,CAAC;;;;;eAKJ,gBAAgB;;;8BAGD,8BAA8B;4CAChB,8BAA8B;qBACrD,8BAA8B;;;aAGtC,uBAAuB;eACrB,gBAAgB,IAAI,kBAAkB,IAAI,gBAAgB,IAAI,mBAAmB;YACpF,iBAAiB,IAAI,eAAe,MAAM,iBAAiB,IAAI,cAAc;;;;;;;;;;;;;;;0BAe/D,kBAAkB;;;;;sBAKtB,kBAAkB;;;;;;;;CAQvC,CAAC"}
+{"version":3,"file":"radio-group.styles.js","sourceRoot":"","sources":["../../../src/radio-group/radio-group.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,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,MAAM,CAAC;;;;;mBAKA,gBAAgB;;;kCAGD,8BAA8B;gDAChB,8BAA8B;yBACrD,8BAA8B;;;iBAGtC,uBAAuB;mBACrB,gBAAgB,SAAS,kBAAkB,SAAS,gBAAgB,SAAS,mBAAmB;gBACnG,iBAAiB,SAAS,eAAe,WAAW,iBAAiB,SAAS,cAAc;;;;;;;;;;;;;;;8BAe9E,kBAAkB;;;;;0BAKtB,kBAAkB;;;;;;;;CAQ3C,CAAC"}