@udixio/theme 1.2.0 → 1.3.0

package/dist/theme/scheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scheme.d.ts","sourceRoot":"","sources":["../../src/theme/scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,MAAM;IACL,QAAQ,CAAC,OAAO,EAAE,aAAa;gBAAtB,OAAO,EAAE,aAAa;IAE3C,IAAI,OAAO,IAAI,YAAY,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,GAAG,MAAM,CAEzE;IAED,IAAI,aAAa,WAKhB;IAED,IAAI,MAAM,YAKT;IAED,IAAI,cAAc,QAKjB;IAED,UAAU,CACR,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,YAAY;CAUhB"}
+{"version":3,"file":"scheme.d.ts","sourceRoot":"","sources":["../../src/theme/scheme.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAClE,OAAO,EAAE,GAAG,EAAE,MAAM,iCAAiC,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B,eAAe,EAAE,MAAM,CAAC;IACxB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;IACpC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,qBAAa,MAAM;IACL,QAAQ,CAAC,OAAO,EAAE,aAAa;gBAAtB,OAAO,EAAE,aAAa;IAE3C,IAAI,OAAO,IACP,YAAY,GACZ,SAAS,GACT,WAAW,GACX,SAAS,GACT,UAAU,GACV,MAAM,CAET;IAED,IAAI,aAAa,WAKhB;IAED,IAAI,MAAM,YAKT;IAED,IAAI,cAAc,QAKjB;IAED,UAAU,CACR,GAAG,EACC,SAAS,GACT,WAAW,GACX,UAAU,GACV,SAAS,GACT,gBAAgB,GAChB,OAAO,GACP,MAAM,GACT,YAAY;CAUhB"}

package/dist/theme/variants/fidelity.variant.d.ts

@@ -0,0 +1,3 @@
+import { Variant } from '../variant';
+export declare const fidelityVariant: Variant;
+//# sourceMappingURL=fidelity.variant.d.ts.map

package/dist/theme/variants/fidelity.variant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fidelity.variant.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/fidelity.variant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAkC,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrE,eAAO,MAAM,eAAe,EAAE,OAkC7B,CAAC"}

package/dist/theme/variants/index.d.ts

@@ -7,5 +7,6 @@ export declare const Variants: {
     Neutral: import('..').Variant;
     TonalSpot: import('..').Variant;
     Vibrant: import('..').Variant;
+    Fidelity: import('..').Variant;
 };
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/variants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/index.ts"],"names":[],"mappings":"AAKA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,QAAQ;;;;;CAKpB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theme/variants/index.ts"],"names":[],"mappings":"AAMA,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAElC,eAAO,MAAM,QAAQ;;;;;;CAMpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "main": "./dist/node.js",
   "module": "./dist/node.js",

package/src/color/color.manager.ts

@@ -1,4 +1,4 @@
-import { DynamicColor, ToneDeltaPair } from '../material-color-utilities';
+import { DynamicColor, toneDeltaPair } from '../material-color-utilities';
 import { Scheme, SchemeManager } from '../theme';
 
 import { ColorOptions, ConfigurableColor } from './configurable-color';
@@ -91,6 +91,8 @@ export class ColorManager {
     const onColorContainerKey = ('on' +
       ColorKey +
       'Container') as DynamicColorKey;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
     const inverseColorKey = ('inverse' + ColorKey) as DynamicColorKey;
     const colorFixedKey = (colorKey + 'Fixed') as DynamicColorKey;
     const colorFixedDimKey = (colorKey + 'FixedDim') as DynamicColorKey;
@@ -115,8 +117,8 @@ export class ColorManager {
       isBackground: true,
       background: (s) => highestSurface(s, this),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           this.get(colorContainerKey).getMaterialColor(),
           this.get(colorKey).getMaterialColor(),
           5,
@@ -137,8 +139,8 @@ export class ColorManager {
       isBackground: true,
       background: (s) => this.get('surfaceContainerHigh').getMaterialColor(),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           this.get(colorDimKey).getMaterialColor(),
           this.get(colorKey).getMaterialColor(),
           5,
@@ -167,7 +169,7 @@ export class ColorManager {
       },
       isBackground: true,
       background: (s) => highestSurface(s, this),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     });
     this.createOrUpdate(onColorContainerKey, {
@@ -189,8 +191,8 @@ export class ColorManager {
       palette: (s) => s.getPalette(colorKey),
       tone: (s) => this.get(colorFixedKey).getMaterialColor().getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           this.get(colorFixedDimKey).getMaterialColor(),
           this.get(colorFixedKey).getMaterialColor(),
           5,

package/src/color/default-color.ts

@@ -1,4 +1,4 @@
-import { ToneDeltaPair } from '../material-color-utilities';
+import { toneDeltaPair } from '../material-color-utilities';
 import { DynamicColor } from '../material-color-utilities/dynamic_color';
 import { highestSurface } from './color.manager';
 import { AddColorsOptions, ColorApi } from './color.api';
@@ -6,6 +6,11 @@ import { Hct } from '../material-color-utilities/htc';
 import { ColorOptions } from './configurable-color';
 import { Scheme } from '../theme';
 import { DynamicColorKey, getCurve, tMaxC, tMinC } from './color.utils';
+import { Contrast } from '@material/material-color-utilities';
+
+const inverseTone = (tone: number) => {
+  return 100 - tone;
+};
 
 export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
   const getColor = (key: DynamicColorKey) => {
@@ -26,6 +31,9 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
         if (s.isDark) {
           return 4;
         } else {
+          if (s.variant == 'fidelity') {
+            return 100;
+          }
           if (Hct.isYellow(s.getPalette('neutral').hue)) {
             return 99;
           } else if (s.variant === 'vibrant') {
@@ -347,6 +355,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
                 ? 88
                 : 98,
           );
+        } else if (s.variant == 'fidelity') {
+          return s.sourceColorHct.tone;
         } else {
           return tMaxC(
             s.getPalette('primary'),
@@ -358,15 +368,34 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
-          colorService.getColor('primaryContainer').getMaterialColor(),
-          colorService.getColor('primary').getMaterialColor(),
-          5,
-          'relative_lighter',
-          true,
-          'farther',
-        ),
+      adjustTone: (s) =>
+        s.variant == 'fidelity'
+          ? () => {
+              const surfaceTone = colorService
+                .getColor('surface')
+                .getMaterialColor()
+                .tone(s);
+              const primaryTone = colorService
+                .getColor('primary')
+                .getMaterialColor()
+                .tone(s);
+              let selfTone = primaryTone;
+              if (Contrast.ratioOfTones(surfaceTone, selfTone) < 3) {
+                const result = inverseTone(primaryTone);
+                if (Contrast.ratioOfTones(surfaceTone, result) >= 3) {
+                  selfTone = result;
+                }
+              }
+              return selfTone;
+            }
+          : toneDeltaPair(
+              colorService.getColor('primaryContainer').getMaterialColor(),
+              colorService.getColor('primary').getMaterialColor(),
+              5,
+              'relative_lighter',
+              true,
+              'farther',
+            ),
     },
     primaryDim: {
       palette: (s) => s.getPalette('primary'),
@@ -382,8 +411,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           colorService.getColor('primaryDim').getMaterialColor(),
           colorService.getColor('primary').getMaterialColor(),
           5,
@@ -414,6 +443,15 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
                 78,
                 Hct.isCyan(s.getPalette('primary').hue) ? 88 : 90,
               );
+        }
+        if (s.variant == 'fidelity') {
+          return s.isDark
+            ? tMaxC(s.getPalette('primary'), 30, 93)
+            : tMaxC(
+                s.getPalette('primary'),
+                78,
+                Hct.isCyan(s.getPalette('primary').hue) ? 88 : 90,
+              );
         } else {
           // VIBRANT
           return s.isDark
@@ -427,7 +465,17 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) =>
+        s.variant == 'fidelity'
+          ? toneDeltaPair(
+              colorService.getColor('primary').getMaterialColor(),
+              colorService.getColor('primaryContainer').getMaterialColor(),
+              15,
+              'relative_darker',
+              true,
+              'farther',
+            )
+          : undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onPrimaryContainer: {
@@ -457,8 +505,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       tone: (s) =>
         colorService.getColor('primaryFixed').getMaterialColor().getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('primaryFixedDim'),
           getColor('primaryFixed'),
           5,
@@ -509,8 +557,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryContainer'),
           getColor('secondary'),
           5,
@@ -531,8 +579,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryDim'),
           getColor('secondary'),
           5,
@@ -561,7 +609,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onSecondaryContainer: {
@@ -589,8 +637,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       palette: (s) => s.getPalette('secondary'),
       tone: (s) => getColor('secondaryFixed').getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('secondaryFixedDim'),
           getColor('secondaryFixed'),
           5,
@@ -634,8 +682,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryContainer'),
           getColor('tertiary'),
           5,
@@ -656,8 +704,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryDim'),
           getColor('tertiary'),
           5,
@@ -695,7 +743,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onTertiaryContainer: {
@@ -723,8 +771,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       palette: (s) => s.getPalette('tertiary'),
       tone: (s) => getColor('tertiaryFixed').getTone(s),
       isBackground: true,
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('tertiaryFixedDim'),
           getColor('tertiaryFixed'),
           5,
@@ -760,8 +808,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           colorService.getColor('errorContainer').getMaterialColor(),
           colorService.getColor('error').getMaterialColor(),
           5,
@@ -776,8 +824,8 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       isBackground: true,
       background: (s) => getColor('surfaceContainerHigh'),
       contrastCurve: (s) => getCurve(4.5),
-      toneDeltaPair: (s) =>
-        new ToneDeltaPair(
+      adjustTone: (s) =>
+        toneDeltaPair(
           getColor('errorDim'),
           getColor('error'),
           5,
@@ -800,7 +848,7 @@ export const defaultColors: AddColorsOptions = (colorService: ColorApi) => {
       },
       isBackground: true,
       background: (s) => highestSurface(s, colorService),
-      toneDeltaPair: (s) => undefined,
+      adjustTone: (s) => undefined,
       contrastCurve: (s) => (s.contrastLevel > 0 ? getCurve(1.5) : undefined),
     },
     onErrorContainer: {

package/src/loader/loader.ts

@@ -52,12 +52,8 @@ export const loader = async (config: ConfigInterface) => {
     }
   };
 
-  const load = async () => {
-    await api.plugins.loadPlugins();
-  };
-
   init();
-  await load();
+  await api.load();
 
   return api;
 };

package/src/material-color-utilities/dynamic_color.ts

@@ -15,9 +15,12 @@
  * limitations under the License.
  */
 
-import { clampDouble, Contrast, TonalPalette } from '@material/material-color-utilities';
+import {
+  clampDouble,
+  Contrast,
+  TonalPalette,
+} from '@material/material-color-utilities';
 import { ContrastCurve } from './contrastCurve';
-import { ToneDeltaPair } from './toneDeltaPair';
 import { Scheme } from '../theme/scheme';
 import { Hct } from './htc';
 
@@ -42,7 +45,7 @@ import { Hct } from './htc';
  *     against its background should behave in various contrast levels options.
  *     Must used together with `background`. When not provided or resolved as
  *     undefined, the contrast curve is calculated based on other constraints.
- * @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
+ * @param adjustTone A `AdjustTone` object specifying a tone delta
  *     constraint between two colors. One of them must be the color being
  *     constructed. When not provided or resolved as undefined, the tone is
  *     calculated based on other constraints.
@@ -56,48 +59,13 @@ export interface FromPaletteOptions {
   background?: (scheme: Scheme) => DynamicColor | undefined;
   secondBackground?: (scheme: Scheme) => DynamicColor | undefined;
   contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined;
-  toneDeltaPair?: (scheme: Scheme) => ToneDeltaPair | undefined;
+  adjustTone?: (scheme: Scheme) => AdjustTone | undefined;
 }
 
-/**
- * Returns a new DynamicColor that is the same as the original color, but with
- * the extended dynamic color's constraints for the given spec version.
- *
- * @param originlColor The original color.
- * @param specVersion The spec version to extend.
- * @param extendedColor The color with the values to extend.
- */
-export function extendSpecVersion(
-  originlColor: DynamicColor,
-  extendedColor: DynamicColor,
-): DynamicColor {
-  return DynamicColor.fromPalette({
-    name: originlColor.name,
-    palette: (s) => extendedColor.palette(s),
-    tone: (s) => extendedColor.tone(s),
-    isBackground: originlColor.isBackground,
-    chromaMultiplier: (s) => {
-      const chromaMultiplier = extendedColor.chromaMultiplier;
-      return chromaMultiplier !== undefined ? chromaMultiplier(s) : 1;
-    },
-    background: (s) => {
-      const background = extendedColor.background;
-      return background !== undefined ? background(s) : undefined;
-    },
-    secondBackground: (s) => {
-      const secondBackground = extendedColor.secondBackground;
-      return secondBackground !== undefined ? secondBackground(s) : undefined;
-    },
-    contrastCurve: (s) => {
-      const contrastCurve = extendedColor.contrastCurve;
-      return contrastCurve !== undefined ? contrastCurve(s) : undefined;
-    },
-    toneDeltaPair: (s) => {
-      const toneDeltaPair = extendedColor.toneDeltaPair;
-      return toneDeltaPair !== undefined ? toneDeltaPair(s) : undefined;
-    },
-  });
-}
+export type AdjustTone = (args: {
+  scheme: Scheme;
+  dynamicColor: DynamicColor;
+}) => number;
 
 /**
  * A color that adjusts itself based on UI state provided by DynamicScheme.
@@ -142,7 +110,7 @@ export class DynamicColor {
    * @param contrastCurve A `ContrastCurve` object specifying how its contrast
    *     against its background should behave in various contrast levels
    *     options.
-   * @param toneDeltaPair A `ToneDeltaPair` object specifying a tone delta
+   * @param adjustTone A `AdjustTone` object specifying a tone delta
    *     constraint between two colors. One of them must be the color being
    *     constructed.
    */
@@ -155,7 +123,7 @@ export class DynamicColor {
     readonly background?: (scheme: Scheme) => DynamicColor | undefined,
     readonly secondBackground?: (scheme: Scheme) => DynamicColor | undefined,
     readonly contrastCurve?: (scheme: Scheme) => ContrastCurve | undefined,
-    readonly toneDeltaPair?: (scheme: Scheme) => ToneDeltaPair | undefined,
+    readonly adjustTone?: (scheme: Scheme) => AdjustTone | undefined,
   ) {
     if (!background && secondBackground) {
       throw new Error(
@@ -193,7 +161,7 @@ export class DynamicColor {
       args.background,
       args.secondBackground,
       args.contrastCurve,
-      args.toneDeltaPair,
+      args.adjustTone,
     );
   }
 
@@ -298,7 +266,7 @@ export class DynamicColor {
       background: this.background,
       secondBackground: this.secondBackground,
       contrastCurve: this.contrastCurve,
-      toneDeltaPair: this.toneDeltaPair,
+      adjustTone: this.adjustTone,
     });
   }
 
@@ -349,81 +317,11 @@ export class DynamicColor {
    *     contrast level is.
    */
   getTone(scheme: Scheme): number {
-    const toneDeltaPair = this.toneDeltaPair
-      ? this.toneDeltaPair(scheme)
-      : undefined;
+    const adjustTone = this.adjustTone ? this.adjustTone(scheme) : undefined;
 
     // Case 0: tone delta constraint.
-    if (toneDeltaPair) {
-      const roleA = toneDeltaPair.roleA;
-      const roleB = toneDeltaPair.roleB;
-      const polarity = toneDeltaPair.polarity;
-      const constraint = toneDeltaPair.constraint;
-      const absoluteDelta =
-        polarity === 'darker' ||
-        (polarity === 'relative_lighter' && scheme.isDark) ||
-        (polarity === 'relative_darker' && !scheme.isDark)
-          ? -toneDeltaPair.delta
-          : toneDeltaPair.delta;
-
-      const amRoleA = this.name === roleA.name;
-      const selfRole = amRoleA ? roleA : roleB;
-      const refRole = amRoleA ? roleB : roleA;
-      let selfTone = selfRole.tone(scheme);
-      const refTone = refRole.getTone(scheme);
-      const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
-
-      if (constraint === 'exact') {
-        selfTone = clampDouble(0, 100, refTone + relativeDelta);
-      } else if (constraint === 'nearer') {
-        if (relativeDelta > 0) {
-          selfTone = clampDouble(
-            0,
-            100,
-            clampDouble(refTone, refTone + relativeDelta, selfTone),
-          );
-        } else {
-          selfTone = clampDouble(
-            0,
-            100,
-            clampDouble(refTone + relativeDelta, refTone, selfTone),
-          );
-        }
-      } else if (constraint === 'farther') {
-        if (relativeDelta > 0) {
-          selfTone = clampDouble(refTone + relativeDelta, 100, selfTone);
-        } else {
-          selfTone = clampDouble(0, refTone + relativeDelta, selfTone);
-        }
-      }
-
-      if (this.background && this.contrastCurve) {
-        const background = this.background(scheme);
-        const contrastCurve = this.contrastCurve(scheme);
-        if (background && contrastCurve) {
-          // Adjust the tones for contrast, if background and contrast curve
-          // are defined.
-          const bgTone = background.getTone(scheme);
-          const selfContrast = contrastCurve.get(scheme.contrastLevel);
-          selfTone =
-            Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast &&
-            scheme.contrastLevel >= 0
-              ? selfTone
-              : DynamicColor.foregroundTone(bgTone, selfContrast);
-        }
-      }
-
-      // This can avoid the awkward tones for background colors including the
-      // access fixed colors. Accent fixed dim colors should not be adjusted.
-      if (this.isBackground && !this.name.endsWith('_fixed_dim')) {
-        if (selfTone >= 57) {
-          selfTone = clampDouble(65, 100, selfTone);
-        } else {
-          selfTone = clampDouble(0, 49, selfTone);
-        }
-      }
-
-      return selfTone;
+    if (adjustTone) {
+      return adjustTone({ scheme, dynamicColor: this });
     } else {
       // Case 1: No tone delta pair; just solve for itself.
       let answer = this.tone(scheme);

package/src/material-color-utilities/toneDeltaPair.ts

@@ -15,7 +15,9 @@
  * limitations under the License.
  */
 
-import { DynamicColor } from './dynamic_color';
+import { AdjustTone, DynamicColor } from './dynamic_color';
+import { clampDouble, Contrast } from '@material/material-color-utilities';
+import { Scheme } from '../theme';
 
 /**
  * Describes the different in tone between colors.
@@ -43,7 +45,7 @@ export type DeltaConstraint = 'exact' | 'nearer' | 'farther';
  * designers want tonal distance, literally contrast, between two colors that
  * don't have a background / foreground relationship or a contrast guarantee.
  */
-export class ToneDeltaPair {
+class ToneDeltaPair {
   /**
    * Documents a constraint in tone distance between two DynamicColors.
    *
@@ -79,4 +81,91 @@ export class ToneDeltaPair {
   ) {
     this.constraint = constraint ?? 'exact';
   }
+
+  adjustedTone({
+    scheme,
+    dynamicColor,
+  }: {
+    scheme: Scheme;
+    dynamicColor: DynamicColor;
+  }) {
+    const roleA = this.roleA;
+    const roleB = this.roleB;
+    const polarity = this.polarity;
+    const constraint = this.constraint;
+    const absoluteDelta =
+      polarity === 'darker' ||
+      (polarity === 'relative_lighter' && scheme.isDark) ||
+      (polarity === 'relative_darker' && !scheme.isDark)
+        ? -this.delta
+        : this.delta;
+
+    const amRoleA = dynamicColor.name === roleA.name;
+    const selfRole = amRoleA ? roleA : roleB;
+    const refRole = amRoleA ? roleB : roleA;
+    let selfTone = selfRole.tone(scheme);
+    const refTone = refRole.getTone(scheme);
+    const relativeDelta = absoluteDelta * (amRoleA ? 1 : -1);
+
+    if (constraint === 'exact') {
+      selfTone = clampDouble(0, 100, refTone + relativeDelta);
+    } else if (constraint === 'nearer') {
+      if (relativeDelta > 0) {
+        selfTone = clampDouble(
+          0,
+          100,
+          clampDouble(refTone, refTone + relativeDelta, selfTone),
+        );
+      } else {
+        selfTone = clampDouble(
+          0,
+          100,
+          clampDouble(refTone + relativeDelta, refTone, selfTone),
+        );
+      }
+    } else if (constraint === 'farther') {
+      if (relativeDelta > 0) {
+        selfTone = clampDouble(refTone + relativeDelta, 100, selfTone);
+      } else {
+        selfTone = clampDouble(0, refTone + relativeDelta, selfTone);
+      }
+    }
+
+    if (dynamicColor.background && dynamicColor.contrastCurve) {
+      const background = dynamicColor.background(scheme);
+      const contrastCurve = dynamicColor.contrastCurve(scheme);
+      if (background && contrastCurve) {
+        // Adjust the tones for contrast, if background and contrast curve
+        // are defined.
+        const bgTone = background.getTone(scheme);
+        const selfContrast = contrastCurve.get(scheme.contrastLevel);
+        selfTone =
+          Contrast.ratioOfTones(bgTone, selfTone) >= selfContrast &&
+          scheme.contrastLevel >= 0
+            ? selfTone
+            : DynamicColor.foregroundTone(bgTone, selfContrast);
+      }
+    }
+
+    // This can avoid the awkward tones for background colors including the
+    // access fixed colors. Accent fixed dim colors should not be adjusted.
+    if (
+      dynamicColor.isBackground &&
+      !dynamicColor.name.endsWith('_fixed_dim')
+    ) {
+      if (selfTone >= 57) {
+        selfTone = clampDouble(65, 100, selfTone);
+      } else {
+        selfTone = clampDouble(0, 49, selfTone);
+      }
+    }
+
+    return selfTone;
+  }
 }
+
+export const toneDeltaPair = (
+  ...params: ConstructorParameters<typeof ToneDeltaPair>
+): AdjustTone => {
+  return (args) => new ToneDeltaPair(...params).adjustedTone(args);
+};

package/src/theme/scheme.ts

@@ -13,7 +13,13 @@ export interface SchemeOptions {
 export class Scheme {
   constructor(readonly options: SchemeOptions) {}
 
-  get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | string {
+  get variant():
+    | 'expressive'
+    | 'neutral'
+    | 'tonalSpot'
+    | 'vibrant'
+    | 'fidelity'
+    | string {
     return this.options.variant.name;
   }