@fluentui/web-components 1.5.6 → 1.6.3

package/dist/esm/design-tokens.js

@@ -25,168 +25,146 @@ import { neutralStrokeStrong as neutralStrokeStrongAlgorithm } from './color/rec
 import { accentBase, middleGrey } from './color/utilities/color-constants';
 import { StandardLuminance } from './color/utilities/base-layer-luminance';
 const { create } = DesignToken;
+// General tokens
 /** @public */
-export const accentFillRestDelta = create('accent-fill-rest-delta').withDefault(0);
+export const direction = create('direction').withDefault(Direction.ltr);
 /** @public */
-export const accentFillHoverDelta = create('accent-fill-hover-delta').withDefault(4);
+export const disabledOpacity = create('disabled-opacity').withDefault(0.3);
+// Density tokens
 /** @public */
-export const accentFillActiveDelta = create('accent-fill-active-delta').withDefault(-5);
+export const baseHeightMultiplier = create('base-height-multiplier').withDefault(8);
 /** @public */
-export const accentFillFocusDelta = create('accent-fill-focus-delta').withDefault(0);
+export const baseHorizontalSpacingMultiplier = create('base-horizontal-spacing-multiplier').withDefault(3);
 /** @public */
-export const accentForegroundRestDelta = create('accent-foreground-rest-delta').withDefault(0);
+export const density = create('density').withDefault(0);
 /** @public */
-export const accentForegroundHoverDelta = create('accent-foreground-hover-delta').withDefault(6);
+export const designUnit = create('design-unit').withDefault(4);
+// Appearance tokens
 /** @public */
-export const accentForegroundActiveDelta = create('accent-foreground-active-delta').withDefault(-4);
+export const controlCornerRadius = create('control-corner-radius').withDefault(4);
 /** @public */
-export const accentForegroundFocusDelta = create('accent-foreground-focus-delta').withDefault(0);
+export const layerCornerRadius = create('layer-corner-radius').withDefault(4);
 /** @public */
-export const bodyFont = create('body-font').withDefault('Segoe UI, sans-serif');
+export const strokeWidth = create('stroke-width').withDefault(1);
 /** @public */
-export const baseHeightMultiplier = create('base-height-multiplier').withDefault(8);
+export const focusStrokeWidth = create('focus-stroke-width').withDefault(2);
+// Typography values
 /** @public */
-export const baseHorizontalSpacingMultiplier = create('base-horizontal-spacing-multiplier').withDefault(3);
+export const bodyFont = create('body-font').withDefault('Segoe UI, sans-serif');
 /** @public */
-export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode);
+export const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px');
 /** @public */
-export const controlCornerRadius = create('control-corner-radius').withDefault(4);
-/** @public @deprecated Use controlCornerRadius */
-export const cornerRadius = controlCornerRadius;
+export const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px');
 /** @public */
-export const density = create('density').withDefault(0);
+export const typeRampMinus1FontSize = create('type-ramp-minus-1-font-size').withDefault('12px');
 /** @public */
-export const designUnit = create('design-unit').withDefault(4);
+export const typeRampMinus1LineHeight = create('type-ramp-minus-1-line-height').withDefault('16px');
 /** @public */
-export const direction = create('direction').withDefault(Direction.ltr);
+export const typeRampMinus2FontSize = create('type-ramp-minus-2-font-size').withDefault('10px');
 /** @public */
-export const disabledOpacity = create('disabled-opacity').withDefault(0.3);
+export const typeRampMinus2LineHeight = create('type-ramp-minus-2-line-height').withDefault('14px');
 /** @public */
-export const layerCornerRadius = create('layer-corner-radius').withDefault(4);
-/** @public @deprecated Use layerCornerRadius */
-export const elevatedCornerRadius = layerCornerRadius;
+export const typeRampPlus1FontSize = create('type-ramp-plus-1-font-size').withDefault('16px');
 /** @public */
-export const focusStrokeWidth = create('focus-stroke-width').withDefault(2);
-/** @public @deprecated Use focusStrokeWidth */
-export const focusOutlineWidth = focusStrokeWidth;
+export const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefault('22px');
 /** @public */
-export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0);
+export const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
 /** @public */
-export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3);
+export const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('28px');
 /** @public */
-export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7);
+export const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
 /** @public */
