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

package/dist/dts/theme/set-theme.d.ts

@@ -1,8 +1,7 @@
 import type { Theme } from '@fluentui/tokens';
-import { FASTElement } from '@microsoft/fast-element';
 /**
  * Sets the theme tokens on defaultNode.
  * @param theme Flat object of theme token values.
  */
 export declare const setTheme: (theme: Theme) => void;
-export declare const setThemeFor: (element: FASTElement, theme: Theme) => void;
+export declare const setThemeFor: (element: HTMLElement, theme: Theme) => void;

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

@@ -14,12 +14,12 @@ export const styles = css `
     display: grid;
     position: relative;
     vertical-align: middle;
-    padding-inline: ${spacingHorizontalM} ${spacingHorizontalMNudge};
-    border-radius: ${borderRadiusMedium};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    line-height: ${lineHeightBase300};
+    padding-inline: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
+    border-radius: var(${borderRadiusMedium});
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    line-height: var(${lineHeightBase300});
     grid-template-columns: auto auto 1fr auto;
   }
 
@@ -38,9 +38,9 @@ export const styles = css `
     cursor: pointer;
     font-family: inherit;
     height: 44px;
-    color: ${colorNeutralForeground1};
-    background: ${colorTransparentBackground};
-    line-height: ${lineHeightBase300};
+    color: var(${colorNeutralForeground1});
+    background: var(${colorTransparentBackground});
+    line-height: var(${lineHeightBase300});
     height: auto;
     padding: 0;
     font-size: inherit;
@@ -53,7 +53,7 @@ export const styles = css `
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   .icon {
@@ -63,20 +63,20 @@ export const styles = css `
     pointer-events: none;
     position: relative;
     height: 100%;
-    padding-right: ${spacingHorizontalS};
+    padding-right: var(${spacingHorizontalS});
     grid-column: 1 / span 1;
     grid-row: 1;
   }
 
   .region {
-    margin: 0 ${spacingHorizontalM};
+    margin: 0 var(${spacingHorizontalM});
   }
 
   ::slotted([slot='start']),
   ::slotted([slot='end']) {
     justify-content: center;
     align-items: center;
-    padding-right: ${spacingHorizontalS};
+    padding-right: var(${spacingHorizontalS});
     grid-column: 2 / span 1;
     grid-row: 1 / span 1;
   }
