keystone_ui-styles 0.6.0 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ad7572e17ad6ad7c6e9b1fbf6ee4f4767ce5e1e5089556c0f468356b4e9ad34
-  data.tar.gz: df35a5ae5770ca2f9c7462b04ceace38656ae1344abbbe662945b4dc1314da9c
+  metadata.gz: 999667488496cabe8590bd60a9050059741d67241c47a9b20d4be91e65540b99
+  data.tar.gz: 033367d3f87be328fdc4ab34cf4c352dfd8ddf6241356a00ae0329659658699d
 SHA512:
-  metadata.gz: 9334339a02553548b8927756437f53902489bc6cf7adb0ee19d8597a1c254c808e04e03aa1510e1add5f9ce239cc8f4daf811d60064d4e61823b4ee83994a151
-  data.tar.gz: e5524b27ca4d6ff98a1bfe7eb0ab10043fed2e4e32239b10e0466b57f6cf3c63b527e7287ccae0a30a8f9b7b8decc4f19362e9422c18a2941664775599a220e4
+  metadata.gz: 4adcf0c6ade9bb69af13e1a1720ddb2d9728ac152f914f2f62b66090fa47b7d2bce312f8af49d7ff779fcb9a6809aa7a6eaacf3fd78db2e2c47f4141bb262954
+  data.tar.gz: a2bc95f60eab82bf434e21c6ffdb838459a1382600e1869ab6f2639b3b81ef785afcb5620a5a97b79d5315a51b0c9de5d4cd0ae82a2af111ceacd7144b9c4432

data/app/assets/tailwind/keystone_ui_styles/engine.css

@@ -87,17 +87,17 @@
     --ks-color-danger-hover-dark: var(--color-red-500);
     --ks-color-on-fill-dark: var(--color-white);
     --ks-color-surface: var(--color-white);
-    --ks-color-surface-dark: var(--color-zinc-900);
-    --ks-color-border: var(--color-gray-200);
-    --ks-color-border-dark: var(--color-zinc-700);
-    --ks-color-border-control: var(--color-gray-300);
-    --ks-color-border-control-dark: var(--color-zinc-700);
-    --ks-color-text: var(--color-gray-900);
+    --ks-color-surface-dark: var(--color-surface-900);
+    --ks-color-border: var(--color-surface-200);
+    --ks-color-border-dark: var(--color-surface-700);
+    --ks-color-border-control: var(--ks-color-border-strong);
+    --ks-color-border-control-dark: var(--ks-color-border-strong-dark);
+    --ks-color-text: var(--color-surface-900);
     --ks-color-text-dark: var(--color-white);
-    --ks-color-text-label: var(--color-gray-700);
-    --ks-color-text-label-dark: var(--color-gray-300);
-    --ks-color-text-muted: var(--color-gray-500);
-    --ks-color-text-muted-dark: var(--color-gray-400);
+    --ks-color-text-label: var(--color-surface-700);
+    --ks-color-text-label-dark: var(--color-surface-300);
+    --ks-color-text-muted: var(--color-surface-500);
+    --ks-color-text-muted-dark: var(--color-surface-400);
     --ks-font-weight-heading: var(--font-weight-semibold);
     --ks-radius-surface: var(--radius-lg);
     --ks-shadow-surface: var(--shadow-sm);
@@ -134,39 +134,39 @@
     --ks-font-weight-medium: var(--font-weight-medium);
     --ks-color-backdrop: color-mix(in oklab, var(--color-black) 60%, transparent);
     --ks-color-overlay: var(--color-white);
-    --ks-color-overlay-dark: var(--color-zinc-800);
-    --ks-color-text-heading: var(--color-gray-900);
-    --ks-color-text-heading-dark: var(--color-gray-200);
-    --ks-color-close: var(--color-gray-400);
+    --ks-color-overlay-dark: var(--color-surface-800);
+    --ks-color-text-heading: var(--ks-color-text);
+    --ks-color-text-heading-dark: var(--ks-color-text-dark);
+    --ks-color-close: var(--ks-color-icon);
     --ks-color-close-hover: var(--color-gray-600);
     --ks-color-close-hover-dark: var(--color-gray-200);
     --ks-color-ring: color-mix(in oklab, var(--color-black) 5%, transparent);
     --ks-color-ring-dark: color-mix(in oklab, var(--color-white) 10%, transparent);
