@udixio/theme 1.2.0 → 1.3.0

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 }) =>
+    TonalPalette.fromHueAndChroma(colorHct.hue, colorHct.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,
 };