@breadstone/mosaik-themes 0.0.173 → 0.0.174

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.0.173 (2025-11-26)
+
+### 🚀 Features
+
+- Enhance Color Palette Builder and Theme Generation ([7b7a885f6a](https://github.com/RueDeRennes/mosaik/commit/7b7a885f6a))
+
+## 0.0.172 (2025-11-21)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
 ## 0.0.171 (2025-11-21)
 
 ### 🚀 Features

package/Themes/___bootstrap-tokens.css

@@ -0,0 +1,91 @@
+:root {
+  --name: "bootstrap";
+  --font-family: 'Inter', Roboto, Helvetica, sans-serif;
+  --layout-radius: 12px;
+  --layout-space: 8px;
+  --layout-thickness: 2px;
+  --color-light-primary-100: #cfe2ff;
+  --color-light-primary-200: #9ec5fe;
+  --color-light-primary-300: #6ea8fe;
+  --color-light-primary-400: #3d8bfd;
+  --color-light-primary-500: #0d6efd;
+  --color-light-primary-600: #0a58ca;
+  --color-light-primary-700: #084298;
+  --color-light-primary-800: #052c65;
+  --color-light-primary-900: #031633;
+  --color-light-secondary-100: #f8f9fa;
+  --color-light-secondary-200: #e9ecef;
+  --color-light-secondary-300: #dee2e6;
+  --color-light-secondary-400: #ced4da;
+  --color-light-secondary-500: #adb5bd;
+  --color-light-secondary-600: #6c757d;
+  --color-light-secondary-700: #495057;
+  --color-light-secondary-800: #343a40;
+  --color-light-secondary-900: #212529;
+  --color-dark-primary-100: #cfe2ff;
+  --color-dark-primary-200: #9ec5fe;
+  --color-dark-primary-300: #6ea8fe;
+  --color-dark-primary-400: #3d8bfd;
+  --color-dark-primary-500: #0d6efd;
+  --color-dark-primary-600: #0a58ca;
+  --color-dark-primary-700: #084298;
+  --color-dark-primary-800: #052c65;
+  --color-dark-primary-900: #031633;
+  --color-dark-secondary-100: #f8f9fa;
+  --color-dark-secondary-200: #e9ecef;
+  --color-dark-secondary-300: #dee2e6;
+  --color-dark-secondary-400: #ced4da;
+  --color-dark-secondary-500: #adb5bd;
+  --color-dark-secondary-600: #6c757d;
+  --color-dark-secondary-700: #495057;
+  --color-dark-secondary-800: #343a40;
+  --color-dark-secondary-900: #212529;
+  --typography-headline1-font-size: 80px;
+  --typography-headline1-line-height: 1.2;
+  --typography-headline1-font-weight: 300;
+  --typography-headline1-letter-spacing: 0;
+  --typography-headline1-text-decoration: none;
+  --typography-headline1-text-transform: none;
+  --typography-headline2-font-size: 72px;
+  --typography-headline2-line-height: 1.2;
+  --typography-headline2-font-weight: 300;
+  --typography-headline2-letter-spacing: 0;
+  --typography-headline2-text-decoration: none;
+  --typography-headline2-text-transform: none;
+  --typography-headline3-font-size: 64px;
+  --typography-headline3-line-height: 1.2;
+  --typography-headline3-font-weight: 300;
+  --typography-headline3-letter-spacing: 0;
+  --typography-headline3-text-decoration: none;
+  --typography-headline3-text-transform: none;
+  --typography-headline4-font-size: 56px;
+  --typography-headline4-line-height: 1.2;
+  --typography-headline4-font-weight: 300;
+  --typography-headline4-letter-spacing: 0;
+  --typography-headline4-text-decoration: none;
+  --typography-headline4-text-transform: none;
+  --typography-headline5-font-size: 48px;
+  --typography-headline5-line-height: 1.2;
+  --typography-headline5-font-weight: 300;
+  --typography-headline5-letter-spacing: 0;
+  --typography-headline5-text-decoration: none;
+  --typography-headline5-text-transform: none;
+  --typography-headline6-font-size: 40px;
+  --typography-headline6-line-height: 1.2;
+  --typography-headline6-font-weight: 300;
+  --typography-headline6-letter-spacing: 0;
+  --typography-headline6-text-decoration: none;
+  --typography-headline6-text-transform: none;
+  --elevation-none: none;
+  --size-tiny: 2px;
+  --size-small: 4px;
+  --size-medium: 8px;
+  --size-large: 16px;
+  --size-giant: 32px;
+  --size-key-tiny: "tiny";
+  --size-key-small: "small";
+  --size-key-medium: "medium";
+  --size-key-large: "large";
+  --size-key-giant: "giant";
+  --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
+}

package/Themes/___cosmopolitan-tokens.css

@@ -0,0 +1,213 @@
+:root {
+  --name: "cosmopolitan";
+  --font-family: 'Noto Sans', sans-serif;
+  --layout-radius: 3px;
+  --layout-space: 8px;
+  --layout-thickness: 1px;
+  --scheme-light-contrast: #ffffff;
+  --scheme-light-background: #ffffff;
+  --scheme-light-foreground: #000000;
+  --scheme-light-highlight: #E2E2E2;
+  --scheme-light-middlelight: #777777;
+  --scheme-light-lowlight: #4D4D4D;
+  --scheme-light-transparent: #FFFFFF00;
+  --scheme-light-semi-transparent: #FFFFFFAA;
+  --scheme-light-disabled: #B8B5B2;
+  --scheme-dark-contrast: #ffffff;
+  --scheme-dark-background: #2E2D2D;
+  --scheme-dark-foreground: #ffffff;
+  --scheme-dark-highlight: #333333;
+  --scheme-dark-middlelight: #666666;
+  --scheme-dark-lowlight: #999999;
+  --scheme-dark-transparent: #17171700;
+  --scheme-dark-semi-transparent: #171717aa;
+  --scheme-dark-disabled: #5C5956;
+  --color-light-primary-0: #ffffff;
+  --color-light-primary-100: #fed7ea;
+  --color-light-primary-500: #dc1884;
+  --color-dark-primary-0: #000000;
+  --color-dark-primary-100: #4b0225;
+  --color-dark-primary-500: #dc1884;
+  --typography-heading-font-size: 24px;
+  --typography-heading-line-height: 28px;
+  --typography-heading-font-weight: 300;
+  --typography-heading-letter-spacing: -0.25px;
+  --typography-heading-text-decoration: none;
+  --typography-heading-text-transform: none;
+  --typography-content-font-size: 16px;
+  --typography-content-line-height: 20px;
+  --typography-content-font-weight: 300;
+  --typography-content-letter-spacing: -0.25px;
+  --typography-content-text-decoration: none;
+  --typography-content-text-transform: none;
+  --typography-button-font-size: 16px;
+  --typography-button-line-height: 20px;
+  --typography-button-font-weight: 700;
+  --typography-button-letter-spacing: -0.25px;
+  --typography-button-text-decoration: none;
+  --typography-button-text-transform: uppercase;
+  --elevation-none: none;
+  --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-light-offset-x-0: 0px;
+  --elevation-light-light-offset-x-1: 0px;
+  --elevation-light-light-offset-y-0: 0px;
+  --elevation-light-light-offset-y-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-light-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-light-color-1: 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-semilight-offset-x-0: 0px;
+  --elevation-light-semilight-offset-x-1: 0px;
+  --elevation-light-semilight-offset-y-0: 0px;
+  --elevation-light-semilight-offset-y-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-semilight-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-semilight-color-1: 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-regular-offset-x-0: 0px;
+  --elevation-light-regular-offset-x-1: 0px;
+  --elevation-light-regular-offset-y-0: 0px;
+  --elevation-light-regular-offset-y-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-regular-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-regular-color-1: 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-semibold-offset-x-0: 0px;
+  --elevation-light-semibold-offset-x-1: 0px;
+  --elevation-light-semibold-offset-y-0: 0px;
+  --elevation-light-semibold-offset-y-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-semibold-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-semibold-color-1: 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-bold-offset-x-0: 0px;
+  --elevation-light-bold-offset-x-1: 0px;
+  --elevation-light-bold-offset-y-0: 0px;
+  --elevation-light-bold-offset-y-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-bold-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-bold-color-1: 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-light-extrabold-offset-x-0: 0px;
+  --elevation-light-extrabold-offset-x-1: 0px;
+  --elevation-light-extrabold-offset-y-0: 0px;
+  --elevation-light-extrabold-offset-y-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-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
+  --elevation-light-extrabold-color-1: 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-light-offset-x-0: 0px;
+  --elevation-dark-light-offset-x-1: 0px;
+  --elevation-dark-light-offset-y-0: 0px;
+  --elevation-dark-light-offset-y-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-light-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-light-color-1: 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-semilight-offset-x-0: 0px;
+  --elevation-dark-semilight-offset-x-1: 0px;
+  --elevation-dark-semilight-offset-y-0: 0px;
+  --elevation-dark-semilight-offset-y-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-semilight-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-semilight-color-1: 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-regular-offset-x-0: 0px;
+  --elevation-dark-regular-offset-x-1: 0px;
+  --elevation-dark-regular-offset-y-0: 0px;
+  --elevation-dark-regular-offset-y-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-regular-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-regular-color-1: 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-semibold-offset-x-0: 0px;
+  --elevation-dark-semibold-offset-x-1: 0px;
+  --elevation-dark-semibold-offset-y-0: 0px;
+  --elevation-dark-semibold-offset-y-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-semibold-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-semibold-color-1: 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-bold-offset-x-0: 0px;
+  --elevation-dark-bold-offset-x-1: 0px;
+  --elevation-dark-bold-offset-y-0: 0px;
+  --elevation-dark-bold-offset-y-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-bold-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-bold-color-1: 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);
+  --elevation-dark-extrabold-offset-x-0: 0px;
+  --elevation-dark-extrabold-offset-x-1: 0px;
+  --elevation-dark-extrabold-offset-y-0: 0px;
+  --elevation-dark-extrabold-offset-y-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;
+  --elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
+  --elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
+  --size-tiny: 2px;
+  --size-small: 4px;
+  --size-medium: 8px;
+  --size-large: 16px;
+  --size-giant: 32px;
+  --size-key-tiny: "tiny";
+  --size-key-small: "small";
+  --size-key-medium: "medium";
+  --size-key-large: "large";
+  --size-key-giant: "giant";
+  --typography-key-heading: "heading";
+  --typography-key-content: "content";
+  --typography-key-button: "button";
+  --elevation-key-light: "light";
+  --elevation-key-semilight: "semilight";
+  --elevation-key-regular: "regular";
+  --elevation-key-semibold: "semibold";
+  --elevation-key-bold: "bold";
+  --elevation-key-extrabold: "extrabold";
+  --variant-primary: "primary";
+  --variant-secondary: "secondary";
+  --variant-tertiary: "tertiary";
+  --duration-short: 200ms;
+  --duration-medium: 400ms;
+  --duration-long: 600ms;
+  --typography-heading-font-family: var(--font-family);
+  --typography-content-font-family: var(--font-family);
+  --typography-button-font-family: var(--font-family);
+  --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
+  --elevation-key: var(--elevation-key-light) var(--elevation-key-semilight) var(--elevation-key-regular) var(--elevation-key-semibold) var(--elevation-key-bold) var(--elevation-key-extrabold);
+  --variant: var(--variant-primary);
+}

package/Themes/___fluent-tokens.css

@@ -0,0 +1,30 @@
+:root {
+  --name: "fluent";
+  --font-family: 'Inter', Roboto, Helvetica, sans-serif;
+  --layout-radius: 12px;
+  --layout-space: 8px;
+  --layout-thickness: 2px;
+  --color-light-primary: #0078D4;
+  --color-light-secondary: #005A9E;
+  --color-light-tertiary: #003E6B;
+  --elevation-none: none;
+  --size-tiny: 2px;
+  --size-small: 4px;
+  --size-medium: 8px;
+  --size-large: 16px;
+  --size-giant: 32px;
+  --size-key-tiny: "tiny";
+  --size-key-small: "small";
+  --size-key-medium: "medium";
+  --size-key-large: "large";
+  --size-key-giant: "giant";
+  --duration-duration-ultra-fast: 50ms;
+  --duration-duration-faster: 100ms;
+  --duration-duration-fast: 150ms;
+  --duration-duration-normal: 200ms;
+  --duration-duration-gentle: 250ms;
+  --duration-duration-slow: 300ms;
+  --duration-duration-slower: 400ms;
+  --duration-duration-ultra-slow: 500ms;
+  --size-key: var(--size-key-tiny) var(--size-key-small) var(--size-key-medium) var(--size-key-large) var(--size-key-giant);
+}