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

package/dist/esm/switch/switch.styles.js

@@ -26,12 +26,12 @@ export const styles = css `
   }
   .label {
     position: relative;
-    color: ${colorNeutralForeground1};
-    line-height: ${lineHeightBase300};
-    font-size: ${fontSizeBase300};
-    font-weight: ${fontWeightRegular};
-    font-family: ${fontFamilyBase};
-    padding: ${spacingVerticalXS} ${spacingHorizontalXS};
+    color: var(${colorNeutralForeground1});
+    line-height: var(${lineHeightBase300});
+    font-size: var(${fontSizeBase300});
+    font-weight: var(${fontWeightRegular});
+    font-family: var(${fontFamilyBase});
+    padding: var(${spacingVerticalXS}) var(${spacingHorizontalXS});
     cursor: pointer;
   }
   .label__hidden {
@@ -40,83 +40,83 @@ export const styles = css `
   .switch {
     display: flex;
     align-items: center;
-    padding: 0 ${spacingHorizontalXXS};
+    padding: 0 var(${spacingHorizontalXXS});
     box-sizing: border-box;
     width: 40px;
     height: 20px;
-    background-color: ${colorTransparentBackground};
-    border: 1px solid ${colorNeutralStrokeAccessible};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorTransparentBackground});
+    border: 1px solid var(${colorNeutralStrokeAccessible});
+    border-radius: var(${borderRadiusCircular});
     outline: none;
     cursor: pointer;
