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

package/dist/esm/spinner/spinner.styles.js

@@ -1,97 +1,159 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
-import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2 } from '../theme/design-tokens.js';
+import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { colorBrandStroke1, colorBrandStroke2, colorNeutralStrokeOnBrand2, curveEasyEase, strokeWidthThick, strokeWidthThicker, strokeWidthThickest, } from '../theme/design-tokens.js';
+import { extraLargeState, extraSmallState, hugeState, invertedState, largeState, smallState, tinyState, } from '../styles/states/index.js';
 export const styles = css `
-  ${display('flex')}
+  ${display('inline-flex')}
 
   :host {
-    display: flex;
-    align-items: center;
-    height: 32px;
-    width: 32px;
-    contain: content;
+    --duration: 1.5s;
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 32px;
+    height: var(--size);
+    width: var(--size);
+    contain: strict;
+    content-visibility: auto;
   }
-  :host([size='tiny']) {
-    height: 20px;
-    width: 20px;
+
+  :host(${tinyState}) {
+    --indicatorSize: ${strokeWidthThick};
+    --size: 20px;
+  }
+  :host(${extraSmallState}) {
+    --indicatorSize: ${strokeWidthThick};
+    --size: 24px;
   }
-  :host([size='extra-small']) {
-    height: 24px;
-    width: 24px;
+  :host(${smallState}) {
+    --indicatorSize: ${strokeWidthThick};
+    --size: 28px;
   }
-  :host([size='small']) {
-    height: 28px;
-    width: 28px;
+  :host(${largeState}) {
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 36px;
   }
-  :host([size='large']) {
-    height: 36px;
-    width: 36px;
+  :host(${extraLargeState}) {
+    --indicatorSize: ${strokeWidthThicker};
+    --size: 40px;
   }
-  :host([size='extra-large']) {
-    height: 40px;
-    width: 40px;
+  :host(${hugeState}) {
+    --indicatorSize: ${strokeWidthThickest};
+    --size: 44px;
+  }
+
+  .progress,
+  .background,
+  .spinner,
+  .start,
+  .end,
+  .indicator {
+    position: absolute;
+    inset: 0;
   }
-  :host([size='huge']) {
-    height: 44px;
-    width: 44px;
+
+  .progress,
+  .spinner,
+  .indicator {
+    animation: none var(--duration) infinite ${curveEasyEase};
   }
+
   .progress {
-    height: 100%;
-    width: 100%;
+    animation-timing-function: linear;
+    animation-name: spin-linear;
   }
 
   .background {
-    fill: none;
-    stroke: var(${colorBrandStroke2});
-    stroke-width: 1.5px;
+    border: var(--indicatorSize) solid ${colorBrandStroke2};
+    border-radius: 50%;
+  }
+
+  :host(${invertedState}) .background {
+    border-color: rgba(255, 255, 255, 0.2);
   }
 
-  :host([appearance='inverted']) .background {
-    stroke: rgba(255, 255, 255, 0.2);
+  .spinner {
+    animation-name: spin-swing;
   }
 
-  .determinate {
-    stroke: var(${colorBrandStroke1});
-    fill: none;
-    stroke-width: 1.5px;
-    stroke-linecap: round;
-    transform-origin: 50% 50%;
-    transform: rotate(-90deg);
-    transition: all 0.2s ease-in-out;
+  .start {
+    overflow: hidden;
+    inset-inline-end: 50%;
   }
 
-  :host([appearance='inverted']) .determinite {
-    stroke: var(${colorNeutralStrokeOnBrand2});
+  .end {
+    overflow: hidden;
+    inset-inline-start: 50%;
   }
 
-  .indeterminate-indicator-1 {
-    stroke: var(${colorBrandStroke1});
-    fill: none;
-    stroke-width: 1.5px;
-    stroke-linecap: round;
-    transform-origin: 50% 50%;
-    transform: rotate(-90deg);
-    transition: all 0.2s ease-in-out;
-    animation: spin-infinite 3s cubic-bezier(0.53, 0.21, 0.29, 0.67) infinite;
+  .indicator {
+    color: ${colorBrandStroke1};
+    box-sizing: border-box;
+    border-radius: 50%;
+    border: var(--indicatorSize) solid transparent;
+    border-block-start-color: currentcolor;
+    border-inline-end-color: currentcolor;
   }
 
-  :host([appearance='inverted']) .indeterminate-indicator-1 {
-    stroke: var(${colorNeutralStrokeOnBrand2});
+  :host(${invertedState}) .indicator {
+    color: ${colorNeutralStrokeOnBrand2};
+  }
+
+  .start .indicator {
+    rotate: 135deg; /* Starts 9 o'clock */
+    inset: 0 -100% 0 0;
+    animation-name: spin-start;
+  }
+
+  .end .indicator {
+    rotate: 135deg; /* Ends at 3 o'clock */
+    inset: 0 0 0 -100%;
+    animation-name: spin-end;
+  }
+
+  @keyframes spin-linear {
+    100% {
+      transform: rotate(360deg);
+    }
   }
 
-  @keyframes spin-infinite {
+  @keyframes spin-swing {
     0% {
-      stroke-dasharray: 0.01px 43.97px;
+      transform: rotate(-135deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(225deg);
+    }
+  }
+
+  @keyframes spin-start {
+    0%,
+    100% {
       transform: rotate(0deg);
     }
     50% {
-      stroke-dasharray: 21.99px 21.99px;
-      transform: rotate(450deg);
+      transform: rotate(-80deg);
     }
+  }
+
+  @keyframes spin-end {
+    0%,
     100% {
-      stroke-dasharray: 0.01px 43.97px;
-      transform: rotate(1080deg);
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(70deg);
     }
   }
-`;
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+    .background {
+      display: none;
+    }
+    .indicator {
+      border-color: Canvas;
+      border-block-start-color: Highlight;
+      border-inline-end-color: Highlight;
+    }
+  `));
 //# sourceMappingURL=spinner.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,yCAAyC,CAAC;AAClE,OAAO,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAE7G,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,MAAM,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;kBAwCD,iBAAiB;;;;;;;;;kBASjB,iBAAiB;;;;;;;;;;kBAUjB,0BAA0B;;;;kBAI1B,iBAAiB;;;;;;;;;;;kBAWjB,0BAA0B;;;;;;;;;;;;;;;;;CAiB3C,CAAC"}
+{"version":3,"file":"spinner.styles.js","sourceRoot":"","sources":["../../../src/spinner/spinner.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,8BAA8B,EAAE,MAAM,mBAAmB,CAAC;AAC5E,OAAO,EACL,iBAAiB,EACjB,iBAAiB,EACjB,0BAA0B,EAC1B,aAAa,EACb,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,GACpB,MAAM,2BAA2B,CAAC;AACnC,OAAO,EACL,eAAe,EACf,eAAe,EACf,SAAS,EACT,aAAa,EACb,UAAU,EACV,UAAU,EACV,SAAS,GACV,MAAM,2BAA2B,CAAC;AAEnC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;IACrB,OAAO,CAAC,aAAa,CAAC;;;;uBAIH,kBAAkB;;;;;;;;UAQ/B,SAAS;uBACI,gBAAgB;;;UAG7B,eAAe;uBACF,gBAAgB;;;UAG7B,UAAU;uBACG,gBAAgB;;;UAG7B,UAAU;uBACG,kBAAkB;;;UAG/B,eAAe;uBACF,kBAAkB;;;UAG/B,SAAS;uBACI,mBAAmB;;;;;;;;;;;;;;;;;+CAiBK,aAAa;;;;;;;;;yCASnB,iBAAiB;;;;UAIhD,aAAa;;;;;;;;;;;;;;;;;;;aAmBV,iBAAiB;;;;;;;;UAQpB,aAAa;aACV,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDtC,CAAC,aAAa,CACb,8BAA8B,CAAC,GAAG,CAAA;;;;;;;;;GASjC,CAAC,CACH,CAAC"}

package/dist/esm/spinner/spinner.template.js

@@ -1,22 +1,17 @@
-import { progressRingTemplate } from '@microsoft/fast-foundation/progress-ring.js';
-export const template = progressRingTemplate({
-    indeterminateIndicator: `
-    <svg class="progress" part="progress" viewBox="0 0 16 16">
-        <circle
-            class="background"
-            part="background"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-        <circle
-            class="indeterminate-indicator-1"
-            part="indeterminate-indicator-1"
-            cx="8px"
-            cy="8px"
-            r="7px"
-        ></circle>
-    </svg>
-  `,
-});
+import { html } from '@microsoft/fast-element';
+export const template = html `
+  <slot name="indicator">
+    <div class="background"></div>
+    <div class="progress">
+      <div class="spinner">
+        <div class="start">
+          <div class="indicator"></div>
+        </div>
+        <div class="end">
+          <div class="indicator"></div>
+        </div>
+      </div>
+    </div>
+  </slot>
+`;
 //# sourceMappingURL=spinner.template.js.map

package/dist/esm/spinner/spinner.template.js.map

@@ -1 +1 @@
-{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,6CAA6C,CAAC;AAGnF,MAAM,CAAC,MAAM,QAAQ,GAAiC,oBAAoB,CAAC;IACzE,sBAAsB,EAAE;;;;;;;;;;;;;;;;;GAiBvB;CACF,CAAC,CAAC"}
+{"version":3,"file":"spinner.template.js","sourceRoot":"","sources":["../../../src/spinner/spinner.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAS;;;;;;;;;;;;;;CAcpC,CAAC"}

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

@@ -1,24 +1,24 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation/utilities.js';
+import { display } from '../../utils/index.js';
 import { borderRadiusCircular, colorBrandBackground, colorBrandBackground2, colorBrandForeground1, colorBrandForeground2, colorBrandStroke2, colorNeutralBackground1, colorNeutralBackground4, colorNeutralBackground5, colorNeutralForeground1, colorNeutralForeground1Static, colorNeutralForeground3, colorNeutralForegroundInverted, colorNeutralForegroundOnBrand, colorNeutralForegroundStaticInverted, colorNeutralStroke2, colorNeutralStrokeAccessible, colorPaletteDarkOrangeBackground1, colorPaletteDarkOrangeBackground3, colorPaletteDarkOrangeBorder1, colorPaletteDarkOrangeForeground1, colorPaletteDarkOrangeForeground3, colorPaletteGreenBackground1, colorPaletteGreenBackground3, colorPaletteGreenBorder2, colorPaletteGreenForeground1, colorPaletteGreenForeground2, colorPaletteGreenForeground3, colorPaletteRedBackground1, colorPaletteRedBackground3, colorPaletteRedBorder1, colorPaletteRedForeground1, colorPaletteRedForeground3, colorPaletteYellowBackground1, colorPaletteYellowBackground3, colorPaletteYellowBorder1, colorPaletteYellowForeground2, colorTransparentStroke, fontFamilyBase, fontSizeBase100, fontSizeBase200, fontWeightSemibold, lineHeightBase100, lineHeightBase200, spacingHorizontalSNudge, spacingHorizontalXS, spacingHorizontalXXS, strokeWidthThin, } from '../../theme/design-tokens.js';
-const textPadding = spacingHorizontalXXS;
+import { dangerState, extraLargeState, extraSmallState, ghostState, importantState, informativeState, largeState, outlineState, severeState, smallState, subtleState, successState, tintState, tinyState, warningState, } from '../states/index.js';
 export const badgeBaseStyles = css.partial `
   ${display('inline-flex')} :host {
     position: relative;
     box-sizing: border-box;
     align-items: center;
     justify-content: center;
-    font-family: var(${fontFamilyBase});
-    font-weight: var(${fontWeightSemibold});
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
+    font-family: ${fontFamilyBase};
+    font-weight: ${fontWeightSemibold};
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
     min-width: 20px;
     height: 20px;
-    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
-    border-radius: var(${borderRadiusCircular});
-    border-color: var(${colorTransparentStroke});
-    background-color: var(${colorBrandBackground});
-    color: var(${colorNeutralForegroundOnBrand});
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
+    border-radius: ${borderRadiusCircular};
+    border-color: ${colorTransparentStroke};
+    background-color: ${colorBrandBackground};
+    color: ${colorNeutralForegroundOnBrand};
     contain: content;
   }
 
