@fluentui/web-components 1.6.3 → 2.1.0

package/dist/esm/design-tokens.js

@@ -1,30 +1,26 @@
 import { DesignToken } from '@microsoft/fast-foundation';
 import { Direction } from '@microsoft/fast-web-utilities';
 import { PaletteRGB } from './color/palette';
-import { accentFill as accentFillAlgorithm } from './color/recipes/accent-fill';
-import { accentForeground as accentForegroundAlgorithm } from './color/recipes/accent-foreground';
-import { foregroundOnAccent as foregroundOnAccentAlgorithm } from './color/recipes/foreground-on-accent';
-import { neutralFillInverse as neutralFillInverseAlgorithm } from './color/recipes/neutral-fill-inverse';
-import { neutralDivider as neutralDividerAlgorithm } from './color/recipes/neutral-divider';
-import { neutralFill as neutralFillAlgorithm } from './color/recipes/neutral-fill';
-import { neutralFillInput as neutralFillInputAlgorithm } from './color/recipes/neutral-fill-input';
-import { neutralFillLayer as neutralFillLayerAlgorithm } from './color/recipes/neutral-fill-layer';
-import { neutralFillStealth as neutralFillStealthAlgorithm } from './color/recipes/neutral-fill-stealth';
-import { neutralFillContrast as neutralFillContrastAlgorithm } from './color/recipes/neutral-fill-contrast';
+import { foregroundOnAccentSet as foregroundOnAccentSetAlgorithm } from './color/recipes/foreground-on-accent';
+import { gradientShadowStroke as gradientShadowStrokeAlgorithm } from './color/recipes/gradient-shadow-stroke';
+import { underlineStroke as underlineStrokeAlgorithm } from './color/recipes/underline-stroke';
+import { contrastSwatch } from './color/recipes/contrast-swatch';
+import { contrastAndDeltaSwatchSet, contrastAndDeltaSwatchSetByLuminance, } from './color/recipes/contrast-and-delta-swatch-set';
+import { deltaSwatch } from './color/recipes/delta-swatch';
+import { deltaSwatchSet, deltaSwatchSetByLuminance } from './color/recipes/delta-swatch-set';
 import { focusStrokeInner as focusStrokeInnerAlgorithm, focusStrokeOuter as focusStrokeOuterAlgorithm, } from './color/recipes/focus-stroke';
-import { neutralForeground as neutralForegroundAlgorithm } from './color/recipes/neutral-foreground';
-import { neutralForegroundHint as neutralForegroundHintAlgorithm } from './color/recipes/neutral-foreground-hint';
-import { neutralLayerCardContainer as neutralLayerCardContainerAlgorithm } from './color/recipes/neutral-layer-card-container';
 import { neutralLayerFloating as neutralLayerFloatingAlgorithm } from './color/recipes/neutral-layer-floating';
 import { neutralLayer1 as neutralLayer1Algorithm } from './color/recipes/neutral-layer-1';
 import { neutralLayer2 as neutralLayer2Algorithm } from './color/recipes/neutral-layer-2';
 import { neutralLayer3 as neutralLayer3Algorithm } from './color/recipes/neutral-layer-3';
 import { neutralLayer4 as neutralLayer4Algorithm } from './color/recipes/neutral-layer-4';
-import { neutralStroke as neutralStrokeAlgorithm } from './color/recipes/neutral-stroke';
-import { neutralStrokeStrong as neutralStrokeStrongAlgorithm } from './color/recipes/neutral-stroke-strong';
 import { accentBase, middleGrey } from './color/utilities/color-constants';
 import { StandardLuminance } from './color/utilities/base-layer-luminance';
+import { directionByIsDark } from './color/utilities/direction-by-is-dark';
 const { create } = DesignToken;
+function createNonCss(name) {
+    return DesignToken.create({ name, cssCustomPropertyName: null });
+}
 // General tokens
 /** @public */
 export const direction = create('direction').withDefault(Direction.ltr);
@@ -43,7 +39,7 @@ export const designUnit = create('design-unit').withDefault(4);
 /** @public */
 export const controlCornerRadius = create('control-corner-radius').withDefault(4);
 /** @public */
-export const layerCornerRadius = create('layer-corner-radius').withDefault(4);
+export const layerCornerRadius = create('layer-corner-radius').withDefault(8);
 /** @public */
 export const strokeWidth = create('stroke-width').withDefault(1);
 /** @public */
@@ -91,141 +87,155 @@ export const typeRampPlus6LineHeight = create('type-ramp-plus-6-line-height').wi
 /** @public */
 export const baseLayerLuminance = create('base-layer-luminance').withDefault(StandardLuminance.LightMode);
 /** @public */
-export const accentFillRestDelta = create('accent-fill-rest-delta').withDefault(0);
+export const accentFillRestDelta = createNonCss('accent-fill-rest-delta').withDefault(0);
 /** @public */
-export const accentFillHoverDelta = create('accent-fill-hover-delta').withDefault(4);
+export const accentFillHoverDelta = createNonCss('accent-fill-hover-delta').withDefault(-2);
 /** @public */
-export const accentFillActiveDelta = create('accent-fill-active-delta').withDefault(-5);
+export const accentFillActiveDelta = createNonCss('accent-fill-active-delta').withDefault(-5);
 /** @public */
-export const accentFillFocusDelta = create('accent-fill-focus-delta').withDefault(0);
+export const accentFillFocusDelta = createNonCss('accent-fill-focus-delta').withDefault(0);
 /** @public */
