@mdigital_ui/ui 0.2.1 → 0.2.2

package/README.md

@@ -100,24 +100,225 @@ Both import styles work identically. Use whichever you prefer.
 import type { ButtonProps, InputProps } from '@mdigital_ui/ui'
 ```
 
-## Theming
+## Theming & Customization
 
-### CSS Variable Overrides
+The UI Kit uses **CSS custom properties (variables)** for all design tokens, making it easy to customize without touching Tailwind's configuration.
 
-Customize the design system by overriding CSS variables:
+### Quick Customization
+
+Create a CSS file to override any design tokens:
 
 ```css
+/* app/theme.css or src/theme.css */
 :root {
-  /* Brand colors */
-  --color-primary: oklch(0.55 0.22 270);
-  --color-accent: oklch(0.75 0.18 45);
+  /* Brand Colors */
+  --color-primary: oklch(0.55 0.22 270);        /* Purple primary */
+  --color-primary-hover: oklch(0.50 0.24 270);
+  --color-accent: oklch(0.75 0.18 45);          /* Orange accent */
+
+  /* Semantic Colors */
+  --color-success: oklch(0.65 0.20 140);
+  --color-error: oklch(0.60 0.25 20);
 
-  /* Component sizes */
+  /* Component Sizing */
   --button-height-md: 2.5rem;
   --input-height-md: 2.5rem;
-
-  /* Border radius */
   --radius-md: 0.5rem;
+
+  /* Typography */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --text-base: 1rem;
+}
+```
+
+Then import it **after** the UI Kit styles:
+
+```tsx
+import '@mdigital_ui/ui/styles/base.css'
+import '@mdigital_ui/ui/styles/themes/light.css'
+import './theme.css'  // Your customizations
+```
+
+### Available Variables
+
+<details>
+<summary><strong>🎨 Colors (Click to expand)</strong></summary>
+
+```css
+/* Brand Colors */
+--color-primary
+--color-primary-hover
+--color-primary-active
+--color-primary-foreground
+--color-secondary
+--color-secondary-hover
+--color-secondary-active
+--color-secondary-foreground
+--color-accent
+--color-accent-hover
+--color-accent-active
+--color-accent-foreground
+
+/* Semantic Colors */
+--color-success
+--color-success-hover
+--color-success-active
+--color-error
+--color-error-hover
+--color-error-active
+--color-warning
+--color-warning-hover
+--color-warning-active
+--color-info
+--color-info-hover
+--color-info-active
+
+/* Backgrounds & Surfaces */
+--color-background
+--color-background-secondary
+--color-surface
+--color-border
+--color-border-primary
+
+/* Text Colors */
+--color-text-primary
+--color-text-secondary
+--color-text-muted
+
+/* Grayscale */
+--color-gray-50 through --color-gray-950
+--color-white
+--color-black
+```
+</details>
+
+<details>
+<summary><strong>📐 Sizing & Spacing (Click to expand)</strong></summary>
+
+```css
+/* Button Sizes */
+--button-height-xs: 1.75rem
+--button-height-sm: 2rem
+--button-height-md: 2.25rem
+--button-height-lg: 2.75rem
+--button-padding-x-xs: 0.5rem
+--button-padding-x-sm: 0.75rem
+--button-padding-x-md: 0.875rem
+--button-padding-x-lg: 1.25rem
+
+/* Input Sizes */
+--input-height-xs: 1.75rem
+--input-height-sm: 2rem
+--input-height-md: 2.25rem
+--input-height-lg: 2.75rem
+--input-padding-x-xs through --input-padding-x-lg
+
+/* Select Sizes */
+--select-height-xs through --select-height-lg
+--select-padding-x-xs through --select-padding-x-lg
+
+/* Checkbox/Radio Sizes */
+--checkbox-size-xs: 0.875rem
+--checkbox-size-sm: 1rem
+--checkbox-size-md: 1.125rem
+--checkbox-size-lg: 1.375rem
+
+/* Switch Sizes */
+--switch-width-xs through --switch-width-lg
+--switch-height-xs through --switch-height-lg
+
+/* Spacing Scale */
+--spacing-0 through --spacing-12
+```
+</details>
+
+<details>
+<summary><strong>✏️ Typography (Click to expand)</strong></summary>
+
+```css
+/* Font Families */
+--font-sans: ui-sans-serif, system-ui, sans-serif
+--font-mono: ui-monospace, 'SF Mono', monospace
+
+/* Font Sizes */
+--text-xs: 0.75rem
+--text-sm: 0.875rem
+--text-base: 0.9rem
+--text-lg: 1.125rem
+
+/* Font Weights */
+--font-weight-normal: 400
+--font-weight-medium: 500
+--font-weight-semibold: 600
+--font-weight-bold: 700
+
+/* Label Sizes */
+--label-font-size-xs through --label-font-size-lg
+```
+</details>
+
+<details>
+<summary><strong>🎭 Effects & Decoration (Click to expand)</strong></summary>
+
+```css
+/* Border Radius */
+--radius-none: 0px
+--radius-sm: 0.25rem
+--radius-md: 0.375rem
+--radius-lg: 0.5rem
+--radius-xl: 0.625rem
+--radius-2xl: 0.75rem
+--radius-3xl: 1rem
+--radius-full: 9999px
+
+/* Shadows */
+--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05)
+--shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1)
+--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1)
+--shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1)
+--shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25)
+
+/* Transitions */
+--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1)
+--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1)
+--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1)
+
+/* Z-Index Layers */
+--z-dropdown: 1000
+--z-sticky: 1020
+--z-modal: 1040
+--z-popover: 1050
+--z-tooltip: 1060
+```
+</details>
+
+### Example: Custom Brand Theme
+
+See [`examples/custom-theme.css`](./examples/custom-theme.css) for a complete template with all available variables and comments.
+
+Quick example:
+
+```css
+/* brand-theme.css */
+:root {
+  /* Acme Corp Brand Colors */
+  --color-primary: oklch(0.60 0.20 200);        /* Acme Blue */
+  --color-primary-hover: oklch(0.55 0.22 200);
+  --color-secondary: oklch(0.55 0.15 320);      /* Acme Purple */
+  --color-accent: oklch(0.75 0.18 160);         /* Acme Green */
+
+  /* Rounded Everything */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+
+  /* Larger Buttons */
+  --button-height-sm: 2.25rem;
+  --button-height-md: 2.75rem;
+  --button-height-lg: 3.25rem;
+
+  /* Custom Font */
+  --font-sans: 'Poppins', ui-sans-serif, system-ui, sans-serif;
 }
 ```
 

package/dist/index.js

@@ -1,26 +1,26 @@
-export { Transfer } from './chunk-EYTOKUBM.js';
 export { tooltip_default as Tooltip } from './chunk-D3JWPGCA.js';
+export { Transfer } from './chunk-EYTOKUBM.js';
 export { tree_select_default as TreeSelect } from './chunk-JZCHZ4B3.js';
 export { tree_default as Tree } from './chunk-SAVE5ACL.js';
 export { upload_default as Upload } from './chunk-I5ANSIDK.js';
-export { slider_default as Slider } from './chunk-NNSS366W.js';
+export { select_default as Select } from './chunk-CLLQDCDR.js';
 export { stepper_default as Stepper } from './chunk-MLDX3Z67.js';
 export { switch_default as Switch } from './chunk-AOITJRSV.js';
-export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
 export { tabs_default as Tabs } from './chunk-OW5A5IIF.js';
-export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
 export { table_default as Table } from './chunk-L3SP7GHC.js';
 export { toggle_group_default as ToggleGroup } from './chunk-SK5ECBBK.js';
-export { progress_default as Progress } from './chunk-RQBXZKTH.js';
+export { textarea_default as Textarea } from './chunk-FPOXTCYV.js';
+export { toggle_default as Toggle } from './chunk-DPOSWW22.js';
 export { radio_default as Radio } from './chunk-KTBPIEP2.js';
+export { progress_default as Progress } from './chunk-RQBXZKTH.js';
 export { radio_group_default as RadioGroup } from './chunk-DOKTHDG3.js';
 export { rating_default as Rating } from './chunk-FYHQDFKE.js';
 export { ribbon_default as Ribbon } from './chunk-C7SXY3ZV.js';
-export { select_default as Select } from './chunk-CLLQDCDR.js';
 export { skeleton_default as Skeleton } from './chunk-75XESYGN.js';
+export { slider_default as Slider } from './chunk-NNSS366W.js';
 export { input_group_default as InputGroup } from './chunk-KBCBVH7B.js';
-export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
 export { input_password_default as InputPassword } from './chunk-E2CYDDYC.js';
+export { input_otp_default as InputOTP } from './chunk-R225A5II.js';
 export { kbd_default as Kbd } from './chunk-OQANRZPV.js';
 export { multi_select_default as MultiSelect } from './chunk-W7BQYIXF.js';
 export { notification_default as Notification } from './chunk-YZVSDRJD.js';
@@ -29,9 +29,9 @@ export { descriptions_default as Descriptions } from './chunk-S5XJXU52.js';
 export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger } from './chunk-AWPKZYHT.js';
 export { empty_default as Empty } from './chunk-ROR4E6IE.js';
 export { fetching_overlay_default as FetchingOverlay } from './chunk-BNILRB4T.js';
-export { image_default as Image } from './chunk-XMAH5PDW.js';
 export { grid_default as Grid } from './chunk-7PKVBUGL.js';
 export { input_default as Input } from './chunk-2JGAYDZR.js';
+export { image_default as Image } from './chunk-XMAH5PDW.js';
 export { cascader_default as Cascader } from './chunk-SERJ3TZE.js';
 export { AreaChart, BarChart, ComposedChart, LineChart, PieChart } from './chunk-BP434VYV.js';
 export { checkbox_default as Checkbox } from './chunk-H2HIBD5Y.js';
@@ -41,16 +41,16 @@ export { collapse_default as Collapse } from './chunk-SOV4PE3P.js';
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut } from './chunk-4P5EMRFI.js';
 export { modal_default as Modal } from './chunk-5VCGW53O.js';
 export { DatePicker, RangePickerComponent as RangePicker, TimePickerComponent as TimePicker } from './chunk-52M2PO3O.js';
-export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
 export { badge_default as Badge } from './chunk-FTJOSVTY.js';
+export { accordion_default as Accordion } from './chunk-CWHFK7ZC.js';
 export { breadcrumbs_default as Breadcrumbs } from './chunk-HUVXKOJC.js';
 export { dropdown_default as Dropdown } from './chunk-KNQ7UQ2W.js';
 export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './chunk-3PFA3YG6.js';
+export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
+export { card_default as Card } from './chunk-XOBGEMQY.js';
 export { button_default as Button } from './chunk-LBJG2UWT.js';
 export { spinner_default as Spinner } from './chunk-J3G5WWGR.js';
 export { buttonColors, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, iconColorClasses, textColorVariants } from './chunk-5UEWVFF6.js';
-export { button_group_default as ButtonGroup } from './chunk-56IXGP5C.js';
-export { card_default as Card } from './chunk-XOBGEMQY.js';
 export { cn, getValidationStatus, iconSizes } from './chunk-YNNAOXU5.js';
 export { carousel_default as Carousel } from './chunk-C3MX5EXL.js';
 //# sourceMappingURL=index.js.map

package/dist/styles/base.css

@@ -4,6 +4,7 @@
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif;
+    --font-mono: ui-monospace, 'SF Mono', monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-orange-500: oklch(70.5% 0.213 47.604);
@@ -26,6 +27,7 @@
     --color-gray-700: oklch(37.3% 0.034 259.733);
     --color-gray-800: oklch(27.8% 0.033 256.848);
     --color-gray-900: oklch(21% 0.034 264.665);
+    --color-gray-950: oklch(13% 0.028 261.692);
     --color-black: #000;
     --color-white: #fff;
     --spacing: 0.25rem;
@@ -39,9 +41,13 @@
     --container-4xl: 56rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
+    --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 0.9rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
@@ -51,7 +57,10 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
@@ -60,8 +69,13 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.625rem;
+    --radius-2xl: 0.75rem;
+    --radius-3xl: 1rem;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -81,30 +95,52 @@
     --button-padding-x-sm: 0.75rem;
     --button-padding-x-md: 0.875rem;
     --button-padding-x-lg: 1.25rem;
+    --input-height-xs: 1.75rem;
     --input-height-sm: 2rem;
     --input-height-md: 2.25rem;
     --input-height-lg: 2.75rem;
+    --input-padding-x-xs: 0.5rem;
+    --input-padding-x-lg: 1.125rem;
     --textarea-min-height: 5rem;
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
+    --select-height-xs: 1.75rem;
+    --select-height-lg: 2.75rem;
+    --select-padding-x-xs: 0.5rem;
+    --select-padding-x-lg: 1.125rem;
+    --checkbox-size-xs: 0.875rem;
     --checkbox-size-sm: 1rem;
     --checkbox-size-md: 1.125rem;
     --checkbox-size-lg: 1.375rem;
+    --switch-width-xs: 1.75rem;
     --switch-width-sm: 2rem;
     --switch-width-md: 2.5rem;
     --switch-width-lg: 3rem;
+    --switch-height-xs: 0.875rem;
     --switch-height-sm: 1rem;
     --switch-height-md: 1.25rem;
     --switch-height-lg: 1.5rem;
+    --label-font-size-xs: 0.75rem;
+    --label-font-size-lg: 1.125rem;
+    --spacing-0: 0px;
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
     --spacing-3: 0.75rem;
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-12: 3rem;
+    --radius-none: 0px;
     --radius-full: 9999px;
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    --z-dropdown: 1000;
+    --z-sticky: 1020;
+    --z-modal: 1040;
     --z-popover: 1050;
+    --z-tooltip: 1060;
   }
 }
 @layer base {
@@ -1342,6 +1378,9 @@
   .rounded-3xl {
     border-radius: 1rem;
   }
+  .rounded-\[var\(--radius-lg\)\] {
+    border-radius: var(--radius-lg);
+  }
   .rounded-full {
     border-radius: 9999px;
   }
@@ -1456,6 +1495,12 @@
   .border-t-transparent {
     border-top-color: transparent;
   }
+  .bg-\[var\(--color-accent\)\] {
+    background-color: var(--color-accent);
+  }
+  .bg-\[var\(--color-primary\)\] {
+    background-color: var(--color-primary);
+  }
   .bg-black\/20 {
     background-color: color-mix(in srgb, #000 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1840,6 +1885,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-\[var\(--font-weight-semibold\)\] {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
@@ -1870,6 +1919,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--text-lg\)\] {
+    color: var(--text-lg);
+  }
   .text-blue-500 {
     color: var(--color-blue-500);
   }
@@ -1967,6 +2019,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-md\)\] {
+    --tw-shadow: var(--shadow-md);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2205,6 +2261,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-accent-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent-hover);
+      }
+    }
+  }
   .hover\:bg-gray-50 {
     &:hover {
       @media (hover: hover) {

package/dist/styles/global.css

@@ -4,6 +4,7 @@
 @layer theme {
   :root, :host {
     --font-sans: ui-sans-serif, system-ui, sans-serif;
+    --font-mono: ui-monospace, 'SF Mono', monospace;
     --color-red-500: oklch(63.7% 0.237 25.331);
     --color-red-600: oklch(57.7% 0.245 27.325);
     --color-orange-500: oklch(70.5% 0.213 47.604);
@@ -23,6 +24,7 @@
     --color-gray-600: oklch(45% 0 0);
     --color-gray-700: oklch(35% 0 0);
     --color-gray-900: oklch(15% 0 0);
+    --color-gray-950: oklch(10% 0 0);
     --color-black: oklch(0% 0 0);
     --color-white: oklch(100% 0 0);
     --spacing: 0.25rem;
@@ -36,9 +38,13 @@
     --container-4xl: 56rem;
     --container-6xl: 72rem;
     --container-7xl: 80rem;
+    --text-xs: 0.75rem;
     --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
     --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 0.9rem;
     --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
     --text-lg--line-height: calc(1.75 / 1.125);
     --text-xl: 1.25rem;
     --text-xl--line-height: calc(1.75 / 1.25);
@@ -48,7 +54,10 @@
     --text-3xl--line-height: calc(2.25 / 1.875);
     --text-4xl: 2.25rem;
     --text-4xl--line-height: calc(2.5 / 2.25);
+    --font-weight-normal: 400;
+    --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-tight: -0.025em;
     --tracking-wider: 0.05em;
     --tracking-widest: 0.1em;
@@ -57,8 +66,13 @@
     --radius-md: 0.375rem;
     --radius-lg: 0.5rem;
     --radius-xl: 0.625rem;
+    --radius-2xl: 0.75rem;
+    --radius-3xl: 1rem;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
     --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
     --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
     --ease-out: cubic-bezier(0, 0, 0.2, 1);
     --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
     --animate-spin: spin 1s linear infinite;
@@ -72,17 +86,33 @@
     --default-mono-font-family: ui-monospace, 'SF Mono', monospace;
     --color-primary: oklch(0.6029 0.15 239.2065);
     --color-primary-hover: oklch(0.5029 0.2 239.2065);
+    --color-primary-active: oklch(0.4529 0.2 239.2065);
     --color-primary-foreground: oklch(100% 0 0);
     --color-secondary: oklch(50% 0.05 240);
+    --color-secondary-hover: oklch(45% 0.06 240);
+    --color-secondary-active: oklch(40% 0.07 240);
+    --color-secondary-foreground: oklch(100% 0 0);
     --color-accent: oklch(0.8 0.1737 67);
+    --color-accent-hover: oklch(0.75 0.237 67);
+    --color-accent-active: oklch(0.7 0.1937 67);
+    --color-accent-foreground: oklch(15% 0 0);
     --color-success: oklch(0.7 0.2 145);
+    --color-success-hover: oklch(0.65 0.22 145);
+    --color-success-active: oklch(0.5 0.24 145);
     --color-error: oklch(65% 0.2 25);
+    --color-error-hover: oklch(75% 0.2 25);
+    --color-error-active: oklch(80% 0.2 25);
     --color-warning: oklch(75% 0.15 85);
+    --color-warning-hover: oklch(70% 0.17 85);
+    --color-warning-active: oklch(65% 0.19 85);
     --color-info: oklch(60% 0.19 255);
+    --color-info-hover: oklch(55% 0.21 255);
+    --color-info-active: oklch(50% 0.23 255);
     --color-background: oklch(100% 0 0);
     --color-background-secondary: oklch(98% 0 0);
     --color-surface: oklch(96% 0 0);
     --color-border: oklch(93% 0 0);
+    --color-border-primary: oklch(85% 0 0);
     --color-text-primary: oklch(15% 0 0);
     --color-text-secondary: oklch(45% 0 0);
     --color-text-muted: oklch(60% 0 0);
@@ -94,30 +124,52 @@
     --button-padding-x-sm: 0.75rem;
     --button-padding-x-md: 0.875rem;
     --button-padding-x-lg: 1.25rem;
+    --input-height-xs: 1.75rem;
     --input-height-sm: 2rem;
     --input-height-md: 2.25rem;
     --input-height-lg: 2.75rem;
+    --input-padding-x-xs: 0.5rem;
+    --input-padding-x-lg: 1.125rem;
     --textarea-min-height: 5rem;
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
+    --select-height-xs: 1.75rem;
+    --select-height-lg: 2.75rem;
+    --select-padding-x-xs: 0.5rem;
+    --select-padding-x-lg: 1.125rem;
+    --checkbox-size-xs: 0.875rem;
     --checkbox-size-sm: 1rem;
     --checkbox-size-md: 1.125rem;
     --checkbox-size-lg: 1.375rem;
+    --switch-width-xs: 1.75rem;
     --switch-width-sm: 2rem;
     --switch-width-md: 2.5rem;
     --switch-width-lg: 3rem;
+    --switch-height-xs: 0.875rem;
     --switch-height-sm: 1rem;
     --switch-height-md: 1.25rem;
     --switch-height-lg: 1.5rem;
+    --label-font-size-xs: 0.75rem;
+    --label-font-size-lg: 1.125rem;
+    --spacing-0: 0px;
     --spacing-1: 0.25rem;
     --spacing-2: 0.5rem;
     --spacing-3: 0.75rem;
     --spacing-4: 1rem;
     --spacing-5: 1.25rem;
     --spacing-6: 1.5rem;
+    --spacing-12: 3rem;
+    --radius-none: 0px;
     --radius-full: 9999px;
+    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    --z-dropdown: 1000;
+    --z-sticky: 1020;
+    --z-modal: 1040;
     --z-popover: 1050;
+    --z-tooltip: 1060;
   }
 }
 @layer base {
@@ -1360,6 +1412,9 @@
   .rounded-3xl {
     border-radius: 1rem;
   }
+  .rounded-\[var\(--radius-lg\)\] {
+    border-radius: var(--radius-lg);
+  }
   .rounded-full {
     border-radius: 9999px;
   }
@@ -1630,6 +1685,12 @@
   .border-l-warning {
     border-left-color: oklch(75% 0.15 85);
   }
+  .bg-\[var\(--color-accent\)\] {
+    background-color: var(--color-accent);
+  }
+  .bg-\[var\(--color-primary\)\] {
+    background-color: var(--color-primary);
+  }
   .bg-accent {
     background-color: oklch(0.8 0.1737 67);
   }
@@ -2300,6 +2361,10 @@
     --tw-leading: 1;
     line-height: 1;
   }
+  .font-\[var\(--font-weight-semibold\)\] {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
@@ -2330,6 +2395,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .text-\[var\(--text-lg\)\] {
+    color: var(--text-lg);
+  }
   .text-accent {
     color: oklch(0.8 0.1737 67);
   }
@@ -2499,6 +2567,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-\[var\(--shadow-md\)\] {
+    --tw-shadow: var(--shadow-md);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2887,6 +2959,13 @@
       }
     }
   }
+  .hover\:bg-\[var\(--color-accent-hover\)\] {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-accent-hover);
+      }
+    }
+  }
   .hover\:bg-accent\/5 {
     &:hover {
       @media (hover: hover) {

package/examples/README.md

@@ -0,0 +1,166 @@
+# Theming Examples
+
+## Quick Start
+
+1. Copy `custom-theme.css` to your project
+2. Customize the CSS variables
+3. Import it **after** the UI Kit styles:
+
+```tsx
+// app/layout.tsx or src/main.tsx
+import '@mdigital_ui/ui/styles/base.css'
+import '@mdigital_ui/ui/styles/themes/light.css'
+import './custom-theme.css'  // Your customizations
+```
+
+## Using Variables with Tailwind Utilities
+
+While the UI components use these variables automatically, you can also use them in your own custom components with Tailwind:
+
+```tsx
+// Using CSS variables with arbitrary values
+<div className="bg-[var(--color-primary)]">
+  Primary background
+</div>
+
+<button className="bg-[var(--color-accent)] hover:bg-[var(--color-accent-hover)]">
+  Custom Button
+</button>
+
+// Using design tokens
+<div className="rounded-[var(--radius-lg)] shadow-[var(--shadow-md)]">
+  Custom Card
+</div>
+
+// Typography
+<p className="text-[var(--text-lg)] font-[var(--font-weight-semibold)]">
+  Custom Text
+</p>
+```
+
+## Common Customization Patterns
+
+### 1. Brand Colors
+
+```css
+:root {
+  --color-primary: oklch(0.60 0.20 260);
+  --color-primary-hover: oklch(0.55 0.22 260);
+  --color-primary-active: oklch(0.50 0.24 260);
+}
+```
+
+### 2. Component Sizing
+
+Make all components larger:
+
+```css
+:root {
+  /* Buttons */
+  --button-height-sm: 2.25rem;
+  --button-height-md: 2.75rem;
+  --button-height-lg: 3.25rem;
+
+  /* Inputs */
+  --input-height-sm: 2.25rem;
+  --input-height-md: 2.75rem;
+  --input-height-lg: 3.25rem;
+}
+```
+
+### 3. Border Radius
+
+Make everything more rounded:
+
+```css
+:root {
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+}
+```
+
+### 4. Custom Font
+
+```css
+:root {
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Don't forget to load the font:
+
+```tsx
+// In your app
+import { Inter } from 'next/font/google'
+
+const inter = Inter({ subsets: ['latin'] })
+
+export default function RootApp({ children }) {
+  return (
+    <html className={inter.className}>
+      <body>{children}</body>
+    </html>
+  )
+}
+```
+
+### 5. Dark Mode Colors
+
+Customize dark mode appearance:
+
+```css
+.dark {
+  --color-primary: oklch(0.70 0.25 260);
+  --color-background: oklch(12% 0 0);
+  --color-surface: oklch(18% 0 0);
+  --color-border: oklch(25% 0 0);
+}
+```
+
+## OKLCH Color Format
+
+The UI Kit uses the OKLCH color format for better color perception and consistency. Here's a quick guide:
+
+```
+oklch(L C H)
+      │ │ │
+      │ │ └─ Hue (0-360)
+      │ └─── Chroma (0-0.4)
+      └───── Lightness (0-1 or 0-100%)
+```
+
+**Common Hues:**
+- Red: 25-40
+- Orange: 50-70
+- Yellow: 85-100
+- Green: 140-160
+- Blue: 230-260
+- Purple: 290-310
+- Pink: 340-360
+
+**Tips:**
+- Keep Chroma between 0.15-0.25 for most UI colors
+- Lower Lightness for darker colors (0.3-0.5)
+- Higher Lightness for lighter colors (0.6-0.8)
+
+**Example Palette:**
+
+```css
+/* Primary Blue */
+--color-primary: oklch(0.60 0.20 260);        /* Medium blue */
+--color-primary-hover: oklch(0.55 0.22 260);  /* Darker blue */
+
+/* Success Green */
+--color-success: oklch(0.65 0.20 145);
+
+/* Error Red */
+--color-error: oklch(0.60 0.25 25);
+```
+
+## Need Help?
+
+- [OKLCH Color Picker](https://oklch.com/)
+- [Tailwind CSS v4 Docs](https://tailwindcss.com/)
+- [Complete Variable Reference](../README.md#theming--customization)

package/examples/custom-theme.css

@@ -0,0 +1,189 @@
+/**
+ * Example Custom Theme
+ *
+ * Copy this file to your project and customize the variables below.
+ * Import it AFTER the UI Kit styles:
+ *
+ * import '@mdigital_ui/ui/styles/base.css'
+ * import '@mdigital_ui/ui/styles/themes/light.css'
+ * import './custom-theme.css'  // Your customizations
+ */
+
+:root {
+  /* ============================================
+     BRAND COLORS
+     ============================================ */
+
+  /* Primary Color - Used for main actions, links, focus states */
+  --color-primary: oklch(0.60 0.20 260);        /* Blue */
+  --color-primary-hover: oklch(0.55 0.22 260);
+  --color-primary-active: oklch(0.50 0.24 260);
+  --color-primary-foreground: oklch(100% 0 0);  /* White text on primary */
+
+  /* Secondary Color - Used for secondary actions */
+  --color-secondary: oklch(0.50 0.10 280);
+  --color-secondary-hover: oklch(0.45 0.12 280);
+  --color-secondary-active: oklch(0.40 0.14 280);
+  --color-secondary-foreground: oklch(100% 0 0);
+
+  /* Accent Color - Used for highlights and special elements */
+  --color-accent: oklch(0.75 0.18 160);         /* Green */
+  --color-accent-hover: oklch(0.70 0.20 160);
+  --color-accent-active: oklch(0.65 0.22 160);
+  --color-accent-foreground: oklch(15% 0 0);
+
+
+  /* ============================================
+     SEMANTIC COLORS
+     ============================================ */
+
+  /* Success - Positive actions, confirmations */
+  --color-success: oklch(0.65 0.20 145);
+  --color-success-hover: oklch(0.60 0.22 145);
+  --color-success-foreground: oklch(100% 0 0);
+
+  /* Error - Destructive actions, errors */
+  --color-error: oklch(0.60 0.25 25);
+  --color-error-hover: oklch(0.65 0.25 25);
+  --color-error-foreground: oklch(100% 0 0);
+
+  /* Warning - Caution, important notices */
+  --color-warning: oklch(0.75 0.15 85);
+  --color-warning-hover: oklch(0.70 0.17 85);
+  --color-warning-foreground: oklch(15% 0 0);
+
+  /* Info - Informational messages */
+  --color-info: oklch(0.60 0.19 255);
+  --color-info-hover: oklch(0.55 0.21 255);
+  --color-info-foreground: oklch(100% 0 0);
+
+
+  /* ============================================
+     BACKGROUNDS & SURFACES
+     ============================================ */
+
+  --color-background: oklch(100% 0 0);           /* Main background */
+  --color-background-secondary: oklch(98% 0 0);  /* Secondary background */
+  --color-surface: oklch(96% 0 0);               /* Card backgrounds */
+  --color-border: oklch(93% 0 0);                /* Border color */
+  --color-border-primary: oklch(85% 0 0);        /* Darker borders */
+
+
+  /* ============================================
+     TEXT COLORS
+     ============================================ */
+
+  --color-text-primary: oklch(15% 0 0);    /* Main text */
+  --color-text-secondary: oklch(45% 0 0);  /* Secondary text */
+  --color-text-muted: oklch(60% 0 0);      /* Muted/placeholder text */
+
+
+  /* ============================================
+     COMPONENT SIZING
+     ============================================ */
+
+  /* Buttons */
+  --button-height-xs: 1.75rem;      /* 28px */
+  --button-height-sm: 2rem;         /* 32px */
+  --button-height-md: 2.25rem;      /* 36px */
+  --button-height-lg: 2.75rem;      /* 44px */
+
+  --button-padding-x-xs: 0.5rem;
+  --button-padding-x-sm: 0.75rem;
+  --button-padding-x-md: 0.875rem;
+  --button-padding-x-lg: 1.25rem;
+
+  /* Inputs */
+  --input-height-xs: 1.75rem;
+  --input-height-sm: 2rem;
+  --input-height-md: 2.25rem;
+  --input-height-lg: 2.75rem;
+
+
+  /* ============================================
+     TYPOGRAPHY
+     ============================================ */
+
+  /* Font Families - Use web-safe fallbacks */
+  --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif;
+  --font-mono: ui-monospace, 'SF Mono', monospace;
+
+  /* Font Sizes */
+  --text-xs: 0.75rem;    /* 12px */
+  --text-sm: 0.875rem;   /* 14px */
+  --text-base: 0.9rem;   /* 14.4px */
+  --text-lg: 1.125rem;   /* 18px */
+
+  /* Font Weights */
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+
+  /* ============================================
+     BORDER RADIUS
+     ============================================ */
+
+  --radius-none: 0px;
+  --radius-sm: 0.25rem;      /* 4px */
+  --radius-md: 0.375rem;     /* 6px */
+  --radius-lg: 0.5rem;       /* 8px */
+  --radius-xl: 0.625rem;     /* 10px */
+  --radius-2xl: 0.75rem;     /* 12px */
+  --radius-3xl: 1rem;        /* 16px */
+  --radius-full: 9999px;     /* Fully rounded */
+
+
+  /* ============================================
+     SHADOWS
+     ============================================ */
+
+  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
+
+
+  /* ============================================
+     TRANSITIONS
+     ============================================ */
+
+  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+
+  /* ============================================
+     Z-INDEX LAYERS
+     ============================================ */
+
+  --z-dropdown: 1000;
+  --z-sticky: 1020;
+  --z-modal: 1040;
+  --z-popover: 1050;
+  --z-tooltip: 1060;
+}
+
+
+/* ============================================
+   DARK MODE OVERRIDES
+   ============================================ */
+
+.dark {
+  /* Brand Colors (Dark Mode) */
+  --color-primary: oklch(0.65 0.25 260);
+  --color-primary-hover: oklch(0.70 0.27 260);
+
+  /* Backgrounds (Dark Mode) */
+  --color-background: oklch(15% 0 0);
+  --color-background-secondary: oklch(18% 0 0);
+  --color-surface: oklch(20% 0 0);
+  --color-border: oklch(30% 0 0);
+
+  /* Text Colors (Dark Mode) */
+  --color-text-primary: oklch(95% 0 0);
+  --color-text-secondary: oklch(70% 0 0);
+  --color-text-muted: oklch(55% 0 0);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdigital_ui/ui",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Modern React component library built with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,6 +8,7 @@
   "types": "./dist/index.d.ts",
   "files": [
     "dist",
+    "examples",
     "README.md",
     "LICENSE"
   ],