Convert app into @modernsk/ui component library package
- Add library entry (src/index.ts) re-exporting all components, theme, and TooltipProvider - Add shippable stylesheet (src/styles/index.css): tokens + components only, font inlined as base64 at build time - Build with tsup (ESM + CJS + .d.ts) and esbuild for CSS - package.json: exports map, files, sideEffects, peerDependencies (react/react-dom), correct deps (radix-ui), prepare-on-install - Fix phantom dependency: declare radix-ui, drop unused @radix-ui/themes - Remove Storybook boilerplate, Tailwind/PostCSS (unused) - Keep App.tsx + Rsbuild as dev-only playground (not published) Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,316 @@
|
||||
/* ============================================================
|
||||
ModernSK — Colors & Type Tokens (ported from Claude Design)
|
||||
Tactile, dark-first design system.
|
||||
Old-iOS skeuomorphism × macOS Sequoia neatness × Ubuntu warmth.
|
||||
------------------------------------------------------------
|
||||
Single source of truth. Every component reads from here.
|
||||
============================================================ */
|
||||
|
||||
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');
|
||||
|
||||
/* Anta — squared geometric display face (self-hosted from /public/fonts). */
|
||||
@font-face {
|
||||
font-family: 'Anta';
|
||||
src: url('../assets/Anta-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
:root {
|
||||
/* ---------- BRAND ---------- */
|
||||
--lime: #bef264;
|
||||
--lime-bright: #d4ff7a;
|
||||
--lime-deep: #a8e04a;
|
||||
--lime-ink: #1c2a08;
|
||||
|
||||
--ember: #e9572b;
|
||||
--ember-bright: #ff7a52;
|
||||
--ember-deep: #c4421d;
|
||||
|
||||
/* ---------- NEUTRALS (warm-tinted) ---------- */
|
||||
--ink: #0f100d;
|
||||
--ink-deep: #090a07;
|
||||
--ink-raised: #16170f;
|
||||
--steel-900: #1c1d16;
|
||||
--steel-800: #22241b;
|
||||
--steel-700: #2a2c22;
|
||||
--steel-600: #33342b;
|
||||
--steel-500: #44463a;
|
||||
--steel-400: #5a5c4d;
|
||||
|
||||
/* ---------- TEXT (on dark) ---------- */
|
||||
--fg-1: #f3f4ee;
|
||||
--fg-2: #a7a99c;
|
||||
--fg-3: #6f7164;
|
||||
--fg-on-lime: #1c2a08;
|
||||
--fg-on-ember: #ffffff;
|
||||
|
||||
/* ---------- HAIRLINES & STROKES ---------- */
|
||||
--hair: rgba(255,255,255,0.08);
|
||||
--hair-strong: rgba(255,255,255,0.14);
|
||||
--edge-top: rgba(255,255,255,0.10);
|
||||
--edge-inset: rgba(0,0,0,0.5);
|
||||
|
||||
/* ---------- SEMANTIC ---------- */
|
||||
--success: #bef264;
|
||||
--warning: #e6a93c;
|
||||
--danger: #e9572b;
|
||||
--info: #6db3f2;
|
||||
|
||||
--success-bg: rgba(190,242,100,0.12);
|
||||
--warning-bg: rgba(230,169,60,0.12);
|
||||
--danger-bg: rgba(233,87,43,0.14);
|
||||
--info-bg: rgba(109,179,242,0.12);
|
||||
|
||||
/* ---------- TYPE ----------
|
||||
Anta is the GLOBAL typeface. Onest / Geist Mono are fallbacks. */
|
||||
--font-display: 'Anta', 'Onest', system-ui, sans-serif;
|
||||
--font-sans: 'Anta', 'Onest', system-ui, -apple-system, 'Segoe UI', sans-serif;
|
||||
--font-mono: 'Anta', 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
||||
|
||||
--text-xs: 12px;
|
||||
--text-sm: 13px;
|
||||
--text-base: 15px;
|
||||
--text-md: 16px;
|
||||
--text-lg: 18px;
|
||||
--text-xl: 22px;
|
||||
--text-2xl: 28px;
|
||||
--text-3xl: 36px;
|
||||
--text-4xl: 48px;
|
||||
--text-5xl: 64px;
|
||||
|
||||
--w-light: 300;
|
||||
--w-regular: 400;
|
||||
--w-medium: 500;
|
||||
--w-semibold:600;
|
||||
--w-bold: 700;
|
||||
--w-black: 800;
|
||||
|
||||
--lh-tight: 1.05;
|
||||
--lh-snug: 1.25;
|
||||
--lh-normal: 1.5;
|
||||
--lh-relaxed: 1.65;
|
||||
--track-tight: -0.03em;
|
||||
--track-snug: -0.01em;
|
||||
--track-wide: 0.02em;
|
||||
--track-caps: 0.24em;
|
||||
|
||||
/* ---------- RADII ---------- */
|
||||
--r-xs: 3px;
|
||||
--r-sm: 4px;
|
||||
--r-md: 6px;
|
||||
--r-lg: 8px;
|
||||
--r-xl: 11px;
|
||||
--r-pill: 999px;
|
||||
|
||||
/* ---------- SPACING (4px base) ---------- */
|
||||
--space-1: 4px;
|
||||
--space-2: 8px;
|
||||
--space-3: 12px;
|
||||
--space-4: 16px;
|
||||
--space-5: 20px;
|
||||
--space-6: 24px;
|
||||
--space-8: 32px;
|
||||
--space-10: 40px;
|
||||
--space-12: 48px;
|
||||
--space-16: 64px;
|
||||
|
||||
/* ---------- CONTROL SIZING (compact, global) ---------- */
|
||||
--ctl-pad-y: 6px;
|
||||
--ctl-pad-x: 18px;
|
||||
--ctl-font: 14px;
|
||||
--field-pad-y: 7px;
|
||||
--field-pad-x: 13px;
|
||||
--switch-w: 42px;
|
||||
--switch-h: 22px;
|
||||
--switch-knob: 16px;
|
||||
--switch-gap: 3px;
|
||||
--seg-pad-y: 4px;
|
||||
--stepper-h: 30px;
|
||||
|
||||
/* ---------- ELEVATION / TACTILE SHADOWS ---------- */
|
||||
--shadow-raised:
|
||||
0 1px 0 rgba(255,255,255,0.06) inset,
|
||||
0 2px 3px rgba(0,0,0,0.5),
|
||||
0 6px 16px rgba(0,0,0,0.35);
|
||||
--shadow-raised-hover:
|
||||
0 1px 0 rgba(255,255,255,0.08) inset,
|
||||
0 3px 5px rgba(0,0,0,0.5),
|
||||
0 10px 24px rgba(0,0,0,0.4);
|
||||
--shadow-pressed:
|
||||
0 2px 5px rgba(0,0,0,0.6) inset,
|
||||
0 1px 0 rgba(255,255,255,0.04);
|
||||
--shadow-inset-well:
|
||||
0 2px 4px rgba(0,0,0,0.45) inset,
|
||||
0 1px 0 rgba(255,255,255,0.05);
|
||||
--shadow-card:
|
||||
0 1px 0 rgba(255,255,255,0.05) inset,
|
||||
0 12px 32px rgba(0,0,0,0.45),
|
||||
0 2px 6px rgba(0,0,0,0.35);
|
||||
--shadow-window:
|
||||
0 1px 0 rgba(255,255,255,0.07) inset,
|
||||
0 30px 80px rgba(0,0,0,0.55),
|
||||
0 2px 8px rgba(0,0,0,0.4);
|
||||
--focus-ring: 0 0 0 3px rgba(190,242,100,0.35);
|
||||
--focus-ring-ember: 0 0 0 3px rgba(233,87,43,0.32);
|
||||
--glow-lime: 0 6px 22px rgba(190,242,100,0.28);
|
||||
|
||||
/* ---------- GRADIENTS (gloss recipes) ---------- */
|
||||
--grad-key: linear-gradient(180deg, #2f3027, #24251e);
|
||||
--grad-key-hover:linear-gradient(180deg, #36372e, #2b2c23);
|
||||
--grad-key-down: linear-gradient(180deg, #1d1e17, #232419);
|
||||
--grad-primary: linear-gradient(180deg, #cdf972, var(--lime) 55%, #b1e655);
|
||||
--grad-primary-down: linear-gradient(180deg, var(--lime-deep), var(--lime));
|
||||
--grad-ember: linear-gradient(180deg, #f86f49, var(--ember) 55%, #d34c22);
|
||||
--grad-ember-down: linear-gradient(180deg, var(--ember-deep), var(--ember));
|
||||
--grad-titlebar:linear-gradient(180deg, #26271f, #1c1d16);
|
||||
|
||||
/* ---------- MOTION ---------- */
|
||||
--ease-out: cubic-bezier(.22,.61,.36,1);
|
||||
--ease-snap: cubic-bezier(.2,.9,.3,1.2);
|
||||
--dur-press: 60ms;
|
||||
--dur-quick: 120ms;
|
||||
--dur-base: 200ms;
|
||||
|
||||
/* ---------- THE FELT (background) ---------- */
|
||||
--bg-glow:
|
||||
radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.10), transparent 55%),
|
||||
radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.06), transparent 60%),
|
||||
radial-gradient(100% 100% at 50% 50%, #16170f 0%, #0f100d 60%, #090a07 100%);
|
||||
--grain-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.5 0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='gamma' amplitude='1' exponent='2.8' offset='0'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
|
||||
--grain-size: 200px;
|
||||
--grain-opacity: 0.45;
|
||||
|
||||
/* ---------- SPINNER GROOVE ----------
|
||||
Carved donut channel — dark at the top rim, catching light at the
|
||||
bottom, exactly like the sunk wells (switch / field). */
|
||||
--spin-groove-1: #090a07; /* top — in shadow */
|
||||
--spin-groove-2: #34352b; /* bottom — catches light */
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
THE FELT — the one global background.
|
||||
============================================================ */
|
||||
.msk-felt {
|
||||
position: relative;
|
||||
background-color: var(--ink);
|
||||
background-image: var(--bg-glow);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-attachment: fixed;
|
||||
color: var(--fg-1);
|
||||
}
|
||||
.msk-felt::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image: var(--grain-url);
|
||||
background-size: var(--grain-size) var(--grain-size);
|
||||
background-repeat: repeat;
|
||||
opacity: var(--grain-opacity);
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
LIGHT MODE — warm off-white "paper", Sierra-style gloss.
|
||||
============================================================ */
|
||||
[data-theme="light"] {
|
||||
--ink: #ecece3;
|
||||
--ink-deep: #deded2;
|
||||
--ink-raised: #f6f6ef;
|
||||
--steel-900: #ffffff;
|
||||
--steel-800: #f4f4ec;
|
||||
--steel-700: #e9e9df;
|
||||
--steel-600: #deded2;
|
||||
--steel-500: #c8c9bc;
|
||||
--steel-400: #aeb0a2;
|
||||
|
||||
--fg-1: #1d1e16;
|
||||
--fg-2: #5b5d50;
|
||||
--fg-3: #8a8c7d;
|
||||
|
||||
--hair: rgba(0,0,0,0.10);
|
||||
--hair-strong: rgba(0,0,0,0.16);
|
||||
--edge-top: rgba(255,255,255,0.9);
|
||||
--edge-inset: rgba(0,0,0,0.18);
|
||||
|
||||
--shadow-raised:
|
||||
0 1px 0 rgba(255,255,255,0.9) inset,
|
||||
0 1px 2px rgba(0,0,0,0.12),
|
||||
0 4px 10px rgba(0,0,0,0.10);
|
||||
--shadow-raised-hover:
|
||||
0 1px 0 rgba(255,255,255,0.95) inset,
|
||||
0 2px 4px rgba(0,0,0,0.14),
|
||||
0 8px 18px rgba(0,0,0,0.12);
|
||||
--shadow-pressed:
|
||||
0 2px 4px rgba(0,0,0,0.18) inset;
|
||||
--shadow-inset-well:
|
||||
0 2px 3px rgba(0,0,0,0.10) inset,
|
||||
0 1px 0 rgba(255,255,255,0.8);
|
||||
--shadow-card:
|
||||
0 1px 0 rgba(255,255,255,0.8) inset,
|
||||
0 10px 28px rgba(0,0,0,0.12),
|
||||
0 2px 6px rgba(0,0,0,0.08);
|
||||
--shadow-window:
|
||||
0 1px 0 rgba(255,255,255,0.9) inset,
|
||||
0 24px 64px rgba(0,0,0,0.22),
|
||||
0 2px 8px rgba(0,0,0,0.12);
|
||||
|
||||
--grad-key: linear-gradient(180deg, #ffffff, #ecece2);
|
||||
--grad-key-hover:linear-gradient(180deg, #ffffff, #f3f3ea);
|
||||
--grad-key-down: linear-gradient(180deg, #e4e4d8, #ededdf);
|
||||
--grad-titlebar: linear-gradient(180deg, #f4f4ec, #e7e7dd);
|
||||
|
||||
--bg-glow:
|
||||
radial-gradient(120% 80% at 50% -10%, rgba(190,242,100,0.18), transparent 55%),
|
||||
radial-gradient(90% 70% at 85% 110%, rgba(233,87,43,0.08), transparent 60%),
|
||||
radial-gradient(100% 100% at 50% 50%, #f2f2ea 0%, #ecece3 60%, #e2e2d6 100%);
|
||||
|
||||
/* carved groove on warm paper — top grey shadow, bottom near-white */
|
||||
--spin-groove-1: #c2c3b6;
|
||||
--spin-groove-2: #ffffff;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SEMANTIC TYPE CLASSES
|
||||
============================================================ */
|
||||
.msk-display {
|
||||
font-family: var(--font-display); font-weight: 400;
|
||||
font-size: var(--text-5xl); line-height: var(--lh-tight);
|
||||
letter-spacing: -0.01em; color: var(--fg-1);
|
||||
}
|
||||
.msk-h1 {
|
||||
font-family: var(--font-sans); font-weight: var(--w-bold);
|
||||
font-size: var(--text-3xl); line-height: var(--lh-snug);
|
||||
letter-spacing: var(--track-snug); color: var(--fg-1);
|
||||
}
|
||||
.msk-h2 {
|
||||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||||
font-size: var(--text-2xl); line-height: var(--lh-snug);
|
||||
letter-spacing: var(--track-snug); color: var(--fg-1);
|
||||
}
|
||||
.msk-h3 {
|
||||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||||
font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--fg-1);
|
||||
}
|
||||
.msk-body {
|
||||
font-family: var(--font-sans); font-weight: var(--w-regular);
|
||||
font-size: var(--text-base); line-height: var(--lh-normal); color: var(--fg-2);
|
||||
}
|
||||
.msk-body-strong { font-weight: var(--w-medium); color: var(--fg-1); }
|
||||
.msk-caption {
|
||||
font-family: var(--font-sans); font-weight: var(--w-medium);
|
||||
font-size: var(--text-sm); color: var(--fg-3);
|
||||
}
|
||||
.msk-label {
|
||||
font-family: var(--font-sans); font-weight: var(--w-semibold);
|
||||
font-size: 11px; text-transform: uppercase;
|
||||
letter-spacing: var(--track-caps); color: var(--fg-3);
|
||||
}
|
||||
.msk-mono {
|
||||
font-family: var(--font-mono); font-weight: var(--w-regular);
|
||||
font-size: var(--text-sm); color: var(--fg-2);
|
||||
}
|
||||
Reference in New Issue
Block a user