-export const accentForegroundRestDelta = create('accent-foreground-rest-delta').withDefault(0);
+export const accentForegroundRestDelta = createNonCss('accent-foreground-rest-delta').withDefault(0);
 /** @public */
-export const accentForegroundHoverDelta = create('accent-foreground-hover-delta').withDefault(6);
+export const accentForegroundHoverDelta = createNonCss('accent-foreground-hover-delta').withDefault(3);
 /** @public */
-export const accentForegroundActiveDelta = create('accent-foreground-active-delta').withDefault(-4);
+export const accentForegroundActiveDelta = createNonCss('accent-foreground-active-delta').withDefault(-8);
 /** @public */
-export const accentForegroundFocusDelta = create('accent-foreground-focus-delta').withDefault(0);
+export const accentForegroundFocusDelta = createNonCss('accent-foreground-focus-delta').withDefault(0);
 /** @public */
-export const neutralFillRestDelta = create('neutral-fill-rest-delta').withDefault(7);
+export const neutralFillRestDelta = createNonCss('neutral-fill-rest-delta').withDefault(-1);
 /** @public */
-export const neutralFillHoverDelta = create('neutral-fill-hover-delta').withDefault(10);
+export const neutralFillHoverDelta = createNonCss('neutral-fill-hover-delta').withDefault(1);
 /** @public */
-export const neutralFillActiveDelta = create('neutral-fill-active-delta').withDefault(5);
+export const neutralFillActiveDelta = createNonCss('neutral-fill-active-delta').withDefault(0);
 /** @public */
-export const neutralFillFocusDelta = create('neutral-fill-focus-delta').withDefault(0);
+export const neutralFillFocusDelta = createNonCss('neutral-fill-focus-delta').withDefault(0);
 /** @public */
-export const neutralFillInputRestDelta = create('neutral-fill-input-rest-delta').withDefault(0);
+export const neutralFillInputRestDelta = createNonCss('neutral-fill-input-rest-delta').withDefault(-1);
 /** @public */
-export const neutralFillInputHoverDelta = create('neutral-fill-input-hover-delta').withDefault(0);
+export const neutralFillInputHoverDelta = createNonCss('neutral-fill-input-hover-delta').withDefault(1);
 /** @public */
-export const neutralFillInputActiveDelta = create('neutral-fill-input-active-delta').withDefault(0);
+export const neutralFillInputActiveDelta = createNonCss('neutral-fill-input-active-delta').withDefault(0);
 /** @public */
-export const neutralFillInputFocusDelta = create('neutral-fill-input-focus-delta').withDefault(0);
+export const neutralFillInputFocusDelta = createNonCss('neutral-fill-input-focus-delta').withDefault(-2);
 /** @public */
-export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0);
+export const neutralFillInputAltRestDelta = createNonCss('neutral-fill-input-alt-rest-delta').withDefault(2);
 /** @public */
-export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3);
+export const neutralFillInputAltHoverDelta = createNonCss('neutral-fill-input-alt-hover-delta').withDefault(4);
 /** @public */
-export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7);
+export const neutralFillInputAltActiveDelta = createNonCss('neutral-fill-input-alt-active-delta').withDefault(6);
 /** @public */
-export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0);
+export const neutralFillInputAltFocusDelta = createNonCss('neutral-fill-input-alt-focus-delta').withDefault(2);
+/** @public */
+export const neutralFillLayerRestDelta = createNonCss('neutral-fill-layer-rest-delta').withDefault(-2);
+/** @public */
+export const neutralFillLayerHoverDelta = createNonCss('neutral-fill-layer-hover-delta').withDefault(-3);
+/** @public */
+export const neutralFillLayerActiveDelta = createNonCss('neutral-fill-layer-active-delta').withDefault(-3);
+/** @public */
+export const neutralFillLayerAltRestDelta = createNonCss('neutral-fill-layer-alt-rest-delta').withDefault(-1);
+/** @public */
+export const neutralFillSecondaryRestDelta = createNonCss('neutral-fill-secondary-rest-delta').withDefault(3);
+/** @public */
+export const neutralFillSecondaryHoverDelta = createNonCss('neutral-fill-secondary-hover-delta').withDefault(2);
+/** @public */
+export const neutralFillSecondaryActiveDelta = createNonCss('neutral-fill-secondary-active-delta').withDefault(1);
+/** @public */
+export const neutralFillSecondaryFocusDelta = createNonCss('neutral-fill-secondary-focus-delta').withDefault(3);
+/** @public */
+export const neutralFillStealthRestDelta = createNonCss('neutral-fill-stealth-rest-delta').withDefault(0);
+/** @public */
+export const neutralFillStealthHoverDelta = createNonCss('neutral-fill-stealth-hover-delta').withDefault(3);
+/** @public */
+export const neutralFillStealthActiveDelta = createNonCss('neutral-fill-stealth-active-delta').withDefault(2);
+/** @public */
+export const neutralFillStealthFocusDelta = createNonCss('neutral-fill-stealth-focus-delta').withDefault(0);
+/** @public */
+export const neutralFillStrongRestDelta = createNonCss('neutral-fill-strong-rest-delta').withDefault(0);
+/** @public */
+export const neutralFillStrongHoverDelta = createNonCss('neutral-fill-strong-hover-delta').withDefault(8);
 /** @public */
