lightning_ui_kit 0.3.1 → 0.3.3

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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"

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 %>