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

lightning_ui_kit 0.3.1 → 0.3.3

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

Files changed (84) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 03ad660a5df33754b3f468fbba5b82cb67c1a284d43d84b980c8d85a835d6e15
-  data.tar.gz: 565ad6bb20e7e2060d3b7937386a1001dd89c568f8d19c98669e946d0763a8ac
+  metadata.gz: '089bcfcdadfc3260d27dda5d1db22666a32697e1446d5786088ce1520609d75d'
+  data.tar.gz: b690d324938ae0a2e906336ba02fda621f3160dcaadcb9aafef0cfa2df37339f
 SHA512:
-  metadata.gz: 67dfd0d0a6207aab34dc4a21b5c3c3da2fb34282553ce141a1b8614726a8736a28d20a28790044151b2ea7eb2eec474dc1b1a7fd182abd62c291dbc44cec9551
-  data.tar.gz: d936c5ed4b0275dbe3b1def5e8268bbdea8f991b2d730823e263f20faed66d81e1adc797b837c728fc76f8a70c608ca899d640b2acd2bd4432ac39c533df524f
+  metadata.gz: 662f686176b974c57953419eea45650402f3bce057256d756fd3f9dc77a5ecfdd07ac6882ca1b05ccf1e3dddec3e9c19a4a6786e313e10ad0084e04d791058c3
+  data.tar.gz: fdd96831b55658d94dee59302a2c0a1ec9ca00501de41e2caf9e56e78e316e10c103352a4aade79f436b31597442913c332258927aebddc5b7184d3133c55cb1

data/README.md CHANGED Viewed

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

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

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

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

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