-export const neutralFillLayerRestDelta = create('neutral-fill-layer-rest-delta').withDefault(3);
+export const neutralFillStrongActiveDelta = createNonCss('neutral-fill-strong-active-delta').withDefault(-5);
 /** @public */
-export const neutralFillStealthRestDelta = create('neutral-fill-stealth-rest-delta').withDefault(0);
+export const neutralFillStrongFocusDelta = createNonCss('neutral-fill-strong-focus-delta').withDefault(0);
 /** @public */
-export const neutralFillStealthHoverDelta = create('neutral-fill-stealth-hover-delta').withDefault(5);
+export const neutralStrokeRestDelta = createNonCss('neutral-stroke-rest-delta').withDefault(8);
 /** @public */
-export const neutralFillStealthActiveDelta = create('neutral-fill-stealth-active-delta').withDefault(3);
+export const neutralStrokeHoverDelta = createNonCss('neutral-stroke-hover-delta').withDefault(12);
 /** @public */
-export const neutralFillStealthFocusDelta = create('neutral-fill-stealth-focus-delta').withDefault(0);
+export const neutralStrokeActiveDelta = createNonCss('neutral-stroke-active-delta').withDefault(6);
 /** @public */
-export const neutralFillStrongRestDelta = create('neutral-fill-strong-rest-delta').withDefault(0);
+export const neutralStrokeFocusDelta = createNonCss('neutral-stroke-focus-delta').withDefault(8);
 /** @public */
-export const neutralFillStrongHoverDelta = create('neutral-fill-strong-hover-delta').withDefault(8);
+export const neutralStrokeControlRestDelta = createNonCss('neutral-stroke-control-rest-delta').withDefault(3);
 /** @public */
-export const neutralFillStrongActiveDelta = create('neutral-fill-strong-active-delta').withDefault(-5);
+export const neutralStrokeControlHoverDelta = createNonCss('neutral-stroke-control-hover-delta').withDefault(5);
 /** @public */
-export const neutralFillStrongFocusDelta = create('neutral-fill-strong-focus-delta').withDefault(0);
+export const neutralStrokeControlActiveDelta = createNonCss('neutral-stroke-control-active-delta').withDefault(5);
 /** @public */
-export const neutralStrokeRestDelta = create('neutral-stroke-rest-delta').withDefault(25);
+export const neutralStrokeControlFocusDelta = createNonCss('neutral-stroke-control-focus-delta').withDefault(5);
 /** @public */
-export const neutralStrokeHoverDelta = create('neutral-stroke-hover-delta').withDefault(40);
+export const neutralStrokeDividerRestDelta = createNonCss('neutral-stroke-divider-rest-delta').withDefault(4);
 /** @public */
-export const neutralStrokeActiveDelta = create('neutral-stroke-active-delta').withDefault(16);
+export const neutralStrokeLayerRestDelta = createNonCss('neutral-stroke-layer-rest-delta').withDefault(3);
 /** @public */
-export const neutralStrokeFocusDelta = create('neutral-stroke-focus-delta').withDefault(25);
+export const neutralStrokeLayerHoverDelta = createNonCss('neutral-stroke-layer-hover-delta').withDefault(3);
 /** @public */
-export const neutralStrokeDividerRestDelta = create('neutral-stroke-divider-rest-delta').withDefault(8);
+export const neutralStrokeLayerActiveDelta = createNonCss('neutral-stroke-layer-active-delta').withDefault(3);
 /** @public */
-export const neutralStrokeStrongHoverDelta = create('neutral-stroke-strong-hover-delta').withDefault(40);
+export const neutralStrokeStrongHoverDelta = createNonCss('neutral-stroke-strong-hover-delta').withDefault(0);
 /** @public */
-export const neutralStrokeStrongActiveDelta = create('neutral-stroke-strong-active-delta').withDefault(16);
+export const neutralStrokeStrongActiveDelta = createNonCss('neutral-stroke-strong-active-delta').withDefault(0);
 /** @public */
-export const neutralStrokeStrongFocusDelta = create('neutral-stroke-strong-focus-delta').withDefault(25);
+export const neutralStrokeStrongFocusDelta = createNonCss('neutral-stroke-strong-focus-delta').withDefault(0);
 // Color recipes
 /** @public */
-export const neutralPalette = create({ name: 'neutral-palette', cssCustomPropertyName: null }).withDefault(PaletteRGB.create(middleGrey));
+export const neutralBaseColor = create('neutral-base-color').withDefault(middleGrey);
 /** @public */
-export const accentPalette = create({ name: 'accent-palette', cssCustomPropertyName: null }).withDefault(PaletteRGB.create(accentBase));
+export const neutralPalette = createNonCss('neutral-palette').withDefault((element) => PaletteRGB.from(neutralBaseColor.getValueFor(element)));
+/** @public */
+export const accentBaseColor = create('accent-base-color').withDefault(accentBase);
+/** @public */
+export const accentPalette = createNonCss('accent-palette').withDefault((element) => PaletteRGB.from(accentBaseColor.getValueFor(element)));
 // Neutral Layer Card Container
 /** @public */
