mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 14:16:28 +03:00
Paul BakausandGitHub
51d01e3a5f
* Add design-aware detector rules * Fix design-aware detector noise * Unify CLI and hook detector ignores * Fix remaining design-system review findings * Add detector ignore CLI * Fix design detector review findings * Fix design color source false positives * Fix core test suite registration * Add design-aware detector docs * Fix font priority design-system parsing * Fix color ignore value matching
125 lines
3.5 KiB
CSS
125 lines
3.5 KiB
CSS
/*
|
|
* impeccable.style — design tokens + minimal reset
|
|
*
|
|
* Shared by every page on the site (landing + generated sub-pages).
|
|
* Keep this file small and dependency-free.
|
|
*/
|
|
|
|
/* ============================================
|
|
MINIMAL CSS RESET
|
|
============================================ */
|
|
|
|
*, *::before, *::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
}
|
|
|
|
img, picture, video, canvas, svg {
|
|
display: block;
|
|
max-width: 100%;
|
|
}
|
|
|
|
button, input, textarea, select {
|
|
font: inherit;
|
|
}
|
|
|
|
/* ============================================
|
|
DESIGN TOKENS
|
|
============================================ */
|
|
|
|
:root {
|
|
/* Typography — kinpaku is the default. The legacy token names now point at
|
|
the --ks-* faces (defined in kinpaku-tokens.css, loaded globally via
|
|
Base.astro) so any rule still reading --font-* renders in the brand
|
|
faces. The old Cormorant/Instrument/Space Grotesk trio is retired. */
|
|
--font-display: var(--ks-font-display);
|
|
--font-body: var(--ks-font);
|
|
--font-mono: var(--ks-mono);
|
|
|
|
/* Spacing Scale */
|
|
--spacing-xs: 8px;
|
|
--spacing-sm: 16px;
|
|
--spacing-md: 24px;
|
|
--spacing-lg: 32px;
|
|
--spacing-xl: 48px;
|
|
--spacing-2xl: 80px;
|
|
--spacing-3xl: 120px;
|
|
|
|
/* Width */
|
|
--width-max: 1400px;
|
|
--width-content: 900px;
|
|
|
|
/* Animation */
|
|
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
|
|
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
|
|
--duration-fast: 0.15s;
|
|
--duration-base: 0.3s;
|
|
--duration-slow: 0.6s;
|
|
--duration-slower: 0.8s;
|
|
--duration-slowest: 1.2s;
|
|
|
|
/* Core colors — kinpaku is the default surface. The legacy token names now
|
|
carry dark-lacquer values (mirroring the per-page kinpaku remaps), so any
|
|
rule still reading --color-* renders on the kinpaku surface. Surfaces are
|
|
literal oklch; ink/text/accent point at the --ks-* brand tokens. */
|
|
--color-ink: var(--ks-champagne);
|
|
--color-text: var(--ks-text);
|
|
--color-paper: oklch(7% 0.006 95);
|
|
--color-cream: oklch(9% 0.006 95);
|
|
--color-charcoal: var(--ks-text-muted);
|
|
--color-ash: var(--ks-text-faint);
|
|
--color-mist: var(--ks-rule);
|
|
--color-bg: oklch(11% 0.006 95);
|
|
|
|
/* Accent — kinpaku gold (was magenta). */
|
|
--color-accent: var(--ks-kinpaku);
|
|
--color-accent-hover: var(--ks-kinpaku-pale);
|
|
--color-accent-dim: oklch(78% 0.12 82 / 0.18);
|
|
--color-accent-soft: oklch(78% 0.12 82 / 0.32);
|
|
|
|
/* Framework category colors - Light mode */
|
|
--cat-create-bg: #fdf2f8;
|
|
--cat-create-border: #ec4899;
|
|
--cat-create-text: #be185d;
|
|
|
|
--cat-evaluate-bg: #fdf4ff;
|
|
--cat-evaluate-border: #d946ef;
|
|
--cat-evaluate-text: #a21caf;
|
|
|
|
--cat-refine-bg: #eff6ff;
|
|
--cat-refine-border: #3b82f6;
|
|
--cat-refine-text: #1d4ed8;
|
|
|
|
--cat-simplify-bg: #fffbeb;
|
|
--cat-simplify-border: #f59e0b;
|
|
--cat-simplify-text: #b45309;
|
|
|
|
--cat-harden-bg: #f0fdf4;
|
|
--cat-harden-border: #22c55e;
|
|
--cat-harden-text: #15803d;
|
|
|
|
--cat-system-bg: #f5f5f4;
|
|
--cat-system-border: #78716c;
|
|
--cat-system-text: #44403c;
|
|
}
|
|
|
|
/* Light mode legacy aliases — mirror html.light --ks-* tokens. */
|
|
html.light {
|
|
--color-ink: var(--ks-champagne);
|
|
--color-text: var(--ks-text);
|
|
--color-paper: var(--ks-lacquer);
|
|
--color-cream: var(--ks-lacquer-raised);
|
|
--color-charcoal: var(--ks-text);
|
|
--color-ash: var(--ks-text-muted);
|
|
--color-mist: var(--ks-rule);
|
|
--color-bg: var(--ks-lacquer-raised);
|
|
--color-accent: var(--ks-kinpaku);
|
|
--color-accent-hover: var(--ks-kinpaku-pale);
|
|
--color-accent-dim: oklch(77% 0.13 82 / 0.14);
|
|
--color-accent-soft: oklch(77% 0.13 82 / 0.24);
|
|
}
|