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

package/dist/esm/button/button.styles.js

@@ -6,7 +6,7 @@ export const styles = css `
   ${display('inline-flex')}
 
   :host {
-    --icon-spacing: ${spacingHorizontalSNudge};
+    --icon-spacing: var(${spacingHorizontalSNudge});
     contain: layout style;
     vertical-align: middle;
   }
@@ -20,19 +20,19 @@ export const styles = css `
     margin: 0;
     min-height: 32px;
     outline-style: none;
-    background-color: ${colorNeutralBackground1};
-    color: ${colorNeutralForeground1};
-    border: ${strokeWidthThin} solid ${colorNeutralStroke1};
-    padding: 0 ${spacingHorizontalM};
+    background-color: var(${colorNeutralBackground1});
+    color: var(${colorNeutralForeground1});
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStroke1});
+    padding: 0 var(${spacingHorizontalM});
     min-width: 96px;
-    border-radius: ${borderRadiusMedium};
-    font-size: ${fontSizeBase300};
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    line-height: ${lineHeightBase300};
-    transition-duration: ${durationFaster};
+    border-radius: var(${borderRadiusMedium});
+    font-size: var(${fontSizeBase300});
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    line-height: var(${lineHeightBase300});
+    transition-duration: var(${durationFaster});
     transition-property: background, border, color;
-    transition-timing-function: ${curveEasyEase};
+    transition-timing-function: var(${curveEasyEase});
     cursor: pointer;
   }
 
