@vialiq/flux-ui 0.0.1

package/styles/_variables.scss

@@ -0,0 +1,323 @@
+/**
+ * Design Tokens: SCSS Bridge Variables
+ * =====================================
+ * Pattern: $token: var(--vi-token, <compile-time-fallback>);
+ *
+ * SCSS variables emit var() at CSS level so runtime theming works.
+ * The hardcoded fallback is used by pre-processors, SSR, and unit tests.
+ *
+ * CSS custom property definitions (:root, scoped themes) live in the theming
+ * layer — this file is intentionally theme-agnostic.
+ *
+ * NOTE: Breakpoints and z-index stay as raw SCSS values — CSS custom properties
+ * are not supported inside @media queries or as integer math operands.
+ */
+
+// Declare CSS layer order up-front so cascade is predictable regardless of
+// import order. Between layers, later ones win. Within a layer, normal selector
+// specificity still applies. Order: reset (lowest) → components → utilities (highest)
+@layer reset, components, utilities;
+
+// ============================================================================
+// SCSS BRIDGE VARIABLES
+// ============================================================================
+
+// -- Palette: Grey  (Tailwind gray — UI chrome, text, borders) ---------------
+
+$color-grey-100: var(--vi-color-grey-100, #f3f4f6);
+$color-grey-200: var(--vi-color-grey-200, #e5e7eb);
+$color-grey-300: var(--vi-color-grey-300, #d1d5db);
+$color-grey-400: var(--vi-color-grey-400, #9ca3af);
+$color-grey-500: var(--vi-color-grey-500, #6b7280);
+$color-grey-600: var(--vi-color-grey-600, #4b5563);
+$color-grey-700: var(--vi-color-grey-700, #374151);
+$color-grey-800: var(--vi-color-grey-800, #1f2937);
+$color-grey-900: var(--vi-color-grey-900, #111827);
+
+// -- Palette: Red  (Tailwind red) --------------------------------------------
+
+$color-red-100: var(--vi-color-red-100, #fee2e2);
+$color-red-200: var(--vi-color-red-200, #fecaca);
+$color-red-300: var(--vi-color-red-300, #fca5a5);
+$color-red-400: var(--vi-color-red-400, #f87171);
+$color-red-500: var(--vi-color-red-500, #ef4444);
+$color-red-600: var(--vi-color-red-600, #dc2626);
+$color-red-700: var(--vi-color-red-700, #b91c1c);
+$color-red-800: var(--vi-color-red-800, #991b1b);
+$color-red-900: var(--vi-color-red-900, #7f1d1d);
+
+// -- Palette: Yellow  (Tailwind yellow) --------------------------------------
+
+$color-yellow-100: var(--vi-color-yellow-100, #fef9c3);
+$color-yellow-200: var(--vi-color-yellow-200, #fef08a);
+$color-yellow-300: var(--vi-color-yellow-300, #fde047);
+$color-yellow-400: var(--vi-color-yellow-400, #facc15);
+$color-yellow-500: var(--vi-color-yellow-500, #eab308);
+$color-yellow-600: var(--vi-color-yellow-600, #ca8a04);
+$color-yellow-700: var(--vi-color-yellow-700, #a16207);
+$color-yellow-800: var(--vi-color-yellow-800, #854d0e);
+$color-yellow-900: var(--vi-color-yellow-900, #713f12);
+
+// -- Palette: Green  (Tailwind green) ----------------------------------------
+
+$color-green-100: var(--vi-color-green-100, #dcfce7);
+$color-green-200: var(--vi-color-green-200, #bbf7d0);
+$color-green-300: var(--vi-color-green-300, #86efac);
+$color-green-400: var(--vi-color-green-400, #4ade80);
+$color-green-500: var(--vi-color-green-500, #22c55e);
+$color-green-600: var(--vi-color-green-600, #16a34a);
+$color-green-700: var(--vi-color-green-700, #15803d);
+$color-green-800: var(--vi-color-green-800, #166534);
+$color-green-900: var(--vi-color-green-900, #14532d);
+
+// -- Palette: Blue  (Tailwind blue) ------------------------------------------
+
+$color-blue-100: var(--vi-color-blue-100, #dbeafe);
+$color-blue-200: var(--vi-color-blue-200, #bfdbfe);
+$color-blue-300: var(--vi-color-blue-300, #93c5fd);
+$color-blue-400: var(--vi-color-blue-400, #60a5fa);
+$color-blue-500: var(--vi-color-blue-500, #3b82f6);
+$color-blue-600: var(--vi-color-blue-600, #2563eb);
+$color-blue-700: var(--vi-color-blue-700, #1d4ed8);
+$color-blue-800: var(--vi-color-blue-800, #1e40af);
+$color-blue-900: var(--vi-color-blue-900, #1e3a8a);
+
+// -- Palette: Purple  (Tailwind purple) --------------------------------------
+
+$color-purple-100: var(--vi-color-purple-100, #f3e8ff);
+$color-purple-200: var(--vi-color-purple-200, #e9d5ff);
+$color-purple-300: var(--vi-color-purple-300, #d8b4fe);
+$color-purple-400: var(--vi-color-purple-400, #c084fc);
+$color-purple-500: var(--vi-color-purple-500, #a855f7);
+$color-purple-600: var(--vi-color-purple-600, #9333ea);
+$color-purple-700: var(--vi-color-purple-700, #7e22ce);
+$color-purple-800: var(--vi-color-purple-800, #6b21a8);
+$color-purple-900: var(--vi-color-purple-900, #581c87);
+
+// -- Semantic colors (brand + status) ----------------------------------------
+// These map named design intents onto palette values.
+
+$color-primary:   var(--vi-color-primary,   #0066cc);
+$color-secondary: var(--vi-color-secondary, #f0f4f8);
+$color-success:   var(--vi-color-success,   #22c55e);   // green-500
+$color-warning:   var(--vi-color-warning,   #eab308);   // yellow-500
+$color-error:     var(--vi-color-error,     #ef4444);   // red-500
+$color-info:      var(--vi-color-info,      #3b82f6);   // blue-500
+
+// -- Functional colors -------------------------------------------------------
+
+$color-background: var(--vi-color-background, #ffffff);
+$color-foreground: var(--vi-color-foreground, #111827);  // grey-900
+$color-border:     var(--vi-color-border,     #e5e7eb);  // grey-200
+
+// -- Primitive: Spacing ------------------------------------------------------
+
+$spacing-unit: var(--vi-spacing-unit, 8px);
+$spacing-xs:   var(--vi-spacing-xs,   8px);
+$spacing-sm:   var(--vi-spacing-sm,   16px);
+$spacing-md:   var(--vi-spacing-md,   24px);
+$spacing-lg:   var(--vi-spacing-lg,   32px);
+$spacing-xl:   var(--vi-spacing-xl,   40px);
+$spacing-2xl:  var(--vi-spacing-2xl,  48px);
+$spacing-3xl:  var(--vi-spacing-3xl,  56px);
+
+// -- Primitive: Typography ---------------------------------------------------
+
+$font-family-base: var(--vi-font-family-base, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+$font-family-mono: var(--vi-font-family-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
+
+$font-size-xs:   var(--vi-font-size-xs,   12px);
+$font-size-sm:   var(--vi-font-size-sm,   14px);
+$font-size-base: var(--vi-font-size-base, 16px);
+$font-size-lg:   var(--vi-font-size-lg,   18px);
+$font-size-xl:   var(--vi-font-size-xl,   20px);
+$font-size-2xl:  var(--vi-font-size-2xl,  24px);
+$font-size-3xl:  var(--vi-font-size-3xl,  30px);
+
+$font-weight-light:    var(--vi-font-weight-light,    300);
+$font-weight-normal:   var(--vi-font-weight-normal,   400);
+$font-weight-medium:   var(--vi-font-weight-medium,   500);
+$font-weight-semibold: var(--vi-font-weight-semibold, 600);
+$font-weight-bold:     var(--vi-font-weight-bold,     700);
+
+$line-height-tight:   var(--vi-line-height-tight,   1.2);
+$line-height-normal:  var(--vi-line-height-normal,  1.5);
+$line-height-relaxed: var(--vi-line-height-relaxed, 1.75);
+
+// -- Primitive: Shadows ------------------------------------------------------
+
+$shadow-sm: var(--vi-shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
+$shadow-md: var(--vi-shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
+$shadow-lg: var(--vi-shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
+$shadow-xl: var(--vi-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.1));
+
+// -- Primitive: Border radius ------------------------------------------------
+
+$border-radius-sm: var(--vi-border-radius-sm, 2px);
+$border-radius-md: var(--vi-border-radius-md, 4px);
+$border-radius-lg: var(--vi-border-radius-lg, 8px);
+$border-radius-xl: var(--vi-border-radius-xl, 12px);
+
+// -- Primitive: Border widths ------------------------------------------------
+
+$border-width-thin:  var(--vi-border-width-thin,  1px);
+$border-width-base:  var(--vi-border-width-base,  2px);
+$border-width-thick: var(--vi-border-width-thick, 3px);
+
+// ============================================================================
+// SCSS MAPS  (for programmatic class generation via @each)
+// ============================================================================
+
+// Per-palette maps — used by the $palette-maps registry below.
+
+$color-grey-map: (
+  '100': $color-grey-100,
+  '200': $color-grey-200,
+  '300': $color-grey-300,
+  '400': $color-grey-400,
+  '500': $color-grey-500,
+  '600': $color-grey-600,
+  '700': $color-grey-700,
+  '800': $color-grey-800,
+  '900': $color-grey-900,
+);
+
+$color-red-map: (
+  '100': $color-red-100,
+  '200': $color-red-200,
+  '300': $color-red-300,
+  '400': $color-red-400,
+  '500': $color-red-500,
+  '600': $color-red-600,
+  '700': $color-red-700,
+  '800': $color-red-800,
+  '900': $color-red-900,
+);
+
+$color-yellow-map: (
+  '100': $color-yellow-100,
+  '200': $color-yellow-200,
+  '300': $color-yellow-300,
+  '400': $color-yellow-400,
+  '500': $color-yellow-500,
+  '600': $color-yellow-600,
+  '700': $color-yellow-700,
+  '800': $color-yellow-800,
+  '900': $color-yellow-900,
+);
+
+$color-green-map: (
+  '100': $color-green-100,
+  '200': $color-green-200,
+  '300': $color-green-300,
+  '400': $color-green-400,
+  '500': $color-green-500,
+  '600': $color-green-600,
+  '700': $color-green-700,
+  '800': $color-green-800,
+  '900': $color-green-900,
+);
+
+$color-blue-map: (
+  '100': $color-blue-100,
+  '200': $color-blue-200,
+  '300': $color-blue-300,
+  '400': $color-blue-400,
+  '500': $color-blue-500,
+  '600': $color-blue-600,
+  '700': $color-blue-700,
+  '800': $color-blue-800,
+  '900': $color-blue-900,
+);
+
+$color-purple-map: (
+  '100': $color-purple-100,
+  '200': $color-purple-200,
+  '300': $color-purple-300,
+  '400': $color-purple-400,
+  '500': $color-purple-500,
+  '600': $color-purple-600,
+  '700': $color-purple-700,
+  '800': $color-purple-800,
+  '900': $color-purple-900,
+);
+
+// Palette registry — loop over this in utilities to generate all shade classes
+// e.g. .text-grey-500, .bg-red-100, .text-purple-900
+$palette-maps: (
+  'grey':   $color-grey-map,
+  'red':    $color-red-map,
+  'yellow': $color-yellow-map,
+  'green':  $color-green-map,
+  'blue':   $color-blue-map,
+  'purple': $color-purple-map,
+);
+
+// Semantic map — used for .text-primary, .bg-success, etc.
+$color-map: (
+  'primary':   $color-primary,
+  'secondary': $color-secondary,
+  'success':   $color-success,
+  'warning':   $color-warning,
+  'error':     $color-error,
+  'info':      $color-info,
+);
+
+$spacing-map: (
+  'xs':  $spacing-xs,
+  'sm':  $spacing-sm,
+  'md':  $spacing-md,
+  'lg':  $spacing-lg,
+  'xl':  $spacing-xl,
+  '2xl': $spacing-2xl,
+  '3xl': $spacing-3xl,
+);
+
+$shadow-map: (
+  'sm': $shadow-sm,
+  'md': $shadow-md,
+  'lg': $shadow-lg,
+  'xl': $shadow-xl,
+);
+
+// Raw values — CSS custom properties are not valid in @media queries
+$breakpoint-xs:  0;
+$breakpoint-sm:  640px;
+$breakpoint-md:  768px;
+$breakpoint-lg:  1024px;
+$breakpoint-xl:  1280px;
+$breakpoint-2xl: 1536px;
+
+$breakpoint-map: (
+  'xs':  $breakpoint-xs,
+  'sm':  $breakpoint-sm,
+  'md':  $breakpoint-md,
+  'lg':  $breakpoint-lg,
+  'xl':  $breakpoint-xl,
+  '2xl': $breakpoint-2xl,
+);
+
+// Raw integers — used as z-index values (integer arithmetic context)
+$z-index-hide:     -1;
+$z-index-auto:     auto;
+$z-index-base:     0;
+$z-index-dropdown: 1000;
+$z-index-sticky:   1020;
+$z-index-fixed:    1030;
+$z-index-backdrop: 1040;
+$z-index-modal:    1050;
+$z-index-popover:  1060;
+$z-index-tooltip:  1070;
+
+$z-index-map: (
+  'hide':     $z-index-hide,
+  'auto':     $z-index-auto,
+  'base':     $z-index-base,
+  'dropdown': $z-index-dropdown,
+  'sticky':   $z-index-sticky,
+  'fixed':    $z-index-fixed,
+  'backdrop': $z-index-backdrop,
+  'modal':    $z-index-modal,
+  'popover':  $z-index-popover,
+  'tooltip':  $z-index-tooltip,
+);

package/styles/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Flux UI — Styles Entry Point
+ * =============================
+ *
+ * This is a built entry point (@vi/flux-ui/styles) that exports the paths
+ * to each SCSS partial shipped in the package. Use the paths below in your
+ * application's SCSS to import individual layers, or import all at once:
+ *
+ * In your global styles.scss:
+ *
+ *   @use '@vi/flux-ui/styles/_variables.scss' as *;
+ *   @use '@vi/flux-ui/styles/_reset.scss';
+ *   @use '@vi/flux-ui/styles/_layout.scss';
+ *   @use '@vi/flux-ui/styles/_utilities.scss';
+ *
+ * Import order matters: variables first (provides CSS custom properties
+ * via :root and the @layer order declaration), then reset, layout, utilities.
+ */
+export declare const fluxUiStyles: {
+    readonly variables: "@vi/flux-ui/styles/_variables.scss";
+    readonly reset: "@vi/flux-ui/styles/_reset.scss";
+    readonly layout: "@vi/flux-ui/styles/_layout.scss";
+    readonly utilities: "@vi/flux-ui/styles/_utilities.scss";
+};
+export type FluxUiStyleKey = keyof typeof fluxUiStyles;
+//# sourceMappingURL=index.d.ts.map

package/styles/index.js

@@ -0,0 +1,10 @@
+// libs/flux-ui/src/styles/index.ts
+var fluxUiStyles = {
+  variables: "@vi/flux-ui/styles/_variables.scss",
+  reset: "@vi/flux-ui/styles/_reset.scss",
+  layout: "@vi/flux-ui/styles/_layout.scss",
+  utilities: "@vi/flux-ui/styles/_utilities.scss"
+};
+export {
+  fluxUiStyles
+};

package/tokens/index.d.ts

@@ -0,0 +1,218 @@
+/**
+ * Design System Tokens
+ * ======================
+ * Central source of truth for all design system values.
+ * These tokens are exported as both TypeScript constants and CSS custom properties.
+ *
+ * Structure:
+ * - colors: Brand, semantic, and functional colors
+ * - spacing: Spacing scale based on 8px unit system
+ * - typography: Font families, sizes, weights, line heights
+ * - shadows: Shadow definitions for depth
+ * - borders: Border radius and widths
+ * - breakpoints: Responsive breakpoints
+ */
+export declare const tokens: {
+    /**
+     * COLOR TOKENS
+     * Primary brand colors, semantic colors for states, and functional colors
+     */
+    readonly colors: {
+        readonly primary: "var(--vi-color-primary)";
+        readonly secondary: "var(--vi-color-secondary)";
+        readonly success: "var(--vi-color-success)";
+        readonly warning: "var(--vi-color-warning)";
+        readonly error: "var(--vi-color-error)";
+        readonly info: "var(--vi-color-info)";
+        readonly neutral: {
+            readonly 100: "var(--vi-color-grey-100)";
+            readonly 200: "var(--vi-color-grey-200)";
+            readonly 300: "var(--vi-color-grey-300)";
+            readonly 400: "var(--vi-color-grey-400)";
+            readonly 500: "var(--vi-color-grey-500)";
+            readonly 600: "var(--vi-color-grey-600)";
+            readonly 700: "var(--vi-color-grey-700)";
+            readonly 800: "var(--vi-color-grey-800)";
+            readonly 900: "var(--vi-color-grey-900)";
+        };
+        readonly palettes: {
+            readonly grey: {
+                readonly 100: "var(--vi-color-grey-100)";
+                readonly 200: "var(--vi-color-grey-200)";
+                readonly 300: "var(--vi-color-grey-300)";
+                readonly 400: "var(--vi-color-grey-400)";
+                readonly 500: "var(--vi-color-grey-500)";
+                readonly 600: "var(--vi-color-grey-600)";
+                readonly 700: "var(--vi-color-grey-700)";
+                readonly 800: "var(--vi-color-grey-800)";
+                readonly 900: "var(--vi-color-grey-900)";
+            };
+            readonly red: {
+                readonly 100: "var(--vi-color-red-100)";
+                readonly 200: "var(--vi-color-red-200)";
+                readonly 300: "var(--vi-color-red-300)";
+                readonly 400: "var(--vi-color-red-400)";
+                readonly 500: "var(--vi-color-red-500)";
+                readonly 600: "var(--vi-color-red-600)";
+                readonly 700: "var(--vi-color-red-700)";
+                readonly 800: "var(--vi-color-red-800)";
+                readonly 900: "var(--vi-color-red-900)";
+            };
+            readonly yellow: {
+                readonly 100: "var(--vi-color-yellow-100)";
+                readonly 200: "var(--vi-color-yellow-200)";
+                readonly 300: "var(--vi-color-yellow-300)";
+                readonly 400: "var(--vi-color-yellow-400)";
+                readonly 500: "var(--vi-color-yellow-500)";
+                readonly 600: "var(--vi-color-yellow-600)";
+                readonly 700: "var(--vi-color-yellow-700)";
+                readonly 800: "var(--vi-color-yellow-800)";
+                readonly 900: "var(--vi-color-yellow-900)";
+            };
+            readonly green: {
+                readonly 100: "var(--vi-color-green-100)";
+                readonly 200: "var(--vi-color-green-200)";
+                readonly 300: "var(--vi-color-green-300)";
+                readonly 400: "var(--vi-color-green-400)";
+                readonly 500: "var(--vi-color-green-500)";
+                readonly 600: "var(--vi-color-green-600)";
+                readonly 700: "var(--vi-color-green-700)";
+                readonly 800: "var(--vi-color-green-800)";
+                readonly 900: "var(--vi-color-green-900)";
+            };
+            readonly blue: {
+                readonly 100: "var(--vi-color-blue-100)";
+                readonly 200: "var(--vi-color-blue-200)";
+                readonly 300: "var(--vi-color-blue-300)";
+                readonly 400: "var(--vi-color-blue-400)";
+                readonly 500: "var(--vi-color-blue-500)";
+                readonly 600: "var(--vi-color-blue-600)";
+                readonly 700: "var(--vi-color-blue-700)";
+                readonly 800: "var(--vi-color-blue-800)";
+                readonly 900: "var(--vi-color-blue-900)";
+            };
+            readonly purple: {
+                readonly 100: "var(--vi-color-purple-100)";
+                readonly 200: "var(--vi-color-purple-200)";
+                readonly 300: "var(--vi-color-purple-300)";
+                readonly 400: "var(--vi-color-purple-400)";
+                readonly 500: "var(--vi-color-purple-500)";
+                readonly 600: "var(--vi-color-purple-600)";
+                readonly 700: "var(--vi-color-purple-700)";
+                readonly 800: "var(--vi-color-purple-800)";
+                readonly 900: "var(--vi-color-purple-900)";
+            };
+        };
+        readonly background: "var(--vi-color-background)";
+        readonly foreground: "var(--vi-color-foreground)";
+        readonly border: "var(--vi-color-border)";
+    };
+    /**
+     * SPACING TOKENS
+     * 8px base unit system: xs (8px), sm (16px), md (24px), lg (32px), xl (40px), etc.
+     */
+    readonly spacing: {
+        readonly xs: "var(--vi-spacing-xs)";
+        readonly sm: "var(--vi-spacing-sm)";
+        readonly md: "var(--vi-spacing-md)";
+        readonly lg: "var(--vi-spacing-lg)";
+        readonly xl: "var(--vi-spacing-xl)";
+        readonly '2xl': "var(--vi-spacing-2xl)";
+        readonly '3xl': "var(--vi-spacing-3xl)";
+    };
+    /**
+     * TYPOGRAPHY TOKENS
+     * Font families, sizes, weights, and line heights
+     */
+    readonly typography: {
+        readonly fontFamily: {
+            readonly base: "var(--vi-font-family-base)";
+            readonly mono: "var(--vi-font-family-mono)";
+        };
+        readonly fontSize: {
+            readonly xs: "var(--vi-font-size-xs)";
+            readonly sm: "var(--vi-font-size-sm)";
+            readonly base: "var(--vi-font-size-base)";
+            readonly lg: "var(--vi-font-size-lg)";
+            readonly xl: "var(--vi-font-size-xl)";
+            readonly '2xl': "var(--vi-font-size-2xl)";
+            readonly '3xl': "var(--vi-font-size-3xl)";
+        };
+        readonly fontWeight: {
+            readonly light: 300;
+            readonly normal: 400;
+            readonly medium: 500;
+            readonly semibold: 600;
+            readonly bold: 700;
+        };
+        readonly lineHeight: {
+            readonly tight: 1.2;
+            readonly normal: 1.5;
+            readonly relaxed: 1.75;
+        };
+    };
+    /**
+     * SHADOW TOKENS
+     * Depth levels for elevation
+     */
+    readonly shadows: {
+        readonly sm: "var(--vi-shadow-sm)";
+        readonly md: "var(--vi-shadow-md)";
+        readonly lg: "var(--vi-shadow-lg)";
+        readonly xl: "var(--vi-shadow-xl)";
+    };
+    /**
+     * BORDER TOKENS
+     * Border radius and widths
+     */
+    readonly borders: {
+        readonly radius: {
+            readonly sm: "var(--vi-border-radius-sm)";
+            readonly md: "var(--vi-border-radius-md)";
+            readonly lg: "var(--vi-border-radius-lg)";
+            readonly xl: "var(--vi-border-radius-xl)";
+        };
+        readonly width: {
+            readonly thin: "var(--vi-border-width-thin)";
+            readonly base: "var(--vi-border-width-base)";
+            readonly thick: "var(--vi-border-width-thick)";
+        };
+    };
+    /**
+     * BREAKPOINT TOKENS
+     * Responsive design breakpoints (raw pixel values, not CSS vars)
+     * Use in a JS template literal: `@media (min-width: ${tokens.breakpoints.sm})`
+     * Use in plain CSS: @media (min-width: 640px)
+     */
+    readonly breakpoints: {
+        readonly xs: "0";
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+    /**
+     * Z-INDEX TOKENS
+     * Stacking context levels (raw integers, not CSS vars)
+     * Use in CSS: z-index: tokens.zIndex.modal (e.g. 1050)
+     */
+    readonly zIndex: {
+        readonly hide: -1;
+        readonly auto: "auto";
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly backdrop: 1040;
+        readonly modal: 1050;
+        readonly popover: 1060;
+        readonly tooltip: 1070;
+    };
+};
+/**
+ * Type-safe token value extractor
+ * Preserves exact string/number types from tokens object
+ */
+export type TokenValue = typeof tokens;
+//# sourceMappingURL=index.d.ts.map