|
| 1 | +module Layered |
| 2 | + module Ui |
| 3 | + module Generators |
| 4 | + class CreateOverridesGenerator < Rails::Generators::Base |
| 5 | + desc "Create a layered-ui-rails color overrides file in the host application" |
| 6 | + |
| 7 | + OVERRIDES_PATH = "app/assets/tailwind/layered_ui_overrides.css" |
| 8 | + |
| 9 | + def create_overrides_file |
| 10 | + if File.exist?(OVERRIDES_PATH) |
| 11 | + say "Overrides file already exists at #{OVERRIDES_PATH}, skipping", :yellow |
| 12 | + return |
| 13 | + end |
| 14 | + |
| 15 | + create_file OVERRIDES_PATH, overrides_content |
| 16 | + end |
| 17 | + |
| 18 | + private |
| 19 | + |
| 20 | + def overrides_content |
| 21 | + <<~CSS |
| 22 | + /* |
| 23 | + * layered-ui-rails color overrides |
| 24 | + * |
| 25 | + * Uncomment and edit any variable below to customise the UI. |
| 26 | + * This file is NOT overwritten by the install generator, so your |
| 27 | + * changes are preserved when you upgrade layered-ui-rails. |
| 28 | + * |
| 29 | + * Values are HSL channels: <hue> <saturation>% <lightness>% |
| 30 | + * Example: --accent: 220 80% 55%; |
| 31 | + */ |
| 32 | +
|
| 33 | + /* ---------------------------------------------------------------- |
| 34 | + * Tier 1 - Accent color |
| 35 | + * |
| 36 | + * Set a single brand color. Primary buttons, active tabs, and |
| 37 | + * active navigation items all inherit from these two variables. |
| 38 | + * ---------------------------------------------------------------- */ |
| 39 | +
|
| 40 | + :root { |
| 41 | + /* --accent: 0 0% 9%; */ |
| 42 | + /* --accent-foreground: 0 0% 100%; */ |
| 43 | + } |
| 44 | +
|
| 45 | + .dark { |
| 46 | + /* --accent: 0 0% 100%; */ |
| 47 | + /* --accent-foreground: 0 0% 9%; */ |
| 48 | + } |
| 49 | +
|
| 50 | + /* ---------------------------------------------------------------- |
| 51 | + * Tier 2 - Full color overrides |
| 52 | + * |
| 53 | + * Override any individual token. Uncomment only the ones you need. |
| 54 | + * ---------------------------------------------------------------- */ |
| 55 | +
|
| 56 | + /* |
| 57 | + :root { |
| 58 | + --background: 0 0% 100%; |
| 59 | + --foreground: 0 0% 13%; |
| 60 | + --foreground-muted: 0 0% 29%; |
| 61 | + --border: 0 0% 91%; |
| 62 | + --ring: 0 0% 13%; |
| 63 | + --surface: 0 0% 96%; |
| 64 | + --surface-active: 0 0% 91%; |
| 65 | + --button-primary-bg: var(--accent); |
| 66 | + --button-primary-text: var(--accent-foreground); |
| 67 | + --danger: 0 72% 38%; |
| 68 | + --danger-light: 0 100% 97%; |
| 69 | + --danger-text: 0 72% 35%; |
| 70 | + --success-bg: 142 76% 65%; |
| 71 | + --success-text: 142 76% 13%; |
| 72 | + --warning-bg: 48 96% 65%; |
| 73 | + --warning-text: 48 96% 15%; |
| 74 | + --error-bg: 0 84% 75%; |
| 75 | + --error-text: 0 93% 12%; |
| 76 | + --backdrop: 0 0% 0%; |
| 77 | + } |
| 78 | +
|
| 79 | + .dark { |
| 80 | + --background: 0 0% 0%; |
| 81 | + --foreground: 0 0% 89%; |
| 82 | + --foreground-muted: 0 0% 71%; |
| 83 | + --border: 0 0% 16%; |
| 84 | + --ring: 0 0% 89%; |
| 85 | + --surface: 0 0% 8%; |
| 86 | + --surface-active: 0 0% 16%; |
| 87 | + --button-primary-bg: var(--accent); |
| 88 | + --button-primary-text: var(--accent-foreground); |
| 89 | + --danger: 0 85% 60%; |
| 90 | + --danger-light: 0 93% 15%; |
| 91 | + --danger-text: 0 85% 64%; |
| 92 | + --success-bg: 142 76% 15%; |
| 93 | + --success-text: 142 76% 80%; |
| 94 | + --warning-bg: 48 96% 15%; |
| 95 | + --warning-text: 48 96% 80%; |
| 96 | + --error-bg: 0 93% 12%; |
| 97 | + --error-text: 0 84% 75%; |
| 98 | + --backdrop: 0 0% 0%; |
| 99 | + } |
| 100 | + */ |
| 101 | + CSS |
| 102 | + end |
| 103 | + end |
| 104 | + end |
| 105 | + end |
| 106 | +end |
0 commit comments