-export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0);
-/** @public @deprecated Use neutralFillInverseRestDelta */
-export const neutralContrastFillRestDelta = neutralFillInverseRestDelta;
-/** @public @deprecated Use neutralFillInverseHoverDelta */
-export const neutralContrastFillHoverDelta = neutralFillInverseHoverDelta;
-/** @public @deprecated Use neutralFillInverseActiveDelta */
-export const neutralContrastFillActiveDelta = neutralFillInverseActiveDelta;
-/** @public @deprecated Use neutralFillInverseFocusDelta */
-export const neutralContrastFillFocusDelta = neutralFillInverseFocusDelta;
+export const typeRampPlus3LineHeight = create('type-ramp-plus-3-line-height').withDefault('32px');
 /** @public */
-export const neutralStrokeDividerRestDelta = create('neutral-stroke-divider-rest-delta').withDefault(8);
-/** @public @deprecated Use neutralStrokeDividerRestDelta */
-export const neutralDividerRestDelta = neutralStrokeDividerRestDelta;
+export const typeRampPlus4FontSize = create('type-ramp-plus-4-font-size').withDefault('28px');
 /** @public */
-export const neutralFillActiveDelta = create('neutral-fill-active-delta').withDefault(5);
+export const typeRampPlus4LineHeight = create('type-ramp-plus-4-line-height').withDefault('36px');
 /** @public */
-export const neutralFillLayerRestDelta = create('neutral-fill-layer-rest-delta').withDefault(3);
-/** @public @deprecated Use neutralFillLayerRestDelta */
-export const neutralFillCardDelta = neutralFillLayerRestDelta;
+export const typeRampPlus5FontSize = create('type-ramp-plus-5-font-size').withDefault('32px');
 /** @public */
-export const neutralFillFocusDelta = create('neutral-fill-focus-delta').withDefault(0);
+export const typeRampPlus5LineHeight = create('type-ramp-plus-5-line-height').withDefault('40px');
 /** @public */
-export const neutralFillHoverDelta = create('neutral-fill-hover-delta').withDefault(10);
+export const typeRampPlus6FontSize = create('type-ramp-plus-6-font-size').withDefault('40px');
 /** @public */
-export const neutralFillInputActiveDelta = create('neutral-fill-input-active-delta').withDefault(0);
+export const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px');
+// Color recipe values
 /** @public */
-export const neutralFillInputFocusDelta = create('neutral-fill-input-focus-delta').withDefault(0);
+export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode);
 /** @public */
-export const neutralFillInputHoverDelta = create('neutral-fill-input-hover-delta').withDefault(0);
+export const accentFillRestDelta = create('accent-fill-rest-delta').withDefault(0);
 /** @public */
-export const neutralFillInputRestDelta = create('neutral-fill-input-rest-delta').withDefault(0);
+export const accentFillHoverDelta = create('accent-fill-hover-delta').withDefault(4);
 /** @public */
-export const neutralFillRestDelta = create('neutral-fill-rest-delta').withDefault(7);
+export const accentFillActiveDelta = create('accent-fill-active-delta').withDefault(-5);
 /** @public */
-export const neutralFillStealthActiveDelta = create('neutral-fill-stealth-active-delta').withDefault(3);
+export const accentFillFocusDelta = create('accent-fill-focus-delta').withDefault(0);
 /** @public */
-export const neutralFillStealthFocusDelta = create('neutral-fill-stealth-focus-delta').withDefault(0);
+export const accentForegroundRestDelta = create('accent-foreground-rest-delta').withDefault(0);
 /** @public */
-export const neutralFillStealthHoverDelta = create('neutral-fill-stealth-hover-delta').withDefault(5);
+export const accentForegroundHoverDelta = create('accent-foreground-hover-delta').withDefault(6);
 /** @public */
-export const neutralFillStealthRestDelta = create('neutral-fill-stealth-rest-delta').withDefault(0);
+export const accentForegroundActiveDelta = create('accent-foreground-active-delta').withDefault(-4);
 /** @public */
-export const neutralFillStrongRestDelta = create('neutral-fill-strong-rest-delta').withDefault(0);
+export const accentForegroundFocusDelta = create('accent-foreground-focus-delta').withDefault(0);
 /** @public */
-export const neutralFillStrongActiveDelta = create('neutral-fill-strong-active-delta').withDefault(-5);
+export const neutralFillRestDelta = create('neutral-fill-rest-delta').withDefault(7);
 /** @public */
