@udixio/theme 1.2.0 → 1.3.1

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;
   }
 

package/src/theme/theme.api.ts

@@ -52,6 +52,10 @@ export class ThemeApi {
   //   return this.theme();
   // }
 
+  get sourceColorHex() {
+    return this.schemeManager.get().sourceColorHct;
+  }
+
   create(options: ThemeOptions & { variant: Variant }) {
     this.schemeManager.createOrUpdate({
       ...options,

package/src/theme/variants/fidelity.variant.ts

@@ -0,0 +1,38 @@
+import { getPiecewiseHue, getRotatedHue, Variant } from '../variant';
+import { TonalPalette } from '@material/material-color-utilities';
+
+export const fidelityVariant: Variant = {
+  name: 'fidelity',
+  palettes: {
+    primary: ({ sourceColorHct, isDark }) =>
+      TonalPalette.fromHueAndChroma(sourceColorHct.hue, sourceColorHct.chroma),
+    secondary: ({ sourceColorHct }) =>
+      TonalPalette.fromHueAndChroma(
+        sourceColorHct.hue,
+        sourceColorHct.chroma * 0.5,
+      ),
+    tertiary: ({ sourceColorHct }) =>
+      TonalPalette.fromHueAndChroma(
+        getRotatedHue(
+          sourceColorHct,
+          [0, 20, 71, 161, 333, 360],
+          [-40, 48, -32, 40, -32],
+        ),
+        sourceColorHct.chroma,
+      ),
+    neutral: ({ sourceColorHct }) =>
+      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
+    neutralVariant: ({ sourceColorHct }) =>
+      TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5 * 1.7),
+    error: ({ sourceColorHct }) => {
+      const errorHue = getPiecewiseHue(
+        sourceColorHct,
+        [0, 3, 13, 23, 33, 43, 153, 273, 360],
+        [12, 22, 32, 12, 22, 32, 22, 12],
+      );
+      return TonalPalette.fromHueAndChroma(errorHue, 60);
+    },
+  },
+  customPalettes: ({ colorHct , sourceColorHct}) =>
+    TonalPalette.fromHueAndChroma(colorHct.hue, sourceColorHct.chroma),
+};

package/src/theme/variants/index.ts

@@ -2,6 +2,7 @@ import { expressiveVariant } from './expressive.variant';
 import { neutralVariant } from './neutral.variant';
 import { tonalSpotVariant } from './tonal-spot.variant';
 import { vibrantVariant } from './vibrant.variant';
+import { fidelityVariant } from './fidelity.variant';
 
 export * from './tonal-spot.variant';
 export * from './vibrant.variant';
@@ -13,4 +14,5 @@ export const Variants = {
   Neutral: neutralVariant,
   TonalSpot: tonalSpotVariant,
   Vibrant: vibrantVariant,
+  Fidelity: fidelityVariant,
 };