@inversestudio/design-tokens 1.0.0

package/dist/types/tokens.d.ts

@@ -0,0 +1,441 @@
+/**
+ * IDS Design Tokens - light Theme
+ * Generated by Style Dictionary
+ * Do not edit directly
+ */
+
+export interface IDSTokens {
+  ids: {
+    spacing: {
+      '0_13x': string;
+      '0_25x': string;
+      '0_38x': string;
+      '0_5x': string;
+      '0_75x': string;
+      '1x': string;
+      '1_25x': string;
+      '1_5x': string;
+      '2x': string;
+      '2_5x': string;
+    };
+    dimension: {
+      element: {
+        '1x': string;
+        '1_5x': string;
+        '2x': string;
+        '3x': string;
+        '3_5x': string;
+        '4_5x': string;
+      };
+      icon: {
+        '1x': string;
+        '1_25x': string;
+        '1_5x': string;
+      };
+    };
+    core: {
+      color: {
+        neutral: {
+          '50': string;
+          '100': string;
+          '200': string;
+          '300': string;
+          '400': string;
+          '500': string;
+          '600': string;
+          '700': string;
+          '800': string;
+          '900': string;
+          '950': string;
+          '1000': string;
+        };
+        blue: {
+          '50': string;
+          '100': string;
+          '200': string;
+          '300': string;
+          '400': string;
+          '500': string;
+          '600': string;
+          '700': string;
+          '800': string;
+          '900': string;
+          '950': string;
+          '1000': string;
+        };
+        red: {
+          '50': string;
+          '100': string;
+          '200': string;
+          '300': string;
+          '400': string;
+          '500': string;
+          '600': string;
+          '700': string;
+          '800': string;
+          '900': string;
+          '950': string;
+          '1000': string;
+        };
+        green: {
+          '50': string;
+          '100': string;
+          '200': string;
+          '300': string;
+          '400': string;
+          '500': string;
+          '600': string;
+          '700': string;
+          '800': string;
+          '900': string;
+          '950': string;
+          '1000': string;
+        };
+        transparent: string;
+      };
+      'font-size': {
+        base: string;
+      };
+      font: string;
+      lineHeight: {
+        base: string;
+      };
+      sizing: {
+        REM: string;
+        base: string;
+      };
+      borderRadius: {
+        base: string;
+      };
+      borderWidth: {
+        slim: string;
+        thick: string;
+      };
+    };
+    typography: {
+      label: {
+        '1x': string;
+      };
+    };
+    borderRadius: {
+      '0_25x': string;
+      full: string;
+    };
+    border: {
+      focused: string;
+      primary: string;
+      disabled: string;
+      transparent: string;
+    };
+    color: {
+      element: {
+        primary: {
+          default: string;
+          hover: string;
+          active: string;
+          onPrimary: string;
+        };
+        secondary: {
+          default: string;
+          hover: string;
+          active: string;
+          onSecondary: string;
+        };
+        primaryInverted: {
+          default: string;
+          hover: string;
+          active: string;
+          onPrimaryAccent: string;
+        };
+        primaryAccentInverted: {
+          default: string;
+          hover: string;
+          active: string;
+          onPrimaryAccentInverted: string;
+        };
+        disabled: string;
+        onDisabled: string;
+      };
+      border: {
+        primary: string;
+        disabled: string;
+        muted: string;
+        subtle: string;
+        focus: string;
+      };
+    };
+  };
+}
+
+export const tokens: IDSTokens = {
+  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': '[object Object]'
+      }
+    },
+    borderRadius: {
+      '0_25x': '4px',
+      full: '1600px'
+    },
+    border: {
+      focused: '[object Object]',
+      primary: '[object Object]',
+      disabled: '[object Object]',
+      transparent: '[object Object]'
+    },
+    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'
+      }
+    }
+  }
+};
+
+// Flat token exports
+export const idsSpacing013x = '2px';
+export const idsSpacing025x = '4px';
+export const idsSpacing038x = '6px';
+export const idsSpacing05x = '8px';
+export const idsSpacing075x = '12px';
+export const idsSpacing1x = '16px';
+export const idsSpacing125x = '20px';
+export const idsSpacing15x = '24px';
+export const idsSpacing2x = '32px';
+export const idsSpacing25x = '40px';
+export const idsDimensionElement1x = '16px';
+export const idsDimensionElement15x = '24px';
+export const idsDimensionElement2x = '32px';
+export const idsDimensionElement3x = '48px';
+export const idsDimensionElement35x = '56px';
+export const idsDimensionElement45x = '72px';
+export const idsDimensionIcon1x = '16px';
+export const idsDimensionIcon125x = '20px';
+export const idsDimensionIcon15x = '24px';
+export const idsCoreColorNeutral50 = '#ffffff';
+export const idsCoreColorNeutral100 = '#fafafb';
+export const idsCoreColorNeutral200 = '#f5f5f8';
+export const idsCoreColorNeutral300 = '#ebebef';
+export const idsCoreColorNeutral400 = '#e0e1e4';
+export const idsCoreColorNeutral500 = '#c5c6cb';
+export const idsCoreColorNeutral600 = '#adaeb3';
+export const idsCoreColorNeutral700 = '#8e9099';
+export const idsCoreColorNeutral800 = '#707784';
+export const idsCoreColorNeutral900 = '#4d5057';
+export const idsCoreColorNeutral950 = '#2d2f35';
+export const idsCoreColorNeutral1000 = '#101114';
+export const idsCoreColorBlue50 = '#e6edfb';
+export const idsCoreColorBlue100 = '#d1def8';
+export const idsCoreColorBlue200 = '#c3d8ff';
+export const idsCoreColorBlue300 = '#a2bae9';
+export const idsCoreColorBlue400 = '#7eaaff';
+export const idsCoreColorBlue500 = '#5c8fe8';
+export const idsCoreColorBlue600 = '#4a7ad4';
+export const idsCoreColorBlue700 = '#3a64b8';
+export const idsCoreColorBlue800 = '#27447c';
+export const idsCoreColorBlue900 = '#1e3560';
+export const idsCoreColorBlue950 = '#142442';
+export const idsCoreColorBlue1000 = '#0b1526';
+export const idsCoreColorRed50 = '#fef2f2';
+export const idsCoreColorRed100 = '#fee2e2';
+export const idsCoreColorRed200 = '#fecaca';
+export const idsCoreColorRed300 = '#fca5a5';
+export const idsCoreColorRed400 = '#f87171';
+export const idsCoreColorRed500 = '#ef4444';
+export const idsCoreColorRed600 = '#dc2626';
+export const idsCoreColorRed700 = '#b91c1c';
+export const idsCoreColorRed800 = '#991b1b';
+export const idsCoreColorRed900 = '#7f1d1d';
+export const idsCoreColorRed950 = '#5c1414';
+export const idsCoreColorRed1000 = '#350a0a';
+export const idsCoreColorGreen50 = '#ecfdf5';
+export const idsCoreColorGreen100 = '#d1fae5';
+export const idsCoreColorGreen200 = '#a7f3d0';
+export const idsCoreColorGreen300 = '#6ee7b7';
+export const idsCoreColorGreen400 = '#34d399';
+export const idsCoreColorGreen500 = '#10b981';
+export const idsCoreColorGreen600 = '#059669';
+export const idsCoreColorGreen700 = '#047857';
+export const idsCoreColorGreen800 = '#065f46';
+export const idsCoreColorGreen900 = '#064e3b';
+export const idsCoreColorGreen950 = '#043b2c';
+export const idsCoreColorGreen1000 = '#022419';
+export const idsCoreColorTransparent = '#00000000';
+export const idsCoreFontSizeBase = '16px';
+export const idsCoreFont = 'Tomato Grotesk';
+export const idsCoreLineheightBase = '16px *1';
+export const idsCoreSizingRem = '16px';
+export const idsCoreSizingBase = '16px';
+export const idsCoreBorderradiusBase = '16px';
+export const idsCoreBorderwidthSlim = '1px';
+export const idsCoreBorderwidthThick = '2px';
+export const idsTypographyLabel1x = '[object Object]';
+export const idsBorderradius025x = '4px';
+export const idsBorderradiusFull = '1600px';
+export const idsBorderFocused = '[object Object]';
+export const idsBorderPrimary = '[object Object]';
+export const idsBorderDisabled = '[object Object]';
+export const idsBorderTransparent = '[object Object]';
+export const idsColorElementPrimaryDefault = '#4d5057';
+export const idsColorElementPrimaryHover = '#4d5057';
+export const idsColorElementPrimaryActive = '#101114';
+export const idsColorElementPrimaryOnprimary = '#ffffff';
+export const idsColorElementSecondaryDefault = '#00000000';
+export const idsColorElementSecondaryHover = '#e6edfb';
+export const idsColorElementSecondaryActive = '#d1def8';
+export const idsColorElementSecondaryOnsecondary = '#2d2f35';
+export const idsColorElementPrimaryinvertedDefault = '#ffffff';
+export const idsColorElementPrimaryinvertedHover = '#fafafb';
+export const idsColorElementPrimaryinvertedActive = '#f5f5f8';
+export const idsColorElementPrimaryinvertedOnprimaryaccent = '#101114';
+export const idsColorElementPrimaryaccentinvertedDefault = '#101114';
+export const idsColorElementPrimaryaccentinvertedHover = '#2d2f35';
+export const idsColorElementPrimaryaccentinvertedActive = '#4d5057';
+export const idsColorElementPrimaryaccentinvertedOnprimaryaccentinverted = '#ffffff';
+export const idsColorElementDisabled = '#adaeb3';
+export const idsColorElementOndisabled = '#707784';
+export const idsColorBorderPrimary = '#2d2f35';
+export const idsColorBorderDisabled = '#adaeb3';
+export const idsColorBorderMuted = '#e0e1e4';
+export const idsColorBorderSubtle = '#f5f5f8';
+export const idsColorBorderFocus = '#7eaaff';
+
+export default tokens;