@breadstone/mosaik-themes 0.0.174 → 0.0.175

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/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.175",
     "description": "Mosaik elements various themes.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -15,7 +15,7 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.174",
+        "@breadstone/mosaik-elements": "^0.0.175",
         "@ctrl/tinycolor": "^4.2.0",
         "tslib": "^2.8.1"
     },
@@ -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,79 @@
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "font.family": "'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": {
+              "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"
+            }
+          },
+          "dark": {
+            "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"
+            }
+          }
+        }
+      },
+      "fontSize": {
+        "typography.headline1.fontSize": "80px",
+        "typography.headline2.fontSize": "72px",
+        "typography.headline3.fontSize": "64px",
+        "typography.headline4.fontSize": "56px",
+        "typography.headline5.fontSize": "48px",
+        "typography.headline6.fontSize": "40px"
+      }
+    }
+  }
+};

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

@@ -0,0 +1,246 @@
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "font.family": "'Noto Sans', sans-serif",
+        "typography.heading.fontFamily": "'Noto Sans', sans-serif",
+        "typography.content.fontFamily": "'Noto Sans', sans-serif",
+        "typography.button.fontFamily": "'Noto Sans', sans-serif"
+      },
+      "spacing": {
+        "layout.radius": "3px",
+        "layout.space": "8px",
+        "layout.thickness": "1px",
+        "typography.heading.lineHeight": "28px",
+        "typography.content.lineHeight": "20px",
+        "typography.button.lineHeight": "20px",
+        "elevation.light.light.offsetX.0": "0px",
+        "elevation.light.light.offsetX.1": "0px",
+        "elevation.light.light.offsetY.0": "0px",
+        "elevation.light.light.offsetY.1": "1px",
+        "elevation.light.light.blur.0": "2px",
+        "elevation.light.light.blur.1": "2px",
+        "elevation.light.light.spread.0": "0px",
+        "elevation.light.light.spread.1": "0px",
+        "elevation.light.semilight.offsetX.0": "0px",
+        "elevation.light.semilight.offsetX.1": "0px",
+        "elevation.light.semilight.offsetY.0": "0px",
+        "elevation.light.semilight.offsetY.1": "2px",
+        "elevation.light.semilight.blur.0": "2px",
+        "elevation.light.semilight.blur.1": "4px",
+        "elevation.light.semilight.spread.0": "0px",
+        "elevation.light.semilight.spread.1": "0px",
+        "elevation.light.regular.offsetX.0": "0px",
+        "elevation.light.regular.offsetX.1": "0px",
+        "elevation.light.regular.offsetY.0": "0px",
+        "elevation.light.regular.offsetY.1": "4px",
+        "elevation.light.regular.blur.0": "2px",
+        "elevation.light.regular.blur.1": "8px",
+        "elevation.light.regular.spread.0": "0px",
+        "elevation.light.regular.spread.1": "0px",
+        "elevation.light.semibold.offsetX.0": "0px",
+        "elevation.light.semibold.offsetX.1": "0px",
+        "elevation.light.semibold.offsetY.0": "0px",
+        "elevation.light.semibold.offsetY.1": "8px",
+        "elevation.light.semibold.blur.0": "2px",
+        "elevation.light.semibold.blur.1": "16px",
+        "elevation.light.semibold.spread.0": "0px",
+        "elevation.light.semibold.spread.1": "0px",
+        "elevation.light.bold.offsetX.0": "0px",
+        "elevation.light.bold.offsetX.1": "0px",
+        "elevation.light.bold.offsetY.0": "0px",
+        "elevation.light.bold.offsetY.1": "14px",
+        "elevation.light.bold.blur.0": "8px",
+        "elevation.light.bold.blur.1": "28px",
+        "elevation.light.bold.spread.0": "0px",
+        "elevation.light.bold.spread.1": "0px",
+        "elevation.light.extrabold.offsetX.0": "0px",
+        "elevation.light.extrabold.offsetX.1": "0px",
+        "elevation.light.extrabold.offsetY.0": "0px",
+        "elevation.light.extrabold.offsetY.1": "32px",
+        "elevation.light.extrabold.blur.0": "8px",
+        "elevation.light.extrabold.blur.1": "64px",
+        "elevation.light.extrabold.spread.0": "0px",
+        "elevation.light.extrabold.spread.1": "0px",
+        "elevation.dark.light.offsetX.0": "0px",
+        "elevation.dark.light.offsetX.1": "0px",
+        "elevation.dark.light.offsetY.0": "0px",
+        "elevation.dark.light.offsetY.1": "1px",
+        "elevation.dark.light.blur.0": "2px",
+        "elevation.dark.light.blur.1": "2px",
+        "elevation.dark.light.spread.0": "0px",
+        "elevation.dark.light.spread.1": "0px",
+        "elevation.dark.semilight.offsetX.0": "0px",
+        "elevation.dark.semilight.offsetX.1": "0px",
+        "elevation.dark.semilight.offsetY.0": "0px",
+        "elevation.dark.semilight.offsetY.1": "2px",
+        "elevation.dark.semilight.blur.0": "2px",
+        "elevation.dark.semilight.blur.1": "4px",
+        "elevation.dark.semilight.spread.0": "0px",
+        "elevation.dark.semilight.spread.1": "0px",
+        "elevation.dark.regular.offsetX.0": "0px",
+        "elevation.dark.regular.offsetX.1": "0px",
+        "elevation.dark.regular.offsetY.0": "0px",
+        "elevation.dark.regular.offsetY.1": "4px",
+        "elevation.dark.regular.blur.0": "2px",
+        "elevation.dark.regular.blur.1": "8px",
+        "elevation.dark.regular.spread.0": "0px",
+        "elevation.dark.regular.spread.1": "0px",
+        "elevation.dark.semibold.offsetX.0": "0px",
+        "elevation.dark.semibold.offsetX.1": "0px",
+        "elevation.dark.semibold.offsetY.0": "0px",
+        "elevation.dark.semibold.offsetY.1": "8px",
+        "elevation.dark.semibold.blur.0": "2px",
+        "elevation.dark.semibold.blur.1": "16px",
+        "elevation.dark.semibold.spread.0": "0px",
+        "elevation.dark.semibold.spread.1": "0px",
+        "elevation.dark.bold.offsetX.0": "0px",
+        "elevation.dark.bold.offsetX.1": "0px",
+        "elevation.dark.bold.offsetY.0": "0px",
+        "elevation.dark.bold.offsetY.1": "14px",
+        "elevation.dark.bold.blur.0": "8px",
+        "elevation.dark.bold.blur.1": "28px",
+        "elevation.dark.bold.spread.0": "0px",
+        "elevation.dark.bold.spread.1": "0px",
+        "elevation.dark.extrabold.offsetX.0": "0px",
+        "elevation.dark.extrabold.offsetX.1": "0px",
+        "elevation.dark.extrabold.offsetY.0": "0px",
+        "elevation.dark.extrabold.offsetY.1": "32px",
+        "elevation.dark.extrabold.blur.0": "8px",
+        "elevation.dark.extrabold.blur.1": "64px",
+        "elevation.dark.extrabold.spread.0": "0px",
+        "elevation.dark.extrabold.spread.1": "0px",
+        "size.tiny": "2px",
+        "size.small": "4px",
+        "size.medium": "8px",
+        "size.large": "16px",
+        "size.giant": "32px"
+      },
+      "colors": {
+        "color": {
+          "light": {
+            "primary": {
+              "0": "#ffffff",
+              "100": "#fed7ea",
+              "500": "#dc1884"
+            }
+          },
+          "dark": {
+            "primary": {
+              "0": "#000000",
+              "100": "#4b0225",
+              "500": "#dc1884"
+            }
+          }
+        },
+        "elevation": {
+          "light": {
+            "light": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            },
+            "semilight": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            },
+            "regular": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            },
+            "semibold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            },
+            "bold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            },
+            "extrabold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.12)",
+                "1": "rgba(0, 0, 0, 0.14)"
+              }
+            }
+          },
+          "dark": {
+            "light": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            },
+            "semilight": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            },
+            "regular": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            },
+            "semibold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            },
+            "bold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            },
+            "extrabold": {
+              "color": {
+                "0": "rgba(0, 0, 0, 0.24)",
+                "1": "rgba(0, 0, 0, 0.28)"
+              }
+            }
+          }
+        }
+      },
+      "fontSize": {
+        "typography.heading.fontSize": "24px",
+        "typography.content.fontSize": "16px",
+        "typography.button.fontSize": "16px"
+      },
+      "letterSpacing": {
+        "typography.heading.letterSpacing": "-0.25px",
+        "typography.content.letterSpacing": "-0.25px",
+        "typography.button.letterSpacing": "-0.25px"
+      },
+      "boxShadow": {
+        "elevation-light-light-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-light-semilight-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-light-regular-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-light-semibold-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-light-bold-_": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-light-extrabold-_": "0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14)",
+        "elevation-dark-light-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28)",
+        "elevation-dark-semilight-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28)",
+        "elevation-dark-regular-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28)",
+        "elevation-dark-semibold-_": "0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28)",
+        "elevation-dark-bold-_": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28)",
+        "elevation-dark-extrabold-_": "0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28)"
+      },
+      "transitionDuration": {
+        "duration.short": "200ms",
+        "duration.medium": "400ms",
+        "duration.long": "600ms"
+      }
+    }
+  }
+};

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

@@ -0,0 +1,38 @@
+module.exports = {
+  "theme": {
+    "extend": {
+      "fontFamily": {
+        "font.family": "'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",
+            "secondary": "#005A9E",
+            "tertiary": "#003E6B"
+          }
+        }
+      },
+      "transitionDuration": {
+        "duration.durationUltraFast": "50ms",
+        "duration.durationFaster": "100ms",
+        "duration.durationFast": "150ms",
+        "duration.durationNormal": "200ms",
+        "duration.durationGentle": "250ms",
+        "duration.durationSlow": "300ms",
+        "duration.durationSlower": "400ms",
+        "duration.durationUltraSlow": "500ms"
+      }
+    }
+  }
+};