tokenizer-ui-kit 0.2.16 → 0.2.18

package/README.md

@@ -160,28 +160,61 @@ All UI Kit components use a unified set of CSS variables. You can override any v
 ```css
 :root {
   /* ============================================
-     Primary Colors
+     Base Semantic Tokens (рекомендуется использовать)
      ============================================ */
-  --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;
-  --ui-kit-text-white: #ffffff;
+  /* Primary Colors */
+  --ui-kit-color-primary: #39aa5d;
+  --ui-kit-color-primary-hover: #268644;
+  --ui-kit-color-primary-light: #56d67f;
+
+  /* Text Colors */
+  --ui-kit-color-text-primary: #292b32;
+  --ui-kit-color-text-secondary: #757987;
+  --ui-kit-color-text-tertiary: #8c9aac;
+  --ui-kit-color-text-white: #ffffff;
+
+  /* Background Colors */
+  --ui-kit-color-bg-white: #ffffff;
+  --ui-kit-color-bg-light-1: #f1f3f6;
+  --ui-kit-color-bg-light-2: #e9ebee;
+  --ui-kit-color-bg-light-4: #d2d8e0;
+  --ui-kit-color-bg-light-5: #b4beca;
+
+  /* Border Colors */
+  --ui-kit-color-border: #b4beca;
+  --ui-kit-color-border-hover: #268644;
+  --ui-kit-color-border-focus: #39aa5d;
+
+  /* Error Colors */
+  --ui-kit-color-error: #f34831;
+  --ui-kit-color-error-light: #f78272;
+  --ui-kit-color-error-bg: #f0f4f3;
+
+  /* Disabled Colors */
+  --ui-kit-color-disabled-bg: #e9ebee;
+  --ui-kit-color-disabled-text: #b4beca;
+  --ui-kit-color-disabled-border: #b4beca;
 
   /* ============================================
-     Background Colors
+     Legacy Variables (для обратной совместимости)
      ============================================ */
+  --ui-kit-primary-primary: var(--ui-kit-color-text-primary);
+  --ui-kit-primary-sidebar: #393d41;
+  --ui-kit-primary-bg-white: var(--ui-kit-color-bg-white);
+  --ui-kit-primary-secondary: var(--ui-kit-color-text-secondary);
+  --ui-kit-primary-tertiary: var(--ui-kit-color-text-tertiary);
+  --ui-kit-primary-do-green: var(--ui-kit-color-primary);
+  --ui-kit-primary-bg-dark-green: var(--ui-kit-color-primary-hover);
+  --ui-kit-primary-d-light-green: var(--ui-kit-color-primary-light);
+  --ui-kit-primary-overlay: #121212;
+  --ui-kit-text-white: var(--ui-kit-color-text-white);
+
   --ui-kit-background-light-0: #fbfbff;
-  --ui-kit-background-light-1: #f1f3f6;
-  --ui-kit-background-light-2: #e9ebee;
+  --ui-kit-background-light-1: var(--ui-kit-color-bg-light-1);
+  --ui-kit-background-light-2: var(--ui-kit-color-bg-light-2);
   --ui-kit-background-light-3: #dfe3e7;
-  --ui-kit-background-light-4: #d2d8e0;
-  --ui-kit-background-light-5: #b4beca;
+  --ui-kit-background-light-4: var(--ui-kit-color-bg-light-4);
+  --ui-kit-background-light-5: var(--ui-kit-color-border);
   --ui-kit-background-dark-1: #36373f;
   --ui-kit-background-dark-2: #282a2f;
   --ui-kit-background-dark-3: #212328;
@@ -299,10 +332,10 @@ The UI Kit provides a set of typography utility classes that can be used directl
   --ui-kit-font-family: 'Your Font', sans-serif;
   --ui-kit-font-size-base: 18px;
 
-  /* Override colors */
-  --ui-kit-background-light-5: #your-custom-color;
-  --ui-kit-primary-do-green: #your-focus-color;
-  --ui-kit-system-error-700: #your-error-color;
+  /* Override colors (используйте новые семантические токены) */
+  --ui-kit-color-primary: #your-primary-color;
+  --ui-kit-color-border-focus: #your-focus-color;
+  --ui-kit-color-error: #your-error-color;
 }
 </style>
 
@@ -314,6 +347,19 @@ The UI Kit provides a set of typography utility classes that can be used directl
 
 **Important:** Make sure to define your custom variables **before** importing the UI Kit styles, or define them in a separate CSS file that is imported first.
 
+📖 **Подробная документация по CSS переменным:** см. [VARIABLES.md](./VARIABLES.md)
+
 ## 📚 Documentation
 
 Each component comes with TypeScript support and comprehensive documentation.
+
+- [CSS Variables Documentation](./VARIABLES.md) - Полная документация по кастомизации компонентов через CSS переменные
+  - [Button Variables](./VARIABLES-BUTTON.md) - Переменные для компонента CButton
+  - [Input Variables](./VARIABLES-INPUT.md) - Переменные для компонентов CInput и CSearchInput
+  - [Select Variables](./VARIABLES-SELECT.md) - Переменные для компонента Select
+  - [DatePicker Variables](./VARIABLES-DATEPICKER.md) - Переменные для компонента DatePicker
+  - [Checkbox Variables](./VARIABLES-CHECKBOX.md) - Переменные для компонента CCheckbox
+  - [IconButton Variables](./VARIABLES-ICONBUTTON.md) - Переменные для компонента CIconButton
+  - [Label Variables](./VARIABLES-LABEL.md) - Переменные для компонента CLabel
+  - [Toast Variables](./VARIABLES-TOAST.md) - Переменные для компонента Toast
+  - [AdaptiveTabs Variables](./VARIABLES-ADAPTIVETABS.md) - Переменные для компонента AdaptiveTabs