-export const neutralFillStrongFocusDelta = create('neutral-fill-strong-focus-delta').withDefault(0);
+export const neutralFillHoverDelta = create('neutral-fill-hover-delta').withDefault(10);
 /** @public */
-export const neutralFillStrongHoverDelta = create('neutral-fill-strong-hover-delta').withDefault(8);
-/** @public @deprecated Use neutralFillStrongRestDelta */
-export const neutralFillToggleRestDelta = neutralFillStrongRestDelta;
-/** @public @deprecated Use neutralFillStrongHoverDelta */
-export const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta;
-/** @public @deprecated Use neutralFillStrongActiveDelta */
-export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta;
-/** @public @deprecated Use neutralFillStrongFocusDelta */
-export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta;
+export const neutralFillActiveDelta = create('neutral-fill-active-delta').withDefault(5);
 /** @public */
-export const neutralStrokeActiveDelta = create('neutral-stroke-active-delta').withDefault(16);
+export const neutralFillFocusDelta = create('neutral-fill-focus-delta').withDefault(0);
 /** @public */
-export const neutralStrokeFocusDelta = create('neutral-stroke-focus-delta').withDefault(25);
+export const neutralFillInputRestDelta = create('neutral-fill-input-rest-delta').withDefault(0);
 /** @public */
-export const neutralStrokeHoverDelta = create('neutral-stroke-hover-delta').withDefault(40);
+export const neutralFillInputHoverDelta = create('neutral-fill-input-hover-delta').withDefault(0);
 /** @public */
-export const neutralStrokeRestDelta = create('neutral-stroke-rest-delta').withDefault(25);
+export const neutralFillInputActiveDelta = create('neutral-fill-input-active-delta').withDefault(0);
 /** @public */
-export const neutralStrokeStrongHoverDelta = create('neutral-stroke-strong-hover-delta').withDefault(40);
+export const neutralFillInputFocusDelta = create('neutral-fill-input-focus-delta').withDefault(0);
 /** @public */
-export const neutralStrokeStrongActiveDelta = create('neutral-stroke-strong-active-delta').withDefault(16);
+export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0);
 /** @public */
-export const neutralStrokeStrongFocusDelta = create('neutral-stroke-strong-focus-delta').withDefault(25);
+export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3);
 /** @public */
-export const strokeWidth = create('stroke-width').withDefault(1);
-/** @public @deprecated Use strokeWidth */
-export const outlineWidth = strokeWidth;
+export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7);
 /** @public */
-export const typeRampBaseFontSize = create('type-ramp-base-font-size').withDefault('14px');
+export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0);
 /** @public */
-export const typeRampBaseLineHeight = create('type-ramp-base-line-height').withDefault('20px');
+export const neutralFillLayerRestDelta = create('neutral-fill-layer-rest-delta').withDefault(3);
 /** @public */
-export const typeRampMinus1FontSize = create('type-ramp-minus-1-font-size').withDefault('12px');
+export const neutralFillStealthRestDelta = create('neutral-fill-stealth-rest-delta').withDefault(0);
 /** @public */
-export const typeRampMinus1LineHeight = create('type-ramp-minus-1-line-height').withDefault('16px');
+export const neutralFillStealthHoverDelta = create('neutral-fill-stealth-hover-delta').withDefault(5);
 /** @public */
-export const typeRampMinus2FontSize = create('type-ramp-minus-2-font-size').withDefault('10px');
+export const neutralFillStealthActiveDelta = create('neutral-fill-stealth-active-delta').withDefault(3);
 /** @public */
-export const typeRampMinus2LineHeight = create('type-ramp-minus-2-line-height').withDefault('14px');
+export const neutralFillStealthFocusDelta = create('neutral-fill-stealth-focus-delta').withDefault(0);
 /** @public */
-export const typeRampPlus1FontSize = create('type-ramp-plus-1-font-size').withDefault('16px');
+export const neutralFillStrongRestDelta = create('neutral-fill-strong-rest-delta').withDefault(0);
 /** @public */
-export const typeRampPlus1LineHeight = create('type-ramp-plus-1-line-height').withDefault('22px');
+export const neutralFillStrongHoverDelta = create('neutral-fill-strong-hover-delta').withDefault(8);
 /** @public */
-export const typeRampPlus2FontSize = create('type-ramp-plus-2-font-size').withDefault('20px');
+export const neutralFillStrongActiveDelta = create('neutral-fill-strong-active-delta').withDefault(-5);
 /** @public */