@@ -41,22 +41,22 @@ export const styles = css `
   }
 
   :host(:hover) .control {
-    background-color: ${colorNeutralBackground1Hover};
-    color: ${colorNeutralForeground1Hover};
-    border-color: ${colorNeutralStroke1Hover};
+    background-color: var(${colorNeutralBackground1Hover});
+    color: var(${colorNeutralForeground1Hover});
+    border-color: var(${colorNeutralStroke1Hover});
   }
 
   :host(:hover:active) .control {
-    background-color: ${colorNeutralBackground1Pressed};
-    border-color: ${colorNeutralStroke1Pressed};
-    color: ${colorNeutralForeground1Pressed};
+    background-color: var(${colorNeutralBackground1Pressed});
+    border-color: var(${colorNeutralStroke1Pressed});
+    color: var(${colorNeutralForeground1Pressed});
     outline-style: none;
   }
 
   :host .control:focus-visible {
-    border-color: ${colorTransparentStroke};
-    outline: ${strokeWidthThick} solid ${colorTransparentStroke};
-    box-shadow: ${shadow4}, 0 0 0 2px ${colorStrokeFocus2};
+    border-color: var(${colorTransparentStroke});
+    outline: var(${strokeWidthThick}) solid var(${colorTransparentStroke});
+    box-shadow: var(${shadow4}), 0 0 0 2px var(${colorStrokeFocus2});
   }
 
   @media screen and (prefers-reduced-motion: reduce) {
@@ -86,17 +86,17 @@ export const styles = css `
   }
 
   :host([size='small']) {
-    --icon-spacing: ${spacingHorizontalXS};
+    --icon-spacing: var(${spacingHorizontalXS});
   }
 
   :host([size='small']) .control {
     min-height: 24px;
     min-width: 64px;
-    padding: 0 ${spacingHorizontalS};
-    border-radius: ${borderRadiusSmall};
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
-    font-weight: ${fontWeightRegular};
+    padding: 0 var(${spacingHorizontalS});
+    border-radius: var(${borderRadiusSmall});
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
+    font-weight: var(${fontWeightRegular});
   }
 
   :host([size='small'][icon-only]) .control {
@@ -106,10 +106,10 @@ export const styles = css `
 
   :host([size='large']) .control {
     min-height: 40px;
-    border-radius: ${borderRadiusLarge};
-    padding: 0 ${spacingHorizontalL};
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    border-radius: var(${borderRadiusLarge});
+    padding: 0 var(${spacingHorizontalL});
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
 
   :host([size='large'][icon-only]) .control {
@@ -125,37 +125,37 @@ export const styles = css `
 
   :host([shape='circular']) .control,
   :host([shape='circular']) .control:focus-visible {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
 
   :host([shape='square']) .control,
   :host([shape='square']) .control:focus-visible {
-    border-radius: ${borderRadiusNone};
+    border-radius: var(${borderRadiusNone});
   }
 
   :host([appearance='primary']) .control {
-    background-color: ${colorBrandBackground};
-    color: ${colorNeutralForegroundOnBrand};
+    background-color: var(${colorBrandBackground});
+    color: var(${colorNeutralForegroundOnBrand});
     border-color: transparent;
   }
 
   :host([appearance='primary']:hover) .control {
-    background-color: ${colorBrandBackgroundHover};
+    background-color: var(${colorBrandBackgroundHover});
   }
 
   :host([appearance='primary']:hover) .control,
   :host([appearance='primary']:hover:active) .control {
     border-color: transparent;
-    color: ${colorNeutralForegroundOnBrand};
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host([appearance='primary']:hover:active) .control {
-    background-color: ${colorBrandBackgroundPressed};
+    background-color: var(${colorBrandBackgroundPressed});
   }
 
   :host([appearance='primary']) .control:focus-visible {
-    border-color: ${colorNeutralForegroundOnBrand};
-    box-shadow: ${shadow2}, 0 0 0 2px ${colorStrokeFocus2};
+    border-color: var(${colorNeutralForegroundOnBrand});
+    box-shadow: var(${shadow2}), 0 0 0 2px var(${colorStrokeFocus2});
   }
 
   :host(is:([disabled][appearance='primary'], [disabled-focusabale][appearance="primary"])) .control,
@@ -165,69 +165,69 @@ export const styles = css `
   }
 
   :host([appearance='outline']) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host([appearance='outline']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
+    background-color: var(${colorTransparentBackgroundHover});
   }
 
   :host([appearance='outline']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
+    background-color: var(${colorTransparentBackgroundPressed});
   }
 
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"])) .control,
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover) .control,
   :host(is:([disabled][appearance='outline'], [disabled-focusabale][appearance="outline"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host([appearance='subtle']) .control {
-    background-color: ${colorSubtleBackground};
-    color: ${colorNeutralForeground2};
+    background-color: var(${colorSubtleBackground});
+    color: var(${colorNeutralForeground2});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover) .control {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground2Hover};
+    background-color: var(${colorSubtleBackgroundHover});
+    color: var(${colorNeutralForeground2Hover});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover:active) .control {
-    background-color: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground2Pressed};
+    background-color: var(${colorSubtleBackgroundPressed});
+    color: var(${colorNeutralForeground2Pressed});
     border-color: transparent;
   }
 
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"])) .control,
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover) .control,
   :host(is:([disabled][appearance='subtle'], [disabled-focusabale][appearance="subtle"]):hover:active) .control {
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
     border-color: transparent;
   }
 
   :host([appearance='subtle']:hover) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandHover};
+    fill: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='subtle']:hover:active) ::slotted(svg) {
-    fill: ${colorNeutralForeground2BrandPressed};
+    fill: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host([appearance='transparent']) .control {
-    background-color: ${colorTransparentBackground};
-    color: ${colorNeutralForeground2};
+    background-color: var(${colorTransparentBackground});
+    color: var(${colorNeutralForeground2});
   }
 
   :host([appearance='transparent']:hover) .control {
-    background-color: ${colorTransparentBackgroundHover};
-    color: ${colorNeutralForeground2BrandHover};
+    background-color: var(${colorTransparentBackgroundHover});
+    color: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='transparent']:hover:active) .control {
-    background-color: ${colorTransparentBackgroundPressed};
-    color: ${colorNeutralForeground2BrandPressed};
+    background-color: var(${colorTransparentBackgroundPressed});
+    color: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host([appearance='transparent']) .control,
@@ -240,16 +240,16 @@ export const styles = css `
   :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover) .control,
   :host(is:([disabled][appearance='transparent'], [disabled-focusabale][appearance="transparent"]):hover:active) .control {
     border-color: transparent;
-    background-color: ${colorTransparentBackground};
+    background-color: var(${colorTransparentBackground});
   }
 
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable])) .control,
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover) .control,
   :host(:is([disabled], [disabled-focusable], [appearance][disabled], [appearance][disabled-focusable]):hover:active)
     .control {
-    background-color: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
-    color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralBackgroundDisabled});
+    border-color: var(${colorNeutralStrokeDisabled});
+    color: var(${colorNeutralForegroundDisabled});
     cursor: not-allowed;
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `

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

@@ -1 +1 @@
-{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../src/button/button.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,kBAAkB,EAClB,gBAAgB,EAChB,iBAAiB,EACjB,oBAAoB,EACpB,yBAAyB,EACzB,2BAA2B,EAC3B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,mBAAmB,EACnB,wBAAwB,EACxB,0BAA0B,EAC1B,0BAA0B,EAC1B,iBAAiB,EACjB,qBAAqB,EACrB,0BAA0B,EAC1B,4BAA4B,EAC5B,0BAA0B,EAC1B,+BAA+B,EAC/B,iCAAiC,EACjC,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,OAAO,EACP,kBAAkB,EAClB,kBAAkB,EAClB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;0BAGA,uBAAuB;;;;;;;;;;;;;;4BAcrB,uBAAuB;iBAClC,uBAAuB;kBACtB,eAAe,eAAe,mBAAmB;qBAC9C,kBAAkB;;yBAEd,kBAAkB;qBACtB,eAAe;uBACb,cAAc;uBACd,kBAAkB;uBAClB,iBAAiB;+BACT,cAAc;;sCAEP,aAAa;;;;;;;;;4BASvB,4BAA4B;iBACvC,4BAA4B;wBACrB,wBAAwB;;;;4BAIpB,8BAA8B;wBAClC,0BAA0B;iBACjC,8BAA8B;;;;;wBAKvB,sBAAsB;mBAC3B,gBAAgB,eAAe,sBAAsB;sBAClD,OAAO,oBAAoB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;0BA8BxC,mBAAmB;;;;;;qBAMxB,kBAAkB;yBACd,iBAAiB;qBACrB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;;;yBAUf,iBAAiB;qBACrB,kBAAkB;qBAClB,eAAe;uBACb,iBAAiB;;;;;;;;;;;;;;;;yBAgBf,oBAAoB;;;;;yBAKpB,gBAAgB;;;;4BAIb,oBAAoB;iBAC/B,6BAA6B;;;;;4BAKlB,yBAAyB;;;;;;iBAMpC,6BAA6B;;;;4BAIlB,2BAA2B;;;;wBAI/B,6BAA6B;sBAC/B,OAAO,oBAAoB,iBAAiB;;;;;;;;;;4BAUtC,0BAA0B;;;;4BAI1B,+BAA+B;;;;4BAI/B,iCAAiC;;;;;;4BAMjC,0BAA0B;;;;4BAI1B,qBAAqB;iBAChC,uBAAuB;;;;;4BAKZ,0BAA0B;iBACrC,4BAA4B;;;;;4BAKjB,4BAA4B;iBACvC,8BAA8B;;;;;;;4BAOnB,0BAA0B;;;;;gBAKtC,iCAAiC;;;;gBAIjC,mCAAmC;;;;4BAIvB,0BAA0B;iBACrC,uBAAuB;;;;4BAIZ,+BAA+B;iBAC1C,iCAAiC;;;;4BAItB,iCAAiC;iBAC5C,mCAAmC;;;;;;;;;;;;;4BAaxB,0BAA0B;;;;;;;4BAO1B,8BAA8B;wBAClC,0BAA0B;iBACjC,8BAA8B;;;CAG9C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

package/dist/esm/checkbox/checkbox.styles.js

@@ -13,10 +13,10 @@ export const styles = css `
     user-select: none;
     vertical-align: middle;
     cursor: pointer;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    color: ${colorNeutralForeground3};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    color: var(${colorNeutralForeground3});
     position: relative;
   }
 
