@breadstone/mosaik-themes 0.0.205 → 0.0.206

package/CHANGELOG.md

@@ -1,3 +1,120 @@
+## 0.0.205 (2025-12-07)
+
+### 🩹 Fixes
+
+- **buttons): update stack-gap variable usage in FloatingActionButton, RepeatButton, SplitButton, ToggleButton themes fix(card): update stack-gap variable usage in CardActions theme fix(expander): update stack-gap variable usage in Expander theme fix(comment): update stack-gap variable usage in Comment theme fix(dialog): update stack-gap variable usage in DialogActions theme fix(segment): update stack-gap variable usage in SegmentItem theme fix(tab-strip): update stack-gap variable usage in TabStripItem theme fix(states): update stack-gap variable usage in Busy, Empty, Error, and Success state themes chore(package:** bump version to 0.0.204 in package.json ([878a490c1e](https://github.com/RueDeRennes/mosaik/commit/878a490c1e))
+
+## 0.0.204 (2025-12-07)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.203 (2025-12-06)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.202 (2025-12-06)
+
+### 🚀 Features
+
+- **error, hint:** add textOverflow property to Error and Hint components ([131d8bec1e](https://github.com/RueDeRennes/mosaik/commit/131d8bec1e))
+
+## 0.0.201 (2025-12-05)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.200 (2025-12-05)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.199 (2025-12-05)
+
+### 🩹 Fixes
+
+- **package:** add missing newline at end of file ([e7bbe4e7c1](https://github.com/RueDeRennes/mosaik/commit/e7bbe4e7c1))
+
+## 0.0.198 (2025-12-05)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.197 (2025-12-05)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.196 (2025-12-05)
+
+### 🚀 Features
+
+- **event-hub:** add Event Hub pattern implementation for Angular 2025 ([88dc4f7404](https://github.com/RueDeRennes/mosaik/commit/88dc4f7404))
+
+### 🩹 Fixes
+
+- **keywords:** add Event Bus and Message Bus to event hub documentation ([69cafcf76f](https://github.com/RueDeRennes/mosaik/commit/69cafcf76f))
+
+## 0.0.195 (2025-12-03)
+
+### 🩹 Fixes
+
+- **package:** add missing newline at end of file in package.json ([a9bf15349b](https://github.com/RueDeRennes/mosaik/commit/a9bf15349b))
+
+## 0.0.194 (2025-12-03)
+
+### 🩹 Fixes
+
+- **Cdk:** export FormFieldStatusDirective alongside FORM_STATUS_HOST from FormStatusDirective ([c8521cd4ff](https://github.com/RueDeRennes/mosaik/commit/c8521cd4ff))
+
+## 0.0.193 (2025-12-03)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.192 (2025-12-03)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.191 (2025-12-03)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.190 (2025-12-02)
+
+### 🩹 Fixes
+
+- **choice-group:** add flex property to root part for improved layout consistency ([8bd80ed40b](https://github.com/RueDeRennes/mosaik/commit/8bd80ed40b))
+
+## 0.0.189 (2025-12-02)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.188 (2025-12-02)
+
+### 🚀 Features
+
+- **directives:** update FormFieldDirective to improve error handling and usage documentation ([7c07bb43fd](https://github.com/RueDeRennes/mosaik/commit/7c07bb43fd))
+
+## 0.0.187 (2025-12-02)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.186 (2025-12-02)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.185 (2025-12-02)
+
+This was a version bump only for mosaik-themes to align it with other projects, there were no code changes.
+
+## 0.0.184 (2025-12-02)
+
+### 🚀 Features
+
+- **eslint:** enhance ESLint configuration and add .eslintignore file ([4b3deb5566](https://github.com/RueDeRennes/mosaik/commit/4b3deb5566))
+- **errors:** add ErrorKindDirective and FormFieldErrorDirective for enhanced error handling ([813bb9130f](https://github.com/RueDeRennes/mosaik/commit/813bb9130f))
+
+## 0.0.183 (2025-11-30)
+
+### 🚀 Features
+
+- **platform:** implement platform adapter for browser and Node.js compatibility ([662092484e](https://github.com/RueDeRennes/mosaik/commit/662092484e))
+
 ## 0.0.182 (2025-11-30)
 
 ### 🚀 Features

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@breadstone/mosaik-themes",
-    "version": "0.0.205",
+    "version": "0.0.206",
     "description": "Mosaik elements various themes.",
     "license": "MIT",
     "author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
@@ -14,7 +14,7 @@
         "url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
     },
     "dependencies": {
-        "@breadstone/mosaik-elements": "^0.0.205",
+        "@breadstone/mosaik-elements": "^0.0.206",
         "chroma-js": "^3.2.0",
         "tslib": "^2.8.1"
     },
@@ -28,6 +28,12 @@
         "./tailwind/v3": {
             "types": "./tailwind/v3/index.d.ts",
             "require": "./tailwind/v3/index.js"
-        }
+        },
+        "./tailwind/v4/bootstrap": "./tailwind/v4/bootstrapTailwindPresets.css",
+        "./tailwind/v4/cosmopolitan": "./tailwind/v4/cosmopolitanTailwindPresets.css",
+        "./tailwind/v4/fluent": "./tailwind/v4/fluentTailwindPresets.css",
+        "./tailwind/v4/joy": "./tailwind/v4/joyTailwindPresets.css",
+        "./tailwind/v4/material": "./tailwind/v4/materialTailwindPresets.css",
+        "./tailwind/v4/memphis": "./tailwind/v4/memphisTailwindPresets.css"
     }
 }

package/tailwind/v4/bootstrapTailwindPresets.css

@@ -0,0 +1,86 @@
+/* ------------------------------------------------------------------------------
+ * <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>
+ * ------------------------------------------------------------------------------ */
+
+@theme {
+  /* border-width */
+  --border-width-layout-thickness: 2px;
+
+  /* color */
+  --color-primary-100: #cfe2ff;
+  --color-primary-100-dark: #cfe2ff;
+  --color-primary-200: #9ec5fe;
+  --color-primary-200-dark: #9ec5fe;
+  --color-primary-300: #6ea8fe;
+  --color-primary-300-dark: #6ea8fe;
+  --color-primary-400: #3d8bfd;
+  --color-primary-400-dark: #3d8bfd;
+  --color-primary-500: #0d6efd;
+  --color-primary-500-dark: #0d6efd;
+  --color-primary-600: #0a58ca;
+  --color-primary-600-dark: #0a58ca;
+  --color-primary-700: #084298;
+  --color-primary-700-dark: #084298;
+  --color-primary-800: #052c65;
+  --color-primary-800-dark: #052c65;
+  --color-primary-900: #031633;
+  --color-primary-900-dark: #031633;
+  --color-secondary-100: #f8f9fa;
+  --color-secondary-100-dark: #f8f9fa;
+  --color-secondary-200: #e9ecef;
+  --color-secondary-200-dark: #e9ecef;
+  --color-secondary-300: #dee2e6;
+  --color-secondary-300-dark: #dee2e6;
+  --color-secondary-400: #ced4da;
+  --color-secondary-400-dark: #ced4da;
+  --color-secondary-500: #adb5bd;
+  --color-secondary-500-dark: #adb5bd;
+  --color-secondary-600: #6c757d;
+  --color-secondary-600-dark: #6c757d;
+  --color-secondary-700: #495057;
+  --color-secondary-700-dark: #495057;
+  --color-secondary-800: #343a40;
+  --color-secondary-800-dark: #343a40;
+  --color-secondary-900: #212529;
+  --color-secondary-900-dark: #212529;
+
+  /* font-family */
+  --font-family-family: 'Inter', Roboto, Helvetica, sans-serif;
+
+  /* font-weight */
+  --font-weight-headline1: 300;
+  --font-weight-headline2: 300;
+  --font-weight-headline3: 300;
+  --font-weight-headline4: 300;
+  --font-weight-headline5: 300;
+  --font-weight-headline6: 300;
+
+  /* letter-spacing */
+  --letter-spacing-headline1: 0;
+  --letter-spacing-headline2: 0;
+  --letter-spacing-headline3: 0;
+  --letter-spacing-headline4: 0;
+  --letter-spacing-headline5: 0;
+  --letter-spacing-headline6: 0;
+
+  /* line-height */
+  --line-height-headline1: 1.2;
+  --line-height-headline2: 1.2;
+  --line-height-headline3: 1.2;
+  --line-height-headline4: 1.2;
+  --line-height-headline5: 1.2;
+  --line-height-headline6: 1.2;
+
+  /* radius */
+  --radius-layout-radius: 12px;
+
+  /* shadow */
+  --shadow-none: none;
+
+  /* spacing */
+  --spacing-space: 8px;
+}

package/tailwind/v4/cosmopolitanTailwindPresets.css

@@ -0,0 +1,85 @@
+/* ------------------------------------------------------------------------------
+ * <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>
+ * ------------------------------------------------------------------------------ */
+
+@theme {
+  /* border-width */
+  --border-width-layout-thickness: 1px;
+
+  /* color */
+  --color-primary-0: oklch(100.00% 0.0000 NaN);
+  --color-primary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-primary-100: oklch(91.74% 0.0497 347.24);
+  --color-primary-100-dark: oklch(26.98% 0.1065 359.19);
+  --color-primary-500: oklch(59.06% 0.2325 355.11);
+  --color-primary-500-dark: oklch(59.06% 0.2325 355.11);
+  --color-scheme-background: oklch(100.00% 0.0000 NaN);
+  --color-scheme-background-dark: oklch(29.82% 0.0014 17.61);
+  --color-scheme-contrast: oklch(100.00% 0.0000 NaN);
+  --color-scheme-contrast-dark: oklch(100.00% 0.0000 NaN);
+  --color-scheme-disabled: oklch(77.47% 0.0055 67.77);
+  --color-scheme-disabled-dark: oklch(46.58% 0.0062 67.68);
+  --color-scheme-foreground: oklch(0.00% 0.0000 NaN);
+  --color-scheme-foreground-dark: oklch(100.00% 0.0000 NaN);
+  --color-scheme-highlight: oklch(91.28% 0.0000 NaN);
+  --color-scheme-highlight-dark: oklch(32.11% 0.0000 NaN);
+  --color-scheme-lowlight: oklch(42.02% 0.0000 NaN);
+  --color-scheme-lowlight-dark: oklch(68.30% 0.0000 NaN);
+  --color-scheme-middlelight: oklch(56.93% 0.0000 NaN);
+  --color-scheme-middlelight-dark: oklch(51.03% 0.0000 NaN);
+  --color-scheme-semiTransparent: oklch(100.00% 0.0000 NaN / 0.67);
+  --color-scheme-semiTransparent-dark: oklch(20.46% 0.0000 NaN / 0.67);
+  --color-scheme-transparent: oklch(100.00% 0.0000 NaN / 0.00);
+  --color-scheme-transparent-dark: oklch(20.46% 0.0000 NaN / 0.00);
+
+  /* font-family */
+  --font-family-button: 'Noto Sans', sans-serif;
+  --font-family-content: 'Noto Sans', sans-serif;
+  --font-family-family: 'Noto Sans', sans-serif;
+  --font-family-heading: 'Noto Sans', sans-serif;
+
+  /* font-weight */
+  --font-weight-button: 700;
+  --font-weight-content: 300;
+  --font-weight-heading: 300;
+
+  /* letter-spacing */
+  --letter-spacing-button: -0.25px;
+  --letter-spacing-content: -0.25px;
+  --letter-spacing-heading: -0.25px;
+
+  /* line-height */
+  --line-height-button: 20px;
+  --line-height-content: 20px;
+  --line-height-heading: 28px;
+
+  /* radius */
+  --radius-layout-radius: 3px;
+
+  /* shadow */
+  --shadow-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
+  --shadow-bold-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
+  --shadow-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
+  --shadow-extrabold-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
+  --shadow-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
+  --shadow-light-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
+  --shadow-none: none;
+  --shadow-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
+  --shadow-regular-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
+  --shadow-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
+  --shadow-semibold-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
+  --shadow-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+  --shadow-semilight-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
+
+  /* spacing */
+  --spacing-space: 8px;
+
+  /* transition-duration */
+  --transition-duration-long: 600ms;
+  --transition-duration-medium: 400ms;
+  --transition-duration-short: 200ms;
+}

package/tailwind/v4/fluentTailwindPresets.css

@@ -0,0 +1,39 @@
+/* ------------------------------------------------------------------------------
+ * <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>
+ * ------------------------------------------------------------------------------ */
+
+@theme {
+  /* border-width */
+  --border-width-layout-thickness: 2px;
+
+  /* color */
+  --color-primary: #0078D4;
+  --color-secondary: #005A9E;
+  --color-tertiary: #003E6B;
+
+  /* font-family */
+  --font-family-family: 'Inter', Roboto, Helvetica, sans-serif;
+
+  /* radius */
+  --radius-layout-radius: 12px;
+
+  /* shadow */
+  --shadow-none: none;
+
+  /* spacing */
+  --spacing-space: 8px;
+
+  /* transition-duration */
+  --transition-duration-durationFast: 150ms;
+  --transition-duration-durationFaster: 100ms;
+  --transition-duration-durationGentle: 250ms;
+  --transition-duration-durationNormal: 200ms;
+  --transition-duration-durationSlow: 300ms;
+  --transition-duration-durationSlower: 400ms;
+  --transition-duration-durationUltraFast: 50ms;
+  --transition-duration-durationUltraSlow: 500ms;
+}

package/tailwind/v4/joyTailwindPresets.css

@@ -0,0 +1,319 @@
+/* ------------------------------------------------------------------------------
+ * <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>
+ * ------------------------------------------------------------------------------ */
+
+@theme {
+  /* border-width */
+  --border-width-layout-thickness: 2px;
+
+  /* color */
+  --color-danger-0: oklch(100.00% 0.0000 NaN);
+  --color-danger-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-danger-100: oklch(95.14% 0.0241 20.79);
+  --color-danger-100-dark: oklch(29.16% 0.1169 18.65);
+  --color-danger-200: oklch(87.87% 0.0643 20.84);
+  --color-danger-200-dark: oklch(36.34% 0.1413 20.63);
+  --color-danger-300: oklch(77.41% 0.1330 20.02);
+  --color-danger-300-dark: oklch(45.31% 0.1751 21.97);
+  --color-danger-400: oklch(67.11% 0.2042 23.57);
+  --color-danger-400-dark: oklch(55.98% 0.2080 24.57);
+  --color-danger-50: oklch(98.40% 0.0080 36.71);
+  --color-danger-50-dark: oklch(21.92% 0.0876 14.52);
+  --color-danger-500: oklch(55.98% 0.2080 24.57);
+  --color-danger-500-dark: oklch(67.11% 0.2042 23.57);
+  --color-danger-600: oklch(45.31% 0.1751 21.97);
+  --color-danger-600-dark: oklch(77.41% 0.1330 20.02);
+  --color-danger-700: oklch(36.34% 0.1413 20.63);
+  --color-danger-700-dark: oklch(87.87% 0.0643 20.84);
+  --color-danger-800: oklch(29.16% 0.1169 18.65);
+  --color-danger-800-dark: oklch(95.14% 0.0241 20.79);
+  --color-danger-900: oklch(21.92% 0.0876 14.52);
+  --color-danger-900-dark: oklch(98.40% 0.0080 36.71);
+  --color-highlight-0: oklch(100.00% 0.0000 NaN);
+  --color-highlight-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-highlight-100: oklch(95.10% 0.0298 307.19);
+  --color-highlight-100-dark: oklch(28.99% 0.1222 292.55);
+  --color-highlight-200: oklch(87.70% 0.0743 304.18);
+  --color-highlight-200-dark: oklch(36.12% 0.1494 293.98);
+  --color-highlight-300: oklch(77.21% 0.1405 302.22);
+  --color-highlight-300-dark: oklch(45.17% 0.1813 293.78);
+  --color-highlight-400: oklch(66.65% 0.1915 297.24);
+  --color-highlight-400-dark: oklch(55.72% 0.2094 295.22);
+  --color-highlight-50: oklch(98.30% 0.0123 317.91);
+  --color-highlight-50-dark: oklch(21.71% 0.0975 291.58);
+  --color-highlight-500: oklch(55.72% 0.2094 295.22);
+  --color-highlight-500-dark: oklch(66.65% 0.1915 297.24);
+  --color-highlight-600: oklch(45.17% 0.1813 293.78);
+  --color-highlight-600-dark: oklch(77.21% 0.1405 302.22);
+  --color-highlight-700: oklch(36.12% 0.1494 293.98);
+  --color-highlight-700-dark: oklch(87.70% 0.0743 304.18);
+  --color-highlight-800: oklch(28.99% 0.1222 292.55);
+  --color-highlight-800-dark: oklch(95.10% 0.0298 307.19);
+  --color-highlight-900: oklch(21.71% 0.0975 291.58);
+  --color-highlight-900-dark: oklch(98.30% 0.0123 317.91);
+  --color-info-0: oklch(100.00% 0.0000 NaN);
+  --color-info-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-info-100: oklch(94.76% 0.0284 238.21);
+  --color-info-100-dark: oklch(28.68% 0.0962 258.87);
+  --color-info-200: oklch(87.12% 0.0693 242.12);
+  --color-info-200-dark: oklch(35.06% 0.1310 258.67);
+  --color-info-300: oklch(75.94% 0.1278 250.45);
+  --color-info-300-dark: oklch(43.86% 0.1585 258.07);
+  --color-info-400: oklch(65.77% 0.1844 256.27);
+  --color-info-400-dark: oklch(54.72% 0.1933 257.47);
+  --color-info-50: oklch(98.20% 0.0092 242.79);
+  --color-info-50-dark: oklch(20.84% 0.0811 259.09);
+  --color-info-500: oklch(54.72% 0.1933 257.47);
+  --color-info-500-dark: oklch(65.77% 0.1844 256.27);
+  --color-info-600: oklch(43.86% 0.1585 258.07);
+  --color-info-600-dark: oklch(75.94% 0.1278 250.45);
+  --color-info-700: oklch(35.06% 0.1310 258.67);
+  --color-info-700-dark: oklch(87.12% 0.0693 242.12);
+  --color-info-800: oklch(28.68% 0.0962 258.87);
+  --color-info-800-dark: oklch(94.76% 0.0284 238.21);
+  --color-info-900: oklch(20.84% 0.0811 259.09);
+  --color-info-900-dark: oklch(98.20% 0.0092 242.79);
+  --color-neutral-0: oklch(100.00% 0.0000 NaN);
+  --color-neutral-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-neutral-100: oklch(94.12% 0.0053 286.52);
+  --color-neutral-100-dark: oklch(26.79% 0.0148 285.38);
+  --color-neutral-200: oklch(88.43% 0.0095 286.32);
+  --color-neutral-200-dark: oklch(39.06% 0.0320 284.84);
+  --color-neutral-300: oklch(78.98% 0.0182 286.03);
+  --color-neutral-300-dark: oklch(47.68% 0.0384 284.87);
+  --color-neutral-400: oklch(65.67% 0.0294 285.59);
+  --color-neutral-400-dark: oklch(56.46% 0.0383 285.12);
+  --color-neutral-50: oklch(97.64% 0.0013 287.31);
+  --color-neutral-50-dark: oklch(18.91% 0.0101 285.42);
+  --color-neutral-500: oklch(56.46% 0.0383 285.12);
+  --color-neutral-500-dark: oklch(65.67% 0.0294 285.59);
+  --color-neutral-600: oklch(47.68% 0.0384 284.87);
+  --color-neutral-600-dark: oklch(78.98% 0.0182 286.03);
+  --color-neutral-700: oklch(39.06% 0.0320 284.84);
+  --color-neutral-700-dark: oklch(88.43% 0.0095 286.32);
+  --color-neutral-800: oklch(26.79% 0.0148 285.38);
+  --color-neutral-800-dark: oklch(94.12% 0.0053 286.52);
+  --color-neutral-900: oklch(18.91% 0.0101 285.42);
+  --color-neutral-900-dark: oklch(97.64% 0.0013 287.31);
+  --color-primary-0: oklch(100.00% 0.0000 NaN);
+  --color-primary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-primary-100: #f8bcd0;
+  --color-primary-100-dark: oklch(38.85% 0.1431 8.52);
+  --color-primary-200: oklch(76.57% 0.1276 358.98);
+  --color-primary-200-dark: oklch(46.66% 0.1743 9.02);
+  --color-primary-300: oklch(68.78% 0.1797 1.97);
+  --color-primary-300-dark: oklch(54.73% 0.2066 9.46);
+  --color-primary-400: #ec407a;
+  --color-primary-400-dark: oklch(60.62% 0.2298 9.63);
+  --color-primary-50: oklch(94.05% 0.0282 355.51);
+  --color-primary-50-dark: oklch(23.55% 0.0784 5.22);
+  --color-primary-500: oklch(60.62% 0.2298 9.63);
+  --color-primary-500-dark: oklch(63.92% 0.2104 5.28);
+  --color-primary-600: oklch(54.73% 0.2066 9.46);
+  --color-primary-600-dark: oklch(68.78% 0.1797 1.97);
+  --color-primary-700: oklch(46.66% 0.1743 9.02);
+  --color-primary-700-dark: oklch(76.57% 0.1276 358.98);
+  --color-primary-800: oklch(38.85% 0.1431 8.52);
+  --color-primary-800-dark: oklch(85.51% 0.0733 356.98);
+  --color-primary-900: oklch(23.55% 0.0784 5.22);
+  --color-primary-900-dark: oklch(94.05% 0.0282 355.51);
+  --color-scheme-background: oklch(93.70% 0.0000 NaN);
+  --color-scheme-background-dark: oklch(19.57% 0.0000 NaN);
+  --color-scheme-contrast: oklch(100.00% 0.0000 NaN);
+  --color-scheme-contrast-dark: oklch(0.00% 0.0000 NaN);
+  --color-scheme-disabled: oklch(51.73% 0.0000 NaN);
+  --color-scheme-disabled-dark: oklch(39.79% 0.0000 NaN);
+  --color-scheme-foreground: oklch(38.62% 0.0207 251.11);
+  --color-scheme-foreground-dark: oklch(79.35% 0.0173 70.48);
+  --color-scheme-highlight: oklch(86.07% 0.0000 NaN);
+  --color-scheme-highlight-dark: oklch(30.12% 0.0000 NaN);
+  --color-scheme-lowlight: oklch(47.48% 0.0000 NaN);
+  --color-scheme-lowlight-dark: oklch(71.55% 0.0000 NaN);
+  --color-scheme-middlelight: oklch(63.34% 0.0000 NaN);
+  --color-scheme-middlelight-dark: oklch(56.24% 0.0000 NaN);
+  --color-scheme-selection: oklch(84.52% 0.0000 NaN / 0.44);
+  --color-scheme-selection-dark: oklch(84.52% 0.0000 NaN / 0.44);
+  --color-scheme-semiTransparent: oklch(100.00% 0.0000 NaN / 0.67);
+  --color-scheme-semiTransparent-dark: oklch(100.00% 0.0000 NaN / 0.03);
+  --color-scheme-transparent: oklch(100.00% 0.0000 NaN / 0.00);
+  --color-scheme-transparent-dark: oklch(100.00% 0.0000 NaN / 0.00);
+  --color-secondary-0: oklch(100.00% 0.0000 NaN);
+  --color-secondary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-secondary-100: oklch(89.61% 0.0571 149.74);
+  --color-secondary-100-dark: oklch(52.56% 0.1558 147.09);
+  --color-secondary-200: oklch(82.99% 0.0942 149.93);
+  --color-secondary-200-dark: oklch(57.54% 0.1673 147.83);
+  --color-secondary-300: oklch(76.70% 0.1351 149.12);
+  --color-secondary-300-dark: oklch(62.90% 0.1763 147.89);
+  --color-secondary-400: oklch(71.84% 0.1617 148.57);
+  --color-secondary-400-dark: oklch(67.23% 0.1848 147.88);
+  --color-secondary-50: oklch(95.77% 0.0241 151.10);
+  --color-secondary-50-dark: oklch(43.14% 0.1344 145.31);
+  --color-secondary-500: oklch(67.23% 0.1848 147.88);
+  --color-secondary-500-dark: oklch(71.84% 0.1617 148.57);
+  --color-secondary-600: oklch(62.90% 0.1763 147.89);
+  --color-secondary-600-dark: oklch(76.70% 0.1351 149.12);
+  --color-secondary-700: oklch(57.54% 0.1673 147.83);
+  --color-secondary-700-dark: oklch(82.99% 0.0942 149.93);
+  --color-secondary-800: oklch(52.56% 0.1558 147.09);
+  --color-secondary-800-dark: oklch(89.61% 0.0571 149.74);
+  --color-secondary-900: oklch(43.14% 0.1344 145.31);
+  --color-secondary-900-dark: oklch(95.77% 0.0241 151.10);
+  --color-success-0: oklch(100.00% 0.0000 NaN);
+  --color-success-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-success-100: oklch(94.20% 0.0448 151.23);
+  --color-success-100-dark: oklch(26.65% 0.0750 149.11);
+  --color-success-200: oklch(85.32% 0.1616 150.11);
+  --color-success-200-dark: oklch(33.49% 0.0936 148.36);
+  --color-success-300: oklch(73.96% 0.1674 149.48);
+  --color-success-300-dark: oklch(42.02% 0.1131 148.08);
+  --color-success-400: oklch(62.86% 0.1606 148.43);
+  --color-success-400-dark: oklch(51.86% 0.1383 147.98);
+  --color-success-50: oklch(98.64% 0.0165 150.99);
+  --color-success-50-dark: oklch(20.20% 0.0538 151.47);
+  --color-success-500: oklch(51.86% 0.1383 147.98);
+  --color-success-500-dark: oklch(62.86% 0.1606 148.43);
+  --color-success-600: oklch(42.02% 0.1131 148.08);
+  --color-success-600-dark: oklch(73.96% 0.1674 149.48);
+  --color-success-700: oklch(33.49% 0.0936 148.36);
+  --color-success-700-dark: oklch(85.32% 0.1616 150.11);
+  --color-success-800: oklch(26.65% 0.0750 149.11);
+  --color-success-800-dark: oklch(94.20% 0.0448 151.23);
+  --color-success-900: oklch(20.20% 0.0538 151.47);
+  --color-success-900-dark: oklch(98.64% 0.0165 150.99);
+  --color-tertiary-0: oklch(100.00% 0.0000 NaN);
+  --color-tertiary-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-tertiary-100: oklch(89.57% 0.0563 220.64);
+  --color-tertiary-100-dark: oklch(55.32% 0.1255 240.41);
+  --color-tertiary-200: oklch(83.17% 0.0896 223.70);
+  --color-tertiary-200-dark: oklch(60.48% 0.1324 238.12);
+  --color-tertiary-300: oklch(77.54% 0.1158 225.67);
+  --color-tertiary-300-dark: oklch(66.14% 0.1382 235.75);
+  --color-tertiary-400: oklch(73.53% 0.1310 229.33);
+  --color-tertiary-400-dark: oklch(70.20% 0.1419 233.82);
+  --color-tertiary-50: oklch(95.75% 0.0231 220.67);
+  --color-tertiary-50-dark: oklch(45.31% 0.1162 245.86);
+  --color-tertiary-500: oklch(70.20% 0.1419 233.82);
+  --color-tertiary-500-dark: oklch(73.53% 0.1310 229.33);
+  --color-tertiary-600: oklch(66.14% 0.1382 235.75);
+  --color-tertiary-600-dark: oklch(77.54% 0.1158 225.67);
+  --color-tertiary-700: oklch(60.48% 0.1324 238.12);
+  --color-tertiary-700-dark: oklch(83.17% 0.0896 223.70);
+  --color-tertiary-800: oklch(55.32% 0.1255 240.41);
+  --color-tertiary-800-dark: oklch(89.57% 0.0563 220.64);
+  --color-tertiary-900: oklch(45.31% 0.1162 245.86);
+  --color-tertiary-900-dark: oklch(95.75% 0.0231 220.67);
+  --color-warning-0: oklch(100.00% 0.0000 NaN);
+  --color-warning-0-dark: oklch(0.00% 0.0000 NaN);
+  --color-warning-100: oklch(90.99% 0.1235 95.66);
+  --color-warning-100-dark: oklch(32.98% 0.0722 68.30);
+  --color-warning-200: oklch(83.42% 0.1401 91.50);
+  --color-warning-200-dark: oklch(39.37% 0.0853 68.93);
+  --color-warning-300: oklch(74.98% 0.1407 87.05);
+  --color-warning-300-dark: oklch(46.65% 0.1009 70.17);
+  --color-warning-400: oklch(66.19% 0.1374 79.24);
+  --color-warning-400-dark: oklch(55.42% 0.1169 75.00);
+  --color-warning-50: oklch(97.22% 0.0659 100.99);
+  --color-warning-50-dark: oklch(28.03% 0.0602 71.48);
+  --color-warning-500: oklch(55.42% 0.1169 75.00);
+  --color-warning-500-dark: oklch(66.19% 0.1374 79.24);
+  --color-warning-600: oklch(46.65% 0.1009 70.17);
+  --color-warning-600-dark: oklch(74.98% 0.1407 87.05);
+  --color-warning-700: oklch(39.37% 0.0853 68.93);
+  --color-warning-700-dark: oklch(83.42% 0.1401 91.50);
+  --color-warning-800: oklch(32.98% 0.0722 68.30);
+  --color-warning-800-dark: oklch(90.99% 0.1235 95.66);
+  --color-warning-900: oklch(28.03% 0.0602 71.48);
+  --color-warning-900-dark: oklch(97.22% 0.0659 100.99);
+
+  /* font-family */
+  --font-family-body1: Nunito, sans-serif;
+  --font-family-body2: Nunito, sans-serif;
+  --font-family-button: Nunito, sans-serif;
+  --font-family-caption: Nunito, sans-serif;
+  --font-family-family: Nunito, sans-serif;
+  --font-family-headline1: Nunito, sans-serif;
+  --font-family-headline2: Nunito, sans-serif;
+  --font-family-headline3: Nunito, sans-serif;
+  --font-family-headline4: Nunito, sans-serif;
+  --font-family-headline5: Nunito, sans-serif;
+  --font-family-headline6: Nunito, sans-serif;
+  --font-family-overline: Nunito, sans-serif;
+  --font-family-subtitle1: Nunito, sans-serif;
+  --font-family-subtitle2: Nunito, sans-serif;
+
+  /* font-weight */
+  --font-weight-body1: 400;
+  --font-weight-body2: 400;
+  --font-weight-button: 700;
+  --font-weight-caption: 400;
+  --font-weight-headline1: 300;
+  --font-weight-headline2: 300;
+  --font-weight-headline3: 400;
+  --font-weight-headline4: 400;
+  --font-weight-headline5: 400;
+  --font-weight-headline6: 500;
+  --font-weight-overline: 500;
+  --font-weight-subtitle1: 400;
+  --font-weight-subtitle2: 500;
+
+  /* letter-spacing */
+  --letter-spacing-body1: 0.5px;
+  --letter-spacing-body2: 0.2857142857142857px;
+  --letter-spacing-button: 1.4285714285714286px;
+  --letter-spacing-caption: 0.5333333333333333px;
+  --letter-spacing-headline1: -0.25px;
+  --letter-spacing-headline2: -0.13333333333333333px;
+  --letter-spacing-headline3: normal;
+  --letter-spacing-headline4: 0.11764705882352941px;
+  --letter-spacing-headline5: normal;
+  --letter-spacing-headline6: 0.2px;
+  --letter-spacing-overline: 2.6666666666666665px;
+  --letter-spacing-subtitle1: 0.15px;
+  --letter-spacing-subtitle2: 0.1142857142857143px;
+
+  /* line-height */
+  --line-height-body1: 20px;
+  --line-height-body2: 18px;
+  --line-height-button: 18px;
+  --line-height-caption: 16px;
+  --line-height-headline1: 100px;
+  --line-height-headline2: 64px;
+  --line-height-headline3: 52px;
+  --line-height-headline4: 38px;
+  --line-height-headline5: 28px;
+  --line-height-headline6: 24px;
+  --line-height-overline: 16px;
+  --line-height-subtitle1: 20px;
+  --line-height-subtitle2: 18px;
+
+  /* radius */
+  --radius-layout-radius: 12px;
+
+  /* shadow */
+  --shadow-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
+  --shadow-bold-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
+  --shadow-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
+  --shadow-extrabold-dark: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
+  --shadow-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
+  --shadow-light-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
+  --shadow-none: none;
+  --shadow-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
+  --shadow-regular-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
+  --shadow-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
+  --shadow-semibold-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
+  --shadow-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
+  --shadow-semilight-dark: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
+
+  /* spacing */
+  --spacing-space: 8px;
+
+  /* transition-duration */
+  --transition-duration-long: 600ms;
+  --transition-duration-medium: 400ms;
+  --transition-duration-short: 200ms;
+}