lightning_ui_kit 0.3.1 → 0.3.2

data/app/components/lightning_ui_kit/dropzone_component.html.erb

@@ -3,25 +3,25 @@
     <div class="lui:w-full lui:grid lui:gap-1 lui:my-4" id="#NEW_FILE" data-lui-dropzone-target="file">
       <div class="lui:flex lui:items-center lui:justify-between lui:gap-2">
         <div class="lui:flex lui:items-center lui:gap-2">
-          <%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-blue-500"}) %>
+          <%= heroicon("document", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-focus"}) %>
           <div class="lui:grid lui:gap-1">
-            <h4 class="lui:text-zinc-950 lui:text-sm lui:font-normal lui:leading-snug" data-lui-dropzone-target="filename"></h4>
-            <h5 class="lui:text-zinc-500 lui:text-xs lui:font-normal lui:leading-[18px]" data-lui-dropzone-target="status"></h5>
+            <h4 class="lui:text-foreground lui:text-sm lui:font-normal lui:leading-snug" data-lui-dropzone-target="filename"></h4>
+            <h5 class="lui:text-foreground-muted lui:text-xs lui:font-normal lui:leading-[18px]" data-lui-dropzone-target="status"></h5>
           </div>
         </div>
         <%= heroicon(
           "x-circle",
           variant: :outline,
           options: {
-            class: "lui:w-6 lui:h-6 lui:text-zinc-500 lui:hover:text-blue-500 lui:hover:cursor-pointer",
+            class: "lui:w-6 lui:h-6 lui:text-foreground-muted lui:hover:text-focus lui:hover:cursor-pointer",
             data_action: "click->lui-dropzone#removeFile"
           }) %>
       </div>
       <div class="lui:relative lui:flex lui:items-center lui:gap-2.5 lui:py-1.5">
-        <div class="lui:relative lui:w-full lui:h-2.5 lui:overflow-hidden lui:rounded-3xl lui:bg-zinc-100">
-          <div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="lui:flex lui:h-full lui:items-center lui:justify-center lui:bg-blue-600 lui:text-white lui:rounded-3xl"></div>
+        <div class="lui:relative lui:w-full lui:h-2.5 lui:overflow-hidden lui:rounded-3xl lui:bg-surface-tertiary">
+          <div data-lui-dropzone-target="progressbar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 0%" class="lui:flex lui:h-full lui:items-center lui:justify-center lui:bg-interactive lui:text-foreground-invert lui:rounded-3xl"></div>
         </div>
-        <span data-lui-dropzone-target="percentage-progress" class="lui:ml-2 lui:bg-white lui:rounded-full lui:text-zinc-950 lui:text-xs lui:font-medium lui:flex lui:justify-center lui:items-center">0%</span>
+        <span data-lui-dropzone-target="percentage-progress" class="lui:ml-2 lui:bg-surface lui:rounded-full lui:text-foreground lui:text-xs lui:font-medium lui:flex lui:justify-center lui:items-center">0%</span>
       </div>
     </div>
   </template>
@@ -30,18 +30,18 @@
   <% 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 %>
 
-  <div class="lui:py-9 lui:bg-zinc-50 lui:rounded-2xl lui:border lui:border-zinc-950/10 lui:border-dotted lui:hover:cursor-pointer lui:hover:bg-zinc-100" data-action="click->lui-dropzone#selectFiles">
+  <div class="lui:py-9 lui:bg-surface-secondary lui:rounded-2xl lui:border lui:border-border lui:border-dotted lui:hover:cursor-pointer lui:hover:bg-surface-tertiary" data-action="click->lui-dropzone#selectFiles">
     <div class="lui:mb-3 lui:flex lui:items-center lui:justify-center">
-      <%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-blue-500"}) %>
+      <%= heroicon("cloud-arrow-up", variant: :outline, options: {class: "lui:w-10 lui:h-10 lui:text-focus"}) %>
     </div>
-    <p class="lui:text-center lui:text-zinc-950 lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
+    <p class="lui:text-center lui:text-foreground lui:text-base lui:font-medium lui:leading-snug"><%= t("dropzone.default_message") %></p>
     <% if @placeholder %>
-      <p class="lui:text-center lui:text-zinc-500 lui:text-base lui:sm:text-sm/6 lui:font-normal lui:leading-4 lui:mt-1.5"><%= @placeholder %></p>
+      <p class="lui:text-center lui:text-foreground-muted lui:text-base lui:sm:text-sm/6 lui:font-normal lui:leading-4 lui:mt-1.5"><%= @placeholder %></p>
     <% end %>
     <%= render_file_input %>
   </div>
@@ -49,7 +49,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/dropzone_component.rb

@@ -52,7 +52,7 @@ class LightningUiKit::DropzoneComponent < LightningUiKit::BaseComponent
 
   def label_html_options
     {
-      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

data/app/components/lightning_ui_kit/file_input_component.html.erb

@@ -3,7 +3,7 @@
   <% 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 %>
@@ -13,7 +13,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/file_input_component.rb

@@ -51,7 +51,7 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
 
   def label_html_options
     {
-      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
@@ -68,7 +68,7 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
   end
 
   def file_input_classes
-    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg 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:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500 lui:data-disabled:cursor-not-allowed lui:data-disabled:border-zinc-950/20 lui:data-disabled:file:cursor-not-allowed lui:file:cursor-pointer lui:cursor-pointer lui:file:border-0 lui:file:px-[calc(--spacing(3.5)-1px)] lui:file:py-[calc(--spacing(2.5)-1px)] lui:file:sm:px-[calc(--spacing(3)-1px)] lui:file:sm:py-[calc(--spacing(1.5)-1px)] lui:file:mr-4 lui:file:bg-zinc-100 lui:file:rounded-l-[calc(var(--radius-lg)-1px)]"
+    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg 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-destructive-border lui:data-invalid:data-[hover]:border-destructive-border lui:data-disabled:cursor-not-allowed lui:data-disabled:border-border-hover lui:data-disabled:file:cursor-not-allowed lui:file:cursor-pointer lui:cursor-pointer lui:file:border-0 lui:file:px-[calc(--spacing(3.5)-1px)] lui:file:py-[calc(--spacing(2.5)-1px)] lui:file:sm:px-[calc(--spacing(3)-1px)] lui:file:sm:py-[calc(--spacing(1.5)-1px)] lui:file:mr-4 lui:file:bg-surface-tertiary lui:file:rounded-l-[calc(var(--radius-lg)-1px)]"
   end
 
   def file_input_html_options
@@ -91,6 +91,6 @@ class LightningUiKit::FileInputComponent < LightningUiKit::BaseComponent
   end
 
   def control_classes
-    "lui:relative lui:block lui:w-full 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:relative lui:block lui:w-full 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"
   end
 end

data/app/components/lightning_ui_kit/input_component.html.erb

@@ -3,7 +3,7 @@
   <% 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 %>
@@ -25,7 +25,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/input_component.rb

@@ -68,7 +68,7 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   end
 
   def input_classes
-    "lui:peer 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: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:peer 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-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-destructive-border lui:data-invalid:data-[hover]:border-destructive-border/60 lui:data-disabled:border-border-hover"
   end
 
   def input_html_options
@@ -117,24 +117,24 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   end
 
   def color_classes
-    "lui:h-10 lui:w-14 lui:cursor-pointer lui:appearance-none lui:rounded-lg lui:border lui:border-zinc-950/10 lui:bg-transparent lui:p-1 " \
-    "lui:data-[hover]:border-zinc-950/20 lui:focus:outline-none lui:focus:ring-2 lui:focus:ring-blue-500 " \
+    "lui:h-10 lui:w-14 lui:cursor-pointer lui:appearance-none lui:rounded-lg lui:border lui:border-border lui:bg-transparent lui:p-1 " \
+    "lui:data-[hover]:border-border-hover lui:focus:outline-none lui:focus:ring-2 lui:focus:ring-focus " \
     "[&::-webkit-color-swatch-wrapper]:lui:p-0 [&::-webkit-color-swatch]:lui:rounded-md [&::-webkit-color-swatch]:lui:border-0 " \
     "[&::-moz-color-swatch]:lui:rounded-md [&::-moz-color-swatch]:lui:border-0 " \
     "lui:disabled:opacity-50 lui:disabled:cursor-not-allowed"
   end
 
   def range_classes
-    "lui:w-full lui:h-2 lui:appearance-none lui:cursor-pointer lui:bg-zinc-200 lui:rounded-full lui:focus:outline-none " \
-    "[&::-webkit-slider-thumb]:lui:appearance-none [&::-webkit-slider-thumb]:lui:w-4 [&::-webkit-slider-thumb]:lui:h-4 [&::-webkit-slider-thumb]:lui:bg-blue-600 [&::-webkit-slider-thumb]:lui:rounded-full [&::-webkit-slider-thumb]:lui:cursor-pointer [&::-webkit-slider-thumb]:lui:shadow-sm [&::-webkit-slider-thumb]:lui:transition-transform [&::-webkit-slider-thumb]:hover:lui:scale-110 " \
-    "[&::-moz-range-thumb]:lui:appearance-none [&::-moz-range-thumb]:lui:w-4 [&::-moz-range-thumb]:lui:h-4 [&::-moz-range-thumb]:lui:bg-blue-600 [&::-moz-range-thumb]:lui:rounded-full [&::-moz-range-thumb]:lui:border-0 [&::-moz-range-thumb]:lui:cursor-pointer [&::-moz-range-thumb]:lui:shadow-sm [&::-moz-range-thumb]:lui:transition-transform [&::-moz-range-thumb]:hover:lui:scale-110 " \
-    "[&::-moz-range-track]:lui:bg-zinc-200 [&::-moz-range-track]:lui:rounded-full " \
+    "lui:w-full lui:h-2 lui:appearance-none lui:cursor-pointer lui:bg-surface-tertiary lui:rounded-full lui:focus:outline-none " \
+    "[&::-webkit-slider-thumb]:lui:appearance-none [&::-webkit-slider-thumb]:lui:w-4 [&::-webkit-slider-thumb]:lui:h-4 [&::-webkit-slider-thumb]:lui:bg-interactive [&::-webkit-slider-thumb]:lui:rounded-full [&::-webkit-slider-thumb]:lui:cursor-pointer [&::-webkit-slider-thumb]:lui:shadow-sm [&::-webkit-slider-thumb]:lui:transition-transform [&::-webkit-slider-thumb]:hover:lui:scale-110 " \
+    "[&::-moz-range-thumb]:lui:appearance-none [&::-moz-range-thumb]:lui:w-4 [&::-moz-range-thumb]:lui:h-4 [&::-moz-range-thumb]:lui:bg-interactive [&::-moz-range-thumb]:lui:rounded-full [&::-moz-range-thumb]:lui:border-0 [&::-moz-range-thumb]:lui:cursor-pointer [&::-moz-range-thumb]:lui:shadow-sm [&::-moz-range-thumb]:lui:transition-transform [&::-moz-range-thumb]:hover:lui:scale-110 " \
+    "[&::-moz-range-track]:lui:bg-surface-tertiary [&::-moz-range-track]:lui:rounded-full " \
     "lui:disabled:opacity-50 lui:disabled:cursor-not-allowed"
   end
 
   def label_html_options
     {
-      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
@@ -151,7 +151,7 @@ class LightningUiKit::InputComponent < LightningUiKit::BaseComponent
   end
 
   def control_classes
-    "lui:relative lui:block lui:w-full lui:before:pointer-events-none 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"
+    "lui:relative lui:block lui:w-full lui:before:pointer-events-none 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"
   end
 
   def standard_input_type?

data/app/components/lightning_ui_kit/layout_component.html.erb

@@ -1,4 +1,4 @@
-<div class="lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-white lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:lg:bg-zinc-100 lui:overflow-hidden" data-controller="lui-layout">
+<div class="lui:relative lui:isolate lui:flex lui:h-screen lui:w-full lui:bg-surface lui:max-lg:flex-col lui:max-lg:h-auto lui:max-lg:min-h-screen lui:lg:bg-surface-aside lui:overflow-hidden" data-controller="lui-layout">
   <%# Desktop Sidebar (fixed, hidden on mobile) %>
   <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:max-lg:hidden lui:z-10">
     <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
@@ -21,7 +21,7 @@
 
       <%# Footer at bottom of sidebar %>
       <% if footer? %>
-        <div class="lui:border-t lui:border-zinc-950/5">
+        <div class="lui:border-t lui:border-border">
           <%= footer %>
         </div>
       <% end %>
@@ -34,11 +34,11 @@
       <button
         type="button"
         aria-label="Open navigation"
-        class="lui:cursor-pointer lui:relative lui:flex lui:min-w-0 lui:items-center lui:gap-3 lui:rounded-lg lui:p-2 lui:text-left lui:text-base/6 lui:font-medium lui:text-zinc-950 lui:sm:text-sm/5 lui:hover:bg-zinc-950/5"
+        class="lui:cursor-pointer lui:relative lui:flex lui:min-w-0 lui:items-center lui:gap-3 lui:rounded-lg lui:p-2 lui:text-left lui:text-base/6 lui:font-medium lui:text-foreground lui:sm:text-sm/5 lui:hover:bg-surface-hover"
         data-action="lui-layout#openSidebar"
       >
         <span class="lui:absolute lui:top-1/2 lui:left-1/2 lui:size-[max(100%,2.75rem)] lui:-translate-x-1/2 lui:-translate-y-1/2 [@media(pointer:fine)]:lui:hidden" aria-hidden="true"></span>
-        <svg class="lui:size-6 lui:shrink-0 lui:fill-zinc-500 lui:sm:size-5" viewBox="0 0 20 20" aria-hidden="true">
+        <svg class="lui:size-6 lui:shrink-0 lui:fill-foreground-muted lui:sm:size-5" viewBox="0 0 20 20" aria-hidden="true">
           <path d="M2 6.75C2 6.33579 2.33579 6 2.75 6H17.25C17.6642 6 18 6.33579 18 6.75C18 7.16421 17.6642 7.5 17.25 7.5H2.75C2.33579 7.5 2 7.16421 2 6.75ZM2 13.25C2 12.8358 2.33579 12.5 2.75 12.5H17.25C17.6642 12.5 18 12.8358 18 13.25C18 13.6642 17.6642 14 17.25 14H2.75C2.33579 14 2 13.6642 2 13.25Z"></path>
         </svg>
       </button>
@@ -59,22 +59,22 @@
   >
     <%# Backdrop %>
     <div
-      class="lui:fixed lui:inset-0 lui:bg-zinc-950/25 lui:opacity-0 lui:transition-opacity lui:duration-300 lui:group-data-[open]:opacity-100"
+      class="lui:fixed lui:inset-0 lui:bg-surface-overlay lui:opacity-0 lui:transition-opacity lui:duration-300 lui:group-data-[open]:opacity-100"
       data-action="click->lui-layout#closeSidebar"
     ></div>
 
     <%# Mobile Sidebar Panel %>
-    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-white lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
+    <div class="lui:fixed lui:inset-y-0 lui:left-0 <%= sidebar_width_class %> lui:bg-surface-aside lui:-translate-x-full lui:transition-transform lui:duration-300 lui:ease-out lui:shadow-xl lui:group-data-[open]:translate-x-0">
       <nav class="lui:flex lui:h-full lui:min-h-0 lui:flex-col">
         <%# Close button %>
         <div class="lui:flex lui:items-center lui:justify-end lui:p-4">
           <button
             type="button"
             aria-label="Close navigation"
-            class="lui:cursor-pointer lui:rounded-lg lui:p-2 lui:hover:bg-zinc-950/5"
+            class="lui:cursor-pointer lui:rounded-lg lui:p-2 lui:hover:bg-surface-hover"
             data-action="lui-layout#closeSidebar"
           >
-            <svg class="lui:size-6 lui:fill-zinc-500" viewBox="0 0 20 20" aria-hidden="true">
+            <svg class="lui:size-6 lui:fill-foreground-muted" viewBox="0 0 20 20" aria-hidden="true">
               <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
             </svg>
           </button>
@@ -99,7 +99,7 @@
 
         <%# Footer %>
         <% if footer? %>
-          <div class="lui:border-t lui:border-zinc-950/5">
+          <div class="lui:border-t lui:border-border">
             <%= footer %>
           </div>
         <% end %>
@@ -109,7 +109,7 @@
 
   <%# Main Content Area %>
   <main class="lui:flex lui:flex-1 lui:flex-col lui:min-h-0 lui:pb-4 lui:lg:min-w-0 lui:lg:pt-4 lui:lg:pr-4 <%= main_padding_class %>">
-    <div class="lui:flex-1 lui:min-h-0 lui:p-6 lui:lg:rounded-lg lui:lg:bg-white lui:lg:p-10 lui:lg:shadow-xs lui:lg:ring-1 lui:lg:ring-zinc-950/5 lui:lg:overflow-y-auto">
+    <div class="lui:flex-1 lui:min-h-0 lui:p-6 lui:lg:rounded-lg lui:lg:bg-surface-secondary lui:lg:p-10 lui:lg:shadow-xs lui:lg:ring-1 lui:lg:ring-border-subtle lui:lg:overflow-y-auto">
       <div class="lui:mx-auto lui:max-w-6xl">
         <%= content %>
       </div>

data/app/components/lightning_ui_kit/modal_component.html.erb

@@ -1,15 +1,15 @@
 <%= tag.dialog(id: @id, open: @open, data:) do %>
-  <div class="lui:fixed lui:inset-0 lui:flex lui:w-screen lui:justify-center lui:overflow-y-auto lui:bg-zinc-950/25 lui:px-2 lui:py-2 lui:transition lui:duration-100 lui:focus:outline-0 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:px-6 lui:sm:py-8 lg:lui:px-8 lg:lui:py-16" aria-hidden="true" data-open=""></div>
+  <div class="lui:fixed lui:inset-0 lui:flex lui:w-screen lui:justify-center lui:overflow-y-auto lui:bg-surface-overlay lui:px-2 lui:py-2 lui:transition lui:duration-100 lui:focus:outline-0 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:px-6 lui:sm:py-8 lg:lui:px-8 lg:lui:py-16" aria-hidden="true" data-open=""></div>
   <div class="lui:fixed lui:inset-0 lui:w-screen lui:overflow-y-auto lui:pt-6 lui:sm:pt-0">
     <div class="lui:grid lui:min-h-full lui:grid-rows-[1fr_auto] lui:justify-items-center lui:sm:grid-rows-[1fr_auto_3fr] lui:sm:p-4" data-action="click->lui-modal#closeOnBackdrop">
-      <div class="lui:sm:max-w-3xl lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-white lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-zinc-950/10 lui:[--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition lui:duration-100 lui:will-change-transform lui:data-closed:translate-y-12 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:data-closed:translate-y-0 lui:sm:data-closed:data-enter:scale-95" data-open="" data-lui-modal-target="panel">
+      <div class="lui:sm:max-w-3xl lui:row-start-2 lui:w-full lui:min-w-0 lui:rounded-t-3xl lui:bg-surface-secondary lui:p-(--gutter) lui:ring-1 lui:shadow-lg lui:ring-border lui:[--gutter:--spacing(8)] lui:sm:mb-auto lui:sm:rounded-2xl lui:forced-colors:outline lui:transition lui:duration-100 lui:will-change-transform lui:data-closed:translate-y-12 lui:data-closed:opacity-0 lui:data-enter:ease-out lui:data-leave:ease-in lui:sm:data-closed:translate-y-0 lui:sm:data-closed:data-enter:scale-95" data-open="" data-lui-modal-target="panel">
         <% if @title %>
-          <h2 class="lui:text-lg/6 lui:font-semibold lui:text-balance lui:text-zinc-950 lui:sm:text-base/6" data-open="">
+          <h2 class="lui:text-lg/6 lui:font-semibold lui:text-balance lui:text-foreground lui:sm:text-base/6" data-open="">
             <%= @title %>
           </h2>
         <% end %>
         <% if @description %>
-          <p data-slot="text" data-open="" class="lui:mt-2 lui:text-pretty lui:text-base/6 lui:text-zinc-500 lui:sm:text-sm/6">
+          <p data-slot="text" data-open="" class="lui:mt-2 lui:text-pretty lui:text-base/6 lui:text-foreground-muted lui:sm:text-sm/6">
           <%= @description %>
           </p>
         <% end %>

data/app/components/lightning_ui_kit/pagination_component.html.erb

@@ -1,20 +1,20 @@
 <%= tag.div(class: "lui:items-center lui:gap-x-2 lui:sm:flex") do %>
   <% if @with_arrows %>
-    <%= link_to(url(@current_page - 1), class: link_classes, data: data(disabled: @current_page == 1)) do %>
+    <%= link_to(url(@current_page - 1), class: arrow_link_classes, data: data(disabled: @current_page == 1)) do %>
       <%= heroicon("chevron-left", options: { class: "w-5 h-5" }) %>
     <% end %>
   <% end %>
 
   <% pages_with_gaps.each do |page| %>
     <% if page == :gap %>
-      <span aria-hidden="true" class="lui:w-[2.25rem] lui:text-center lui:text-sm/6 lui:font-semibold lui:text-zinc-950 lui:select-none">…</span>
+      <span aria-hidden="true" class="lui:w-[2.25rem] lui:text-center lui:text-sm/6 lui:font-semibold lui:text-foreground lui:select-none">…</span>
     <% else %>
       <%= link_to(page, url(page), class: link_classes, data: data(active: @current_page == page)) %>
     <% end %>
   <% end %>
 
   <% if @with_arrows %>
-    <%= link_to(url(@current_page + 1), class: link_classes, data: data(disabled: @current_page == @total_pages)) do %>
+    <%= link_to(url(@current_page + 1), class: arrow_link_classes, data: data(disabled: @current_page == @total_pages)) do %>
       <%= heroicon("chevron-right", options: {class: "w-5 h-5" }) %>
     <% end %>
   <% end %>

data/app/components/lightning_ui_kit/pagination_component.rb

@@ -1,10 +1,11 @@
 class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
-  def initialize(current_page:, total_pages:, path:, page_param: "page", with_arrows: false, **options)
+  def initialize(current_page:, total_pages:, path:, page_param: "page", params: {}, with_arrows: false, **options)
     @current_page = current_page
     @total_pages = total_pages
     @with_arrows = with_arrows
     @path = path
     @page_param = page_param
+    @params = params
     @options = options
   end
 
@@ -18,9 +19,16 @@ class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
   def link_classes
     "lui:min-w-[2.25rem] lui:flex lui:items-center lui:justify-center lui:rounded-lg lui:border lui:text-base/6 lui:font-semibold 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:sm:text-sm/6 \
-     lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2 lui:focus:outline-blue-500 \
-     lui:data-[disabled]:opacity-50 lui:data-[disabled]:pointer-events-none lui:border-transparent lui:text-zinc-950 \
-     lui:data-[active]:bg-zinc-950/5 lui:hover:bg-zinc-950/5"
+     lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2 lui:focus:outline-focus \
+     lui:data-[disabled]:opacity-50 lui:data-[disabled]:pointer-events-none lui:border-transparent lui:text-foreground \
+     lui:data-[active]:bg-surface-hover lui:hover:bg-surface-hover"
+  end
+
+  def arrow_link_classes
+    "lui:min-w-[2.25rem] lui:aspect-square lui:flex lui:items-center lui:justify-center lui:rounded-lg lui:border \
+     lui:focus:outline-hidden lui:focus:outline lui:focus:outline-2 lui:focus:outline-offset-2 lui:focus:outline-focus \
+     lui:data-[disabled]:opacity-50 lui:data-[disabled]:pointer-events-none lui:border-transparent lui:text-foreground \
+     lui:hover:bg-surface-hover"
   end
 
   def pages_with_gaps
@@ -36,6 +44,7 @@ class LightningUiKit::PaginationComponent < LightningUiKit::BaseComponent
   end
 
   def url(page)
-    "#{@path}?#{@page_param}=#{page}"
+    query = @params.merge(@page_param => page).to_query
+    "#{@path}?#{query}"
   end
 end

data/app/components/lightning_ui_kit/select_component.html.erb

@@ -1,14 +1,14 @@
 <%= tag.div data:, class: classes do %>
   <%= render_label %>
   <% 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" <%= "data-disabled=true" if @disabled %>>
+    <p data-slot="description" class="lui:text-base/6 lui:text-foreground-muted lui:data-disabled:opacity-50 lui:sm:text-sm/6" <%= "data-disabled=true" if @disabled %>>
       <%= @description %>
     </p>
   <% end %>
   <span data-slot="control" class="<%= control_classes %>">
     <%= render_select %>
     <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 lui:forced-colors:stroke-[CanvasText]" viewBox="0 0 16 16" aria-hidden="true" fill="none">
+      <svg class="lui:size-5 lui:stroke-foreground-muted lui:sm:size-4 lui:forced-colors:stroke-[CanvasText]" 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>
@@ -17,7 +17,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/select_component.rb

@@ -55,7 +55,7 @@ class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
 
   def label_html_options
     {
-      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
@@ -72,11 +72,11 @@ class LightningUiKit::SelectComponent < LightningUiKit::BaseComponent
   end
 
   def select_classes
-    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:py-[calc(--spacing(2.5)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:pr-[calc(--spacing(10)-1px)] lui:pl-[calc(--spacing(3.5)-1px)] lui:sm:pr-[calc(--spacing(9)-1px)] lui:sm:pl-[calc(--spacing(3)-1px)] lui:[&_optgroup]:font-semibold 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:bg-transparent lui:focus:outline-hidden lui:data-invalid:border-red-500 lui:data-invalid:data-[hover]:border-red-500 lui:data-disabled:border-zinc-950/20 lui:data-disabled:opacity-100"
+    "lui:relative lui:block lui:w-full lui:appearance-none lui:rounded-lg lui:py-[calc(--spacing(2.5)-1px)] lui:sm:py-[calc(--spacing(1.5)-1px)] lui:pr-[calc(--spacing(10)-1px)] lui:pl-[calc(--spacing(3.5)-1px)] lui:sm:pr-[calc(--spacing(9)-1px)] lui:sm:pl-[calc(--spacing(3)-1px)] lui:[&_optgroup]:font-semibold 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-destructive-border lui:data-invalid:data-[hover]:border-destructive-border lui:data-disabled:border-border-hover lui:data-disabled:opacity-100"
   end
 
   def control_classes
-    "lui:relative lui:block lui:w-full lui:before:pointer-events-none 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-inset lui:focus-within:after:ring-2 lui: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:relative lui:block lui:w-full lui:before:pointer-events-none 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-inset lui:focus-within:after:ring-2 lui: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"
   end
 
   def select_html_options

data/app/components/lightning_ui_kit/sidebar_link_component.html.erb

@@ -1,4 +1,4 @@
-<%= link_to @url, class: classes, data: data do %>
+<%= link_to @url, class: "lui:group #{classes}", data: data do %>
   <% if @icon %>
     <%= heroicon(@icon, options: { class: icon_classes }) %>
   <% end %>

data/app/components/lightning_ui_kit/sidebar_link_component.rb

@@ -1,28 +1,32 @@
 class LightningUiKit::SidebarLinkComponent < LightningUiKit::BaseComponent
-  def initialize(title:, url:, icon: nil, current: false, **options)
+  def initialize(title:, url:, icon: nil, current: false, animate_icon: false, **options)
     @title = title
     @url = url
     @icon = icon
     @current = current
+    @animate_icon = animate_icon
     @options = options
   end
 
   def classes
-    base_classes = "lui:flex lui:items-center lui:gap-3 lui:rounded-lg lui:px-3 lui:py-2 lui:text-sm lui:transition-colors"
+    base_classes = "lui:relative lui:flex lui:items-center lui:gap-3 lui:rounded-lg lui:px-3 lui:py-2 lui:text-sm lui:transition-all lui:duration-150 lui:ease-out"
 
     if @current
-      merge_classes([base_classes, "lui:bg-zinc-950/5 lui:text-zinc-950 lui:font-semibold", @options[:class]].compact.join(" "))
+      merge_classes([base_classes, "lui:bg-surface-hover lui:text-foreground lui:font-semibold", @options[:class]].compact.join(" "))
     else
-      merge_classes([base_classes, "lui:text-zinc-600 lui:hover:bg-zinc-950/5 lui:hover:text-zinc-950", @options[:class]].compact.join(" "))
+      merge_classes([base_classes, "lui:text-foreground-secondary lui:hover:bg-surface-hover lui:hover:text-foreground", @options[:class]].compact.join(" "))
     end
   end
 
   def icon_classes
-    if @current
-      "lui:size-5 lui:shrink-0 lui:text-zinc-600"
+    base = if @current
+      "lui:size-5 lui:shrink-0 lui:text-foreground"
     else
-      "lui:size-5 lui:shrink-0 lui:text-zinc-400"
+      "lui:size-5 lui:shrink-0 lui:text-foreground-faint lui:transition-colors lui:duration-150 lui:group-hover:text-foreground-secondary"
     end
+
+    base += " lui:group-hover:animate-icon-bounce" if @animate_icon
+    base
   end
 
   def data

data/app/components/lightning_ui_kit/sidebar_section_component.rb

@@ -11,6 +11,6 @@ class LightningUiKit::SidebarSectionComponent < LightningUiKit::BaseComponent
   end
 
   def title_classes
-    "lui:px-3 lui:py-2 lui:text-xs lui:font-medium lui:text-zinc-400 lui:uppercase lui:tracking-wider"
+    "lui:px-3 lui:py-2 lui:text-[0.6875rem] lui:font-semibold lui:text-foreground-faint lui:uppercase lui:tracking-widest"
   end
 end

data/app/components/lightning_ui_kit/skeleton_component.html.erb

@@ -1,10 +1,10 @@
 <div role="status" class="lui:animate-pulse">
   <% if @with_title %>
-    <h3 class="lui:h-3 lui:bg-gray-300 lui:rounded-full lui:w-48 lui:mb-4"></h3>
+    <h3 class="lui:h-3 lui:bg-surface-tertiary lui:rounded-full lui:w-48 lui:mb-4"></h3>
   <% end %>
   <div class="lui:space-y-2.5">
     <% @lines.times do %>
-      <p class="lui:h-2 lui:bg-gray-300 lui:rounded-full"></p>
+      <p class="lui:h-2 lui:bg-surface-tertiary lui:rounded-full"></p>
     <% end %>
   </div>
 </div>

data/app/components/lightning_ui_kit/spinner_component.html.erb

@@ -1,10 +1,11 @@
-<svg class="lui:animate-spin lui:border-zinc-500"
+<svg class="lui:animate-spin"
   xmlns="http://www.w3.org/2000/svg" width="18" height="18"
-  viewBox="0 0 30 30" fill="none">
+  viewBox="0 0 30 30" fill="none"
+  style="--lui-spinner-primary: var(--lui-theme-spinner-primary); --lui-spinner-secondary: var(--lui-theme-spinner-secondary);">
   <path fill-rule="evenodd" clip-rule="evenodd"
   d="M14.4304 0.0323927C14.0002 0.172039 13.7522 0.420298 13.6321 0.825659C13.5643 1.05258 13.5527 1.58013 13.5527 4.33426C13.5527 7.98251 13.5488 7.93596 13.9208 8.30835C14.4187 8.80487 15.5812 8.80487 16.0792 8.30835C16.4511 7.93596 16.4473 7.98251 16.4473 4.33426C16.4473 0.804324 16.4415 0.742259 16.1547 0.400903C15.9145 0.115792 15.6568 0.0207556 15.0775 0.00523939C14.8614 -0.00695113 14.6447 0.00214369 14.4304 0.0323927ZM24.4026 3.89593C24.1643 4.00648 23.7574 4.38857 21.816 6.33779C20.0316 8.12797 19.4872 8.70595 19.4 8.89602C19.3276 9.05362 19.2902 9.2251 19.2905 9.39857C19.2909 9.57205 19.3289 9.74338 19.4019 9.9007C19.5376 10.1916 19.9832 10.6494 20.2835 10.8065C20.5877 10.9655 21.0391 10.9636 21.3549 10.8026C21.6785 10.6358 26.1541 6.15547 26.3207 5.83157C26.4001 5.66482 26.4417 5.4826 26.4427 5.29788C26.4437 5.11317 26.404 4.93051 26.3265 4.7629C26.1121 4.40396 25.8092 4.10611 25.4469 3.89787C25.2865 3.81116 25.1072 3.7656 24.925 3.76526C24.7427 3.76492 24.5633 3.80982 24.4026 3.89593ZM22.2559 13.5858C21.9939 13.6581 21.7571 13.8017 21.5719 14.0009C21.3065 14.3597 21.2232 15.0889 21.3898 15.6029C21.5022 15.952 21.785 16.2352 22.1338 16.3477C22.3702 16.4253 22.7557 16.435 25.6406 16.435C28.4093 16.435 28.9189 16.4233 29.1475 16.3554C29.719 16.1848 29.998 15.7348 30 14.9842C30 14.2375 29.7152 13.7894 29.1242 13.611C28.9247 13.5509 28.2989 13.5392 25.6484 13.5431C23.8698 13.547 22.343 13.5664 22.2559 13.5858ZM20.3339 19.3811C20.0277 19.5207 19.5763 19.963 19.4194 20.2772C19.3393 20.4342 19.2957 20.6073 19.2916 20.7836C19.2876 20.9599 19.3233 21.1348 19.3961 21.2954C19.5395 21.6154 24.0422 26.1384 24.3968 26.3188C24.8986 26.5767 25.4139 26.4507 25.9332 25.9425C26.4447 25.4421 26.5803 24.899 26.3207 24.3928C26.1405 24.0379 21.6223 19.5304 21.3026 19.3869C21.1498 19.3207 20.9853 19.286 20.8188 19.285C20.6524 19.284 20.4874 19.3167 20.3339 19.3811ZM14.5059 21.342C14.2442 21.4158 14.0076 21.56 13.822 21.759C13.5546 22.1197 13.5527 22.1449 13.5527 25.6322C13.5527 28.4096 13.5643 28.9197 13.6321 29.1485C13.8026 29.7207 14.254 30 15 30C15.7459 30 16.1973 29.7207 16.3678 29.1485C16.488 28.7374 16.486 22.5018 16.364 22.143C16.3264 21.9983 16.2577 21.8636 16.1627 21.7484C16.0676 21.6331 15.9485 21.5401 15.8137 21.4758C15.6006 21.3594 15.4766 21.3303 15.1104 21.3167C14.9086 21.3046 14.706 21.313 14.5059 21.342Z"
-  fill="#9F9FA9" />
+  fill="var(--lui-spinner-primary)" />
   <path fill-rule="evenodd" clip-rule="evenodd"
   d="M4.83402 3.86487C4.5279 4.00452 4.07647 4.44673 3.91953 4.76093C3.83948 4.918 3.79581 5.09111 3.79179 5.2674C3.78776 5.44369 3.82348 5.61861 3.89628 5.77918C4.03965 6.0992 8.54237 10.6222 8.89693 10.8026C9.39873 11.0605 9.91411 10.9344 10.4334 10.4263C10.9448 9.92589 11.0805 9.38282 10.8208 8.8766C10.6407 8.52167 6.12245 4.01421 5.80276 3.87069C5.65 3.80447 5.48545 3.76982 5.31899 3.76882C5.15252 3.76782 4.98757 3.80049 4.83402 3.86487ZM0.85443 13.6129C0.282873 13.7933 0 14.2491 0 14.9842C0.00193748 15.7348 0.280935 16.1847 0.852493 16.3554C1.08112 16.4233 1.59067 16.4349 4.35934 16.4349C7.24425 16.4349 7.62981 16.4252 7.86618 16.3477C8.03981 16.2905 8.19761 16.1934 8.32684 16.064C8.45607 15.9347 8.55313 15.7767 8.61018 15.6029C8.7768 15.0889 8.69349 14.3596 8.42805 13.9989C8.32166 13.8831 8.19656 13.7861 8.058 13.7118L7.79256 13.5644L4.4349 13.5528C1.73211 13.545 1.03268 13.5567 0.85443 13.6129ZM8.90274 19.4121C8.66443 19.5227 8.25756 19.9047 6.3162 21.854C4.53177 23.6442 3.98734 24.2221 3.90016 24.4122C3.82771 24.5698 3.79037 24.7413 3.7907 24.9148C3.79104 25.0882 3.82904 25.2596 3.90209 25.4169C4.03772 25.7078 4.48334 26.1655 4.78365 26.3226C5.08783 26.4817 5.53927 26.4797 5.85508 26.3188C6.17864 26.152 10.6542 21.6717 10.8208 21.3478C10.9002 21.181 10.9419 20.9988 10.9429 20.8141C10.9439 20.6294 10.9042 20.4467 10.8267 20.2791C10.6122 19.9201 10.3094 19.6223 9.94704 19.414C9.7867 19.3273 9.60738 19.2818 9.42513 19.2814C9.24289 19.2811 9.06341 19.326 8.90274 19.4121Z"
-  fill="#D1D5DB" />
+  fill="var(--lui-spinner-secondary)" />
 </svg>

data/app/components/lightning_ui_kit/switch_component.html.erb

@@ -3,14 +3,14 @@
   <% 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 %>
   <% 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/switch_component.rb

@@ -53,13 +53,13 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
   def button_classes
     "lui:group lui:relative lui:isolate lui:inline-flex lui:h-6 lui:w-10 lui:cursor-default lui:rounded-full " \
     "lui:p-[3px] lui:sm:h-5 lui:sm:w-8 lui:transition lui:duration-200 lui:ease-in-out " \
-    "lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] lui:bg-zinc-200 lui:ring-1 lui:ring-black/5 lui:ring-inset " \
+    "lui:forced-colors:outline lui:forced-colors:[--switch-bg:Highlight] lui:bg-surface-tertiary lui:ring-1 lui:ring-black/5 lui:ring-inset " \
     "lui:data-checked:bg-(--switch-bg) lui:data-checked:ring-(--switch-bg-ring) lui:focus:outline-hidden lui:data-focus:outline-2 " \
-    "lui:data-focus:outline-offset-2 lui:data-focus:outline-blue-500 lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring) " \
-    "lui:data-disabled:bg-zinc-200 lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-zinc-200 lui:data-disabled:data-checked:ring-black/5 " \
-    "lui:[--switch-bg-ring:var(--lui-color-zinc-950)]/90 " \
-    "lui:[--switch-bg:var(--lui-color-zinc-900)] " \
-    "lui:[--switch-ring:var(--lui-color-zinc-950)]/90 " \
+    "lui:data-focus:outline-offset-2 lui:data-focus:outline-focus lui:hover:ring-black/15 lui:hover:data-checked:ring-(--switch-bg-ring) " \
+    "lui:data-disabled:bg-surface-tertiary lui:data-disabled:opacity-50 lui:data-disabled:data-checked:bg-surface-tertiary lui:data-disabled:data-checked:ring-black/5 " \
+    "lui:[--switch-bg-ring:var(--lui-theme-border-invert)] " \
+    "lui:[--switch-bg:var(--lui-theme-surface-invert)] " \
+    "lui:[--switch-ring:var(--lui-theme-border-invert)] " \
     "lui:[--switch-shadow:var(--lui-color-black)]/10 " \
     "lui:[--switch:white]"
   end
@@ -97,7 +97,7 @@ class LightningUiKit::SwitchComponent < LightningUiKit::BaseComponent
   def render_label
     return unless render_label?
 
-    tag.label(effective_label, id: label_id, class: "lui:text-base/6 lui:text-zinc-950 lui:select-none lui:data-disabled:opacity-50 lui:sm:text-sm/6", data: label_data)
+    tag.label(effective_label, id: label_id, 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
 
   def render_hidden_field

data/app/components/lightning_ui_kit/table_component.html.erb

@@ -1,12 +1,12 @@
-<div class="lui:border-zinc-950/5 lui:border lui:rounded-lg">
-  <table class="lui:min-w-full lui:text-left lui:text-sm/6 lui:text-zinc-950 lui:border-collapse lui:border-inherit">
-    <thead class="lui:text-zinc-500">
+<div class="lui:border-border-subtle lui:border lui:rounded-lg">
+  <table class="lui:min-w-full lui:text-left lui:text-sm/6 lui:text-foreground lui:border-collapse lui:border-inherit">
+    <thead class="lui:text-foreground-muted">
       <tr class="">
         <% columns.each do |column| %>
-          <th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
+          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= column.title %></th>
         <% end %>
         <% if actions.present? %>
-          <th class="lui:border-b lui:border-b-zinc-950/10 lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
+          <th class="lui:border-b lui:border-b-border lui:px-4 lui:py-2 lui:font-medium"><%= @actions_title %></th>
         <% end %>
       </tr>
     </thead>
@@ -21,12 +21,12 @@
         <% @data.each do |row| %>
           <tr class="lui:group">
             <% columns.each do |column| %>
-              <td class="lui:p-4 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
+              <td class="lui:p-4 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
                 <%= column.call(row) %>
               </td>
             <% end %>
             <% if actions.present? %>
-              <td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-zinc-950/5 lui:group-last:border-b-0">
+              <td class="lui:p-4 lui:flex lui:gap-3 lui:border-b lui:border-border-subtle lui:group-last:border-b-0">
                 <% actions.each do |action| %>
                   <%= action.call(row) %>
                 <% end %>

data/app/components/lightning_ui_kit/text_component.rb

@@ -5,6 +5,6 @@ class LightningUiKit::TextComponent < LightningUiKit::BaseComponent
   end
 
   def classes
-    merge_classes(["lui:text-zinc-600 lui:text-#{@size}", @options[:class]].compact.join(" "))
+    merge_classes(["lui:text-foreground-secondary lui:text-#{@size}", @options[:class]].compact.join(" "))
   end
 end