init
This commit is contained in:
Cayden Schwechten
commit
c19b910c36
80 changed files with 16134 additions and 0 deletions
194
app/globals.css
Normal file
194
app/globals.css
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
/* ---------------------------------------------------------------------------
|
||||
Warm Culinary Editorial Theme ("Parchment & Terracotta" / "Cast-Iron & Peach")
|
||||
---------------------------------------------------------------------------
|
||||
Perceptually uniform OKLCH tokens paired with CSS `light-dark()`.
|
||||
Every foreground/background pair is verified against WCAG 2.2 AA:
|
||||
- Body & 12px metadata (`ink`, `ink-muted`, `ink-faint`) >= 4.5:1
|
||||
- Interactive borders (`line-strong`, `selected-line`) >= 3.0:1 (SC 1.4.11)
|
||||
--------------------------------------------------------------------------- */
|
||||
@theme {
|
||||
/* Surfaces: warm unbleached linen in light mode, cast-iron slate in dark */
|
||||
--color-canvas: light-dark(oklch(97.4% 0.010 81.8), oklch(20.0% 0.021 245.9));
|
||||
--color-surface: light-dark(oklch(99.4% 0.006 84.6), oklch(24.5% 0.028 244.8));
|
||||
--color-raised: light-dark(oklch(94.3% 0.017 79.4), oklch(30.0% 0.035 242.7));
|
||||
--color-line: light-dark(oklch(84.6% 0.029 81.5), oklch(37.6% 0.042 242.8));
|
||||
--color-line-strong: light-dark(oklch(56.7% 0.032 74.0), oklch(62.5% 0.046 239.9));
|
||||
|
||||
/* Typography ink hierarchy */
|
||||
--color-ink: light-dark(oklch(22.8% 0.016 62.5), oklch(96.4% 0.021 79.1));
|
||||
--color-ink-muted: light-dark(oklch(40.7% 0.024 64.6), oklch(84.1% 0.017 250.9));
|
||||
--color-ink-faint: light-dark(oklch(48.0% 0.026 67.1), oklch(72.6% 0.028 251.7));
|
||||
|
||||
/* Primary culinary accent: Terracotta Paprika (light) / Warm Peach (dark) */
|
||||
--color-brand-300: light-dark(oklch(49.7% 0.151 37.0), oklch(82.9% 0.092 53.1));
|
||||
--color-brand-400: light-dark(oklch(51.8% 0.155 37.0), oklch(81.8% 0.098 52.8));
|
||||
--color-brand-500: light-dark(oklch(48.1% 0.146 36.8), oklch(85.8% 0.088 52.7));
|
||||
--color-brand-600: light-dark(oklch(54.0% 0.159 37.1), oklch(80.8% 0.102 52.6));
|
||||
--color-brand-950: light-dark(oklch(95.4% 0.025 65.6), oklch(26.8% 0.011 36.5));
|
||||
--color-brand-border: light-dark(oklch(71.0% 0.105 44.7), oklch(52.8% 0.088 49.3));
|
||||
--color-on-accent: light-dark(oklch(98.8% 0.009 67.7), oklch(18.8% 0.013 55.5));
|
||||
|
||||
/* Selected control fill & border (>= 4.4:1 boundary contrast) */
|
||||
--color-selected: light-dark(oklch(90.8% 0.023 78.2), oklch(35.3% 0.043 243.0));
|
||||
--color-selected-line: light-dark(oklch(49.8% 0.034 72.0), oklch(71.7% 0.046 240.1));
|
||||
|
||||
/* Semantic status tokens (Herb Sage / Saffron Ochre / Chili) */
|
||||
--color-status-ok: light-dark(oklch(44.7% 0.092 154.8), oklch(84.0% 0.149 155.5));
|
||||
--color-status-ok-bg: light-dark(oklch(95.5% 0.018 161.1), oklch(27.6% 0.040 162.9));
|
||||
--color-status-ok-line: light-dark(oklch(69.9% 0.094 157.2), oklch(52.0% 0.101 156.2));
|
||||
|
||||
--color-status-warn: light-dark(oklch(47.6% 0.106 63.3), oklch(88.3% 0.120 85.9));
|
||||
--color-status-warn-bg: light-dark(oklch(96.7% 0.029 82.6), oklch(26.8% 0.034 78.8));
|
||||
--color-status-warn-line: light-dark(oklch(72.6% 0.128 75.7), oklch(55.4% 0.107 76.3));
|
||||
|
||||
--color-status-danger: light-dark(oklch(48.1% 0.167 26.2), oklch(80.8% 0.103 19.6));
|
||||
--color-status-danger-bg: light-dark(oklch(95.2% 0.021 17.5), oklch(24.8% 0.043 13.6));
|
||||
--color-status-danger-line: light-dark(oklch(68.1% 0.127 21.0), oklch(49.1% 0.133 18.8));
|
||||
|
||||
/* Three-voice editorial typography */
|
||||
--font-sans: var(--font-jakarta), system-ui, sans-serif;
|
||||
--font-serif: var(--font-fraunces), Georgia, Cambria, serif;
|
||||
--font-mono: var(--font-jb-mono), ui-monospace, SFMono-Regular, monospace;
|
||||
|
||||
/* Animations */
|
||||
--animate-fade-in: fade-in 0.35s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
--animate-preview-timer: preview-timer 1s linear forwards;
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes preview-timer {
|
||||
from {
|
||||
transform: scaleX(0);
|
||||
}
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@view-transition {
|
||||
navigation: auto;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
color-scheme: light dark;
|
||||
}
|
||||
|
||||
html[data-theme="light"] {
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-canvas text-ink antialiased selection:bg-brand-950 selection:text-ink;
|
||||
}
|
||||
|
||||
/* Visible focus for keyboard users on every interactive element. */
|
||||
:where(button, a, input, select, summary, [tabindex]):focus-visible {
|
||||
@apply outline-2 outline-offset-2 outline-brand-600;
|
||||
}
|
||||
|
||||
input[type="range"] {
|
||||
@apply accent-brand-600;
|
||||
}
|
||||
|
||||
input:not([type="range"], [type="checkbox"]) {
|
||||
@apply bg-surface text-ink placeholder:text-ink-faint;
|
||||
}
|
||||
|
||||
/* Native <dialog> spring entry/exit via 2026 Baseline @starting-style */
|
||||
dialog {
|
||||
color: var(--color-ink);
|
||||
transition:
|
||||
opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
transform 0.26s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
display 0.26s allow-discrete,
|
||||
overlay 0.26s allow-discrete;
|
||||
opacity: 0;
|
||||
transform: translateY(14px) scale(0.985);
|
||||
}
|
||||
|
||||
dialog[open] {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
|
||||
@starting-style {
|
||||
opacity: 0;
|
||||
transform: translateY(14px) scale(0.985);
|
||||
}
|
||||
}
|
||||
|
||||
dialog.sheet-dialog {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
dialog.sheet-dialog[open] {
|
||||
transform: translateY(0);
|
||||
|
||||
@starting-style {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
dialog::backdrop {
|
||||
background-color: rgb(10 14 18 / 0);
|
||||
backdrop-filter: blur(0px);
|
||||
transition:
|
||||
background-color 0.24s ease,
|
||||
backdrop-filter 0.24s ease,
|
||||
display 0.24s allow-discrete,
|
||||
overlay 0.24s allow-discrete;
|
||||
}
|
||||
|
||||
dialog[open]::backdrop {
|
||||
background-color: rgb(10 14 18 / 0.55);
|
||||
backdrop-filter: blur(2px);
|
||||
|
||||
@starting-style {
|
||||
background-color: rgb(10 14 18 / 0);
|
||||
backdrop-filter: blur(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 2026 CSS optical cap-height trimming for buttons, badges & chips */
|
||||
.trim-cap {
|
||||
text-box-trim: trim-both;
|
||||
text-box-edge: cap alphabetic;
|
||||
}
|
||||
|
||||
/* Subtle tactile paper noise texture without GPU-heavy blur blobs */
|
||||
.paper-grain {
|
||||
background-image: radial-gradient(color-mix(in oklab, var(--color-ink) 5%, transparent) 1px, transparent 0);
|
||||
background-size: 18px 18px;
|
||||
}
|
||||
|
||||
/* Market receipt serrated / perforated divider feel */
|
||||
.receipt-rule {
|
||||
border-top: 1px dashed var(--color-line-strong);
|
||||
}
|
||||
|
||||
/* Respect the OS "reduce motion" setting everywhere. */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue