tokenizer-ui-kit 0.2.3 → 0.2.4

package/README.md

@@ -112,48 +112,219 @@ const selectedDate = ref(null);
 </template>
 ```
 
-## 🎨 Customizing Colors
+## 🎨 Customization
 
 The UI Kit uses CSS variables for easy customization. These variables are shared across all components (Input, DatePicker, etc.) and can be overridden in your project.
 
-### Available CSS Variables
+### CSS Variables
 
-All UI Kit components use a unified set of CSS variables:
+All UI Kit components use a unified set of CSS variables. You can override any variable to customize the appearance of components.
+
+#### Typography Variables
+
+```css
+:root {
+  /* Font Family */
+  --ui-kit-font-family: Manrope, sans-serif;
+
+  /* Font Sizes */
+  --ui-kit-font-size-xs: 12px;      /* Small labels, error messages */
+  --ui-kit-font-size-sm: 14px;      /* Body text, buttons, inputs */
+  --ui-kit-font-size-base: 16px;    /* Headings, large text */
+  --ui-kit-font-size-lg: 18px;      /* Large headings */
+  --ui-kit-font-size-xl: 20px;      /* Extra large headings */
+  --ui-kit-font-size-2xl: 24px;     /* XXL headings */
+
+  /* Font Weights */
+  --ui-kit-font-weight-regular: 400;   /* Regular text */
+  --ui-kit-font-weight-medium: 500;     /* Medium text, buttons */
+  --ui-kit-font-weight-semibold: 600;   /* Semibold headings */
+  --ui-kit-font-weight-bold: 700;        /* Bold headings */
+
+  /* Line Heights */
+  --ui-kit-line-height-tight: 1.2;      /* Tight line height for headings */
+  --ui-kit-line-height-normal: 1.5;     /* Normal line height */
+  --ui-kit-line-height-relaxed: 1.75;   /* Relaxed line height */
+
+  /* Typography Presets (for convenience) */
+  --ui-kit-typography-label: var(--ui-kit-font-size-xs) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
+  --ui-kit-typography-body: var(--ui-kit-font-size-sm) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
+  --ui-kit-typography-body-large: var(--ui-kit-font-size-base) / var(--ui-kit-line-height-normal) var(--ui-kit-font-family);
+  --ui-kit-typography-heading: var(--ui-kit-font-size-base) / var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
+  --ui-kit-typography-heading-large: var(--ui-kit-font-size-lg) / var(--ui-kit-line-height-tight) var(--ui-kit-font-family);
+}
+```
+
+#### Color Variables
 
 ```css
