@datatechsolutions/tympan-tokens 0.4.1 → 0.4.2

package/dist/values.js

@@ -1515,14 +1515,14 @@ export const values = {
       "light": {
         "--ty-bg": "#f8fafc",
         "--ty-surface": "rgb(255 255 255 / 0.72)",
-        "--ty-surface-raised": "rgb(255 255 255 / 0.9)",
+        "--ty-surface-raised": "rgb(255 255 255 / 0.86)",
         "--ty-surface-solid": "#ffffff",
         "--ty-surface-raised-solid": "#ffffff",
-        "--ty-surface-sunken": "#f1f5f9",
+        "--ty-surface-sunken": "#f2f3fa",
         "--ty-ink": "#0f172a",
-        "--ty-ink-2": "#334155",
-        "--ty-ink-3": "#4d5a6b",
-        "--ty-line": "rgb(148 163 184 / 0.3)",
+        "--ty-ink-2": "#475569",
+        "--ty-ink-3": "#5b6779",
+        "--ty-line": "rgb(148 163 184 / 0.26)",
         "--ty-line-soft": "rgb(95 115 143 / 0.12)",
         "--ty-line-strong": "rgb(100 116 139 / 0.45)",
         "--ty-input": "#6d829e",
@@ -1537,9 +1537,9 @@ export const values = {
         "--ty-on-cta": "#f9faff",
         "--ty-secondary": "rgb(251 253 255 / 0.7)",
         "--ty-on-secondary": "#0c192a",
-        "--ty-backdrop": "rgb(10 22 40 / 0.4)",
-        "--ty-ambient-1": "rgb(142 154 255 / 0.07)",
-        "--ty-ambient-2": "rgb(78 188 235 / 0.05)",
+        "--ty-backdrop": "rgb(15 23 42 / 0.4)",
+        "--ty-ambient-1": "rgb(167 139 250 / 0.05)",
+        "--ty-ambient-2": "rgb(56 189 248 / 0.03)",
         "--ty-danger": "#be123c",
         "--ty-danger-soft": "rgb(222 59 61 / 0.1)",
         "--ty-on-danger-soft": "#a30018",
@@ -1556,7 +1556,7 @@ export const values = {
         "--ty-info-soft": "rgb(65 136 182 / 0.1)",
         "--ty-on-info-soft": "#085b87",
         "--ty-on-info": "#f8fafe",
-        "--ty-neutral": "#4d5a6b",
+        "--ty-neutral": "#5b6779",
         "--ty-neutral-soft": "rgb(113 129 152 / 0.1)",
         "--ty-on-neutral-soft": "#47566c",
         "--ty-on-neutral": "#f8fafe",
@@ -1568,10 +1568,10 @@ export const values = {
         "--ty-chart-6": "#765ebb",
         "--ty-chart-7": "#008479",
         "--ty-chart-8": "#b05315",
-        "--ty-on-bg": "#334155",
-        "--ty-on-surface": "#334155",
-        "--ty-on-surface-raised": "#334155",
-        "--ty-on-surface-sunken": "#334155",
+        "--ty-on-bg": "#475569",
+        "--ty-on-surface": "#475569",
+        "--ty-on-surface-raised": "#475569",
+        "--ty-on-surface-sunken": "#475569",
         "--ty-proof-proved": "#00672d",
         "--ty-proof-proved-soft": "rgb(19 153 72 / 0.1)",
         "--ty-proof-pending": "#774a00",
@@ -1580,19 +1580,19 @@ export const values = {
         "--ty-proof-refuted-soft": "rgb(222 59 61 / 0.1)",
         "--ty-proof-not-disclosed": "#47566c",
         "--ty-proof-not-disclosed-soft": "rgb(113 129 152 / 0.1)",
-        "--ty-proof-none": "#4d5a6b",
+        "--ty-proof-none": "#5b6779",
         "--ty-proof-none-soft": "rgb(113 129 152 / 0.1)",
         "--ty-actor-person": "#4144a3",
         "--ty-actor-person-soft": "rgb(99 102 241 / 0.12)",
-        "--ty-actor-agent": "#334155",
+        "--ty-actor-agent": "#475569",
         "--ty-actor-agent-soft": "rgb(113 129 152 / 0.1)",
-        "--ty-actor-system": "#4d5a6b",
+        "--ty-actor-system": "#5b6779",
         "--ty-actor-system-soft": "rgb(113 129 152 / 0.1)",
         "--ty-nav-bg": "rgb(255 255 255 / 0.72)",
-        "--ty-on-nav": "#334155",
+        "--ty-on-nav": "#475569",
         "--ty-nav-active": "rgb(99 102 241 / 0.12)",
         "--ty-on-nav-active": "#4144a3",
-        "--ty-nav-line": "rgb(148 163 184 / 0.3)",
+        "--ty-nav-line": "rgb(148 163 184 / 0.26)",
         "--ty-accent": "#4f46e5",
         "--ty-accent-strong": "#4338ca",
         "--ty-accent-soft": "rgb(99 102 241 / 0.12)",
@@ -1674,15 +1674,15 @@ export const values = {
         "--ty-info-800": "#174b6b",
         "--ty-info-900": "#103850",
         "--ty-info-950": "#072638",
-        "--ty-shadow-sheet": "0px 1px 2px 0px rgb(10 22 40 / 0.04), 0px 8px 24px -12px rgb(10 22 40 / 0.1)",
-        "--ty-shadow-raised": "0px 4px 12px -2px rgb(10 22 40 / 0.08)",
-        "--ty-shadow-floating": "0px 12px 24px -8px rgb(10 22 40 / 0.14)",
-        "--ty-shadow-modal": "0px 40px 100px -30px rgb(10 22 40 / 0.35)",
-        "--ty-shadow-sheet-inset": "inset 0px 1px 0px 0px rgb(255 255 255 / 0)",
+        "--ty-shadow-sheet": "0px 4px 16px -2px rgb(0 0 0 / 0.1), 0px 12px 40px -8px rgb(0 0 0 / 0.06)",
+        "--ty-shadow-raised": "0px 4px 12px -2px rgb(15 23 42 / 0.08), 0px 2px 4px -2px rgb(15 23 42 / 0.04)",
+        "--ty-shadow-floating": "0px 12px 24px -8px rgb(15 23 42 / 0.12), 0px 4px 8px -4px rgb(15 23 42 / 0.06)",
+        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 0 0 / 0.45), 0px 16px 40px -12px rgb(0 0 0 / 0.18)",
+        "--ty-shadow-sheet-inset": "inset 0px 1px 2px 0px rgb(255 255 255 / 0.7), inset 0px -1px 2px 0px rgb(0 0 0 / 0.04)",
         "--ty-radius": "12px",
         "--ty-radius-control": "12px",
-        "--ty-radius-card": "19px",
-        "--ty-radius-sheet": "29px",
+        "--ty-radius-card": "20px",
+        "--ty-radius-sheet": "24px",
         "--ty-radius-pill": "999px",
         "--ty-radius-agent": "7px",
         "--ty-focus-width": "2px",
@@ -1691,7 +1691,25 @@ export const values = {
         "--ty-glass-saturate": "1.15",
         "--ty-font-serif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
         "--ty-font-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
-        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        "--ty-font-size-display": "30px",
+        "--ty-font-line-height-display": "36px",
+        "--ty-font-size-h1": "24px",
+        "--ty-font-line-height-h1": "32px",
+        "--ty-font-size-h2": "18px",
+        "--ty-font-line-height-h2": "28px",
+        "--ty-font-size-h3": "16px",
+        "--ty-font-line-height-h3": "24px",
+        "--ty-font-size-label": "14px",
+        "--ty-font-line-height-label": "20px",
+        "--ty-font-tracking-h1": "-0.025em",
+        "--ty-glass-edge": "rgb(255 255 255 / 0.9) rgb(200 200 210 / 0.3) rgb(200 200 210 / 0.25) rgb(255 255 255 / 0.7)",
+        "--ty-glass-edge-width": "1.5px",
+        "--ty-glass-highlight": "inset 0 1px 2px 0 rgb(255 255 255 / 0.8), inset 0 -1px 2px 0 rgb(0 0 0 / 0.05)",
+        "--ty-glass-fill": "linear-gradient(135deg, rgb(255 255 255 / 0.8) 0%, rgb(220 225 240 / 0.62) 40%, rgb(240 245 255 / 0.68) 70%, rgb(255 255 255 / 0.8) 100%)",
+        "--ty-glass-fill-raised": "linear-gradient(135deg, rgb(255 255 255 / 0.86) 0%, rgb(215 220 238 / 0.7) 40%, rgb(235 240 255 / 0.76) 70%, rgb(255 255 255 / 0.86) 100%)",
+        "--ty-mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+        "--ty-wordmark-gradient": "linear-gradient(90deg, #0369a1, #4338ca, #7e22ce)"
       },
       "light-high": {
         "--ty-bg": "#f3f7fe",
@@ -1855,15 +1873,15 @@ export const values = {
         "--ty-info-800": "#174b6b",
         "--ty-info-900": "#103850",
         "--ty-info-950": "#072638",
-        "--ty-shadow-sheet": "0px 1px 2px 0px rgb(10 22 40 / 0.04), 0px 8px 24px -12px rgb(10 22 40 / 0.1)",
-        "--ty-shadow-raised": "0px 4px 12px -2px rgb(10 22 40 / 0.08)",
-        "--ty-shadow-floating": "0px 12px 24px -8px rgb(10 22 40 / 0.14)",
-        "--ty-shadow-modal": "0px 40px 100px -30px rgb(10 22 40 / 0.35)",
-        "--ty-shadow-sheet-inset": "inset 0px 1px 0px 0px rgb(255 255 255 / 0)",
+        "--ty-shadow-sheet": "0px 4px 16px -2px rgb(0 0 0 / 0.1), 0px 12px 40px -8px rgb(0 0 0 / 0.06)",
+        "--ty-shadow-raised": "0px 4px 12px -2px rgb(15 23 42 / 0.08), 0px 2px 4px -2px rgb(15 23 42 / 0.04)",
+        "--ty-shadow-floating": "0px 12px 24px -8px rgb(15 23 42 / 0.12), 0px 4px 8px -4px rgb(15 23 42 / 0.06)",
+        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 0 0 / 0.45), 0px 16px 40px -12px rgb(0 0 0 / 0.18)",
+        "--ty-shadow-sheet-inset": "inset 0px 1px 2px 0px rgb(255 255 255 / 0.7), inset 0px -1px 2px 0px rgb(0 0 0 / 0.04)",
         "--ty-radius": "12px",
         "--ty-radius-control": "12px",
-        "--ty-radius-card": "19px",
-        "--ty-radius-sheet": "29px",
+        "--ty-radius-card": "20px",
+        "--ty-radius-sheet": "24px",
         "--ty-radius-pill": "999px",
         "--ty-radius-agent": "7px",
         "--ty-focus-width": "3px",
@@ -1872,19 +1890,30 @@ export const values = {
         "--ty-glass-saturate": "1.15",
         "--ty-font-serif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
         "--ty-font-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
-        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        "--ty-font-size-display": "30px",
+        "--ty-font-line-height-display": "36px",
+        "--ty-font-size-h1": "24px",
+        "--ty-font-line-height-h1": "32px",
+        "--ty-font-size-h2": "18px",
+        "--ty-font-line-height-h2": "28px",
+        "--ty-font-size-h3": "16px",
+        "--ty-font-line-height-h3": "24px",
+        "--ty-font-size-label": "14px",
+        "--ty-font-line-height-label": "20px",
+        "--ty-font-tracking-h1": "-0.025em"
       },
       "dark": {
-        "--ty-bg": "#0b1220",
-        "--ty-surface": "rgb(30 41 59 / 0.72)",
-        "--ty-surface-raised": "rgb(30 41 59 / 0.92)",
+        "--ty-bg": "#020617",
+        "--ty-surface": "rgb(30 41 59 / 0.7)",
+        "--ty-surface-raised": "rgb(30 41 59 / 0.78)",
         "--ty-surface-solid": "#131c2f",
         "--ty-surface-raised-solid": "#1b2539",
         "--ty-surface-sunken": "#0b1222",
-        "--ty-ink": "#f8fafc",
+        "--ty-ink": "#ffffff",
         "--ty-ink-2": "#cbd5e1",
-        "--ty-ink-3": "#a3b0c0",
-        "--ty-line": "rgb(148 163 184 / 0.22)",
+        "--ty-ink-3": "#94a3b8",
+        "--ty-line": "rgb(148 163 184 / 0.24)",
         "--ty-line-soft": "rgb(163 185 216 / 0.09)",
         "--ty-line-strong": "rgb(148 163 184 / 0.36)",
         "--ty-input": "#687c98",
@@ -1899,9 +1928,9 @@ export const values = {
         "--ty-on-cta": "#f9faff",
         "--ty-secondary": "rgb(37 40 44 / 0.6)",
         "--ty-on-secondary": "#e7f1ff",
-        "--ty-backdrop": "rgb(0 3 14 / 0.6)",
-        "--ty-ambient-1": "rgb(142 154 255 / 0.12)",
-        "--ty-ambient-2": "rgb(78 188 235 / 0.08)",
+        "--ty-backdrop": "rgb(0 0 0 / 0.5)",
+        "--ty-ambient-1": "rgb(124 58 237 / 0.1)",
+        "--ty-ambient-2": "rgb(2 132 199 / 0.08)",
         "--ty-danger": "#fb7185",
         "--ty-danger-soft": "rgb(255 99 95 / 0.14)",
         "--ty-on-danger-soft": "#ffa098",
@@ -1918,7 +1947,7 @@ export const values = {
         "--ty-info-soft": "rgb(96 167 214 / 0.14)",
         "--ty-on-info-soft": "#80c7f8",
         "--ty-on-info": "#101214",
-        "--ty-neutral": "#a3b0c0",
+        "--ty-neutral": "#94a3b8",
         "--ty-neutral-soft": "rgb(143 160 184 / 0.14)",
         "--ty-on-neutral-soft": "#aebfd8",
         "--ty-on-neutral": "#101214",
@@ -1942,19 +1971,19 @@ export const values = {
         "--ty-proof-refuted-soft": "rgb(255 99 95 / 0.14)",
         "--ty-proof-not-disclosed": "#aebfd8",
         "--ty-proof-not-disclosed-soft": "rgb(143 160 184 / 0.14)",
-        "--ty-proof-none": "#a3b0c0",
+        "--ty-proof-none": "#94a3b8",
         "--ty-proof-none-soft": "rgb(143 160 184 / 0.14)",
         "--ty-actor-person": "#b5bfff",
         "--ty-actor-person-soft": "rgb(99 102 241 / 0.2)",
         "--ty-actor-agent": "#cbd5e1",
         "--ty-actor-agent-soft": "rgb(143 160 184 / 0.14)",
-        "--ty-actor-system": "#a3b0c0",
+        "--ty-actor-system": "#94a3b8",
         "--ty-actor-system-soft": "rgb(143 160 184 / 0.14)",
-        "--ty-nav-bg": "rgb(30 41 59 / 0.72)",
+        "--ty-nav-bg": "rgb(30 41 59 / 0.7)",
         "--ty-on-nav": "#cbd5e1",
         "--ty-nav-active": "rgb(99 102 241 / 0.2)",
         "--ty-on-nav-active": "#b5bfff",
-        "--ty-nav-line": "rgb(148 163 184 / 0.22)",
+        "--ty-nav-line": "rgb(148 163 184 / 0.24)",
         "--ty-accent": "#818cf8",
         "--ty-accent-strong": "#a5b4fc",
         "--ty-accent-soft": "rgb(99 102 241 / 0.2)",
@@ -2036,24 +2065,42 @@ export const values = {
         "--ty-info-800": "#174b6b",
         "--ty-info-900": "#103850",
         "--ty-info-950": "#072638",
-        "--ty-shadow-sheet": "0px 1px 2px 0px rgb(0 5 20 / 0.08), 0px 8px 24px -12px rgb(0 5 20 / 0.2)",
-        "--ty-shadow-raised": "0px 4px 12px -2px rgb(0 5 20 / 0.16)",
-        "--ty-shadow-floating": "0px 12px 24px -8px rgb(0 5 20 / 0.28)",
-        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 5 20 / 0.7)",
-        "--ty-shadow-sheet-inset": "inset 0px 1px 0px 0px rgb(255 255 255 / 0.06)",
+        "--ty-shadow-sheet": "0px 12px 40px -12px rgb(0 0 0 / 0.5)",
+        "--ty-shadow-raised": "0px 4px 12px -2px rgb(0 0 0 / 0.5), 0px 2px 4px -2px rgb(0 0 0 / 0.3)",
+        "--ty-shadow-floating": "0px 12px 24px -8px rgb(0 0 0 / 0.6), 0px 4px 8px -4px rgb(0 0 0 / 0.4)",
+        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 0 0 / 0.7), 0px 16px 40px -12px rgb(0 0 0 / 0.5)",
+        "--ty-shadow-sheet-inset": "inset 0px 1px 1px 0px rgb(255 255 255 / 0.12)",
         "--ty-radius": "12px",
         "--ty-radius-control": "12px",
-        "--ty-radius-card": "19px",
-        "--ty-radius-sheet": "29px",
+        "--ty-radius-card": "20px",
+        "--ty-radius-sheet": "24px",
         "--ty-radius-pill": "999px",
         "--ty-radius-agent": "7px",
         "--ty-focus-width": "2px",
         "--ty-glass-blur-sheet": "20px",
         "--ty-glass-blur-floating": "24px",
-        "--ty-glass-saturate": "1.15",
+        "--ty-glass-saturate": "1.5",
         "--ty-font-serif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
         "--ty-font-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
-        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        "--ty-font-size-display": "30px",
+        "--ty-font-line-height-display": "36px",
+        "--ty-font-size-h1": "24px",
+        "--ty-font-line-height-h1": "32px",
+        "--ty-font-size-h2": "18px",
+        "--ty-font-line-height-h2": "28px",
+        "--ty-font-size-h3": "16px",
+        "--ty-font-line-height-h3": "24px",
+        "--ty-font-size-label": "14px",
+        "--ty-font-line-height-label": "20px",
+        "--ty-font-tracking-h1": "-0.025em",
+        "--ty-glass-edge": "rgb(255 255 255 / 0.2) rgb(255 255 255 / 0.06) rgb(255 255 255 / 0.04) rgb(255 255 255 / 0.12)",
+        "--ty-glass-edge-width": "1.5px",
+        "--ty-glass-highlight": "inset 0 1px 1px 0 rgb(255 255 255 / 0.15)",
+        "--ty-glass-fill": "linear-gradient(140deg, rgb(30 41 59 / 0.7) 0%, rgb(15 23 42 / 0.6) 45%, rgb(20 30 50 / 0.55) 100%)",
+        "--ty-glass-fill-raised": "linear-gradient(140deg, rgb(30 41 59 / 0.78) 0%, rgb(15 23 42 / 0.68) 45%, rgb(20 30 50 / 0.62) 100%)",
+        "--ty-mark-gradient": "linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)",
+        "--ty-wordmark-gradient": "linear-gradient(90deg, #38bdf8, #818cf8, #a855f7)"
       },
       "dark-high": {
         "--ty-bg": "#0c0f13",
@@ -2217,24 +2264,35 @@ export const values = {
         "--ty-info-800": "#174b6b",
         "--ty-info-900": "#103850",
         "--ty-info-950": "#072638",
-        "--ty-shadow-sheet": "0px 1px 2px 0px rgb(0 5 20 / 0.08), 0px 8px 24px -12px rgb(0 5 20 / 0.2)",
-        "--ty-shadow-raised": "0px 4px 12px -2px rgb(0 5 20 / 0.16)",
-        "--ty-shadow-floating": "0px 12px 24px -8px rgb(0 5 20 / 0.28)",
-        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 5 20 / 0.7)",
-        "--ty-shadow-sheet-inset": "inset 0px 1px 0px 0px rgb(255 255 255 / 0.06)",
+        "--ty-shadow-sheet": "0px 12px 40px -12px rgb(0 0 0 / 0.5)",
+        "--ty-shadow-raised": "0px 4px 12px -2px rgb(0 0 0 / 0.5), 0px 2px 4px -2px rgb(0 0 0 / 0.3)",
+        "--ty-shadow-floating": "0px 12px 24px -8px rgb(0 0 0 / 0.6), 0px 4px 8px -4px rgb(0 0 0 / 0.4)",
+        "--ty-shadow-modal": "0px 40px 100px -30px rgb(0 0 0 / 0.7), 0px 16px 40px -12px rgb(0 0 0 / 0.5)",
+        "--ty-shadow-sheet-inset": "inset 0px 1px 1px 0px rgb(255 255 255 / 0.12)",
         "--ty-radius": "12px",
         "--ty-radius-control": "12px",
-        "--ty-radius-card": "19px",
-        "--ty-radius-sheet": "29px",
+        "--ty-radius-card": "20px",
+        "--ty-radius-sheet": "24px",
         "--ty-radius-pill": "999px",
         "--ty-radius-agent": "7px",
         "--ty-focus-width": "3px",
         "--ty-glass-blur-sheet": "20px",
         "--ty-glass-blur-floating": "24px",
-        "--ty-glass-saturate": "1.15",
+        "--ty-glass-saturate": "1.5",
         "--ty-font-serif": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
         "--ty-font-sans": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif",
-        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace"
+        "--ty-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
+        "--ty-font-size-display": "30px",
+        "--ty-font-line-height-display": "36px",
+        "--ty-font-size-h1": "24px",
+        "--ty-font-line-height-h1": "32px",
+        "--ty-font-size-h2": "18px",
+        "--ty-font-line-height-h2": "28px",
+        "--ty-font-size-h3": "16px",
+        "--ty-font-line-height-h3": "24px",
+        "--ty-font-size-label": "14px",
+        "--ty-font-line-height-label": "20px",
+        "--ty-font-tracking-h1": "-0.025em"
       }
     },
     "astrlabe-controle": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datatechsolutions/tympan-tokens",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "Tympan design tokens: W3C DTCG source (colour, space, radius, type, elevation and glass, motion, z) and an OKLCH theme generator, with the tympan, fakhir, astrlabe, neutral and high-contrast presets in light and dark (plus opt-in UI themes derived from the print book styles), built to --ty-* CSS custom properties, JSON and a TypeScript export.",
   "license": "FSL-1.1-ALv2",
   "author": "Natalia Mesquita",

package/src/presets.ts

@@ -110,8 +110,10 @@ export const fakhirPreset: ThemeConfig = {
 /**
  * The Astrlabe workflow engine's look (`data-ty-theme="astrlabe"`): slate
  * neutrals, an indigo brand (indigo 500 as the accent family, one step darker
- * where text needs 4.5:1 on light grounds), translucent glass surfaces and the
- * rounder corners of that app (12 px controls, about 20 px cards). The call to
+ * where text needs 4.5:1 on light grounds), liquid-glass surfaces (gradient
+ * fills, specular edges, a strong saturation boost at night), the rounder
+ * corners of that app (12 px controls, 20 px cards, 24 px sheets), its
+ * compact type scale and the sky, indigo and violet mark. The call to
  * action is the indigo to purple gradient its primary buttons fill with, and
  * text (headings included) uses the platform's own system fonts. The state
  * contract holds on every ground: running is a cyan clearly off the indigo
@@ -142,22 +144,30 @@ export const astrlabePreset: ThemeConfig = {
       'on-brand': '#ffffff',
       bg: '#f8fafc',
       surface: 'rgb(255 255 255 / 0.72)',
-      'surface-raised': 'rgb(255 255 255 / 0.9)',
+      'surface-raised': 'rgb(255 255 255 / 0.86)',
       'surface-solid': '#ffffff',
       'surface-raised-solid': '#ffffff',
-      'surface-sunken': '#f1f5f9',
-      line: 'rgb(148 163 184 / 0.3)',
+      // The canvas plane: the app's pale lavender ground.
+      'surface-sunken': '#f2f3fa',
+      // The liquid divider: slate 400 at about a quarter.
+      line: 'rgb(148 163 184 / 0.26)',
       'line-strong': 'rgb(100 116 139 / 0.45)',
       ink: '#0f172a',
-      'ink-2': '#334155',
-      // One step darker than the old #546175 so AA holds on the glass grounds.
-      'ink-3': '#4d5a6b',
+      // Slate 600 for secondary text, as the app always had.
+      'ink-2': '#475569',
+      // Slate 500 fails 4.5:1 on the sunken ground by a hair; this is the
+      // nearest slate that holds AA there.
+      'ink-3': '#5b6779',
       success: '#15803d',
       // Cyan, deliberately off the indigo brand, for the running state.
       info: '#0e7490',
       warning: '#a16207',
       danger: '#be123c',
-      neutral: '#4d5a6b',
+      neutral: '#5b6779',
+      backdrop: 'rgb(15 23 42 / 0.4)',
+      // The three soft colour fields behind the glass: violet above, sky below.
+      'ambient-1': 'rgb(167 139 250 / 0.05)',
+      'ambient-2': 'rgb(56 189 248 / 0.03)',
     },
     dark: {
       brand: '#818cf8',
@@ -165,28 +175,117 @@ export const astrlabePreset: ThemeConfig = {
       'brand-strong': '#a5b4fc',
       'brand-soft': 'rgb(99 102 241 / 0.2)',
       'on-brand': '#1e1b4b',
-      bg: '#0b1220',
-      surface: 'rgb(30 41 59 / 0.72)',
-      'surface-raised': 'rgb(30 41 59 / 0.92)',
+      // Slate 950, the app's night ground.
+      bg: '#020617',
+      surface: 'rgb(30 41 59 / 0.7)',
+      'surface-raised': 'rgb(30 41 59 / 0.78)',
       'surface-solid': '#131c2f',
       'surface-raised-solid': '#1b2539',
       'surface-sunken': '#0b1222',
-      line: 'rgb(148 163 184 / 0.22)',
+      line: 'rgb(148 163 184 / 0.24)',
       'line-strong': 'rgb(148 163 184 / 0.36)',
-      ink: '#f8fafc',
+      ink: '#ffffff',
       'ink-2': '#cbd5e1',
-      'ink-3': '#a3b0c0',
+      'ink-3': '#94a3b8',
       success: '#4ade80',
       info: '#22d3ee',
       warning: '#fbbf24',
       danger: '#fb7185',
-      neutral: '#a3b0c0',
+      neutral: '#94a3b8',
+      backdrop: 'rgb(0 0 0 / 0.5)',
+      'ambient-1': 'rgb(124 58 237 / 0.1)',
+      'ambient-2': 'rgb(2 132 199 / 0.08)',
     },
   },
   ctaPins: {
     light: ['#4f46e5', '#7c3aed', '#9333ea'],
     dark: ['#4f46e5', '#7c3aed', '#9333ea'],
   },
+  // 12 px controls, 20 px cards and panels, 24 px dialogs and hero sheets.
+  radii: { card: 20, sheet: 24 },
+  // Glass: a light boost on light grounds (more would amplify the ambient
+  // tint into a grey-lavender wash), a strong one on dark grounds.
+  glassSaturate: { light: 1.15, dark: 1.5 },
+  // The liquid-glass elevation: a soft drop under every sheet, a specular
+  // inner highlight on its top edge, and the role-named elevation scale.
+  shadowPins: {
+    light: {
+      sheet: [
+        { x: 0, y: 4, blur: 16, spread: -2, color: 'rgb(0 0 0 / 0.1)' },
+        { x: 0, y: 12, blur: 40, spread: -8, color: 'rgb(0 0 0 / 0.06)' },
+      ],
+      'sheet-inset': [
+        { x: 0, y: 1, blur: 2, spread: 0, color: 'rgb(255 255 255 / 0.7)', inset: true },
+        { x: 0, y: -1, blur: 2, spread: 0, color: 'rgb(0 0 0 / 0.04)', inset: true },
+      ],
+      raised: [
+        { x: 0, y: 4, blur: 12, spread: -2, color: 'rgb(15 23 42 / 0.08)' },
+        { x: 0, y: 2, blur: 4, spread: -2, color: 'rgb(15 23 42 / 0.04)' },
+      ],
+      floating: [
+        { x: 0, y: 12, blur: 24, spread: -8, color: 'rgb(15 23 42 / 0.12)' },
+        { x: 0, y: 4, blur: 8, spread: -4, color: 'rgb(15 23 42 / 0.06)' },
+      ],
+      modal: [
+        { x: 0, y: 40, blur: 100, spread: -30, color: 'rgb(0 0 0 / 0.45)' },
+        { x: 0, y: 16, blur: 40, spread: -12, color: 'rgb(0 0 0 / 0.18)' },
+      ],
+    },
+    dark: {
+      sheet: [{ x: 0, y: 12, blur: 40, spread: -12, color: 'rgb(0 0 0 / 0.5)' }],
+      'sheet-inset': [{ x: 0, y: 1, blur: 1, spread: 0, color: 'rgb(255 255 255 / 0.12)', inset: true }],
+      raised: [
+        { x: 0, y: 4, blur: 12, spread: -2, color: 'rgb(0 0 0 / 0.5)' },
+        { x: 0, y: 2, blur: 4, spread: -2, color: 'rgb(0 0 0 / 0.3)' },
+      ],
+      floating: [
+        { x: 0, y: 12, blur: 24, spread: -8, color: 'rgb(0 0 0 / 0.6)' },
+        { x: 0, y: 4, blur: 8, spread: -4, color: 'rgb(0 0 0 / 0.4)' },
+      ],
+      modal: [
+        { x: 0, y: 40, blur: 100, spread: -30, color: 'rgb(0 0 0 / 0.7)' },
+        { x: 0, y: 16, blur: 40, spread: -12, color: 'rgb(0 0 0 / 0.5)' },
+      ],
+    },
+  },
+  modeStrings: {
+    light: {
+      // Lit from above: bright top and start edges, grey shaded ones (top end bottom start).
+      'glass-edge': 'rgb(255 255 255 / 0.9) rgb(200 200 210 / 0.3) rgb(200 200 210 / 0.25) rgb(255 255 255 / 0.7)',
+      'glass-edge-width': '1.5px',
+      // The inner highlight of raised and floating glass.
+      'glass-highlight': 'inset 0 1px 2px 0 rgb(255 255 255 / 0.8), inset 0 -1px 2px 0 rgb(0 0 0 / 0.05)',
+      'glass-fill': 'linear-gradient(135deg, rgb(255 255 255 / 0.8) 0%, rgb(220 225 240 / 0.62) 40%, rgb(240 245 255 / 0.68) 70%, rgb(255 255 255 / 0.8) 100%)',
+      'glass-fill-raised': 'linear-gradient(135deg, rgb(255 255 255 / 0.86) 0%, rgb(215 220 238 / 0.7) 40%, rgb(235 240 255 / 0.76) 70%, rgb(255 255 255 / 0.86) 100%)',
+      'mark-gradient': 'linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)',
+      'wordmark-gradient': 'linear-gradient(90deg, #0369a1, #4338ca, #7e22ce)',
+    },
+    dark: {
+      'glass-edge': 'rgb(255 255 255 / 0.2) rgb(255 255 255 / 0.06) rgb(255 255 255 / 0.04) rgb(255 255 255 / 0.12)',
+      'glass-edge-width': '1.5px',
+      'glass-highlight': 'inset 0 1px 1px 0 rgb(255 255 255 / 0.15)',
+      'glass-fill': 'linear-gradient(140deg, rgb(30 41 59 / 0.7) 0%, rgb(15 23 42 / 0.6) 45%, rgb(20 30 50 / 0.55) 100%)',
+      'glass-fill-raised': 'linear-gradient(140deg, rgb(30 41 59 / 0.78) 0%, rgb(15 23 42 / 0.68) 45%, rgb(20 30 50 / 0.62) 100%)',
+      'mark-gradient': 'linear-gradient(135deg, #38bdf8 0%, #6366f1 40%, #a855f7 100%)',
+      'wordmark-gradient': 'linear-gradient(90deg, #38bdf8, #818cf8, #a855f7)',
+    },
+  },
+  // The app's type scale: 30 px display, 24 px page titles, 18 px sections, 16 px
+  // sub-sections, 14 px labels, tight tracking on titles.
+  strings: {
+    // The display step is the 30 px wordmark of the sign-in screens.
+    'font-size-display': '30px',
+    'font-line-height-display': '36px',
+    'font-size-h1': '24px',
+    'font-line-height-h1': '32px',
+    'font-size-h2': '18px',
+    'font-line-height-h2': '28px',
+    'font-size-h3': '16px',
+    'font-line-height-h3': '24px',
+    'font-size-label': '14px',
+    'font-line-height-label': '20px',
+    'font-tracking-h1': '-0.025em',
+  },
   // The platform's own UI fonts, headings included (no web font to fetch).
   fonts: {
     display: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Noto Sans', 'Arial', 'sans-serif'],

package/src/stylesheet.ts

@@ -120,6 +120,9 @@ export const FORCED_COLORS_VARS: VarList = [
   ['--ty-shadow-modal', 'none'],
   ['--ty-glass-blur-sheet', '0px'],
   ['--ty-glass-blur-floating', '0px'],
+  ['--ty-glass-edge', 'CanvasText'],
+  ['--ty-glass-fill', 'Canvas'],
+  ['--ty-glass-fill-raised', 'Canvas'],
 ]
 
 /** Reduced transparency (and no backdrop-filter support): opaque surfaces, no blur, no ambient. */
@@ -130,6 +133,8 @@ export const OPAQUE_VARS: VarList = [
   ['--ty-glass-blur-sheet', '0px !important'],
   ['--ty-glass-blur-floating', '0px !important'],
   ['--ty-glass-saturate', '1 !important'],
+  ['--ty-glass-fill', 'var(--ty-surface-solid) !important'],
+  ['--ty-glass-fill-raised', 'var(--ty-surface-raised-solid) !important'],
   ['--ty-ambient-1', 'transparent !important'],
   ['--ty-ambient-2', 'transparent !important'],
 ]

package/src/theme.ts

@@ -70,6 +70,31 @@ export interface ThemeConfig {
   elevation?: Elevation
   /** Arbitrary string variables (e.g. for textures) */
   strings?: Record<string, string>
+  /**
+   * String variables per mode (`--ty-<name>`), for values that differ
+   * between light and dark: a glass edge, a fill gradient, a brand mark
+   * gradient. Like pins, they are exact design values: the generated
+   * high-contrast variant leaves them out, so components fall back.
+   */
+  modeStrings?: Partial<Record<Mode, Record<string, string>>>
+  /** Backdrop saturation of glass surfaces per mode (1.15 when omitted). */
+  glassSaturate?: Partial<Record<Mode, number>>
+  /** Exact shadow layers per mode, replacing the generated ones by name. */
+  shadowPins?: Partial<Record<Mode, Partial<Record<ShadowName, ShadowPin[]>>>>
+  /** Card and sheet radii in px, when they do not follow the control radius. */
+  radii?: Partial<Record<'card' | 'sheet', number>>
+}
+
+export type ShadowName = 'sheet' | 'raised' | 'floating' | 'modal' | 'sheet-inset'
+
+/** One shadow layer of `shadowPins`, its colour as a CSS colour string. */
+export interface ShadowPin {
+  x: number
+  y: number
+  blur: number
+  spread: number
+  color: string
+  inset?: boolean
 }
 
 export const RAMP_STEPS = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
@@ -288,7 +313,7 @@ export interface ResolvedTheme {
   colors: Record<string, Rgba>
   ramps: Record<SeedName, Record<RampStep, Rgba>>
   cta: { angle: number; stops: Rgba[] }
-  shadows: Record<'sheet' | 'raised' | 'floating' | 'modal' | 'sheet-inset', ShadowLayer[]>
+  shadows: Record<ShadowName, ShadowLayer[]>
   /** Pixel dimensions (radius, glass blur, focus width). */
   dimensions: Record<string, number>
   /** Font stacks keyed by token name (`serif`, `sans`, `mono`); empty when the theme keeps the base stacks. */
@@ -471,19 +496,24 @@ export function resolveTheme(config: ThemeConfig, mode: Mode, contrastOverride?:
     }
   }
 
+  const shadowPins = config.shadowPins?.[mode] ?? {}
+  for (const [name, layers] of Object.entries(shadowPins) as Array<[ShadowName, ShadowPin[]]>) {
+    shadows[name] = layers.map((l) => ({ ...l, color: parseColor(l.color) }))
+  }
+
   const R = config.radius
   const dimensions: Record<string, number> = {
     radius: R,
     'radius-control': R,
-    'radius-card': Math.round(R * 1.6),
-    'radius-sheet': Math.round(R * 2.4),
+    'radius-card': config.radii?.card ?? Math.round(R * 1.6),
+    'radius-sheet': config.radii?.sheet ?? Math.round(R * 2.4),
     'radius-pill': 999,
     'radius-agent': Math.max(2, Math.round(R * 0.6)),
     'focus-width': contrast === 'high' ? 3 : 2,
     'glass-blur-sheet': config.glass ? 20 : 0,
     'glass-blur-floating': config.glass ? 24 : 0,
   }
-  const numbers: Record<string, number> = { 'glass-saturate': config.glass ? 1.15 : 1 }
+  const numbers: Record<string, number> = { 'glass-saturate': config.glass ? (config.glassSaturate?.[mode] ?? 1.15) : 1 }
 
   const fonts: ResolvedTheme['fonts'] = {}
   for (const role of ['display', 'body', 'mono'] as const) {
@@ -491,7 +521,7 @@ export function resolveTheme(config: ThemeConfig, mode: Mode, contrastOverride?:
     if (list?.length) fonts[FONT_ROLE_TOKENS[role]] = [...list]
   }
 
-  return { name: config.name, mode, contrast, colors, ramps, cta: { angle: 135, stops: ctaStops }, shadows, dimensions, numbers, fonts, strings: config.strings ?? {}, report }
+  return { name: config.name, mode, contrast, colors, ramps, cta: { angle: 135, stops: ctaStops }, shadows, dimensions, numbers, fonts, strings: { ...config.strings, ...(contrast === config.contrast ? config.modeStrings?.[mode] : undefined) }, report }
 }
 
 // ---------------------------------------------------------------------------