-    margin: ${spacingVerticalS} ${spacingHorizontalS};
+    margin: var(${spacingVerticalS}) var(${spacingHorizontalS});
   }
   :host(:hover) .switch {
     background: none;
-    border-color: ${colorNeutralStrokeAccessibleHover};
+    border-color: var(${colorNeutralStrokeAccessibleHover});
   }
   :host(:active) .switch {
-    border-color: ${colorNeutralStrokeAccessiblePressed};
+    border-color: var(${colorNeutralStrokeAccessiblePressed});
   }
   :host([disabled]) .switch,
   :host([readonly]) .switch {
-    border: 1px solid ${colorNeutralStrokeDisabled};
+    border: 1px solid var(${colorNeutralStrokeDisabled});
     background-color: none;
     pointer: default;
   }
   :host([aria-checked='true']) .switch {
-    background: ${colorCompoundBrandBackground};
+    background: var(${colorCompoundBrandBackground});
   }
   :host([aria-checked='true']:hover) .switch {
-    background: ${colorCompoundBrandBackgroundHover};
-    border-color: ${colorCompoundBrandBackgroundHover};
+    background: var(${colorCompoundBrandBackgroundHover});
+    border-color: var(${colorCompoundBrandBackgroundHover});
   }
   :host([aria-checked='true']:active) .switch {
-    background: ${colorCompoundBrandBackgroundPressed};
-    border-color: ${colorCompoundBrandBackgroundPressed};
+    background: var(${colorCompoundBrandBackgroundPressed});
+    border-color: var(${colorCompoundBrandBackgroundPressed});
   }
   :host([aria-checked='true'][disabled]) .switch {
-    background: ${colorNeutralBackgroundDisabled};
-    border-color: ${colorNeutralStrokeDisabled};
+    background: var(${colorNeutralBackgroundDisabled});
+    border-color: var(${colorNeutralStrokeDisabled});
   }
   .checked-indicator {
     height: 14px;
     width: 14px;
     border-radius: 50%;
     margin-inline-start: 0;
-    background-color: ${colorNeutralForeground3};
-    transition-duration: ${durationNormal};
-    transition-timing-function: ${curveEasyEase};
+    background-color: var(${colorNeutralForeground3});
+    transition-duration: var(${durationNormal});
+    transition-timing-function: var(${curveEasyEase});
     transition-property: margin-inline-start;
   }
   :host([aria-checked='true']) .checked-indicator {
-    background-color: ${colorNeutralForegroundInverted};
+    background-color: var(${colorNeutralForegroundInverted});
     margin-inline-start: calc(100% - 14px);
   }
   :host([aria-checked='true']:hover) .checked-indicator {
-    background: ${colorNeutralForegroundInvertedHover};
+    background: var(${colorNeutralForegroundInvertedHover});
   }
   :host([aria-checked='true']:active) .checked-indicator {
-    background: ${colorNeutralForegroundInvertedPressed};
+    background: var(${colorNeutralForegroundInvertedPressed});
   }
   :host(:hover) .checked-indicator {
-    background-color: ${colorNeutralForeground3Hover};
+    background-color: var(${colorNeutralForeground3Hover});
   }
   :host(:active) .checked-indicator {
-    background-color: ${colorNeutralForeground3Pressed};
+    background-color: var(${colorNeutralForeground3Pressed});
   }
   :host([disabled]) .checked-indicator,
   :host([readonly]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
   :host([aria-checked='true'][disabled]) .checked-indicator {
-    background: ${colorNeutralForegroundDisabled};
+    background: var(${colorNeutralForegroundDisabled});
   }
 
   :host(: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});
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     .switch {

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

@@ -1 +1 @@
-{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.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,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;aAwBb,uBAAuB;mBACjB,iBAAiB;iBACnB,eAAe;mBACb,iBAAiB;mBACjB,cAAc;eAClB,iBAAiB,IAAI,mBAAmB;;;;;;;;;iBAStC,oBAAoB;;;;wBAIb,0BAA0B;wBAC1B,4BAA4B;qBAC/B,oBAAoB;;;cAG3B,gBAAgB,IAAI,kBAAkB;;;;oBAIhC,iCAAiC;;;oBAGjC,mCAAmC;;;;wBAI/B,0BAA0B;;;;;kBAKhC,4BAA4B;;;kBAG5B,iCAAiC;oBAC/B,iCAAiC;;;kBAGnC,mCAAmC;oBACjC,mCAAmC;;;kBAGrC,8BAA8B;oBAC5B,0BAA0B;;;;;;;wBAOtB,uBAAuB;2BACpB,cAAc;kCACP,aAAa;;;;wBAIvB,8BAA8B;;;;kBAIpC,mCAAmC;;;kBAGnC,qCAAqC;;;wBAG/B,4BAA4B;;;wBAG5B,8BAA8B;;;;kBAIpC,8BAA8B;;;kBAG9B,8BAA8B;;;;oBAI5B,sBAAsB;eAC3B,gBAAgB,UAAU,sBAAsB;kBAC7C,OAAO,eAAe,iBAAiB;;CAExD,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"switch.styles.js","sourceRoot":"","sources":["../../../src/switch/switch.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,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,8BAA8B,EAC9B,uBAAuB,EACvB,uBAAuB,EACvB,4BAA4B,EAC5B,8BAA8B,EAC9B,8BAA8B,EAC9B,8BAA8B,EAC9B,mCAAmC,EACnC,qCAAqC,EACrC,4BAA4B,EAC5B,iCAAiC,EACjC,mCAAmC,EACnC,0BAA0B,EAC1B,iBAAiB,EACjB,0BAA0B,EAC1B,sBAAsB,EACtB,aAAa,EACb,cAAc,EACd,cAAc,EACd,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,OAAO,EACP,kBAAkB,EAClB,mBAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;;;;;;;;;;;;;;;;;iBAwBT,uBAAuB;uBACjB,iBAAiB;qBACnB,eAAe;uBACb,iBAAiB;uBACjB,cAAc;mBAClB,iBAAiB,SAAS,mBAAmB;;;;;;;;;qBAS3C,oBAAoB;;;;4BAIb,0BAA0B;4BAC1B,4BAA4B;yBAC/B,oBAAoB;;;kBAG3B,gBAAgB,SAAS,kBAAkB;;;;wBAIrC,iCAAiC;;;wBAGjC,mCAAmC;;;;4BAI/B,0BAA0B;;;;;sBAKhC,4BAA4B;;;sBAG5B,iCAAiC;wBAC/B,iCAAiC;;;sBAGnC,mCAAmC;wBACjC,mCAAmC;;;sBAGrC,8BAA8B;wBAC5B,0BAA0B;;;;;;;4BAOtB,uBAAuB;+BACpB,cAAc;sCACP,aAAa;;;;4BAIvB,8BAA8B;;;;sBAIpC,mCAAmC;;;sBAGnC,qCAAqC;;;4BAG/B,4BAA4B;;;4BAG5B,8BAA8B;;;;sBAIpC,8BAA8B;;;sBAG9B,8BAA8B;;;;wBAI5B,sBAAsB;mBAC3B,gBAAgB,eAAe,sBAAsB;sBAClD,OAAO,oBAAoB,iBAAiB;;CAEjE,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;GAoBjC,CAAC,CACH,CAAC"}

package/dist/esm/tab/tab.styles.js

@@ -10,14 +10,14 @@ export const styles = css `
     cursor: pointer;
     box-sizing: border-box;
     justify-content: center;
-    line-height: ${lineHeightBase300};
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    color: ${colorNeutralForeground2};
+    line-height: var(${lineHeightBase300});
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    color: var(${colorNeutralForeground2});
     fill: currentcolor;
     grid-row: 1;
-    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
-    border-radius: ${borderRadiusMedium};
+    padding: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
+    border-radius: var(${borderRadiusMedium});
   }
   :host .tab-content {
     display: inline-flex;
@@ -26,8 +26,8 @@ export const styles = css `
   }
 
   :host([aria-selected='true']) {
-    color: ${colorNeutralForeground1};
-    font-weight: ${fontWeightSemibold};
+    color: var(${colorNeutralForeground1});
+    font-weight: var(${fontWeightSemibold});
   }
 
   /* adds hidden textContent to prevent shifting ui on bold / unbolding of text */
@@ -35,13 +35,13 @@ export const styles = css `
     content: var(--textContent);
     visibility: hidden;
     height: 0;
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightSemibold};
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightSemibold});
   }
 
   :host([aria-selected='true'])::after {
-    background-color: ${colorCompoundBrandStroke};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorCompoundBrandStroke});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -49,8 +49,8 @@ export const styles = css `
   }
 
   :host([aria-selected='false']:hover)::after {
-    background-color: ${colorNeutralStroke1Hover};
-    border-radius: ${borderRadiusCircular};
+    background-color: var(${colorNeutralStroke1Hover});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -58,7 +58,7 @@ export const styles = css `
   }
 
   :host([aria-selected='true'][disabled])::after {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 
   ::slotted([slot='start']),
@@ -73,8 +73,8 @@ export const styles = css `
   }
   :host([disabled]) {
     cursor: not-allowed;
-    fill: ${colorNeutralForegroundDisabled};
-    color: ${colorNeutralForegroundDisabled};
+    fill: var(${colorNeutralForegroundDisabled});
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([disabled]:hover)::after {
@@ -86,9 +86,9 @@ export const styles = css `
   }
 
   :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});
   }
 `.withBehaviors(forcedColorsStylesheetBehavior(css `
     :host([aria-selected='true'])::after {

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

@@ -1 +1 @@
-{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.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,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;mBAQP,iBAAiB;mBACjB,cAAc;iBAChB,eAAe;aACnB,uBAAuB;;;eAGrB,kBAAkB,IAAI,uBAAuB;qBACvC,kBAAkB;;;;;;;;;aAS1B,uBAAuB;mBACjB,kBAAkB;;;;;;;;mBAQlB,iBAAiB;mBACjB,kBAAkB;;;;wBAIb,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,wBAAwB;qBAC3B,oBAAoB;;;;;;;;wBAQjB,8BAA8B;;;;;;;;;;;;;;;YAe1C,8BAA8B;aAC7B,8BAA8B;;;;;;;;;;;;qBAYtB,iBAAiB;4BACV,iBAAiB;yBACpB,iBAAiB;;CAEzC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}
+{"version":3,"file":"tab.styles.js","sourceRoot":"","sources":["../../../src/tab/tab.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,kBAAkB,EAClB,iBAAiB,EACjB,wBAAwB,EACxB,uBAAuB,EACvB,uBAAuB,EACvB,8BAA8B,EAC9B,wBAAwB,EACxB,iBAAiB,EACjB,iBAAiB,EACjB,cAAc,EACd,eAAe,EACf,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,GACxB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;;;;;uBAQH,iBAAiB;uBACjB,cAAc;qBAChB,eAAe;iBACnB,uBAAuB;;;mBAGrB,kBAAkB,SAAS,uBAAuB;yBAC5C,kBAAkB;;;;;;;;;iBAS1B,uBAAuB;uBACjB,kBAAkB;;;;;;;;uBAQlB,iBAAiB;uBACjB,kBAAkB;;;;4BAIb,wBAAwB;yBAC3B,oBAAoB;;;;;;;;4BAQjB,wBAAwB;yBAC3B,oBAAoB;;;;;;;;4BAQjB,8BAA8B;;;;;;;;;;;;;;;gBAe1C,8BAA8B;iBAC7B,8BAA8B;;;;;;;;;;;;yBAYtB,iBAAiB;gCACV,iBAAiB;6BACpB,iBAAiB;;CAE7C,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;GAIjC,CAAC,CACH,CAAC"}

package/dist/esm/tab-panel/tab-panel.styles.js

@@ -6,7 +6,7 @@ export const styles = css `
 
   :host {
     box-sizing: border-box;
-    padding: ${spacingHorizontalM} ${spacingHorizontalMNudge};
+    padding: var(${spacingHorizontalM}) var(${spacingHorizontalMNudge});
   }
 `;
 //# sourceMappingURL=tab-panel.styles.js.map

package/dist/esm/tab-panel/tab-panel.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-panel.styles.js","sourceRoot":"","sources":["../../../src/tab-panel/tab-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAExF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;eAIL,kBAAkB,IAAI,uBAAuB;;CAE3D,CAAC"}
+{"version":3,"file":"tab-panel.styles.js","sourceRoot":"","sources":["../../../src/tab-panel/tab-panel.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAExF,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,OAAO,CAAC;;;;mBAID,kBAAkB,SAAS,uBAAuB;;CAEpE,CAAC"}

package/dist/esm/tabs/tabs.styles.js

@@ -6,40 +6,40 @@ export const styles = css `
 
   :host {
     box-sizing: border-box;
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    color: ${colorNeutralForeground2};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    color: var(${colorNeutralForeground2});
     grid-template-columns: auto 1fr auto;
     grid-template-rows: auto 1fr;
   }
 
   :host([disabled]) {
     cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
 
   :host([disabled]) ::slotted(fluent-tab) {
     pointer-events: none;
     cursor: not-allowed;
-    color: ${colorNeutralForegroundDisabled};
+    color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab:after) {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab[aria-selected='true'])::after {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
   :host([disabled]) ::slotted(fluent-tab:hover):before {
     content: unset;
   }
 
   :host ::slotted(fluent-tab) {
-    border-radius: ${borderRadiusMedium};
+    border-radius: var(${borderRadiusMedium});
   }
 
   :host ::slotted(fluent-tab[aria-selected='true'])::before {
-    background-color: ${colorNeutralForegroundDisabled};
+    background-color: var(${colorNeutralForegroundDisabled});
   }
 
   .tablist {
@@ -95,43 +95,43 @@ export const styles = css `
   }
 
   :host([appearance='subtle']) ::slotted(fluent-tab:hover) {
-    background-color: ${colorSubtleBackgroundHover};
-    color: ${colorNeutralForeground1Hover};
-    fill: ${colorCompoundBrandForeground1Hover};
+    background-color: var(${colorSubtleBackgroundHover});
+    color: var(${colorNeutralForeground1Hover});
+    fill: var(${colorCompoundBrandForeground1Hover});
   }
 
   :host([appearance='subtle']) ::slotted(fluent-tab:active) {
-    background-color: ${colorSubtleBackgroundPressed};
-    fill: ${colorSubtleBackgroundPressed};
-    color: ${colorNeutralForeground1};
+    background-color: var(${colorSubtleBackgroundPressed});
+    fill: var(${colorSubtleBackgroundPressed});
+    color: var(${colorNeutralForeground1});
   }
 
   :host([size='small']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    padding: ${spacingVerticalSNudge} ${spacingHorizontalSNudge};
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    padding: var(${spacingVerticalSNudge}) var(${spacingHorizontalSNudge});
   }
 
   :host([size='large']) ::slotted(fluent-tab) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
-    padding: ${spacingVerticalL} ${spacingHorizontalMNudge};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
+    padding: var(${spacingVerticalL}) var(${spacingHorizontalMNudge});
   }
 
   /* indicator animation  */
   :host ::slotted(fluent-tab[data-animate='true'])::after {
     transition-property: transform;
-    transition-duration: ${durationSlow};
-    transition-timing-function: ${curveDecelerateMax};
+    transition-duration: var(${durationSlow});
+    transition-timing-function: var(${curveDecelerateMax});
   }
   :host ::slotted(fluent-tab)::after {
-    height: ${strokeWidthThicker};
+    height: var(${strokeWidthThicker});
     margin-top: auto;
     transform-origin: left;
     transform: translateX(var(--tabIndicatorOffset)) scaleX(var(--tabIndicatorScale));
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::after {
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
     height: unset;
     margin-top: unset;
     transform-origin: top;
@@ -140,8 +140,8 @@ export const styles = css `
 
   /* ::before adds a secondary indicator placeholder that appears right after click on the active tab */
   :host ::slotted(fluent-tab)::before {
-    height: ${strokeWidthThicker};
-    border-radius: ${borderRadiusCircular};
+    height: var(${strokeWidthThicker});
+    border-radius: var(${borderRadiusCircular});
     content: '';
     inset: 0;
     position: absolute;
@@ -149,13 +149,13 @@ export const styles = css `
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::before {
     height: unset;
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
     margin-inline-end: auto;
     transform-origin: top;
   }
 
   :host ::slotted(fluent-tab[aria-selected='false']:hover)::after {
-    height: ${strokeWidthThicker};
+    height: var(${strokeWidthThicker});
     margin-top: auto;
     transform-origin: left;
   }
@@ -163,42 +163,42 @@ export const styles = css `
     height: unset;
     margin-inline-end: auto;
     transform-origin: top;
-    width: ${strokeWidthThicker};
+    width: var(${strokeWidthThicker});
   }
 
   :host([orientation='vertical']) ::slotted(fluent-tab) {
     align-items: flex-start;
     grid-column: 2;
-    padding-top: ${spacingVerticalSNudge};
-    padding-bottom: ${spacingVerticalSNudge};
+    padding-top: var(${spacingVerticalSNudge});
+    padding-bottom: var(${spacingVerticalSNudge});
   }
   :host([orientation='vertical'][size='small']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalXXS};
-    padding-bottom: ${spacingVerticalXXS};
+    padding-top: var(${spacingVerticalXXS});
+    padding-bottom: var(${spacingVerticalXXS});
   }
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab) {
-    padding-top: ${spacingVerticalS};
-    padding-bottom: ${spacingVerticalS};
+    padding-top: var(${spacingVerticalS});
+    padding-bottom: var(${spacingVerticalS});
   }
 
   /* horizontal spacing for indicator */
   :host([size='small']) ::slotted(fluent-tab)::after,
   :host([size='small']) ::slotted(fluent-tab)::before,
   :host([size='small']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalSNudge};
-    left: ${spacingHorizontalSNudge};
+    right: var(${spacingHorizontalSNudge});
+    left: var(${spacingHorizontalSNudge});
   }
   :host ::slotted(fluent-tab)::after,
   :host ::slotted(fluent-tab)::before,
   :host ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
+    right: var(${spacingHorizontalMNudge});
+    left: var(${spacingHorizontalMNudge});
   }
   :host([size='large']) ::slotted(fluent-tab)::after,
   :host([size='large']) ::slotted(fluent-tab)::before,
   :host([size='large']) ::slotted(fluent-tab:hover)::after {
-    right: ${spacingHorizontalMNudge};
-    left: ${spacingHorizontalMNudge};
+    right: var(${spacingHorizontalMNudge});
+    left: var(${spacingHorizontalMNudge});
   }
 
   /* vertical spacing for indicator */
@@ -207,24 +207,24 @@ export const styles = css `
   :host([orientation='vertical'][size='small']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalSNudge};
-    bottom: ${spacingVerticalSNudge};
+    top: var(${spacingVerticalSNudge});
+    bottom: var(${spacingVerticalSNudge});
   }
   :host([orientation='vertical']) ::slotted(fluent-tab)::after,
   :host([orientation='vertical']) ::slotted(fluent-tab)::before,
   :host([orientation='vertical']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalS};
-    bottom: ${spacingVerticalS};
+    top: var(${spacingVerticalS});
+    bottom: var(${spacingVerticalS});
   }
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::after,
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab)::before,
   :host([orientation='vertical'][size='large']) ::slotted(fluent-tab:hover)::after {
     right: 0;
     left: 0;
-    top: ${spacingVerticalMNudge};
-    bottom: ${spacingVerticalMNudge};
+    top: var(${spacingVerticalMNudge});
+    bottom: var(${spacingVerticalMNudge});
   }
 `;
 //# sourceMappingURL=tabs.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"tabs.styles.js","sourceRoot":"","sources":["../../../src/tabs/tabs.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,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;mBAIA,cAAc;iBAChB,eAAe;mBACb,iBAAiB;aACvB,uBAAuB;;;;;;;aAOvB,8BAA8B;;;;;;aAM9B,8BAA8B;;;wBAGnB,8BAA8B;;;wBAG9B,8BAA8B;;;;;;;qBAOjC,kBAAkB;;;;wBAIf,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAwD9B,0BAA0B;aACrC,4BAA4B;YAC7B,kCAAkC;;;;wBAItB,4BAA4B;YACxC,4BAA4B;aAC3B,uBAAuB;;;;iBAInB,eAAe;mBACb,iBAAiB;eACrB,qBAAqB,IAAI,uBAAuB;;;;iBAI9C,eAAe;mBACb,iBAAiB;eACrB,gBAAgB,IAAI,uBAAuB;;;;;;2BAM/B,YAAY;kCACL,kBAAkB;;;cAGtC,kBAAkB;;;;;;aAMnB,kBAAkB;;;;;;;;;cASjB,kBAAkB;qBACX,oBAAoB;;;;;;;;aAQ5B,kBAAkB;;;;;;cAMjB,kBAAkB;;;;;;;;aAQnB,kBAAkB;;;;;;mBAMZ,qBAAqB;sBAClB,qBAAqB;;;mBAGxB,kBAAkB;sBACf,kBAAkB;;;mBAGrB,gBAAgB;sBACb,gBAAgB;;;;;;;aAOzB,uBAAuB;YACxB,uBAAuB;;;;;aAKtB,uBAAuB;YACxB,uBAAuB;;;;;aAKtB,uBAAuB;YACxB,uBAAuB;;;;;;;;;WASxB,qBAAqB;cAClB,qBAAqB;;;;;;;WAOxB,gBAAgB;cACb,gBAAgB;;;;;;;WAOnB,qBAAqB;cAClB,qBAAqB;;CAElC,CAAC"}
+{"version":3,"file":"tabs.styles.js","sourceRoot":"","sources":["../../../src/tabs/tabs.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,kCAAkC,EAClC,uBAAuB,EACvB,4BAA4B,EAC5B,uBAAuB,EACvB,8BAA8B,EAC9B,0BAA0B,EAC1B,4BAA4B,EAC5B,kBAAkB,EAClB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,EACjB,iBAAiB,EACjB,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;uBAII,cAAc;qBAChB,eAAe;uBACb,iBAAiB;iBACvB,uBAAuB;;;;;;;iBAOvB,8BAA8B;;;;;;iBAM9B,8BAA8B;;;4BAGnB,8BAA8B;;;4BAG9B,8BAA8B;;;;;;;yBAOjC,kBAAkB;;;;4BAIf,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4BAwD9B,0BAA0B;iBACrC,4BAA4B;gBAC7B,kCAAkC;;;;4BAItB,4BAA4B;gBACxC,4BAA4B;iBAC3B,uBAAuB;;;;qBAInB,eAAe;uBACb,iBAAiB;mBACrB,qBAAqB,SAAS,uBAAuB;;;;qBAInD,eAAe;uBACb,iBAAiB;mBACrB,gBAAgB,SAAS,uBAAuB;;;;;;+BAMpC,YAAY;sCACL,kBAAkB;;;kBAGtC,kBAAkB;;;;;;iBAMnB,kBAAkB;;;;;;;;;kBASjB,kBAAkB;yBACX,oBAAoB;;;;;;;;iBAQ5B,kBAAkB;;;;;;kBAMjB,kBAAkB;;;;;;;;iBAQnB,kBAAkB;;;;;;uBAMZ,qBAAqB;0BAClB,qBAAqB;;;uBAGxB,kBAAkB;0BACf,kBAAkB;;;uBAGrB,gBAAgB;0BACb,gBAAgB;;;;;;;iBAOzB,uBAAuB;gBACxB,uBAAuB;;;;;iBAKtB,uBAAuB;gBACxB,uBAAuB;;;;;iBAKtB,uBAAuB;gBACxB,uBAAuB;;;;;;;;;eASxB,qBAAqB;kBAClB,qBAAqB;;;;;;;eAOxB,gBAAgB;kBACb,gBAAgB;;;;;;;eAOnB,qBAAqB;kBAClB,qBAAqB;;CAEtC,CAAC"}

package/dist/esm/text/text.styles.js

@@ -12,10 +12,10 @@ export const styles = css `
   }
 
   ::slotted(*) {
-    font-family: ${fontFamilyBase};
-    font-size: ${fontSizeBase300};
-    line-height: ${lineHeightBase300};
-    font-weight: ${fontWeightRegular};
+    font-family: var(${fontFamilyBase});
+    font-size: var(${fontSizeBase300});
+    line-height: var(${lineHeightBase300});
+    font-weight: var(${fontWeightRegular});
     text-align: start;
     white-space: normal;
     overflow: visible;
@@ -48,55 +48,55 @@ export const styles = css `
     text-decoration-line: line-through underline;
   }
   :host([size='100']) ::slotted(*) {
-    font-size: ${fontSizeBase100};
-    line-height: ${lineHeightBase100};
+    font-size: var(${fontSizeBase100});
+    line-height: var(${lineHeightBase100});
   }
   :host([size='200']) ::slotted(*) {
-    font-size: ${fontSizeBase200};
-    line-height: ${lineHeightBase200};
+    font-size: var(${fontSizeBase200});
+    line-height: var(${lineHeightBase200});
   }
   :host([size='400']) ::slotted(*) {
-    font-size: ${fontSizeBase400};
-    line-height: ${lineHeightBase400};
+    font-size: var(${fontSizeBase400});
+    line-height: var(${lineHeightBase400});
   }
   :host([size='500']) ::slotted(*) {
-    font-size: ${fontSizeBase500};
-    line-height: ${lineHeightBase500};
+    font-size: var(${fontSizeBase500});
+    line-height: var(${lineHeightBase500});
   }
   :host([size='600']) ::slotted(*) {
-    font-size: ${fontSizeBase600};
-    line-height: ${lineHeightBase600};
+    font-size: var(${fontSizeBase600});
+    line-height: var(${lineHeightBase600});
   }
   :host([size='700']) ::slotted(*) {
-    font-size: ${fontSizeHero700};
-    line-height: ${lineHeightHero700};
+    font-size: var(${fontSizeHero700});
+    line-height: var(${lineHeightHero700});
   }
   :host([size='800']) ::slotted(*) {
-    font-size: ${fontSizeHero800};
-    line-height: ${lineHeightHero800};
+    font-size: var(${fontSizeHero800});
+    line-height: var(${lineHeightHero800});
   }
   :host([size='900']) ::slotted(*) {
-    font-size: ${fontSizeHero900};
-    line-height: ${lineHeightHero900};
+    font-size: var(${fontSizeHero900});
+    line-height: var(${lineHeightHero900});
   }
   :host([size='1000']) ::slotted(*) {
-    font-size: ${fontSizeHero1000};
-    line-height: ${lineHeightHero1000};
+    font-size: var(${fontSizeHero1000});
+    line-height: var(${lineHeightHero1000});
   }
   :host([font='monospace']) ::slotted(*) {
-    font-family: ${fontFamilyMonospace};
+    font-family: var(${fontFamilyMonospace});
   }
   :host([font='numeric']) ::slotted(*) {
-    font-family: ${fontFamilyNumeric};
+    font-family: var(${fontFamilyNumeric});
   }
   :host([weight='medium']) ::slotted(*) {
-    font-weight: ${fontWeightMedium};
+    font-weight: var(${fontWeightMedium});
   }
   :host([weight='semibold']) ::slotted(*) {
-    font-weight: ${fontWeightSemibold};
+    font-weight: var(${fontWeightSemibold});
   }
   :host([weight='bold']) ::slotted(*) {
-    font-weight: ${fontWeightBold};
+    font-weight: var(${fontWeightBold});
   }
   :host([align='center']) ::slotted(*) {
     text-align: center;

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

@@ -1 +1 @@
-{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;;mBAOF,cAAc;iBAChB,eAAe;mBACb,iBAAiB;mBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAiCnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,eAAe;mBACb,iBAAiB;;;iBAGnB,gBAAgB;mBACd,kBAAkB;;;mBAGlB,mBAAmB;;;mBAGnB,iBAAiB;;;mBAGjB,gBAAgB;;;mBAGhB,kBAAkB;;;mBAGlB,cAAc;;;;;;;;;;;CAWhC,CAAC"}
+{"version":3,"file":"text.styles.js","sourceRoot":"","sources":["../../../src/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EACL,cAAc,EACd,mBAAmB,EACnB,iBAAiB,EACjB,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,eAAe,EACf,eAAe,EACf,cAAc,EACd,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,iBAAiB,GAClB,MAAM,2BAA2B,CAAC;AAEnC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,QAAQ,CAAC;;;;;;;uBAOE,cAAc;qBAChB,eAAe;uBACb,iBAAiB;uBACjB,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAiCnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,eAAe;uBACb,iBAAiB;;;qBAGnB,gBAAgB;uBACd,kBAAkB;;;uBAGlB,mBAAmB;;;uBAGnB,iBAAiB;;;uBAGjB,gBAAgB;;;uBAGhB,kBAAkB;;;uBAGlB,cAAc;;;;;;;;;;;CAWpC,CAAC"}