-export const typeRampPlus2LineHeight = create('type-ramp-plus-2-line-height').withDefault('28px');
+export const neutralFillStrongFocusDelta = create('neutral-fill-strong-focus-delta').withDefault(0);
 /** @public */
-export const typeRampPlus3FontSize = create('type-ramp-plus-3-font-size').withDefault('24px');
+export const neutralStrokeRestDelta = create('neutral-stroke-rest-delta').withDefault(25);
 /** @public */
-export const typeRampPlus3LineHeight = create('type-ramp-plus-3-line-height').withDefault('32px');
+export const neutralStrokeHoverDelta = create('neutral-stroke-hover-delta').withDefault(40);
 /** @public */
-export const typeRampPlus4FontSize = create('type-ramp-plus-4-font-size').withDefault('28px');
+export const neutralStrokeActiveDelta = create('neutral-stroke-active-delta').withDefault(16);
 /** @public */
-export const typeRampPlus4LineHeight = create('type-ramp-plus-4-line-height').withDefault('36px');
+export const neutralStrokeFocusDelta = create('neutral-stroke-focus-delta').withDefault(25);
 /** @public */
-export const typeRampPlus5FontSize = create('type-ramp-plus-5-font-size').withDefault('32px');
+export const neutralStrokeDividerRestDelta = create('neutral-stroke-divider-rest-delta').withDefault(8);
 /** @public */
-export const typeRampPlus5LineHeight = create('type-ramp-plus-5-line-height').withDefault('40px');
+export const neutralStrokeStrongHoverDelta = create('neutral-stroke-strong-hover-delta').withDefault(40);
 /** @public */
-export const typeRampPlus6FontSize = create('type-ramp-plus-6-font-size').withDefault('40px');
+export const neutralStrokeStrongActiveDelta = create('neutral-stroke-strong-active-delta').withDefault(16);
 /** @public */
-export const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').withDefault('52px');
+export const neutralStrokeStrongFocusDelta = create('neutral-stroke-strong-focus-delta').withDefault(25);
+// Color recipes
 /** @public */
 export const neutralPalette = create({ name: 'neutral-palette', cssCustomPropertyName: null }).withDefault(PaletteRGB.create(middleGrey));
 /** @public */
@@ -221,8 +199,6 @@ export const neutralLayer1Recipe = create({
 });
 /** @public */
 export const neutralLayer1 = create('neutral-layer-1').withDefault((element) => neutralLayer1Recipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralLayer1 */
-export const neutralLayerL1 = neutralLayer1;
 // Neutral Layer 2
 /** @public */
 export const neutralLayer2Recipe = create({
@@ -233,8 +209,6 @@ export const neutralLayer2Recipe = create({
 });
 /** @public */
 export const neutralLayer2 = create('neutral-layer-2').withDefault((element) => neutralLayer2Recipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralLayer2 */
-export const neutralLayerL2 = neutralLayer2;
 // Neutral Layer 3
 /** @public */
 export const neutralLayer3Recipe = create({
@@ -245,8 +219,6 @@ export const neutralLayer3Recipe = create({
 });
 /** @public */
 export const neutralLayer3 = create('neutral-layer-3').withDefault((element) => neutralLayer3Recipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralLayer3 */
-export const neutralLayerL3 = neutralLayer3;
 // Neutral Layer 4
 /** @public */
 export const neutralLayer4Recipe = create({
@@ -257,8 +229,6 @@ export const neutralLayer4Recipe = create({
 });
 /** @public */
 export const neutralLayer4 = create('neutral-layer-4').withDefault((element) => neutralLayer4Recipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralLayer4 */
-export const neutralLayerL4 = neutralLayer4;
 /** @public */
 export const fillColor = create('fill-color').withDefault(element => neutralLayer1.getValueFor(element));
 var ContrastTarget;
@@ -302,30 +272,26 @@ export const foregroundOnAccentRecipe = create({
 });
 /** @public */
 export const foregroundOnAccentRest = create('foreground-on-accent-rest').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillRest.getValueFor(element)));
-/** @public @deprecated Use foregroundOnAccentRest */
-export const accentForegroundCut = foregroundOnAccentRest;
 /** @public */
 export const foregroundOnAccentHover = create('foreground-on-accent-hover').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)));
 /** @public */
 export const foregroundOnAccentActive = create('foreground-on-accent-active').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)));
 /** @public */
 export const foregroundOnAccentFocus = create('foreground-on-accent-focus').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)));
