@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/select/select.styles.js

@@ -1,33 +1,65 @@
 import { css } from '@microsoft/fast-element';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { SystemColors } from '@microsoft/fast-web-utilities';
-import { elevation } from '../styles/elevation';
+import { elevationShadowFlyout } from '../styles/elevation';
 import { heightNumber } from '../styles/size';
 import { appearanceBehavior } from '../utilities/behaviors';
-import { accentFillFocus, bodyFont, controlCornerRadius, designUnit, disabledOpacity, focusStrokeInner, focusStrokeOuter, focusStrokeWidth, foregroundOnAccentFocus, neutralFillHover, neutralFillInputActive, neutralFillInputHover, neutralFillInputRest, neutralFillRest, neutralFillStealthRest, neutralForegroundRest, neutralLayerFloating, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
+import { bodyFont, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, layerCornerRadius, neutralFillActive, neutralFillHover, neutralFillRest, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, strokeWidth, typeRampBaseFontSize, typeRampBaseLineHeight, } from '../design-tokens';
 export const selectFilledStyles = (context, definition) => css `
-  :host([appearance='filled']) {
-    background: ${neutralFillRest};
+  :host {
+    background: ${neutralFillSecondaryRest};
     border-color: transparent;
   }
 
-  :host([appearance='filled']:hover:not([disabled])) {
-    background: ${neutralFillHover};
+  :host(:not([disabled]):not([open]):hover) {
+    background: ${neutralFillSecondaryHover};
     border-color: transparent;
   }
 
-  :host([appearance="filled"]:${focusVisible}) {
-    border-color: ${focusStrokeOuter};
+  :host(:not([disabled]):not([open]):active) {
+    background: ${neutralFillSecondaryActive};
+    border-color: transparent;
+  }
+`.withBehaviors(forcedColorsStylesheetBehavior(css `
+      :host(:not([disabled]):not([open]):hover) {
+        background: transparent;
+      }
+      :host(:not([disabled]):not([open]):hover),
+      :host(:not([disabled]):not([open]):active) {
+        border-color: ${SystemColors.Highlight};
+      }
+      :host(:${focusVisible}) {
+        forced-color-adjust: none;
+        background: transparent;
+        border-color: ${SystemColors.Highlight};
+        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
+      }
+    `));
+export const selectStealthStyles = (context, definition) => css `
+  :host {
+    background: ${neutralFillStealthRest};
+    border-color: transparent;
+  }
+
+  :host(:not([disabled]):not([open]):hover) {
+    background: ${neutralFillStealthHover};
+    border-color: transparent;
+  }
+
+  :host(:not([disabled]):not([open]):active) {
+    background: ${neutralFillStealthActive};
+    border-color: transparent;
   }
 `;
 export const selectStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
-      --elevation: 14;
-      background: ${neutralFillInputRest};
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlRest};
+      border: calc(${strokeWidth} * 1px) solid transparent;
       border-radius: calc(${controlCornerRadius} * 1px);
-      border: calc(${strokeWidth} * 1px) solid ${neutralStrokeRest};
       box-sizing: border-box;
       color: ${neutralForegroundRest};
+      fill: currentcolor;
       font-family: ${bodyFont};
       height: calc(${heightNumber} * 1px);
       position: relative;
@@ -36,28 +68,29 @@ export const selectStyles = (context, definition) => css `
       vertical-align: top;
     }
 
-    .listbox {
-      ${elevation}
-      background: ${neutralLayerFloating};
-      border-radius: calc(${controlCornerRadius} * 1px);
+    :host .listbox {
+      box-shadow: ${elevationShadowFlyout};
+      background: ${fillColor};
+      border-radius: calc(${layerCornerRadius} * 1px);
       box-sizing: border-box;
       display: inline-flex;
       flex-direction: column;
       left: 0;
       max-height: calc(var(--max-height) - (${heightNumber} * 1px));
-      padding: calc(${designUnit} * 1px) 0;
+      padding: calc((${designUnit} - ${strokeWidth} ) * 1px) 0;
       overflow-y: auto;
       position: absolute;
       width: 100%;
       z-index: 1;
       margin: 1px 0;
+      border: calc(${strokeWidth} * 1px) solid transparent;
     }
 
-    .listbox[hidden] {
+    :host .listbox[hidden] {
       display: none;
     }
 
-    .control {
+    :host .control {
       align-items: center;
       box-sizing: border-box;
       cursor: pointer;
@@ -70,13 +103,14 @@ export const selectStyles = (context, definition) => css `
       width: 100%;
     }
 