@@ -86,16 +86,16 @@ export const styles = css `
     position: absolute;
     inset: 0px;
     cursor: pointer;
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
     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});
   }
 
   /* --- Disabled attr styles --- */
 
   :host([disabled]) .button {
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) svg {
     filter: invert(89%) sepia(0%) saturate(569%) hue-rotate(155deg) brightness(88%) contrast(87%);
@@ -127,23 +127,23 @@ export const styles = css `
   /* --- Appearance attr styles --- */
 
   .heading {
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
   }
 
   :host([size='small']) .heading {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
 
   :host([size='large']) .heading {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
 
   :host([size='extra-large']) .heading {
-    font-size: ${fontSizeBase500};
-    line-height: ${lineHeightBase500};
+    font-size: var(${fontSizeBase500});
+    line-height: var(${lineHeightBase500});
   }
 
   /* --- expand-icon-position attr styles --- */

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

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-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,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;sBAYE,kBAAkB,IAAI,uBAAuB;qBAC9C,kBAAkB;mBACpB,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;aAmBvB,uBAAuB;kBAClB,0BAA0B;mBACzB,iBAAiB;;;;;;;;;;;;;qBAaf,iBAAiB;;;;;;;;;;qBAUjB,kBAAkB;;;;;;gBAMvB,kBAAkB;;;;;;;qBAOb,kBAAkB;;;;;;;;;;qBAUlB,iBAAiB;;wBAEd,iBAAiB;kCACP,iBAAiB;;;;;;aAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAgC1B,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;iBAInB,eAAe;mBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDnC,CAAC"}
+{"version":3,"file":"accordion-item.styles.js","sourceRoot":"","sources":["../../../src/accordion-item/accordion-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,iBAAiB,EACjB,uBAAuB,EACvB,8BAA8B,EAC9B,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,cAAc,EACd,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;;;0BAYM,kBAAkB,SAAS,uBAAuB;yBACnD,kBAAkB;uBACpB,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;iBAmBvB,uBAAuB;sBAClB,0BAA0B;uBACzB,iBAAiB;;;;;;;;;;;;;yBAaf,iBAAiB;;;;;;;;;;yBAUjB,kBAAkB;;;;;;oBAMvB,kBAAkB;;;;;;;yBAOb,kBAAkB;;;;;;;;;;yBAUlB,iBAAiB;;4BAEd,iBAAiB;sCACP,iBAAiB;;;;;;iBAMtC,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAgC1B,eAAe;uBACb,iBAAiB;;;;qBAInB,eAAe;uBACb,iBAAiB;;;;qBAInB,eAAe;uBACb,iBAAiB;;;;qBAInB,eAAe;uBACb,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmDvC,CAAC"}

package/dist/esm/avatar/avatar.styles.js

@@ -23,12 +23,12 @@ export const styles = css `
     flex-shrink: 0;
     width: 32px;
     height: 32px;
-    font-family: ${fontFamilyBase};
-    font-weight: ${fontWeightSemibold};
-    font-size: ${fontSizeBase300};
-    border-radius: ${borderRadiusCircular};
-    color: ${colorNeutralForeground3};
-    background-color: ${colorNeutralBackground6};
+    font-family: var(${fontFamilyBase});
+    font-weight: var(${fontWeightSemibold});
+    font-size: var(${fontSizeBase300});
+    border-radius: var(${borderRadiusCircular});
+    color: var(${colorNeutralForeground3});
+    background-color: var(${colorNeutralBackground6});
     contain: layout style;
   }
 
@@ -43,14 +43,14 @@ export const styles = css `
     box-sizing: border-box;
     width: 100%;
     height: 100%;
-    border-radius: ${borderRadiusCircular};
+    border-radius: var(${borderRadiusCircular});
   }
 
   ::slotted([slot='badge']) {
     position: absolute;
     bottom: 0;
     right: 0;
-    box-shadow: 0 0 0 ${strokeWidthThin} ${colorNeutralBackground1};
+    box-shadow: 0 0 0 var(${strokeWidthThin}) var(${colorNeutralBackground1});
   }
 
   :host([size='64']) ::slotted([slot='badge']),
@@ -58,14 +58,14 @@ export const styles = css `
   :host([size='96']) ::slotted([slot='badge']),
   :host([size='120']) ::slotted([slot='badge']),
   :host([size='128']) ::slotted([slot='badge']) {
-    box-shadow: 0 0 0 ${strokeWidthThick} ${colorNeutralBackground1};
+    box-shadow: 0 0 0 var(${strokeWidthThick}) var(${colorNeutralBackground1});
   }
 
   :host([size='16']),
   :host([size='20']),
   :host([size='24']) {
-    font-size: ${fontSizeBase100};
-    font-weight: ${fontWeightRegular};
+    font-size: var(${fontSizeBase100});
+    font-weight: var(${fontWeightRegular});
   }
 
   :host([size='16']) {
@@ -102,7 +102,7 @@ export const styles = css `
   :host([size='28']) {
     width: 28px;
     height: 28px;
-    font-size: ${fontSizeBase200};
+    font-size: var(${fontSizeBase200});
   }
 
   :host([size='36']) {
@@ -117,7 +117,7 @@ export const styles = css `
 
   :host([size='48']),
   :host([size='56']) {
-    font-size: ${fontSizeBase400};
+    font-size: var(${fontSizeBase400});
   }
 
   :host([size='48']) {
@@ -147,7 +147,7 @@ export const styles = css `
   :host([size='64']),
   :host([size='72']),
   :host([size='96']) {
-    font-size: ${fontSizeBase500};
+    font-size: var(${fontSizeBase500});
   }
 
   :host([size='64']) .default-icon,
@@ -187,7 +187,7 @@ export const styles = css `
 
   :host([size='120']),
   :host([size='128']) {
-    font-size: ${fontSizeBase600};
+    font-size: var(${fontSizeBase600});
   }
 
   :host([size='120']) {
@@ -201,186 +201,186 @@ export const styles = css `
   }
 
   :host([shape='square']) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host([shape='square'][size='20']),
   :host([shape='square'][size='24']) {
-    border-radius: ${borderRadiusSmall};
+    border-radius: var(${borderRadiusSmall});
   }
 
   :host([shape='square'][size='56']),
   :host([shape='square'][size='64']),
   :host([shape='square'][size='72']) {
-    border-radius: ${borderRadiusLarge};
+    border-radius: var(${borderRadiusLarge});
   }
   :host([shape='square'][size='96']),
   :host([shape='square'][size='120']),
   :host([shape='square'][size='128']) {
-    border-radius: ${borderRadiusXLarge};
+    border-radius: var(${borderRadiusXLarge});
   }
 
   :host([data-color='brand']) {
-    color: ${colorNeutralForegroundStaticInverted};
-    background-color: ${colorBrandBackgroundStatic};
+    color: var(${colorNeutralForegroundStaticInverted});
+    background-color: var(${colorBrandBackgroundStatic});
   }
 
   :host([data-color='dark-red']) {
-    color: ${colorPaletteDarkRedForeground2};
-    background-color: ${colorPaletteDarkRedBackground2};
+    color: var(${colorPaletteDarkRedForeground2});
+    background-color: var(${colorPaletteDarkRedBackground2});
   }
 
   :host([data-color='cranberry']) {
-    color: ${colorPaletteCranberryForeground2};
-    background-color: ${colorPaletteCranberryBackground2};
+    color: var(${colorPaletteCranberryForeground2});
+    background-color: var(${colorPaletteCranberryBackground2});
   }
 
   :host([data-color='red']) {
-    color: ${colorPaletteRedForeground2};
-    background-color: ${colorPaletteRedBackground2};
+    color: var(${colorPaletteRedForeground2});
+    background-color: var(${colorPaletteRedBackground2});
   }
 
   :host([data-color='pumpkin']) {
-    color: ${colorPalettePumpkinForeground2};
-    background-color: ${colorPalettePumpkinBackground2};
+    color: var(${colorPalettePumpkinForeground2});
+    background-color: var(${colorPalettePumpkinBackground2});
   }
 
   :host([data-color='peach']) {
-    color: ${colorPalettePeachForeground2};
-    background-color: ${colorPalettePeachBackground2};
+    color: var(${colorPalettePeachForeground2});
+    background-color: var(${colorPalettePeachBackground2});
   }
 
   :host([data-color='marigold']) {
-    color: ${colorPaletteMarigoldForeground2};
-    background-color: ${colorPaletteMarigoldBackground2};
+    color: var(${colorPaletteMarigoldForeground2});
+    background-color: var(${colorPaletteMarigoldBackground2});
   }
 
   :host([data-color='gold']) {
-    color: ${colorPaletteGoldForeground2};
-    background-color: ${colorPaletteGoldBackground2};
+    color: var(${colorPaletteGoldForeground2});
+    background-color: var(${colorPaletteGoldBackground2});
   }
 
   :host([data-color='brass']) {
-    color: ${colorPaletteBrassForeground2};
-    background-color: ${colorPaletteBrassBackground2};
+    color: var(${colorPaletteBrassForeground2});
+    background-color: var(${colorPaletteBrassBackground2});
   }
 
   :host([data-color='brown']) {
-    color: ${colorPaletteBrownForeground2};
-    background-color: ${colorPaletteBrownBackground2};
+    color: var(${colorPaletteBrownForeground2});
+    background-color: var(${colorPaletteBrownBackground2});
   }
 
   :host([data-color='forest']) {
-    color: ${colorPaletteForestForeground2};
-    background-color: ${colorPaletteForestBackground2};
+    color: var(${colorPaletteForestForeground2});
+    background-color: var(${colorPaletteForestBackground2});
   }
 
   :host([data-color='seafoam']) {
-    color: ${colorPaletteSeafoamForeground2};
-    background-color: ${colorPaletteSeafoamBackground2};
+    color: var(${colorPaletteSeafoamForeground2});
+    background-color: var(${colorPaletteSeafoamBackground2});
   }
 
   :host([data-color='dark-green']) {
-    color: ${colorPaletteDarkGreenForeground2};
-    background-color: ${colorPaletteDarkGreenBackground2};
+    color: var(${colorPaletteDarkGreenForeground2});
+    background-color: var(${colorPaletteDarkGreenBackground2});
   }
 
   :host([data-color='light-teal']) {
-    color: ${colorPaletteLightTealForeground2};
-    background-color: ${colorPaletteLightTealBackground2};
+    color: var(${colorPaletteLightTealForeground2});
+    background-color: var(${colorPaletteLightTealBackground2});
   }
 
   :host([data-color='teal']) {
-    color: ${colorPaletteTealForeground2};
-    background-color: ${colorPaletteTealBackground2};
+    color: var(${colorPaletteTealForeground2});
+    background-color: var(${colorPaletteTealBackground2});
   }
 
   :host([data-color='steel']) {
-    color: ${colorPaletteSteelForeground2};
-    background-color: ${colorPaletteSteelBackground2};
+    color: var(${colorPaletteSteelForeground2});
+    background-color: var(${colorPaletteSteelBackground2});
   }
 
   :host([data-color='blue']) {
-    color: ${colorPaletteBlueForeground2};
-    background-color: ${colorPaletteBlueBackground2};
+    color: var(${colorPaletteBlueForeground2});
+    background-color: var(${colorPaletteBlueBackground2});
   }
 
   :host([data-color='royal-blue']) {
-    color: ${colorPaletteRoyalBlueForeground2};
-    background-color: ${colorPaletteRoyalBlueBackground2};
+    color: var(${colorPaletteRoyalBlueForeground2});
+    background-color: var(${colorPaletteRoyalBlueBackground2});
   }
 
   :host([data-color='cornflower']) {
-    color: ${colorPaletteCornflowerForeground2};
-    background-color: ${colorPaletteCornflowerBackground2};
+    color: var(${colorPaletteCornflowerForeground2});
+    background-color: var(${colorPaletteCornflowerBackground2});
   }
 
   :host([data-color='navy']) {
-    color: ${colorPaletteNavyForeground2};
-    background-color: ${colorPaletteNavyBackground2};
+    color: var(${colorPaletteNavyForeground2});
+    background-color: var(${colorPaletteNavyBackground2});
   }
 
   :host([data-color='lavender']) {
-    color: ${colorPaletteLavenderForeground2};
-    background-color: ${colorPaletteLavenderBackground2};
+    color: var(${colorPaletteLavenderForeground2});
+    background-color: var(${colorPaletteLavenderBackground2});
   }
 
   :host([data-color='purple']) {
-    color: ${colorPalettePurpleForeground2};
-    background-color: ${colorPalettePurpleBackground2};
+    color: var(${colorPalettePurpleForeground2});
+    background-color: var(${colorPalettePurpleBackground2});
   }
 
   :host([data-color='grape']) {
-    color: ${colorPaletteGrapeForeground2};
-    background-color: ${colorPaletteGrapeBackground2};
+    color: var(${colorPaletteGrapeForeground2});
+    background-color: var(${colorPaletteGrapeBackground2});
   }
 
   :host([data-color='lilac']) {
-    color: ${colorPaletteLilacForeground2};
-    background-color: ${colorPaletteLilacBackground2};
+    color: var(${colorPaletteLilacForeground2});
+    background-color: var(${colorPaletteLilacBackground2});
   }
 
   :host([data-color='pink']) {
-    color: ${colorPalettePinkForeground2};
-    background-color: ${colorPalettePinkBackground2};
+    color: var(${colorPalettePinkForeground2});
+    background-color: var(${colorPalettePinkBackground2});
   }
 
   :host([data-color='magenta']) {
-    color: ${colorPaletteMagentaForeground2};
-    background-color: ${colorPaletteMagentaBackground2};
+    color: var(${colorPaletteMagentaForeground2});
+    background-color: var(${colorPaletteMagentaBackground2});
   }
 
   :host([data-color='plum']) {
-    color: ${colorPalettePlumForeground2};
-    background-color: ${colorPalettePlumBackground2};
+    color: var(${colorPalettePlumForeground2});
+    background-color: var(${colorPalettePlumBackground2});
   }
 
   :host([data-color='beige']) {
-    color: ${colorPaletteBeigeForeground2};
-    background-color: ${colorPaletteBeigeBackground2};
+    color: var(${colorPaletteBeigeForeground2});
+    background-color: var(${colorPaletteBeigeBackground2});
   }
 
   :host([data-color='mink']) {
-    color: ${colorPaletteMinkForeground2};
-    background-color: ${colorPaletteMinkBackground2};
+    color: var(${colorPaletteMinkForeground2});
+    background-color: var(${colorPaletteMinkBackground2});
   }
 
   :host([data-color='platinum']) {
-    color: ${colorPalettePlatinumForeground2};
-    background-color: ${colorPalettePlatinumBackground2};
+    color: var(${colorPalettePlatinumForeground2});
+    background-color: var(${colorPalettePlatinumBackground2});
   }
 
   :host([data-color='anchor']) {
-    color: ${colorPaletteAnchorForeground2};
-    background-color: ${colorPaletteAnchorBackground2};
+    color: var(${colorPaletteAnchorForeground2});
+    background-color: var(${colorPaletteAnchorBackground2});
   }
 
   :host([active]) {
     /* Work-around for text pixel snapping at the end of the animation */
     transform: perspective(1px);
     transition-property: transform, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationFaster};
-    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
+    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
   }
 
   :host([active])::before {
@@ -392,13 +392,13 @@ export const styles = css `
     right: 0;
     border-radius: inherit;
     transition-property: margin, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationSlower};
-    transition-delay: ${animations.fastEase}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
+    transition-delay: var(${animations.fastEase}), var(${animations.nullEasing});
   }
   :host([active])::before {
-    box-shadow: ${shadow8};
+    box-shadow: var(${shadow8});
     border-style: solid;
-    border-color: ${colorBrandBackgroundStatic};
+    border-color: var(${colorBrandBackgroundStatic});
   }
 
   :host([active][appearance='shadow'])::before {
@@ -407,40 +407,40 @@ export const styles = css `
   }
 
   :host([active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThick});
-    border-width: ${strokeWidthThick};
+    margin: calc(-2 * var(${strokeWidthThick}));
+    border-width: var(${strokeWidthThick});
   }
 
   :host([size='56'][active]:not([appearance='shadow']))::before,
   :host([size='64'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThicker});
