@inversestudio/design-tokens 1.0.0

package/dist/json/tokens.light.nested.json

@@ -0,0 +1,183 @@
+{
+  "ids": {
+    "spacing": {
+      "0_13x": "2px",
+      "0_25x": "4px",
+      "0_38x": "6px",
+      "0_5x": "8px",
+      "0_75x": "12px",
+      "1x": "16px",
+      "1_25x": "20px",
+      "1_5x": "24px",
+      "2x": "32px",
+      "2_5x": "40px"
+    },
+    "dimension": {
+      "element": {
+        "1x": "16px",
+        "1_5x": "24px",
+        "2x": "32px",
+        "3x": "48px",
+        "3_5x": "56px",
+        "4_5x": "72px"
+      },
+      "icon": {
+        "1x": "16px",
+        "1_25x": "20px",
+        "1_5x": "24px"
+      }
+    },
+    "core": {
+      "color": {
+        "neutral": {
+          "50": "#ffffff",
+          "100": "#fafafb",
+          "200": "#f5f5f8",
+          "300": "#ebebef",
+          "400": "#e0e1e4",
+          "500": "#c5c6cb",
+          "600": "#adaeb3",
+          "700": "#8e9099",
+          "800": "#707784",
+          "900": "#4d5057",
+          "950": "#2d2f35",
+          "1000": "#101114"
+        },
+        "blue": {
+          "50": "#e6edfb",
+          "100": "#d1def8",
+          "200": "#c3d8ff",
+          "300": "#a2bae9",
+          "400": "#7eaaff",
+          "500": "#5c8fe8",
+          "600": "#4a7ad4",
+          "700": "#3a64b8",
+          "800": "#27447c",
+          "900": "#1e3560",
+          "950": "#142442",
+          "1000": "#0b1526"
+        },
+        "red": {
+          "50": "#fef2f2",
+          "100": "#fee2e2",
+          "200": "#fecaca",
+          "300": "#fca5a5",
+          "400": "#f87171",
+          "500": "#ef4444",
+          "600": "#dc2626",
+          "700": "#b91c1c",
+          "800": "#991b1b",
+          "900": "#7f1d1d",
+          "950": "#5c1414",
+          "1000": "#350a0a"
+        },
+        "green": {
+          "50": "#ecfdf5",
+          "100": "#d1fae5",
+          "200": "#a7f3d0",
+          "300": "#6ee7b7",
+          "400": "#34d399",
+          "500": "#10b981",
+          "600": "#059669",
+          "700": "#047857",
+          "800": "#065f46",
+          "900": "#064e3b",
+          "950": "#043b2c",
+          "1000": "#022419"
+        },
+        "transparent": "#00000000"
+      },
+      "font-size": {
+        "base": "16px"
+      },
+      "font": "Tomato Grotesk",
+      "lineHeight": {
+        "base": "16px *1"
+      },
+      "sizing": {
+        "REM": "16px",
+        "base": "16px"
+      },
+      "borderRadius": {
+        "base": "16px"
+      },
+      "borderWidth": {
+        "slim": "1px",
+        "thick": "2px"
+      }
+    },
+    "typography": {
+      "label": {
+        "1x": {
+          "fontFamily": "Tomato Grotesk",
+          "fontSize": "16px",
+          "lineHeight": "16px *1",
+          "fontWeight": "600"
+        }
+      }
+    },
+    "borderRadius": {
+      "0_25x": "4px",
+      "full": "1600px"
+    },
+    "border": {
+      "focused": {
+        "color": "#7eaaff",
+        "width": "2px",
+        "style": "solid"
+      },
+      "primary": {
+        "color": "#2d2f35",
+        "width": "2px",
+        "style": "solid"
+      },
+      "disabled": {
+        "color": "#adaeb3",
+        "width": "2px",
+        "style": "solid"
+      },
+      "transparent": {
+        "color": "#00000000",
+        "width": "2px",
+        "style": "solid"
+      }
+    },
+    "color": {
+      "element": {
+        "primary": {
+          "default": "#4d5057",
+          "hover": "#4d5057",
+          "active": "#101114",
+          "onPrimary": "#ffffff"
+        },
+        "secondary": {
+          "default": "#00000000",
+          "hover": "#e6edfb",
+          "active": "#d1def8",
+          "onSecondary": "#2d2f35"
+        },
+        "primaryInverted": {
+          "default": "#ffffff",
+          "hover": "#fafafb",
+          "active": "#f5f5f8",
+          "onPrimaryAccent": "#101114"
+        },
+        "primaryAccentInverted": {
+          "default": "#101114",
+          "hover": "#2d2f35",
+          "active": "#4d5057",
+          "onPrimaryAccentInverted": "#ffffff"
+        },
+        "disabled": "#adaeb3",
+        "onDisabled": "#707784"
+      },
+      "border": {
+        "primary": "#2d2f35",
+        "disabled": "#adaeb3",
+        "muted": "#e0e1e4",
+        "subtle": "#f5f5f8",
+        "focus": "#7eaaff"
+      }
+    }
+  }
+}

