@etus/tokens 0.4.0-beta.18 → 0.4.0-beta.19

package/dist/theme-color.json

@@ -0,0 +1,5 @@
+{
+  "source": "--background",
+  "light": "#ffffff",
+  "dark": "#171717"
+}

package/dist/tokens.css

@@ -777,9 +777,14 @@
   --core-background-card: oklch(98.51% 0.0000 0);
   --core-background-foreground: oklch(14.48% 0.0000 0);
   --core-background-inversed-foreground: oklch(98.51% 0.0000 0);
+  --core-background-muted-active: oklch(92.19% 0.0000 0);
   --core-background-muted-foreground: oklch(55.55% 0.0000 0);
+  --core-background-muted-hover: oklch(92.19% 0.0000 0);
+  --core-background-muted-subtle: oklch(98.51% 0.0000 0);
   --core-background-muted: oklch(97.02% 0.0000 0);
-  --core-background-overlay: oklch(0.00% 0.0000 0 / 60.0%);
+  --core-background-overlay-medium: oklch(0.00% 0.0000 0 / 60.0%);
+  --core-background-overlay-soft: oklch(0.00% 0.0000 0 / 40.0%);
+  --core-background-overlay-strong: oklch(0.00% 0.0000 0 / 80.0%);
   --core-background-popover-foreground: oklch(20.46% 0.0000 0);
   --core-background-popover: oklch(100.00% 0.0000 0);
   --core-background-surface-foreground: oklch(26.86% 0.0000 0);
@@ -1861,6 +1866,17 @@
   --progress-steps-connector-vertical-height-offset-lg: 48px;
   --progress-steps-connector-vertical-height-offset-md: 40px;
   --progress-steps-connector-vertical-height-offset-sm: 32px;
+  --purple-100: oklch(94.64% 0.0327 307.17);
+  --purple-200: oklch(90.24% 0.0604 306.70);
+  --purple-300: oklch(82.68% 0.1082 306.38);
+  --purple-400: oklch(72.17% 0.1767 305.50);
+  --purple-500: oklch(62.68% 0.2325 303.90);
+  --purple-50: oklch(97.68% 0.0142 308.30);
+  --purple-600: oklch(55.75% 0.2525 302.32);
+  --purple-700: oklch(49.55% 0.2369 301.92);
+  --purple-800: oklch(43.83% 0.1983 303.72);
+  --purple-900: oklch(38.07% 0.1661 304.99);
+  --purple-950: oklch(29.05% 0.1432 302.72);
   --radio-control-offset-top: 2px;
   --radio-indicator-color: oklch(81.75% 0.1821 159.79);
   --radio-indicator-size-lg: 12px;
@@ -2308,6 +2324,11 @@
   --status-success-foreground: oklch(100.00% 0.0000 0);
   --status-success-subtle-foreground: oklch(52.73% 0.1371 150.07);
   --status-success-subtle: oklch(98.19% 0.0181 155.83);
+  --status-tip-background: oklch(55.75% 0.2525 302.32);
+  --status-tip-border: oklch(90.24% 0.0604 306.70);
+  --status-tip-foreground: oklch(100.00% 0.0000 0);
+  --status-tip-subtle-foreground: oklch(49.55% 0.2369 301.92);
+  --status-tip-subtle: oklch(97.68% 0.0142 308.30);
   --status-warning-background: oklch(86.06% 0.1731 91.94);
   --status-warning-border: oklch(94.51% 0.1243 101.54);
   --status-warning-foreground: oklch(100.00% 0.0000 0);
@@ -3221,9 +3242,14 @@
   --core-background-card: oklch(26.86% 0.0000 0);
   --core-background-foreground: oklch(98.51% 0.0000 0);
   --core-background-inversed-foreground: oklch(14.48% 0.0000 0);
+  --core-background-muted-active: oklch(43.86% 0.0000 0);
   --core-background-muted-foreground: oklch(71.55% 0.0000 0);
+  --core-background-muted-hover: oklch(43.86% 0.0000 0);
+  --core-background-muted-subtle: oklch(14.48% 0.0000 0);
   --core-background-muted: oklch(37.15% 0.0000 0);