-    border-width: ${strokeWidthThicker};
+    margin: calc(-2 * var(${strokeWidthThicker}));
+    border-width: var(${strokeWidthThicker});
   }
 
   :host([size='72'][active]:not([appearance='shadow']))::before,
   :host([size='96'][active]:not([appearance='shadow']))::before,
   :host([size='120'][active]:not([appearance='shadow']))::before,
   :host([size='128'][active]:not([appearance='shadow']))::before {
-    margin: calc(-2 * ${strokeWidthThickest});
-    border-width: ${strokeWidthThickest};
+    margin: calc(-2 * var(${strokeWidthThickest}));
+    border-width: var(${strokeWidthThickest});
   }
 
   :host([size='20'][active][appearance])::before,
   :host([size='24'][active][appearance])::before,
   :host([size='28'][active][appearance])::before {
-    box-shadow: ${shadow4};
+    box-shadow: var(${shadow4});
   }
 
   :host([size='56'][active][appearance])::before,
   :host([size='64'][active][appearance])::before {
-    box-shadow: ${shadow16};
+    box-shadow: var(${shadow16});
   }
 
   :host([size='72'][active][appearance])::before,
   :host([size='96'][active][appearance])::before,
   :host([size='120'][active][appearance])::before,
   :host([size='128'][active][appearance])::before {
-    box-shadow: ${shadow28};
+    box-shadow: var(${shadow28});
   }
 
   :host([active][appearance='ring'])::before {
@@ -451,16 +451,16 @@ export const styles = css `
     opacity: 0.8;
     transform: scale(0.875);
     transition-property: transform, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationFaster};
-    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationFaster});
+    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
   }
 
   :host([active='inactive'])::before {
     margin: 0;
     opacity: 0;
     transition-property: margin, opacity;
-    transition-duration: ${durationUltraSlow}, ${durationSlower};
-    transition-delay: ${animations.fastOutSlowInMin}, ${animations.nullEasing};
+    transition-duration: var(${durationUltraSlow}), var(${durationSlower});
+    transition-delay: var(${animations.fastOutSlowInMin}), var(${animations.nullEasing});
   }
 
   @media screen and (prefers-reduced-motion: reduce) {

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.styles.js","sourceRoot":"","sources":["../../../src/avatar/avatar.styles.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"avatar.styles.js","sourceRoot":"","sources":["../../../src/avatar/avatar.styles.ts"],"names":[],"mappings":"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"}

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

@@ -7,17 +7,17 @@ import { borderRadiusMedium, borderRadiusNone, borderRadiusSmall } from '../them
  */
 export const styles = css `
   :host([shape='square']) {
-    border-radius: ${borderRadiusNone};
+    border-radius: var(${borderRadiusNone});
   }
 
   :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/badge/badge.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;qBAEJ,gBAAgB;;;;qBAIhB,kBAAkB;;;;;;qBAMlB,iBAAiB;;;IAGlC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC"}
+{"version":3,"file":"badge.styles.js","sourceRoot":"","sources":["../../../src/badge/badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EACL,eAAe,EACf,iBAAiB,EACjB,gBAAgB,EAChB,kBAAkB,EAClB,eAAe,EACf,eAAe,GAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AACpG,oCAAoC;AACpC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;yBAEA,gBAAgB;;;;yBAIhB,kBAAkB;;;;;;yBAMlB,iBAAiB;;;IAGtC,eAAe;IACf,iBAAiB;IACjB,gBAAgB;IAChB,kBAAkB;IAClB,eAAe;IACf,eAAe;CAClB,CAAC"}