@@ -26,7 +26,7 @@ export const badgeBaseStyles = css.partial `
     font-size: 12px;
   }
 
-  :host(:not([appearance='ghost']))::after {
+  :host(:not(${ghostState}))::after {
     position: absolute;
     content: '';
     top: 0;
@@ -34,7 +34,7 @@ export const badgeBaseStyles = css.partial `
     bottom: 0;
     right: 0;
     border-style: solid;
-    border-width: var(${strokeWidthThin});
+    border-width: ${strokeWidthThin};
     border-color: inherit;
     border-radius: inherit;
   }
@@ -44,7 +44,7 @@ export const badgeBaseStyles = css.partial `
  * The badge's size styles
  */
 export const badgeSizeStyles = css.partial `
-  :host([size='tiny']) {
+  :host(${tinyState}) {
     width: 6px;
     height: 6px;
     font-size: 4px;
@@ -52,10 +52,10 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='tiny']) ::slotted(svg) {
+  :host(${tinyState}) ::slotted(svg) {
     font-size: 6px;
   }
-  :host([size='extra-small']) {
+  :host(${extraSmallState}) {
     width: 10px;
     height: 10px;
     font-size: 6px;
@@ -63,37 +63,37 @@ export const badgeSizeStyles = css.partial `
     padding-inline: 0;
     min-width: unset;
   }
-  :host([size='extra-small']) ::slotted(svg) {
+  :host(${extraSmallState}) ::slotted(svg) {
     font-size: 10px;
   }
-  :host([size='small']) {
+  :host(${smallState}) {
     min-width: 16px;
     height: 16px;
-    font-size: var(${fontSizeBase100});
-    line-height: var(${lineHeightBase100});
-    padding-inline: calc(var(${spacingHorizontalXXS}) + var(${textPadding}));
+    font-size: ${fontSizeBase100};
+    line-height: ${lineHeightBase100};
+    padding-inline: calc(${spacingHorizontalXXS} + ${spacingHorizontalXXS});
   }
-  :host([size='small']) ::slotted(svg) {
+  :host(${smallState}) ::slotted(svg) {
     font-size: 12px;
   }
-  :host([size='large']) {
+  :host(${largeState}) {
     min-width: 24px;
     height: 24px;
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
-    padding-inline: calc(var(${spacingHorizontalXS}) + var(${textPadding}));
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    padding-inline: calc(${spacingHorizontalXS} + ${spacingHorizontalXXS});
   }
-  :host([size='large']) ::slotted(svg) {
+  :host(${largeState}) ::slotted(svg) {
     font-size: 16px;
   }
-  :host([size='extra-large']) {
+  :host(${extraLargeState}) {
     min-width: 32px;
     height: 32px;
-    font-size: var(${fontSizeBase200});
-    line-height: var(${lineHeightBase200});
-    padding-inline: calc(var(${spacingHorizontalSNudge}) + var(${textPadding}));
+    font-size: ${fontSizeBase200};
+    line-height: ${lineHeightBase200};
+    padding-inline: calc(${spacingHorizontalSNudge} + ${spacingHorizontalXXS});
   }
-  :host([size='extra-large']) ::slotted(svg) {
+  :host(${extraLargeState}) ::slotted(svg) {
     font-size: 20px;
   }
 `;
@@ -104,39 +104,39 @@ export const badgeSizeStyles = css.partial `
  * @public
  */
 export const badgeFilledStyles = css.partial `
-  :host([color='danger']) {
-    background-color: var(${colorPaletteRedBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${dangerState}) {
+    background-color: ${colorPaletteRedBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='important']) {
-    background-color: var(${colorNeutralForeground1});
-    color: var(${colorNeutralBackground1});
+  :host(${importantState}) {
+    background-color: ${colorNeutralForeground1};
+    color: ${colorNeutralBackground1};
   }
 
-  :host([color='informative']) {
-    background-color: var(${colorNeutralBackground5});
-    color: var(${colorNeutralForeground3});
+  :host(${informativeState}) {
+    background-color: ${colorNeutralBackground5};
+    color: ${colorNeutralForeground3};
   }
 
-  :host([color='severe']) {
-    background-color: var(${colorPaletteDarkOrangeBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${severeState}) {
+    background-color: ${colorPaletteDarkOrangeBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='subtle']) {
-    background-color: var(${colorNeutralBackground1});
-    color: var(${colorNeutralForeground1});
+  :host(${subtleState}) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground1};
   }
 
-  :host([color='success']) {
-    background-color: var(${colorPaletteGreenBackground3});
-    color: var(${colorNeutralForegroundOnBrand});
+  :host(${successState}) {
+    background-color: ${colorPaletteGreenBackground3};
+    color: ${colorNeutralForegroundOnBrand};
   }
 
-  :host([color='warning']) {
-    background-color: var(${colorPaletteYellowBackground3});
-    color: var(${colorNeutralForeground1Static});
+  :host(${warningState}) {
+    background-color: ${colorPaletteYellowBackground3};
+    color: ${colorNeutralForeground1Static};
   }
 `;
 /**
@@ -144,37 +144,37 @@ export const badgeFilledStyles = css.partial `
  * @public
  */
 export const badgeGhostStyles = css.partial `
-  :host([appearance='ghost']) {
-    color: var(${colorBrandForeground1});
+  :host(${ghostState}) {
+    color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='ghost'][color='danger']) {
-    color: var(${colorPaletteRedForeground3});
+  :host(${ghostState}${dangerState}) {
+    color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='ghost'][color='important']) {
-    color: var(${colorNeutralForeground1});
+  :host(${ghostState}${importantState}) {
+    color: ${colorNeutralForeground1};
   }
 
-  :host([appearance='ghost'][color='informative']) {
-    color: var(${colorNeutralForeground3});
+  :host(${ghostState}${informativeState}) {
+    color: ${colorNeutralForeground3};
   }
 
-  :host([appearance='ghost'][color='severe']) {
-    color: var(${colorPaletteDarkOrangeForeground3});
+  :host(${ghostState}${severeState}) {
+    color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='ghost'][color='subtle']) {
-    color: var(${colorNeutralForegroundInverted});
+  :host(${ghostState}${subtleState}) {
+    color: ${colorNeutralForegroundInverted};
   }
 
-  :host([appearance='ghost'][color='success']) {
-    color: var(${colorPaletteGreenForeground3});
+  :host(${ghostState}${successState}) {
+    color: ${colorPaletteGreenForeground3};
   }
 
-  :host([appearance='ghost'][color='warning']) {
-    color: var(${colorPaletteYellowForeground2});
+  :host(${ghostState}${warningState}) {
+    color: ${colorPaletteYellowForeground2};
   }
 `;
 /**
@@ -182,40 +182,40 @@ export const badgeGhostStyles = css.partial `
  * @public
  */
 export const badgeOutlineStyles = css.partial `
-  :host([appearance='outline']) {
+  :host(${outlineState}) {
     border-color: currentColor;
-    color: var(${colorBrandForeground1});
+    color: ${colorBrandForeground1};
     background-color: initial;
   }
 
-  :host([appearance='outline'][color='danger']) {
-    color: var(${colorPaletteRedForeground3});
+  :host(${outlineState}${dangerState}) {
+    color: ${colorPaletteRedForeground3};
   }
 
-  :host([appearance='outline'][color='important']) {
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStrokeAccessible});
+  :host(${outlineState}${importantState}) {
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStrokeAccessible};
   }
 
-  :host([appearance='outline'][color='informative']) {
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${outlineState}${informativeState}) {
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='outline'][color='severe']) {
-    color: var(${colorPaletteDarkOrangeForeground3});
+  :host(${outlineState}${severeState}) {
+    color: ${colorPaletteDarkOrangeForeground3};
   }
 
-  :host([appearance='outline'][color='subtle']) {
-    color: var(${colorNeutralForegroundStaticInverted});
+  :host(${outlineState}${subtleState}) {
+    color: ${colorNeutralForegroundStaticInverted};
   }
 
-  :host([appearance='outline'][color='success']) {
-    color: var(${colorPaletteGreenForeground2});
+  :host(${outlineState}${successState}) {
+    color: ${colorPaletteGreenForeground2};
   }
 
-  :host([appearance='outline'][color='warning']) {
-    color: var(${colorPaletteYellowForeground2});
+  :host(${outlineState}${warningState}) {
+    color: ${colorPaletteYellowForeground2};
   }
 `;
 /**
@@ -223,52 +223,52 @@ export const badgeOutlineStyles = css.partial `
  * @public
  */
 export const badgeTintStyles = css.partial `
-  :host([appearance='tint']) {
-    background-color: var(${colorBrandBackground2});
-    color: var(${colorBrandForeground2});
-    border-color: var(${colorBrandStroke2});
+  :host(${tintState}) {
+    background-color: ${colorBrandBackground2};
+    color: ${colorBrandForeground2};
+    border-color: ${colorBrandStroke2};
   }
 
-  :host([appearance='tint'][color='danger']) {
-    background-color: var(${colorPaletteRedBackground1});
-    color: var(${colorPaletteRedForeground1});
-    border-color: var(${colorPaletteRedBorder1});
+  :host(${tintState}${dangerState}) {
+    background-color: ${colorPaletteRedBackground1};
+    color: ${colorPaletteRedForeground1};
+    border-color: ${colorPaletteRedBorder1};
   }
 
-  :host([appearance='tint'][color='important']) {
-    background-color: var(${colorNeutralForeground3});
-    color: var(${colorNeutralBackground1});
-    border-color: var(${colorTransparentStroke});
+  :host(${tintState}${importantState}) {
+    background-color: ${colorNeutralForeground3};
+    color: ${colorNeutralBackground1};
+    border-color: ${colorTransparentStroke};
   }
 
-  :host([appearance='tint'][color='informative']) {
-    background-color: var(${colorNeutralBackground4});
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${tintState}${informativeState}) {
+    background-color: ${colorNeutralBackground4};
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='severe']) {
-    background-color: var(${colorPaletteDarkOrangeBackground1});
-    color: var(${colorPaletteDarkOrangeForeground1});
-    border-color: var(${colorPaletteDarkOrangeBorder1});
+  :host(${tintState}${severeState}) {
+    background-color: ${colorPaletteDarkOrangeBackground1};
+    color: ${colorPaletteDarkOrangeForeground1};
+    border-color: ${colorPaletteDarkOrangeBorder1};
   }
 
-  :host([appearance='tint'][color='subtle']) {
-    background-color: var(${colorNeutralBackground1});
-    color: var(${colorNeutralForeground3});
-    border-color: var(${colorNeutralStroke2});
+  :host(${tintState}${subtleState}) {
+    background-color: ${colorNeutralBackground1};
+    color: ${colorNeutralForeground3};
+    border-color: ${colorNeutralStroke2};
   }
 
-  :host([appearance='tint'][color='success']) {
-    background-color: var(${colorPaletteGreenBackground1});
-    color: var(${colorPaletteGreenForeground1});
-    border-color: var(${colorPaletteGreenBorder2});
+  :host(${tintState}${successState}) {
+    background-color: ${colorPaletteGreenBackground1};
+    color: ${colorPaletteGreenForeground1};
+    border-color: ${colorPaletteGreenBorder2};
   }
 
-  :host([appearance='tint'][color='warning']) {
-    background-color: var(${colorPaletteYellowBackground1});
-    color: var(${colorPaletteYellowForeground2});
-    border-color: var(${colorPaletteYellowBorder1});
+  :host(${tintState}${warningState}) {
+    background-color: ${colorPaletteYellowBackground1};
+    color: ${colorPaletteYellowForeground2};
+    border-color: ${colorPaletteYellowBorder1};
   }
 `;
 //# sourceMappingURL=badge.partials.js.map