RubyGems - lightning_ui_kit - Versions diffs - 0.3.1 → 0.3.2 - Mend

lightning_ui_kit 0.3.1 → 0.3.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (84) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03ad660a5df33754b3f468fbba5b82cb67c1a284d43d84b980c8d85a835d6e15
-  data.tar.gz: 565ad6bb20e7e2060d3b7937386a1001dd89c568f8d19c98669e946d0763a8ac
+  metadata.gz: 7146887cfb0e95944c7e2e8b737b35b9a469ff63aff79e9dedf71aada5490509
+  data.tar.gz: 047a1bd54e1f9caf6b79f1fbc94408173f5ed9560bd2501546cee8497501025d
 SHA512:
-  metadata.gz: 67dfd0d0a6207aab34dc4a21b5c3c3da2fb34282553ce141a1b8614726a8736a28d20a28790044151b2ea7eb2eec474dc1b1a7fd182abd62c291dbc44cec9551
-  data.tar.gz: d936c5ed4b0275dbe3b1def5e8268bbdea8f991b2d730823e263f20faed66d81e1adc797b837c728fc76f8a70c608ca899d640b2acd2bd4432ac39c533df524f
+  metadata.gz: a8cad9be59e10d452f31d9fb747f6c9b1dc2df818dace1a3c6937bd0751c1ac6023d673578cc5f64989371473dc6d2233366990d1f0209edc707b5d52a4e32b3
+  data.tar.gz: c5416b27c5805d22ed015ed4b11d855701de1a99bf248bd1a3441a376c762b887b4711d2365fa47eaaaa99c0b36a46788fe0dcaa25fa1a979f76f493cd5931e4

data/README.md CHANGED Viewed