-  --core-background-overlay: oklch(0.00% 0.0000 0 / 80.0%);
+  --core-background-overlay-medium: oklch(0.00% 0.0000 0 / 60.0%);
+  --core-background-overlay-soft: oklch(0.00% 0.0000 0 / 40.0%);
+  --core-background-overlay-strong: oklch(0.00% 0.0000 0 / 80.0%);
   --core-background-popover-foreground: oklch(98.51% 0.0000 0);
   --core-background-popover: oklch(20.46% 0.0000 0);
   --core-background-surface-foreground: oklch(97.02% 0.0000 0);
@@ -3657,6 +3683,11 @@
   --status-success-foreground: oklch(100.00% 0.0000 0);
   --status-success-subtle-foreground: oklch(87.12% 0.1363 154.45);
   --status-success-subtle: oklch(26.64% 0.0628 152.93);
+  --status-tip-background: oklch(62.68% 0.2325 303.90);
+  --status-tip-border: oklch(43.83% 0.1983 303.72);
+  --status-tip-foreground: oklch(100.00% 0.0000 0);
+  --status-tip-subtle-foreground: oklch(82.68% 0.1082 306.38);
+  --status-tip-subtle: oklch(29.05% 0.1432 302.72);
   --status-warning-background: oklch(79.52% 0.1617 86.05);
   --status-warning-border: oklch(47.62% 0.1034 61.91);
   --status-warning-foreground: oklch(100.00% 0.0000 0);
@@ -3998,9 +4029,14 @@
   --core-background-card: oklch(98.51% 0.0000 0);
   --core-background-foreground: oklch(14.48% 0.0000 0);
   --core-background-inversed-foreground: oklch(98.51% 0.0000 0);
+  --core-background-muted-active: oklch(92.19% 0.0000 0);
   --core-background-muted-foreground: oklch(55.55% 0.0000 0);
+  --core-background-muted-hover: oklch(92.19% 0.0000 0);
+  --core-background-muted-subtle: oklch(98.51% 0.0000 0);
   --core-background-muted: oklch(97.02% 0.0000 0);
-  --core-background-overlay: oklch(0.00% 0.0000 0 / 60.0%);
+  --core-background-overlay-medium: oklch(0.00% 0.0000 0 / 60.0%);
+  --core-background-overlay-soft: oklch(0.00% 0.0000 0 / 40.0%);
+  --core-background-overlay-strong: oklch(0.00% 0.0000 0 / 80.0%);
   --core-background-popover-foreground: oklch(20.46% 0.0000 0);
   --core-background-popover: oklch(100.00% 0.0000 0);
   --core-background-surface-foreground: oklch(26.86% 0.0000 0);
@@ -4434,6 +4470,11 @@
   --status-success-foreground: oklch(100.00% 0.0000 0);
   --status-success-subtle-foreground: oklch(52.73% 0.1371 150.07);
   --status-success-subtle: oklch(98.19% 0.0181 155.83);
+  --status-tip-background: oklch(55.75% 0.2525 302.32);
+  --status-tip-border: oklch(90.24% 0.0604 306.70);
+  --status-tip-foreground: oklch(100.00% 0.0000 0);
+  --status-tip-subtle-foreground: oklch(49.55% 0.2369 301.92);
+  --status-tip-subtle: oklch(97.68% 0.0142 308.30);
   --status-warning-background: oklch(86.06% 0.1731 91.94);
   --status-warning-border: oklch(94.51% 0.1243 101.54);
   --status-warning-foreground: oklch(100.00% 0.0000 0);
@@ -4657,9 +4698,14 @@
   --color-core-background-card: var(--core-background-card);
   --color-core-background-foreground: var(--core-background-foreground);
   --color-core-background-inversed-foreground: var(--core-background-inversed-foreground);
+  --color-core-background-muted-active: var(--core-background-muted-active);
   --color-core-background-muted-foreground: var(--core-background-muted-foreground);
+  --color-core-background-muted-hover: var(--core-background-muted-hover);
+  --color-core-background-muted-subtle: var(--core-background-muted-subtle);
   --color-core-background-muted: var(--core-background-muted);
-  --color-core-background-overlay: var(--core-background-overlay);
+  --color-core-background-overlay-medium: var(--core-background-overlay-medium);
+  --color-core-background-overlay-soft: var(--core-background-overlay-soft);
+  --color-core-background-overlay-strong: var(--core-background-overlay-strong);
   --color-core-background-popover-foreground: var(--core-background-popover-foreground);
   --color-core-background-popover: var(--core-background-popover);
   --color-core-background-surface-foreground: var(--core-background-surface-foreground);