-/* In your project's CSS file (e.g., main.css or App.vue) */
 :root {
+  /* ============================================
+     Primary Colors
+     ============================================ */
+  --ui-kit-primary-primary: #292b32;
+  --ui-kit-primary-sidebar: #393d41;
+  --ui-kit-primary-bg-white: #ffffff;
+  --ui-kit-primary-secondary: #757987;
+  --ui-kit-primary-tertiary: #8c9aac;
+  --ui-kit-primary-do-green: #39aa5d;
+  --ui-kit-primary-bg-dark-green: #268644;
+  --ui-kit-primary-d-light-green: #56d67f;
+  --ui-kit-primary-overlay: #121212;
+
+  /* ============================================
+     Background Colors
+     ============================================ */
+  --ui-kit-background-light-0: #fbfbff;
+  --ui-kit-background-light-1: #f1f3f6;
+  --ui-kit-background-light-2: #e9ebee;
+  --ui-kit-background-light-3: #dfe3e7;
+  --ui-kit-background-light-4: #d2d8e0;
+  --ui-kit-background-light-5: #b4beca;
+  --ui-kit-background-dark-1: #36373f;
+  --ui-kit-background-dark-2: #282a2f;
+  --ui-kit-background-dark-3: #212328;
+  --ui-kit-background-dark-4: #1e1f24;
+  --ui-kit-background-dark-5: #15161b;
+  --ui-kit-background-dark-6: #0c0d10;
+  --ui-kit-background-menu: #484953;
+
+  /* ============================================
+     System Colors - Primary (Green Scale)
+     ============================================ */
+  --ui-kit-system-primary-900: #316848;
+  --ui-kit-system-primary-800: #3d7f59;
+  --ui-kit-system-primary-700: #4d906c;
+  --ui-kit-system-primary-600: #83b09a;
+  --ui-kit-system-primary-500: #b0d8c8;
+  --ui-kit-system-primary-400: #deeded;
+  --ui-kit-system-primary-300: #f1f6f0;
+
+  /* ============================================
+     System Colors - Error (Red Scale)
+     ============================================ */
+  --ui-kit-system-error-900: #962f31;
+  --ui-kit-system-error-800: #c63c28;
+  --ui-kit-system-error-700: #f34831;
+  --ui-kit-system-error-600: #f78272;
+  --ui-kit-system-error-500: #e5c3bd;
+  --ui-kit-system-error-400: #f0f4f3;
+
+  /* ============================================
+     System Colors - Success (Green Scale)
+     ============================================ */
+  --ui-kit-system-success-900: #377160;
+  --ui-kit-system-success-800: #3d8e5b;
+  --ui-kit-system-success-700: #3EB850;
+  --ui-kit-system-success-600: #8bd497;
+  --ui-kit-system-success-500: #deede4;
+  --ui-kit-system-success-400: #e1f8e0;
+
+  /* ============================================
+     System Colors - Attention (Orange/Yellow Scale)
+     ============================================ */
+  --ui-kit-system-attention-900: #b07925;
+  --ui-kit-system-attention-800: #d19319;
+  --ui-kit-system-attention-700: #e8ac0c;
+  --ui-kit-system-attention-600: #eec758;
+  --ui-kit-system-attention-500: #f6e0e1;
+  --ui-kit-system-attention-400: #f7f7f1;
+
+  /* ============================================
+     System Colors - Info (Purple Scale)
+     ============================================ */
+  --ui-kit-system-info-900: #403294;
+  --ui-kit-system-info-800: #5243aa;
+  --ui-kit-system-info-700: #6554c0;
+  --ui-kit-system-info-600: #7f8fd1;
+  --ui-kit-system-info-500: #9d91da;
+  --ui-kit-system-info-400: #cbe7ff;
+
+  /* ============================================
+     Component Colors (Legacy - for backward compatibility)
+     ============================================ */
   /* Border Colors - Used by Input, DatePicker, and other form components */
-  --ui-kit-color-border-default: #B4BECA;
-  --ui-kit-color-border-hover: #268644;
-  --ui-kit-color-border-focus: #39AA5D;
-  --ui-kit-color-border-error: #F78272;
-  --ui-kit-color-border-disabled: #B4BECA;
+  --ui-kit-color-border-default: var(--ui-kit-background-light-5);
+  --ui-kit-color-border-hover: var(--ui-kit-primary-bg-dark-green);
+  --ui-kit-color-border-focus: var(--ui-kit-primary-do-green);
+  --ui-kit-color-border-error: var(--ui-kit-system-error-600);
+  --ui-kit-color-border-disabled: var(--ui-kit-background-light-5);
 
   /* Background Colors - Used by Input, DatePicker, and other form components */
   --ui-kit-color-bg-default: transparent;
-  --ui-kit-color-bg-disabled: #E9EBEE;
+  --ui-kit-color-bg-disabled: var(--ui-kit-background-light-2);
 
   /* Text Colors - Used by Input, DatePicker, and other form components */
-  --ui-kit-color-text-default: #292B32;
-  --ui-kit-color-text-disabled: #B4BECA;
-  --ui-kit-color-text-error: #F34831;
-  --ui-kit-color-text-placeholder: #B4BECA;
-  --ui-kit-color-text-label: #292B32;
+  --ui-kit-color-text-default: var(--ui-kit-primary-primary);
+  --ui-kit-color-text-disabled: var(--ui-kit-background-light-5);
+  --ui-kit-color-text-error: var(--ui-kit-system-error-700);
+  --ui-kit-color-text-placeholder: var(--ui-kit-background-light-5);
+  --ui-kit-color-text-label: var(--ui-kit-primary-primary);
 
   /* Icon Colors - Used by Input, DatePicker, and other form components */
-  --ui-kit-color-icon-default: #B4BECA;
-  --ui-kit-color-icon-hover: #268644;
-  --ui-kit-color-icon-error: #F34831;
+  --ui-kit-color-icon-default: var(--ui-kit-background-light-5);
+  --ui-kit-color-icon-hover: var(--ui-kit-primary-bg-dark-green);
+  --ui-kit-color-icon-error: var(--ui-kit-system-error-700);
 }
 ```
 
-### Example: Overriding Colors
+### Typography Classes
+
+The UI Kit provides a set of typography utility classes that can be used directly in your components. These classes follow the design system typography specifications.
+
+#### Available Typography Classes
+
+```css
+/* Lead Typography */
+.ui-kit-typo-lead-primary      /* 24px, weight 400, line-height 31.2px */
+.ui-kit-typo-lead-secondary    /* 20px, weight 400, line-height 26px */
+
+/* Headers */
+.ui-kit-typo-header-secondary   /* 20px, weight 600, line-height 26px */
+
+/* Subtitles */
+.ui-kit-typo-subtitle-primary    /* 16px, weight 500, line-height 20.8px */
+.ui-kit-typo-subtitle-secondary  /* 14px, weight 500, line-height 18.2px */
+.ui-kit-typo-subtitle-hint       /* 12px, weight 600, line-height 15.6px */
+
+/* Paragraphs */
+.ui-kit-typo-paragraph-primary    /* 14px, weight 400, line-height 18.2px */
+.ui-kit-typo-paragraph-secondary  /* 12px, weight 400, line-height 15.6px */
+
+/* Links */
+.ui-kit-typo-text-link  /* 14px, weight 700, line-height 18.2px */
+
+/* Table Variant */
+.ui-kit-typo-table  /* 14px, weight 500, line-height 130%, letter-spacing -1% */
+```
+
+#### Usage Example
+
+```vue
+<template>
+  <div>
+    <h1 class="ui-kit-typo-lead-primary">Main Heading</h1>
+    <h2 class="ui-kit-typo-header-secondary">Section Header</h2>
+    <p class="ui-kit-typo-paragraph-primary">Body text content</p>
+    <span class="ui-kit-typo-subtitle-secondary">Subtitle text</span>
+    <a href="#" class="ui-kit-typo-text-link">Link text</a>
+  </div>
+</template>
+```
+
+**Note:** Typography classes are applied first in the class list, followed by component classes. This allows you to easily override typography styles by adding your own classes without using `!important`.
+
+### Example: Overriding Variables
 
 ```vue
 <!-- App.vue or main.css -->
 <style>
 :root {
+  /* Override typography */
+  --ui-kit-font-family: 'Your Font', sans-serif;
+  --ui-kit-font-size-base: 18px;
+
+  /* Override colors */
   --ui-kit-color-border-default: #your-custom-color;
   --ui-kit-color-border-focus: #your-focus-color;
   --ui-kit-color-text-error: #your-error-color;