-/** @public */
+/** @public @deprecated Not used */
 export const foregroundOnAccentLargeRecipe = create({
     name: 'foreground-on-accent-large-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
     evaluate: (element, reference) => foregroundOnAccentByContrast(ContrastTarget.large)(element, reference),
 });
-/** @public */
+/** @public @deprecated Not used */
 export const foregroundOnAccentRestLarge = create('foreground-on-accent-rest-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use foregroundOnAccentRestLarge */
-export const accentForegroundCutLarge = foregroundOnAccentRestLarge;
-/** @public */
+/** @public @deprecated Not used */
 export const foregroundOnAccentHoverLarge = create('foreground-on-accent-hover-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)));
-/** @public */
+/** @public @deprecated Not used */
 export const foregroundOnAccentActiveLarge = create('foreground-on-accent-active-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)));
-/** @public */
+/** @public @deprecated Not used */
 export const foregroundOnAccentFocusLarge = create('foreground-on-accent-focus-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)));
 // Accent Foreground
 const accentForegroundByContrast = (contrast) => (element, reference) => accentForegroundAlgorithm(accentPalette.getValueFor(element), reference || fillColor.getValueFor(element), contrast, accentForegroundRestDelta.getValueFor(element), accentForegroundHoverDelta.getValueFor(element), accentForegroundActiveDelta.getValueFor(element), accentForegroundFocusDelta.getValueFor(element));
@@ -344,70 +310,64 @@ export const accentForegroundHover = create('accent-foreground-hover').withDefau
 export const accentForegroundActive = create('accent-foreground-active').withDefault((element) => accentForegroundRecipe.getValueFor(element).evaluate(element).active);
 /** @public */
 export const accentForegroundFocus = create('accent-foreground-focus').withDefault((element) => accentForegroundRecipe.getValueFor(element).evaluate(element).focus);
-// Neutral Divider
+// Neutral Fill
 /** @public */
-export const neutralStrokeDividerRecipe = create({
-    name: 'neutral-stroke-divider-recipe',
+export const neutralFillRecipe = create({
+    name: 'neutral-fill-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
-    evaluate: (element, reference) => neutralDividerAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeDividerRestDelta.getValueFor(element)),
+    evaluate: (element, reference) => neutralFillAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element)),
 });
 /** @public */
-export const neutralStrokeDividerRest = create('neutral-stroke-divider-rest').withDefault(element => neutralStrokeDividerRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralStrokeDividerRest */
-export const neutralDivider = neutralStrokeDividerRest;
-// Neutral Fill Layer
+export const neutralFillRest = create('neutral-fill-rest').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).rest);
 /** @public */
-export const neutralFillLayerRecipe = create({
-    name: 'neutral-fill-layer-recipe',
+export const neutralFillHover = create('neutral-fill-hover').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralFillActive = create('neutral-fill-active').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralFillFocus = create('neutral-fill-focus').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).focus);
+// Neutral Fill Input
+/** @public */
+export const neutralFillInputRecipe = create({
+    name: 'neutral-fill-input-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
-    evaluate: (element, reference) => neutralFillLayerAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
+    evaluate: (element, reference) => neutralFillInputAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element)),
 });
 /** @public */
-export const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use neutralFillLayerRest */
-export const neutralFillCard = neutralFillLayerRest;
-// Neutral Fill Inverse
+export const neutralFillInputRest = create('neutral-fill-input-rest').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).rest);
 /** @public */
+export const neutralFillInputHover = create('neutral-fill-input-hover').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).focus);
+/** @public */
+export const neutralFillInputActive = create('neutral-fill-input-active').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).active);
+// Neutral Fill Inverse
+/** @public @deprecated Not used */
 export const neutralFillInverseRecipe = create({
     name: 'neutral-fill-inverse-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
     evaluate: (element, reference) => neutralFillInverseAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInverseRestDelta.getValueFor(element), neutralFillInverseHoverDelta.getValueFor(element), neutralFillInverseActiveDelta.getValueFor(element), neutralFillInverseFocusDelta.getValueFor(element)),
 });
-/** @public */
+/** @public @deprecated Not used */
 export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).rest);
-/** @public */
+/** @public @deprecated Not used */
 export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).hover);
