@insymetri/styleguide 0.1.88 → 0.1.89

package/dist/style/tailwind/colors.d.ts

@@ -1,6 +1,7 @@
 export declare const backgroundColor: {
     primary: string;
     'primary-hover': string;
+    'primary-soft': string;
     accent: string;
     'accent-hover': string;
     secondary: string;
@@ -13,6 +14,10 @@ export declare const backgroundColor: {
     'surface-raised': string;
     background: string;
     'background-alt': string;
+    app: string;
+    'success-soft': string;
+    'warning-soft': string;
+    'error-soft': string;
     'background-l0': string;
     'background-l1': string;
     'background-l2': string;

package/dist/style/tailwind/colors.js

@@ -23,6 +23,10 @@ export const backgroundColor = {
     // Brand
     primary: 'var(--ii-primary)',
     'primary-hover': 'var(--ii-primary-hover)',
+    // The palette's "Primary (Soft)" — the opaque brand tint (#E0E7FF light).
+    // `primary-8`/`primary-15` below are the translucent equivalents; use this one
+    // where the tint must be opaque (it is what `info-bg` / `filter-bg` resolve to).
+    'primary-soft': 'var(--ii-primary-soft)',
     accent: 'var(--ii-accent)',
     'accent-hover': 'var(--ii-accent-hover)',
     secondary: 'var(--ii-secondary)',
@@ -36,6 +40,12 @@ export const backgroundColor = {
     'surface-raised': 'var(--ii-surface-raised)',
     background: 'var(--ii-background)',
     'background-alt': 'var(--ii-background-alt)',
+    app: 'var(--ii-app-bg)', // page substrate: rail, top bar, gutter around the content card
+    // Lighter, still-saturated semantic fills — for large filled areas where the full
+    // strength dominates and the `-bg` tint reads as disabled.
+    'success-soft': 'var(--ii-success-soft)',
+    'warning-soft': 'var(--ii-warning-soft)',
+    'error-soft': 'var(--ii-error-soft)',
     'background-l0': 'var(--ii-background-l0)',
     'background-l1': 'var(--ii-background-l1)',
     'background-l2': 'var(--ii-background-l2)',

package/dist/style/tailwind/preset.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
         backgroundColor: {
             primary: string;
             'primary-hover': string;
+            'primary-soft': string;
             accent: string;
             'accent-hover': string;
             secondary: string;
@@ -16,6 +17,10 @@ declare const _default: {
             'surface-raised': string;
             background: string;
             'background-alt': string;
+            app: string;
+            'success-soft': string;
+            'warning-soft': string;
+            'error-soft': string;
             'background-l0': string;
             'background-l1': string;
             'background-l2': string;
@@ -252,111 +257,148 @@ declare const _default: {
             blue: string;
         };
         fontSize: {
-            readonly h1: readonly ["2.4rem", {
-                readonly lineHeight: "3.2rem";
+            readonly h1: readonly ["2.6rem", {
+                readonly lineHeight: "3.0rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly h2: readonly ["2.0rem", {
-                readonly lineHeight: "2.8rem";
+                readonly lineHeight: "2.6rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly h3: readonly ["1.8rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.02em";
             }];
-            readonly h4: readonly ["1.6rem", {
+            readonly h4: readonly ["1.5rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly h5: readonly ["1.4rem", {
-                readonly lineHeight: "2.0rem";
+                readonly lineHeight: "1.9rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly h6: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.8rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly m1: readonly ["2.0rem", {
                 readonly lineHeight: "2.8rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.02em";
             }];
             readonly m2: readonly ["1.6rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly 'm2-emphasis': readonly ["1.6rem", {
                 readonly lineHeight: "2.4rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly m3: readonly ["1.4rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "300";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly 'm3-emphasis': readonly ["1.3rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly 'm3-small': readonly ["1.3rem", {
                 readonly lineHeight: "2.0rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.005em";
             }];
-            readonly large: readonly ["1.6rem", {
-                readonly lineHeight: "2.0rem";
+            readonly large: readonly ["1.5rem", {
+                readonly lineHeight: "2.2rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.01em";
             }];
-            readonly 'large-emphasis': readonly ["1.6rem", {
-                readonly lineHeight: "2.0rem";
+            readonly 'large-emphasis': readonly ["1.5rem", {
+                readonly lineHeight: "2.2rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.01em";
             }];
             readonly default: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly emphasis: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.005em";
             }];
             readonly strong: readonly ["1.3rem", {
-                readonly lineHeight: "1.6rem";
+                readonly lineHeight: "1.95rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "-0.005em";
             }];
-            readonly small: readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly small: readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
             }];
-            readonly 'small-emphasis': readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly 'small-emphasis': readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "0";
             }];
-            readonly 'small-strong': readonly ["1.2rem", {
-                readonly lineHeight: "1.6rem";
+            readonly 'small-strong': readonly ["1.25rem", {
+                readonly lineHeight: "1.7rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "0";
             }];
-            readonly tiny: readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly tiny: readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
             }];
-            readonly 'tiny-emphasis': readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly 'tiny-emphasis': readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "0";
             }];
-            readonly 'tiny-strong': readonly ["1.1rem", {
-                readonly lineHeight: "1.2rem";
+            readonly 'tiny-strong': readonly ["1.15rem", {
+                readonly lineHeight: "1.5rem";
                 readonly fontWeight: "600";
+                readonly letterSpacing: "0";
             }];
-            readonly numeric: readonly ["1.4rem", {
-                readonly lineHeight: "1.6rem";
+            readonly micro: readonly ["1.05rem", {
+                readonly lineHeight: "1.575rem";
+                readonly fontWeight: "500";
+                readonly letterSpacing: "0.06em";
+            }];
+            readonly numeric: readonly ["1.3rem", {
+                readonly lineHeight: "1.8rem";
                 readonly fontWeight: "400";
+                readonly letterSpacing: "0";
+            }];
+            readonly amount: readonly ["2.6rem", {
+                readonly lineHeight: "2.9rem";
+                readonly fontWeight: "600";
+                readonly letterSpacing: "-0.03em";
             }];
             readonly 'display-lg': readonly ["4.0rem", {
                 readonly lineHeight: "1.1";
+                readonly letterSpacing: "-0.03em";
             }];
             readonly 'display-md': readonly ["3.0rem", {
                 readonly lineHeight: "1.2";
+                readonly letterSpacing: "-0.025em";
             }];
             readonly 'display-sm': readonly ["2.4rem", {
                 readonly lineHeight: "1.2";
                 readonly fontWeight: "500";
+                readonly letterSpacing: "-0.02em";
             }];
         };
         spacing: Record<string, string>;
@@ -365,6 +407,7 @@ declare const _default: {
             pill: string;
             subtle: string;
             card: string;
+            'comm-hover': string;
             'card-hover': string;
             dropdown: string;
             submenu: string;
@@ -372,11 +415,10 @@ declare const _default: {
             floating: string;
             drawer: string;
             toast: string;
-            'focus-ring': string;
-            'selection-ring': string;
-            'comm-hover': string;
             'login-card': string;
             'dialog-overlay': string;
+            'focus-ring': string;
+            'selection-ring': string;
         };
         borderRadius: Record<string, string>;
         zIndex: Record<string, string>;
@@ -413,6 +455,15 @@ declare const _default: {
             full: string;
             screen: string;
         };
+        letterSpacing: {
+            tighter: string;
+            tight: string;
+            snug: string;
+            normal: string;
+            none: string;
+            label: string;
+            wide: string;
+        };
         extend: {
             keyframes: {
                 loginFadeInUp: {
@@ -626,6 +677,8 @@ declare const _default: {
             };
             fontFamily: {
                 inherit: string;
+                sans: string;
+                mono: string;
             };
             textColor: {
                 inherit: string;

package/dist/style/tailwind/preset.js

@@ -47,6 +47,18 @@ export default {
             full: '100%',
             screen: '100vh',
         }),
+        letterSpacing: {
+            // Negative tracking scales with type size — see typography.ts.
+            tighter: '-0.03em',
+            tight: '-0.02em',
+            snug: '-0.01em',
+            normal: '-0.005em',
+            none: '0',
+            // Positive tracking, for the uppercase section labels only. Caps at
+            // 10–11px are unreadable without it.
+            label: '0.06em',
+            wide: '0.04em',
+        },
         extend: {
             keyframes,
             animation,
@@ -86,8 +98,17 @@ export default {
                 'auto-340': 'repeat(auto-fill, minmax(340px, 1fr))',
                 'auto-fit-200': 'repeat(auto-fit, minmax(200px, 1fr))',
             },
+            // Both go through the variables base.css defines, for the same reason the
+            // `body` rule does: this package ships no font files, so an app that has not
+            // self-hosted the face must be able to point `--font-family` somewhere else
+            // and have `font-sans` follow. Hardcoding the stack here would leave
+            // `font-sans` still asking for a font that 404s.
             fontFamily: {
                 inherit: 'inherit',
+                sans: 'var(--font-family)',
+                // No mono FACE is shipped; `--font-family-mono` is the system stack, which
+                // is what `font-mono` resolved to before it was named.
+                mono: 'var(--font-family-mono)',
             },
             textColor: {
                 inherit: 'inherit',

package/dist/style/tailwind/shadows.d.ts

@@ -3,6 +3,7 @@ export declare const boxShadow: {
     pill: string;
     subtle: string;
     card: string;
+    'comm-hover': string;
     'card-hover': string;
     dropdown: string;
     submenu: string;
@@ -10,9 +11,8 @@ export declare const boxShadow: {
     floating: string;
     drawer: string;
     toast: string;
-    'focus-ring': string;
-    'selection-ring': string;
-    'comm-hover': string;
     'login-card': string;
     'dialog-overlay': string;
+    'focus-ring': string;
+    'selection-ring': string;
 };

package/dist/style/tailwind/shadows.js

@@ -1,33 +1,32 @@
+// Elevation maps onto the three tiers defined in style/colors.css (and swapped
+// for dark surfaces in style/dark.css). Keeping the utility names stable means
+// no call site changes; only what they resolve to does.
+//
+//   tier 1 — hairline lift: buttons at rest, cards, active segment thumbs
+//   tier 2 — ambient float: menus, popovers, tooltips, raised/hovered cards
+//   tier 3 — modal scale:   dialogs, drawers, toasts
+const T1 = 'var(--ii-shadow-1)';
+const T2 = 'var(--ii-shadow-2)';
+const T3 = 'var(--ii-shadow-3)';
 export const boxShadow = {
     none: 'none',
-    // Pill elevation (pills, tags, small controls)
-    pill: '0 3px 6px -2px rgba(0, 0, 0, 0.02), 0 1px 1px 0 rgba(0, 0, 0, 0.04), inset 0 0 0 0.5px rgba(0, 0, 0, 0.08)',
-    // Subtle elevation (switch knobs, active pills)
-    subtle: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-    // Cards at rest
-    card: '0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)',
-    // Card hover / raised state
-    'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
-    // Dropdown menus, popovers, comboboxes, date pickers
-    dropdown: '0 6px 18px rgba(0, 0, 0, 0.02), 0 3px 9px rgba(0, 0, 0, 0.04), 0 1px 1px rgba(0, 0, 0, 0.04)',
-    // Submenu / nested floating panels
-    submenu: '0 9px 48px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.04)',
-    // Modal dialogs
-    modal: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    // Floating dialogs / modals shown without an overlay — needs to read as elevated on its own
-    floating: '0 0 0 1px rgba(0, 0, 0, 0.06), 0 10px 24px -4px rgba(0, 0, 0, 0.12), 0 24px 60px -12px rgba(0, 0, 0, 0.22)',
-    // Side drawers / floating panels
-    drawer: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-    // Toast notifications
-    toast: '0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08)',
-    // Focus ring — input/control focus state
+    // Tier 1 — at rest
+    pill: T1,
+    subtle: T1,
+    card: T1,
+    'comm-hover': T1,
+    // Tier 2 — floating above the page
+    'card-hover': T2,
+    dropdown: T2,
+    submenu: T2,
+    // Tier 3 — modal scale
+    modal: T3,
+    floating: T3,
+    drawer: T3,
+    toast: T3,
+    'login-card': T3,
+    'dialog-overlay': T3,
+    // Rings — the focus ring is the teal accent, never the near-black primary
     'focus-ring': '0 0 0 3px var(--ii-focus-primary)',
-    // Selection ring — selected item indicator
     'selection-ring': '0 0 0 2px var(--ii-primary-20)',
-    // Communication card hover
-    'comm-hover': '0 2px 8px var(--ii-shadow-subtle-color)',
-    // Login card — deep overlay shadow
-    'login-card': '0 20px 60px var(--ii-overlay), 0 0 1px var(--ii-hover-overlay)',
-    // Dialog overlay — elevated panel
-    'dialog-overlay': '0 20px 25px -5px var(--ii-hover-overlay), 0 10px 10px -5px var(--ii-shadow-xs)',
 };

package/dist/style/tailwind/typography.d.ts

@@ -1,108 +1,145 @@
 export declare const fontSize: {
-    readonly h1: readonly ["2.4rem", {
-        readonly lineHeight: "3.2rem";
+    readonly h1: readonly ["2.6rem", {
+        readonly lineHeight: "3.0rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly h2: readonly ["2.0rem", {
-        readonly lineHeight: "2.8rem";
+        readonly lineHeight: "2.6rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly h3: readonly ["1.8rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.02em";
     }];
-    readonly h4: readonly ["1.6rem", {
+    readonly h4: readonly ["1.5rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly h5: readonly ["1.4rem", {
-        readonly lineHeight: "2.0rem";
+        readonly lineHeight: "1.9rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly h6: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.8rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly m1: readonly ["2.0rem", {
         readonly lineHeight: "2.8rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.02em";
     }];
     readonly m2: readonly ["1.6rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly 'm2-emphasis': readonly ["1.6rem", {
         readonly lineHeight: "2.4rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly m3: readonly ["1.4rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "300";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly 'm3-emphasis': readonly ["1.3rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly 'm3-small': readonly ["1.3rem", {
         readonly lineHeight: "2.0rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.005em";
     }];
-    readonly large: readonly ["1.6rem", {
-        readonly lineHeight: "2.0rem";
+    readonly large: readonly ["1.5rem", {
+        readonly lineHeight: "2.2rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.01em";
     }];
-    readonly 'large-emphasis': readonly ["1.6rem", {
-        readonly lineHeight: "2.0rem";
+    readonly 'large-emphasis': readonly ["1.5rem", {
+        readonly lineHeight: "2.2rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.01em";
     }];
     readonly default: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly emphasis: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.005em";
     }];
     readonly strong: readonly ["1.3rem", {
-        readonly lineHeight: "1.6rem";
+        readonly lineHeight: "1.95rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "-0.005em";
     }];
-    readonly small: readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly small: readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
     }];
-    readonly 'small-emphasis': readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly 'small-emphasis': readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "0";
     }];
-    readonly 'small-strong': readonly ["1.2rem", {
-        readonly lineHeight: "1.6rem";
+    readonly 'small-strong': readonly ["1.25rem", {
+        readonly lineHeight: "1.7rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "0";
     }];
-    readonly tiny: readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly tiny: readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
     }];
-    readonly 'tiny-emphasis': readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly 'tiny-emphasis': readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "500";
+        readonly letterSpacing: "0";
     }];
-    readonly 'tiny-strong': readonly ["1.1rem", {
-        readonly lineHeight: "1.2rem";
+    readonly 'tiny-strong': readonly ["1.15rem", {
+        readonly lineHeight: "1.5rem";
         readonly fontWeight: "600";
+        readonly letterSpacing: "0";
     }];
-    readonly numeric: readonly ["1.4rem", {
-        readonly lineHeight: "1.6rem";
+    readonly micro: readonly ["1.05rem", {
+        readonly lineHeight: "1.575rem";
+        readonly fontWeight: "500";
+        readonly letterSpacing: "0.06em";
+    }];
+    readonly numeric: readonly ["1.3rem", {
+        readonly lineHeight: "1.8rem";
         readonly fontWeight: "400";
+        readonly letterSpacing: "0";
+    }];
+    readonly amount: readonly ["2.6rem", {
+        readonly lineHeight: "2.9rem";
+        readonly fontWeight: "600";
+        readonly letterSpacing: "-0.03em";
     }];
     readonly 'display-lg': readonly ["4.0rem", {
         readonly lineHeight: "1.1";
+        readonly letterSpacing: "-0.03em";
     }];
     readonly 'display-md': readonly ["3.0rem", {
         readonly lineHeight: "1.2";
+        readonly letterSpacing: "-0.025em";
     }];
     readonly 'display-sm': readonly ["2.4rem", {
         readonly lineHeight: "1.2";
         readonly fontWeight: "500";
+        readonly letterSpacing: "-0.02em";
     }];
 };