@datatechsolutions/tympan-tokens 0.4.1 → 0.4.2

package/dist/dtcg/astrlabe.light.tokens.json

@@ -44,7 +44,7 @@
           1
         ],
         "hex": "#ffffff",
-        "alpha": 0.9
+        "alpha": 0.86
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -88,11 +88,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.9451,
-          0.9608,
-          0.9765
+          0.949,
+          0.9529,
+          0.9804
         ],
-        "hex": "#f1f5f9"
+        "hex": "#f2f3fa"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -120,11 +120,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -136,11 +136,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.302,
-          0.3529,
-          0.4196
+          0.3569,
+          0.4039,
+          0.4745
         ],
-        "hex": "#4d5a6b"
+        "hex": "#5b6779"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -157,7 +157,7 @@
           0.7216
         ],
         "hex": "#94a3b8",
-        "alpha": 0.3
+        "alpha": 0.26
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -397,11 +397,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.0392,
-          0.0863,
-          0.1569
+          0.0588,
+          0.0902,
+          0.1647
         ],
-        "hex": "#0a1628",
+        "hex": "#0f172a",
         "alpha": 0.4
       },
       "$extensions": {
@@ -414,12 +414,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.5569,
-          0.6039,
-          1
+          0.6549,
+          0.5451,
+          0.9804
         ],
-        "hex": "#8e9aff",
-        "alpha": 0.07
+        "hex": "#a78bfa",
+        "alpha": 0.05
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -431,12 +431,12 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.3059,
-          0.7373,
-          0.9216
+          0.2196,
+          0.7412,
+          0.9725
         ],
-        "hex": "#4ebceb",
-        "alpha": 0.05
+        "hex": "#38bdf8",
+        "alpha": 0.03
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -708,11 +708,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.302,
-          0.3529,
-          0.4196
+          0.3569,
+          0.4039,
+          0.4745
         ],
-        "hex": "#4d5a6b"
+        "hex": "#5b6779"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -901,11 +901,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -917,11 +917,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -933,11 +933,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -949,11 +949,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -1097,11 +1097,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.302,
-          0.3529,
-          0.4196
+          0.3569,
+          0.4039,
+          0.4745
         ],
-        "hex": "#4d5a6b"
+        "hex": "#5b6779"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -1163,11 +1163,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -1196,11 +1196,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.302,
-          0.3529,
-          0.4196
+          0.3569,
+          0.4039,
+          0.4745
         ],
-        "hex": "#4d5a6b"
+        "hex": "#5b6779"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -1246,11 +1246,11 @@
       "$value": {
         "colorSpace": "srgb",
         "components": [
-          0.2,
-          0.2549,
-          0.3333
+          0.2784,
+          0.3333,
+          0.4118
         ],
-        "hex": "#334155"
+        "hex": "#475569"
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -1300,7 +1300,7 @@
           0.7216
         ],
         "hex": "#94a3b8",
-        "alpha": 0.3
+        "alpha": 0.26
       },
       "$extensions": {
         "br.com.datatechsolutions.tympan": {
@@ -2662,27 +2662,27 @@
           "color": {
             "colorSpace": "srgb",
             "components": [
-              0.0392,
-              0.0863,
-              0.1569
+              0,
+              0,
+              0
             ],
-            "hex": "#0a1628",
-            "alpha": 0.04
+            "hex": "#000000",
+            "alpha": 0.1
           },
           "offsetX": {
             "value": 0,
             "unit": "px"
           },
           "offsetY": {
-            "value": 1,
+            "value": 4,
             "unit": "px"
           },
           "blur": {
-            "value": 2,
+            "value": 16,
             "unit": "px"
           },
           "spread": {
-            "value": 0,
+            "value": -2,
             "unit": "px"
           }
         },
@@ -2690,27 +2690,27 @@
           "color": {
             "colorSpace": "srgb",
             "components": [
-              0.0392,
-              0.0863,
-              0.1569
+              0,
+              0,
+              0
             ],
-            "hex": "#0a1628",
-            "alpha": 0.1
+            "hex": "#000000",
+            "alpha": 0.06
           },
           "offsetX": {
             "value": 0,
             "unit": "px"
           },
           "offsetY": {
-            "value": 8,
+            "value": 12,
             "unit": "px"
           },
           "blur": {
-            "value": 24,
+            "value": 40,
             "unit": "px"
           },
           "spread": {
-            "value": -12,
+            "value": -8,
             "unit": "px"
           }
         }
