tonkean-tcltext 1.0.0

package/src/styles/tokens.css

@@ -0,0 +1,274 @@
+:root {
+  /* Colors - Basic */
+  --color-black: #000000;
+  --color-white: #FFFFFF;
+
+  /* Colors - Gray */
+  --color-gray-50: #F9FAFB;
+  --color-gray-100: #F3F4F6;
+  --color-gray-200: #E5E7EB;
+  --color-gray-300: #D1D5DB;
+  --color-gray-400: #9CA3AF;
+  --color-gray-500: #6B7280;
+  --color-gray-600: #4B5563;
+  --color-gray-700: #1F2937;
+  --color-gray-800: #374151;
+  --color-gray-900: #111827;
+
+  /* Colors - Red */
+  --color-red-50: #FEF2F2;
+  --color-red-100: #FEE2E2;
+  --color-red-200: #FECACA;
+  --color-red-300: #FCA5A5;
+  --color-red-400: #F87171;
+  --color-red-500: #EF4444;
+  --color-red-600: #DC2626;
+  --color-red-700: #B91C1C;
+  --color-red-800: #991B1B;
+  --color-red-900: #7F1D1D;
+
+  /* Colors - Yellow */
+  --color-yellow-50: #FEF3C7;
+  --color-yellow-100: #FDE68A;
+  --color-yellow-200: #FCD34D;
+  --color-yellow-300: #FBBF24;
+  --color-yellow-400: #F59E0B;
+  --color-yellow-500: #D97706;
+  --color-yellow-600: #B45309;
+  --color-yellow-700: #92400E;
+  --color-yellow-800: #78350F;
+  --color-yellow-900: #451A03;
+
+  /* Colors - Green */
+  --color-green-50: #ECFDF3;
+  --color-green-100: #D1FAE5;
+  --color-green-200: #A7F3D0;
+  --color-green-300: #6EE7B7;
+  --color-green-400: #34D399;
+  --color-green-500: #10B981;
+  --color-green-600: #059669;
+  --color-green-700: #047857;
+  --color-green-800: #065F46;
+  --color-green-900: #064E3B;
+
+  /* Colors - Blue */
+  --color-blue-50: #EFF6FF;
+  --color-blue-100: #DBEAFE;
+  --color-blue-200: #BFDBFE;
+  --color-blue-300: #93C5FD;
+  --color-blue-400: #60A5FA;
+  --color-blue-500: #3B82F6;
+  --color-blue-600: #2563EB;
+  --color-blue-700: #1D4ED8;
+  --color-blue-800: #1E40AF;
+  --color-blue-900: #1E3A8A;
+
+  /* Colors - Purple */
+  --color-purple-50: #F5F3FF;
+  --color-purple-100: #EDE9FE;
+  --color-purple-200: #DDD6FE;
+  --color-purple-300: #C4B5FD;
+  --color-purple-400: #A78BFA;
+  --color-purple-500: #8B5CF6;
+  --color-purple-600: #7C3AED;
+  --color-purple-700: #6D28D9;
+  --color-purple-800: #5B21B6;
+  --color-purple-900: #4C1D95;
+
+  /* Colors - Pink */
+  --color-pink-50: #FDF2F8;
+  --color-pink-100: #FCE7F3;
+  --color-pink-200: #FBCFE8;
+  --color-pink-300: #F9A8D4;
+  --color-pink-400: #F472B6;
+  --color-pink-500: #EC4899;
+  --color-pink-600: #DB2777;
+  --color-pink-700: #BE185D;
+  --color-pink-800: #9D174D;
+  --color-pink-900: #831843;
+
+  /* Typography - Font Families */
+  --font-family-lato: 'Lato', system-ui, sans-serif;
+  --font-family-roboto: 'Roboto', system-ui, sans-serif;
+
+  /* Typography - Font Sizes */
+  --font-size-xs: 10px;
+  --font-size-sm: 12px;
+  --font-size-base: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+
+  /* Typography - Font Weights */
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-bold: 700;
+
+  /* Typography - Line Heights */
+  --line-height-tight: 1.25;
+  --line-height-snug: 1.375;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.625;
+  --line-height-loose: 2;
+
+  /* Typography - Letter Spacing */
+  --letter-spacing-tighter: -0.05em;
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0em;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+
+  /* Buttons - Sizes */
+  --button-size-small-padding-vertical: 6px;
+  --button-size-small-padding-horizontal: 12px;
+  --button-size-small-font-size: 12px;
+  --button-size-small-min-height: 28px;
+
+  --button-size-regular-padding-vertical: 8px;
+  --button-size-regular-padding-horizontal: 16px;
+  --button-size-regular-font-size: 14px;
+  --button-size-regular-min-height: 36px;
+
+  --button-size-large-padding-vertical: 10px;
+  --button-size-large-padding-horizontal: 20px;
+  --button-size-large-font-size: 16px;
+  --button-size-large-min-height: 44px;
+
+  /* Buttons - Base */
+  --button-border-radius: 4px;
+  --button-border-width: 1px;
+
+  /* Buttons - Default Variant */
+  --button-default-default-background: var(--color-purple-600);
+  --button-default-default-text: var(--color-white);
+  --button-default-default-icon: var(--color-white);
+  --button-default-default-border: none;
+
+  --button-default-hover-background: var(--color-purple-700);
+  --button-default-hover-text: var(--color-white);
+  --button-default-hover-icon: var(--color-white);
+  --button-default-hover-border: none;
+
+  --button-default-disabled-background: var(--color-gray-300);
+  --button-default-disabled-text: var(--color-gray-400);
+  --button-default-disabled-icon: var(--color-gray-400);
+  --button-default-disabled-border: none;
+
+  /* Buttons - Secondary Variant */
+  --button-secondary-default-background: var(--color-white);
+  --button-secondary-default-text: var(--color-gray-900);
+  --button-secondary-default-icon: var(--color-gray-900);
+  --button-secondary-default-border: 1px solid var(--color-gray-300);
+
+  --button-secondary-hover-background: var(--color-gray-100);
+  --button-secondary-hover-text: var(--color-gray-900);
+  --button-secondary-hover-icon: var(--color-gray-900);
+  --button-secondary-hover-border: 1px solid var(--color-gray-300);
+
+  --button-secondary-disabled-background: var(--color-gray-300);
+  --button-secondary-disabled-text: var(--color-gray-400);
+  --button-secondary-disabled-icon: var(--color-gray-400);
+  --button-secondary-disabled-border: none;
+
+  /* Buttons - Outline Variant */
+  --button-outline-default-background: var(--color-white);
+  --button-outline-default-text: var(--color-gray-900);
+  --button-outline-default-icon: var(--color-gray-900);
+  --button-outline-default-border: 1px solid var(--color-gray-300);
+
+  --button-outline-hover-background: var(--color-white);
+  --button-outline-hover-text: var(--color-gray-900);
+  --button-outline-hover-icon: var(--color-gray-900);
+  --button-outline-hover-border: 1px solid var(--color-gray-400);
+
+  --button-outline-disabled-background: var(--color-gray-300);
+  --button-outline-disabled-text: var(--color-gray-400);
+  --button-outline-disabled-icon: var(--color-gray-400);
+  --button-outline-disabled-border: none;
+
+  /* Buttons - Destructive Variant */
+  --button-destructive-default-background: var(--color-red-500);
+  --button-destructive-default-text: var(--color-white);
+  --button-destructive-default-icon: var(--color-white);
+  --button-destructive-default-border: none;
+
+  --button-destructive-hover-background: var(--color-red-600);
+  --button-destructive-hover-text: var(--color-white);
+  --button-destructive-hover-icon: var(--color-white);
+  --button-destructive-hover-border: none;
+
+  --button-destructive-disabled-background: var(--color-gray-300);
+  --button-destructive-disabled-text: var(--color-gray-400);
+  --button-destructive-disabled-icon: var(--color-gray-400);
+  --button-destructive-disabled-border: none;
+
+  /* Buttons - Warning Variant */
+  --button-warning-default-background: var(--color-yellow-400);
+  --button-warning-default-text: var(--color-white);
+  --button-warning-default-icon: var(--color-white);
+  --button-warning-default-border: none;
+
+  --button-warning-hover-background: var(--color-yellow-500);
+  --button-warning-hover-text: var(--color-white);
+  --button-warning-hover-icon: var(--color-white);
+  --button-warning-hover-border: none;
+
+  --button-warning-disabled-background: var(--color-gray-300);
+  --button-warning-disabled-text: var(--color-gray-400);
+  --button-warning-disabled-icon: var(--color-gray-400);
+  --button-warning-disabled-border: none;
+
+  /* Buttons - Link Variant */
+  --button-link-default-background: transparent;
+  --button-link-default-text: var(--color-purple-600);
+  --button-link-default-icon: var(--color-purple-600);
+  --button-link-default-border: none;
+  --button-link-default-text-decoration: underline;
+
+  --button-link-hover-background: transparent;
+  --button-link-hover-text: var(--color-purple-700);
+  --button-link-hover-icon: var(--color-purple-700);
+  --button-link-hover-border: none;
+  --button-link-hover-text-decoration: underline;
+
+  --button-link-disabled-background: transparent;
+  --button-link-disabled-text: var(--color-gray-400);
+  --button-link-disabled-icon: var(--color-gray-400);
+  --button-link-disabled-border: none;
+  --button-link-disabled-text-decoration: underline;
+
+  /* Buttons - Ghost Variant */
+  --button-ghost-default-background: transparent;
+  --button-ghost-default-text: var(--color-gray-900);
+  --button-ghost-default-icon: var(--color-gray-900);
+  --button-ghost-default-border: none;
+
+  --button-ghost-hover-background: transparent;
+  --button-ghost-hover-text: var(--color-gray-400);
+  --button-ghost-hover-icon: var(--color-gray-400);
+  --button-ghost-hover-border: none;
+
+  --button-ghost-disabled-background: transparent;
+  --button-ghost-disabled-text: var(--color-gray-400);
+  --button-ghost-disabled-icon: var(--color-gray-400);
+  --button-ghost-disabled-border: none;
+
+  /* Buttons - Multiaction Variant */
+  --button-multiaction-default-background: var(--color-purple-600);
+  --button-multiaction-default-text: var(--color-white);
+  --button-multiaction-default-icon: var(--color-white);
+  --button-multiaction-default-border: none;
+
+  --button-multiaction-hover-background: var(--color-purple-700);
+  --button-multiaction-hover-text: var(--color-white);
+  --button-multiaction-hover-icon: var(--color-white);
+  --button-multiaction-hover-border: none;
+
+  --button-multiaction-disabled-background: var(--color-gray-300);
+  --button-multiaction-disabled-text: var(--color-gray-400);
+  --button-multiaction-disabled-icon: var(--color-gray-400);
+  --button-multiaction-disabled-border: none;
+}
+
+