-/** @public */
+/** @public @deprecated Not used */
 export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).active);
-/** @public */
+/** @public @deprecated Not used */
 export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).focus);
-/** @public @deprecated Use neutralFillInverseRest */
-export const neutralContrastFillRest = neutralFillInverseRest;
-/** @public @deprecated Use neutralFillInverseHover */
-export const neutralContrastFillHover = neutralFillInverseHover;
-/** @public @deprecated Use neutralFillInverseActive */
-export const neutralContrastFillActive = neutralFillInverseActive;
-/** @public @deprecated Use neutralFillInverseFocus */
-export const neutralContrastFillFocus = neutralFillInverseFocus;
-// Neutral Fill Input
+// Neutral Fill Layer
 /** @public */
-export const neutralFillInputRecipe = create({
-    name: 'neutral-fill-input-recipe',
+export const neutralFillLayerRecipe = create({
+    name: 'neutral-fill-layer-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
-    evaluate: (element, reference) => neutralFillInputAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element)),
+    evaluate: (element, reference) => neutralFillLayerAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
-export const neutralFillInputRest = create('neutral-fill-input-rest').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).rest);
-/** @public */
-export const neutralFillInputHover = create('neutral-fill-input-hover').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).hover);
-/** @public */
-export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).focus);
-/** @public */
-export const neutralFillInputActive = create('neutral-fill-input-active').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).active);
+export const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element));
 // Neutral Fill Stealth
 /** @public */
 export const neutralFillStealthRecipe = create({
@@ -441,30 +401,52 @@ export const neutralFillStrongHover = create('neutral-fill-strong-hover').withDe
 export const neutralFillStrongActive = create('neutral-fill-strong-active').withDefault((element) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).active);
 /** @public */
 export const neutralFillStrongFocus = create('neutral-fill-strong-focus').withDefault((element) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).focus);
-/** @public @deprecated Use neutralFillStrongRest */
-export const neutralFillToggleRest = neutralFillStrongRest;
-/** @public @deprecated Use neutralFillStrongHover */
-export const neutralFillToggleHover = neutralFillStrongHover;
-/** @public @deprecated Use neutralFillStrongActive */
-export const neutralFillToggleActive = neutralFillStrongActive;
-/** @public @deprecated Use neutralFillStrongFocus */
-export const neutralFillToggleFocus = neutralFillStrongFocus;
-// Neutral Fill
+// Neutral Stroke
 /** @public */
-export const neutralFillRecipe = create({
-    name: 'neutral-fill-recipe',
+export const neutralStrokeRecipe = create({
+    name: 'neutral-stroke-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
-    evaluate: (element, reference) => neutralFillAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element)),
+    evaluate: (element) => {
+        return neutralStrokeAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element), neutralStrokeRestDelta.getValueFor(element), neutralStrokeHoverDelta.getValueFor(element), neutralStrokeActiveDelta.getValueFor(element), neutralStrokeFocusDelta.getValueFor(element));
+    },
 });
 /** @public */
-export const neutralFillRest = create('neutral-fill-rest').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).rest);
+export const neutralStrokeRest = create('neutral-stroke-rest').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).rest);
 /** @public */
-export const neutralFillHover = create('neutral-fill-hover').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).hover);
+export const neutralStrokeHover = create('neutral-stroke-hover').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).hover);
 /** @public */
-export const neutralFillActive = create('neutral-fill-active').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).active);
+export const neutralStrokeActive = create('neutral-stroke-active').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).active);
 /** @public */
