tokenizer-ui-kit 0.1.9 → 0.2.0

package/README.md

@@ -112,6 +112,62 @@ const selectedDate = ref(null);
 </template>
 ```
 
+## 🎨 Customizing Colors
+
+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
+
+All UI Kit components use a unified set of CSS variables:
+
+```css
+/* In your project's CSS file (e.g., main.css or App.vue) */
+:root {
+  /* 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;
+
+  /* Background Colors - Used by Input, DatePicker, and other form components */
+  --ui-kit-color-bg-default: transparent;
+  --ui-kit-color-bg-disabled: #E9EBEE;
+
+  /* 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;
+
+  /* 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;
+}
+```
+
+### Example: Overriding Colors
+
+```vue
+<!-- App.vue or main.css -->
+<style>
+:root {
+  --ui-kit-color-border-default: #your-custom-color;
+  --ui-kit-color-border-focus: #your-focus-color;
+  --ui-kit-color-text-error: #your-error-color;
+}
+</style>
+
+<template>
+  <CInput v-model="value" placeholder="Custom styled input" />
+  <DatePicker v-model="date" />
+</template>
+```
+
+**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.
+
 ## 📚 Documentation
 
 Each component comes with TypeScript support and comprehensive documentation.