-export const neutralLayerCardContainerRecipe = create({
-    name: 'neutral-layer-card-container-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralLayerCardContainerAlgorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
+export const neutralLayerCardContainerRecipe = createNonCss('neutral-layer-card-container-recipe').withDefault({
+    evaluate: (element) => neutralLayer2Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralLayerCardContainer = create('neutral-layer-card-container').withDefault((element) => neutralLayerCardContainerRecipe.getValueFor(element).evaluate(element));
 // Neutral Layer Floating
 /** @public */
-export const neutralLayerFloatingRecipe = create({
-    name: 'neutral-layer-floating-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
+export const neutralLayerFloatingRecipe = createNonCss('neutral-layer-floating-recipe').withDefault({
     evaluate: (element) => neutralLayerFloatingAlgorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralLayerFloating = create('neutral-layer-floating').withDefault((element) => neutralLayerFloatingRecipe.getValueFor(element).evaluate(element));
 // Neutral Layer 1
 /** @public */
-export const neutralLayer1Recipe = create({
-    name: 'neutral-layer-1-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
+export const neutralLayer1Recipe = createNonCss('neutral-layer-1-recipe').withDefault({
     evaluate: (element) => neutralLayer1Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element)),
 });
 /** @public */
 export const neutralLayer1 = create('neutral-layer-1').withDefault((element) => neutralLayer1Recipe.getValueFor(element).evaluate(element));
 // Neutral Layer 2
 /** @public */
-export const neutralLayer2Recipe = create({
-    name: 'neutral-layer-2-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralLayer2Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element)),
+export const neutralLayer2Recipe = createNonCss('neutral-layer-2-recipe').withDefault({
+    evaluate: (element) => neutralLayer2Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralLayer2 = create('neutral-layer-2').withDefault((element) => neutralLayer2Recipe.getValueFor(element).evaluate(element));
 // Neutral Layer 3
 /** @public */
-export const neutralLayer3Recipe = create({
-    name: 'neutral-layer-3-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralLayer3Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element)),
+export const neutralLayer3Recipe = createNonCss('neutral-layer-3-recipe').withDefault({
+    evaluate: (element) => neutralLayer3Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralLayer3 = create('neutral-layer-3').withDefault((element) => neutralLayer3Recipe.getValueFor(element).evaluate(element));
 // Neutral Layer 4
 /** @public */
-export const neutralLayer4Recipe = create({
-    name: 'neutral-layer-4-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralLayer4Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element)),
+export const neutralLayer4Recipe = createNonCss('neutral-layer-4-recipe').withDefault({
+    evaluate: (element) => neutralLayer4Algorithm(neutralPalette.getValueFor(element), baseLayerLuminance.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralLayer4 = create('neutral-layer-4').withDefault((element) => neutralLayer4Recipe.getValueFor(element).evaluate(element));
@@ -234,16 +244,12 @@ export const fillColor = create('fill-color').withDefault(element => neutralLaye
 var ContrastTarget;
 (function (ContrastTarget) {
     ContrastTarget[ContrastTarget["normal"] = 4.5] = "normal";
-    ContrastTarget[ContrastTarget["large"] = 7] = "large";
+    ContrastTarget[ContrastTarget["large"] = 3] = "large";
 })(ContrastTarget || (ContrastTarget = {}));
 // Accent Fill
-const accentFillByContrast = (contrast) => (element, reference) => accentFillAlgorithm(accentPalette.getValueFor(element), neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element));
 /** @public */
-export const accentFillRecipe = create({
-    name: 'accent-fill-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => accentFillByContrast(ContrastTarget.normal)(element, reference),
+export const accentFillRecipe = createNonCss('accent-fill-recipe').withDefault({
+    evaluate: (element, reference) => contrastAndDeltaSwatchSetByLuminance(accentPalette.getValueFor(element), reference || fillColor.getValueFor(element), 5, accentFillRestDelta.getValueFor(element), accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), undefined, 8, accentFillRestDelta.getValueFor(element), accentFillHoverDelta.getValueFor(element), accentFillActiveDelta.getValueFor(element), accentFillFocusDelta.getValueFor(element), undefined),
 });
 /** @public */
 export const accentFillRest = create('accent-fill-rest').withDefault((element) => {
@@ -262,45 +268,22 @@ export const accentFillFocus = create('accent-fill-focus').withDefault((element)
     return accentFillRecipe.getValueFor(element).evaluate(element).focus;
 });
 // Foreground On Accent
-const foregroundOnAccentByContrast = (contrast) => (element, reference) => foregroundOnAccentAlgorithm(reference || accentFillRest.getValueFor(element), contrast);
 /** @public */
-export const foregroundOnAccentRecipe = create({
-    name: 'foreground-on-accent-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => foregroundOnAccentByContrast(ContrastTarget.normal)(element, reference),
+export const foregroundOnAccentRecipe = createNonCss('foreground-on-accent-recipe').withDefault({
+    evaluate: (element) => foregroundOnAccentSetAlgorithm(accentFillRest.getValueFor(element), accentFillHover.getValueFor(element), accentFillActive.getValueFor(element), accentFillFocus.getValueFor(element), ContrastTarget.normal),
 });
 /** @public */
-export const foregroundOnAccentRest = create('foreground-on-accent-rest').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillRest.getValueFor(element)));
+export const foregroundOnAccentRest = create('foreground-on-accent-rest').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).rest);
 /** @public */
-export const foregroundOnAccentHover = create('foreground-on-accent-hover').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)));
+export const foregroundOnAccentHover = create('foreground-on-accent-hover').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).hover);
 /** @public */
-export const foregroundOnAccentActive = create('foreground-on-accent-active').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)));
+export const foregroundOnAccentActive = create('foreground-on-accent-active').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).active);
 /** @public */
-export const foregroundOnAccentFocus = create('foreground-on-accent-focus').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)));
-/** @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 @deprecated Not used */
-export const foregroundOnAccentRestLarge = create('foreground-on-accent-rest-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element));
-/** @public @deprecated Not used */
-export const foregroundOnAccentHoverLarge = create('foreground-on-accent-hover-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)));
-/** @public @deprecated Not used */
-export const foregroundOnAccentActiveLarge = create('foreground-on-accent-active-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)));
-/** @public @deprecated Not used */
-export const foregroundOnAccentFocusLarge = create('foreground-on-accent-focus-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)));
+export const foregroundOnAccentFocus = create('foreground-on-accent-focus').withDefault((element) => foregroundOnAccentRecipe.getValueFor(element).evaluate(element).focus);
 // 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));
 /** @public */
-export const accentForegroundRecipe = create({
-    name: 'accent-foreground-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => accentForegroundByContrast(ContrastTarget.normal)(element, reference),
+export const accentForegroundRecipe = createNonCss('accent-foreground-recipe').withDefault({
+    evaluate: (element, reference) => contrastAndDeltaSwatchSet(accentPalette.getValueFor(element), reference || fillColor.getValueFor(element), 9.5, accentForegroundRestDelta.getValueFor(element), accentForegroundHoverDelta.getValueFor(element), accentForegroundActiveDelta.getValueFor(element), accentForegroundFocusDelta.getValueFor(element)),
 });
 /** @public */
 export const accentForegroundRest = create('accent-foreground-rest').withDefault((element) => accentForegroundRecipe.getValueFor(element).evaluate(element).rest);
@@ -310,13 +293,25 @@ 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);
+// Accent Stroke Control
+/** @public */
+export const accentStrokeControlRecipe = createNonCss('accent-stroke-control-recipe').withDefault({
+    evaluate: (element, reference) => {
+        return gradientShadowStrokeAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), -3, -3, -3, -3, 10, 1, undefined, true);
+    },
+});
+/** @public */
+export const accentStrokeControlRest = create('accent-stroke-control-rest').withDefault((element) => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillRest.getValueFor(element)).rest);
+/** @public */
+export const accentStrokeControlHover = create('accent-stroke-control-hover').withDefault((element) => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)).hover);
+/** @public */
+export const accentStrokeControlActive = create('accent-stroke-control-active').withDefault((element) => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)).active);
+/** @public */
+export const accentStrokeControlFocus = create('accent-stroke-control-focus').withDefault((element) => accentStrokeControlRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)).focus);
 // Neutral Fill
 /** @public */
-export const neutralFillRecipe = create({
-    name: 'neutral-fill-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)),
+export const neutralFillRecipe = createNonCss('neutral-fill-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSetByLuminance(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element), undefined, 2, 3, 1, 2, undefined),
 });
 /** @public */
 export const neutralFillRest = create('neutral-fill-rest').withDefault((element) => neutralFillRecipe.getValueFor(element).evaluate(element).rest);
@@ -328,53 +323,65 @@ export const neutralFillActive = create('neutral-fill-active').withDefault((elem
 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) => neutralFillInputAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element)),
+export const neutralFillInputRecipe = createNonCss('neutral-fill-input-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSetByLuminance(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputRestDelta.getValueFor(element), neutralFillInputHoverDelta.getValueFor(element), neutralFillInputActiveDelta.getValueFor(element), neutralFillInputFocusDelta.getValueFor(element), undefined, 2, 3, 1, 0, undefined),
 });
 /** @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 neutralFillInputActive = create('neutral-fill-input-active').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
 export const neutralFillInputFocus = create('neutral-fill-input-focus').withDefault((element) => neutralFillInputRecipe.getValueFor(element).evaluate(element).focus);
+// Neutral Fill Input Alt
 /** @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)),
+export const neutralFillInputAltRecipe = createNonCss('neutral-fill-input-alt-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSetByLuminance(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element), neutralFillInputAltHoverDelta.getValueFor(element), neutralFillInputAltActiveDelta.getValueFor(element), neutralFillInputAltFocusDelta.getValueFor(element), 1, neutralFillInputAltRestDelta.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element) - neutralFillInputAltHoverDelta.getValueFor(element), neutralFillInputAltRestDelta.getValueFor(element) - neutralFillInputAltActiveDelta.getValueFor(element), neutralFillInputAltFocusDelta.getValueFor(element), 1),
 });
-/** @public @deprecated Not used */
-export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).rest);
-/** @public @deprecated Not used */
-export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).hover);
-/** @public @deprecated Not used */
-export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).active);
-/** @public @deprecated Not used */
-export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).focus);
+/** @public */
+export const neutralFillInputAltRest = create('neutral-fill-input-alt-rest').withDefault((element) => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralFillInputAltHover = create('neutral-fill-input-alt-hover').withDefault((element) => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralFillInputAltActive = create('neutral-fill-input-alt-active').withDefault((element) => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralFillInputAltFocus = create('neutral-fill-input-alt-focus').withDefault((element) => neutralFillInputAltRecipe.getValueFor(element).evaluate(element).focus);
 // Neutral Fill Layer
 /** @public */
-export const neutralFillLayerRecipe = create({
-    name: 'neutral-fill-layer-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => neutralFillLayerAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element)),
+export const neutralFillLayerRecipe = createNonCss('neutral-fill-layer-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), neutralFillLayerHoverDelta.getValueFor(element), neutralFillLayerActiveDelta.getValueFor(element), neutralFillLayerRestDelta.getValueFor(element), 1),
+});
+/** @public */
+export const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralFillLayerHover = create('neutral-fill-layer-hover').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralFillLayerActive = create('neutral-fill-layer-active').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element).active);
+// Neutral Fill Layer Alt
+/** @public */
+export const neutralFillLayerAltRecipe = createNonCss('neutral-fill-layer-alt-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element), neutralFillLayerAltRestDelta.getValueFor(element)),
 });
 /** @public */
-export const neutralFillLayerRest = create('neutral-fill-layer-rest').withDefault((element) => neutralFillLayerRecipe.getValueFor(element).evaluate(element));
+export const neutralFillLayerAltRest = create('neutral-fill-layer-alt-rest').withDefault((element) => neutralFillLayerAltRecipe.getValueFor(element).evaluate(element).rest);
+// Neutral Fill Secondary
+/** @public */
+export const neutralFillSecondaryRecipe = createNonCss('neutral-fill-secondary-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillSecondaryRestDelta.getValueFor(element), neutralFillSecondaryHoverDelta.getValueFor(element), neutralFillSecondaryActiveDelta.getValueFor(element), neutralFillSecondaryFocusDelta.getValueFor(element)),
+});
+/** @public */
+export const neutralFillSecondaryRest = create('neutral-fill-secondary-rest').withDefault((element) => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralFillSecondaryHover = create('neutral-fill-secondary-hover').withDefault((element) => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralFillSecondaryActive = create('neutral-fill-secondary-active').withDefault((element) => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralFillSecondaryFocus = create('neutral-fill-secondary-focus').withDefault((element) => neutralFillSecondaryRecipe.getValueFor(element).evaluate(element).focus);
 // Neutral Fill Stealth
 /** @public */
-export const neutralFillStealthRecipe = create({
-    name: 'neutral-fill-stealth-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => neutralFillStealthAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillStealthRestDelta.getValueFor(element), neutralFillStealthHoverDelta.getValueFor(element), neutralFillStealthActiveDelta.getValueFor(element), neutralFillStealthFocusDelta.getValueFor(element), neutralFillRestDelta.getValueFor(element), neutralFillHoverDelta.getValueFor(element), neutralFillActiveDelta.getValueFor(element), neutralFillFocusDelta.getValueFor(element)),
+export const neutralFillStealthRecipe = createNonCss('neutral-fill-stealth-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillStealthRestDelta.getValueFor(element), neutralFillStealthHoverDelta.getValueFor(element), neutralFillStealthActiveDelta.getValueFor(element), neutralFillStealthFocusDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralFillStealthRest = create('neutral-fill-stealth-rest').withDefault((element) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).rest);
@@ -385,13 +392,9 @@ export const neutralFillStealthActive = create('neutral-fill-stealth-active').wi
 /** @public */
 export const neutralFillStealthFocus = create('neutral-fill-stealth-focus').withDefault((element) => neutralFillStealthRecipe.getValueFor(element).evaluate(element).focus);
 // Neutral Fill Strong
-// TODO: none of these are actually used, do we need them?
 /** @public */
-export const neutralFillStrongRecipe = create({
-    name: 'neutral-fill-strong-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element, reference) => neutralFillContrastAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillStrongRestDelta.getValueFor(element), neutralFillStrongHoverDelta.getValueFor(element), neutralFillStrongActiveDelta.getValueFor(element), neutralFillStrongFocusDelta.getValueFor(element)),
+export const neutralFillStrongRecipe = createNonCss('neutral-fill-strong-recipe').withDefault({
+    evaluate: (element, reference) => contrastAndDeltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 4.5, neutralFillStrongRestDelta.getValueFor(element), neutralFillStrongHoverDelta.getValueFor(element), neutralFillStrongActiveDelta.getValueFor(element), neutralFillStrongFocusDelta.getValueFor(element)),
 });
 /** @public */
 export const neutralFillStrongRest = create('neutral-fill-strong-rest').withDefault((element) => neutralFillStrongRecipe.getValueFor(element).evaluate(element).rest);
@@ -401,14 +404,31 @@ 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);
+// Neutral Foreground
+/** @public */
+export const neutralForegroundRecipe = createNonCss('neutral-foreground-recipe').withDefault({
+    evaluate: (element, reference) => contrastAndDeltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 16, 0, -19, -30, 0),
+});
+/** @public */
+export const neutralForegroundRest = create('neutral-foreground-rest').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralForegroundHover = create('neutral-foreground-hover').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralForegroundActive = create('neutral-foreground-active').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralForegroundFocus = create('neutral-foreground-focus').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element).focus);
+// Neutral Foreground Hint
+/** @public */
+export const neutralForegroundHintRecipe = createNonCss('neutral-foreground-hint-recipe').withDefault({
+    evaluate: (element, reference) => contrastSwatch(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 4.5),
+});
+/** @public */
+export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element) => neutralForegroundHintRecipe.getValueFor(element).evaluate(element));
 // Neutral Stroke
 /** @public */
-export const neutralStrokeRecipe = create({
-    name: 'neutral-stroke-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));
+export const neutralStrokeRecipe = createNonCss('neutral-stroke-recipe').withDefault({
+    evaluate: (element, reference) => {
+        return deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeRestDelta.getValueFor(element), neutralStrokeHoverDelta.getValueFor(element), neutralStrokeActiveDelta.getValueFor(element), neutralStrokeFocusDelta.getValueFor(element));
     },
 });
 /** @public */
@@ -419,27 +439,62 @@ export const neutralStrokeHover = create('neutral-stroke-hover').withDefault((el
 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);
+// Neutral Stroke Control
+/** @public */
+export const neutralStrokeControlRecipe = createNonCss('neutral-stroke-control-recipe').withDefault({
+    evaluate: (element, reference) => {
+        return gradientShadowStrokeAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeControlRestDelta.getValueFor(element), neutralStrokeControlHoverDelta.getValueFor(element), neutralStrokeControlActiveDelta.getValueFor(element), neutralStrokeControlFocusDelta.getValueFor(element), 5);
+    },
+});
+/** @public */
+export const neutralStrokeControlRest = create('neutral-stroke-control-rest').withDefault((element) => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralStrokeControlHover = create('neutral-stroke-control-hover').withDefault((element) => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralStrokeControlActive = create('neutral-stroke-control-active').withDefault((element) => neutralStrokeControlRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralStrokeControlFocus = create('neutral-stroke-control-focus').withDefault((element) => neutralStrokeControlRecipe.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)),
+export const neutralStrokeDividerRecipe = createNonCss('neutral-stroke-divider-recipe').withDefault({
+    evaluate: (element, reference) => deltaSwatch(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
+// Neutral Stroke Input
 /** @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));
+export const neutralStrokeInputRecipe = createNonCss('neutral-stroke-input-recipe').withDefault({
+    evaluate: (element, reference) => {
+        return underlineStrokeAlgorithm(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeControlRestDelta.getValueFor(element), neutralStrokeControlHoverDelta.getValueFor(element), neutralStrokeControlActiveDelta.getValueFor(element), neutralStrokeControlFocusDelta.getValueFor(element), 20, strokeWidth.getValueFor(element) + 'px');
     },
 });
 /** @public */
+export const neutralStrokeInputRest = create('neutral-stroke-input-rest').withDefault((element) => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralStrokeInputHover = create('neutral-stroke-input-hover').withDefault((element) => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralStrokeInputActive = create('neutral-stroke-input-active').withDefault((element) => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).active);
+/** @public */
+export const neutralStrokeInputFocus = create('neutral-stroke-input-focus').withDefault((element) => neutralStrokeInputRecipe.getValueFor(element).evaluate(element).focus);
+// Neutral Stroke Layer
+/** @public */
+export const neutralStrokeLayerRecipe = createNonCss('neutral-stroke-layer-recipe').withDefault({
+    evaluate: (element, reference) => {
+        return deltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralStrokeLayerRestDelta.getValueFor(element), neutralStrokeLayerHoverDelta.getValueFor(element), neutralStrokeLayerActiveDelta.getValueFor(element), neutralStrokeLayerRestDelta.getValueFor(element));
+    },
+});
+/** @public */
+export const neutralStrokeLayerRest = create('neutral-stroke-layer-rest').withDefault((element) => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).rest);
+/** @public */
+export const neutralStrokeLayerHover = create('neutral-stroke-layer-hover').withDefault((element) => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).hover);
+/** @public */
+export const neutralStrokeLayerActive = create('neutral-stroke-layer-active').withDefault((element) => neutralStrokeLayerRecipe.getValueFor(element).evaluate(element).active);
+// Neutral Stroke Strong
+/** @public */
+export const neutralStrokeStrongRecipe = createNonCss('neutral-stroke-strong-recipe').withDefault({
+    evaluate: (element, reference) => contrastAndDeltaSwatchSet(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), 5.5, 0, 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);
@@ -449,45 +504,76 @@ export const neutralStrokeStrongActive = create('neutral-stroke-strong-active').
 export const neutralStrokeStrongFocus = create('neutral-stroke-strong-focus').withDefault((element) => neutralStrokeStrongRecipe.getValueFor(element).evaluate(element).focus);
 // Focus Stroke Outer
 /** @public */
-export const focusStrokeOuterRecipe = create({
-    name: 'focus-stroke-outer-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
+export const focusStrokeOuterRecipe = createNonCss('focus-stroke-outer-recipe').withDefault({
     evaluate: (element) => focusStrokeOuterAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
 });
 /** @public */
 export const focusStrokeOuter = create('focus-stroke-outer').withDefault((element) => focusStrokeOuterRecipe.getValueFor(element).evaluate(element));
 // Focus Stroke Inner
 /** @public */
-export const focusStrokeInnerRecipe = create({
-    name: 'focus-stroke-inner-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
+export const focusStrokeInnerRecipe = createNonCss('focus-stroke-inner-recipe').withDefault({
     evaluate: (element) => focusStrokeInnerAlgorithm(accentPalette.getValueFor(element), fillColor.getValueFor(element), focusStrokeOuter.getValueFor(element)),
 });
 /** @public */
 export const focusStrokeInner = create('focus-stroke-inner').withDefault((element) => focusStrokeInnerRecipe.getValueFor(element).evaluate(element));
-// Neutral Foreground
-/** @public */
-export const neutralForegroundRecipe = create({
-    name: 'neutral-foreground-recipe',
-    cssCustomPropertyName: null,
-}).withDefault({
-    evaluate: (element) => neutralForegroundAlgorithm(neutralPalette.getValueFor(element), fillColor.getValueFor(element)),
+// Deprecated tokens
+// Foreground On Accent
+/** @public @deprecated Not used */
+export const foregroundOnAccentLargeRecipe = createNonCss('foreground-on-accent-large-recipe').withDefault({
+    evaluate: (element) => foregroundOnAccentSetAlgorithm(accentFillRest.getValueFor(element), accentFillHover.getValueFor(element), accentFillActive.getValueFor(element), accentFillFocus.getValueFor(element), ContrastTarget.large),
 });
-/** @public */
-export const neutralForegroundRest = create('neutral-foreground-rest').withDefault((element) => neutralForegroundRecipe.getValueFor(element).evaluate(element));
-// 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 @deprecated Not used */
+export const foregroundOnAccentRestLarge = create('foreground-on-accent-rest-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element).rest);
+/** @public @deprecated Not used */
+export const foregroundOnAccentHoverLarge = create('foreground-on-accent-hover-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillHover.getValueFor(element)).hover);
+/** @public @deprecated Not used */
+export const foregroundOnAccentActiveLarge = create('foreground-on-accent-active-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillActive.getValueFor(element)).active);
+/** @public @deprecated Not used */
+export const foregroundOnAccentFocusLarge = create('foreground-on-accent-focus-large').withDefault((element) => foregroundOnAccentLargeRecipe.getValueFor(element).evaluate(element, accentFillFocus.getValueFor(element)).focus);
+// Neutral Fill Inverse
+/** @public @deprecated Not used */
+export const neutralFillInverseRestDelta = create('neutral-fill-inverse-rest-delta').withDefault(0);
+/** @public @deprecated Not used */
+export const neutralFillInverseHoverDelta = create('neutral-fill-inverse-hover-delta').withDefault(-3);
+/** @public @deprecated Not used */
+export const neutralFillInverseActiveDelta = create('neutral-fill-inverse-active-delta').withDefault(7);
+/** @public @deprecated Not used */
+export const neutralFillInverseFocusDelta = create('neutral-fill-inverse-focus-delta').withDefault(0);
+/** @deprecated Not used */
+function neutralFillInverse(palette, reference, restDelta, hoverDelta, activeDelta, focusDelta) {
+    const direction = directionByIsDark(reference);
+    const accessibleIndex = palette.closestIndexOf(palette.colorContrast(reference, 14));
+    const accessibleIndex2 = accessibleIndex + direction * Math.abs(restDelta - hoverDelta);
+    const indexOneIsRest = direction === 1 ? restDelta < hoverDelta : direction * restDelta > direction * hoverDelta;
+    let restIndex;
+    let hoverIndex;
+    if (indexOneIsRest) {
+        restIndex = accessibleIndex;
+        hoverIndex = accessibleIndex2;
+    }
+    else {
+        restIndex = accessibleIndex2;
+        hoverIndex = accessibleIndex;
+    }
+    return {
+        rest: palette.get(restIndex),
+        hover: palette.get(hoverIndex),
+        active: palette.get(restIndex + direction * activeDelta),
+        focus: palette.get(restIndex + direction * focusDelta),
+    };
+}
+/** @public @deprecated Not used */
+export const neutralFillInverseRecipe = createNonCss('neutral-fill-inverse-recipe').withDefault({
+    evaluate: (element, reference) => neutralFillInverse(neutralPalette.getValueFor(element), reference || fillColor.getValueFor(element), neutralFillInverseRestDelta.getValueFor(element), neutralFillInverseHoverDelta.getValueFor(element), neutralFillInverseActiveDelta.getValueFor(element), neutralFillInverseFocusDelta.getValueFor(element)),
 });
-/** @public */
-export const neutralForegroundHint = create('neutral-foreground-hint').withDefault((element) => neutralForegroundHintRecipe.getValueFor(element).evaluate(element));
-// Deprecated tokens
+/** @public @deprecated Not used */
+export const neutralFillInverseRest = create('neutral-fill-inverse-rest').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).rest);
+/** @public @deprecated Not used */
+export const neutralFillInverseHover = create('neutral-fill-inverse-hover').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).hover);
+/** @public @deprecated Not used */
+export const neutralFillInverseActive = create('neutral-fill-inverse-active').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).active);
+/** @public @deprecated Not used */
+export const neutralFillInverseFocus = create('neutral-fill-inverse-focus').withDefault((element) => neutralFillInverseRecipe.getValueFor(element).evaluate(element).focus);
 /** @public @deprecated Use controlCornerRadius */
 export const cornerRadius = controlCornerRadius;
 /** @public @deprecated Use layerCornerRadius */
@@ -496,6 +582,14 @@ export const elevatedCornerRadius = layerCornerRadius;
 export const outlineWidth = strokeWidth;
 /** @public @deprecated Use focusStrokeWidth */
 export const focusOutlineWidth = focusStrokeWidth;
+/** @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 neutralFillLayerRestDelta */
 export const neutralFillCardDelta = neutralFillLayerRestDelta;
 /** @public @deprecated Use neutralFillStrongRestDelta */
@@ -506,14 +600,6 @@ export const neutralFillToggleHoverDelta = neutralFillStrongHoverDelta;
 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 */