@@ -25,10 +25,10 @@ export const styles = css `
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
     outline: none;
-    border: 2px solid ${colorStrokeFocus1};
-    box-shadow: inset 0 0 0 1px ${colorStrokeFocus2};
+    border: 2px solid var(${colorStrokeFocus1});
+    box-shadow: inset 0 0 0 1px var(${colorStrokeFocus2});
   }
 
   .control {
@@ -39,20 +39,20 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     overflow: hidden;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
     fill: currentcolor;
     height: 16px;
     width: 16px;
-    border: ${strokeWidthThin} solid ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusSmall};
+    border: var(${strokeWidthThin}) solid var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusSmall});
     outline: none;
   }
   .label {
     align-self: center;
     cursor: inherit;
-    padding-inline: ${spacingHorizontalS};
-    padding-bottom: ${spacingVerticalS};
-    padding-top: ${spacingVerticalS};
+    padding-inline: var(${spacingHorizontalS});
+    padding-bottom: var(${spacingVerticalS});
+    padding-top: var(${spacingVerticalS});
   }
   .label__hidden {
     display: none;
@@ -62,7 +62,7 @@ export const styles = css `
     display: flex;
     align-items: center;
     justify-content: center;
-    color: ${colorNeutralForegroundInverted};
+    color: var(${colorNeutralForegroundInverted});
     font-size: 12px;
     margin: auto;
     opacity: 0;
