@kelvininc/ui-components
Version:
Kelvin UI Components
159 lines (157 loc) • 3.97 kB
CSS
/**
* Design Tokens - Auto-generated by Style Dictionary
* Do not edit manually - run `pnpm tokens:build` to regenerate
*/
:root {
--color-gray-50: #fff;
--color-gray-100: #fafafa;
--color-gray-200: #f2f2f2;
--color-gray-300: #e5e5e5;
--color-gray-400: #bfbfbf;
--color-gray-500: #595959;
--color-gray-600: #404040;
--color-gray-700: #333;
--color-gray-800: #262626;
--color-gray-900: #1a1a1a;
--color-gray-950: #0d0d0d;
--color-brand-100: #e5f1ff;
--color-brand-200: #b2d4ff;
--color-brand-300: #66a8ff;
--color-brand-400: #338bff;
--color-brand-500: #006fff;
--color-brand-600: #0058cc;
--color-brand-700: #004299;
--color-brand-800: #002c66;
--color-purple-100: #ece5ff;
--color-purple-200: #c6b2ff;
--color-purple-300: #a180ff;
--color-purple-500: #7c4dff;
--color-purple-600: #6933ff;
--color-teal-200: #84dcd9;
--color-teal-300: #5dd0cd;
--color-teal-400: #38c2be;
--color-teal-500: #2d9c99;
--color-teal-600: #217371;
--color-teal-700: #164b4a;
--color-green-100: #dcfeee;
--color-green-200: #abfdd6;
--color-green-300: #79fcbd;
--color-green-400: #07d571;
--color-green-500: #05a357;
--color-green-600: #03723d;
--color-red-100: #ffe4e0;
--color-red-200: #ffb8ad;
--color-red-300: #ff5c47;
--color-red-400: #ff2e14;
--color-red-500: #e11900;
--color-red-600: #ad1300;
--color-red-700: #7a0e00;
--color-blue-100: #e7effd;
--color-blue-200: #b8d0f9;
--color-blue-400: #578ef4;
--color-blue-500: #276ef1;
--color-blue-600: #0b42a8;
--color-yellow-100: #fff4db;
--color-yellow-200: #ffe4a8;
--color-yellow-300: #ffc342;
--color-yellow-500: #f7a900;
--color-yellow-600: #e09a00;
--space-0: 0;
--space-1: 1px;
--space-2: 2px;
--space-4: 4px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-18: 18px;
--space-20: 20px;
--space-22: 22px;
--space-24: 24px;
--space-28: 28px;
--space-32: 32px;
--space-36: 36px;
--space-40: 40px;
--space-44: 44px;
--space-48: 48px;
--space-52: 52px;
--space-56: 56px;
--space-60: 60px;
--space-64: 64px;
--space-72: 72px;
--space-80: 80px;
--space-88: 88px;
--space-96: 96px;
--space-999: 999px;
--space-1-5: 1.5px;
--font-family-proxima-nova: Proxima Nova;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--size-default: 16px;
--size-lg: 20px;
--size-xl: 24px;
--size-sm: 12px;
--size-md: 16px;
--size-2xl: 32px;
--size-3xl: 36px;
--size-4xl: 40px;
--size-5xl: 48px;
--size-6xl: 56px;
--size-7xl: 64px;
--spacing-none: 0;
--spacing-2xs: 2px;
--spacing-xs: 4px;
--spacing-sm: 6px;
--spacing-md: 8px;
--spacing-lg: 10px;
--spacing-xl: 12px;
--spacing-2xl: 16px;
--spacing-3xl: 20px;
--spacing-4xl: 24px;
--spacing-5xl: 32px;
--spacing-6xl: 40px;
--spacing-7xl: 48px;
--spacing-8xl: 56px;
--spacing-9xl: 64px;
--radius-none: 0;
--radius-sm: 2px;
--radius-md: 4px;
--radius-lg: 6px;
--radius-xl: 8px;
--radius-2xl: 12px;
--radius-3xl: 16px;
--radius-4xl: 24px;
--radius-full: 999px;
--border-width-none: 0;
--border-width-default: 1px;
--border-width-strong: 2px;
--font-size-xs: 10px;
--font-size-sm: 12px;
--font-size-md: 14px;
--font-size-lg: 16px;
--font-size-xl: 20px;
--font-size-2xl: 24px;
--font-size-3xl: 32px;
--font-size-4xl: 48px;
--line-height-xs: 14px;
--line-height-sm: 16px;
--line-height-md: 20px;
--line-height-lg: 24px;
--line-height-xl: 28px;
--line-height-2xl: 32px;
--line-height-3xl: 40px;
--line-height-4xl: 56px;
--letter-spacing-default: 0;
--letter-spacing-loose: 1.5px;
--paragraph-spacing-sm: 8px;
--paragraph-spacing-md: 12px;
--paragraph-spacing-lg: 16px;
--paragraph-spacing-xl: 20px;
--paragraph-spacing-2xl: 24px;
--paragraph-spacing-3xl: 32px;
--paragraph-spacing-4xl: 48px;
}