@udixio/theme 0.4.0 → 0.4.1

package/index.cjs.js

@@ -1646,12 +1646,6 @@ const getRotatedHue = (sourceColorHct, hueBreakpoints, rotations) => {
     }
     return materialColorUtilities.sanitizeDegreesDouble(sourceColorHct.hue + rotation);
 };
-const Variants = {
-    Expressive: expressiveVariant,
-    Neutral: neutralVariant,
-    TonalSpot: tonalSpotVariant,
-    Vibrant: vibrantVariant,
-};
 class Variant {
     constructor(palettes = {}, name, customPalettes, 
     /** TODO
@@ -1666,49 +1660,6 @@ class Variant {
     }
 }
 
-const tonalSpotVariant = {
-    name: 'tonalSpot',
-    palettes: {
-        primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
-        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
-        neutralVariant: ({ sourceColorHct }) => materialColorUtilities.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 materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
-        },
-    },
-    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
-};
-
-const getVibrantNeutralHue = (sourceColorHct) => {
-    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
-};
-const getVibrantNeutralChroma = (sourceColorHct) => {
-    getVibrantNeutralHue(sourceColorHct);
-    return 28;
-};
-const vibrantVariant = {
-    name: 'vibrant',
-    palettes: {
-        primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
-        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
-        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
-        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
-        neutralVariant: ({ sourceColorHct }) => {
-            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
-            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
-            return materialColorUtilities.TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
-        },
-        error: ({ sourceColorHct }) => {
-            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
-            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
-        },
-    },
-    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
-};
-
 const getExpressiveNeutralHue = (sourceColorHct) => {
     const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
     return hue;
@@ -1756,6 +1707,56 @@ const neutralVariant = {
     customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
 };
 
+const tonalSpotVariant = {
+    name: 'tonalSpot',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
+        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
+        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 5),
+        neutralVariant: ({ sourceColorHct }) => materialColorUtilities.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 materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 60);
+        },
+    },
+    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(colorHct.hue, 16),
+};
+
+const getVibrantNeutralHue = (sourceColorHct) => {
+    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
+};
+const getVibrantNeutralChroma = (sourceColorHct) => {
+    getVibrantNeutralHue(sourceColorHct);
+    return 28;
+};
+const vibrantVariant = {
+    name: 'vibrant',
+    palettes: {
+        primary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
+        secondary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+        tertiary: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
+        neutral: ({ sourceColorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
+        neutralVariant: ({ sourceColorHct }) => {
+            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
+            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
+        },
+        error: ({ sourceColorHct }) => {
+            const errorHue = getPiecewiseHue(sourceColorHct, [0, 3, 13, 23, 33, 43, 153, 273, 360], [12, 22, 32, 12, 22, 32, 22, 12]);
+            return materialColorUtilities.TonalPalette.fromHueAndChroma(errorHue, 80);
+        },
+    },
+    customPalettes: ({ colorHct }) => materialColorUtilities.TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+};
+
+const Variants = {
+    Expressive: expressiveVariant,
+    Neutral: neutralVariant,
+    TonalSpot: tonalSpotVariant,
+    Vibrant: vibrantVariant,
+};
+
 const defaultColors = (colorService) => {
     const getColor = (key) => {
         return colorService.getColor(key).getMaterialColor();

package/index.esm.js

@@ -1644,12 +1644,6 @@ const getRotatedHue = (sourceColorHct, hueBreakpoints, rotations) => {
     }
     return sanitizeDegreesDouble(sourceColorHct.hue + rotation);
 };
-const Variants = {
-    Expressive: expressiveVariant,
-    Neutral: neutralVariant,
-    TonalSpot: tonalSpotVariant,
-    Vibrant: vibrantVariant,
-};
 class Variant {
     constructor(palettes = {}, name, customPalettes, 
     /** TODO
@@ -1664,49 +1658,6 @@ class Variant {
     }
 }
 
-const tonalSpotVariant = {
-    name: 'tonalSpot',
-    palettes: {
-        primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
-        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
-        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
-        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, 16),
-};
-
-const getVibrantNeutralHue = (sourceColorHct) => {
-    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
-};
-const getVibrantNeutralChroma = (sourceColorHct) => {
-    getVibrantNeutralHue(sourceColorHct);
-    return 28;
-};
-const vibrantVariant = {
-    name: 'vibrant',
-    palettes: {
-        primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
-        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
-        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
-        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
-        neutralVariant: ({ sourceColorHct }) => {
-            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
-            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
-            return TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
-        },
-        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, 80);
-        },
-    },
-    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
-};
-
 const getExpressiveNeutralHue = (sourceColorHct) => {
     const hue = getRotatedHue(sourceColorHct, [0, 71, 124, 253, 278, 300, 360], [10, 0, 10, 0, 10, 0]);
     return hue;
@@ -1754,6 +1705,56 @@ const neutralVariant = {
     customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(colorHct.hue, Hct.isBlue(colorHct.hue) ? 6 : 4),
 };
 
+const tonalSpotVariant = {
+    name: 'tonalSpot',
+    palettes: {
+        primary: ({ sourceColorHct, isDark }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, isDark ? 26 : 32),
+        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 16),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 20, 71, 161, 333, 360], [-40, 48, -32, 40, -32]), 28),
+        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, 16),
+};
+
+const getVibrantNeutralHue = (sourceColorHct) => {
+    return getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]);
+};
+const getVibrantNeutralChroma = (sourceColorHct) => {
+    getVibrantNeutralHue(sourceColorHct);
+    return 28;
+};
+const vibrantVariant = {
+    name: 'vibrant',
+    palettes: {
+        primary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(sourceColorHct.hue, 74),
+        secondary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+        tertiary: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(sourceColorHct, [0, 38, 71, 105, 140, 161, 253, 333, 360], [-72, 35, 24, -24, 62, 50, 62, -72]), 56),
+        neutral: ({ sourceColorHct }) => TonalPalette.fromHueAndChroma(getVibrantNeutralHue(sourceColorHct), getVibrantNeutralChroma(sourceColorHct)),
+        neutralVariant: ({ sourceColorHct }) => {
+            const vibrantNeutralHue = getVibrantNeutralHue(sourceColorHct);
+            const vibrantNeutralChroma = getVibrantNeutralChroma(sourceColorHct);
+            return TonalPalette.fromHueAndChroma(vibrantNeutralHue, vibrantNeutralChroma * 1.29);
+        },
+        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, 80);
+        },
+    },
+    customPalettes: ({ colorHct }) => TonalPalette.fromHueAndChroma(getRotatedHue(colorHct, [0, 38, 105, 140, 333, 360], [-14, 10, -14, 10, -14]), 56),
+};
+
+const Variants = {
+    Expressive: expressiveVariant,
+    Neutral: neutralVariant,
+    TonalSpot: tonalSpotVariant,
+    Vibrant: vibrantVariant,
+};
+
 const defaultColors = (colorService) => {
     const getColor = (key) => {
         return colorService.getColor(key).getMaterialColor();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/theme",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "main": "./index.cjs.js",
   "module": "./index.esm.js",
   "dependencies": {

package/src/lib/theme/variant.d.ts

@@ -3,12 +3,6 @@ import { Hct } from '../material-color-utilities/htc';
 import { AddColors } from '../color';
 export declare const getPiecewiseHue: (sourceColorHct: Hct, hueBreakpoints: number[], hues: number[]) => number;
 export declare const getRotatedHue: (sourceColorHct: Hct, hueBreakpoints: number[], rotations: number[]) => number;
-export declare const Variants: {
-    Expressive: Variant;
-    Neutral: Variant;
-    TonalSpot: Variant;
-    Vibrant: Variant;
-};
 export declare class Variant {
     palettes: Record<string, (args: {
         sourceColorHct: Hct;

package/src/lib/theme/variants/index.d.ts

@@ -2,3 +2,9 @@ export * from './tonal-spot.variant';
 export * from './vibrant.variant';
 export * from './expressive.variant';
 export * from './neutral.variant';
+export declare const Variants: {
+    Expressive: import("..").Variant;
+    Neutral: import("..").Variant;
+    TonalSpot: import("..").Variant;
+    Vibrant: import("..").Variant;
+};