@@ -71,42 +71,42 @@ export const styles = css `
     position: absolute;
     width: 8px;
     height: 8px;
-    border-radius: ${borderRadiusSmall};
-    background-color: ${colorCompoundBrandForeground1};
+    border-radius: var(${borderRadiusSmall});
+    background-color: var(${colorCompoundBrandForeground1});
     opacity: 0;
   }
   :host(:hover) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
   :host(:hover) .control {
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:hover) .indeterminate-indicator {
-    background-color: ${colorCompoundBrandForeground1Hover};
+    background-color: var(${colorCompoundBrandForeground1Hover});
   }
   :host(:active) .control {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host(:active) .indeterminate-indicator {
-    background-color: ${colorCompoundBrandForeground1Pressed};
+    background-color: var(${colorCompoundBrandForeground1Pressed});
   }
   :host([aria-checked='true']),
   :host([aria-checked='mixed']),
   :host(:active) {
-    color: ${colorNeutralForeground1};
+    color: var(${colorNeutralForeground1});
   }
   :host([aria-checked='true']) .control {
-    background-color: ${colorCompoundBrandBackground};
+    background-color: var(${colorCompoundBrandBackground});
   }
   :host([aria-checked='true']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
-    background-color: ${colorCompoundBrandBackgroundHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
+    background-color: var(${colorCompoundBrandBackgroundHover});
   }
   :host([aria-checked='true']:active) .control {
-    background-color: ${colorCompoundBrandBackgroundPressed};
+    background-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([aria-checked='mixed']:hover) .control {
-    border-color: ${colorCompoundBrandStrokeHover};
+    border-color: var(${colorCompoundBrandStrokeHover});
   }
   :host([aria-checked='true']) .checked-indicator,
   :host([aria-checked='mixed']) .indeterminate-indicator {
@@ -114,19 +114,19 @@ export const styles = css `
   }
   :host([aria-checked='true']) .control,
   :host([aria-checked='mixed']) .control {
-    border-color: ${colorCompoundBrandStroke};
+    border-color: var(${colorCompoundBrandStroke});
   }
   :host([aria-checked='mixed']:active) .control,
   :host([aria-checked='true']:active) .control {
-    border-color: ${colorCompoundBrandStrokePressed};
+    border-color: var(${colorCompoundBrandStrokePressed});
   }
   :host([label-position='before']) {
     flex-direction: row-reverse;
   }
   :host([label-position='before']) .label {
-    padding-inline: ${spacingHorizontalS} ${spacingHorizontalXS};
-    padding-top: ${spacingVerticalS};
-    padding-bottom: ${spacingVerticalS};
+    padding-inline: var(${spacingHorizontalS}) var(${spacingHorizontalXS});
+    padding-top: var(${spacingVerticalS});
+    padding-bottom: var(${spacingVerticalS});
   }
   :host([size='large']) .control {
     width: 20px;
@@ -142,23 +142,23 @@ export const styles = css `
   }
   :host([shape='circular']) .control,
   :host([shape='circular']) .indeterminate-indicator {
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
   :host([disabled]) .control,
   :host([aria-checked='mixed'][disabled]) .control,
   :host([aria-checked='true'][disabled]) .control {
-    background-color: ${colorTransparentBackgroundHover};
-    border-color: ${colorNeutralStrokeDisabled};
+    background-color: var(${colorTransparentBackgroundHover});
+    border-color: var(${colorNeutralStrokeDisabled});
   }
   :host([aria-checked='true'][disabled]) .checked-indicator,
   :host([disabled]) ::slotted([slot='start']),
   :host([disabled]) .label,
   :host([aria-checked='mixed'][disabled]) .label,
   :host([aria-checked='true'][disabled]) .label {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) .indeterminate-indicator {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 `;
 //# sourceMappingURL=checkbox.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,6BAA6B,EAC7B,kCAAkC,EAClC,oCAAoC,EACpC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;mBAOP,cAAc;iBAChB,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;;;;;;qBASf,kBAAkB;;wBAEf,iBAAiB;kCACP,iBAAiB;;;;;;;;;;;cAWrC,gBAAgB,IAAI,kBAAkB;;;;cAItC,eAAe,UAAU,4BAA4B;qBAC9C,iBAAiB;;;;;;sBAMhB,kBAAkB;sBAClB,gBAAgB;mBACnB,gBAAgB;;;;;;;;;;aAUtB,8BAA8B;;;;;;;;;qBAStB,iBAAiB;wBACd,6BAA6B;;;;aAIxC,uBAAuB;;;oBAGhB,iCAAiC;;;wBAG7B,kCAAkC;;;oBAGtC,mCAAmC;;;wBAG/B,oCAAoC;;;;;aAK/C,uBAAuB;;;wBAGZ,4BAA4B;;;oBAGhC,6BAA6B;wBACzB,iCAAiC;;;wBAGjC,mCAAmC;;;oBAGvC,6BAA6B;;;;;;;;oBAQ7B,wBAAwB;;;;oBAIxB,+BAA+B;;;;;;sBAM7B,kBAAkB,IAAI,mBAAmB;mBAC5C,gBAAgB;sBACb,gBAAgB;;;;;;;;;;;;;;;;qBAgBjB,oBAAoB;;;;;wBAKjB,+BAA+B;oBACnC,0BAA0B;;;;;;;aAOjC,8BAA8B;;;wBAGnB,8BAA8B;;CAErD,CAAC"}
+{"version":3,"file":"checkbox.styles.js","sourceRoot":"","sources":["../../../src/checkbox/checkbox.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,oBAAoB,EACpB,kBAAkB,EAClB,iBAAiB,EACjB,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,6BAA6B,EAC7B,kCAAkC,EAClC,oCAAoC,EACpC,wBAAwB,EACxB,6BAA6B,EAC7B,+BAA+B,EAC/B,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,8BAA8B,EAC9B,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,iBAAiB,EACjB,+BAA+B,EAC/B,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,mBAAmB,EACnB,gBAAgB,EAChB,eAAe,GAChB,MAAM,2BAA2B,CAAC;AAEnC;;;GAGG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;uBAOH,cAAc;qBAChB,eAAe;uBACb,iBAAiB;iBACvB,uBAAuB;;;;;;;;;yBASf,kBAAkB;;4BAEf,iBAAiB;sCACP,iBAAiB;;;;;;;;;;;kBAWrC,gBAAgB,SAAS,kBAAkB;;;;kBAI3C,eAAe,eAAe,4BAA4B;yBACnD,iBAAiB;;;;;;0BAMhB,kBAAkB;0BAClB,gBAAgB;uBACnB,gBAAgB;;;;;;;;;;iBAUtB,8BAA8B;;;;;;;;;yBAStB,iBAAiB;4BACd,6BAA6B;;;;iBAIxC,uBAAuB;;;wBAGhB,iCAAiC;;;4BAG7B,kCAAkC;;;wBAGtC,mCAAmC;;;4BAG/B,oCAAoC;;;;;iBAK/C,uBAAuB;;;4BAGZ,4BAA4B;;;wBAGhC,6BAA6B;4BACzB,iCAAiC;;;4BAGjC,mCAAmC;;;wBAGvC,6BAA6B;;;;;;;;wBAQ7B,wBAAwB;;;;wBAIxB,+BAA+B;;;;;;0BAM7B,kBAAkB,SAAS,mBAAmB;uBACjD,gBAAgB;0BACb,gBAAgB;;;;;;;;;;;;;;;;yBAgBjB,oBAAoB;;;;;4BAKjB,+BAA+B;wBACnC,0BAA0B;;;;;;;iBAOjC,8BAA8B;;;4BAGnB,8BAA8B;;CAEzD,CAAC"}

package/dist/esm/compound-button/compound-button.styles.js

@@ -12,8 +12,8 @@ export const styles = css `
     padding-top: 14px;
     padding-inline: 12px;
     padding-bottom: 16px;
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
   }
 
   .content {
@@ -23,10 +23,10 @@ export const styles = css `
   }
 
   ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
     line-height: 100%;
-    font-size: ${fontSizeBase200};
-    font-weight: ${fontWeightRegular};
+    font-size: var(${fontSizeBase200});
+    font-weight: var(${fontWeightRegular});
   }
 
   ::slotted(svg),