@@ -2727,11 +2727,11 @@
           "color": {
             "colorSpace": "srgb",
             "components": [
-              0.0392,
-              0.0863,
-              0.1569
+              0.0588,
+              0.0902,
+              0.1647
             ],
-            "hex": "#0a1628",
+            "hex": "#0f172a",
             "alpha": 0.08
           },
           "offsetX": {
@@ -2750,6 +2750,34 @@
             "value": -2,
             "unit": "px"
           }
+        },
+        {
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.0588,
+              0.0902,
+              0.1647
+            ],
+            "hex": "#0f172a",
+            "alpha": 0.04
+          },
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 2,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 4,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -2,
+            "unit": "px"
+          }
         }
       ],
       "$extensions": {
@@ -2764,12 +2792,12 @@
           "color": {
             "colorSpace": "srgb",
             "components": [
-              0.0392,
-              0.0863,
-              0.1569
+              0.0588,
+              0.0902,
+              0.1647
             ],
-            "hex": "#0a1628",
-            "alpha": 0.14
+            "hex": "#0f172a",
+            "alpha": 0.12
           },
           "offsetX": {
             "value": 0,
@@ -2787,6 +2815,34 @@
             "value": -8,
             "unit": "px"
           }
+        },
+        {
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0.0588,
+              0.0902,
+              0.1647
+            ],
+            "hex": "#0f172a",
+            "alpha": 0.06
+          },
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 4,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 8,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -4,
+            "unit": "px"
+          }
         }
       ],
       "$extensions": {
@@ -2801,12 +2857,12 @@
           "color": {
             "colorSpace": "srgb",
             "components": [
-              0.0392,
-              0.0863,
-              0.1569
+              0,
+              0,
+              0
             ],
-            "hex": "#0a1628",
-            "alpha": 0.35
+            "hex": "#000000",
+            "alpha": 0.45
           },
           "offsetX": {
             "value": 0,
@@ -2824,6 +2880,34 @@
             "value": -30,
             "unit": "px"
           }
+        },
+        {
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ],
+            "hex": "#000000",
+            "alpha": 0.18
+          },
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 16,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 40,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -12,
+            "unit": "px"
+          }
         }
       ],
       "$extensions": {
@@ -2843,7 +2927,7 @@
               1
             ],
             "hex": "#ffffff",
-            "alpha": 0
+            "alpha": 0.7
           },
           "offsetX": {
             "value": 0,
@@ -2854,9 +2938,38 @@
             "unit": "px"
           },
           "blur": {
+            "value": 2,
+            "unit": "px"
+          },
+          "spread": {
             "value": 0,
             "unit": "px"
           },
+          "inset": true
+        },
+        {
+          "color": {
+            "colorSpace": "srgb",
+            "components": [
+              0,
+              0,
+              0
+            ],
+            "hex": "#000000",
+            "alpha": 0.04
+          },
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": -1,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 2,
+            "unit": "px"
+          },
           "spread": {
             "value": 0,
             "unit": "px"
@@ -2897,7 +3010,7 @@
     },
     "radius-card": {
       "$value": {
-        "value": 19,
+        "value": 20,
         "unit": "px"
       },
       "$extensions": {
@@ -2908,7 +3021,7 @@
     },
     "radius-sheet": {
       "$value": {
-        "value": 29,
+        "value": 24,
         "unit": "px"
       },
       "$extensions": {

package/dist/index.d.ts

@@ -109,6 +109,29 @@ 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 declare const RAMP_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
 export type RampStep = (typeof RAMP_STEPS)[number];
@@ -156,7 +179,7 @@ export interface ResolvedTheme {
     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. */
@@ -201,8 +224,10 @@ export declare 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