keystone_ui-styles 0.1.2 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 87e84f0077ed42c944b353e674f80f8b0908a8b484c6eb41d7c6d06ba3eb2b00
-  data.tar.gz: 3c5dc79a04c6797a213ce267e359be2c0070b0eb85227f7d9a965eb4825a6b17
+  metadata.gz: 7dfc9c1e8fd98e2b97039633a4ba9a98a93dff44aa1c1f142bf4e698caaa6a3c
+  data.tar.gz: d7ae197f9b001b614a21adffde2e6749f8d65a0b28ed5b499d810b643782a7bb
 SHA512:
-  metadata.gz: 9f2807502e8e818a4e81611a12a7a7bbaa32dfcc2c82e02ba035f0f9e7e6601863b8921dc9edf46f44c9eae84b5dbd095a122dbd04f3c0c55d910ee9e70839d0
-  data.tar.gz: 9733130752a45c8908a592126bcef14a7f4caaaa6272b05475b17390be70e89120ae57f00c2d0376fe91ab4c578871b63ffb03a9e9261a0a0d8091a29cf4ab6a
+  metadata.gz: b05744f6be44453d6a58c60302577fec5c2b70001e7379e481be2ed8c62a77be37a788291b850f9a20508968fac59236a51d11fdb358b9cfe7f0c998767ad310
+  data.tar.gz: f8737adb7d92fdfc6814033e6d8f58f4c0ed4491f51e3a566f3d37bcf6b2b97ee0dc328376407d267668c0aff23c93c8290a6c0e0564289720ec74b1fc0cbd86

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

@@ -4,7 +4,7 @@
   }
 
   @media (prefers-color-scheme: dark) {
-    &:where(:not([data-theme="light"], [data-theme="light"] *)) {
+    &:where(:not([data-theme="light"], [data-theme="light"] *, [data-theme="custom"], [data-theme="custom"] *)) {
       @slot;
     }
   }
@@ -34,6 +34,35 @@
   --color-surface-800: #27272a;
   --color-surface-900: #18181b;
   --color-surface-950: #09090b;
+
+  --color-custom-background: #ffffff;
+  --color-custom-text: #18181b;
+}
+
+[data-theme="custom"] {
+  --color-white: var(--color-custom-background);
+  --color-gray-50: color-mix(in oklab, var(--color-custom-text) 3%, var(--color-custom-background));
+  --color-gray-100: color-mix(in oklab, var(--color-custom-text) 6%, var(--color-custom-background));
+  --color-gray-200: color-mix(in oklab, var(--color-custom-text) 12%, var(--color-custom-background));
+  --color-gray-300: color-mix(in oklab, var(--color-custom-text) 20%, var(--color-custom-background));
+  --color-gray-400: color-mix(in oklab, var(--color-custom-text) 40%, var(--color-custom-background));
+  --color-gray-500: color-mix(in oklab, var(--color-custom-text) 55%, var(--color-custom-background));
+  --color-gray-600: color-mix(in oklab, var(--color-custom-text) 68%, var(--color-custom-background));
+  --color-gray-700: color-mix(in oklab, var(--color-custom-text) 78%, var(--color-custom-background));
+  --color-gray-800: color-mix(in oklab, var(--color-custom-text) 87%, var(--color-custom-background));
+  --color-gray-900: color-mix(in oklab, var(--color-custom-text) 94%, var(--color-custom-background));
+  --color-gray-950: color-mix(in oklab, var(--color-custom-text) 100%, var(--color-custom-background));
+  --color-zinc-50: color-mix(in oklab, var(--color-custom-text) 3%, var(--color-custom-background));
+  --color-zinc-100: color-mix(in oklab, var(--color-custom-text) 6%, var(--color-custom-background));
+  --color-zinc-200: color-mix(in oklab, var(--color-custom-text) 12%, var(--color-custom-background));
+  --color-zinc-300: color-mix(in oklab, var(--color-custom-text) 20%, var(--color-custom-background));
+  --color-zinc-400: color-mix(in oklab, var(--color-custom-text) 40%, var(--color-custom-background));
+  --color-zinc-500: color-mix(in oklab, var(--color-custom-text) 55%, var(--color-custom-background));
+  --color-zinc-600: color-mix(in oklab, var(--color-custom-text) 68%, var(--color-custom-background));
+  --color-zinc-700: color-mix(in oklab, var(--color-custom-text) 78%, var(--color-custom-background));
+  --color-zinc-800: color-mix(in oklab, var(--color-custom-text) 87%, var(--color-custom-background));
+  --color-zinc-900: color-mix(in oklab, var(--color-custom-text) 94%, var(--color-custom-background));
+  --color-zinc-950: color-mix(in oklab, var(--color-custom-text) 100%, var(--color-custom-background));
 }
 
 @layer components {
@@ -96,4 +125,180 @@
   .ks-checkbox {
     @apply rounded border-gray-300 text-accent-600 focus:ring-accent-500 dark:border-zinc-600 dark:bg-zinc-900;
   }
+
+  .ks-page {
+    @apply px-4 py-4 sm:px-6 lg:px-8;
+  }
+
+  .ks-page-sm {
+    @apply max-w-2xl mx-auto;
+  }
+
+  .ks-page-md {
+    @apply max-w-4xl mx-auto;
+  }
+
+  .ks-page-lg {
+    @apply max-w-6xl mx-auto;
+  }
+
+  .ks-page-xl {
+    @apply max-w-7xl mx-auto;
+  }
+
+  .ks-page-offset-sm {
+    @apply pt-12;
+  }
+
+  .ks-page-offset-md {
+    @apply pt-16;
+  }
+
+  .ks-page-offset-lg {
+    @apply pt-20;
+  }
+
+  .ks-page-offset-xl {
+    @apply pt-24;
+  }
+
+  .ks-page-header {
+    @apply hidden sm:block mb-6 sm:flex sm:items-center sm:justify-between;
+  }
+
+  .ks-page-header-title {
+    @apply text-2xl font-bold text-gray-900 dark:text-white;
+  }
+
+  .ks-page-header-subtitle {
+    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+  }
+
+  .ks-page-header-actions {
+    @apply hidden sm:block mt-4 sm:mt-0 sm:ml-4 flex-shrink-0;
+  }
+
+  .ks-section-sm {
+    @apply mt-4;
+  }
+
+  .ks-section-md {
+    @apply mt-6;
+  }
+
+  .ks-section-lg {
+    @apply mt-8;
+  }
+
+  .ks-section-header {
+    @apply flex items-center justify-between mb-4;
+  }
+
+  .ks-section-title {
+    @apply text-lg font-semibold text-gray-900 dark:text-white;
+  }
+
+  .ks-section-subtitle {
+    @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+  }
+
+  .ks-section-action {
+    @apply text-sm text-accent-600 hover:text-accent-900 dark:text-accent-400 dark:hover:text-accent-300;
+  }
+
+  .ks-card {
+    @apply overflow-hidden rounded-lg border border-gray-200 bg-white dark:bg-zinc-900 dark:border-zinc-700;
+  }
+
+  .ks-card-edge {
+    @apply overflow-hidden border-y border-gray-200 bg-white sm:rounded-lg sm:border-x dark:bg-zinc-900 dark:border-zinc-700;
+  }
+
+  .ks-card-body {
+    @apply px-4 py-4 sm:px-6 sm:pt-6 sm:pb-4;
+  }
+
+  .ks-card-title {
+    @apply text-lg font-semibold text-gray-900 dark:text-white m-0;
+  }
+
+  .ks-card-summary {
+    @apply mt-1 text-sm text-gray-500 dark:text-gray-400 mb-0;
+  }
+
+  .ks-card-cta {
+    @apply px-4 pb-4 sm:px-6 sm:pb-6;
+  }
+
+  .ks-card-link {
+    @apply text-sm font-medium no-underline text-accent-600 hover:text-accent-900 dark:text-accent-400;
+  }
+
+  .ks-alert {
+    @apply rounded-md p-4;
+  }
+
+  .ks-alert-info {
+    @apply bg-accent-50 text-accent-800 dark:bg-accent-900/30 dark:text-accent-300;
+  }
+
+  .ks-alert-success {
+    @apply bg-green-50 text-green-800 dark:bg-green-900/30 dark:text-green-300;
+  }
+
+  .ks-alert-warning {
+    @apply bg-yellow-50 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300;
+  }
+
+  .ks-alert-error {
+    @apply bg-red-50 text-red-800 dark:bg-red-900/30 dark:text-red-300;
+  }
+
+  .ks-alert-body {
+    @apply flex;
+  }
+
+  .ks-alert-content {
+    @apply flex-1;
+  }
+
+  .ks-alert-title {
+    @apply font-semibold;
+  }
+
+  .ks-alert-message {
+    @apply text-sm;
+  }
+
+  .ks-alert-message-titled {
+    @apply text-sm mt-1;
+  }
+
+  .ks-alert-dismiss {
+    @apply ml-auto -mr-1.5 -mt-1.5 inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-pointer;
+  }
+
+  .ks-badge {
+    @apply inline-flex items-center rounded-full px-2 py-1 text-xs font-medium;
+  }
+
+  .ks-badge-neutral {
+    @apply bg-gray-100 text-gray-700 dark:bg-zinc-700 dark:text-gray-300;
+  }
+
+  .ks-badge-success {
+    @apply bg-green-100 text-green-700 dark:bg-green-900/50 dark:text-green-400;
+  }
+
+  .ks-badge-danger {
+    @apply bg-red-100 text-red-700 dark:bg-red-900/50 dark:text-red-400;
+  }
+
+  .ks-badge-warning {
+    @apply bg-yellow-100 text-yellow-700 dark:bg-yellow-900/50 dark:text-yellow-400;
+  }
+
+  .ks-badge-info {
+    @apply bg-accent-100 text-accent-700 dark:bg-accent-900/50 dark:text-accent-400;
+  }
 }

data/lib/keystone_ui/styles/version.rb

@@ -2,6 +2,6 @@
 
 module KeystoneUi
   module Styles
-    VERSION = "0.1.2"
+    VERSION = "0.3.0"
   end
 end

metadata

@@ -1,14 +1,13 @@
 --- !ruby/object:Gem::Specification
 name: keystone_ui-styles
 version: !ruby/object:Gem::Version
-  version: 0.1.2
+  version: 0.3.0
 platform: ruby
 authors:
 - Tyler Schneider
-autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-09-14 00:00:00.000000000 Z
+date: 1980-01-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: railties
@@ -48,7 +47,6 @@ metadata:
   bug_tracker_uri: https://github.com/DYB-Development/keystone_ui-styles/issues
   documentation_uri: https://github.com/DYB-Development/keystone_ui-styles#readme
   rubygems_mfa_required: 'true'
-post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -63,8 +61,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.5.16
-signing_key:
+rubygems_version: 4.0.20
 specification_version: 4
 summary: Shared CSS for keystone_ui and keystone_ui-react.
 test_files: []