@breadstone/mosaik-themes 0.0.174 → 0.0.176

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+## 0.0.174 (2025-11-28)
+
+### 🚀 Features
+
+- **tailwind:** add Joy Tailwind plugin with configuration options and token exposure ([72bbf954a8](https://github.com/RueDeRennes/mosaik/commit/72bbf954a8))
+- **svg:** add SVG to path conversion utility ([f2f74da782](https://github.com/RueDeRennes/mosaik/commit/f2f74da782))
+
+### 🩹 Fixes
+
+- remove unused elevation2 light token and update release version in package.json ([9a63ade438](https://github.com/RueDeRennes/mosaik/commit/9a63ade438))
+- remove unused dependency 'element-to-path' from yarn.lock ([df86dc94de](https://github.com/RueDeRennes/mosaik/commit/df86dc94de))
+- add newline at end of package.json ([73db364d3c](https://github.com/RueDeRennes/mosaik/commit/73db364d3c))
+
 ## 0.0.173 (2025-11-26)
 
 ### 🚀 Features

package/Themes/___material-tokens.css

@@ -4,9 +4,9 @@
   --layout-radius: 12px;
   --layout-space: 8px;
   --layout-thickness: 2px;
-  --color-light-primary: #6200EE;
-  --color-light-secondary: #3700B3;
-  --color-light-tertiary: #03DAC6;
+  --color-light-primary: #6200ee;
+  --color-light-secondary: #3700b3;
+  --color-light-tertiary: #03dac6;
   --elevation-none: none;
   --size-tiny: 2px;
   --size-small: 4px;

package/Themes/material-tokens.scss

@@ -3,9 +3,9 @@ $font-family: 'Inter', Roboto, Helvetica, sans-serif;
 $layout-radius: 12px;
 $layout-space: 8px;
 $layout-thickness: 2px;
-$color-light-primary: #6200EE;
-$color-light-secondary: #3700B3;
-$color-light-tertiary: #03DAC6;
+$color-light-primary: #6200ee;
+$color-light-secondary: #3700b3;
+$color-light-tertiary: #03dac6;
 $elevation-none: none;
 $size-tiny: 2px;
 $size-small: 4px;

package/Themes/material.scss

@@ -74,9 +74,9 @@ $font-family: 'Inter', Roboto, Helvetica, sans-serif;
 $layout-radius: 12px;
 $layout-space: 8px;
 $layout-thickness: 2px;
-$color-light-primary: #6200EE;
-$color-light-secondary: #3700B3;
-$color-light-tertiary: #03DAC6;
+$color-light-primary: #6200ee;
+$color-light-secondary: #3700b3;
+$color-light-tertiary: #03dac6;
 $elevation-none: none;
 $size-tiny: 2px;
 $size-small: 4px;

package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CosmopolitanThemeGeneratorStrategy.d.ts","sourceRoot":"","sources":["../../../src/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzE;;;;GAIG;AACH,qBAAa,kCAAmC,YAAW,uBAAuB;IAI9E,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiC;;IAc5D,eAAe,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa;IAgC3E,cAAc,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY;CAMnF"}
+{"version":3,"file":"CosmopolitanThemeGeneratorStrategy.d.ts","sourceRoot":"","sources":["../../../src/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAKzE;;;;GAIG;AACH,qBAAa,kCAAmC,YAAW,uBAAuB;IAI9E,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAiC;;IAc5D,eAAe,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa;IA8B3E,cAAc,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY;CAMnF"}

package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.js

@@ -1,5 +1,5 @@
 // #region Imports
-import { TinyColor } from '@ctrl/tinycolor';
+import chroma from 'chroma-js';
 import { MaterialThemeGeneratorStrategy } from './MaterialThemeGeneratorStrategy';
 // #endregion
 /**
@@ -19,27 +19,25 @@ export class CosmopolitanThemeGeneratorStrategy {
     // #region Methods
     generatePalette(baseColor, mode) {
         if (mode === 'light') {
-            const baseLight = new TinyColor('#ffffff');
-            const baseDark = new TinyColor('#000000');
+            const baseLight = chroma('#ffffff');
+            const baseDark = chroma('#000000');
             const palette = {};
             const steps = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
             const amounts = [0, 12, 30, 50, 70, 85, 100, 87, 70, 54, 25];
             steps.forEach((step, i) => {
                 const base = step <= 500 ? baseLight : baseDark;
-                palette[`${step}`] = new TinyColor(base).mix(baseColor, amounts[i])
-                    .toHexString();
+                palette[`${step}`] = chroma.mix(base, baseColor, amounts[i] / 100, 'rgb').hex();
             });
             return palette;
         }
-        const baseLight = new TinyColor('#ffffff');
-        const baseDark = new TinyColor('#000000');
+        const baseLight = chroma('#ffffff');
+        const baseDark = chroma('#000000');
         const palette = {};
         const steps = [0, 100, 500];
         const amounts = [0, 30, 100];
         steps.forEach((step, i) => {
             const base = step <= 600 ? baseDark : baseLight;
-            palette[`${step}`] = new TinyColor(base).mix(baseColor, amounts[i])
-                .toHexString();
+            palette[`${step}`] = chroma.mix(base, baseColor, amounts[i] / 100, 'rgb').hex();
         });
         return palette;
     }

package/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.js.map

@@ -1 +1 @@
-{"version":3,"file":"CosmopolitanThemeGeneratorStrategy.js","sourceRoot":"","sources":["../../../src/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAK5C,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAElF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,kCAAkC;IAE3C,iBAAiB;IAEA,iBAAiB,CAAiC;IAEnE,aAAa;IAEb,eAAe;IAEf;QACI,IAAI,CAAC,iBAAiB,GAAG,IAAI,8BAA8B,EAAE,CAAC;IAClE,CAAC;IAED,aAAa;IAEb,kBAAkB;IAEX,eAAe,CAAC,SAAmB,EAAE,IAAsB;QAC9D,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACnB,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;YAC3C,MAAM,QAAQ,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;YAC1C,MAAM,OAAO,GAA6B,EAAE,CAAC;YAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACnE,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YAE7D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACtB,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAChD,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;qBAC9D,WAAW,EAAc,CAAC;YACnC,CAAC,CAAC,CAAC;YAEH,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,MAAM,SAAS,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;QAC3C,MAAM,QAAQ,GAAG,IAAI,SAAS,CAAC,SAAS,CAAC,CAAC;QAC1C,MAAM,OAAO,GAA6B,EAAE,CAAC;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAE7B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;YAChD,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,IAAI,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC;iBAC9D,WAAW,EAAc,CAAC;QACnC,CAAC,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC;IACnB,CAAC;IAEM,cAAc,CAAC,SAAmB,EAAE,IAAsB;QAC7D,OAAO,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAClE,CAAC;CAIJ"}
+{"version":3,"file":"CosmopolitanThemeGeneratorStrategy.js","sourceRoot":"","sources":["../../../src/Theming/Strategies/CosmopolitanThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAElB,OAAO,MAAM,MAAM,WAAW,CAAC;AAK/B,OAAO,EAAE,8BAA8B,EAAE,MAAM,kCAAkC,CAAC;AAElF,aAAa;AAEb;;;;GAIG;AACH,MAAM,OAAO,kCAAkC;IAE3C,iBAAiB;IAEA,iBAAiB,CAAiC;IAEnE,aAAa;IAEb,eAAe;IAEf;QACI,IAAI,CAAC,iBAAiB,GAAG,IAAI,8BAA8B,EAAE,CAAC;IAClE,CAAC;IAED,aAAa;IAEb,kBAAkB;IAEX,eAAe,CAAC,SAAmB,EAAE,IAAsB;QAC9D,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACnB,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;YACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;YACnC,MAAM,OAAO,GAA6B,EAAE,CAAC;YAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;YACnE,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;YAE7D,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBACtB,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;gBAChD,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,EAAc,CAAC;YAChG,CAAC,CAAC,CAAC;YAEH,OAAO,OAAO,CAAC;QACnB,CAAC;QAED,MAAM,SAAS,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QACpC,MAAM,QAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QACnC,MAAM,OAAO,GAA6B,EAAE,CAAC;QAC7C,MAAM,KAAK,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC;QAC5B,MAAM,OAAO,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,CAAC;QAE7B,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACtB,MAAM,IAAI,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;YAChD,OAAO,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,KAAK,CAAC,CAAC,GAAG,EAAc,CAAC;QAChG,CAAC,CAAC,CAAC;QAEH,OAAO,OAAO,CAAC;IACnB,CAAC;IAEM,cAAc,CAAC,SAAmB,EAAE,IAAsB;QAC7D,OAAO,IAAI,CAAC,iBAAiB,CAAC,cAAc,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC;IAClE,CAAC;CAIJ"}

package/Theming/Strategies/MaterialThemeGeneratorStrategy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialThemeGeneratorStrategy.d.ts","sourceRoot":"","sources":["../../../src/Theming/Strategies/MaterialThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAIzE;;;;GAIG;AACH,qBAAa,8BAA+B,YAAW,uBAAuB;;IAWnE,eAAe,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa;IAgC3E,cAAc,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY;CAuDnF"}
+{"version":3,"file":"MaterialThemeGeneratorStrategy.d.ts","sourceRoot":"","sources":["../../../src/Theming/Strategies/MaterialThemeGeneratorStrategy.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAC1D,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,2BAA2B,CAAC;AAIzE;;;;GAIG;AACH,qBAAa,8BAA+B,YAAW,uBAAuB;;IAWnE,eAAe,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,aAAa;IA8B3E,cAAc,CAAC,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,YAAY;CAuDnF"}

package/Theming/Strategies/MaterialThemeGeneratorStrategy.js

@@ -1,5 +1,5 @@
 // #region Imports
-import { TinyColor } from '@ctrl/tinycolor';
+import chroma from 'chroma-js';
 // #endregion
 /**
  * Material Design theme generator strategy.
@@ -14,56 +14,54 @@ export class MaterialThemeGeneratorStrategy {
     // #region Methods
     generatePalette(baseColor, mode) {
         if (mode === 'light') {
-            const baseLight = new TinyColor('#ffffff');
-            const baseDark = new TinyColor('#000000');
+            const baseLight = chroma('#ffffff');
+            const baseDark = chroma('#000000');
             const palette = {};
             const steps = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
             const amounts = [0, 12, 30, 50, 70, 85, 100, 87, 70, 54, 25];
             steps.forEach((step, i) => {
                 const base = step <= 500 ? baseLight : baseDark;
-                palette[`${step}`] = new TinyColor(base).mix(baseColor, amounts[i])
-                    .toHexString();
+                palette[`${step}`] = chroma.mix(base, baseColor, amounts[i] / 100, 'rgb').hex();
             });
             return palette;
         }
-        const baseLight = new TinyColor('#ffffff');
-        const baseDark = new TinyColor('#000000');
+        const baseLight = chroma('#ffffff');
+        const baseDark = chroma('#000000');
         const palette = {};
         const steps = [0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
         const amounts = [0, 15, 30, 45, 60, 75, 90, 100, 70, 54, 25];
         steps.forEach((step, i) => {
             const base = step <= 600 ? baseDark : baseLight;
-            palette[`${step}`] = new TinyColor(base).mix(baseColor, amounts[i])
-                .toHexString();
+            palette[`${step}`] = chroma.mix(base, baseColor, amounts[i] / 100, 'rgb').hex();
         });
         return palette;
     }
     generateScheme(baseColor, mode) {
-        const tinyBase = new TinyColor(baseColor);
-        const luminance = tinyBase.getLuminance();
+        const baseChroma = chroma(baseColor);
+        const luminance = baseChroma.luminance();
         const isDarkBase = luminance < 0.3;
         /**
          * Intelligent color adjustment that prevents colors from becoming too dark.
          * For dark input colors, colors are lightened instead of darkened.
          */
         const adjustColor = (color, targetAmount) => {
-            const tc = new TinyColor(color);
-            const currentLuminance = tc.getLuminance();
+            const c = chroma(color);
+            const currentLuminance = c.luminance();
             // If the color is too dark (luminance < 0.15) and we would darken it,
             // reverse direction and lighten instead
             if (currentLuminance < 0.15 && targetAmount < 0) {
-                return tc.lighten(Math.abs(targetAmount / 2.55)).toHexString();
+                return c.brighten(Math.abs(targetAmount / 25.5)).hex();
             }
             // Normal adjustment
             if (targetAmount > 0) {
-                return tc.lighten(targetAmount / 2.55).toHexString();
+                return c.brighten(targetAmount / 25.5).hex();
             }
-            const darkened = tc.darken(Math.abs(targetAmount / 2.55));
+            const darkened = c.darken(Math.abs(targetAmount / 25.5));
             // Ensure we never reach black (luminance > 0.02)
-            if (darkened.getLuminance() < 0.02) {
-                return tc.lighten(Math.abs(targetAmount / 5)).toHexString();
+            if (darkened.luminance() < 0.02) {
+                return c.brighten(Math.abs(targetAmount / 50)).hex();
             }
-            return darkened.toHexString();
+            return darkened.hex();
         };
         // For very dark base colors, invert the logic for certain properties
         const middlelightAmount = isDarkBase ? 50 : -50;

package/Theming/Strategies/MaterialThemeGeneratorStrategy.js.map

@@ -1 +1 @@
-{"version":3,"file":"MaterialThemeGeneratorStrategy.js","sourceRoot":"","sources":["../../../src/Theming/Strategies/MaterialThemeGeneratorStrategy.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"MaterialThemeGeneratorStrategy.js","sourceRoot":"","sources":["../../../src/Theming/Strategies/MaterialThemeGeneratorStrategy.ts"],"names":[],"mappings":"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"}

package/Theming/Tokens/MaterialTokens.d.ts

@@ -6,9 +6,9 @@ export declare const FONT_FAMILY = "'Inter', Roboto, Helvetica, sans-serif";
 export declare const LAYOUT_RADIUS = "12px";
 export declare const LAYOUT_SPACE = "8px";
 export declare const LAYOUT_THICKNESS = "2px";
-export declare const COLOR_LIGHT_PRIMARY = "#6200EE";
-export declare const COLOR_LIGHT_SECONDARY = "#3700B3";
-export declare const COLOR_LIGHT_TERTIARY = "#03DAC6";
+export declare const COLOR_LIGHT_PRIMARY = "#6200ee";
+export declare const COLOR_LIGHT_SECONDARY = "#3700b3";
+export declare const COLOR_LIGHT_TERTIARY = "#03dac6";
 export declare const ELEVATION_NONE = "none";
 export declare const SIZE_TINY = "2px";
 export declare const SIZE_SMALL = "4px";

package/Theming/Tokens/MaterialTokens.js

@@ -6,9 +6,9 @@ export const FONT_FAMILY = "'Inter', Roboto, Helvetica, sans-serif";
 export const LAYOUT_RADIUS = "12px";
 export const LAYOUT_SPACE = "8px";
 export const LAYOUT_THICKNESS = "2px";
-export const COLOR_LIGHT_PRIMARY = "#6200EE";
-export const COLOR_LIGHT_SECONDARY = "#3700B3";
-export const COLOR_LIGHT_TERTIARY = "#03DAC6";
+export const COLOR_LIGHT_PRIMARY = "#6200ee";
+export const COLOR_LIGHT_SECONDARY = "#3700b3";
+export const COLOR_LIGHT_TERTIARY = "#03dac6";
 export const ELEVATION_NONE = "none";
 export const SIZE_TINY = "2px";
 export const SIZE_SMALL = "4px";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-themes",
-    "version": "0.0.174",
+    "version": "0.0.176",
     "description": "Mosaik elements various themes.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,8 +15,8 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.174",
-        "@ctrl/tinycolor": "^4.2.0",
+        "@breadstone/mosaik-elements": "^0.0.176",
+        "chroma-js": "^3.2.0",
         "tslib": "^2.8.1"
     },
     "exports": {
@@ -26,28 +26,52 @@
         },
         "./scss": "./_index.scss",
         "./tailwind/v3/bootstrap": {
-            "import": "./tailwind/v3/bootstrap-tokens.tailwind.js",
-            "require": "./tailwind/v3/bootstrap-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-bootstrap.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-bootstrap.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/bootstrap": {
+            "import": "./tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-bootstrap.tailwind.plugin.cjs"
         },
         "./tailwind/v3/cosmopolitan": {
-            "import": "./tailwind/v3/cosmopolitan-tokens.tailwind.js",
-            "require": "./tailwind/v3/cosmopolitan-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/cosmopolitan": {
+            "import": "./tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-cosmopolitan.tailwind.plugin.cjs"
         },
         "./tailwind/v3/fluent": {
-            "import": "./tailwind/v3/fluent-tokens.tailwind.js",
-            "require": "./tailwind/v3/fluent-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-fluent.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-fluent.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/fluent": {
+            "import": "./tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-fluent.tailwind.plugin.cjs"
         },
         "./tailwind/v3/joy": {
-            "import": "./tailwind/v3/joy-tokens.tailwind.js",
-            "require": "./tailwind/v3/joy-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-joy.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-joy.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/joy": {
+            "import": "./tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-joy.tailwind.plugin.cjs"
         },
         "./tailwind/v3/material": {
-            "import": "./tailwind/v3/material-tokens.tailwind.js",
-            "require": "./tailwind/v3/material-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-material.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-material.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/material": {
+            "import": "./tailwind/v3/plugins/mosaik-material.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-material.tailwind.plugin.cjs"
         },
         "./tailwind/v3/memphis": {
-            "import": "./tailwind/v3/memphis-tokens.tailwind.js",
-            "require": "./tailwind/v3/memphis-tokens.tailwind.js"
+            "import": "./tailwind/v3/mosaik-memphis.tailwind.config.cjs",
+            "require": "./tailwind/v3/mosaik-memphis.tailwind.config.cjs"
+        },
+        "./tailwind/v3/plugins/memphis": {
+            "import": "./tailwind/v3/plugins/mosaik-memphis.tailwind.plugin.cjs",
+            "require": "./tailwind/v3/plugins/mosaik-memphis.tailwind.plugin.cjs"
         }
     }
 }

package/tailwind/v3/mosaik-bootstrap.tailwind.config.cjs

@@ -0,0 +1,105 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "DEFAULT": "'Inter', Roboto, Helvetica, sans-serif"
+      },
+      "spacing": {
+        "layout-radius": "12px",
+        "layout-space": "8px",
+        "layout-thickness": "2px",
+        "size-tiny": "2px",
+        "size-small": "4px",
+        "size-medium": "8px",
+        "size-large": "16px",
+        "size-giant": "32px"
+      },
+      "colors": {
+        "primary": {
+          "100": "#cfe2ff",
+          "200": "#9ec5fe",
+          "300": "#6ea8fe",
+          "400": "#3d8bfd",
+          "500": "#0d6efd",
+          "600": "#0a58ca",
+          "700": "#084298",
+          "800": "#052c65",
+          "900": "#031633"
+        },
+        "secondary": {
+          "100": "#f8f9fa",
+          "200": "#e9ecef",
+          "300": "#dee2e6",
+          "400": "#ced4da",
+          "500": "#adb5bd",
+          "600": "#6c757d",
+          "700": "#495057",
+          "800": "#343a40",
+          "900": "#212529"
+        },
+        "primary-dark": {
+          "100": "#cfe2ff",
+          "200": "#9ec5fe",
+          "300": "#6ea8fe",
+          "400": "#3d8bfd",
+          "500": "#0d6efd",
+          "600": "#0a58ca",
+          "700": "#084298",
+          "800": "#052c65",
+          "900": "#031633"
+        },
+        "secondary-dark": {
+          "100": "#f8f9fa",
+          "200": "#e9ecef",
+          "300": "#dee2e6",
+          "400": "#ced4da",
+          "500": "#adb5bd",
+          "600": "#6c757d",
+          "700": "#495057",
+          "800": "#343a40",
+          "900": "#212529"
+        }
+      },
+      "fontSize": {
+        "headline1": "80px",
+        "headline2": "72px",
+        "headline3": "64px",
+        "headline4": "56px",
+        "headline5": "48px",
+        "headline6": "40px"
+      },
+      "lineHeight": {
+        "headline1": "1.2",
+        "headline2": "1.2",
+        "headline3": "1.2",
+        "headline4": "1.2",
+        "headline5": "1.2",
+        "headline6": "1.2"
+      },
+      "fontWeight": {
+        "headline1": "300",
+        "headline2": "300",
+        "headline3": "300",
+        "headline4": "300",
+        "headline5": "300",
+        "headline6": "300"
+      },
+      "letterSpacing": {
+        "headline1": "0",
+        "headline2": "0",
+        "headline3": "0",
+        "headline4": "0",
+        "headline5": "0",
+        "headline6": "0"
+      }
+    }
+  }
+};

package/tailwind/v3/mosaik-cosmopolitan.tailwind.config.cjs

@@ -0,0 +1,67 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "sans": "'Noto Sans', sans-serif",
+        "heading": "'Noto Sans', sans-serif",
+        "content": "'Noto Sans', sans-serif",
+        "button": "'Noto Sans', sans-serif"
+      },
+      "spacing": {
+        "radius": "3px",
+        "space": "8px",
+        "thickness": "1px",
+        "size-tiny": "2px",
+        "size-small": "4px",
+        "size-medium": "8px",
+        "size-large": "16px",
+        "size-giant": "32px"
+      },
+      "colors": {
+        "primary": {
+          "0": "#ffffff",
+          "100": "#fed7ea",
+          "500": "#dc1884"
+        },
+        "primary-dark": {
+          "0": "#000000",
+          "100": "#4b0225",
+          "500": "#dc1884"
+        }
+      },
+      "fontSize": {
+        "heading": "24px",
+        "content": "16px",
+        "button": "16px"
+      },
+      "lineHeight": {
+        "heading": "28px",
+        "content": "20px",
+        "button": "20px"
+      },
+      "fontWeight": {
+        "heading": "300",
+        "content": "300",
+        "button": "700"
+      },
+      "letterSpacing": {
+        "heading": "-0.25px",
+        "content": "-0.25px",
+        "button": "-0.25px"
+      },
+      "transitionDuration": {
+        "short": "200ms",
+        "medium": "400ms",
+        "long": "600ms"
+      }
+    }
+  }
+};

package/tailwind/v3/mosaik-fluent.tailwind.config.cjs

@@ -0,0 +1,44 @@
+// ------------------------------------------------------------------------------
+// <auto-generated>
+//     This code was generated by a tool.
+//     Changes to this file may cause incorrect behavior and will be lost if
+//     the code is regenerated.
+// </auto-generated>
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "DEFAULT": "'Inter', Roboto, Helvetica, sans-serif"
+      },
+      "spacing": {
+        "layout-radius": "12px",
+        "layout-space": "8px",
+        "layout-thickness": "2px",
+        "size-tiny": "2px",
+        "size-small": "4px",
+        "size-medium": "8px",
+        "size-large": "16px",
+        "size-giant": "32px"
+      },
+      "colors": {
+        "color": {
+          "light-primary": "#0078D4",
+          "light-secondary": "#005A9E",
+          "light-tertiary": "#003E6B"
+        }
+      },
+      "transitionDuration": {
+        "durationUltraFast": "50ms",
+        "durationFaster": "100ms",
+        "durationFast": "150ms",
+        "durationNormal": "200ms",
+        "durationGentle": "250ms",
+        "durationSlow": "300ms",
+        "durationSlower": "400ms",
+        "durationUltraSlow": "500ms"
+      }
+    }
+  }
+};