-    :host(:not([disabled]):hover) {
-      background: ${neutralFillInputHover};
-      border-color: ${neutralStrokeHover};
+    :host(:not([disabled]):not([open]):hover) {
+      background: padding-box linear-gradient(${neutralFillHover}, ${neutralFillHover}),
+        border-box ${neutralStrokeControlHover};
     }
 
-    :host(:focus) {
-      outline: none;
+    :host(:not([disabled]):not([open]):active) {
+      background: padding-box linear-gradient(${neutralFillActive}, ${neutralFillActive}),
+        border-box ${neutralStrokeControlActive};
     }
 
     :host(:${focusVisible}) {
@@ -85,19 +119,6 @@ export const selectStyles = (context, definition) => css `
       box-shadow: 0 0 0 1px inset ${focusStrokeOuter};
     }
 
-    :host([open]:${focusVisible}) {
-      border-color: ${neutralStrokeRest};
-      outline: none;
-      box-shadow: none;
-    }
-
-    :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
-      box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${focusStrokeInner};
-      border-color: ${focusStrokeOuter};
-      background: ${accentFillFocus};
-      color: ${foregroundOnAccentFocus};
-    }
-
     :host([disabled]) {
       cursor: ${disabledCursor};
       opacity: ${disabledOpacity};
@@ -108,36 +129,12 @@ export const selectStyles = (context, definition) => css `
       user-select: none;
     }
 
-    :host([disabled]:hover) {
-      background: ${neutralFillStealthRest};
-      color: ${neutralForegroundRest};
-      fill: currentcolor;
-    }
-
-    :host(:not([disabled])) .control:active {
-      background: ${neutralFillInputActive};
-      border-color: ${neutralStrokeActive};
-      border-radius: calc(${controlCornerRadius} * 1px);
-    }
-
     :host([open][position='above']) .listbox {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
+      bottom: calc((${heightNumber} + ${designUnit} * 2) * 1px);
     }
 
     :host([open][position='below']) .listbox {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-
-    :host([open][position='above']) .listbox {
-      border-bottom: 0;
-      bottom: calc(${heightNumber} * 1px);
-    }
-
-    :host([open][position='below']) .listbox {
-      border-top: 0;
-      top: calc(${heightNumber} * 1px);
+      top: calc((${heightNumber} + ${designUnit} * 2) * 1px);
     }
 
     .selected-value {
@@ -159,79 +156,58 @@ export const selectStyles = (context, definition) => css `
     :host([open]) slot[name='listbox'] {
       display: flex;
       position: absolute;
-      ${elevation}
+    }
+
+    .start {
+      margin-inline-end: 11px;
     }
 
     .end {
-      margin-inline-start: auto;
+      margin-inline-start: 11px;
     }
 
     .start,
     .end,
     .indicator,
-    .select-indicator,
     ::slotted(svg) {
-      ${`` /* Glyph size is temporary - replace when glyph-size var is added */}
-      fill: currentcolor;
-      height: 1em;
-      min-height: calc(${designUnit} * 4px);
-      min-width: calc(${designUnit} * 4px);
-      width: 1em;
+      display: flex;
     }
 
     ::slotted([role='option']) {
       flex: 0 0 auto;
     }
-  `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
-        :host([disabled]) {
-          border-color: ${SystemColors.GrayText};
-          background-color: ${SystemColors.ButtonFace};
-          color: ${SystemColors.GrayText};
-          opacity: 1;
-          forced-color-adjust: none;
-        }
-
-        :host([disabled]:hover) {
-          background: ${SystemColors.ButtonFace};
-        }
-
-        :host([disabled]) .control {
-          color: ${SystemColors.GrayText};
-          border-color: ${SystemColors.GrayText};
-        }
-
-        :host(:not([disabled]):hover) {
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-        }
-
-        :host(:${focusVisible}) {
-          forced-color-adjust: none;
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
-          color: ${SystemColors.ButtonText};
-          fill: currentcolor;
-        }
-
-        :host([open]) .listbox {
-          background: ${SystemColors.ButtonFace};
-          border: 1px solid ${SystemColors.ButtonText};
-        }
-
-        :host(:${focusVisible}) ::slotted([aria-selected="true"][role="option"]:not([disabled])) {
-          background: ${SystemColors.Highlight};
-          border-color: ${SystemColors.ButtonText};
-          box-shadow: 0 0 0 calc(${focusStrokeWidth} * 1px) inset ${SystemColors.HighlightText};
-          color: ${SystemColors.HighlightText};
-          fill: currentcolor;
-        }
-
-        ::slotted([role='option']:not([aria-selected='true']):not([disabled]):hover) {
-          forced-color-adjust: none;
-          color: ${SystemColors.ButtonText};
-          background: ${SystemColors.ButtonFace};
-          border-color: ${SystemColors.Highlight};
-          box-shadow: none;
-        }
-      `));
+  `.withBehaviors(appearanceBehavior('filled', selectFilledStyles(context, definition)), appearanceBehavior('stealth', selectStealthStyles(context, definition)), forcedColorsStylesheetBehavior(css `
+      :host {
+        background: ${SystemColors.ButtonFace};
+        color: ${SystemColors.ButtonText};
+      }
+      :host(:not([disabled]):not([open]):hover) {
+        background: transparent;
+      }
+      :host(:not([disabled]):hover) {
+        border-color: ${SystemColors.Highlight};
+      }
+      :host(:${focusVisible}) {
+        forced-color-adjust: none;
+        border-color: ${SystemColors.Highlight};
+        box-shadow: 0 0 0 1px inset ${SystemColors.Highlight};
+      }
+      :host([open]) .listbox {
+        background: ${SystemColors.ButtonFace};
+        border-color: ${SystemColors.CanvasText};
+      }
+      .start, .end, .indicator, ::slotted(svg) {
+        fill: ${SystemColors.FieldText};
+      }
+      :host([disabled]) {
+        border-color: ${SystemColors.GrayText};
+        color: ${SystemColors.GrayText};
+        opacity: 1;
+      }
+      :host([disabled]) .start,
+      :host([disabled]) .end,
+      :host([disabled]) .indicator,
+      :host([disabled]) ::slotted(svg) {
+        fill: ${SystemColors.GrayText};
+      }
+    `));

package/dist/esm/select/select.vscode.definition.json

@@ -17,6 +17,9 @@
                         },
                         {
                             "name": "outline"
+                        },
+                        {
+                            "name": "stealth"
                         }
                     ],
                     "default": "outline",

package/dist/esm/skeleton/skeleton.stories.js

@@ -4,6 +4,7 @@ export default {
     component: fluentSkeleton,
     argTypes: {
         shape: {
+            defaultValue: 'rect',
             options: ['circle', 'rect'],
             control: { type: 'radio' },
         },
@@ -16,7 +17,7 @@ const SkeletonTemplate = ({ shape, shimmer }) => `
   <fluent-skeleton 
     ${shape ? `shape="${shape}"` : ''}
     ${shimmer ? 'shimmer' : ''} 
-    style="border-radius: 4px; margin-top: 10px; height: 10px" width: 100px"
+    style="margin-top: 10px; height: 50px; width: 50px"
   ></fluent-skeleton>
 `;
 export const Skeleton = SkeletonTemplate.bind({});
@@ -25,7 +26,7 @@ Skeleton.args = {
     shimmer: false,
 };
 const example = `
-<fluent-skeleton style="border-radius: 4px; margin-top: 10px; height: 10px" shape="rect"></fluent-skeleton>
+<fluent-skeleton style="height: 50px; width: 50px" shape="rect"></fluent-skeleton>
 `;
 Skeleton.parameters = {
     docs: {

package/dist/esm/skeleton/skeleton.styles.js

@@ -1,9 +1,10 @@
 import { css } from '@microsoft/fast-element';
-import { display } from '@microsoft/fast-foundation';
-import { controlCornerRadius, neutralFillRest } from '../design-tokens';
+import { display, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import { controlCornerRadius, neutralFillSecondaryHover, neutralFillSecondaryRest } from '../design-tokens';
 export const skeletonStyles = (context, definition) => css `
     ${display('block')} :host {
-      --skeleton-fill-default: #e1dfdd;
+      --skeleton-fill-default: ${neutralFillSecondaryRest};
       overflow: hidden;
       width: 100%;
       position: relative;
@@ -11,7 +12,7 @@ export const skeletonStyles = (context, definition) => css `
       --skeleton-animation-gradient-default: linear-gradient(
         270deg,
         var(--skeleton-fill, var(--skeleton-fill-default)) 0%,
-        #f3f2f1 51.13%,
+        ${neutralFillSecondaryHover} 51%,
         var(--skeleton-fill, var(--skeleton-fill-default)) 100%
       );
       --skeleton-animation-timing-default: ease-in-out;
@@ -45,7 +46,7 @@ export const skeletonStyles = (context, definition) => css `
       background-image: var(--skeleton-animation-gradient, var(--skeleton-animation-gradient-default));
       background-size: 0px 0px / 90% 100%;
       background-repeat: no-repeat;
-      background-color: var(--skeleton-animation-fill, ${neutralFillRest});
+      background-color: var(--skeleton-animation-fill, ${neutralFillSecondaryRest});
       animation: shimmer 2s infinite;
       animation-timing-function: var(--skeleton-animation-timing, var(--skeleton-timing-default));
       animation-direction: normal;
@@ -69,4 +70,8 @@ export const skeletonStyles = (context, definition) => css `
         transform: translateX(100%);
       }
     }
-  `;
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        :host{
+          background-color: ${SystemColors.CanvasText};
+        }
+      `));

package/dist/esm/slider/slider.styles.js

@@ -2,16 +2,15 @@ import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
 import { heightNumber } from '../styles';
-import { controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, neutralForegroundRest, neutralStrokeActive, neutralStrokeHover, neutralStrokeRest, } from '../design-tokens';
+import { accentFillActive, accentFillHover, accentFillRest, controlCornerRadius, designUnit, disabledOpacity, fillColor, focusStrokeOuter, neutralFillRest, neutralFillStrongRest, neutralStrokeControlActive, neutralStrokeControlHover, neutralStrokeControlRest, neutralStrokeStrongRest, strokeWidth, } from '../design-tokens';
 export const sliderStyles = (context, definition) => css `
     ${display('inline-grid')} :host {
-      --thumb-size: calc(${heightNumber} * 0.5);
+      --thumb-size: calc((${heightNumber} / 2) + ${designUnit} + (${strokeWidth} * 2));
       --thumb-translate: calc(var(--thumb-size) * -0.5 + var(--track-width) / 2);
       --track-overhang: calc((${designUnit} / 2) * -1);
       --track-width: ${designUnit};
       align-items: center;
       width: 100%;
-      margin: calc(${designUnit} * 1px) 0;
       user-select: none;
       box-sizing: border-box;
       border-radius: calc(${controlCornerRadius} * 1px);
@@ -41,19 +40,47 @@ export const sliderStyles = (context, definition) => css `
       transition: all 0.2s ease;
     }
     .thumb-cursor {
+      display: flex;
+      position: relative;
       border: none;
       width: calc(var(--thumb-size) * 1px);
       height: calc(var(--thumb-size) * 1px);
-      background: ${neutralForegroundRest};
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlRest};
+      border: calc(${strokeWidth} * 1px) solid transparent;
+      border-radius: 50%;
+      box-sizing: border-box;
+    }
+    .thumb-cursor::after {
+      content: '';
+      display: block;
       border-radius: 50%;
+      width: 100%;
+      margin: 4px;
+      background: ${accentFillRest};
+    }
+    :host(:not(.disabled)) .thumb-cursor:hover::after {
+      background: ${accentFillHover};
+      margin: 3px;
     }
-    .thumb-cursor:hover {
-      background: ${neutralForegroundRest};
-      border-color: ${neutralStrokeHover};
+    :host(:not(.disabled)) .thumb-cursor:active::after {
+      background: ${accentFillActive};
+      margin: 5px;
     }
-    .thumb-cursor:active {
-      background: ${neutralForegroundRest};
-      border-color: ${neutralStrokeActive};
+    :host(:not(.disabled)) .thumb-cursor:hover {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlHover};
+    }
+    :host(:not(.disabled)) .thumb-cursor:active {
+      background: padding-box linear-gradient(${neutralFillRest}, ${neutralFillRest}),
+        border-box ${neutralStrokeControlActive};
+    }
+    .track-start {
+      background: ${accentFillRest};
+      position: absolute;
+      height: 100%;
+      left: 0;
+      border-radius: calc(${controlCornerRadius} * 1px);
     }
     :host(.horizontal) .thumb-container {
       transform: translateX(calc(var(--thumb-size) * 0.5px)) translateY(calc(var(--thumb-translate) * 1px));
@@ -77,7 +104,10 @@ export const sliderStyles = (context, definition) => css `
       height: 100%;
     }
     .track {
-      background: ${neutralStrokeRest};
+      background: ${neutralFillStrongRest};
+      border: 1px solid ${neutralStrokeStrongRest};
+      border-radius: 2px;
+      box-sizing: border-box;
       position: absolute;
     }
     :host(.vertical) {
@@ -85,6 +115,11 @@ export const sliderStyles = (context, definition) => css `
       min-height: calc(${designUnit} * 60px);
       min-width: calc(${designUnit} * 20px);
     }
+    :host(.vertical) .track-start {
+      height: auto;
+      width: 100%;
+      top: 0;
+    }
     :host(.disabled),
     :host(.readonly) {
       cursor: ${disabledCursor};
@@ -98,18 +133,23 @@ export const sliderStyles = (context, definition) => css `
           border-color: ${SystemColors.FieldText};
           background: ${SystemColors.FieldText};
         }
-        .thumb-cursor:hover,
-        .thumb-cursor:active {
+        :host(:not(.disabled)) .thumb-cursor:hover,
+        :host(:not(.disabled)) .thumb-cursor:active {
           background: ${SystemColors.Highlight};
         }
         .track {
           forced-color-adjust: none;
           background: ${SystemColors.FieldText};
         }
+        .thumb-cursor::after,
+        :host(:not(.disabled)) .thumb-cursor:hover::after,
+        :host(:not(.disabled)) .thumb-cursor:active::after {
+          background: ${SystemColors.Field};
+        }
         :host(:${focusVisible}) .thumb-cursor {
           background: ${SystemColors.Highlight};
           border-color: ${SystemColors.Highlight};
-          box-shadow: 0 0 0 2px ${SystemColors.Field}, 0 0 0 4px ${SystemColors.FieldText};
+          box-shadow: 0 0 0 1px ${SystemColors.Field}, 0 0 0 3px ${SystemColors.FieldText};
         }
         :host(.disabled) {
           opacity: 1;

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

@@ -1,8 +1,7 @@
 import { css } from '@microsoft/fast-element';
 import { SystemColors } from '@microsoft/fast-web-utilities';
 import { display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
-import { heightNumber } from '../styles';
-import { bodyFont, designUnit, disabledOpacity, neutralStrokeRest } from '../design-tokens';
+import { bodyFont, designUnit, disabledOpacity, neutralStrokeStrongRest, strokeWidth } from '../design-tokens';
 export const sliderLabelStyles = (context, definition) => css `
     ${display('block')} :host {
       font-family: ${bodyFont};
@@ -14,7 +13,7 @@ export const sliderLabelStyles = (context, definition) => css `
     :host(.horizontal) {
       align-self: start;
       grid-row: 2;
-      margin-top: -2px;
+      margin-top: -4px;
     }
     :host(.vertical) {
       justify-self: start;
@@ -43,9 +42,9 @@ export const sliderLabelStyles = (context, definition) => css `
       margin: 2px 0;
     }
     .mark {
-      width: calc((${designUnit} / 2) * 1px);
-      height: calc(${heightNumber} * 0.25 * 1px);
-      background: ${neutralStrokeRest};
+      width: calc(${strokeWidth} * 1px);
+      height: calc(${designUnit} * 1px);
+      background: ${neutralStrokeStrongRest};
       justify-self: center;
     }
     :host(.vertical) .mark {

package/dist/esm/styles/direction.js

@@ -57,7 +57,7 @@ class DirectionalStyleSheetBehaviorSubscription {
         this.attached = null;
     }
     handleChange({ target, token }) {
-        this.attach(token.getValueFor(target));
+        this.attach(token.getValueFor(this.source));
     }
     attach(direction) {
         if (this.attached !== this[direction]) {

package/dist/esm/styles/elevation.js

@@ -1,25 +1,74 @@
+import { DesignToken } from '@microsoft/fast-foundation';
 /**
  * Define shadow algorithms.
  *
  * TODO: The --background-luminance will need to be derived from JavaScript. For now
  * this is hard-coded to a 1, the relative luminance of pure white.
  * https://github.com/microsoft/fast/issues/2778
+ * opacity was `calc(.11 * (2 - var(--background-luminance, 1)))`
  *
  * @internal
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
-export const ambientShadow = '0 0 calc((var(--elevation) * 0.225px) + 2px) rgba(0, 0, 0, calc(.11 * (2 - var(--background-luminance, 1))))';
+export const ambientShadow = '0 0 2px rgba(0, 0, 0, 0.14)';
 /**
  * @internal
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
-export const directionalShadow = '0 calc(var(--elevation) * 0.4px) calc((var(--elevation) * 0.9px)) rgba(0, 0, 0, calc(.13 * (2 - var(--background-luminance, 1))))';
+export const directionalShadow = '0 calc(var(--elevation) * 0.5px) calc((var(--elevation) * 1px)) rgba(0, 0, 0, 0.2)';
 /**
  * Applies the box-shadow CSS rule set to the elevation formula.
  * Control this formula with the --elevation CSS Custom Property
  * by setting --elevation to a number.
  *
  * @public
- * @deprecated Will be replaced
+ * @deprecated Use elevationShadow design token
  */
 export const elevation = `box-shadow: ${ambientShadow}, ${directionalShadow};`;
+/**
+ * @public
+ */
+export const elevationShadowRecipe = DesignToken.create({
+    name: 'elevation-shadow',
+    cssCustomPropertyName: null,
+}).withDefault({
+    evaluate: (element, size, reference) => {
+        let ambientOpacity = 0.12;
+        let directionalOpacity = 0.14;
+        if (size > 16) {
+            ambientOpacity = 0.2;
+            directionalOpacity = 0.24;
+        }
+        const ambient = `0 0 2px rgba(0, 0, 0, ${ambientOpacity})`;
+        const directional = `0 calc(${size} * 0.5px) calc((${size} * 1px)) rgba(0, 0, 0, ${directionalOpacity})`;
+        return `${ambient}, ${directional}`;
+    },
+});
+/** @public */
+export const elevationShadowCardRestSize = DesignToken.create('elevation-shadow-card-rest-size').withDefault(4);
+/** @public */
+export const elevationShadowCardHoverSize = DesignToken.create('elevation-shadow-card-hover-size').withDefault(8);
+/** @public */
+export const elevationShadowCardActiveSize = DesignToken.create('elevation-shadow-card-active-size').withDefault(0);
+/** @public */
+export const elevationShadowCardFocusSize = DesignToken.create('elevation-shadow-card-focus-size').withDefault(8);
+/** @public */
+export const elevationShadowCardRest = DesignToken.create('elevation-shadow-card-rest').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardRestSize.getValueFor(element)));
+/** @public */
+export const elevationShadowCardHover = DesignToken.create('elevation-shadow-card-hover').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardHoverSize.getValueFor(element)));
+/** @public */
+export const elevationShadowCardActive = DesignToken.create('elevation-shadow-card-active').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardActiveSize.getValueFor(element)));
+/** @public */
+export const elevationShadowCardFocus = DesignToken.create('elevation-shadow-card-focus').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowCardFocusSize.getValueFor(element)));
+/** @public */
+export const elevationShadowTooltipSize = DesignToken.create('elevation-shadow-tooltip-size').withDefault(16);
+/** @public */
+export const elevationShadowTooltip = DesignToken.create('elevation-shadow-tooltip').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowTooltipSize.getValueFor(element)));
+/** @public */
+export const elevationShadowFlyoutSize = DesignToken.create('elevation-shadow-flyout-size').withDefault(32);
+/** @public */
+export const elevationShadowFlyout = DesignToken.create('elevation-shadow-flyout').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowFlyoutSize.getValueFor(element)));
+/** @public */
+export const elevationShadowDialogSize = DesignToken.create('elevation-shadow-dialog-size').withDefault(128);
+/** @public */
+export const elevationShadowDialog = DesignToken.create('elevation-shadow-dialog').withDefault((element) => elevationShadowRecipe.getValueFor(element).evaluate(element, elevationShadowDialogSize.getValueFor(element)));