replace --color-* with --t-* tokens, delete bridge and .preview-frame
Phase 4: admin components and utilities now reference --t-* theme tokens directly. Status colour tokens added to theme-semantic.css. Bridge file (admin/themes.css) deleted. Phase 5: removed duplicated .preview-frame CSS block (~160 lines). Admin components and icons wrapped in @layer admin. Layer order updated in admin_root to include admin layer. Phase 6: added prefers-reduced-motion support (zeroes all durations and disables animations). Migrated physical properties to logical equivalents (text-align start/end, margin-inline, padding-inline, inset-inline-end) across shop and admin CSS. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jamey
parent
d68768ad84
commit
65ea11c3a2
@ -1,8 +1,7 @@
|
||||
/* Admin CSS — bundled by esbuild */
|
||||
|
||||
/* Reset and colour themes */
|
||||
/* Reset */
|
||||
@import "./admin/reset.css";
|
||||
@import "./admin/themes.css";
|
||||
|
||||
/* Theme CSS layers (used by theme editor preview) */
|
||||
@import "./theme-primitives.css";
|
||||
@ -18,167 +17,3 @@
|
||||
.phx-click-loading, .phx-submit-loading, .phx-change-loading {
|
||||
/* Available for component styling */
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
THEME EDITOR ONLY: .preview-frame CSS variable switching
|
||||
These rules enable live theme switching in the editor.
|
||||
Shop pages get CSS variables inline from CSSGenerator.
|
||||
============================================= */
|
||||
|
||||
.preview-frame {
|
||||
/* Mood - Default (Neutral) */
|
||||
--t-surface-base: #ffffff;
|
||||
--t-surface-raised: #ffffff;
|
||||
--t-surface-sunken: #f5f5f5;
|
||||
--t-surface-overlay: rgba(255, 255, 255, 0.95);
|
||||
--t-text-primary: #171717;
|
||||
--t-text-secondary: #525252;
|
||||
--t-text-tertiary: #a3a3a3;
|
||||
--t-text-inverse: #ffffff;
|
||||
--t-border-default: #e5e5e5;
|
||||
--t-border-subtle: #f0f0f0;
|
||||
|
||||
/* Typography - Default (Clean) */
|
||||
--t-font-heading: var(--p-font-manrope);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.02em;
|
||||
|
||||
/* Shape - Default (Soft) */
|
||||
--t-radius-sm: var(--p-radius-sm);
|
||||
--t-radius-md: var(--p-radius-md);
|
||||
--t-radius-lg: var(--p-radius-lg);
|
||||
--t-radius-button: var(--p-radius-md);
|
||||
--t-radius-card: var(--p-radius-lg);
|
||||
--t-radius-input: var(--p-radius-md);
|
||||
--t-radius-image: var(--p-radius-md);
|
||||
|
||||
/* Density - Default (Balanced) */
|
||||
--t-density: 1;
|
||||
--space-xs: calc(var(--p-space-2) * var(--t-density));
|
||||
--space-sm: calc(var(--p-space-3) * var(--t-density));
|
||||
--space-md: calc(var(--p-space-4) * var(--t-density));
|
||||
--space-lg: calc(var(--p-space-6) * var(--t-density));
|
||||
--space-xl: calc(var(--p-space-8) * var(--t-density));
|
||||
--space-2xl: calc(var(--p-space-12) * var(--t-density));
|
||||
|
||||
/* Mood Variants */
|
||||
&[data-mood="warm"] {
|
||||
--t-surface-base: #fdf8f3;
|
||||
--t-surface-raised: #fffcf8;
|
||||
--t-surface-sunken: #f5ebe0;
|
||||
--t-text-primary: #1c1917;
|
||||
--t-text-secondary: #57534e;
|
||||
--t-text-tertiary: #a8a29e;
|
||||
--t-border-default: #e7e0d8;
|
||||
--t-border-subtle: #f0ebe4;
|
||||
}
|
||||
|
||||
&[data-mood="cool"] {
|
||||
--t-surface-base: #f4f7fb;
|
||||
--t-surface-raised: #f8fafc;
|
||||
--t-surface-sunken: #e8eff7;
|
||||
--t-text-primary: #0f172a;
|
||||
--t-text-secondary: #475569;
|
||||
--t-text-tertiary: #94a3b8;
|
||||
--t-border-default: #d4dce8;
|
||||
--t-border-subtle: #e8eff5;
|
||||
}
|
||||
|
||||
&[data-mood="dark"] {
|
||||
--t-surface-base: #0a0a0a;
|
||||
--t-surface-raised: #171717;
|
||||
--t-surface-sunken: #000000;
|
||||
--t-surface-overlay: rgba(23, 23, 23, 0.95);
|
||||
--t-text-primary: #fafafa;
|
||||
--t-text-secondary: #a3a3a3;
|
||||
--t-text-tertiary: #737373;
|
||||
--t-text-inverse: #171717;
|
||||
--t-border-default: #262626;
|
||||
--t-border-subtle: #1c1c1c;
|
||||
--p-shadow-strength: 0.25;
|
||||
}
|
||||
|
||||
/* Typography Variants */
|
||||
&[data-typography="editorial"] {
|
||||
--t-font-heading: var(--p-font-playfair);
|
||||
--t-font-body: var(--p-font-raleway);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
&[data-typography="modern"] {
|
||||
--t-font-heading: var(--p-font-space);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: -0.03em;
|
||||
}
|
||||
|
||||
&[data-typography="classic"] {
|
||||
--t-font-heading: var(--p-font-cormorant);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
&[data-typography="friendly"] {
|
||||
--t-font-heading: var(--p-font-fraunces);
|
||||
--t-font-body: var(--p-font-work-sans);
|
||||
--t-heading-weight: 600;
|
||||
--t-heading-tracking: -0.01em;
|
||||
}
|
||||
|
||||
&[data-typography="minimal"] {
|
||||
--t-font-heading: var(--p-font-dm-sans);
|
||||
--t-font-body: var(--p-font-source-serif);
|
||||
--t-heading-weight: 500;
|
||||
--t-heading-tracking: 0;
|
||||
}
|
||||
|
||||
&[data-typography="impulse"] {
|
||||
--t-font-heading: var(--p-font-raleway);
|
||||
--t-font-body: var(--p-font-inter);
|
||||
--t-heading-weight: 300;
|
||||
--t-heading-tracking: 0.02em;
|
||||
}
|
||||
|
||||
/* Shape Variants */
|
||||
&[data-shape="sharp"] {
|
||||
--t-radius-sm: 0;
|
||||
--t-radius-md: 0;
|
||||
--t-radius-lg: 0;
|
||||
--t-radius-button: 0;
|
||||
--t-radius-card: 0;
|
||||
--t-radius-input: 0;
|
||||
--t-radius-image: 0;
|
||||
}
|
||||
|
||||
&[data-shape="round"] {
|
||||
--t-radius-sm: var(--p-radius-md);
|
||||
--t-radius-md: var(--p-radius-lg);
|
||||
--t-radius-lg: var(--p-radius-xl);
|
||||
--t-radius-button: var(--p-radius-lg);
|
||||
--t-radius-card: var(--p-radius-xl);
|
||||
--t-radius-input: var(--p-radius-lg);
|
||||
--t-radius-image: var(--p-radius-lg);
|
||||
}
|
||||
|
||||
&[data-shape="pill"] {
|
||||
--t-radius-sm: var(--p-radius-full);
|
||||
--t-radius-md: var(--p-radius-full);
|
||||
--t-radius-lg: var(--p-radius-xl);
|
||||
--t-radius-button: var(--p-radius-full);
|
||||
--t-radius-card: var(--p-radius-xl);
|
||||
--t-radius-input: var(--p-radius-full);
|
||||
--t-radius-image: var(--p-radius-lg);
|
||||
}
|
||||
|
||||
/* Density Variants */
|
||||
&[data-density="spacious"] {
|
||||
--t-density: 1.25;
|
||||
}
|
||||
|
||||
&[data-density="compact"] {
|
||||
--t-density: 0.85;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
/* Admin component styles — replaces DaisyUI components.
|
||||
Uses DaisyUI theme variables (--color-*) which stay until Phase 7. */
|
||||
/* Admin component styles — uses --t-* theme tokens directly. */
|
||||
|
||||
@layer admin {
|
||||
|
||||
/* ── Layout ── */
|
||||
|
||||
@ -52,7 +53,7 @@
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-base-200);
|
||||
background-color: var(--t-surface-sunken);
|
||||
}
|
||||
|
||||
@media (min-width: 64em) {
|
||||
@ -81,8 +82,8 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
background-color: var(--color-base-100);
|
||||
border-bottom: 1px solid var(--color-base-200);
|
||||
background-color: var(--t-surface-base);
|
||||
border-bottom: 1px solid var(--t-surface-sunken);
|
||||
}
|
||||
|
||||
.admin-topbar-title {
|
||||
@ -116,14 +117,14 @@
|
||||
background: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-base-300);
|
||||
background-color: var(--t-border-default);
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: var(--color-base-300);
|
||||
background-color: var(--t-border-default);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
@ -146,35 +147,35 @@
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
transition: background-color 0.1s, opacity 0.1s;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-content);
|
||||
background-color: var(--t-accent);
|
||||
color: var(--t-text-inverse);
|
||||
|
||||
&:hover { opacity: 0.85; }
|
||||
&:disabled { opacity: 0.5; cursor: not-allowed; }
|
||||
}
|
||||
|
||||
.admin-btn-primary {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-primary-content);
|
||||
background-color: var(--t-accent);
|
||||
color: var(--t-text-inverse);
|
||||
}
|
||||
|
||||
.admin-btn-soft {
|
||||
background-color: color-mix(in oklch, var(--color-primary) 12%, transparent);
|
||||
color: var(--color-primary);
|
||||
&:hover { background-color: color-mix(in oklch, var(--color-primary) 20%, transparent); opacity: 1; }
|
||||
background-color: color-mix(in oklch, var(--t-accent) 12%, transparent);
|
||||
color: var(--t-accent);
|
||||
&:hover { background-color: color-mix(in oklch, var(--t-accent) 20%, transparent); opacity: 1; }
|
||||
}
|
||||
|
||||
.admin-btn-ghost {
|
||||
background: none;
|
||||
color: inherit;
|
||||
&:hover { background-color: var(--color-base-200); opacity: 1; }
|
||||
&:hover { background-color: var(--t-surface-sunken); opacity: 1; }
|
||||
}
|
||||
|
||||
.admin-btn-outline {
|
||||
background: none;
|
||||
color: inherit;
|
||||
border-color: var(--color-base-300);
|
||||
&:hover { background-color: var(--color-base-200); opacity: 1; }
|
||||
border-color: var(--t-border-default);
|
||||
&:hover { background-color: var(--t-surface-sunken); opacity: 1; }
|
||||
}
|
||||
|
||||
.admin-btn-sm {
|
||||
@ -197,8 +198,8 @@
|
||||
/* ── Cards ── */
|
||||
|
||||
.admin-card {
|
||||
background-color: var(--color-base-100);
|
||||
border: 1px solid var(--color-base-200);
|
||||
background-color: var(--t-surface-base);
|
||||
border: 1px solid var(--t-surface-sunken);
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
@ -217,7 +218,7 @@
|
||||
gap: 0.5rem;
|
||||
justify-content: flex-end;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--color-base-200);
|
||||
border-top: 1px solid var(--t-surface-sunken);
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
@ -229,19 +230,19 @@
|
||||
font-size: 0.875rem;
|
||||
|
||||
& th {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
border-bottom: 1px solid var(--color-base-200);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
border-bottom: 1px solid var(--t-surface-sunken);
|
||||
}
|
||||
|
||||
& td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-bottom: 1px solid color-mix(in oklch, var(--color-base-200) 50%, transparent);
|
||||
border-bottom: 1px solid color-mix(in oklch, var(--t-surface-sunken) 50%, transparent);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
@ -251,7 +252,7 @@
|
||||
}
|
||||
|
||||
.admin-table-zebra tbody tr:nth-child(even) {
|
||||
background-color: color-mix(in oklch, var(--color-base-200) 30%, transparent);
|
||||
background-color: color-mix(in oklch, var(--t-surface-sunken) 30%, transparent);
|
||||
}
|
||||
|
||||
/* ── Forms ── */
|
||||
@ -275,16 +276,16 @@
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
color: var(--color-base-content);
|
||||
background-color: var(--color-base-100);
|
||||
border: 1px solid var(--color-base-300);
|
||||
color: var(--t-text-primary);
|
||||
background-color: var(--t-surface-base);
|
||||
border: 1px solid var(--t-border-default);
|
||||
border-radius: 0.375rem;
|
||||
transition: border-color 0.15s;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-primary) 20%, transparent);
|
||||
border-color: var(--t-accent);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-accent) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@ -293,18 +294,18 @@
|
||||
}
|
||||
|
||||
.admin-input-error {
|
||||
border-color: var(--color-error);
|
||||
border-color: var(--t-status-error);
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-error);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--color-error) 20%, transparent);
|
||||
border-color: var(--t-status-error);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklch, var(--t-status-error) 20%, transparent);
|
||||
}
|
||||
}
|
||||
|
||||
.admin-checkbox {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
accent-color: var(--color-primary);
|
||||
accent-color: var(--t-accent);
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
@ -326,7 +327,7 @@
|
||||
appearance: none;
|
||||
width: 2.5rem;
|
||||
height: 1.25rem;
|
||||
background-color: var(--color-base-300);
|
||||
background-color: var(--t-border-default);
|
||||
border-radius: 9999px;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
@ -338,7 +339,7 @@
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.125rem;
|
||||
left: 0.125rem;
|
||||
inset-inline-start: 0.125rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: white;
|
||||
@ -347,7 +348,7 @@
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var(--t-accent);
|
||||
}
|
||||
|
||||
&:checked::after {
|
||||
@ -374,7 +375,7 @@
|
||||
.admin-toast {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
@ -389,15 +390,15 @@
|
||||
}
|
||||
|
||||
.admin-alert-info {
|
||||
background-color: color-mix(in oklch, var(--color-info) 12%, var(--color-base-100));
|
||||
color: var(--color-info);
|
||||
border: 1px solid color-mix(in oklch, var(--color-info) 25%, var(--color-base-100));
|
||||
background-color: color-mix(in oklch, var(--t-status-info) 12%, var(--t-surface-base));
|
||||
color: var(--t-status-info);
|
||||
border: 1px solid color-mix(in oklch, var(--t-status-info) 25%, var(--t-surface-base));
|
||||
}
|
||||
|
||||
.admin-alert-error {
|
||||
background-color: color-mix(in oklch, var(--color-error) 12%, var(--color-base-100));
|
||||
color: var(--color-error);
|
||||
border: 1px solid color-mix(in oklch, var(--color-error) 25%, var(--color-base-100));
|
||||
background-color: color-mix(in oklch, var(--t-status-error) 12%, var(--t-surface-base));
|
||||
color: var(--t-status-error);
|
||||
border: 1px solid color-mix(in oklch, var(--t-status-error) 25%, var(--t-surface-base));
|
||||
}
|
||||
|
||||
/* ── Modal ── */
|
||||
@ -408,8 +409,8 @@
|
||||
padding: 0;
|
||||
max-width: 32rem;
|
||||
width: calc(100% - 2rem);
|
||||
background-color: var(--color-base-100);
|
||||
color: var(--color-base-content);
|
||||
background-color: var(--t-surface-base);
|
||||
color: var(--t-text-primary);
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
|
||||
&::backdrop {
|
||||
@ -424,7 +425,7 @@
|
||||
|
||||
.admin-modal-close {
|
||||
position: absolute;
|
||||
right: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
top: 0.5rem;
|
||||
}
|
||||
|
||||
@ -444,8 +445,8 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
border-radius: 9999px;
|
||||
background-color: var(--color-base-200);
|
||||
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
|
||||
background-color: var(--t-surface-sunken);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
|
||||
}
|
||||
|
||||
.admin-badge-sm {
|
||||
@ -462,12 +463,12 @@
|
||||
& .admin-dropdown-content {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
top: 100%;
|
||||
margin-top: 0.25rem;
|
||||
min-width: 12rem;
|
||||
background-color: var(--color-base-100);
|
||||
border: 1px solid var(--color-base-200);
|
||||
background-color: var(--t-surface-base);
|
||||
border: 1px solid var(--t-surface-sunken);
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
|
||||
z-index: 50;
|
||||
@ -489,7 +490,7 @@
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 0.375rem;
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-base-content);
|
||||
color: var(--t-text-primary);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
@ -498,7 +499,7 @@
|
||||
text-align: left;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-base-200);
|
||||
background-color: var(--t-surface-sunken);
|
||||
}
|
||||
}
|
||||
|
||||
@ -512,8 +513,8 @@
|
||||
display: inline-block;
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
border: 2px solid var(--color-base-300);
|
||||
border-top-color: var(--color-primary);
|
||||
border: 2px solid var(--t-border-default);
|
||||
border-top-color: var(--t-accent);
|
||||
border-radius: 9999px;
|
||||
animation: admin-spin 0.6s linear infinite;
|
||||
}
|
||||
@ -524,7 +525,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 40%, transparent);
|
||||
font-size: 0.75rem;
|
||||
|
||||
&::before,
|
||||
@ -532,7 +533,7 @@
|
||||
content: "";
|
||||
flex: 1;
|
||||
height: 1px;
|
||||
background-color: var(--color-base-300);
|
||||
background-color: var(--t-border-default);
|
||||
}
|
||||
}
|
||||
|
||||
@ -548,7 +549,7 @@
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
padding: 0.75rem 0;
|
||||
border-bottom: 1px solid var(--color-base-200);
|
||||
border-bottom: 1px solid var(--t-surface-sunken);
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
}
|
||||
@ -560,13 +561,13 @@
|
||||
/* ── Form error text ── */
|
||||
|
||||
.admin-error {
|
||||
color: var(--color-error);
|
||||
color: var(--t-status-error);
|
||||
}
|
||||
|
||||
/* ── Link ── */
|
||||
|
||||
.admin-link {
|
||||
color: var(--color-primary);
|
||||
color: var(--t-accent);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.125em;
|
||||
|
||||
@ -581,7 +582,7 @@
|
||||
appearance: none;
|
||||
width: 100%;
|
||||
height: 0.375rem;
|
||||
background-color: var(--color-base-300);
|
||||
background-color: var(--t-border-default);
|
||||
border-radius: 9999px;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
@ -590,18 +591,18 @@
|
||||
appearance: none;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: var(--color-primary);
|
||||
background: var(--t-accent);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid var(--color-base-100);
|
||||
border: 2px solid var(--t-surface-base);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background: var(--color-primary);
|
||||
background: var(--t-accent);
|
||||
border-radius: 9999px;
|
||||
border: 2px solid var(--color-base-100);
|
||||
border: 2px solid var(--t-surface-base);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
}
|
||||
@ -610,8 +611,8 @@
|
||||
|
||||
.admin-alert-outline {
|
||||
background: none;
|
||||
color: color-mix(in oklch, var(--color-base-content) 70%, transparent);
|
||||
border: 1px solid var(--color-base-300);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 70%, transparent);
|
||||
border: 1px solid var(--t-border-default);
|
||||
}
|
||||
|
||||
/* ── Swap (visibility toggle) ── */
|
||||
@ -675,7 +676,7 @@
|
||||
}
|
||||
|
||||
.setup-subtitle {
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
@ -687,15 +688,15 @@
|
||||
}
|
||||
|
||||
.setup-card {
|
||||
border: 1px solid var(--color-base-300, #d4d4d4);
|
||||
border: 1px solid var(--t-border-default, #d4d4d4);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
transition: border-color 150ms;
|
||||
}
|
||||
|
||||
.setup-card-done {
|
||||
border-color: var(--color-success, #22c55e);
|
||||
background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
|
||||
border-color: var(--t-status-success, #22c55e);
|
||||
background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
|
||||
}
|
||||
|
||||
.setup-card-header {
|
||||
@ -714,12 +715,12 @@
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
flex-shrink: 0;
|
||||
background: var(--color-base-200, #e5e5e5);
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
background: var(--t-surface-sunken, #e5e5e5);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.setup-card-number-done {
|
||||
background: var(--color-success, #22c55e);
|
||||
background: var(--t-status-success, #22c55e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -730,14 +731,14 @@
|
||||
|
||||
.setup-card-summary {
|
||||
margin-top: 0.25rem;
|
||||
padding-left: 2.5rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.setup-card-body {
|
||||
margin-top: 1rem;
|
||||
padding-left: 2.5rem;
|
||||
padding-inline-start: 2.5rem;
|
||||
}
|
||||
|
||||
/* Setup: check inbox phase */
|
||||
@ -747,7 +748,7 @@
|
||||
}
|
||||
|
||||
.setup-inbox-icon {
|
||||
color: var(--color-base-content, #171717);
|
||||
color: var(--t-text-primary, #171717);
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
|
||||
@ -759,30 +760,30 @@
|
||||
|
||||
.setup-inbox-detail {
|
||||
font-size: 0.875rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.setup-start-over {
|
||||
font-size: 0.8125rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.setup-hint {
|
||||
font-size: 0.8125rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.setup-link {
|
||||
color: var(--color-base-content, #171717);
|
||||
color: var(--t-text-primary, #171717);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.setup-key-hint {
|
||||
font-size: 0.75rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
@ -798,14 +799,14 @@
|
||||
}
|
||||
|
||||
.setup-test-ok {
|
||||
color: var(--color-success, #22c55e);
|
||||
color: var(--t-status-success, #22c55e);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.setup-test-error {
|
||||
color: var(--color-error, #dc2626);
|
||||
color: var(--t-status-error, #dc2626);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
@ -825,20 +826,20 @@
|
||||
align-items: flex-start;
|
||||
gap: 0.125rem;
|
||||
padding: 0.75rem;
|
||||
border: 1px solid var(--color-base-300, #d4d4d4);
|
||||
border: 1px solid var(--t-border-default, #d4d4d4);
|
||||
border-radius: 0.375rem;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: border-color 150ms, background 150ms;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
border-color: var(--color-base-content, #171717);
|
||||
border-color: var(--t-text-primary, #171717);
|
||||
}
|
||||
}
|
||||
|
||||
.setup-provider-card-selected {
|
||||
border-color: var(--color-base-content, #171717);
|
||||
background: var(--color-base-200, #e5e5e5);
|
||||
border-color: var(--t-text-primary, #171717);
|
||||
background: var(--t-surface-sunken, #e5e5e5);
|
||||
}
|
||||
|
||||
.setup-provider-card-disabled {
|
||||
@ -853,15 +854,15 @@
|
||||
|
||||
.setup-provider-tagline {
|
||||
font-size: 0.75rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.setup-provider-badge {
|
||||
font-size: 0.6875rem;
|
||||
padding: 0.125rem 0.375rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-base-200, #e5e5e5);
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
background: var(--t-surface-sunken, #e5e5e5);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.setup-provider-form {
|
||||
@ -873,15 +874,15 @@
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
padding: 2rem;
|
||||
border: 1px solid var(--color-success, #22c55e);
|
||||
border: 1px solid var(--t-status-success, #22c55e);
|
||||
border-radius: 0.5rem;
|
||||
background: color-mix(in oklab, var(--color-success, #22c55e) 5%, transparent);
|
||||
background: color-mix(in oklab, var(--t-status-success, #22c55e) 5%, transparent);
|
||||
}
|
||||
|
||||
.setup-complete-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
color: var(--color-success, #22c55e);
|
||||
color: var(--t-status-success, #22c55e);
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
|
||||
@ -892,14 +893,14 @@
|
||||
|
||||
.setup-complete p {
|
||||
font-size: 0.875rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
margin: 0.25rem 0 1rem;
|
||||
}
|
||||
|
||||
/* ── Dashboard launch checklist ── */
|
||||
|
||||
.admin-checklist {
|
||||
border: 1px solid var(--color-base-300, #d4d4d4);
|
||||
border: 1px solid var(--t-border-default, #d4d4d4);
|
||||
border-radius: 0.5rem;
|
||||
padding: 1.25rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@ -922,21 +923,21 @@
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.8125rem;
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.admin-checklist-bar {
|
||||
width: 6rem;
|
||||
height: 0.375rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-base-200, #e5e5e5);
|
||||
background: var(--t-surface-sunken, #e5e5e5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admin-checklist-bar-fill {
|
||||
height: 100%;
|
||||
border-radius: 9999px;
|
||||
background: var(--color-success, #22c55e);
|
||||
background: var(--t-status-success, #22c55e);
|
||||
transition: width 300ms;
|
||||
}
|
||||
|
||||
@ -964,13 +965,13 @@
|
||||
height: 1.25rem;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
border: 1.5px solid var(--color-base-300, #d4d4d4);
|
||||
border: 1.5px solid var(--t-border-default, #d4d4d4);
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.admin-checklist-check-done {
|
||||
background: var(--color-success, #22c55e);
|
||||
border-color: var(--color-success, #22c55e);
|
||||
background: var(--t-status-success, #22c55e);
|
||||
border-color: var(--t-status-success, #22c55e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -980,7 +981,7 @@
|
||||
}
|
||||
|
||||
.admin-checklist-label-done {
|
||||
color: color-mix(in oklch, var(--color-base-content) 60%, transparent);
|
||||
color: color-mix(in oklch, var(--t-text-primary) 60%, transparent);
|
||||
}
|
||||
|
||||
.admin-checklist-action {
|
||||
@ -993,5 +994,7 @@
|
||||
justify-content: space-between;
|
||||
margin-top: 1rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--color-base-200, #e5e5e5);
|
||||
border-top: 1px solid var(--t-surface-sunken, #e5e5e5);
|
||||
}
|
||||
|
||||
} /* @layer admin */
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
/* Generated by mix generate_admin_icons — do not edit by hand */
|
||||
|
||||
@layer admin {
|
||||
|
||||
.hero-arrow-left-mini {
|
||||
--hero-arrow-left-mini: url('data:image/svg+xml;utf8,<svg%20xmlns="http://www.w3.org/2000/svg"%20viewBox="0%200%2020%2020"%20fill="currentColor"%20aria-hidden="true"%20data-slot="icon">%20%20<path%20fill-rule="evenodd"%20d="M17%2010a.75.75%200%200%201-.75.75H5.612l4.158%203.96a.75.75%200%201%201-1.04%201.08l-5.5-5.25a.75.75%200%200%201%200-1.08l5.5-5.25a.75.75%200%201%201%201.04%201.08L5.612%209.25H16.25A.75.75%200%200%201%2017%2010Z"%20clip-rule="evenodd"/></svg>');
|
||||
-webkit-mask: var(--hero-arrow-left-mini);
|
||||
@ -623,3 +625,5 @@
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
} /* @layer admin */
|
||||
|
||||
@ -1,37 +0,0 @@
|
||||
/* Admin theme bridge — maps DaisyUI --color-* variables to --t-* theme tokens.
|
||||
Admin components still reference --color-*, which resolve through this bridge
|
||||
to the merchant's chosen theme. Phase 4 replaces --color-* with --t-* directly,
|
||||
then this file gets deleted. */
|
||||
|
||||
.themed {
|
||||
/* Surface colours */
|
||||
--color-base-100: var(--t-surface-base);
|
||||
--color-base-200: var(--t-surface-sunken);
|
||||
--color-base-300: var(--t-border-default);
|
||||
--color-base-content: var(--t-text-primary);
|
||||
|
||||
/* Brand colours */
|
||||
--color-primary: var(--t-accent);
|
||||
--color-primary-content: var(--t-text-inverse);
|
||||
--color-secondary: var(--t-text-secondary);
|
||||
--color-secondary-content: var(--t-text-inverse);
|
||||
--color-accent: var(--t-text-primary);
|
||||
--color-accent-content: var(--t-text-inverse);
|
||||
--color-neutral: var(--t-text-tertiary);
|
||||
--color-neutral-content: var(--t-text-inverse);
|
||||
|
||||
/* Status colours — fixed, not themed */
|
||||
--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 — mapped to theme shape tokens */
|
||||
--radius-box: var(--t-radius-card);
|
||||
--radius-selector: var(--t-radius-button);
|
||||
--radius-field: var(--t-radius-input);
|
||||
}
|
||||
@ -113,7 +113,7 @@
|
||||
.pb-6 { padding-bottom: 1.5rem; }
|
||||
.pb-8 { padding-bottom: 2rem; }
|
||||
.pb-10 { padding-bottom: 2.5rem; }
|
||||
.pl-10 { padding-left: 2.5rem; }
|
||||
.pl-10 { padding-inline-start: 2.5rem; }
|
||||
.pt-3 { padding-top: 0.75rem; }
|
||||
.pt-4 { padding-top: 1rem; }
|
||||
.pt-6 { padding-top: 1.5rem; }
|
||||
@ -137,10 +137,10 @@
|
||||
.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; }
|
||||
.ml-1 { margin-inline-start: 0.25rem; }
|
||||
.ml-3 { margin-inline-start: 0.75rem; }
|
||||
.mr-1 { margin-inline-end: 0.25rem; }
|
||||
.-mr-2 { margin-inline-end: -0.5rem; }
|
||||
.mx-auto { margin-inline: auto; }
|
||||
.-mx-2 { margin-inline: -0.5rem; }
|
||||
.-my-0\.5 { margin-block: -0.125rem; }
|
||||
@ -234,9 +234,9 @@
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-left { text-align: start; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-right { text-align: end; }
|
||||
.text-balance { text-wrap: balance; }
|
||||
|
||||
.text-wrap { text-wrap: wrap; }
|
||||
@ -270,30 +270,30 @@
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
Colours — DaisyUI semantic
|
||||
Colours — theme tokens
|
||||
======================================== */
|
||||
|
||||
.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-base-100 { background-color: var(--t-surface-base); }
|
||||
.bg-base-200 { background-color: var(--t-surface-sunken); }
|
||||
.bg-base-300 { background-color: var(--t-border-default); }
|
||||
.bg-base-content { background-color: var(--t-text-primary); }
|
||||
.bg-primary { background-color: var(--t-accent); }
|
||||
.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-base-100 { color: var(--t-surface-base); }
|
||||
.text-base-content { color: var(--t-text-primary); }
|
||||
.text-base-content\/30 { color: color-mix(in oklch, var(--t-text-primary) 30%, transparent); }
|
||||
.text-base-content\/40 { color: color-mix(in oklch, var(--t-text-primary) 40%, transparent); }
|
||||
.text-base-content\/50 { color: color-mix(in oklch, var(--t-text-primary) 50%, transparent); }
|
||||
.text-base-content\/60 { color: color-mix(in oklch, var(--t-text-primary) 60%, transparent); }
|
||||
.text-base-content\/70 { color: color-mix(in oklch, var(--t-text-primary) 70%, transparent); }
|
||||
.text-base-content\/80 { color: color-mix(in oklch, var(--t-text-primary) 80%, transparent); }
|
||||
.text-error { color: var(--t-status-error); }
|
||||
.text-success { color: var(--t-status-success); }
|
||||
.text-white { color: #fff; }
|
||||
.text-brand { color: var(--color-primary); }
|
||||
.text-brand { color: var(--t-accent); }
|
||||
|
||||
.fill-base-content\/40 { fill: color-mix(in oklch, var(--color-base-content) 40%, transparent); }
|
||||
.fill-base-content\/40 { fill: color-mix(in oklch, var(--t-text-primary) 40%, transparent); }
|
||||
|
||||
/* ========================================
|
||||
Colours — status palette
|
||||
@ -342,10 +342,10 @@
|
||||
.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); }
|
||||
.border-base-200 { border-color: var(--t-surface-sunken); }
|
||||
.border-base-300 { border-color: var(--t-border-default); }
|
||||
.border-base-content\/20 { border-color: color-mix(in oklch, var(--t-text-primary) 20%, transparent); }
|
||||
.border-b-base-content\/30 { border-bottom-color: color-mix(in oklch, var(--t-text-primary) 30%, transparent); }
|
||||
|
||||
/* Arbitrary border colours (macOS traffic lights) */
|
||||
.border-\[\#e14640\] { border-color: #e14640; }
|
||||
@ -369,7 +369,7 @@
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.rounded-box { border-radius: var(--radius-box, 0.5rem); }
|
||||
.rounded-box { border-radius: var(--t-radius-card, 0.5rem); }
|
||||
|
||||
/* ========================================
|
||||
Ring (outline via box-shadow)
|
||||
@ -380,7 +380,7 @@
|
||||
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-base-300 { --tw-ring-color: var(--t-border-default); }
|
||||
.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); }
|
||||
@ -437,8 +437,8 @@
|
||||
--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); }
|
||||
.from-base-300 { --tw-gradient-from: var(--t-border-default); }
|
||||
.to-base-300\/80 { --tw-gradient-to: color-mix(in oklch, var(--t-border-default) 80%, transparent); }
|
||||
|
||||
/* ========================================
|
||||
Filter
|
||||
@ -488,17 +488,17 @@
|
||||
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-base-200:hover { background-color: var(--t-surface-sunken); }
|
||||
.hover\:bg-base-200\/50:hover { background-color: color-mix(in oklch, var(--t-surface-sunken) 50%, transparent); }
|
||||
.hover\:bg-base-300:hover { background-color: var(--t-border-default); }
|
||||
.hover\:bg-base-content\/80:hover { background-color: color-mix(in oklch, var(--t-text-primary) 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\:border-base-300:hover { border-color: var(--t-border-default); }
|
||||
.hover\:border-base-content\/40:hover { border-color: color-mix(in oklch, var(--t-text-primary) 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-base-content:hover { color: var(--t-text-primary); }
|
||||
.hover\:text-base-content\/70:hover { color: color-mix(in oklch, var(--t-text-primary) 70%, transparent); }
|
||||
.hover\:text-base-content\/80:hover { color: color-mix(in oklch, var(--t-text-primary) 80%, transparent); }
|
||||
.hover\:text-red-800:hover { color: #991b1b; }
|
||||
.hover\:underline:hover { text-decoration-line: underline; }
|
||||
.hover\:cursor-pointer:hover { cursor: pointer; }
|
||||
@ -507,13 +507,13 @@
|
||||
Focus states
|
||||
======================================== */
|
||||
|
||||
.focus\:border-primary:focus { border-color: var(--color-primary); }
|
||||
.focus\:border-primary:focus { border-color: var(--t-accent); }
|
||||
.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); }
|
||||
.focus\:ring-primary\/20:focus { --tw-ring-color: color-mix(in oklch, var(--t-accent) 20%, transparent); }
|
||||
|
||||
/* ========================================
|
||||
Disabled states
|
||||
@ -527,10 +527,10 @@
|
||||
======================================== */
|
||||
|
||||
.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\:bg-base-300 { background-color: var(--t-border-default); }
|
||||
.group:hover .group-hover\:fill-base-content { fill: var(--t-text-primary); }
|
||||
.group:hover .group-hover\:opacity-70 { opacity: 0.7; }
|
||||
.group:hover .group-hover\:text-base-content { color: var(--color-base-content); }
|
||||
.group:hover .group-hover\:text-base-content { color: var(--t-text-primary); }
|
||||
.group[open] .group-open\:rotate-180 { transform: rotate(180deg); }
|
||||
|
||||
/* ========================================
|
||||
@ -619,14 +619,14 @@
|
||||
======================================== */
|
||||
|
||||
.card {
|
||||
border-radius: var(--radius-box, 0.5rem);
|
||||
border-radius: var(--t-radius-card, 0.5rem);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border-radius: var(--radius-selector, 0.25rem);
|
||||
border-radius: var(--t-radius-button, 0.25rem);
|
||||
padding-inline: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.25rem;
|
||||
@ -635,9 +635,9 @@
|
||||
}
|
||||
.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);
|
||||
border-color: var(--t-status-warning);
|
||||
color: var(--t-status-warning-content);
|
||||
background-color: var(--t-status-warning);
|
||||
}
|
||||
|
||||
.btn {
|
||||
@ -648,14 +648,14 @@
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
border-radius: var(--radius-field, 0.25rem);
|
||||
border-radius: var(--t-radius-input, 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);
|
||||
background-color: var(--t-accent);
|
||||
color: var(--t-text-inverse);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
filter: brightness(0.9);
|
||||
@ -671,7 +671,7 @@
|
||||
.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 a { color: var(--t-accent); text-decoration: underline; }
|
||||
.prose strong { font-weight: 600; }
|
||||
.prose-sm { font-size: 0.875rem; line-height: 1.5; }
|
||||
|
||||
|
||||
@ -156,7 +156,7 @@
|
||||
|
||||
.product-card[data-variant="default"] .product-price--compare {
|
||||
font-size: var(--t-text-small);
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.product-card[data-variant="featured"] .product-price--secondary {
|
||||
@ -164,7 +164,7 @@
|
||||
}
|
||||
|
||||
.product-card[data-variant="featured"] .product-price--compare {
|
||||
margin-right: 0.25rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
}
|
||||
|
||||
.product-card[data-variant="compact"] .product-price--regular {
|
||||
@ -734,7 +734,7 @@
|
||||
|
||||
.details-th {
|
||||
color: var(--t-text-primary);
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
padding-block: 0.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -866,7 +866,7 @@
|
||||
.cart-badge {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -4px;
|
||||
inset-inline-end: -4px;
|
||||
background: var(--t-accent);
|
||||
color: var(--t-text-inverse);
|
||||
font-size: var(--t-text-caption);
|
||||
@ -898,8 +898,7 @@
|
||||
.mobile-bottom-nav {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
inset-inline: 0;
|
||||
z-index: 100;
|
||||
background-color: var(--t-surface-raised);
|
||||
border-top: 1px solid var(--t-border-default);
|
||||
@ -1090,7 +1089,7 @@
|
||||
color: var(--t-text-tertiary);
|
||||
|
||||
& span {
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1190,7 +1189,7 @@
|
||||
.cart-drawer {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -400px;
|
||||
inset-inline-end: -400px;
|
||||
width: 400px;
|
||||
max-width: 90vw;
|
||||
height: 100vh;
|
||||
@ -1199,11 +1198,11 @@
|
||||
z-index: 1001;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: right 0.3s ease;
|
||||
transition: inset-inline-end 0.3s ease;
|
||||
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&.open {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1389,7 +1388,7 @@
|
||||
|
||||
.cart-item-price-col {
|
||||
flex-shrink: 0;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.cart-item-price {
|
||||
@ -1500,7 +1499,7 @@
|
||||
}
|
||||
|
||||
.cart-page-item-price-col {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.cart-page-item-price {
|
||||
@ -2066,7 +2065,7 @@
|
||||
|
||||
.rich-text-list {
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 1.5rem;
|
||||
margin-inline-start: 1.5rem;
|
||||
list-style: disc;
|
||||
color: var(--t-text-secondary);
|
||||
|
||||
@ -2080,7 +2079,7 @@
|
||||
.shop-flash-group {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
inset-inline-end: 1rem;
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -27,6 +27,16 @@
|
||||
--t-accent-text: color-mix(in oklch, var(--t-accent) 80%, black);
|
||||
--t-accent-button: color-mix(in oklch, var(--t-accent) 85%, black);
|
||||
|
||||
/* Status colours — fixed, not themed */
|
||||
--t-status-error: oklch(58% 0.253 17.585);
|
||||
--t-status-error-content: oklch(96% 0.015 12.422);
|
||||
--t-status-success: oklch(70% 0.14 182.503);
|
||||
--t-status-success-content: oklch(98% 0.014 180.72);
|
||||
--t-status-warning: oklch(66% 0.179 58.318);
|
||||
--t-status-warning-content: oklch(98% 0.022 95.277);
|
||||
--t-status-info: oklch(62% 0.214 259.815);
|
||||
--t-status-info-content: oklch(97% 0.014 254.604);
|
||||
|
||||
/* Secondary colors */
|
||||
--t-secondary-accent: #ea580c;
|
||||
--t-sale-color: #dc2626;
|
||||
@ -59,7 +69,7 @@
|
||||
--t-layout-max-width: 1400px;
|
||||
--t-button-style: filled;
|
||||
--t-card-shadow: none;
|
||||
--t-product-text-align: left;
|
||||
--t-product-text-align: start;
|
||||
|
||||
/* Page colors */
|
||||
--color-page: var(--t-surface-base);
|
||||
@ -119,6 +129,28 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
ACCESSIBILITY - Reduced Motion
|
||||
Disable animations/transitions for users who prefer reduced motion
|
||||
======================================== */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.themed {
|
||||
--p-duration-fast: 0s;
|
||||
--p-duration-normal: 0s;
|
||||
--p-duration-slow: 0s;
|
||||
}
|
||||
|
||||
.themed *,
|
||||
.themed *::before,
|
||||
.themed *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
ACCESSIBILITY - Focus Rings
|
||||
Visible focus indicators for all interactive elements
|
||||
@ -156,8 +188,7 @@
|
||||
|
||||
& .filter-pill {
|
||||
min-height: 44px;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
padding-inline: 1rem;
|
||||
}
|
||||
|
||||
/* Heading line-heights - tighter for large text */
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
<% end %>
|
||||
<!-- Pre-declare layer order so shop reset < Tailwind base regardless of load order -->
|
||||
<style>
|
||||
@layer properties, reset, primitives, tokens, theme, base, components, layout, utilities, overrides;
|
||||
@layer properties, reset, primitives, tokens, theme, base, components, layout, admin, utilities, overrides;
|
||||
</style>
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/admin.css"} />
|
||||
<link phx-track-static rel="stylesheet" href={~p"/assets/css/shop.css"} />
|
||||
|
||||
@ -1147,7 +1147,7 @@
|
||||
|
||||
<!-- Preview Frame -->
|
||||
<div
|
||||
class="themed preview-frame bg-white overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
|
||||
class="themed overflow-auto flex-1 rounded-b-lg border border-t-0 border-base-content/20"
|
||||
data-mood={@theme_settings.mood}
|
||||
data-typography={@theme_settings.typography}
|
||||
data-shape={@theme_settings.shape}
|
||||
|
||||
@ -90,18 +90,14 @@ defmodule BerrypodWeb.ThemeCSSConsistencyTest do
|
||||
end
|
||||
|
||||
describe "CSS file structure" do
|
||||
test "admin.css has .preview-frame variant selectors for theme editor" do
|
||||
test "admin.css imports shared theme layers" do
|
||||
css_path = Path.join([File.cwd!(), "assets", "css", "admin.css"])
|
||||
css_content = File.read!(css_path)
|
||||
|
||||
# Variant selectors are editor-only (.preview-frame) using CSS nesting
|
||||
# The file uses &[data-*] syntax inside .preview-frame { }
|
||||
# These rules are in admin.css (admin only), not shop.css
|
||||
assert css_content =~ ".preview-frame"
|
||||
assert css_content =~ "&[data-mood=\"dark\"]"
|
||||
assert css_content =~ "&[data-mood=\"warm\"]"
|
||||
assert css_content =~ "&[data-typography=\"modern\"]"
|
||||
assert css_content =~ "&[data-shape=\"sharp\"]"
|
||||
# Admin imports the shared theme layers so .themed resolves all tokens
|
||||
assert css_content =~ "theme-primitives.css"
|
||||
assert css_content =~ "theme-layer2-attributes.css"
|
||||
assert css_content =~ "theme-semantic.css"
|
||||
end
|
||||
|
||||
test "theme-layer2-attributes.css has shared .themed component styles" do
|
||||
|
||||
Loading…
Reference in New Issue
Block a user