-export const neutralFillFocus = create('neutral-fill-focus').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).focus);
+export const neutralStrokeFocus = create('neutral-stroke-focus').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).focus);
+// Neutral Stroke Divider
+/** @public */
+export const neutralStrokeDividerRecipe = create({
+    name: 'neutral-stroke-divider-recipe',
+    cssCustomPropertyName: null,
+}).withDefault({
+    evaluate: (element, reference) => neutralDividerAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeDividerRestDelta.getValueFor(element)),
+});
+/** @public */
+export const neutralStrokeDividerRest = create('neutral-stroke-divider-rest').withDefault(element => neutralStrokeDividerRecipe.getValueFor(element).evaluate(element));
+// Neutral Stroke Strong
+/** @public */
+export const neutralStrokeStrongRecipe = create({
+    name: 'neutral-stroke-strong-recipe',
+    cssCustomPropertyName: null,
+}).withDefault({
+    evaluate: (element) => {
+        return neutralStrokeStrongAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element), 3, neutralStrokeStrongHoverDelta.getValueFor(element), neutralStrokeStrongActiveDelta.getValueFor(element), neutralStrokeStrongFocusDelta.getValueFor(element));
+    },
+});
+/** @public */
+export const neutralStrokeStrongRest = create('neutral-stroke-strong-rest').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralStrokeStrongHover = create('neutral-stroke-strong-hover').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralStrokeStrongActive = create('neutral-stroke-strong-active').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralStrokeStrongFocus = create('neutral-stroke-strong-focus').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus);
 // Focus Stroke Outer
 /** @public */
 export const focusStrokeOuterRecipe = create({
@@ -475,8 +457,6 @@ export const focusStrokeOuterRecipe = create({
 });
 /** @public */
 export const focusStrokeOuter = create('focus-stroke-outer').withDefault((element) => focusStrokeOuterRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use focusStrokeOuter */
-export const neutralFocus = focusStrokeOuter;
 // Focus Stroke Inner
 /** @public */
 export const focusStrokeInnerRecipe = create({
@@ -487,18 +467,6 @@ export const focusStrokeInnerRecipe = create({
 });
 /** @public */
 export const focusStrokeInner = create('focus-stroke-inner').withDefault((element) => focusStrokeInnerRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Use focusStrokeInner */
-export const neutralFocusInnerAccent = focusStrokeInner;
-// Neutral Foreground Hint
-/** @public */
-export const neutralForegroundHintRecipe = create({
-    name: 'neutral-foreground-hint-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralForegroundHintAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
-});
-/** @public */
-export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element) => neutralForegroundHintRecipe.getValueFor(element).evaluate(element));
 // Neutral Foreground
 /** @public */
 export const neutralForegroundRecipe = create({
@@ -509,24 +477,81 @@ export const neutralForegroundRecipe = create({
 });
 /** @public */
 export const neutralForegroundRest = create('neutral-foreground-rest').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element));
-// Neutral Stroke
+// Neutral Foreground Hint
 /** @public */
-export const neutralStrokeRecipe = create({
-    name: 'neutral-stroke-recipe',
+export const neutralForegroundHintRecipe = create({
+    name: 'neutral-foreground-hint-recipe',
     cssCustomPropertyName: null,
 }).withDefault({
-    evaluate: (element) => {
-        return neutralStrokeAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element), neutralStrokeRestDelta.getValueFor(element), neutralStrokeHoverDelta.getValueFor(element), neutralStrokeActiveDelta.getValueFor(element), neutralStrokeFocusDelta.getValueFor(element));
-    },
+    evaluate: (element) => neutralForegroundHintAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
 });
 /** @public */
-export const neutralStrokeRest = create('neutral-stroke-rest').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).rest);
-/** @public */
-export const neutralStrokeHover = create('neutral-stroke-hover').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).hover);
-/** @public */
-export const neutralStrokeActive = create('neutral-stroke-active').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).active);
-/** @public */
-export const neutralStrokeFocus = create('neutral-stroke-focus').withDefault((element) => neutralStrokeRecipe.getValueFor(element).evaluate(element).focus);
+export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element) => neutralForegroundHintRecipe.getValueFor(element).evaluate(element));
+// Deprecated tokens
+/** @public @deprecated Use controlCornerRadius */
+export const cornerRadius = controlCornerRadius;
+/** @public @deprecated Use layerCornerRadius */
+export const elevatedCornerRadius = layerCornerRadius;
+/** @public @deprecated Use strokeWidth */
+export const outlineWidth = strokeWidth;
+/** @public @deprecated Use focusStrokeWidth */
+export const focusOutlineWidth = focusStrokeWidth;
+/** @public @deprecated Use neutralFillLayerRestDelta */
+export const neutralFillCardDelta = neutralFillLayerRestDelta;
+/** @public @deprecated Use neutralFillStrongRestDelta */
+export const neutralFillToggleRestDelta = neutralFillStrongRestDelta;
+/** @public @deprecated Use neutralFillStrongHoverDelta */
+export const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta;
+/** @public @deprecated Use neutralFillStrongActiveDelta */
+export const neutralFillToggleActiveDelta = neutralFillStrongActiveDelta;
+/** @public @deprecated Use neutralFillStrongFocusDelta */
+export const neutralFillToggleFocusDelta = neutralFillStrongFocusDelta;
+/** @public @deprecated Use neutralFillInverseRestDelta */
+export const neutralContrastFillRestDelta = neutralFillInverseRestDelta;
+/** @public @deprecated Use neutralFillInverseHoverDelta */
+export const neutralContrastFillHoverDelta = neutralFillInverseHoverDelta;
+/** @public @deprecated Use neutralFillInverseActiveDelta */
+export const neutralContrastFillActiveDelta = neutralFillInverseActiveDelta;
+/** @public @deprecated Use neutralFillInverseFocusDelta */
+export const neutralContrastFillFocusDelta = neutralFillInverseFocusDelta;
+/** @public @deprecated Use neutralStrokeDividerRestDelta */
+export const neutralDividerRestDelta = neutralStrokeDividerRestDelta;
+/** @public @deprecated Use neutralLayer1 */
+export const neutralLayerL1 = neutralLayer1;
+/** @public @deprecated Use neutralLayer2 */
+export const neutralLayerL2 = neutralLayer2;
+/** @public @deprecated Use neutralLayer3 */
+export const neutralLayerL3 = neutralLayer3;
+/** @public @deprecated Use neutralLayer4 */
+export const neutralLayerL4 = neutralLayer4;
+/** @public @deprecated Use foregroundOnAccentRest */
+export const accentForegroundCut = foregroundOnAccentRest;
+/** @public @deprecated Use foregroundOnAccentRestLarge */
+export const accentForegroundCutLarge = foregroundOnAccentRestLarge;
+/** @public @deprecated Use neutralStrokeDividerRest */
+export const neutralDivider = neutralStrokeDividerRest;
+/** @public @deprecated Use neutralFillLayerRest */
+export const neutralFillCard = neutralFillLayerRest;
+/** @public @deprecated Use neutralFillInverseRest */
+export const neutralContrastFillRest = neutralFillInverseRest;
+/** @public @deprecated Use neutralFillInverseHover */
+export const neutralContrastFillHover = neutralFillInverseHover;
+/** @public @deprecated Use neutralFillInverseActive */
+export const neutralContrastFillActive = neutralFillInverseActive;
+/** @public @deprecated Use neutralFillInverseFocus */
+export const neutralContrastFillFocus = neutralFillInverseFocus;
+/** @public @deprecated Use neutralFillStrongRest */
+export const neutralFillToggleRest = neutralFillStrongRest;
+/** @public @deprecated Use neutralFillStrongHover */
+export const neutralFillToggleHover = neutralFillStrongHover;
+/** @public @deprecated Use neutralFillStrongActive */
+export const neutralFillToggleActive = neutralFillStrongActive;
+/** @public @deprecated Use neutralFillStrongFocus */
+export const neutralFillToggleFocus = neutralFillStrongFocus;
+/** @public @deprecated Use focusStrokeOuter */
+export const neutralFocus = focusStrokeOuter;
+/** @public @deprecated Use focusStrokeInner */
+export const neutralFocusInnerAccent = focusStrokeInner;
 /** @public @deprecated Use neutralStrokeRest */
 export const neutralOutlineRest = neutralStrokeRest;
 /** @public @deprecated Use neutralStrokeHover */
@@ -535,21 +560,3 @@ export const neutralOutlineHover = neutralStrokeHover;
 export const neutralOutlineActive = neutralStrokeActive;
 /** @public @deprecated Use neutralStrokeFocus */
 export const neutralOutlineFocus = neutralStrokeFocus;
-// Neutral Stroke Strong
-/** @public */
-export const neutralStrokeStrongRecipe = create({
-    name: 'neutral-stroke-strong-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => {
-        return neutralStrokeStrongAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element), 3, neutralStrokeStrongHoverDelta.getValueFor(element), neutralStrokeStrongActiveDelta.getValueFor(element), neutralStrokeStrongFocusDelta.getValueFor(element));
-    },
-});
-/** @public */
-export const neutralStrokeStrongRest = create('neutral-stroke-strong-rest').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).rest);
-/** @public */
-export const neutralStrokeStrongHover = create('neutral-stroke-strong-hover').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).hover);
-/** @public */
-export const neutralStrokeStrongActive = create('neutral-stroke-strong-active').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).active);
-/** @public */
-export const neutralStrokeStrongFocus = create('neutral-stroke-strong-focus').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus);