From 82583822f5df8738d45f7c8537a755bb916c92da Mon Sep 17 00:00:00 2001 From: jamey Date: Wed, 18 Feb 2026 01:15:28 +0000 Subject: [PATCH] remove Tailwind + DaisyUI theme + heroicons plugin, admin fully custom CSS (Phase 7) replace Tailwind CLI with esbuild for admin CSS bundling. admin now uses hand-written utility classes (admin/utilities.css), static heroicon CSS generated by mix generate_admin_icons, plain CSS colour themes extracted from DaisyUI plugin config, and minimal resets. rename app.css to admin.css for clarity alongside shop.css. delete vendor/daisyui-theme.js and vendor/heroicons.js. no Tailwind dependency remains in the project. Co-Authored-By: Claude Opus 4.6 --- assets/css/{app.css => admin.css} | 130 +--- assets/css/admin/components.css | 9 + assets/css/admin/icons.css | 625 ++++++++++++++++ assets/css/admin/reset.css | 19 + assets/css/admin/themes.css | 116 +++ assets/css/admin/utilities.css | 684 ++++++++++++++++++ assets/vendor/daisyui-theme.js | 124 ---- assets/vendor/heroicons.js | 43 -- config/config.exs | 15 +- config/dev.exs | 3 +- lib/mix/tasks/generate_admin_icons.ex | 126 ++++ lib/mix/tasks/lighthouse.ex | 3 +- lib/mix/tasks/screenshots.ex | 2 +- .../components/core_components.ex | 4 +- .../components/layouts.ex | 4 +- .../components/layouts/admin_root.html.heex | 2 +- .../components/layouts/root.html.heex | 2 +- .../controllers/error_html.ex | 2 +- mix.exs | 9 +- mix.lock | 1 - .../live/theme_css_consistency_test.exs | 10 +- 21 files changed, 1614 insertions(+), 319 deletions(-) rename assets/css/{app.css => admin.css} (52%) create mode 100644 assets/css/admin/icons.css create mode 100644 assets/css/admin/reset.css create mode 100644 assets/css/admin/themes.css create mode 100644 assets/css/admin/utilities.css delete mode 100644 assets/vendor/daisyui-theme.js delete mode 100644 assets/vendor/heroicons.js create mode 100644 lib/mix/tasks/generate_admin_icons.ex diff --git a/assets/css/app.css b/assets/css/admin.css similarity index 52% rename from assets/css/app.css rename to assets/css/admin.css index 0c79708..cda5d02 100644 --- a/assets/css/app.css +++ b/assets/css/admin.css @@ -1,130 +1,22 @@ -/* See the Tailwind configuration guide for advanced usage - https://tailwindcss.com/docs/configuration */ +/* Admin CSS — bundled by esbuild */ -@import "tailwindcss" source(none); -@source "../css"; -@source "../js"; -@source "../../lib/simpleshop_theme_web"; +/* Reset and colour themes */ +@import "./admin/reset.css"; +@import "./admin/themes.css"; -/* A Tailwind plugin that makes "hero-#{ICON}" classes available. - The heroicons installation itself is managed by your mix.exs */ -@plugin "../vendor/heroicons"; - -/* daisyUI theme plugin. You can update this file by fetching the latest version with: - curl -sLO https://github.com/saadeghi/daisyui/releases/latest/download/daisyui-theme.js - We ship with two themes, a light one inspired on Phoenix colors and a dark one inspired - on Elixir colors. Build your own at: https://daisyui.com/theme-generator/ */ -@plugin "../vendor/daisyui-theme" { - name: "dark"; - default: false; - prefersdark: true; - color-scheme: "dark"; - --color-base-100: oklch(30.33% 0.016 252.42); - --color-base-200: oklch(25.26% 0.014 253.1); - --color-base-300: oklch(20.15% 0.012 254.09); - --color-base-content: oklch(97.807% 0.029 256.847); - --color-primary: oklch(58% 0.233 277.117); - --color-primary-content: oklch(96% 0.018 272.314); - --color-secondary: oklch(58% 0.233 277.117); - --color-secondary-content: oklch(96% 0.018 272.314); - --color-accent: oklch(60% 0.25 292.717); - --color-accent-content: oklch(96% 0.016 293.756); - --color-neutral: oklch(37% 0.044 257.287); - --color-neutral-content: oklch(98% 0.003 247.858); - --color-info: oklch(58% 0.158 241.966); - --color-info-content: oklch(97% 0.013 236.62); - --color-success: oklch(60% 0.118 184.704); - --color-success-content: oklch(98% 0.014 180.72); - --color-warning: oklch(66% 0.179 58.318); - --color-warning-content: oklch(98% 0.022 95.277); - --color-error: oklch(58% 0.253 17.585); - --color-error-content: oklch(96% 0.015 12.422); - --radius-selector: 0.25rem; - --radius-field: 0.25rem; - --radius-box: 0.5rem; - --size-selector: 0.21875rem; - --size-field: 0.21875rem; - --border: 1.5px; - --depth: 1; - --noise: 0; -} - -@plugin "../vendor/daisyui-theme" { - name: "light"; - default: true; - prefersdark: false; - color-scheme: "light"; - --color-base-100: oklch(98% 0 0); - --color-base-200: oklch(96% 0.001 286.375); - --color-base-300: oklch(92% 0.004 286.32); - --color-base-content: oklch(21% 0.006 285.885); - --color-primary: oklch(70% 0.213 47.604); - --color-primary-content: oklch(98% 0.016 73.684); - --color-secondary: oklch(55% 0.027 264.364); - --color-secondary-content: oklch(98% 0.002 247.839); - --color-accent: oklch(0% 0 0); - --color-accent-content: oklch(100% 0 0); - --color-neutral: oklch(44% 0.017 285.786); - --color-neutral-content: oklch(98% 0 0); - --color-info: oklch(62% 0.214 259.815); - --color-info-content: oklch(97% 0.014 254.604); - --color-success: oklch(70% 0.14 182.503); - --color-success-content: oklch(98% 0.014 180.72); - --color-warning: oklch(66% 0.179 58.318); - --color-warning-content: oklch(98% 0.022 95.277); - --color-error: oklch(58% 0.253 17.585); - --color-error-content: oklch(96% 0.015 12.422); - --radius-selector: 0.25rem; - --radius-field: 0.25rem; - --radius-box: 0.5rem; - --size-selector: 0.21875rem; - --size-field: 0.21875rem; - --border: 1.5px; - --depth: 1; - --noise: 0; -} - -/* Add variants based on LiveView classes */ -@custom-variant phx-click-loading (.phx-click-loading&, .phx-click-loading &); -@custom-variant phx-submit-loading (.phx-submit-loading&, .phx-submit-loading &); -@custom-variant phx-change-loading (.phx-change-loading&, .phx-change-loading &); - -/* Use the data attribute for dark mode */ -@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *)); - -/* Make LiveView wrapper divs transparent for layout */ -[data-phx-session], [data-phx-teleported-src] { display: contents } - -/* Theme CSS - Layer 1: Primitives (fixed CSS variables) */ +/* Theme CSS layers (used by theme editor preview) */ @import "./theme-primitives.css"; - -/* Theme CSS - Layer 2: Attribute-based theme tokens */ @import "./theme-layer2-attributes.css"; - -/* Theme CSS - Layer 3: Semantic aliases */ @import "./theme-semantic.css"; -/* Admin component styles (replaces DaisyUI components) */ +/* Admin components, icons, and utilities */ @import "./admin/components.css"; +@import "./admin/icons.css"; +@import "./admin/utilities.css"; -/* Cart drawer open state styles */ -.cart-drawer.open { - right: 0 !important; -} - -.cart-drawer-overlay.open { - opacity: 1 !important; - visibility: visible !important; -} - -/* Product gallery thumbnail styles */ -.pdp-thumbnail { - border: 2px solid var(--t-border-default); - transition: border-color 0.15s ease; -} - -.pdp-thumbnail-active { - border-color: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l)); +/* LiveView loading state variants */ +.phx-click-loading, .phx-submit-loading, .phx-change-loading { + /* Available for component styling */ } /* ============================================= diff --git a/assets/css/admin/components.css b/assets/css/admin/components.css index 2184e28..6e8f76a 100644 --- a/assets/css/admin/components.css +++ b/assets/css/admin/components.css @@ -608,3 +608,12 @@ &.active .admin-swap-on { display: inline-flex; } &.active .admin-swap-off { display: none; } } + +/* ── Theme toggle ── */ + +.theme-toggle-indicator { + transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +[data-theme="light"] .theme-toggle-indicator { left: 33.333333%; } +[data-theme="dark"] .theme-toggle-indicator { left: 66.666667%; } diff --git a/assets/css/admin/icons.css b/assets/css/admin/icons.css new file mode 100644 index 0000000..566795a --- /dev/null +++ b/assets/css/admin/icons.css @@ -0,0 +1,625 @@ +/* Generated by mix generate_admin_icons — do not edit by hand */ + +.hero-arrow-left-mini { + --hero-arrow-left-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-left-mini); + mask: var(--hero-arrow-left-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-arrow-path { + --hero-arrow-path: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-path); + mask: var(--hero-arrow-path); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-arrow-path-mini { + --hero-arrow-path-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-path-mini); + mask: var(--hero-arrow-path-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-arrow-right-start-on-rectangle { + --hero-arrow-right-start-on-rectangle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-right-start-on-rectangle); + mask: var(--hero-arrow-right-start-on-rectangle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-arrow-top-right-on-square { + --hero-arrow-top-right-on-square: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-top-right-on-square); + mask: var(--hero-arrow-top-right-on-square); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-arrow-top-right-on-square-mini { + --hero-arrow-top-right-on-square-mini: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-arrow-top-right-on-square-mini); + mask: var(--hero-arrow-top-right-on-square-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-arrow-uturn-left-mini { + --hero-arrow-uturn-left-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-arrow-uturn-left-mini); + mask: var(--hero-arrow-uturn-left-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-banknotes { + --hero-banknotes: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-banknotes); + mask: var(--hero-banknotes); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-bars-3 { + --hero-bars-3: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-bars-3); + mask: var(--hero-bars-3); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-bug-ant { + --hero-bug-ant: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-bug-ant); + mask: var(--hero-bug-ant); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-chart-bar { + --hero-chart-bar: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-chart-bar); + mask: var(--hero-chart-bar); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-check-badge { + --hero-check-badge: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-check-badge); + mask: var(--hero-check-badge); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-check-circle { + --hero-check-circle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-check-circle); + mask: var(--hero-check-circle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-check-circle-mini { + --hero-check-circle-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-check-circle-mini); + mask: var(--hero-check-circle-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-check-mini { + --hero-check-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-check-mini); + mask: var(--hero-check-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-chevron-down-mini { + --hero-chevron-down-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-chevron-down-mini); + mask: var(--hero-chevron-down-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-chevron-right-mini { + --hero-chevron-right-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-chevron-right-mini); + mask: var(--hero-chevron-right-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-chevron-up-mini { + --hero-chevron-up-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-chevron-up-mini); + mask: var(--hero-chevron-up-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-clock { + --hero-clock: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-clock); + mask: var(--hero-clock); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-clock-mini { + --hero-clock-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-clock-mini); + mask: var(--hero-clock-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-cog-6-tooth { + --hero-cog-6-tooth: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-cog-6-tooth); + mask: var(--hero-cog-6-tooth); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-cog-6-tooth-mini { + --hero-cog-6-tooth-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-cog-6-tooth-mini); + mask: var(--hero-cog-6-tooth-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-computer-desktop-micro { + --hero-computer-desktop-micro: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-computer-desktop-micro); + mask: var(--hero-computer-desktop-micro); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1rem; + height: 1rem; +} + +.hero-cube { + --hero-cube: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-cube); + mask: var(--hero-cube); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-exclamation-circle { + --hero-exclamation-circle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-exclamation-circle); + mask: var(--hero-exclamation-circle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-exclamation-triangle { + --hero-exclamation-triangle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-exclamation-triangle); + mask: var(--hero-exclamation-triangle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-exclamation-triangle-mini { + --hero-exclamation-triangle-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-exclamation-triangle-mini); + mask: var(--hero-exclamation-triangle-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-eye { + --hero-eye: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-eye); + mask: var(--hero-eye); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-eye-mini { + --hero-eye-mini: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-eye-mini); + mask: var(--hero-eye-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-eye-slash { + --hero-eye-slash: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-eye-slash); + mask: var(--hero-eye-slash); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-eye-slash-mini { + --hero-eye-slash-mini: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-eye-slash-mini); + mask: var(--hero-eye-slash-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-home { + --hero-home: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-home); + mask: var(--hero-home); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-inbox { + --hero-inbox: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-inbox); + mask: var(--hero-inbox); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-information-circle { + --hero-information-circle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-information-circle); + mask: var(--hero-information-circle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-minus-circle-mini { + --hero-minus-circle-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-minus-circle-mini); + mask: var(--hero-minus-circle-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-moon-micro { + --hero-moon-micro: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-moon-micro); + mask: var(--hero-moon-micro); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1rem; + height: 1rem; +} + +.hero-no-symbol-mini { + --hero-no-symbol-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-no-symbol-mini); + mask: var(--hero-no-symbol-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-paint-brush { + --hero-paint-brush: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-paint-brush); + mask: var(--hero-paint-brush); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-paint-brush-mini { + --hero-paint-brush-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-paint-brush-mini); + mask: var(--hero-paint-brush-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-paper-airplane-mini { + --hero-paper-airplane-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-paper-airplane-mini); + mask: var(--hero-paper-airplane-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-photo { + --hero-photo: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-photo); + mask: var(--hero-photo); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-plus { + --hero-plus: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-plus); + mask: var(--hero-plus); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-plus-mini { + --hero-plus-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-plus-mini); + mask: var(--hero-plus-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-question-mark-circle-mini { + --hero-question-mark-circle-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-question-mark-circle-mini); + mask: var(--hero-question-mark-circle-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-rocket-launch { + --hero-rocket-launch: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-rocket-launch); + mask: var(--hero-rocket-launch); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-shopping-bag { + --hero-shopping-bag: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-shopping-bag); + mask: var(--hero-shopping-bag); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-signal { + --hero-signal: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-signal); + mask: var(--hero-signal); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-sun-micro { + --hero-sun-micro: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-sun-micro); + mask: var(--hero-sun-micro); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1rem; + height: 1rem; +} + +.hero-truck-mini { + --hero-truck-mini: url('data:image/svg+xml;utf8,%20%20%20%20'); + -webkit-mask: var(--hero-truck-mini); + mask: var(--hero-truck-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-x-circle { + --hero-x-circle: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-x-circle); + mask: var(--hero-x-circle); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} + +.hero-x-circle-mini { + --hero-x-circle-mini: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-x-circle-mini); + mask: var(--hero-x-circle-mini); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.25rem; + height: 1.25rem; +} + +.hero-x-mark { + --hero-x-mark: url('data:image/svg+xml;utf8,%20%20'); + -webkit-mask: var(--hero-x-mark); + mask: var(--hero-x-mark); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: 1.5rem; + height: 1.5rem; +} diff --git a/assets/css/admin/reset.css b/assets/css/admin/reset.css new file mode 100644 index 0000000..58288ee --- /dev/null +++ b/assets/css/admin/reset.css @@ -0,0 +1,19 @@ +/* Minimal resets for admin pages */ + +*, *::before, *::after { + box-sizing: border-box; +} + +body { + margin: 0; +} + +/* Make LiveView wrapper divs transparent for layout */ +[data-phx-session], [data-phx-teleported-src] { + display: contents; +} + +/* Phoenix LiveView loading states */ +.phx-no-feedback.phx-no-feedback { + /* Suppress validation styles until form is interacted with */ +} diff --git a/assets/css/admin/themes.css b/assets/css/admin/themes.css new file mode 100644 index 0000000..32347e4 --- /dev/null +++ b/assets/css/admin/themes.css @@ -0,0 +1,116 @@ +/* Admin colour themes — extracted from DaisyUI theme plugin config. + Light is the default; dark activates via OS preference or data-theme attribute. */ + +:root { + color-scheme: light; + + /* Base */ + --color-base-100: oklch(98% 0 0); + --color-base-200: oklch(96% 0.001 286.375); + --color-base-300: oklch(92% 0.004 286.32); + --color-base-content: oklch(21% 0.006 285.885); + + /* Brand */ + --color-primary: oklch(70% 0.213 47.604); + --color-primary-content: oklch(98% 0.016 73.684); + --color-secondary: oklch(55% 0.027 264.364); + --color-secondary-content: oklch(98% 0.002 247.839); + --color-accent: oklch(0% 0 0); + --color-accent-content: oklch(100% 0 0); + --color-neutral: oklch(44% 0.017 285.786); + --color-neutral-content: oklch(98% 0 0); + + /* Feedback */ + --color-info: oklch(62% 0.214 259.815); + --color-info-content: oklch(97% 0.014 254.604); + --color-success: oklch(70% 0.14 182.503); + --color-success-content: oklch(98% 0.014 180.72); + --color-warning: oklch(66% 0.179 58.318); + --color-warning-content: oklch(98% 0.022 95.277); + --color-error: oklch(58% 0.253 17.585); + --color-error-content: oklch(96% 0.015 12.422); + + /* Shape */ + --radius-selector: 0.25rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.21875rem; + --size-field: 0.21875rem; + --border: 1.5px; + --depth: 1; + --noise: 0; +} + +@media (prefers-color-scheme: dark) { + :root:not([data-theme="light"]) { + color-scheme: dark; + + --color-base-100: oklch(30.33% 0.016 252.42); + --color-base-200: oklch(25.26% 0.014 253.1); + --color-base-300: oklch(20.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(58% 0.233 277.117); + --color-secondary-content: oklch(96% 0.018 272.314); + --color-accent: oklch(60% 0.25 292.717); + --color-accent-content: oklch(96% 0.016 293.756); + --color-neutral: oklch(37% 0.044 257.287); + --color-neutral-content: oklch(98% 0.003 247.858); + + --color-info: oklch(58% 0.158 241.966); + --color-info-content: oklch(97% 0.013 236.62); + --color-success: oklch(60% 0.118 184.704); + --color-success-content: oklch(98% 0.014 180.72); + --color-warning: oklch(66% 0.179 58.318); + --color-warning-content: oklch(98% 0.022 95.277); + --color-error: oklch(58% 0.253 17.585); + --color-error-content: oklch(96% 0.015 12.422); + + --radius-selector: 0.25rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.21875rem; + --size-field: 0.21875rem; + --border: 1.5px; + --depth: 1; + --noise: 0; + } +} + +[data-theme="dark"] { + color-scheme: dark; + + --color-base-100: oklch(30.33% 0.016 252.42); + --color-base-200: oklch(25.26% 0.014 253.1); + --color-base-300: oklch(20.15% 0.012 254.09); + --color-base-content: oklch(97.807% 0.029 256.847); + + --color-primary: oklch(58% 0.233 277.117); + --color-primary-content: oklch(96% 0.018 272.314); + --color-secondary: oklch(58% 0.233 277.117); + --color-secondary-content: oklch(96% 0.018 272.314); + --color-accent: oklch(60% 0.25 292.717); + --color-accent-content: oklch(96% 0.016 293.756); + --color-neutral: oklch(37% 0.044 257.287); + --color-neutral-content: oklch(98% 0.003 247.858); + + --color-info: oklch(58% 0.158 241.966); + --color-info-content: oklch(97% 0.013 236.62); + --color-success: oklch(60% 0.118 184.704); + --color-success-content: oklch(98% 0.014 180.72); + --color-warning: oklch(66% 0.179 58.318); + --color-warning-content: oklch(98% 0.022 95.277); + --color-error: oklch(58% 0.253 17.585); + --color-error-content: oklch(96% 0.015 12.422); + + --radius-selector: 0.25rem; + --radius-field: 0.25rem; + --radius-box: 0.5rem; + --size-selector: 0.21875rem; + --size-field: 0.21875rem; + --border: 1.5px; + --depth: 1; + --noise: 0; +} diff --git a/assets/css/admin/utilities.css b/assets/css/admin/utilities.css new file mode 100644 index 0000000..c31d5d3 --- /dev/null +++ b/assets/css/admin/utilities.css @@ -0,0 +1,684 @@ +/* Admin utility classes — replaces Tailwind utilities for admin/auth pages. + Only classes actually used in templates are defined here. */ + +/* ======================================== + Shadow/Ring foundation + ======================================== */ + +:where(html) { + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-ring-color: currentColor; + --tw-ring-inset: ; +} + +/* ======================================== + Display + ======================================== */ + +.hidden { display: none; } +.block { display: block; } +.inline { display: inline; } +.inline-flex { display: inline-flex; } +.flex { display: flex; } +.grid { display: grid; } + +/* ======================================== + Position + ======================================== */ + +.relative { position: relative; } +.absolute { position: absolute; } +.fixed { position: fixed; } +.inset-0 { inset: 0; } +.inset-y-0 { top: 0; bottom: 0; } +.left-0 { left: 0; } +.right-0 { right: 0; } +.left-\[40rem\] { left: 40rem; } +.-right-1\.5 { right: -0.375rem; } +.-top-1\.5 { top: -0.375rem; } +.z-0 { z-index: 0; } + +/* ======================================== + Flexbox + ======================================== */ + +.flex-1 { flex: 1 1 0%; } +.flex-none { flex: none; } +.flex-col { flex-direction: column; } +.flex-row { flex-direction: row; } +.flex-wrap { flex-wrap: wrap; } +.flex-shrink-0, .shrink-0 { flex-shrink: 0; } +.items-center { align-items: center; } +.items-start { align-items: flex-start; } +.items-end { align-items: flex-end; } +.justify-between { justify-content: space-between; } +.justify-center { justify-content: center; } +.self-start { align-self: flex-start; } + +/* ======================================== + Grid + ======================================== */ + +.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } +.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + +/* ======================================== + Gap + ======================================== */ + +.gap-1 { gap: 0.25rem; } +.gap-1\.5 { gap: 0.375rem; } +.gap-2 { gap: 0.5rem; } +.gap-3 { gap: 0.75rem; } +.gap-4 { gap: 1rem; } +.gap-6 { gap: 1.5rem; } +.gap-\[14px\] { gap: 14px; } +.gap-x-4 { column-gap: 1rem; } +.gap-x-6 { column-gap: 1.5rem; } +.gap-y-1 { row-gap: 0.25rem; } +.gap-y-4 { row-gap: 1rem; } + +/* ======================================== + Padding + ======================================== */ + +.p-0 { padding: 0; } +.p-1 { padding: 0.25rem; } +.p-2 { padding: 0.5rem; } +.p-3 { padding: 0.75rem; } +.p-4 { padding: 1rem; } +.p-6 { padding: 1.5rem; } +.p-8 { padding: 2rem; } +.px-1\.5 { padding-inline: 0.375rem; } +.px-2 { padding-inline: 0.5rem; } +.px-3 { padding-inline: 0.75rem; } +.px-4 { padding-inline: 1rem; } +.px-6 { padding-inline: 1.5rem; } +.px-\[14px\] { padding-inline: 14px; } +.py-0\.5 { padding-block: 0.125rem; } +.py-1 { padding-block: 0.25rem; } +.py-1\.5 { padding-block: 0.375rem; } +.py-2 { padding-block: 0.5rem; } +.py-2\.5 { padding-block: 0.625rem; } +.py-3 { padding-block: 0.75rem; } +.py-4 { padding-block: 1rem; } +.py-10 { padding-block: 2.5rem; } +.py-12 { padding-block: 3rem; } +.py-\[5px\] { padding-block: 5px; } +.py-\[10px\] { padding-block: 10px; } +.pb-2 { padding-bottom: 0.5rem; } +.pb-6 { padding-bottom: 1.5rem; } +.pb-8 { padding-bottom: 2rem; } +.pb-10 { padding-bottom: 2.5rem; } +.pl-10 { padding-left: 2.5rem; } +.pt-3 { padding-top: 0.75rem; } +.pt-4 { padding-top: 1rem; } +.pt-6 { padding-top: 1.5rem; } + +/* ======================================== + Margin + ======================================== */ + +.mt-0\.5 { margin-top: 0.125rem; } +.mt-1 { margin-top: 0.25rem; } +.mt-1\.5 { margin-top: 0.375rem; } +.mt-2 { margin-top: 0.5rem; } +.mt-3 { margin-top: 0.75rem; } +.mt-4 { margin-top: 1rem; } +.mt-6 { margin-top: 1.5rem; } +.mt-8 { margin-top: 2rem; } +.mt-10 { margin-top: 2.5rem; } +.-mt-1 { margin-top: -0.25rem; } +.mb-0\.5 { margin-bottom: 0.125rem; } +.mb-2 { margin-bottom: 0.5rem; } +.mb-3 { margin-bottom: 0.75rem; } +.mb-4 { margin-bottom: 1rem; } +.mb-6 { margin-bottom: 1.5rem; } +.ml-1 { margin-left: 0.25rem; } +.ml-3 { margin-left: 0.75rem; } +.mr-1 { margin-right: 0.25rem; } +.-mr-2 { margin-right: -0.5rem; } +.mx-auto { margin-inline: auto; } +.-mx-2 { margin-inline: -0.5rem; } +.-my-0\.5 { margin-block: -0.125rem; } + +/* ======================================== + Space between (lobotomised owl) + ======================================== */ + +.space-y-1 > :not(:first-child) { margin-top: 0.25rem; } +.space-y-4 > :not(:first-child) { margin-top: 1rem; } +.space-y-6 > :not(:first-child) { margin-top: 1.5rem; } + +/* ======================================== + Sizing + ======================================== */ + +.w-0 { width: 0; } +.w-3 { width: 0.75rem; } +.w-4 { width: 1rem; } +.w-5 { width: 1.25rem; } +.w-6 { width: 1.5rem; } +.w-9 { width: 2.25rem; } +.w-10 { width: 2.5rem; } +.w-12 { width: 3rem; } +.w-16 { width: 4rem; } +.w-28 { width: 7rem; } +.w-1\/3 { width: 33.333333%; } +.w-auto { width: auto; } +.w-fit { width: fit-content; } +.w-80 { width: 20rem; } +.w-full { width: 100%; } +.w-\[14px\] { width: 14px; } +.w-\[18px\] { width: 18px; } + +.h-1\.5 { height: 0.375rem; } +.h-3 { height: 0.75rem; } +.h-4 { height: 1rem; } +.h-5 { height: 1.25rem; } +.h-6 { height: 1.5rem; } +.h-9 { height: 2.25rem; } +.h-10 { height: 2.5rem; } +.h-12 { height: 3rem; } +.h-full { height: 100%; } +.h-\[14px\] { height: 14px; } +.h-\[18px\] { height: 18px; } +.h-\[60px\] { height: 60px; } + +.size-3 { width: 0.75rem; height: 0.75rem; } +.size-4 { width: 1rem; height: 1rem; } +.size-5 { width: 1.25rem; height: 1.25rem; } +.size-6 { width: 1.5rem; height: 1.5rem; } +.size-10 { width: 2.5rem; height: 2.5rem; } +.size-12 { width: 3rem; height: 3rem; } +.size-16 { width: 4rem; height: 4rem; } + +.min-h-0 { min-height: 0; } +.min-h-screen { min-height: 100vh; } +.min-w-0 { min-width: 0; } +.min-w-48 { min-width: 12rem; } + +.max-h-full { max-height: 100%; } +.max-w-80 { max-width: 20rem; } +.max-w-sm { max-width: 24rem; } +.max-w-md { max-width: 28rem; } +.max-w-lg { max-width: 32rem; } +.max-w-xl { max-width: 36rem; } +.max-w-2xl { max-width: 42rem; } +.max-w-5xl { max-width: 64rem; } +.max-w-full { max-width: 100%; } +.max-w-\[1200px\] { max-width: 1200px; } + +.aspect-square { aspect-ratio: 1 / 1; } + +/* ======================================== + Typography + ======================================== */ + +.text-xs { font-size: 0.75rem; line-height: 1rem; } +.text-sm { font-size: 0.875rem; line-height: 1.25rem; } +.text-base { font-size: 1rem; line-height: 1.5rem; } +.text-lg { font-size: 1.125rem; line-height: 1.75rem; } +.text-xl { font-size: 1.25rem; line-height: 1.75rem; } +.text-2xl { font-size: 1.5rem; line-height: 2rem; } +.text-\[2rem\] { font-size: 2rem; } + +.font-normal { font-weight: 400; } +.font-medium { font-weight: 500; } +.font-semibold { font-weight: 600; } +.font-bold { font-weight: 700; } +.font-mono { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; +} + +.text-left { text-align: left; } +.text-center { text-align: center; } +.text-right { text-align: right; } +.text-balance { text-wrap: balance; } + +.text-wrap { text-wrap: wrap; } +.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.break-all { word-break: break-all; } +.uppercase { text-transform: uppercase; } +.capitalize { text-transform: capitalize; } +.underline { text-decoration-line: underline; } + +.leading-6 { line-height: 1.5rem; } +.leading-7 { line-height: 1.75rem; } +.leading-8 { line-height: 2rem; } +.leading-10 { line-height: 2.5rem; } +.leading-none { line-height: 1; } +.leading-relaxed { line-height: 1.625; } + +.tracking-tight { letter-spacing: -0.025em; } +.tracking-tighter { letter-spacing: -0.05em; } +.tracking-wider { letter-spacing: 0.05em; } + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +/* ======================================== + Colours — DaisyUI semantic + ======================================== */ + +.bg-base-100 { background-color: var(--color-base-100); } +.bg-base-200 { background-color: var(--color-base-200); } +.bg-base-300 { background-color: var(--color-base-300); } +.bg-base-content { background-color: var(--color-base-content); } +.bg-primary { background-color: var(--color-primary); } +.bg-white { background-color: #fff; } + +.text-base-100 { color: var(--color-base-100); } +.text-base-content { color: var(--color-base-content); } +.text-base-content\/30 { color: color-mix(in oklch, var(--color-base-content) 30%, transparent); } +.text-base-content\/40 { color: color-mix(in oklch, var(--color-base-content) 40%, transparent); } +.text-base-content\/50 { color: color-mix(in oklch, var(--color-base-content) 50%, transparent); } +.text-base-content\/60 { color: color-mix(in oklch, var(--color-base-content) 60%, transparent); } +.text-base-content\/70 { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); } +.text-base-content\/80 { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); } +.text-error { color: var(--color-error); } +.text-success { color: var(--color-success); } +.text-white { color: #fff; } +.text-brand { color: var(--color-primary); } + +.fill-base-content\/40 { fill: color-mix(in oklch, var(--color-base-content) 40%, transparent); } + +/* ======================================== + Colours — status palette + ======================================== */ + +.bg-green-50 { background-color: #f0fdf4; } +.bg-green-500 { background-color: #22c55e; } +.bg-green-600 { background-color: #16a34a; } +.text-green-600 { color: #16a34a; } +.text-green-700 { color: #15803d; } +.text-green-900 { color: #14532d; } +.border-green-200 { border-color: #bbf7d0; } + +.bg-red-50 { background-color: #fef2f2; } +.text-red-600 { color: #dc2626; } +.text-red-700 { color: #b91c1c; } + +.bg-amber-50 { background-color: #fffbeb; } +.bg-amber-100 { background-color: #fef3c7; } +.text-amber-600 { color: #d97706; } +.text-amber-700 { color: #b45309; } +.text-amber-800 { color: #92400e; } +.text-amber-900 { color: #78350f; } + +.bg-blue-50 { background-color: #eff6ff; } +.text-blue-700 { color: #1d4ed8; } + +.bg-purple-50 { background-color: #faf5ff; } +.text-purple-700 { color: #7e22ce; } + +/* Arbitrary background colours (macOS traffic lights in theme editor) */ +.bg-\[\#ff5f57\] { background-color: #ff5f57; } +.bg-\[\#ffbd2e\] { background-color: #ffbd2e; } +.bg-\[\#28c940\] { background-color: #28c940; } + +/* ======================================== + Borders + ======================================== */ + +.border { border: 1px solid; } +.border-0 { border-width: 0; } +.border-1 { border-width: 1px; } +.border-2 { border-width: 2px; } +.border-b { border-bottom: 1px solid; } +.border-t { border-top: 1px solid; } +.border-t-0 { border-top-width: 0; } +.border-dashed { border-style: dashed; } + +.border-base-200 { border-color: var(--color-base-200); } +.border-base-300 { border-color: var(--color-base-300); } +.border-base-content\/20 { border-color: color-mix(in oklch, var(--color-base-content) 20%, transparent); } +.border-b-base-content\/30 { border-bottom-color: color-mix(in oklch, var(--color-base-content) 30%, transparent); } + +/* Arbitrary border colours (macOS traffic lights) */ +.border-\[\#e14640\] { border-color: #e14640; } +.border-\[\#dfa123\] { border-color: #dfa123; } +.border-\[\#1aab29\] { border-color: #1aab29; } + +/* ======================================== + Border radius + ======================================== */ + +.rounded { border-radius: 0.25rem; } +.rounded-md { border-radius: 0.375rem; } +.rounded-lg { border-radius: 0.5rem; } +.rounded-xl { border-radius: 0.75rem; } +.rounded-full { border-radius: 9999px; } +.rounded-b-lg { + border-bottom-left-radius: 0.5rem; + border-bottom-right-radius: 0.5rem; +} +.rounded-t-\[10px\] { + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} +.rounded-box { border-radius: var(--radius-box, 0.5rem); } + +/* ======================================== + Ring (outline via box-shadow) + ======================================== */ + +.ring-1 { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.ring-inset { --tw-ring-inset: inset; } +.ring-base-300 { --tw-ring-color: var(--color-base-300); } +.ring-green-600\/20 { --tw-ring-color: rgb(22 163 74 / 0.2); } +.ring-red-600\/20 { --tw-ring-color: rgb(220 38 38 / 0.2); } +.ring-amber-600\/10 { --tw-ring-color: rgb(217 119 6 / 0.1); } +.ring-blue-600\/20 { --tw-ring-color: rgb(37 99 235 / 0.2); } +.ring-purple-600\/20 { --tw-ring-color: rgb(147 51 234 / 0.2); } + +/* ======================================== + Shadow + ======================================== */ + +.shadow-xs { + --tw-shadow: 0 1px rgb(0 0 0 / 0.05); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.shadow-sm { + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} + +/* ======================================== + Overflow + ======================================== */ + +.overflow-auto { overflow: auto; } +.overflow-hidden { overflow: hidden; } +.overflow-x-auto { overflow-x: auto; } + +/* ======================================== + Object fit + ======================================== */ + +.object-cover { object-fit: cover; } +.object-contain { object-fit: contain; } + +/* ======================================== + Opacity + ======================================== */ + +.opacity-40 { opacity: 0.4; } +.opacity-75 { opacity: 0.75; } + +/* ======================================== + Cursor + ======================================== */ + +.cursor-pointer { cursor: pointer; } + +/* ======================================== + Gradient + ======================================== */ + +.bg-gradient-to-b { + --tw-gradient-from: transparent; + --tw-gradient-to: transparent; + background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-to)); +} +.from-base-300 { --tw-gradient-from: var(--color-base-300); } +.to-base-300\/80 { --tw-gradient-to: color-mix(in oklch, var(--color-base-300) 80%, transparent); } + +/* ======================================== + Filter + ======================================== */ + +.brightness-200 { filter: brightness(2); } + +/* ======================================== + Transitions & animation + ======================================== */ + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, + fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-colors { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-transform { + transition-property: transform; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-\[left\] { + transition-property: left; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +@keyframes spin { to { transform: rotate(360deg); } } +.animate-spin { animation: spin 1s linear infinite; } + +@media (prefers-reduced-motion: no-preference) { + .motion-safe\:animate-spin { animation: spin 1s linear infinite; } +} + +/* ======================================== + Hover states + ======================================== */ + +.hover\:bg-base-200:hover { background-color: var(--color-base-200); } +.hover\:bg-base-200\/50:hover { background-color: color-mix(in oklch, var(--color-base-200) 50%, transparent); } +.hover\:bg-base-300:hover { background-color: var(--color-base-300); } +.hover\:bg-base-content\/80:hover { background-color: color-mix(in oklch, var(--color-base-content) 80%, transparent); } +.hover\:bg-green-500:hover { background-color: #22c55e; } +.hover\:border-base-300:hover { border-color: var(--color-base-300); } +.hover\:border-base-content\/40:hover { border-color: color-mix(in oklch, var(--color-base-content) 40%, transparent); } +.hover\:opacity-100:hover { opacity: 1; } +.hover\:text-base-content:hover { color: var(--color-base-content); } +.hover\:text-base-content\/70:hover { color: color-mix(in oklch, var(--color-base-content) 70%, transparent); } +.hover\:text-base-content\/80:hover { color: color-mix(in oklch, var(--color-base-content) 80%, transparent); } +.hover\:text-red-800:hover { color: #991b1b; } +.hover\:underline:hover { text-decoration-line: underline; } +.hover\:cursor-pointer:hover { cursor: pointer; } + +/* ======================================== + Focus states + ======================================== */ + +.focus\:border-primary:focus { border-color: var(--color-primary); } +.focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } +.focus\:ring-1:focus { + --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 1px var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); +} +.focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in oklch, var(--color-primary) 20%, transparent); } + +/* ======================================== + Disabled states + ======================================== */ + +.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } +.disabled\:opacity-50:disabled { opacity: 0.5; } + +/* ======================================== + Group states + ======================================== */ + +.group { /* marker class — no styles */ } +.group:hover .group-hover\:bg-base-300 { background-color: var(--color-base-300); } +.group:hover .group-hover\:fill-base-content { fill: var(--color-base-content); } +.group:hover .group-hover\:opacity-70 { opacity: 0.7; } +.group:hover .group-hover\:text-base-content { color: var(--color-base-content); } +.group[open] .group-open\:rotate-180 { transform: rotate(180deg); } + +/* ======================================== + Pseudo-class selectors + ======================================== */ + +.only\:block:only-child { display: block; } +.last\:pb-0:last-child { padding-bottom: 0; } +.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker { display: none; } + +/* ======================================== + Responsive: sm (min-width: 640px) + ======================================== */ + +@media (min-width: 640px) { + .sm\:flex-col { flex-direction: column; } + .sm\:flex-row { flex-direction: row; } + .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } + .sm\:p-6 { padding: 1.5rem; } + .sm\:px-6 { padding-inline: 1.5rem; } + .sm\:py-6 { padding-block: 1.5rem; } + .sm\:py-28 { padding-block: 7rem; } + .sm\:w-auto { width: auto; } + .sm\:w-96 { width: 24rem; } + .sm\:max-w-96 { max-width: 24rem; } + + /* JS transition scale (used in show/hide) */ + .sm\:translate-y-0 { translate: 0 0; } + .sm\:scale-95 { scale: 0.95; } + .sm\:scale-100 { scale: 1; } + + .sm\:group-hover\:scale-105 { /* defined below with group:hover */ } +} + +.group:hover .sm\:group-hover\:scale-105 { + @media (min-width: 640px) { scale: 1.05; } +} + +/* ======================================== + Responsive: lg (min-width: 1024px) + ======================================== */ + +@media (min-width: 1024px) { + .lg\:block { display: block; } + .lg\:col-span-2 { grid-column: span 2 / span 2; } + .lg\:flex-row { flex-direction: row; } + .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + .lg\:h-screen { height: 100vh; } + .lg\:mx-0 { margin-inline: 0; } + .lg\:p-8 { padding: 2rem; } + .lg\:px-8 { padding-inline: 2rem; } +} + +/* ======================================== + Responsive: xl (min-width: 1280px) + ======================================== */ + +@media (min-width: 1280px) { + .xl\:left-\[50rem\] { left: 50rem; } + .xl\:px-28 { padding-inline: 7rem; } + .xl\:py-32 { padding-block: 8rem; } +} + +/* ======================================== + JS transition helpers (used by core_components show/hide) + ======================================== */ + +.translate-y-4 { translate: 0 1rem; } +.translate-y-0 { translate: 0 0; } +.opacity-0 { opacity: 0; } +.opacity-100 { opacity: 1; } +.scale-95 { scale: 0.95; } +.scale-100 { scale: 1; } + +/* Duration classes used by JS.transition */ +.duration-200 { transition-duration: 200ms; } +.duration-300 { transition-duration: 300ms; } +.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); } +.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } + +/* ======================================== + DaisyUI component stubs (used in Phoenix home page and theme toggle) + ======================================== */ + +.card { + border-radius: var(--radius-box, 0.5rem); + overflow: hidden; +} + +.badge { + display: inline-flex; + align-items: center; + border-radius: var(--radius-selector, 0.25rem); + padding-inline: 0.5rem; + font-size: 0.875rem; + line-height: 1.25rem; + border: 1px solid currentColor; + width: fit-content; +} +.badge-sm { font-size: 0.75rem; line-height: 1rem; padding-inline: 0.375rem; } +.badge-warning { + border-color: var(--color-warning); + color: var(--color-warning-content); + background-color: var(--color-warning); +} + +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.5rem 1rem; + font-size: 0.875rem; + font-weight: 600; + border-radius: var(--radius-field, 0.25rem); + border: 1px solid transparent; + cursor: pointer; + transition: background-color 150ms, border-color 150ms; +} +.btn-primary { + background-color: var(--color-primary); + color: var(--color-primary-content); +} +.btn-primary:hover { + filter: brightness(0.9); +} + +/* ======================================== + Prose (minimal typography block for instructions) + ======================================== */ + +.prose { + line-height: 1.75; +} +.prose p { margin-top: 1em; margin-bottom: 1em; } +.prose :first-child { margin-top: 0; } +.prose :last-child { margin-bottom: 0; } +.prose a { color: var(--color-primary); text-decoration: underline; } +.prose strong { font-weight: 600; } +.prose-sm { font-size: 0.875rem; line-height: 1.5; } + +/* ======================================== + List styles + ======================================== */ + +.list-decimal { list-style-type: decimal; } +.list-inside { list-style-position: inside; } +.list-none { list-style-type: none; } diff --git a/assets/vendor/daisyui-theme.js b/assets/vendor/daisyui-theme.js deleted file mode 100644 index 169c806..0000000 --- a/assets/vendor/daisyui-theme.js +++ /dev/null @@ -1,124 +0,0 @@ -/** 🌼 - * @license MIT - * daisyUI bundle - * https://daisyui.com/ - */ - -var __defProp = Object.defineProperty; -var __getOwnPropNames = Object.getOwnPropertyNames; -var __getOwnPropDesc = Object.getOwnPropertyDescriptor; -var __hasOwnProp = Object.prototype.hasOwnProperty; -var __moduleCache = /* @__PURE__ */ new WeakMap; -var __toCommonJS = (from) => { - var entry = __moduleCache.get(from), desc; - if (entry) - return entry; - entry = __defProp({}, "__esModule", { value: true }); - if (from && typeof from === "object" || typeof from === "function") - __getOwnPropNames(from).map((key) => !__hasOwnProp.call(entry, key) && __defProp(entry, key, { - get: () => from[key], - enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable - })); - __moduleCache.set(from, entry); - return entry; -}; -var __export = (target, all) => { - for (var name in all) - __defProp(target, name, { - get: all[name], - enumerable: true, - configurable: true, - set: (newValue) => all[name] = () => newValue - }); -}; - -// packages/daisyui/theme/index.js -var exports_theme = {}; -__export(exports_theme, { - default: () => theme_default -}); -module.exports = __toCommonJS(exports_theme); - -// packages/daisyui/functions/plugin.js -var plugin = { - withOptions: (pluginFunction, configFunction = () => ({})) => { - const optionsFunction = (options) => { - const handler = pluginFunction(options); - const config = configFunction(options); - return { handler, config }; - }; - optionsFunction.__isOptionsFunction = true; - return optionsFunction; - } -}; - -// packages/daisyui/theme/object.js -var object_default = { cyberpunk: { "color-scheme": "light", "--color-base-100": "oklch(94.51% 0.179 104.32)", "--color-base-200": "oklch(91.51% 0.179 104.32)", "--color-base-300": "oklch(85.51% 0.179 104.32)", "--color-base-content": "oklch(0% 0 0)", "--color-primary": "oklch(74.22% 0.209 6.35)", "--color-primary-content": "oklch(14.844% 0.041 6.35)", "--color-secondary": "oklch(83.33% 0.184 204.72)", "--color-secondary-content": "oklch(16.666% 0.036 204.72)", "--color-accent": "oklch(71.86% 0.217 310.43)", "--color-accent-content": "oklch(14.372% 0.043 310.43)", "--color-neutral": "oklch(23.04% 0.065 269.31)", "--color-neutral-content": "oklch(94.51% 0.179 104.32)", "--color-info": "oklch(72.06% 0.191 231.6)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(64.8% 0.15 160)", "--color-success-content": "oklch(0% 0 0)", "--color-warning": "oklch(84.71% 0.199 83.87)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(71.76% 0.221 22.18)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "0rem", "--radius-field": "0rem", "--radius-box": "0rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, acid: { "color-scheme": "light", "--color-base-100": "oklch(98% 0 0)", "--color-base-200": "oklch(95% 0 0)", "--color-base-300": "oklch(91% 0 0)", "--color-base-content": "oklch(0% 0 0)", "--color-primary": "oklch(71.9% 0.357 330.759)", "--color-primary-content": "oklch(14.38% 0.071 330.759)", "--color-secondary": "oklch(73.37% 0.224 48.25)", "--color-secondary-content": "oklch(14.674% 0.044 48.25)", "--color-accent": "oklch(92.78% 0.264 122.962)", "--color-accent-content": "oklch(18.556% 0.052 122.962)", "--color-neutral": "oklch(21.31% 0.128 278.68)", "--color-neutral-content": "oklch(84.262% 0.025 278.68)", "--color-info": "oklch(60.72% 0.227 252.05)", "--color-info-content": "oklch(12.144% 0.045 252.05)", "--color-success": "oklch(85.72% 0.266 158.53)", "--color-success-content": "oklch(17.144% 0.053 158.53)", "--color-warning": "oklch(91.01% 0.212 100.5)", "--color-warning-content": "oklch(18.202% 0.042 100.5)", "--color-error": "oklch(64.84% 0.293 29.349)", "--color-error-content": "oklch(12.968% 0.058 29.349)", "--radius-selector": "1rem", "--radius-field": "1rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, black: { "color-scheme": "dark", "--color-base-100": "oklch(0% 0 0)", "--color-base-200": "oklch(19% 0 0)", "--color-base-300": "oklch(22% 0 0)", "--color-base-content": "oklch(87.609% 0 0)", "--color-primary": "oklch(35% 0 0)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(35% 0 0)", "--color-secondary-content": "oklch(100% 0 0)", "--color-accent": "oklch(35% 0 0)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(35% 0 0)", "--color-neutral-content": "oklch(100% 0 0)", "--color-info": "oklch(45.201% 0.313 264.052)", "--color-info-content": "oklch(89.04% 0.062 264.052)", "--color-success": "oklch(51.975% 0.176 142.495)", "--color-success-content": "oklch(90.395% 0.035 142.495)", "--color-warning": "oklch(96.798% 0.211 109.769)", "--color-warning-content": "oklch(19.359% 0.042 109.769)", "--color-error": "oklch(62.795% 0.257 29.233)", "--color-error-content": "oklch(12.559% 0.051 29.233)", "--radius-selector": "0rem", "--radius-field": "0rem", "--radius-box": "0rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, dark: { "color-scheme": "dark", "--color-base-100": "oklch(25.33% 0.016 252.42)", "--color-base-200": "oklch(23.26% 0.014 253.1)", "--color-base-300": "oklch(21.15% 0.012 254.09)", "--color-base-content": "oklch(97.807% 0.029 256.847)", "--color-primary": "oklch(58% 0.233 277.117)", "--color-primary-content": "oklch(96% 0.018 272.314)", "--color-secondary": "oklch(65% 0.241 354.308)", "--color-secondary-content": "oklch(94% 0.028 342.258)", "--color-accent": "oklch(77% 0.152 181.912)", "--color-accent-content": "oklch(38% 0.063 188.416)", "--color-neutral": "oklch(14% 0.005 285.823)", "--color-neutral-content": "oklch(92% 0.004 286.32)", "--color-info": "oklch(74% 0.16 232.661)", "--color-info-content": "oklch(29% 0.066 243.157)", "--color-success": "oklch(76% 0.177 163.223)", "--color-success-content": "oklch(37% 0.077 168.94)", "--color-warning": "oklch(82% 0.189 84.429)", "--color-warning-content": "oklch(41% 0.112 45.904)", "--color-error": "oklch(71% 0.194 13.428)", "--color-error-content": "oklch(27% 0.105 12.094)", "--radius-selector": "0.5rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, light: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(98% 0 0)", "--color-base-300": "oklch(95% 0 0)", "--color-base-content": "oklch(21% 0.006 285.885)", "--color-primary": "oklch(45% 0.24 277.023)", "--color-primary-content": "oklch(93% 0.034 272.788)", "--color-secondary": "oklch(65% 0.241 354.308)", "--color-secondary-content": "oklch(94% 0.028 342.258)", "--color-accent": "oklch(77% 0.152 181.912)", "--color-accent-content": "oklch(38% 0.063 188.416)", "--color-neutral": "oklch(14% 0.005 285.823)", "--color-neutral-content": "oklch(92% 0.004 286.32)", "--color-info": "oklch(74% 0.16 232.661)", "--color-info-content": "oklch(29% 0.066 243.157)", "--color-success": "oklch(76% 0.177 163.223)", "--color-success-content": "oklch(37% 0.077 168.94)", "--color-warning": "oklch(82% 0.189 84.429)", "--color-warning-content": "oklch(41% 0.112 45.904)", "--color-error": "oklch(71% 0.194 13.428)", "--color-error-content": "oklch(27% 0.105 12.094)", "--radius-selector": "0.5rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, luxury: { "color-scheme": "dark", "--color-base-100": "oklch(14.076% 0.004 285.822)", "--color-base-200": "oklch(20.219% 0.004 308.229)", "--color-base-300": "oklch(23.219% 0.004 308.229)", "--color-base-content": "oklch(75.687% 0.123 76.89)", "--color-primary": "oklch(100% 0 0)", "--color-primary-content": "oklch(20% 0 0)", "--color-secondary": "oklch(27.581% 0.064 261.069)", "--color-secondary-content": "oklch(85.516% 0.012 261.069)", "--color-accent": "oklch(36.674% 0.051 338.825)", "--color-accent-content": "oklch(87.334% 0.01 338.825)", "--color-neutral": "oklch(24.27% 0.057 59.825)", "--color-neutral-content": "oklch(93.203% 0.089 90.861)", "--color-info": "oklch(79.061% 0.121 237.133)", "--color-info-content": "oklch(15.812% 0.024 237.133)", "--color-success": "oklch(78.119% 0.192 132.154)", "--color-success-content": "oklch(15.623% 0.038 132.154)", "--color-warning": "oklch(86.127% 0.136 102.891)", "--color-warning-content": "oklch(17.225% 0.027 102.891)", "--color-error": "oklch(71.753% 0.176 22.568)", "--color-error-content": "oklch(14.35% 0.035 22.568)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, dracula: { "color-scheme": "dark", "--color-base-100": "oklch(28.822% 0.022 277.508)", "--color-base-200": "oklch(26.805% 0.02 277.508)", "--color-base-300": "oklch(24.787% 0.019 277.508)", "--color-base-content": "oklch(97.747% 0.007 106.545)", "--color-primary": "oklch(75.461% 0.183 346.812)", "--color-primary-content": "oklch(15.092% 0.036 346.812)", "--color-secondary": "oklch(74.202% 0.148 301.883)", "--color-secondary-content": "oklch(14.84% 0.029 301.883)", "--color-accent": "oklch(83.392% 0.124 66.558)", "--color-accent-content": "oklch(16.678% 0.024 66.558)", "--color-neutral": "oklch(39.445% 0.032 275.524)", "--color-neutral-content": "oklch(87.889% 0.006 275.524)", "--color-info": "oklch(88.263% 0.093 212.846)", "--color-info-content": "oklch(17.652% 0.018 212.846)", "--color-success": "oklch(87.099% 0.219 148.024)", "--color-success-content": "oklch(17.419% 0.043 148.024)", "--color-warning": "oklch(95.533% 0.134 112.757)", "--color-warning-content": "oklch(19.106% 0.026 112.757)", "--color-error": "oklch(68.22% 0.206 24.43)", "--color-error-content": "oklch(13.644% 0.041 24.43)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, retro: { "color-scheme": "light", "--color-base-100": "oklch(91.637% 0.034 90.515)", "--color-base-200": "oklch(88.272% 0.049 91.774)", "--color-base-300": "oklch(84.133% 0.065 90.856)", "--color-base-content": "oklch(41% 0.112 45.904)", "--color-primary": "oklch(80% 0.114 19.571)", "--color-primary-content": "oklch(39% 0.141 25.723)", "--color-secondary": "oklch(92% 0.084 155.995)", "--color-secondary-content": "oklch(44% 0.119 151.328)", "--color-accent": "oklch(68% 0.162 75.834)", "--color-accent-content": "oklch(41% 0.112 45.904)", "--color-neutral": "oklch(44% 0.011 73.639)", "--color-neutral-content": "oklch(86% 0.005 56.366)", "--color-info": "oklch(58% 0.158 241.966)", "--color-info-content": "oklch(96% 0.059 95.617)", "--color-success": "oklch(51% 0.096 186.391)", "--color-success-content": "oklch(96% 0.059 95.617)", "--color-warning": "oklch(64% 0.222 41.116)", "--color-warning-content": "oklch(96% 0.059 95.617)", "--color-error": "oklch(70% 0.191 22.216)", "--color-error-content": "oklch(40% 0.123 38.172)", "--radius-selector": "0.25rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, lofi: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(97% 0 0)", "--color-base-300": "oklch(94% 0 0)", "--color-base-content": "oklch(0% 0 0)", "--color-primary": "oklch(15.906% 0 0)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(21.455% 0.001 17.278)", "--color-secondary-content": "oklch(100% 0 0)", "--color-accent": "oklch(26.861% 0 0)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(0% 0 0)", "--color-neutral-content": "oklch(100% 0 0)", "--color-info": "oklch(79.54% 0.103 205.9)", "--color-info-content": "oklch(15.908% 0.02 205.9)", "--color-success": "oklch(90.13% 0.153 164.14)", "--color-success-content": "oklch(18.026% 0.03 164.14)", "--color-warning": "oklch(88.37% 0.135 79.94)", "--color-warning-content": "oklch(17.674% 0.027 79.94)", "--color-error": "oklch(78.66% 0.15 28.47)", "--color-error-content": "oklch(15.732% 0.03 28.47)", "--radius-selector": "2rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, valentine: { "color-scheme": "light", "--color-base-100": "oklch(97% 0.014 343.198)", "--color-base-200": "oklch(94% 0.028 342.258)", "--color-base-300": "oklch(89% 0.061 343.231)", "--color-base-content": "oklch(52% 0.223 3.958)", "--color-primary": "oklch(65% 0.241 354.308)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(62% 0.265 303.9)", "--color-secondary-content": "oklch(97% 0.014 308.299)", "--color-accent": "oklch(82% 0.111 230.318)", "--color-accent-content": "oklch(39% 0.09 240.876)", "--color-neutral": "oklch(40% 0.153 2.432)", "--color-neutral-content": "oklch(89% 0.061 343.231)", "--color-info": "oklch(86% 0.127 207.078)", "--color-info-content": "oklch(44% 0.11 240.79)", "--color-success": "oklch(84% 0.143 164.978)", "--color-success-content": "oklch(43% 0.095 166.913)", "--color-warning": "oklch(75% 0.183 55.934)", "--color-warning-content": "oklch(26% 0.079 36.259)", "--color-error": "oklch(63% 0.237 25.331)", "--color-error-content": "oklch(97% 0.013 17.38)", "--radius-selector": "1rem", "--radius-field": "2rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, nord: { "color-scheme": "light", "--color-base-100": "oklch(95.127% 0.007 260.731)", "--color-base-200": "oklch(93.299% 0.01 261.788)", "--color-base-300": "oklch(89.925% 0.016 262.749)", "--color-base-content": "oklch(32.437% 0.022 264.182)", "--color-primary": "oklch(59.435% 0.077 254.027)", "--color-primary-content": "oklch(11.887% 0.015 254.027)", "--color-secondary": "oklch(69.651% 0.059 248.687)", "--color-secondary-content": "oklch(13.93% 0.011 248.687)", "--color-accent": "oklch(77.464% 0.062 217.469)", "--color-accent-content": "oklch(15.492% 0.012 217.469)", "--color-neutral": "oklch(45.229% 0.035 264.131)", "--color-neutral-content": "oklch(89.925% 0.016 262.749)", "--color-info": "oklch(69.207% 0.062 332.664)", "--color-info-content": "oklch(13.841% 0.012 332.664)", "--color-success": "oklch(76.827% 0.074 131.063)", "--color-success-content": "oklch(15.365% 0.014 131.063)", "--color-warning": "oklch(85.486% 0.089 84.093)", "--color-warning-content": "oklch(17.097% 0.017 84.093)", "--color-error": "oklch(60.61% 0.12 15.341)", "--color-error-content": "oklch(12.122% 0.024 15.341)", "--radius-selector": "1rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, lemonade: { "color-scheme": "light", "--color-base-100": "oklch(98.71% 0.02 123.72)", "--color-base-200": "oklch(91.8% 0.018 123.72)", "--color-base-300": "oklch(84.89% 0.017 123.72)", "--color-base-content": "oklch(19.742% 0.004 123.72)", "--color-primary": "oklch(58.92% 0.199 134.6)", "--color-primary-content": "oklch(11.784% 0.039 134.6)", "--color-secondary": "oklch(77.75% 0.196 111.09)", "--color-secondary-content": "oklch(15.55% 0.039 111.09)", "--color-accent": "oklch(85.39% 0.201 100.73)", "--color-accent-content": "oklch(17.078% 0.04 100.73)", "--color-neutral": "oklch(30.98% 0.075 108.6)", "--color-neutral-content": "oklch(86.196% 0.015 108.6)", "--color-info": "oklch(86.19% 0.047 224.14)", "--color-info-content": "oklch(17.238% 0.009 224.14)", "--color-success": "oklch(86.19% 0.047 157.85)", "--color-success-content": "oklch(17.238% 0.009 157.85)", "--color-warning": "oklch(86.19% 0.047 102.15)", "--color-warning-content": "oklch(17.238% 0.009 102.15)", "--color-error": "oklch(86.19% 0.047 25.85)", "--color-error-content": "oklch(17.238% 0.009 25.85)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, garden: { "color-scheme": "light", "--color-base-100": "oklch(92.951% 0.002 17.197)", "--color-base-200": "oklch(86.445% 0.002 17.197)", "--color-base-300": "oklch(79.938% 0.001 17.197)", "--color-base-content": "oklch(16.961% 0.001 17.32)", "--color-primary": "oklch(62.45% 0.278 3.836)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(48.495% 0.11 355.095)", "--color-secondary-content": "oklch(89.699% 0.022 355.095)", "--color-accent": "oklch(56.273% 0.054 154.39)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(24.155% 0.049 89.07)", "--color-neutral-content": "oklch(92.951% 0.002 17.197)", "--color-info": "oklch(72.06% 0.191 231.6)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(64.8% 0.15 160)", "--color-success-content": "oklch(0% 0 0)", "--color-warning": "oklch(84.71% 0.199 83.87)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(71.76% 0.221 22.18)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, aqua: { "color-scheme": "dark", "--color-base-100": "oklch(37% 0.146 265.522)", "--color-base-200": "oklch(28% 0.091 267.935)", "--color-base-300": "oklch(22% 0.091 267.935)", "--color-base-content": "oklch(90% 0.058 230.902)", "--color-primary": "oklch(85.661% 0.144 198.645)", "--color-primary-content": "oklch(40.124% 0.068 197.603)", "--color-secondary": "oklch(60.682% 0.108 309.782)", "--color-secondary-content": "oklch(96% 0.016 293.756)", "--color-accent": "oklch(93.426% 0.102 94.555)", "--color-accent-content": "oklch(18.685% 0.02 94.555)", "--color-neutral": "oklch(27% 0.146 265.522)", "--color-neutral-content": "oklch(80% 0.146 265.522)", "--color-info": "oklch(54.615% 0.215 262.88)", "--color-info-content": "oklch(90.923% 0.043 262.88)", "--color-success": "oklch(62.705% 0.169 149.213)", "--color-success-content": "oklch(12.541% 0.033 149.213)", "--color-warning": "oklch(66.584% 0.157 58.318)", "--color-warning-content": "oklch(27% 0.077 45.635)", "--color-error": "oklch(73.95% 0.19 27.33)", "--color-error-content": "oklch(14.79% 0.038 27.33)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, corporate: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(93% 0 0)", "--color-base-300": "oklch(86% 0 0)", "--color-base-content": "oklch(22.389% 0.031 278.072)", "--color-primary": "oklch(58% 0.158 241.966)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(55% 0.046 257.417)", "--color-secondary-content": "oklch(100% 0 0)", "--color-accent": "oklch(60% 0.118 184.704)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(0% 0 0)", "--color-neutral-content": "oklch(100% 0 0)", "--color-info": "oklch(60% 0.126 221.723)", "--color-info-content": "oklch(100% 0 0)", "--color-success": "oklch(62% 0.194 149.214)", "--color-success-content": "oklch(100% 0 0)", "--color-warning": "oklch(85% 0.199 91.936)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(70% 0.191 22.216)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "0.25rem", "--radius-field": "0.25rem", "--radius-box": "0.25rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, pastel: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(98.462% 0.001 247.838)", "--color-base-300": "oklch(92.462% 0.001 247.838)", "--color-base-content": "oklch(20% 0 0)", "--color-primary": "oklch(90% 0.063 306.703)", "--color-primary-content": "oklch(49% 0.265 301.924)", "--color-secondary": "oklch(89% 0.058 10.001)", "--color-secondary-content": "oklch(51% 0.222 16.935)", "--color-accent": "oklch(90% 0.093 164.15)", "--color-accent-content": "oklch(50% 0.118 165.612)", "--color-neutral": "oklch(55% 0.046 257.417)", "--color-neutral-content": "oklch(92% 0.013 255.508)", "--color-info": "oklch(86% 0.127 207.078)", "--color-info-content": "oklch(52% 0.105 223.128)", "--color-success": "oklch(87% 0.15 154.449)", "--color-success-content": "oklch(52% 0.154 150.069)", "--color-warning": "oklch(83% 0.128 66.29)", "--color-warning-content": "oklch(55% 0.195 38.402)", "--color-error": "oklch(80% 0.114 19.571)", "--color-error-content": "oklch(50% 0.213 27.518)", "--radius-selector": "1rem", "--radius-field": "2rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "2px", "--depth": "0", "--noise": "0" }, bumblebee: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(97% 0 0)", "--color-base-300": "oklch(92% 0 0)", "--color-base-content": "oklch(20% 0 0)", "--color-primary": "oklch(85% 0.199 91.936)", "--color-primary-content": "oklch(42% 0.095 57.708)", "--color-secondary": "oklch(75% 0.183 55.934)", "--color-secondary-content": "oklch(40% 0.123 38.172)", "--color-accent": "oklch(0% 0 0)", "--color-accent-content": "oklch(100% 0 0)", "--color-neutral": "oklch(37% 0.01 67.558)", "--color-neutral-content": "oklch(92% 0.003 48.717)", "--color-info": "oklch(74% 0.16 232.661)", "--color-info-content": "oklch(39% 0.09 240.876)", "--color-success": "oklch(76% 0.177 163.223)", "--color-success-content": "oklch(37% 0.077 168.94)", "--color-warning": "oklch(82% 0.189 84.429)", "--color-warning-content": "oklch(41% 0.112 45.904)", "--color-error": "oklch(70% 0.191 22.216)", "--color-error-content": "oklch(39% 0.141 25.723)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, coffee: { "color-scheme": "dark", "--color-base-100": "oklch(24% 0.023 329.708)", "--color-base-200": "oklch(21% 0.021 329.708)", "--color-base-300": "oklch(16% 0.019 329.708)", "--color-base-content": "oklch(72.354% 0.092 79.129)", "--color-primary": "oklch(71.996% 0.123 62.756)", "--color-primary-content": "oklch(14.399% 0.024 62.756)", "--color-secondary": "oklch(34.465% 0.029 199.194)", "--color-secondary-content": "oklch(86.893% 0.005 199.194)", "--color-accent": "oklch(42.621% 0.074 224.389)", "--color-accent-content": "oklch(88.524% 0.014 224.389)", "--color-neutral": "oklch(16.51% 0.015 326.261)", "--color-neutral-content": "oklch(83.302% 0.003 326.261)", "--color-info": "oklch(79.49% 0.063 184.558)", "--color-info-content": "oklch(15.898% 0.012 184.558)", "--color-success": "oklch(74.722% 0.072 131.116)", "--color-success-content": "oklch(14.944% 0.014 131.116)", "--color-warning": "oklch(88.15% 0.14 87.722)", "--color-warning-content": "oklch(17.63% 0.028 87.722)", "--color-error": "oklch(77.318% 0.128 31.871)", "--color-error-content": "oklch(15.463% 0.025 31.871)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, silk: { "color-scheme": "light", "--color-base-100": "oklch(97% 0.0035 67.78)", "--color-base-200": "oklch(95% 0.0081 61.42)", "--color-base-300": "oklch(90% 0.0081 61.42)", "--color-base-content": "oklch(40% 0.0081 61.42)", "--color-primary": "oklch(23.27% 0.0249 284.3)", "--color-primary-content": "oklch(94.22% 0.2505 117.44)", "--color-secondary": "oklch(23.27% 0.0249 284.3)", "--color-secondary-content": "oklch(73.92% 0.2135 50.94)", "--color-accent": "oklch(23.27% 0.0249 284.3)", "--color-accent-content": "oklch(88.92% 0.2061 189.9)", "--color-neutral": "oklch(20% 0 0)", "--color-neutral-content": "oklch(80% 0.0081 61.42)", "--color-info": "oklch(80.39% 0.1148 241.68)", "--color-info-content": "oklch(30.39% 0.1148 241.68)", "--color-success": "oklch(83.92% 0.0901 136.87)", "--color-success-content": "oklch(23.92% 0.0901 136.87)", "--color-warning": "oklch(83.92% 0.1085 80)", "--color-warning-content": "oklch(43.92% 0.1085 80)", "--color-error": "oklch(75.1% 0.1814 22.37)", "--color-error-content": "oklch(35.1% 0.1814 22.37)", "--radius-selector": "2rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "2px", "--depth": "1", "--noise": "0" }, sunset: { "color-scheme": "dark", "--color-base-100": "oklch(22% 0.019 237.69)", "--color-base-200": "oklch(20% 0.019 237.69)", "--color-base-300": "oklch(18% 0.019 237.69)", "--color-base-content": "oklch(77.383% 0.043 245.096)", "--color-primary": "oklch(74.703% 0.158 39.947)", "--color-primary-content": "oklch(14.94% 0.031 39.947)", "--color-secondary": "oklch(72.537% 0.177 2.72)", "--color-secondary-content": "oklch(14.507% 0.035 2.72)", "--color-accent": "oklch(71.294% 0.166 299.844)", "--color-accent-content": "oklch(14.258% 0.033 299.844)", "--color-neutral": "oklch(26% 0.019 237.69)", "--color-neutral-content": "oklch(70% 0.019 237.69)", "--color-info": "oklch(85.559% 0.085 206.015)", "--color-info-content": "oklch(17.111% 0.017 206.015)", "--color-success": "oklch(85.56% 0.085 144.778)", "--color-success-content": "oklch(17.112% 0.017 144.778)", "--color-warning": "oklch(85.569% 0.084 74.427)", "--color-warning-content": "oklch(17.113% 0.016 74.427)", "--color-error": "oklch(85.511% 0.078 16.886)", "--color-error-content": "oklch(17.102% 0.015 16.886)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, synthwave: { "color-scheme": "dark", "--color-base-100": "oklch(15% 0.09 281.288)", "--color-base-200": "oklch(20% 0.09 281.288)", "--color-base-300": "oklch(25% 0.09 281.288)", "--color-base-content": "oklch(78% 0.115 274.713)", "--color-primary": "oklch(71% 0.202 349.761)", "--color-primary-content": "oklch(28% 0.109 3.907)", "--color-secondary": "oklch(82% 0.111 230.318)", "--color-secondary-content": "oklch(29% 0.066 243.157)", "--color-accent": "oklch(75% 0.183 55.934)", "--color-accent-content": "oklch(26% 0.079 36.259)", "--color-neutral": "oklch(45% 0.24 277.023)", "--color-neutral-content": "oklch(87% 0.065 274.039)", "--color-info": "oklch(74% 0.16 232.661)", "--color-info-content": "oklch(29% 0.066 243.157)", "--color-success": "oklch(77% 0.152 181.912)", "--color-success-content": "oklch(27% 0.046 192.524)", "--color-warning": "oklch(90% 0.182 98.111)", "--color-warning-content": "oklch(42% 0.095 57.708)", "--color-error": "oklch(73.7% 0.121 32.639)", "--color-error-content": "oklch(23.501% 0.096 290.329)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, dim: { "color-scheme": "dark", "--color-base-100": "oklch(30.857% 0.023 264.149)", "--color-base-200": "oklch(28.036% 0.019 264.182)", "--color-base-300": "oklch(26.346% 0.018 262.177)", "--color-base-content": "oklch(82.901% 0.031 222.959)", "--color-primary": "oklch(86.133% 0.141 139.549)", "--color-primary-content": "oklch(17.226% 0.028 139.549)", "--color-secondary": "oklch(73.375% 0.165 35.353)", "--color-secondary-content": "oklch(14.675% 0.033 35.353)", "--color-accent": "oklch(74.229% 0.133 311.379)", "--color-accent-content": "oklch(14.845% 0.026 311.379)", "--color-neutral": "oklch(24.731% 0.02 264.094)", "--color-neutral-content": "oklch(82.901% 0.031 222.959)", "--color-info": "oklch(86.078% 0.142 206.182)", "--color-info-content": "oklch(17.215% 0.028 206.182)", "--color-success": "oklch(86.171% 0.142 166.534)", "--color-success-content": "oklch(17.234% 0.028 166.534)", "--color-warning": "oklch(86.163% 0.142 94.818)", "--color-warning-content": "oklch(17.232% 0.028 94.818)", "--color-error": "oklch(82.418% 0.099 33.756)", "--color-error-content": "oklch(16.483% 0.019 33.756)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, abyss: { "color-scheme": "dark", "--color-base-100": "oklch(20% 0.08 209)", "--color-base-200": "oklch(15% 0.08 209)", "--color-base-300": "oklch(10% 0.08 209)", "--color-base-content": "oklch(90% 0.076 70.697)", "--color-primary": "oklch(92% 0.2653 125)", "--color-primary-content": "oklch(50% 0.2653 125)", "--color-secondary": "oklch(83.27% 0.0764 298.3)", "--color-secondary-content": "oklch(43.27% 0.0764 298.3)", "--color-accent": "oklch(43% 0 0)", "--color-accent-content": "oklch(98% 0 0)", "--color-neutral": "oklch(30% 0.08 209)", "--color-neutral-content": "oklch(90% 0.076 70.697)", "--color-info": "oklch(74% 0.16 232.661)", "--color-info-content": "oklch(29% 0.066 243.157)", "--color-success": "oklch(79% 0.209 151.711)", "--color-success-content": "oklch(26% 0.065 152.934)", "--color-warning": "oklch(84.8% 0.1962 84.62)", "--color-warning-content": "oklch(44.8% 0.1962 84.62)", "--color-error": "oklch(65% 0.1985 24.22)", "--color-error-content": "oklch(27% 0.1985 24.22)", "--radius-selector": "2rem", "--radius-field": "0.25rem", "--radius-box": "0.5rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, forest: { "color-scheme": "dark", "--color-base-100": "oklch(20.84% 0.008 17.911)", "--color-base-200": "oklch(18.522% 0.007 17.911)", "--color-base-300": "oklch(16.203% 0.007 17.911)", "--color-base-content": "oklch(83.768% 0.001 17.911)", "--color-primary": "oklch(68.628% 0.185 148.958)", "--color-primary-content": "oklch(0% 0 0)", "--color-secondary": "oklch(69.776% 0.135 168.327)", "--color-secondary-content": "oklch(13.955% 0.027 168.327)", "--color-accent": "oklch(70.628% 0.119 185.713)", "--color-accent-content": "oklch(14.125% 0.023 185.713)", "--color-neutral": "oklch(30.698% 0.039 171.364)", "--color-neutral-content": "oklch(86.139% 0.007 171.364)", "--color-info": "oklch(72.06% 0.191 231.6)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(64.8% 0.15 160)", "--color-success-content": "oklch(0% 0 0)", "--color-warning": "oklch(84.71% 0.199 83.87)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(71.76% 0.221 22.18)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "1rem", "--radius-field": "2rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, night: { "color-scheme": "dark", "--color-base-100": "oklch(20.768% 0.039 265.754)", "--color-base-200": "oklch(19.314% 0.037 265.754)", "--color-base-300": "oklch(17.86% 0.034 265.754)", "--color-base-content": "oklch(84.153% 0.007 265.754)", "--color-primary": "oklch(75.351% 0.138 232.661)", "--color-primary-content": "oklch(15.07% 0.027 232.661)", "--color-secondary": "oklch(68.011% 0.158 276.934)", "--color-secondary-content": "oklch(13.602% 0.031 276.934)", "--color-accent": "oklch(72.36% 0.176 350.048)", "--color-accent-content": "oklch(14.472% 0.035 350.048)", "--color-neutral": "oklch(27.949% 0.036 260.03)", "--color-neutral-content": "oklch(85.589% 0.007 260.03)", "--color-info": "oklch(68.455% 0.148 237.251)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(78.452% 0.132 181.911)", "--color-success-content": "oklch(15.69% 0.026 181.911)", "--color-warning": "oklch(83.242% 0.139 82.95)", "--color-warning-content": "oklch(16.648% 0.027 82.95)", "--color-error": "oklch(71.785% 0.17 13.118)", "--color-error-content": "oklch(14.357% 0.034 13.118)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, caramellatte: { "color-scheme": "light", "--color-base-100": "oklch(98% 0.016 73.684)", "--color-base-200": "oklch(95% 0.038 75.164)", "--color-base-300": "oklch(90% 0.076 70.697)", "--color-base-content": "oklch(40% 0.123 38.172)", "--color-primary": "oklch(0% 0 0)", "--color-primary-content": "oklch(100% 0 0)", "--color-secondary": "oklch(22.45% 0.075 37.85)", "--color-secondary-content": "oklch(90% 0.076 70.697)", "--color-accent": "oklch(46.44% 0.111 37.85)", "--color-accent-content": "oklch(90% 0.076 70.697)", "--color-neutral": "oklch(55% 0.195 38.402)", "--color-neutral-content": "oklch(98% 0.016 73.684)", "--color-info": "oklch(42% 0.199 265.638)", "--color-info-content": "oklch(90% 0.076 70.697)", "--color-success": "oklch(43% 0.095 166.913)", "--color-success-content": "oklch(90% 0.076 70.697)", "--color-warning": "oklch(82% 0.189 84.429)", "--color-warning-content": "oklch(41% 0.112 45.904)", "--color-error": "oklch(70% 0.191 22.216)", "--color-error-content": "oklch(39% 0.141 25.723)", "--radius-selector": "2rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "2px", "--depth": "1", "--noise": "1" }, autumn: { "color-scheme": "light", "--color-base-100": "oklch(95.814% 0 0)", "--color-base-200": "oklch(89.107% 0 0)", "--color-base-300": "oklch(82.4% 0 0)", "--color-base-content": "oklch(19.162% 0 0)", "--color-primary": "oklch(40.723% 0.161 17.53)", "--color-primary-content": "oklch(88.144% 0.032 17.53)", "--color-secondary": "oklch(61.676% 0.169 23.865)", "--color-secondary-content": "oklch(12.335% 0.033 23.865)", "--color-accent": "oklch(73.425% 0.094 60.729)", "--color-accent-content": "oklch(14.685% 0.018 60.729)", "--color-neutral": "oklch(54.367% 0.037 51.902)", "--color-neutral-content": "oklch(90.873% 0.007 51.902)", "--color-info": "oklch(69.224% 0.097 207.284)", "--color-info-content": "oklch(13.844% 0.019 207.284)", "--color-success": "oklch(60.995% 0.08 174.616)", "--color-success-content": "oklch(12.199% 0.016 174.616)", "--color-warning": "oklch(70.081% 0.164 56.844)", "--color-warning-content": "oklch(14.016% 0.032 56.844)", "--color-error": "oklch(53.07% 0.241 24.16)", "--color-error-content": "oklch(90.614% 0.048 24.16)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, emerald: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(93% 0 0)", "--color-base-300": "oklch(86% 0 0)", "--color-base-content": "oklch(35.519% 0.032 262.988)", "--color-primary": "oklch(76.662% 0.135 153.45)", "--color-primary-content": "oklch(33.387% 0.04 162.24)", "--color-secondary": "oklch(61.302% 0.202 261.294)", "--color-secondary-content": "oklch(100% 0 0)", "--color-accent": "oklch(72.772% 0.149 33.2)", "--color-accent-content": "oklch(0% 0 0)", "--color-neutral": "oklch(35.519% 0.032 262.988)", "--color-neutral-content": "oklch(98.462% 0.001 247.838)", "--color-info": "oklch(72.06% 0.191 231.6)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(64.8% 0.15 160)", "--color-success-content": "oklch(0% 0 0)", "--color-warning": "oklch(84.71% 0.199 83.87)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(71.76% 0.221 22.18)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, cupcake: { "color-scheme": "light", "--color-base-100": "oklch(97.788% 0.004 56.375)", "--color-base-200": "oklch(93.982% 0.007 61.449)", "--color-base-300": "oklch(91.586% 0.006 53.44)", "--color-base-content": "oklch(23.574% 0.066 313.189)", "--color-primary": "oklch(85% 0.138 181.071)", "--color-primary-content": "oklch(43% 0.078 188.216)", "--color-secondary": "oklch(89% 0.061 343.231)", "--color-secondary-content": "oklch(45% 0.187 3.815)", "--color-accent": "oklch(90% 0.076 70.697)", "--color-accent-content": "oklch(47% 0.157 37.304)", "--color-neutral": "oklch(27% 0.006 286.033)", "--color-neutral-content": "oklch(92% 0.004 286.32)", "--color-info": "oklch(68% 0.169 237.323)", "--color-info-content": "oklch(29% 0.066 243.157)", "--color-success": "oklch(69% 0.17 162.48)", "--color-success-content": "oklch(26% 0.051 172.552)", "--color-warning": "oklch(79% 0.184 86.047)", "--color-warning-content": "oklch(28% 0.066 53.813)", "--color-error": "oklch(64% 0.246 16.439)", "--color-error-content": "oklch(27% 0.105 12.094)", "--radius-selector": "1rem", "--radius-field": "2rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "2px", "--depth": "1", "--noise": "0" }, cmyk: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(95% 0 0)", "--color-base-300": "oklch(90% 0 0)", "--color-base-content": "oklch(20% 0 0)", "--color-primary": "oklch(71.772% 0.133 239.443)", "--color-primary-content": "oklch(14.354% 0.026 239.443)", "--color-secondary": "oklch(64.476% 0.202 359.339)", "--color-secondary-content": "oklch(12.895% 0.04 359.339)", "--color-accent": "oklch(94.228% 0.189 105.306)", "--color-accent-content": "oklch(18.845% 0.037 105.306)", "--color-neutral": "oklch(21.778% 0 0)", "--color-neutral-content": "oklch(84.355% 0 0)", "--color-info": "oklch(68.475% 0.094 217.284)", "--color-info-content": "oklch(13.695% 0.018 217.284)", "--color-success": "oklch(46.949% 0.162 321.406)", "--color-success-content": "oklch(89.389% 0.032 321.406)", "--color-warning": "oklch(71.236% 0.159 52.023)", "--color-warning-content": "oklch(14.247% 0.031 52.023)", "--color-error": "oklch(62.013% 0.208 28.717)", "--color-error-content": "oklch(12.402% 0.041 28.717)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, business: { "color-scheme": "dark", "--color-base-100": "oklch(24.353% 0 0)", "--color-base-200": "oklch(22.648% 0 0)", "--color-base-300": "oklch(20.944% 0 0)", "--color-base-content": "oklch(84.87% 0 0)", "--color-primary": "oklch(41.703% 0.099 251.473)", "--color-primary-content": "oklch(88.34% 0.019 251.473)", "--color-secondary": "oklch(64.092% 0.027 229.389)", "--color-secondary-content": "oklch(12.818% 0.005 229.389)", "--color-accent": "oklch(67.271% 0.167 35.791)", "--color-accent-content": "oklch(13.454% 0.033 35.791)", "--color-neutral": "oklch(27.441% 0.013 253.041)", "--color-neutral-content": "oklch(85.488% 0.002 253.041)", "--color-info": "oklch(62.616% 0.143 240.033)", "--color-info-content": "oklch(12.523% 0.028 240.033)", "--color-success": "oklch(70.226% 0.094 156.596)", "--color-success-content": "oklch(14.045% 0.018 156.596)", "--color-warning": "oklch(77.482% 0.115 81.519)", "--color-warning-content": "oklch(15.496% 0.023 81.519)", "--color-error": "oklch(51.61% 0.146 29.674)", "--color-error-content": "oklch(90.322% 0.029 29.674)", "--radius-selector": "0rem", "--radius-field": "0.25rem", "--radius-box": "0.25rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, winter: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(97.466% 0.011 259.822)", "--color-base-300": "oklch(93.268% 0.016 262.751)", "--color-base-content": "oklch(41.886% 0.053 255.824)", "--color-primary": "oklch(56.86% 0.255 257.57)", "--color-primary-content": "oklch(91.372% 0.051 257.57)", "--color-secondary": "oklch(42.551% 0.161 282.339)", "--color-secondary-content": "oklch(88.51% 0.032 282.339)", "--color-accent": "oklch(59.939% 0.191 335.171)", "--color-accent-content": "oklch(11.988% 0.038 335.171)", "--color-neutral": "oklch(19.616% 0.063 257.651)", "--color-neutral-content": "oklch(83.923% 0.012 257.651)", "--color-info": "oklch(88.127% 0.085 214.515)", "--color-info-content": "oklch(17.625% 0.017 214.515)", "--color-success": "oklch(80.494% 0.077 197.823)", "--color-success-content": "oklch(16.098% 0.015 197.823)", "--color-warning": "oklch(89.172% 0.045 71.47)", "--color-warning-content": "oklch(17.834% 0.009 71.47)", "--color-error": "oklch(73.092% 0.11 20.076)", "--color-error-content": "oklch(14.618% 0.022 20.076)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" }, halloween: { "color-scheme": "dark", "--color-base-100": "oklch(21% 0.006 56.043)", "--color-base-200": "oklch(14% 0.004 49.25)", "--color-base-300": "oklch(0% 0 0)", "--color-base-content": "oklch(84.955% 0 0)", "--color-primary": "oklch(77.48% 0.204 60.62)", "--color-primary-content": "oklch(19.693% 0.004 196.779)", "--color-secondary": "oklch(45.98% 0.248 305.03)", "--color-secondary-content": "oklch(89.196% 0.049 305.03)", "--color-accent": "oklch(64.8% 0.223 136.073)", "--color-accent-content": "oklch(0% 0 0)", "--color-neutral": "oklch(24.371% 0.046 65.681)", "--color-neutral-content": "oklch(84.874% 0.009 65.681)", "--color-info": "oklch(54.615% 0.215 262.88)", "--color-info-content": "oklch(90.923% 0.043 262.88)", "--color-success": "oklch(62.705% 0.169 149.213)", "--color-success-content": "oklch(12.541% 0.033 149.213)", "--color-warning": "oklch(66.584% 0.157 58.318)", "--color-warning-content": "oklch(13.316% 0.031 58.318)", "--color-error": "oklch(65.72% 0.199 27.33)", "--color-error-content": "oklch(13.144% 0.039 27.33)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, fantasy: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(93% 0 0)", "--color-base-300": "oklch(86% 0 0)", "--color-base-content": "oklch(27.807% 0.029 256.847)", "--color-primary": "oklch(37.45% 0.189 325.02)", "--color-primary-content": "oklch(87.49% 0.037 325.02)", "--color-secondary": "oklch(53.92% 0.162 241.36)", "--color-secondary-content": "oklch(90.784% 0.032 241.36)", "--color-accent": "oklch(75.98% 0.204 56.72)", "--color-accent-content": "oklch(15.196% 0.04 56.72)", "--color-neutral": "oklch(27.807% 0.029 256.847)", "--color-neutral-content": "oklch(85.561% 0.005 256.847)", "--color-info": "oklch(72.06% 0.191 231.6)", "--color-info-content": "oklch(0% 0 0)", "--color-success": "oklch(64.8% 0.15 160)", "--color-success-content": "oklch(0% 0 0)", "--color-warning": "oklch(84.71% 0.199 83.87)", "--color-warning-content": "oklch(0% 0 0)", "--color-error": "oklch(71.76% 0.221 22.18)", "--color-error-content": "oklch(0% 0 0)", "--radius-selector": "1rem", "--radius-field": "0.5rem", "--radius-box": "1rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "1", "--noise": "0" }, wireframe: { "color-scheme": "light", "--color-base-100": "oklch(100% 0 0)", "--color-base-200": "oklch(97% 0 0)", "--color-base-300": "oklch(94% 0 0)", "--color-base-content": "oklch(20% 0 0)", "--color-primary": "oklch(87% 0 0)", "--color-primary-content": "oklch(26% 0 0)", "--color-secondary": "oklch(87% 0 0)", "--color-secondary-content": "oklch(26% 0 0)", "--color-accent": "oklch(87% 0 0)", "--color-accent-content": "oklch(26% 0 0)", "--color-neutral": "oklch(87% 0 0)", "--color-neutral-content": "oklch(26% 0 0)", "--color-info": "oklch(44% 0.11 240.79)", "--color-info-content": "oklch(90% 0.058 230.902)", "--color-success": "oklch(43% 0.095 166.913)", "--color-success-content": "oklch(90% 0.093 164.15)", "--color-warning": "oklch(47% 0.137 46.201)", "--color-warning-content": "oklch(92% 0.12 95.746)", "--color-error": "oklch(44% 0.177 26.899)", "--color-error-content": "oklch(88% 0.062 18.334)", "--radius-selector": "0rem", "--radius-field": "0.25rem", "--radius-box": "0.25rem", "--size-selector": "0.25rem", "--size-field": "0.25rem", "--border": "1px", "--depth": "0", "--noise": "0" } }; - -// packages/daisyui/theme/index.js -var theme_default = plugin.withOptions((options = {}) => { - return ({ addBase }) => { - const { - name = "custom-theme", - default: isDefault = false, - prefersdark = false, - "color-scheme": colorScheme = "normal", - root = ":root", - ...customThemeTokens - } = options; - let selector = `${root}:has(input.theme-controller[value=${name}]:checked),[data-theme="${name}"]`; - if (isDefault) { - selector = `:where(${root}),${selector}`; - } - let themeTokens = { ...customThemeTokens }; - if (object_default[name]) { - const builtinTheme = object_default[name]; - themeTokens = { - ...builtinTheme, - ...customThemeTokens, - "color-scheme": colorScheme || builtinTheme.colorScheme - }; - } - const baseStyles = { - [selector]: { - "color-scheme": themeTokens["color-scheme"] || colorScheme, - ...themeTokens - } - }; - if (prefersdark) { - addBase({ - "@media (prefers-color-scheme: dark)": { - [root]: baseStyles[selector] - } - }); - } - addBase(baseStyles); - }; -}); - - -/* - - MIT License - - Copyright (c) 2020 Pouya Saadeghi – https://daisyui.com - - Permission is hereby granted, free of charge, to any person obtaining a copy - of this software and associated documentation files (the "Software"), to deal - in the Software without restriction, including without limitation the rights - to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - copies of the Software, and to permit persons to whom the Software is - furnished to do so, subject to the following conditions: - - The above copyright notice and this permission notice shall be included in all - copies or substantial portions of the Software. - - THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - SOFTWARE. - -*/ diff --git a/assets/vendor/heroicons.js b/assets/vendor/heroicons.js deleted file mode 100644 index 296f80e..0000000 --- a/assets/vendor/heroicons.js +++ /dev/null @@ -1,43 +0,0 @@ -const plugin = require("tailwindcss/plugin") -const fs = require("fs") -const path = require("path") - -module.exports = plugin(function({matchComponents, theme}) { - let iconsDir = path.join(__dirname, "../../deps/heroicons/optimized") - let values = {} - let icons = [ - ["", "/24/outline"], - ["-solid", "/24/solid"], - ["-mini", "/20/solid"], - ["-micro", "/16/solid"] - ] - icons.forEach(([suffix, dir]) => { - fs.readdirSync(path.join(iconsDir, dir)).forEach(file => { - let name = path.basename(file, ".svg") + suffix - values[name] = {name, fullPath: path.join(iconsDir, dir, file)} - }) - }) - matchComponents({ - "hero": ({name, fullPath}) => { - let content = fs.readFileSync(fullPath).toString().replace(/\r?\n|\r/g, "") - content = encodeURIComponent(content) - let size = theme("spacing.6") - if (name.endsWith("-mini")) { - size = theme("spacing.5") - } else if (name.endsWith("-micro")) { - size = theme("spacing.4") - } - return { - [`--hero-${name}`]: `url('data:image/svg+xml;utf8,${content}')`, - "-webkit-mask": `var(--hero-${name})`, - "mask": `var(--hero-${name})`, - "mask-repeat": "no-repeat", - "background-color": "currentColor", - "vertical-align": "middle", - "display": "inline-block", - "width": size, - "height": size - } - } - }, {values}) -}) diff --git a/config/config.exs b/config/config.exs index 6b9b752..d306d3c 100644 --- a/config/config.exs +++ b/config/config.exs @@ -57,17 +57,10 @@ config :esbuild, simpleshop_theme_shop_css: [ args: ~w(css/shop.css --bundle --outdir=../priv/static/assets/css), cd: Path.expand("../assets", __DIR__) - ] - -# Configure tailwind (the version is required) -config :tailwind, - version: "4.1.7", - simpleshop_theme: [ - args: ~w( - --input=assets/css/app.css - --output=priv/static/assets/css/app.css - ), - cd: Path.expand("..", __DIR__) + ], + simpleshop_theme_admin_css: [ + args: ~w(css/admin.css --bundle --outdir=../priv/static/assets/css), + cd: Path.expand("../assets", __DIR__) ] # Configures Elixir's Logger diff --git a/config/dev.exs b/config/dev.exs index e4967ec..8444c3a 100644 --- a/config/dev.exs +++ b/config/dev.exs @@ -27,7 +27,8 @@ config :simpleshop_theme, SimpleshopThemeWeb.Endpoint, esbuild: {Esbuild, :install_and_run, [:simpleshop_theme, ~w(--sourcemap=inline --watch)]}, esbuild_shop_css: {Esbuild, :install_and_run, [:simpleshop_theme_shop_css, ~w(--sourcemap=inline --watch)]}, - tailwind: {Tailwind, :install_and_run, [:simpleshop_theme, ~w(--watch)]} + esbuild_admin_css: + {Esbuild, :install_and_run, [:simpleshop_theme_admin_css, ~w(--sourcemap=inline --watch)]} ] # ## SSL Support diff --git a/lib/mix/tasks/generate_admin_icons.ex b/lib/mix/tasks/generate_admin_icons.ex new file mode 100644 index 0000000..6263142 --- /dev/null +++ b/lib/mix/tasks/generate_admin_icons.ex @@ -0,0 +1,126 @@ +defmodule Mix.Tasks.GenerateAdminIcons do + @moduledoc """ + Generates static CSS for heroicon classes used in admin templates. + + Scans `lib/` for `hero-*` class references, reads the matching SVGs from + `deps/heroicons/optimized/`, and writes `assets/css/admin/icons.css` with + CSS mask-based icon classes that match the old Tailwind plugin output. + + ## Usage + + mix generate_admin_icons + """ + + @shortdoc "Generate admin/icons.css from heroicons SVGs" + + use Mix.Task + + @icons_dir "deps/heroicons/optimized" + @output_path "assets/css/admin/icons.css" + + # Maps suffix to subdirectory and default size + @variants %{ + "" => {"24/outline", "1.5rem"}, + "-solid" => {"24/solid", "1.5rem"}, + "-mini" => {"20/solid", "1.25rem"}, + "-micro" => {"16/solid", "1rem"} + } + + @impl Mix.Task + def run(_args) do + icons = scan_used_icons() + Mix.shell().info("Found #{length(icons)} icon references in lib/") + + css_rules = + icons + |> Enum.sort() + |> Enum.map(&generate_rule/1) + |> Enum.reject(&is_nil/1) + + missing = length(icons) - length(css_rules) + if missing > 0, do: Mix.shell().info("Skipped #{missing} (SVG not found or not an icon)") + + content = """ + /* Generated by mix generate_admin_icons — do not edit by hand */ + + #{Enum.join(css_rules, "\n\n")} + """ + + File.mkdir_p!(Path.dirname(@output_path)) + File.write!(@output_path, content) + Mix.shell().info("Wrote #{length(css_rules)} icon rules to #{@output_path}") + end + + defp scan_used_icons do + Path.wildcard("lib/**/*.{ex,heex}") + |> Enum.flat_map(fn path -> + path + |> File.read!() + |> then(&Regex.scan(~r/hero-[a-z][a-z0-9-]+/, &1)) + |> List.flatten() + end) + |> Enum.uniq() + |> Enum.reject(&shop_class?/1) + end + + # Filter out CSS class names from shop components that start with "hero-" + # but aren't actual heroicon references + defp shop_class?(name) do + name in [ + "hero-section", + "hero-description", + "hero-cta", + "hero-cta-group", + "hero-pre-title", + "hero-error", + "hero-image", + "hero-section--page" + ] + end + + defp generate_rule(class_name) do + {suffix, {dir, size}} = detect_variant(class_name) + base = String.trim_leading(class_name, "hero-") + svg_name = if suffix == "", do: base, else: String.trim_trailing(base, suffix) + svg_path = Path.join([@icons_dir, dir, "#{svg_name}.svg"]) + + if File.exists?(svg_path) do + content = + svg_path + |> File.read!() + |> String.replace(~r/\r?\n|\r/, "") + |> URI.encode(&uri_allowed?/1) + + """ + .#{class_name} { + --hero-#{class_name |> String.trim_leading("hero-")}: url('data:image/svg+xml;utf8,#{content}'); + -webkit-mask: var(--hero-#{class_name |> String.trim_leading("hero-")}); + mask: var(--hero-#{class_name |> String.trim_leading("hero-")}); + mask-repeat: no-repeat; + background-color: currentColor; + vertical-align: middle; + display: inline-block; + width: #{size}; + height: #{size}; + }\ + """ + else + Mix.shell().info(" warning: SVG not found for #{class_name} (expected #{svg_path})") + nil + end + end + + defp detect_variant(class_name) do + cond do + String.ends_with?(class_name, "-micro") -> {"-micro", @variants["-micro"]} + String.ends_with?(class_name, "-mini") -> {"-mini", @variants["-mini"]} + String.ends_with?(class_name, "-solid") -> {"-solid", @variants["-solid"]} + true -> {"", @variants[""]} + end + end + + # Characters that don't need percent-encoding in data URIs + defp uri_allowed?(char) do + URI.char_unreserved?(char) or char in [?<, ?>, ?/, ?=, ?", ?', ?:, ?;, ?(, ?), ?!, ?@, ?,, ?.] + end +end diff --git a/lib/mix/tasks/lighthouse.ex b/lib/mix/tasks/lighthouse.ex index 7e817bd..0d2f212 100644 --- a/lib/mix/tasks/lighthouse.ex +++ b/lib/mix/tasks/lighthouse.ex @@ -133,10 +133,9 @@ defmodule Mix.Tasks.Lighthouse do defp build_prod_assets! do Mix.shell().info("Building production assets...") - Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"]) - Mix.Task.run("tailwind", ["simpleshop_theme_shop", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"]) + Mix.Task.run("esbuild", ["simpleshop_theme_admin_css", "--minify"]) Mix.Task.run("phx.digest") Mix.shell().info(" Assets built and digested.") diff --git a/lib/mix/tasks/screenshots.ex b/lib/mix/tasks/screenshots.ex index 777e311..7a569ac 100644 --- a/lib/mix/tasks/screenshots.ex +++ b/lib/mix/tasks/screenshots.ex @@ -158,9 +158,9 @@ defmodule Mix.Tasks.Screenshots do defp build_prod_assets! do Mix.shell().info("Building production assets...") - Mix.Task.run("tailwind", ["simpleshop_theme", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme", "--minify"]) Mix.Task.run("esbuild", ["simpleshop_theme_shop_css", "--minify"]) + Mix.Task.run("esbuild", ["simpleshop_theme_admin_css", "--minify"]) Mix.Task.run("phx.digest") Mix.shell().info(" Assets built and digested.") diff --git a/lib/simpleshop_theme_web/components/core_components.ex b/lib/simpleshop_theme_web/components/core_components.ex index 6c97609..46b7447 100644 --- a/lib/simpleshop_theme_web/components/core_components.ex +++ b/lib/simpleshop_theme_web/components/core_components.ex @@ -393,8 +393,8 @@ defmodule SimpleshopThemeWeb.CoreComponents do You can customize the size and colors of the icons by setting width, height, and background color classes. - Icons are extracted from the `deps/heroicons` directory and bundled within - your compiled app.css by the plugin in `assets/vendor/heroicons.js`. + Icons are extracted from the `deps/heroicons` directory and bundled into + `admin/icons.css` by `mix generate_admin_icons`. ## Examples diff --git a/lib/simpleshop_theme_web/components/layouts.ex b/lib/simpleshop_theme_web/components/layouts.ex index ae0c816..08c8e1f 100644 --- a/lib/simpleshop_theme_web/components/layouts.ex +++ b/lib/simpleshop_theme_web/components/layouts.ex @@ -98,14 +98,14 @@ defmodule SimpleshopThemeWeb.Layouts do end @doc """ - Provides dark vs light theme toggle based on themes defined in app.css. + Provides dark vs light theme toggle based on themes defined in admin.css. See in root.html.heex which applies the theme before page load. """ def theme_toggle(assigns) do ~H"""
-
+