@udixio/theme 1.2.0 → 1.3.1

package/dist/theme/scheme.d.ts

@@ -11,7 +11,7 @@ export interface SchemeOptions {
 export declare class Scheme {
     readonly options: SchemeOptions;
     constructor(options: SchemeOptions);
-    get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | string;
+    get variant(): 'expressive' | 'neutral' | 'tonalSpot' | 'vibrant' | 'fidelity' | string;
     get contrastLevel(): number;
     get isDark(): boolean;
     get sourceColorHct(): Hct;

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/theme.api.d.ts

@@ -11,6 +11,7 @@ export declare class ThemeApi {
         schemeManager: SchemeManager;
         variantManager: VariantManager;
     });
+    get sourceColorHex(): import('../material-color-utilities/htc').Hct;
     create(options: ThemeOptions & {
         variant: Variant;
     }): void;

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

@@ -1 +1 @@
-{"version":3,"file":"theme.api.d.ts","sourceRoot":"","sources":["../../src/theme/theme.api.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,KAAK,YAAY,GAAG,IAAI,CACtB,oBAAoB,EACpB,UAAU,GAAG,iBAAiB,CAC/B,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAC;AAQ/B,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;IAC9C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;gBAEpC,EACV,aAAa,EACb,cAAc,GACf,EAAE;QACD,aAAa,EAAE,aAAa,CAAC;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;IA4BD,MAAM,CAAC,OAAO,EAAE,YAAY,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;IAQnD,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;IAQ7D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAO/C"}
+{"version":3,"file":"theme.api.d.ts","sourceRoot":"","sources":["../../src/theme/theme.api.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAEpC,KAAK,YAAY,GAAG,IAAI,CACtB,oBAAoB,EACpB,UAAU,GAAG,iBAAiB,CAC/B,GAAG;IAAE,cAAc,EAAE,MAAM,CAAA;CAAE,CAAC;AAQ/B,qBAAa,QAAQ;IACnB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAAgB;IAC9C,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAiB;gBAEpC,EACV,aAAa,EACb,cAAc,GACf,EAAE;QACD,aAAa,EAAE,aAAa,CAAC;QAC7B,cAAc,EAAE,cAAc,CAAC;KAChC;IA4BD,IAAI,cAAc,kDAEjB;IAED,MAAM,CAAC,OAAO,EAAE,YAAY,GAAG;QAAE,OAAO,EAAE,OAAO,CAAA;KAAE;IAQnD,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,YAAY,CAAC,GAAG;QAAE,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;IAQ7D,gBAAgB,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM;CAO/C"}

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.1",
   "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);