package/dist/json/tokens.nested.json

@@ -0,0 +1,183 @@
+{
+  "ids": {
+    "spacing": {
+      "0_13x": "2px",
+      "0_25x": "4px",
+      "0_38x": "6px",
+      "0_5x": "8px",
+      "0_75x": "12px",
+      "1x": "16px",
+      "1_25x": "20px",
+      "1_5x": "24px",
+      "2x": "32px",
+      "2_5x": "40px"
+    },
+    "dimension": {
+      "element": {
+        "1x": "16px",
+        "1_5x": "24px",
+        "2x": "32px",
+        "3x": "48px",
+        "3_5x": "56px",
+        "4_5x": "72px"
+      },
+      "icon": {
+        "1x": "16px",
+        "1_25x": "20px",
+        "1_5x": "24px"
+      }
+    },
+    "core": {
+      "color": {
+        "neutral": {
+          "50": "#ffffff",
+          "100": "#fafafb",
+          "200": "#f5f5f8",
+          "300": "#ebebef",
+          "400": "#e0e1e4",
+          "500": "#c5c6cb",
+          "600": "#adaeb3",
+          "700": "#8e9099",
+          "800": "#707784",
+          "900": "#4d5057",
+          "950": "#2d2f35",
+          "1000": "#101114"
+        },
+        "blue": {
+          "50": "#e6edfb",
+          "100": "#d1def8",
+          "200": "#c3d8ff",
+          "300": "#a2bae9",
+          "400": "#7eaaff",
+          "500": "#5c8fe8",
+          "600": "#4a7ad4",
+          "700": "#3a64b8",
+          "800": "#27447c",
+          "900": "#1e3560",
+          "950": "#142442",
+          "1000": "#0b1526"
+        },
+        "red": {
+          "50": "#fef2f2",
+          "100": "#fee2e2",
+          "200": "#fecaca",
+          "300": "#fca5a5",
+          "400": "#f87171",
+          "500": "#ef4444",
+          "600": "#dc2626",
+          "700": "#b91c1c",
+          "800": "#991b1b",
+          "900": "#7f1d1d",
+          "950": "#5c1414",
+          "1000": "#350a0a"
+        },
+        "green": {
+          "50": "#ecfdf5",
+          "100": "#d1fae5",
+          "200": "#a7f3d0",
+          "300": "#6ee7b7",
+          "400": "#34d399",
+          "500": "#10b981",
+          "600": "#059669",
+          "700": "#047857",
+          "800": "#065f46",
+          "900": "#064e3b",
+          "950": "#043b2c",
+          "1000": "#022419"
+        },
+        "transparent": "#00000000"
+      },
+      "font-size": {
+        "base": "16px"
+      },
+      "font": "Tomato Grotesk",
+      "lineHeight": {
+        "base": "16px *1"
+      },
+      "sizing": {
+        "REM": "16px",
+        "base": "16px"
+      },
+      "borderRadius": {
+        "base": "16px"
+      },
+      "borderWidth": {
+        "slim": "1px",
+        "thick": "2px"
+      }
+    },
+    "typography": {
+      "label": {
+        "1x": {
+          "fontFamily": "Tomato Grotesk",
+          "fontSize": "16px",
+          "lineHeight": "16px *1",
+          "fontWeight": "600"
+        }
+      }
+    },
+    "borderRadius": {
+      "0_25x": "4px",
+      "full": "1600px"
+    },
+    "border": {
+      "focused": {
+        "color": "#7eaaff",
+        "width": "2px",
+        "style": "solid"
+      },
+      "primary": {
+        "color": "#2d2f35",
+        "width": "2px",
+        "style": "solid"
+      },
+      "disabled": {
+        "color": "#adaeb3",
+        "width": "2px",
+        "style": "solid"
+      },
+      "transparent": {
+        "color": "#00000000",
+        "width": "2px",
+        "style": "solid"
+      }
+    },
+    "color": {
+      "element": {
+        "primary": {
+          "default": "#4d5057",
+          "hover": "#4d5057",
+          "active": "#101114",
+          "onPrimary": "#ffffff"
+        },
+        "secondary": {
+          "default": "#00000000",
+          "hover": "#e6edfb",
+          "active": "#d1def8",
+          "onSecondary": "#2d2f35"
+        },
+        "primaryInverted": {
+          "default": "#ffffff",
+          "hover": "#fafafb",
+          "active": "#f5f5f8",
+          "onPrimaryAccent": "#101114"
+        },
+        "primaryAccentInverted": {
+          "default": "#101114",
+          "hover": "#2d2f35",
+          "active": "#4d5057",
+          "onPrimaryAccentInverted": "#ffffff"
+        },
+        "disabled": "#adaeb3",
+        "onDisabled": "#707784"
+      },
+      "border": {
+        "primary": "#2d2f35",
+        "disabled": "#adaeb3",
+        "muted": "#e0e1e4",
+        "subtle": "#f5f5f8",
+        "focus": "#7eaaff"
+      }
+    }
+  }
+}

package/dist/scss/_mixins.scss

@@ -0,0 +1,59 @@
+// IDS Design Tokens - Utility Mixins
+// Generated by Style Dictionary
+// Do not edit directly
+
+/// Apply a token as a CSS custom property
+/// @param {String} $property - CSS property name
+/// @param {String} $token - Token name (without -- prefix)
+@mixin ids-token($property, $token) {
+  #{$property}: var(--#{$token});
+}
+
+/// Apply spacing token
+/// @param {String} $property - CSS property (padding, margin, gap, etc.)
+/// @param {String} $size - Size multiplier (0-5x, 0-25x, 1x, etc.)
+@mixin ids-spacing($property, $size) {
+  #{$property}: var(--ids-spacing-#{$size});
+}
+
+/// Apply color token
+/// @param {String} $property - CSS property (color, background-color, etc.)
+/// @param {String} $color - Color token path (e.g., 'element-primary-default')
+@mixin ids-color($property, $color) {
+  #{$property}: var(--ids-color-#{$color});
+}
+
+/// Apply typography composite
+/// @param {String} $style - Typography style (label-1x, etc.)
+@mixin ids-typography($style) {
+  font-family: var(--ids-typography-#{$style}-font-family);
+  font-size: var(--ids-typography-#{$style}-font-size);
+  line-height: var(--ids-typography-#{$style}-line-height);
+  font-weight: var(--ids-typography-#{$style}-font-weight);
+}
+
+/// Apply border token
+/// @param {String} $style - Border style (focused, primary, disabled)
+@mixin ids-border($style) {
+  border: var(--ids-border-#{$style});
+}
+
+/// Apply border radius
+/// @param {String} $size - Radius size (0-25x, full)
+@mixin ids-radius($size) {
+  border-radius: var(--ids-border-radius-#{$size});
+}
+
+/// Theme-aware property (changes based on data-theme attribute)
+/// @param {String} $property - CSS property
+/// @param {String} $light-token - Token for light theme
+/// @param {String} $dark-token - Token for dark theme (optional, defaults to light)
+@mixin ids-themed($property, $light-token, $dark-token: null) {
+  #{$property}: var(--#{$light-token});
+
+  @if $dark-token {
+    [data-theme="dark"] & {
+      #{$property}: var(--#{$dark-token});
+    }
+  }
+}

package/dist/scss/_tokens.dark.scss

@@ -0,0 +1,171 @@
+//
+// IDS Design Tokens - dark Theme
+// Generated by Style Dictionary
+// Do not edit directly
+//
+
+$ids-core-color-neutral-50: #ffffff;
+$ids-core-color-neutral-100: #fafafb;
+$ids-core-color-neutral-200: #f5f5f8;
+$ids-core-color-neutral-300: #ebebef;
+$ids-core-color-neutral-400: #e0e1e4;
+$ids-core-color-neutral-500: #c5c6cb;
+$ids-core-color-neutral-600: #adaeb3;
+$ids-core-color-neutral-700: #8e9099;
+$ids-core-color-neutral-800: #707784;
+$ids-core-color-neutral-900: #4d5057;
+$ids-core-color-neutral-950: #2d2f35;
+$ids-core-color-neutral-1000: #101114;
+$ids-core-color-blue-50: #e6edfb;
+$ids-core-color-blue-100: #d1def8;
+$ids-core-color-blue-200: #c3d8ff;
+$ids-core-color-blue-300: #a2bae9;
+$ids-core-color-blue-400: #7eaaff;
+$ids-core-color-blue-500: #5c8fe8;
+$ids-core-color-blue-600: #4a7ad4;
+$ids-core-color-blue-700: #3a64b8;
+$ids-core-color-blue-800: #27447c;
+$ids-core-color-blue-900: #1e3560;
+$ids-core-color-blue-950: #142442;
+$ids-core-color-blue-1000: #0b1526;
+$ids-core-color-red-50: #fef2f2;
+$ids-core-color-red-100: #fee2e2;
+$ids-core-color-red-200: #fecaca;
+$ids-core-color-red-300: #fca5a5;
+$ids-core-color-red-400: #f87171;
+$ids-core-color-red-500: #ef4444;
+$ids-core-color-red-600: #dc2626;
+$ids-core-color-red-700: #b91c1c;
+$ids-core-color-red-800: #991b1b;
+$ids-core-color-red-900: #7f1d1d;
+$ids-core-color-red-950: #5c1414;
+$ids-core-color-red-1000: #350a0a;
+$ids-core-color-green-50: #ecfdf5;
+$ids-core-color-green-100: #d1fae5;
+$ids-core-color-green-200: #a7f3d0;
+$ids-core-color-green-300: #6ee7b7;
+$ids-core-color-green-400: #34d399;
+$ids-core-color-green-500: #10b981;
+$ids-core-color-green-600: #059669;
+$ids-core-color-green-700: #047857;
+$ids-core-color-green-800: #065f46;
+$ids-core-color-green-900: #064e3b;
+$ids-core-color-green-950: #043b2c;
+$ids-core-color-green-1000: #022419;
+$ids-core-color-transparent: #00000000;
+$ids-core-sizing-rem: 16px;
+$ids-core-sizing-base: 16px;
+$ids-core-font-size-base: 16px;
+$ids-core-font: Tomato Grotesk;
+$ids-core-lineheight-base: 16px *1;
+$ids-core-borderradius-base: 16px;
+$ids-core-borderwidth-slim: 1px;
+$ids-core-borderwidth-thick: 2px;
+$ids-spacing-0-13x: 2px;
+$ids-spacing-0-25x: 4px;
+$ids-spacing-0-38x: 6px;
+$ids-spacing-0-5x: 8px;
+$ids-spacing-0-75x: 12px;
+$ids-spacing-1x: 16px;
+$ids-spacing-1-25x: 20px;
+$ids-spacing-1-5x: 24px;
+$ids-spacing-2x: 32px;
+$ids-spacing-2-5x: 40px;
+$ids-dimension-element-1x: 16px;
+$ids-dimension-element-1-5x: 24px;
+$ids-dimension-element-2x: 32px;
+$ids-dimension-element-3x: 48px;
+$ids-dimension-element-3-5x: 56px;
+$ids-dimension-element-4-5x: 72px;
+$ids-dimension-icon-1x: 16px;
+$ids-dimension-icon-1-25x: 20px;
+$ids-dimension-icon-1-5x: 24px;
+
+// Token map for programmatic access
+$ids-tokens: (
+  'ids-core-color-neutral-50': $ids-core-color-neutral-50,
+  'ids-core-color-neutral-100': $ids-core-color-neutral-100,
+  'ids-core-color-neutral-200': $ids-core-color-neutral-200,
+  'ids-core-color-neutral-300': $ids-core-color-neutral-300,
+  'ids-core-color-neutral-400': $ids-core-color-neutral-400,
+  'ids-core-color-neutral-500': $ids-core-color-neutral-500,
+  'ids-core-color-neutral-600': $ids-core-color-neutral-600,
+  'ids-core-color-neutral-700': $ids-core-color-neutral-700,
+  'ids-core-color-neutral-800': $ids-core-color-neutral-800,
+  'ids-core-color-neutral-900': $ids-core-color-neutral-900,
+  'ids-core-color-neutral-950': $ids-core-color-neutral-950,
+  'ids-core-color-neutral-1000': $ids-core-color-neutral-1000,
+  'ids-core-color-blue-50': $ids-core-color-blue-50,
+  'ids-core-color-blue-100': $ids-core-color-blue-100,
+  'ids-core-color-blue-200': $ids-core-color-blue-200,
+  'ids-core-color-blue-300': $ids-core-color-blue-300,
+  'ids-core-color-blue-400': $ids-core-color-blue-400,
+  'ids-core-color-blue-500': $ids-core-color-blue-500,
+  'ids-core-color-blue-600': $ids-core-color-blue-600,
+  'ids-core-color-blue-700': $ids-core-color-blue-700,
+  'ids-core-color-blue-800': $ids-core-color-blue-800,
+  'ids-core-color-blue-900': $ids-core-color-blue-900,
+  'ids-core-color-blue-950': $ids-core-color-blue-950,
+  'ids-core-color-blue-1000': $ids-core-color-blue-1000,
+  'ids-core-color-red-50': $ids-core-color-red-50,
+  'ids-core-color-red-100': $ids-core-color-red-100,
+  'ids-core-color-red-200': $ids-core-color-red-200,
+  'ids-core-color-red-300': $ids-core-color-red-300,
+  'ids-core-color-red-400': $ids-core-color-red-400,
+  'ids-core-color-red-500': $ids-core-color-red-500,
+  'ids-core-color-red-600': $ids-core-color-red-600,
+  'ids-core-color-red-700': $ids-core-color-red-700,
+  'ids-core-color-red-800': $ids-core-color-red-800,
+  'ids-core-color-red-900': $ids-core-color-red-900,
+  'ids-core-color-red-950': $ids-core-color-red-950,
+  'ids-core-color-red-1000': $ids-core-color-red-1000,
+  'ids-core-color-green-50': $ids-core-color-green-50,
+  'ids-core-color-green-100': $ids-core-color-green-100,
+  'ids-core-color-green-200': $ids-core-color-green-200,
+  'ids-core-color-green-300': $ids-core-color-green-300,
+  'ids-core-color-green-400': $ids-core-color-green-400,
+  'ids-core-color-green-500': $ids-core-color-green-500,
+  'ids-core-color-green-600': $ids-core-color-green-600,
+  'ids-core-color-green-700': $ids-core-color-green-700,
+  'ids-core-color-green-800': $ids-core-color-green-800,
+  'ids-core-color-green-900': $ids-core-color-green-900,
+  'ids-core-color-green-950': $ids-core-color-green-950,
+  'ids-core-color-green-1000': $ids-core-color-green-1000,
+  'ids-core-color-transparent': $ids-core-color-transparent,
+  'ids-core-sizing-rem': $ids-core-sizing-rem,
+  'ids-core-sizing-base': $ids-core-sizing-base,
+  'ids-core-font-size-base': $ids-core-font-size-base,
+  'ids-core-font': $ids-core-font,
+  'ids-core-lineheight-base': $ids-core-lineheight-base,
+  'ids-core-borderradius-base': $ids-core-borderradius-base,
+  'ids-core-borderwidth-slim': $ids-core-borderwidth-slim,
+  'ids-core-borderwidth-thick': $ids-core-borderwidth-thick,
+  'ids-spacing-0-13x': $ids-spacing-0-13x,
+  'ids-spacing-0-25x': $ids-spacing-0-25x,
+  'ids-spacing-0-38x': $ids-spacing-0-38x,
+  'ids-spacing-0-5x': $ids-spacing-0-5x,
+  'ids-spacing-0-75x': $ids-spacing-0-75x,
+  'ids-spacing-1x': $ids-spacing-1x,
+  'ids-spacing-1-25x': $ids-spacing-1-25x,
+  'ids-spacing-1-5x': $ids-spacing-1-5x,
+  'ids-spacing-2x': $ids-spacing-2x,
+  'ids-spacing-2-5x': $ids-spacing-2-5x,
+  'ids-dimension-element-1x': $ids-dimension-element-1x,
+  'ids-dimension-element-1-5x': $ids-dimension-element-1-5x,
+  'ids-dimension-element-2x': $ids-dimension-element-2x,
+  'ids-dimension-element-3x': $ids-dimension-element-3x,
+  'ids-dimension-element-3-5x': $ids-dimension-element-3-5x,
+  'ids-dimension-element-4-5x': $ids-dimension-element-4-5x,
+  'ids-dimension-icon-1x': $ids-dimension-icon-1x,
+  'ids-dimension-icon-1-25x': $ids-dimension-icon-1-25x,
+  'ids-dimension-icon-1-5x': $ids-dimension-icon-1-5x
+);
+
+// Utility function to get token value
+@function ids-token($name) {
+  @if map-has-key($ids-tokens, $name) {
+    @return map-get($ids-tokens, $name);
+  }
+  @warn "Token '#{$name}' not found.";
+  @return null;
+}