@@ -4772,6 +4818,11 @@
   --color-status-success-foreground: var(--status-success-foreground);
   --color-status-success-subtle-foreground: var(--status-success-subtle-foreground);
   --color-status-success-subtle: var(--status-success-subtle);
+  --color-status-tip-background: var(--status-tip-background);
+  --color-status-tip-border: var(--status-tip-border);
+  --color-status-tip-foreground: var(--status-tip-foreground);
+  --color-status-tip-subtle-foreground: var(--status-tip-subtle-foreground);
+  --color-status-tip-subtle: var(--status-tip-subtle);
   --color-status-warning-background: var(--status-warning-background);
   --color-status-warning-border: var(--status-warning-border);
   --color-status-warning-foreground: var(--status-warning-foreground);

package/dist/tokens.js

@@ -38,8 +38,13 @@ export const tokens = {
     "core-background-foreground": "oklch(98.51% 0.0000 0)",
     "core-background-inversed-foreground": "oklch(14.48% 0.0000 0)",
     "core-background-muted": "oklch(37.15% 0.0000 0)",
+    "core-background-muted-active": "oklch(43.86% 0.0000 0)",
     "core-background-muted-foreground": "oklch(71.55% 0.0000 0)",
-    "core-background-overlay": "oklch(0.00% 0.0000 0 / 80.0%)",
+    "core-background-muted-hover": "oklch(43.86% 0.0000 0)",
+    "core-background-muted-subtle": "oklch(14.48% 0.0000 0)",
+    "core-background-overlay-medium": "oklch(0.00% 0.0000 0 / 60.0%)",
+    "core-background-overlay-soft": "oklch(0.00% 0.0000 0 / 40.0%)",
+    "core-background-overlay-strong": "oklch(0.00% 0.0000 0 / 80.0%)",
     "core-background-popover": "oklch(20.46% 0.0000 0)",
     "core-background-popover-foreground": "oklch(98.51% 0.0000 0)",
     "core-background-surface": "oklch(14.48% 0.0000 0)",
@@ -173,6 +178,11 @@ export const tokens = {
     "status-success-foreground": "oklch(100.00% 0.0000 0)",
     "status-success-subtle": "oklch(26.64% 0.0628 152.93)",
     "status-success-subtle-foreground": "oklch(87.12% 0.1363 154.45)",
+    "status-tip-background": "oklch(62.68% 0.2325 303.90)",
+    "status-tip-border": "oklch(43.83% 0.1983 303.72)",
+    "status-tip-foreground": "oklch(100.00% 0.0000 0)",
+    "status-tip-subtle": "oklch(29.05% 0.1432 302.72)",
+    "status-tip-subtle-foreground": "oklch(82.68% 0.1082 306.38)",
     "status-warning-background": "oklch(79.52% 0.1617 86.05)",
     "status-warning-border": "oklch(47.62% 0.1034 61.91)",
     "status-warning-foreground": "oklch(100.00% 0.0000 0)",
@@ -922,8 +932,13 @@ export const tokens = {
     "core-background-foreground": "oklch(14.48% 0.0000 0)",
     "core-background-inversed-foreground": "oklch(98.51% 0.0000 0)",
     "core-background-muted": "oklch(97.02% 0.0000 0)",
+    "core-background-muted-active": "oklch(92.19% 0.0000 0)",
     "core-background-muted-foreground": "oklch(55.55% 0.0000 0)",
-    "core-background-overlay": "oklch(0.00% 0.0000 0 / 60.0%)",
+    "core-background-muted-hover": "oklch(92.19% 0.0000 0)",
+    "core-background-muted-subtle": "oklch(98.51% 0.0000 0)",
+    "core-background-overlay-medium": "oklch(0.00% 0.0000 0 / 60.0%)",
+    "core-background-overlay-soft": "oklch(0.00% 0.0000 0 / 40.0%)",
+    "core-background-overlay-strong": "oklch(0.00% 0.0000 0 / 80.0%)",
     "core-background-popover": "oklch(100.00% 0.0000 0)",
     "core-background-popover-foreground": "oklch(20.46% 0.0000 0)",
     "core-background-surface": "oklch(98.51% 0.0000 0)",
@@ -1974,6 +1989,17 @@ export const tokens = {
     "primitives-color-neutral-800": "oklch(26.86% 0.0000 0)",
     "primitives-color-neutral-900": "oklch(20.46% 0.0000 0)",
     "primitives-color-neutral-950": "oklch(14.48% 0.0000 0)",
+    "primitives-color-purple-100": "oklch(94.64% 0.0327 307.17)",
+    "primitives-color-purple-200": "oklch(90.24% 0.0604 306.70)",
+    "primitives-color-purple-300": "oklch(82.68% 0.1082 306.38)",
+    "primitives-color-purple-400": "oklch(72.17% 0.1767 305.50)",
+    "primitives-color-purple-50": "oklch(97.68% 0.0142 308.30)",
+    "primitives-color-purple-500": "oklch(62.68% 0.2325 303.90)",
+    "primitives-color-purple-600": "oklch(55.75% 0.2525 302.32)",
+    "primitives-color-purple-700": "oklch(49.55% 0.2369 301.92)",
+    "primitives-color-purple-800": "oklch(43.83% 0.1983 303.72)",
+    "primitives-color-purple-900": "oklch(38.07% 0.1661 304.99)",
+    "primitives-color-purple-950": "oklch(29.05% 0.1432 302.72)",
     "primitives-color-red-100": "oklch(93.56% 0.0309 17.72)",
     "primitives-color-red-200": "oklch(88.45% 0.0593 18.33)",
     "primitives-color-red-300": "oklch(80.77% 0.1035 19.57)",
@@ -2567,6 +2593,11 @@ export const tokens = {
     "status-success-foreground": "oklch(100.00% 0.0000 0)",
     "status-success-subtle": "oklch(98.19% 0.0181 155.83)",
     "status-success-subtle-foreground": "oklch(52.73% 0.1371 150.07)",
+    "status-tip-background": "oklch(55.75% 0.2525 302.32)",
+    "status-tip-border": "oklch(90.24% 0.0604 306.70)",
+    "status-tip-foreground": "oklch(100.00% 0.0000 0)",
+    "status-tip-subtle": "oklch(97.68% 0.0142 308.30)",
+    "status-tip-subtle-foreground": "oklch(49.55% 0.2369 301.92)",
     "status-warning-background": "oklch(86.06% 0.1731 91.94)",
     "status-warning-border": "oklch(94.51% 0.1243 101.54)",
     "status-warning-foreground": "oklch(100.00% 0.0000 0)",

package/dist/tokens.meta.json

@@ -622,6 +622,72 @@
         "type": "color",
         "value": "oklch(14.48% 0.0000 0)"
       },
+      {
+        "name": "purple-100",
+        "cssVar": "--purple-100",
+        "type": "color",
+        "value": "oklch(94.64% 0.0327 307.17)"
+      },
+      {
+        "name": "purple-200",
+        "cssVar": "--purple-200",
+        "type": "color",
+        "value": "oklch(90.24% 0.0604 306.70)"
+      },
+      {
+        "name": "purple-300",
+        "cssVar": "--purple-300",
+        "type": "color",
+        "value": "oklch(82.68% 0.1082 306.38)"
+      },
+      {
+        "name": "purple-400",
+        "cssVar": "--purple-400",
+        "type": "color",
+        "value": "oklch(72.17% 0.1767 305.50)"
+      },
+      {
+        "name": "purple-50",
+        "cssVar": "--purple-50",
+        "type": "color",
+        "value": "oklch(97.68% 0.0142 308.30)"
+      },
+      {
+        "name": "purple-500",
+        "cssVar": "--purple-500",
+        "type": "color",
+        "value": "oklch(62.68% 0.2325 303.90)"
+      },
+      {
+        "name": "purple-600",
+        "cssVar": "--purple-600",
+        "type": "color",
+        "value": "oklch(55.75% 0.2525 302.32)"
+      },
+      {
+        "name": "purple-700",
+        "cssVar": "--purple-700",
+        "type": "color",
+        "value": "oklch(49.55% 0.2369 301.92)"
+      },
+      {
+        "name": "purple-800",
+        "cssVar": "--purple-800",
+        "type": "color",
+        "value": "oklch(43.83% 0.1983 303.72)"
+      },
+      {
+        "name": "purple-900",
+        "cssVar": "--purple-900",
+        "type": "color",
+        "value": "oklch(38.07% 0.1661 304.99)"
+      },
+      {
+        "name": "purple-950",
+        "cssVar": "--purple-950",
+        "type": "color",
+        "value": "oklch(29.05% 0.1432 302.72)"
+      },
       {
         "name": "red-100",
         "cssVar": "--red-100",
@@ -1000,6 +1066,13 @@
         "light": "oklch(97.02% 0.0000 0)",
         "dark": "oklch(37.15% 0.0000 0)"
       },
+      {
+        "name": "core-background-muted-active",
+        "cssVar": "--core-background-muted-active",
+        "type": "color",
+        "light": "oklch(92.19% 0.0000 0)",
+        "dark": "oklch(43.86% 0.0000 0)"
+      },
       {
         "name": "core-background-muted-foreground",
         "cssVar": "--core-background-muted-foreground",
@@ -1008,10 +1081,38 @@
         "dark": "oklch(71.55% 0.0000 0)"
       },
       {
-        "name": "core-background-overlay",
-        "cssVar": "--core-background-overlay",
+        "name": "core-background-muted-hover",
+        "cssVar": "--core-background-muted-hover",
+        "type": "color",
+        "light": "oklch(92.19% 0.0000 0)",
+        "dark": "oklch(43.86% 0.0000 0)"
+      },
+      {
+        "name": "core-background-muted-subtle",
+        "cssVar": "--core-background-muted-subtle",
+        "type": "color",
+        "light": "oklch(98.51% 0.0000 0)",
+        "dark": "oklch(14.48% 0.0000 0)"
+      },
+      {
+        "name": "core-background-overlay-medium",
+        "cssVar": "--core-background-overlay-medium",
         "type": "color",
         "light": "oklch(0.00% 0.0000 0 / 60.0%)",
+        "dark": "oklch(0.00% 0.0000 0 / 60.0%)"
+      },
+      {
+        "name": "core-background-overlay-soft",
+        "cssVar": "--core-background-overlay-soft",
+        "type": "color",
+        "light": "oklch(0.00% 0.0000 0 / 40.0%)",
+        "dark": "oklch(0.00% 0.0000 0 / 40.0%)"
+      },
+      {
+        "name": "core-background-overlay-strong",
+        "cssVar": "--core-background-overlay-strong",
+        "type": "color",
+        "light": "oklch(0.00% 0.0000 0 / 80.0%)",
         "dark": "oklch(0.00% 0.0000 0 / 80.0%)"
       },
       {
@@ -1928,6 +2029,41 @@
         "light": "oklch(52.73% 0.1371 150.07)",
         "dark": "oklch(87.12% 0.1363 154.45)"
       },
+      {
+        "name": "status-tip-background",
+        "cssVar": "--status-tip-background",
+        "type": "color",
+        "light": "oklch(55.75% 0.2525 302.32)",
+        "dark": "oklch(62.68% 0.2325 303.90)"
+      },
+      {
+        "name": "status-tip-border",
+        "cssVar": "--status-tip-border",
+        "type": "color",
+        "light": "oklch(90.24% 0.0604 306.70)",
+        "dark": "oklch(43.83% 0.1983 303.72)"
+      },
+      {
+        "name": "status-tip-foreground",
+        "cssVar": "--status-tip-foreground",
+        "type": "color",
+        "light": "oklch(100.00% 0.0000 0)",
+        "dark": "oklch(100.00% 0.0000 0)"
+      },
+      {
+        "name": "status-tip-subtle",
+        "cssVar": "--status-tip-subtle",
+        "type": "color",
+        "light": "oklch(97.68% 0.0142 308.30)",
+        "dark": "oklch(29.05% 0.1432 302.72)"
+      },
+      {
+        "name": "status-tip-subtle-foreground",
+        "cssVar": "--status-tip-subtle-foreground",
+        "type": "color",
+        "light": "oklch(49.55% 0.2369 301.92)",
+        "dark": "oklch(82.68% 0.1082 306.38)"
+      },
       {
         "name": "status-warning-background",
         "cssVar": "--status-warning-background",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etus/tokens",
-  "version": "0.4.0-beta.18",
+  "version": "0.4.0-beta.19",
   "description": "Seven Design System - Design tokens (CSS variables) for ETUS applications",
   "license": "MIT",
   "repository": {
@@ -24,6 +24,7 @@
     "./styles/tokens.css": "./dist/tokens.css",
     "./tokens.css": "./dist/tokens.css",
     "./tokens.meta.json": "./dist/tokens.meta.json",
+    "./theme-color.json": "./dist/theme-color.json",
     ".": {
       "types": "./dist/tokens.d.ts",
       "import": "./dist/tokens.js"