@@ -94,6 +94,36 @@ You can also use the standard ViewComponent render syntax:
 <%= render LightningUiKit::ButtonComponent.new { "Click me" } %>
 ```
+## Theming
+LightningUiKit supports theming via CSS custom properties. All components use semantic design tokens instead of hardcoded colors.
+### Built-in Themes
+- **Light** (default) — applied automatically
+- **Dark** — add `class="lui-theme-dark"` to a container element
+```erb
+<body class="lui-theme-dark">
+  <%= lui.button { "Dark themed" } %>
+</body>
+```
+### Custom Themes
+Override `--lui-theme-*` CSS variables to create your own theme:
+```css
+.my-brand-theme {
+  --lui-theme-surface: oklch(0.98 0.01 250);
+  --lui-theme-foreground: oklch(0.2 0.02 250);
+  --lui-theme-interactive: oklch(0.6 0.2 250);
+  /* See themes.css for all available tokens */
+}
+```
+Full token definitions are in `app/assets/stylesheets/lightning_ui_kit/themes.css`.
 ## Contributing
 Bug reports and pull requests are welcome

data/app/assets/stylesheets/lightning_ui_kit/application.css CHANGED Viewed

@@ -1 +1,59 @@
 @import "tailwindcss" prefix(lui);
+@import "./themes.css";
+@theme inline {
+  --color-surface: var(--lui-theme-surface);
+  --color-surface-secondary: var(--lui-theme-surface-secondary);
+  --color-surface-tertiary: var(--lui-theme-surface-tertiary);
+  --color-surface-aside: var(--lui-theme-surface-aside);
+  --color-surface-input: var(--lui-theme-surface-input);
+  --color-surface-invert: var(--lui-theme-surface-invert);
+  --color-surface-overlay: var(--lui-theme-surface-overlay);
+  --color-surface-hover: var(--lui-theme-surface-hover);
+  --color-foreground: var(--lui-theme-foreground);
+  --color-foreground-secondary: var(--lui-theme-foreground-secondary);
+  --color-foreground-muted: var(--lui-theme-foreground-muted);
+  --color-foreground-faint: var(--lui-theme-foreground-faint);
+  --color-foreground-invert: var(--lui-theme-foreground-invert);
+  --color-border: var(--lui-theme-border);
+  --color-border-hover: var(--lui-theme-border-hover);
+  --color-border-strong: var(--lui-theme-border-strong);
+  --color-border-subtle: var(--lui-theme-border-subtle);
+  --color-border-invert: var(--lui-theme-border-invert);
+  --color-focus: var(--lui-theme-focus);
+  --color-interactive: var(--lui-theme-interactive);
+  --color-interactive-subtle: var(--lui-theme-interactive-subtle);
+  --color-destructive: var(--lui-theme-destructive);
+  --color-destructive-border: var(--lui-theme-destructive-border);
+  --color-destructive-text: var(--lui-theme-destructive-text);
+  --color-success-bg: var(--lui-theme-success-bg);
+  --color-success-indicator: var(--lui-theme-success-indicator);
+  --color-success-text: var(--lui-theme-success-text);
+  --color-warning-bg: var(--lui-theme-warning-bg);
+  --color-warning-indicator: var(--lui-theme-warning-indicator);
+  --color-warning-text: var(--lui-theme-warning-text);
+  --color-tooltip-bg: var(--lui-theme-tooltip-bg);
+  --color-tooltip-text: var(--lui-theme-tooltip-text);
+  --color-neutral-bg: var(--lui-theme-neutral-bg);
+  --color-neutral-text: var(--lui-theme-neutral-text);
+  --color-spinner-primary: var(--lui-theme-spinner-primary);
+  --color-spinner-secondary: var(--lui-theme-spinner-secondary);
+  --animate-icon-bounce: icon-bounce 350ms ease-out;
+}
+@keyframes icon-bounce {
+  0% { scale: 1; }
+  40% { scale: 1.2; }
+  70% { scale: 0.95; }
+  100% { scale: 1; }
+}

data/app/assets/stylesheets/lightning_ui_kit/themes.css ADDED Viewed

@@ -0,0 +1,133 @@
+/*
+ * LightningUiKit Theme Tokens
+ *
+ * Semantic design tokens using CSS custom properties.
+ * Override these variables to create custom themes — no rebuild needed.
+ *
+ * Apply themes via CSS class on any container element:
+ *   <body class="lui-theme-dark">
+ *
+ * Create custom themes by overriding variables:
+ *   .lui-theme-brand {
+ *     --lui-theme-interactive: oklch(0.6 0.2 150);
+ *     --lui-theme-surface: oklch(0.98 0.01 150);
+ *   }
+ */
+/* ===== Default (Light) Theme ===== */
+:root {
+  /* Surface */
+  --lui-theme-surface: #fff;
+  --lui-theme-surface-secondary: oklch(0.985 0 0);
+  --lui-theme-surface-tertiary: oklch(0.967 0.001 286.375);
+  --lui-theme-surface-aside: oklch(0.967 0.001 286.375);
+  --lui-theme-surface-input: #fff;
+  --lui-theme-surface-invert: oklch(0.21 0.006 285.885);
+  --lui-theme-surface-overlay: oklch(0.141 0.005 285.823 / 25%);
+  --lui-theme-surface-hover: oklch(0.141 0.005 285.823 / 5%);
+  /* Foreground */
+  --lui-theme-foreground: oklch(0.141 0.005 285.823);
+  --lui-theme-foreground-secondary: oklch(0.442 0.017 285.786);
+  --lui-theme-foreground-muted: oklch(0.552 0.016 285.938);
+  --lui-theme-foreground-faint: oklch(0.705 0.015 286.067);
+  --lui-theme-foreground-invert: #fff;
+  /* Border */
+  --lui-theme-border: oklch(0.141 0.005 285.823 / 10%);
+  --lui-theme-border-hover: oklch(0.141 0.005 285.823 / 20%);
+  --lui-theme-border-strong: oklch(0.141 0.005 285.823 / 15%);
+  --lui-theme-border-subtle: oklch(0.141 0.005 285.823 / 5%);
+  --lui-theme-border-invert: oklch(0.141 0.005 285.823 / 90%);
+  /* Interactive */
+  --lui-theme-focus: oklch(0.623 0.214 259.815);
+  --lui-theme-interactive: oklch(0.546 0.245 262.881);
+  --lui-theme-interactive-subtle: oklch(0.97 0.014 254.604);
+  /* Destructive */
+  --lui-theme-destructive: oklch(0.577 0.245 27.325);
+  --lui-theme-destructive-border: oklch(0.637 0.237 25.331);
+  --lui-theme-destructive-text: oklch(0.577 0.245 27.325);
+  /* Success */
+  --lui-theme-success-bg: oklch(0.925 0.084 155.995);
+  --lui-theme-success-indicator: oklch(0.627 0.194 149.214);
+  --lui-theme-success-text: oklch(0.45 0.13 150);
+  /* Warning */
+  --lui-theme-warning-bg: oklch(0.945 0.129 101.54);
+  --lui-theme-warning-indicator: oklch(0.852 0.199 91.936);
+  --lui-theme-warning-text: oklch(0.53 0.14 70);
+  /* Tooltip */
+  --lui-theme-tooltip-bg: oklch(0.274 0.006 286.033);
+  --lui-theme-tooltip-text: #fff;
+  /* Neutral */
+  --lui-theme-neutral-bg: oklch(0.985 0.002 247.839);
+  --lui-theme-neutral-text: oklch(0.278 0.033 256.848);
+  /* Spinner */
+  --lui-theme-spinner-primary: oklch(0.552 0.016 285.938);
+  --lui-theme-spinner-secondary: oklch(0.872 0.01 258.338);
+}
+/* ===== Dark Theme ===== */
+.lui-theme-dark {
+  /* Surface */
+  --lui-theme-surface: oklch(0.141 0.005 285.823);
+  --lui-theme-surface-secondary: oklch(0.21 0.006 285.885);
+  --lui-theme-surface-tertiary: oklch(0.274 0.006 286.033);
+  --lui-theme-surface-aside: oklch(0.13 0.004 285.823);
+  --lui-theme-surface-input: color-mix(in oklab, white 5%, transparent);
+  --lui-theme-surface-invert: oklch(0.985 0 0);
+  --lui-theme-surface-overlay: oklch(0 0 0 / 50%);
+  --lui-theme-surface-hover: oklch(1 0 0 / 7%);
+  /* Foreground */
+  --lui-theme-foreground: oklch(0.985 0 0);
+  --lui-theme-foreground-secondary: oklch(0.705 0.015 286.067);
+  --lui-theme-foreground-muted: oklch(0.552 0.016 285.938);
+  --lui-theme-foreground-faint: oklch(0.442 0.017 285.786);
+  --lui-theme-foreground-invert: oklch(0.141 0.005 285.823);
+  /* Border */
+  --lui-theme-border: oklch(1 0 0 / 10%);
+  --lui-theme-border-hover: oklch(1 0 0 / 20%);
+  --lui-theme-border-strong: oklch(1 0 0 / 15%);
+  --lui-theme-border-subtle: oklch(1 0 0 / 5%);
+  --lui-theme-border-invert: oklch(1 0 0 / 90%);
+  /* Interactive */
+  --lui-theme-focus: oklch(0.623 0.214 259.815);
+  --lui-theme-interactive: oklch(0.623 0.214 259.815);
+  --lui-theme-interactive-subtle: oklch(0.546 0.245 262.881 / 20%);
+  /* Destructive */
+  --lui-theme-destructive: oklch(0.637 0.237 25.331);
+  --lui-theme-destructive-border: oklch(0.637 0.237 25.331);
+  --lui-theme-destructive-text: oklch(0.637 0.237 25.331);
+  /* Success */
+  --lui-theme-success-bg: oklch(0.627 0.194 149.214 / 25%);
+  --lui-theme-success-indicator: oklch(0.627 0.194 149.214);
+  --lui-theme-success-text: oklch(0.76 0.16 150);
+  /* Warning */
+  --lui-theme-warning-bg: oklch(0.852 0.199 91.936 / 25%);
+  --lui-theme-warning-indicator: oklch(0.852 0.199 91.936);
+  --lui-theme-warning-text: oklch(0.82 0.15 85);
+  /* Tooltip */
+  --lui-theme-tooltip-bg: oklch(0.92 0.004 286.32);
+  --lui-theme-tooltip-text: oklch(0.141 0.005 285.823);
+  /* Neutral */
+  --lui-theme-neutral-bg: oklch(0.274 0.006 286.033);
+  --lui-theme-neutral-text: oklch(0.871 0.006 286.286);
+  /* Spinner */
+  --lui-theme-spinner-primary: oklch(0.705 0.015 286.067);
+  --lui-theme-spinner-secondary: oklch(0.442 0.017 285.786);
+}

data/app/components/lightning_ui_kit/alert_component.rb CHANGED Viewed

@@ -5,7 +5,7 @@ class LightningUiKit::AlertComponent < LightningUiKit::BaseComponent
   end
   def default_classes
-    "lui:flex lui:items-center lui:p-4 lui:text-sm lui:text-gray-800 lui:rounded-lg lui:bg-gray-50"
+    "lui:flex lui:items-center lui:p-4 lui:text-sm lui:text-neutral-text lui:rounded-lg lui:bg-neutral-bg"
   end
   def classes

data/app/components/lightning_ui_kit/avatar_component.html.erb CHANGED Viewed

@@ -2,7 +2,7 @@
   class: class_names(
     "lui:inline-grid lui:shrink-0 lui:align-middle lui:[--avatar-radius:20%] lui:[--ring-opacity:20%] *:lui:col-start-1 *:lui:row-start-1 lui:outline lui:-outline-offset-1 lui:outline-black/(--ring-opacity)",
     SIZE_CLASSES.fetch(@size, SIZE_CLASSES[:md]),
-    @initials ? "lui:text-white lui:bg-zinc-900" : "lui:text-zinc-500 lui:bg-zinc-200",
+    @initials ? "lui:text-foreground-invert lui:bg-surface-invert" : "lui:text-foreground-muted lui:bg-surface-tertiary",
     @square ? "lui:rounded-(--avatar-radius) lui:*:rounded-(--avatar-radius)" : "lui:rounded-full lui:*:rounded-full",
     @options[:class]
   ),

data/app/components/lightning_ui_kit/badge_component.rb CHANGED Viewed

@@ -7,13 +7,13 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
   def classes
     status_classes = case @status
     when :success
-      "lui:bg-green-200 lui:text-zinc-500"
+      "lui:bg-success-bg lui:text-success-text"
     when :warning
-      "lui:bg-yellow-200 lui:text-zinc-500"
+      "lui:bg-warning-bg lui:text-warning-text"
     when :error
-      "lui:bg-red-600/80 lui:text-white"
+      "lui:bg-destructive/15 lui:text-destructive-text"
     else
-      "lui:bg-zinc-400/20 lui:text-zinc-500"
+      "lui:bg-foreground-faint/20 lui:text-foreground-muted"
     end
     [defalt_classes, status_classes].join(" ")
   end
@@ -23,20 +23,20 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
     when :complete
       case @status
       when :success
-        "lui:bg-green-600 lui:border-green-600"
+        "lui:bg-success-indicator lui:border-success-indicator"
       when :warning
-        "lui:bg-yellow-400 lui:border-yellow-400"
+        "lui:bg-warning-indicator lui:border-warning-indicator"
       when :error
-        "lui:bg-red-700 lui:border-red-700"
+        "lui:bg-destructive lui:border-destructive"
       else
-        "lui:bg-zinc-400 lui:border-zinc-400"
+        "lui:bg-foreground-faint lui:border-foreground-faint"
       end
     when :incomplete
       case @status
       when :error
-        "lui:bg-transparent lui:border-white"
+        "lui:bg-transparent lui:border-foreground-invert"
       else
-        "lui:bg-transparent lui:border-zinc-400"
+        "lui:bg-transparent lui:border-foreground-faint"
       end
     when :partialy_complete
       partialy_complete_classes = "lui:relative lui:after:w-[3.75px] lui:after:h-[8.2px]\
@@ -44,13 +44,13 @@ class LightningUiKit::BadgeComponent < LightningUiKit::BaseComponent
        lui:after:left-[1px] lui:after:margin-0 lui:after-margin-y-[1px]"
       case @status
       when :success
-        "#{partialy_complete_classes} lui:border-green-600 lui:after:border-l-green-600 lui:after:border-r-green-600"
+        "#{partialy_complete_classes} lui:border-success-indicator lui:after:border-l-success-indicator lui:after:border-r-success-indicator"
       when :warning
-        "#{partialy_complete_classes} lui:border-yellow-400 lui:after:border-l-yellow-400 lui:after:border-r-yellow-400"
+        "#{partialy_complete_classes} lui:border-warning-indicator lui:after:border-l-warning-indicator lui:after:border-r-warning-indicator"
       when :error
-        "#{partialy_complete_classes} lui:border-white lui:after:border-l-white lui:after:border-r-white"
+        "#{partialy_complete_classes} lui:border-foreground-invert lui:after:border-l-foreground-invert lui:after:border-r-foreground-invert"
       else
-        "#{partialy_complete_classes} lui:border-zinc-400 lui:after:border-l-zinc-400 lui:after:border-r-zinc-400"
+        "#{partialy_complete_classes} lui:border-foreground-faint lui:after:border-l-foreground-faint lui:after:border-r-foreground-faint"
       end
     end
     [default_progress_classes, progress_classes].join(" ")

data/app/components/lightning_ui_kit/banner_component.html.erb CHANGED Viewed

@@ -5,7 +5,7 @@
     <h3 class="lui:text-md lui:font-medium"><%= @title %></h3>
   </div>
-  <div class="lui:text-sm lui:text-gray-800 lui:p-4">
+  <div class="lui:text-sm lui:text-neutral-text lui:p-4">
     <%= content %>
   </div>

data/app/components/lightning_ui_kit/banner_component.rb CHANGED Viewed

@@ -10,9 +10,9 @@ class LightningUiKit::BannerComponent < LightningUiKit::BaseComponent
   def classes
     type_classes = case @type
     when :error
-      "lui:*:data-[slot=header]:bg-red-600/80 lui:*:data-[slot=header]:text-white"
+      "lui:*:data-[slot=header]:bg-destructive/80 lui:*:data-[slot=header]:text-foreground-invert"
     else
-      "lui:*:data-[slot=header]:bg-gray-50"
+      "lui:*:data-[slot=header]:bg-neutral-bg"
     end
     merge_classes([default_classes, type_classes, @options[:class]].compact.join(" "))
@@ -28,6 +28,6 @@ class LightningUiKit::BannerComponent < LightningUiKit::BaseComponent
   end
   def default_classes
-    "lui:border lui:border-zinc-950/10 lui:rounded-lg lui:overflow-hidden lui:transition-opacity lui:duration-300 lui:ease-out lui:opacity-100"
+    "lui:border lui:border-border lui:rounded-lg lui:overflow-hidden lui:transition-opacity lui:duration-300 lui:ease-out lui:opacity-100"
   end
 end

data/app/components/lightning_ui_kit/button_component.rb CHANGED Viewed

@@ -58,12 +58,12 @@ class LightningUiKit::ButtonComponent < LightningUiKit::BaseComponent
   end
   def destructive_classes
-    "lui:text-white lui:border-red-500 lui:hover:bg-red-600 lui:active:bg-red-700\
-      lui:[--btn-bg:var(--lui-color-red-600)]\
-      lui:[--btn-border:var(--lui-color-red-950)]/90
-      lui:[--btn-hover-overlay:var(--lui-color-white)]/10\
-      lui:[--btn-icon:var(--lui-color-white)]\
-      lui:active:[--btn-icon:var(--lui-color-white)] lui:hover:[--btn-icon:var(--lui-color-white)] lui:cursor-pointer"
+    "lui:text-foreground-invert lui:border-destructive-border lui:hover:bg-destructive lui:active:bg-destructive\
+      lui:[--btn-bg:var(--lui-theme-destructive)]\
+      lui:[--btn-border:var(--lui-theme-destructive-border)]
+      lui:[--btn-hover-overlay:var(--lui-theme-foreground-invert)]/10\
+      lui:[--btn-icon:var(--lui-theme-foreground-invert)]\
+      lui:active:[--btn-icon:var(--lui-theme-foreground-invert)] lui:hover:[--btn-icon:var(--lui-theme-foreground-invert)] lui:cursor-pointer"
   end
   def default_classes
@@ -75,21 +75,21 @@ class LightningUiKit::ButtonComponent < LightningUiKit::BaseComponent
       lui:after:-z-10 lui:after:rounded-[calc(var(--lui-radius-lg)-1px)] lui:after:shadow-[shadow:inset_0_1px_--theme(--color-white/15%)]\
       lui:active:after:bg-(--btn-hover-overlay) lui:hover:after:bg-(--btn-hover-overlay)\
       lui:disabled:opacity-50 lui:disabled:before:shadow-none lui:disabled:after:shadow-none lui:disabled:hover:after:bg-transparent\
-      lui:text-white lui:cursor-pointer\
-      lui:[--btn-bg:var(--lui-color-zinc-900)]\
-      lui:[--btn-border:var(--lui-color-zinc-950)]/90
-      lui:[--btn-hover-overlay:var(--lui-color-white)]/10\
-      lui:[--btn-icon:var(--lui-color-zinc-400)]\
-      lui:active:[--btn-icon:var(--lui-color-zinc-300)]\
-      lui:hover:[--btn-icon:var(--lui-color-zinc-300)]"
+      lui:text-foreground-invert lui:cursor-pointer\
+      lui:[--btn-bg:var(--lui-theme-surface-invert)]\
+      lui:[--btn-border:var(--lui-theme-border-invert)]
+      lui:[--btn-hover-overlay:var(--lui-theme-foreground-invert)]/10\
+      lui:[--btn-icon:var(--lui-theme-foreground-faint)]\
+      lui:active:[--btn-icon:var(--lui-theme-foreground-muted)]\
+      lui:hover:[--btn-icon:var(--lui-theme-foreground-muted)]"
   end
   def outline_classes
     "lui:relative lui:isolate lui:inline-flex lui:items-baseline lui:justify-center lui:gap-x-2 lui:rounded-lg lui:border lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)] sm:lui:px-[calc(--spacing(3)-1px)]\
       lui:sm:py-[calc(--spacing(1.5)-1px)] lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2\
-      lui:focus:outline-blue-500 lui:disabled:opacity-50 lui:*:data-[slot=icon]:-mx-0.5 lui:*:data-[slot=icon]:my-0.5 lui:*:data-[slot=icon]:size-5\
+      lui:focus:outline-focus lui:disabled:opacity-50 lui:*:data-[slot=icon]:-mx-0.5 lui:*:data-[slot=icon]:my-0.5 lui:*:data-[slot=icon]:size-5\
       lui:*:data-[slot=icon]:shrink-0 lui:*:data-[slot=icon]:self-center lui:*:data-[slot=icon]:text-(--btn-icon) lui:sm:*:data-[slot=icon]:my-1\
-      lui:sm:*:data-[slot=icon]:size-4 lui:border-zinc-950/10 lui:text-zinc-950 lui:active:bg-zinc-950/[2.5%] lui:hover:bg-zinc-950/[2.5%]\
-      lui:[--btn-icon:var(--lui-color-zinc-500)] lui:active:[--btn-icon:var(--lui-color-zinc-700)] lui:hover:[--btn-icon:var(--lui-color-zinc-700)] lui:cursor-pointer"
+      lui:sm:*:data-[slot=icon]:size-4 lui:border-border lui:text-foreground lui:active:bg-surface-hover lui:hover:bg-surface-hover\
+      lui:[--btn-icon:var(--lui-theme-foreground-muted)] lui:active:[--btn-icon:var(--lui-theme-foreground-secondary)] lui:hover:[--btn-icon:var(--lui-theme-foreground-secondary)] lui:cursor-pointer"
   end
 end

data/app/components/lightning_ui_kit/checkbox_component.html.erb CHANGED Viewed

@@ -6,19 +6,19 @@
   <%= tag.span(data: control_data, class: "lui:group lui:inline-flex lui:focus:outline-hidden", role: "checkbox", aria_checked: "false",  tabindex: 0) do %>
     <span class="lui:relative lui:isolate lui:flex lui:size-[1.125rem] lui:items-center lui:justify-center
       lui:rounded-[0.3125rem] lui:sm:size-4 lui:before:absolute lui:before:inset-0 lui:before:-z-10
-      lui:before:rounded-[calc(0.3125rem-1px)] lui:before:bg-white lui:before:shadow-sm
-      lui:group-data-checked:before:bg-(--checkbox-checked-bg) lui:border lui:border-zinc-950/15
+      lui:before:rounded-[calc(0.3125rem-1px)] lui:before:bg-surface-input lui:before:shadow-sm
+      lui:group-data-checked:before:bg-(--checkbox-checked-bg) lui:border lui:border-border-strong
       lui:group-data-checked:border-transparent lui:group-hover:group-data-checked:border-transparent
-      lui:group-hover:border-zinc-950/30 lui:group-data-checked:bg-(--checkbox-checked-border)
+      lui:group-hover:border-border-hover lui:group-data-checked:bg-(--checkbox-checked-border)
       lui:after:absolute lui:after:inset-0 lui:after:rounded-[calc(0.3125rem-1px)] lui:after:shadow-[inset_0_1px_--theme(--color-white/15%)]
       lui:group-data-focus:outline lui:group-data-focus:outline-2 lui:group-data-focus:outline-offset-2
-      lui:group-data-focus:outline-blue-500 lui:group-data-disabled:opacity-50 lui:group-data-disabled:border-zinc-950/25
-      lui:group-data-disabled:bg-zinc-950/5 lui:group-data-disabled:[--checkbox-check:var(--lui-color-zinc-950)]/50
+      lui:group-data-focus:outline-focus lui:group-data-disabled:opacity-50 lui:group-data-disabled:border-border-strong
+      lui:group-data-disabled:bg-surface-hover lui:group-data-disabled:[--checkbox-check:var(--lui-theme-foreground)]/50
       lui:group-data-disabled:before:bg-transparent lui:forced-colors:[--checkbox-check:HighlightText] lui:forced-colors:[--checkbox-checked-bg:Highlight]
       lui:forced-colors:group-data-disabled:[--checkbox-check:Highlight]
-      lui:[--checkbox-check:var(--lui-color-white)]
-      lui:[--checkbox-checked-bg:var(--lui-color-zinc-900)]
-      lui:[--checkbox-checked-border:var(--color-zinc-950)]/90"
+      lui:[--checkbox-check:var(--lui-theme-foreground-invert)]
+      lui:[--checkbox-checked-bg:var(--lui-theme-surface-invert)]
+      lui:[--checkbox-checked-border:var(--lui-theme-border-invert)]"
       >
       <svg class="lui:size-4 lui:stroke-(--checkbox-check) lui:opacity-0 lui:group-data-checked:opacity-100 lui:sm:h-3.5 lui:sm:w-3.5" viewBox="0 0 14 14" fill="none">
         <path class="lui:opacity-100 lui:group-data-indeterminate:opacity-0" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
@@ -29,14 +29,14 @@
   <% if render_label? %>
     <label
       data-slot="label"
-      class="lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6"
+      class="lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6"
       data-action="click->lui-checkbox#toggle"
       >
       <%= effective_label %>
     </label>
   <% end %>
   <% if @description %>
-    <p data-slot="description" class="lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6">
+    <p data-slot="description" class="lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6">
       <%= @description %>
     </p>
   <% end %>

data/app/components/lightning_ui_kit/combobox_component.html.erb CHANGED Viewed

@@ -2,14 +2,14 @@
   <% if render_label? %>
     <%= tag.label(
       effective_label,
-      class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-foreground lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: label_data
     ) %>
   <% end %>
   <% if @description %>
     <%= tag.p(
       @description,
-      class: "lui:text-base/6 lui:text-zinc-500 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: description_data
     ) %>
   <% end %>
@@ -17,7 +17,7 @@
     <% if @multiple %>
       <%# Multiple selection: tags + input in a styled container %>
       <div
-        class="lui:relative lui:flex lui:flex-wrap lui:items-center lui:gap-1.5 lui:w-full lui:min-h-[42px] lui:sm:min-h-[38px] lui:rounded-lg lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20 lui:bg-white lui:shadow-sm lui:px-2 lui:py-1.5 lui:focus-within:ring-2 lui:focus-within:ring-blue-500 lui:focus-within:ring-offset-0 <%= 'lui:opacity-50' if @disabled %> <%= 'lui:border-red-500' if has_errors? %>"
+        class="lui:relative lui:flex lui:flex-wrap lui:items-center lui:gap-1.5 lui:w-full lui:min-h-[42px] lui:sm:min-h-[38px] lui:rounded-lg lui:border lui:border-border lui:data-[hover]:border-border-hover lui:bg-surface-input lui:shadow-sm lui:px-2 lui:py-1.5 lui:focus-within:ring-2 lui:focus-within:ring-focus lui:focus-within:ring-offset-0 <%= 'lui:opacity-50' if @disabled %> <%= 'lui:border-destructive-border' if has_errors? %>"
         data-lui-combobox-target="inputWrapper selectedTags"
       >
         <input
@@ -27,7 +27,7 @@
           aria-expanded="false"
           aria-haspopup="listbox"
           autocomplete="off"
-          class="lui:flex-1 lui:min-w-[120px] lui:border-0 lui:bg-transparent lui:p-0 lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6 lui:focus:outline-none lui:focus:ring-0"
+          class="lui:flex-1 lui:min-w-[120px] lui:border-0 lui:bg-transparent lui:p-0 lui:text-base/6 lui:text-foreground lui:placeholder:text-foreground-muted lui:sm:text-sm/6 lui:focus:outline-none lui:focus:ring-0"
           placeholder="<%= @placeholder %>"
           data-lui-combobox-target="input"
           data-action="input->lui-combobox#onInput focus->lui-combobox#onFocus keydown->lui-combobox#onKeydown"
@@ -36,7 +36,7 @@
           <%= "data-invalid=true" if has_errors? %>
           />
           <span class="lui:pointer-events-none lui:flex lui:items-center">
-            <svg class="lui:size-5 lui:stroke-zinc-500 lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+            <svg class="lui:size-5 lui:stroke-foreground-muted lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
               <path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
               <path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
             </svg>
@@ -44,7 +44,7 @@
         </div>
       <% else %>
         <%# Single selection: standard input styling %>
-        <span class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-white lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-blue-500 lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-zinc-950/5 lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-red-500/10">
+        <span class="lui:relative lui:block lui:w-full lui:before:absolute lui:before:inset-px lui:before:rounded-[7px] lui:before:bg-surface-input lui:before:shadow-sm lui:after:pointer-events-none lui:after:absolute lui:after:inset-0 lui:after:rounded-lg lui:after:ring-transparent lui:after:ring-inset lui:sm:focus-within:after:ring-2 lui:sm:focus-within:after:ring-focus lui:has-data-disabled:opacity-50 lui:has-data-disabled:before:bg-surface-hover lui:has-data-disabled:before:shadow-none lui:has-data-invalid:before:shadow-destructive-border/10">
           <input
           type="text"
           role="combobox"
@@ -61,7 +61,7 @@
             <%= "data-invalid=true" if has_errors? %>
             />
             <span class="lui:pointer-events-none lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-2">
-              <svg class="lui:size-5 lui:stroke-zinc-500 lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+              <svg class="lui:size-5 lui:stroke-foreground-muted lui:sm:size-4" viewBox="0 0 16 16" aria-hidden="true" fill="none">
                 <path d="M5.75 10.75L8 13L10.25 10.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                 <path d="M10.25 5.25L8 3L5.75 5.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
               </svg>
@@ -73,17 +73,17 @@
       data-lui-combobox-target="listbox"
       role="listbox"
       aria-label="<%= effective_label || 'Options' %>"
-      class="lui:hidden lui:absolute lui:z-50 lui:mt-1 lui:w-full lui:max-h-60 lui:overflow-auto lui:rounded-lg lui:bg-white lui:shadow-lg lui:ring-1 lui:ring-zinc-950/10"
+      class="lui:hidden lui:absolute lui:z-50 lui:mt-1 lui:w-full lui:max-h-60 lui:overflow-auto lui:rounded-lg lui:bg-surface-secondary lui:shadow-lg lui:ring-1 lui:ring-border"
     >
           <template data-lui-combobox-target="optionTemplate">
             <div
           role="option"
           data-lui-combobox-target="option"
-          class="lui:relative lui:cursor-pointer lui:select-none lui:py-2 lui:px-3 lui:text-zinc-900 lui:hover:bg-zinc-100 lui:data-[selected]:bg-blue-50 lui:data-[highlighted]:bg-zinc-100 lui:data-[disabled]:opacity-50 lui:data-[disabled]:cursor-not-allowed"
+          class="lui:relative lui:cursor-pointer lui:select-none lui:py-2 lui:px-3 lui:text-foreground lui:hover:bg-surface-tertiary lui:data-[selected]:bg-interactive-subtle lui:data-[highlighted]:bg-surface-tertiary lui:data-[disabled]:opacity-50 lui:data-[disabled]:cursor-not-allowed"
           data-action="click->lui-combobox#selectOption mouseenter->lui-combobox#highlightOption"
               >
               <span data-label class="lui:block lui:truncate"></span>
-              <span data-checkmark class="lui:hidden lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-3 lui:text-blue-600">
+              <span data-checkmark class="lui:hidden lui:absolute lui:inset-y-0 lui:right-0 lui:flex lui:items-center lui:pr-3 lui:text-interactive">
                 <svg class="lui:size-5" viewBox="0 0 20 20" fill="currentColor">
                   <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
                 </svg>
@@ -91,16 +91,16 @@
             </div>
           </template>
           <div data-lui-combobox-target="optionsContainer"></div>
-          <div data-lui-combobox-target="loading" class="lui:hidden lui:py-2 lui:px-3 lui:text-zinc-500 lui:text-sm">
+          <div data-lui-combobox-target="loading" class="lui:hidden lui:py-2 lui:px-3 lui:text-foreground-muted lui:text-sm">
             Loading...
           </div>
-          <div data-lui-combobox-target="noResults" class="lui:hidden lui:py-2 lui:px-3 lui:text-zinc-500 lui:text-sm">
+          <div data-lui-combobox-target="noResults" class="lui:hidden lui:py-2 lui:px-3 lui:text-foreground-muted lui:text-sm">
             No results found
           </div>
           <% if @allow_custom %>
             <div
           data-lui-combobox-target="createOption"
-          class="lui:hidden lui:cursor-pointer lui:py-2 lui:px-3 lui:text-blue-600 lui:hover:bg-blue-50 lui:border-t lui:border-zinc-100 lui:flex lui:items-center lui:gap-1.5"
+          class="lui:hidden lui:cursor-pointer lui:py-2 lui:px-3 lui:text-interactive lui:hover:bg-interactive-subtle lui:border-t lui:border-border-subtle lui:flex lui:items-center lui:gap-1.5"
           data-action="click->lui-combobox#createCustomOption"
               >
               <%= heroicon "plus", variant: :solid, options: { class: "lui:size-4" } %>
@@ -121,7 +121,7 @@
       <% if has_errors? %>
         <%= tag.p(
       error_messages,
-      class: "lui:text-base/6 lui:text-red-600 lui:data-disabled:opacity-50 lui:sm:text-sm/6",
+      class: "lui:text-base/6 lui:text-destructive-text lui:data-disabled:opacity-50 lui:sm:text-sm/6",
       data: error_data
     ) %>
       <% end %>

data/app/components/lightning_ui_kit/combobox_component.rb CHANGED Viewed

@@ -114,11 +114,11 @@ class LightningUiKit::ComboboxComponent < LightningUiKit::BaseComponent
       "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg",
       "lui:px-[calc(--spacing(3.5)-1px)] lui:py-[calc(--spacing(2.5)-1px)]",
       "lui:sm:px-[calc(--spacing(3)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)]",
-      "lui:text-base/6 lui:text-zinc-950 lui:placeholder:text-zinc-500 lui:sm:text-sm/6",
-      "lui:border lui:border-zinc-950/10 lui:data-[hover]:border-zinc-950/20",
+      "lui:text-base/6 lui:text-foreground lui:placeholder:text-foreground-muted lui:sm:text-sm/6",
+      "lui:border lui:border-border lui:data-[hover]:border-border-hover",
       "lui:bg-transparent lui:focus:outline-hidden",
-      "lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500/60",
-      "lui:data-disabled:border-zinc-950/20",
+      "lui:data-invalid:border-destructive-border lui:data-invalid:data-[hover]:border-destructive-border/60",
+      "lui:data-disabled:border-border-hover",
       "lui:pr-10"
     ].join(" "))
   end

data/app/components/lightning_ui_kit/description_list/item_component.html.erb CHANGED Viewed

@@ -1,8 +1,8 @@
-<dt class="lui:col-start-1 lui:border-t lui:border-zinc-950/5 lui:pt-3 lui:text-zinc-500 lui:first:border-none lui:sm:border-t lui:sm:border-zinc-950/5 lui:sm:py-3 lui:flex lui:items-center">
+<dt class="lui:col-start-1 lui:border-t lui:border-border-subtle lui:pt-3 lui:text-foreground-muted lui:first:border-none lui:sm:border-t lui:sm:border-border-subtle lui:sm:py-3 lui:flex lui:items-center">
   <%= @label %>
 </dt>
-<dd class="lui:pt-1 lui:pb-3 lui:text-zinc-950 lui:sm:border-t lui:sm:border-zinc-950/5 lui:sm:py-3 lui:sm:nth-2:border-none lui:flex lui:items-center">
+<dd class="lui:pt-1 lui:pb-3 lui:text-foreground lui:sm:border-t lui:sm:border-border-subtle lui:sm:py-3 lui:sm:nth-2:border-none lui:flex lui:items-center">
   <div class="lui:w-full">
     <% if @value %>
       <%= @value %>

data/app/components/lightning_ui_kit/dropdown_component.html.erb CHANGED Viewed

@@ -1,5 +1,5 @@
 <div data-controller="lui-dropdown" class="lui:relative">
-  <button type="button" data-action="lui-dropdown#toggle click@window->lui-dropdown#hide" class="lui:flex lui:items-center lui:justify-between lui:cursor-pointer lui:w-full lui:text-sm/6 lui:font-medium lui:text-zinc-700 lui:hover:text-zinc-950">
+  <button type="button" data-action="lui-dropdown#toggle click@window->lui-dropdown#hide" class="lui:flex lui:items-center lui:justify-between lui:cursor-pointer lui:w-full lui:text-sm/6 lui:font-medium lui:text-foreground-secondary lui:hover:text-foreground">
     <% if trigger? %>
       <%= trigger %>
     <% else %>
@@ -27,7 +27,7 @@
     data-transition-leave-to="opacity-0 scale-95"
     >
     <% items.each do |item| %>
-      <div class="lui:px-4 lui:py-2 lui:text-sm/5 lui:font-medium lui:text-zinc-950 lui:hover:bg-zinc-950/5 lui:rounded-md">
+      <div class="lui:px-4 lui:py-2 lui:text-sm/5 lui:font-medium lui:text-foreground lui:hover:bg-surface-hover lui:rounded-md">
         <%= item %>
       </div>
     <% end %>

data/app/components/lightning_ui_kit/dropdown_component.rb CHANGED Viewed

@@ -9,7 +9,7 @@ class LightningUiKit::DropdownComponent < LightningUiKit::BaseComponent
   end
   def menu_classes
-    classes = %w[lui:hidden lui:transition lui:transform lui:p-1 lui:origin-top-left lui:absolute lui:left-0 lui:rounded-md lui:shadow-lg lui:bg-white lui:ring-1 lui:ring-zinc-950/10 lui:focus:outline-none lui:z-50]
+    classes = %w[lui:hidden lui:transition lui:transform lui:p-1 lui:origin-top-left lui:absolute lui:left-0 lui:rounded-md lui:shadow-lg lui:bg-surface-secondary lui:ring-1 lui:ring-border lui:focus:outline-none lui:z-50]
     case @position.to_s
     when "top"
       classes << "lui:mb-2 lui:top-auto lui:bottom-full"