-    --ks-color-hover: var(--color-gray-50);
-    --ks-color-hover-dark: var(--color-zinc-800);
-    --ks-color-border-strong: var(--color-gray-300);
-    --ks-color-border-strong-dark: var(--color-zinc-600);
+    --ks-color-hover: var(--color-surface-50);
+    --ks-color-hover-dark: var(--color-surface-800);
+    --ks-color-border-strong: var(--color-surface-300);
+    --ks-color-border-strong-dark: var(--color-surface-600);
     --ks-color-focus: var(--color-accent-500);
-    --ks-color-hover-raised: var(--color-gray-50);
-    --ks-color-hover-raised-dark: var(--color-zinc-700);
-    --ks-color-border-choice: var(--color-surface-300);
-    --ks-color-text-choice: var(--color-surface-900);
-    --ks-color-text-choice-dark: var(--color-surface-100);
-    --ks-color-text-choice-muted: var(--color-surface-500);
-    --ks-color-text-choice-muted-dark: var(--color-surface-400);
+    --ks-color-hover-raised: var(--ks-color-hover);
+    --ks-color-hover-raised-dark: var(--ks-color-hover-dark);
+    --ks-color-border-choice: var(--ks-color-border-strong);
+    --ks-color-text-choice: var(--ks-color-text);
+    --ks-color-text-choice-dark: var(--ks-color-text-dark);
+    --ks-color-text-choice-muted: var(--ks-color-text-muted);
+    --ks-color-text-choice-muted-dark: var(--ks-color-text-muted-dark);
     --ks-color-selected-border: var(--color-accent-500);
     --ks-color-selected: var(--color-accent-50);
     --ks-color-selected-dark: var(--color-zinc-800);
-    --ks-color-text-option: var(--color-gray-900);
-    --ks-color-text-option-dark: var(--color-gray-100);
-    --ks-color-text-option-muted: var(--color-surface-500);
-    --ks-color-text-option-muted-dark: var(--color-gray-400);
+    --ks-color-text-option: var(--ks-color-text);
+    --ks-color-text-option-dark: var(--ks-color-text-dark);
+    --ks-color-text-option-muted: var(--ks-color-text-muted);
+    --ks-color-text-option-muted-dark: var(--ks-color-text-muted-dark);
     --ks-color-drop-active: var(--color-accent-50);
     --ks-color-drop-active-dark: color-mix(in oklab, var(--color-accent-900) 10%, transparent);
-    --ks-color-icon: var(--color-gray-400);
-    --ks-color-icon-dark: var(--color-gray-500);
-    --ks-color-text-secondary: var(--color-gray-600);
-    --ks-color-text-secondary-dark: var(--color-gray-400);
+    --ks-color-icon: var(--color-surface-400);
+    --ks-color-icon-dark: var(--color-surface-500);
+    --ks-color-text-secondary: var(--color-surface-600);
+    --ks-color-text-secondary-dark: var(--color-surface-400);
     --ks-color-link: var(--color-accent-600);
     --ks-color-link-dark: var(--color-accent-400);
     --ks-color-link-hover: var(--color-accent-500);
@@ -178,36 +178,36 @@
     --ks-color-info-600: var(--color-accent-600);
     --ks-color-danger-500: var(--color-red-500);
     --ks-color-hover-border: color-mix(in oklab, var(--color-accent-500) 50%, transparent);
-    --ks-color-border-subtle: var(--color-surface-200);
-    --ks-color-border-subtle-dark: var(--color-surface-700);
-    --ks-color-fill-muted: var(--color-surface-50);
-    --ks-color-fill-muted-dark: var(--color-surface-800);
-    --ks-color-text-display: var(--color-surface-900);
-    --ks-color-text-display-dark: var(--color-white);
-    --ks-color-text-display-muted: var(--color-surface-500);
-    --ks-color-text-display-muted-dark: var(--color-surface-400);
-    --ks-color-raised: var(--color-white);
-    --ks-color-raised-dark: var(--color-surface-800);
+    --ks-color-border-subtle: var(--ks-color-border);
+    --ks-color-border-subtle-dark: var(--ks-color-border-dark);
+    --ks-color-fill-muted: var(--ks-color-hover);
+    --ks-color-fill-muted-dark: var(--ks-color-hover-dark);
+    --ks-color-text-display: var(--ks-color-text);
+    --ks-color-text-display-dark: var(--ks-color-text-dark);
+    --ks-color-text-display-muted: var(--ks-color-text-muted);
+    --ks-color-text-display-muted-dark: var(--ks-color-text-muted-dark);
+    --ks-color-raised: var(--ks-color-overlay);
+    --ks-color-raised-dark: var(--ks-color-overlay-dark);
     --ks-color-tint: color-mix(in oklab, var(--color-accent-500) 10%, transparent);
     --ks-color-tint-border: color-mix(in oklab, var(--color-accent-500) 20%, transparent);
     --ks-shadow-surface-dark: 0 0 #0000;
-    --ks-color-table-head: var(--color-gray-50);
-    --ks-color-table-head-dark: color-mix(in oklab, var(--color-gray-800) 75%, transparent);
-    --ks-color-table-body: var(--color-white);
-    --ks-color-table-body-dark: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
-    --ks-color-divider: var(--color-gray-200);
-    --ks-color-divider-dark: color-mix(in oklab, var(--color-white) 10%, transparent);
+    --ks-color-table-head: var(--ks-color-hover);
+    --ks-color-table-head-dark: var(--ks-color-hover-dark);
+    --ks-color-table-body: var(--ks-color-surface);
+    --ks-color-table-body-dark: var(--ks-color-surface-dark);
+    --ks-color-divider: var(--ks-color-border);
+    --ks-color-divider-dark: var(--ks-color-border-dark);
     --ks-color-code: var(--color-surface-900);
     --ks-color-code-dark: var(--color-black);
     --ks-color-text-code: var(--color-surface-100);
-    --ks-color-text-body: var(--color-surface-600);
-    --ks-color-text-body-dark: var(--color-surface-400);
-    --ks-color-icon-soft: var(--color-surface-400);
-    --ks-color-track: var(--color-surface-200);
-    --ks-color-track-dark: var(--color-surface-700);
+    --ks-color-text-body: var(--ks-color-text-secondary);
+    --ks-color-text-body-dark: var(--ks-color-text-secondary-dark);
+    --ks-color-icon-soft: var(--ks-color-icon);
+    --ks-color-track: var(--ks-color-border);
+    --ks-color-track-dark: var(--ks-color-border-dark);
     --ks-color-meter: var(--color-accent-500);
-    --ks-color-text-meter-label: var(--color-surface-700);
-    --ks-color-text-meter-label-dark: var(--color-surface-300);
+    --ks-color-text-meter-label: var(--ks-color-text-label);
+    --ks-color-text-meter-label-dark: var(--ks-color-text-label-dark);
     --ks-color-funnel-accent: var(--color-accent-500);
     --ks-color-funnel-sky: var(--color-sky-500);
     --ks-color-funnel-violet: var(--color-violet-500);
@@ -222,28 +222,28 @@
     --ks-color-pipeline-box: var(--color-surface-900);
     --ks-color-pipeline-label: var(--color-surface-500);
     --ks-color-pipeline-amber: var(--color-amber-400);
-    --ks-color-nav: var(--base-bg-low, var(--color-white));
-    --ks-color-nav-dark: var(--base-bg-low, var(--color-zinc-900));
-    --ks-color-nav-border: var(--base-border-tertiary, var(--color-gray-200));
-    --ks-color-nav-border-dark: var(--base-border-tertiary, var(--color-zinc-700));
-    --ks-color-nav-text: var(--base-text-tertiary, var(--color-gray-500));
-    --ks-color-nav-text-dark: var(--base-text-tertiary, var(--color-gray-400));
-    --ks-color-nav-text-hover: var(--base-text-secondary, var(--color-gray-700));
-    --ks-color-nav-text-hover-dark: var(--base-text-secondary, var(--color-gray-300));
-    --ks-color-nav-active: var(--text-primary, var(--color-accent-600));
-    --ks-color-nav-active-dark: var(--text-primary, var(--color-accent-400));
-    --ks-color-nav-link: var(--base-text, var(--color-gray-900));
-    --ks-color-nav-link-dark: var(--base-text, var(--color-white));
-    --ks-color-nav-indicator: var(--border-primary, var(--color-accent-600));
-    --ks-color-nav-indicator-dark: var(--border-primary, var(--color-accent-400));
-    --ks-color-nav-menu-mobile: var(--base-bg-base, var(--color-white));
-    --ks-color-nav-menu-mobile-dark: var(--base-bg-base, var(--color-zinc-900));
-    --ks-color-nav-hover: var(--base-bg-hover, var(--color-gray-50));
-    --ks-color-nav-hover-dark: var(--base-bg-hover, var(--color-zinc-800));
+    --ks-color-nav: var(--base-bg-low, var(--ks-color-surface));
+    --ks-color-nav-dark: var(--base-bg-low, var(--ks-color-surface-dark));
+    --ks-color-nav-border: var(--base-border-tertiary, var(--ks-color-border));
+    --ks-color-nav-border-dark: var(--base-border-tertiary, var(--ks-color-border-dark));
+    --ks-color-nav-text: var(--base-text-tertiary, var(--ks-color-text-muted));
+    --ks-color-nav-text-dark: var(--base-text-tertiary, var(--ks-color-text-muted-dark));
+    --ks-color-nav-text-hover: var(--base-text-secondary, var(--ks-color-text-label));
+    --ks-color-nav-text-hover-dark: var(--base-text-secondary, var(--ks-color-text-label-dark));
+    --ks-color-nav-active: var(--text-primary, var(--ks-color-link));
+    --ks-color-nav-active-dark: var(--text-primary, var(--ks-color-link-dark));
+    --ks-color-nav-link: var(--base-text, var(--ks-color-text));
+    --ks-color-nav-link-dark: var(--base-text, var(--ks-color-text-dark));
+    --ks-color-nav-indicator: var(--border-primary, var(--ks-color-link));
+    --ks-color-nav-indicator-dark: var(--border-primary, var(--ks-color-link-dark));
+    --ks-color-nav-menu-mobile: var(--base-bg-base, var(--ks-color-surface));
+    --ks-color-nav-menu-mobile-dark: var(--base-bg-base, var(--ks-color-surface-dark));
+    --ks-color-nav-hover: var(--base-bg-hover, var(--ks-color-hover));
+    --ks-color-nav-hover-dark: var(--base-bg-hover, var(--ks-color-hover-dark));
     --ks-shadow-menu: var(--shadow-md);
     --ks-font-weight-normal: var(--font-weight-normal);
-    --ks-color-hover-soft: var(--color-gray-50);
-    --ks-color-hover-soft-dark: var(--color-gray-800);
+    --ks-color-hover-soft: var(--ks-color-hover);
+    --ks-color-hover-soft-dark: var(--ks-color-hover-dark);
     --ks-color-focus-dark: var(--color-accent-400);
     --ks-color-link-strong-hover: var(--color-accent-900);
     --ks-color-link-strong-hover-dark: var(--color-accent-300);
@@ -1182,20 +1182,6 @@
   .ks-settings-link-label {
     @apply font-(weight:--ks-font-weight-medium);
   }
-}
-
-@media (max-width: 1023px) {
-  main {
-    padding-bottom: calc(56px + env(safe-area-inset-bottom));
-  }
-
-  .hotwire-native .ks-bottom-nav {
-    display: none;
-  }
-
-  .hotwire-native main {
-    padding-bottom: 0;
-  }
 
   .ks-grid-gap-sm {
     @apply gap-[calc(var(--ks-spacing)*3)];
@@ -1273,3 +1259,17 @@
     @apply font-(weight:--ks-font-weight-heading) text-(color:--ks-color-text) dark:text-(color:--ks-color-text-dark);
   }
 }
+
+@media (max-width: 1023px) {
+  main {
+    padding-bottom: calc(56px + env(safe-area-inset-bottom));
+  }
+
+  .hotwire-native .ks-bottom-nav {
+    display: none;
+  }
+
+  .hotwire-native main {
+    padding-bottom: 0;
+  }
+}

data/lib/keystone_ui/styles/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Styles
-    VERSION = "0.6.0"
+    VERSION = "0.7.1"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-styles
 version: !ruby/object:Gem::Version
-  version: 0.6.0
+  version: 0.7.1
 platform: ruby
 authors:
 - Tyler Schneider