@@ -37,35 +37,35 @@ export const styles = css `
   }
 
   :host(:hover) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2Hover};
+    color: var(${colorNeutralForeground2Hover});
   }
 
   :host(:active) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2Pressed};
+    color: var(${colorNeutralForeground2Pressed});
   }
 
   :host(:is([appearance='primary'], [appearance='primary']:hover, [appearance='primary']:active))
     ::slotted([slot='description']) {
-    color: ${colorNeutralForegroundOnBrand};
+    color: var(${colorNeutralForegroundOnBrand});
   }
 
   :host(:is([appearance='subtle'], [appearance='subtle']:hover, [appearance='subtle']:active))
     ::slotted([slot='description']),
   :host([appearance='transparent']) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2};
+    color: var(${colorNeutralForeground2});
   }
 
   :host([appearance='transparent']:hover) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2BrandHover};
+    color: var(${colorNeutralForeground2BrandHover});
   }
 
   :host([appearance='transparent']:active) ::slotted([slot='description']) {
-    color: ${colorNeutralForeground2BrandPressed};
+    color: var(${colorNeutralForeground2BrandPressed});
   }
 
   :host(:is([disabled], [disabled][appearance], [disabled-focusable], [disabled-focusable][appearance]))
     ::slotted([slot='description']) {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([size='small']) .control {
@@ -76,30 +76,30 @@ export const styles = css `
   :host([icon-only]) .control {
     min-width: 52px;
     max-width: 52px;
-    padding: ${spacingHorizontalSNudge};
+    padding: var(${spacingHorizontalSNudge});
   }
 
   :host([icon-only][size='small']) .control {
     min-width: 48px;
     max-width: 48px;
-    padding: ${spacingHorizontalXS};
+    padding: var(${spacingHorizontalXS});
   }
 
   :host([icon-only][size='large']) .control {
     min-width: 56px;
     max-width: 56px;
-    padding: ${spacingHorizontalS};
+    padding: var(${spacingHorizontalS});
   }
 
   :host([size='large']) .control {
     padding-top: 18px;
     padding-inline: 16px;
     padding-bottom: 20px;
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
   :host([size='large']) ::slotted([slot='description']) {
-    font-size: ${fontSizeBase300};
+    font-size: var(${fontSizeBase300});
   }
 `;
 //# sourceMappingURL=compound-button.styles.js.map

package/dist/esm/compound-button/compound-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;iBASC,eAAe;mBACb,iBAAiB;;;;;;;;;;aAUvB,uBAAuB;;iBAEnB,eAAe;mBACb,iBAAiB;;;;;;;;;;;aAWvB,4BAA4B;;;;aAI5B,8BAA8B;;;;;aAK9B,6BAA6B;;;;;;aAM7B,uBAAuB;;;;aAIvB,iCAAiC;;;;aAIjC,mCAAmC;;;;;aAKnC,8BAA8B;;;;;;;;;;;eAW5B,uBAAuB;;;;;;eAMvB,mBAAmB;;;;;;eAMnB,kBAAkB;;;;;;;iBAOhB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;;CAE/B,CAAC"}
+{"version":3,"file":"compound-button.styles.js","sourceRoot":"","sources":["../../../src/compound-button/compound-button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EACL,uBAAuB,EACvB,iCAAiC,EACjC,mCAAmC,EACnC,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,6BAA6B,EAC7B,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AAEnC,oCAAoC;AACpC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,YAAY;;;;;;;;;qBASK,eAAe;uBACb,iBAAiB;;;;;;;;;;iBAUvB,uBAAuB;;qBAEnB,eAAe;uBACb,iBAAiB;;;;;;;;;;;iBAWvB,4BAA4B;;;;iBAI5B,8BAA8B;;;;;iBAK9B,6BAA6B;;;;;;iBAM7B,uBAAuB;;;;iBAIvB,iCAAiC;;;;iBAIjC,mCAAmC;;;;;iBAKnC,8BAA8B;;;;;;;;;;;mBAW5B,uBAAuB;;;;;;mBAMvB,mBAAmB;;;;;;mBAMnB,kBAAkB;;;;;;;qBAOhB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;;CAEnC,CAAC"}

package/dist/esm/counter-badge/counter-badge.styles.js

@@ -6,13 +6,13 @@ import { borderRadiusMedium, borderRadiusSmall } from '../theme/design-tokens.js
  */
 export const styles = css `
   :host([shape='rounded']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='rounded'][size='tiny']),
   :host([shape='rounded'][size='extra-small']),
   :host([shape='rounded'][size='small']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   ${badgeSizeStyles}

package/dist/esm/counter-badge/counter-badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}
+{"version":3,"file":"counter-badge.styles.js","sourceRoot":"","sources":["../../../src/counter-badge/counter-badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAC3G,OAAO,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAElF;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;yBAEA,kBAAkB;;;;;;yBAMlB,iBAAiB;;;IAGtC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,eAAe;;;;;;;;;CASlB,CAAC"}