@getaster/elements 0.0.0-stage → 0.1.0-preview.1

package/styles/harbour.css

@@ -0,0 +1,126 @@
+/* Harbour: cool, calm, nautical. Slate and blue-grey neutrals, one deep indigo
+   accent that acts, and a single warm coral that only marks where to look.
+   Generous soft corners, hairline rings and low cool shadows; no texture, no
+   lamp. System rounded type throughout. */
+@layer aster.identity {
+  :root[data-identity="harbour"] {
+    --aster-font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --aster-font-figure: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
+    --aster-font-size: 14px;
+    --aster-line: 1.5;
+    --aster-weight: 420;
+    --aster-weight-strong: 600;
+    --aster-weight-label: 600;
+    --aster-figure-settings: normal;
+    --aster-title-settings: normal;
+    --aster-heading-settings: normal;
+    --aster-prose-settings: normal;
+
+    --aster-page: oklch(94% .012 245);
+    --aster-surface: oklch(99% .004 245);
+    --aster-sunk: oklch(96.4% .008 245);
+    --aster-pane: oklch(92% .014 247);
+    --aster-backdrop: var(--aster-page);
+    --aster-frame: var(--aster-surface);
+    --aster-texture: none;
+    --aster-texture-blend: normal;
+    --aster-texture-opacity: 0;
+
+    --aster-text: oklch(26% .035 258);
+    --aster-text-2: oklch(46% .03 255);
+    --aster-text-3: oklch(52.5% .025 252);
+
+    --aster-rule: oklch(40% .04 255 / .16);
+    --aster-rule-2: oklch(40% .04 255 / .08);
+    --aster-mark-ring: oklch(0% 0 0 / .18);
+
+    --aster-accent: oklch(45% .15 268);
+    --aster-accent-hi: oklch(39% .155 268);
+    --aster-accent-soft: oklch(45% .15 268 / .09);
+    --aster-on-accent: oklch(98% .008 250);
+    --aster-accent-sheen: transparent;
+    --aster-focus: oklch(from var(--aster-accent) l c h / .75);
+    --aster-focus-offset: 2px;
+    --aster-indicator: oklch(62% .17 32);
+
+    --aster-positive: oklch(50% .09 170);
+    --aster-negative: oklch(50% .17 25);
+    --aster-caution: oklch(56% .12 68);
+
+    --aster-identity-l: 62%;
+    --aster-identity-c: .1;
+
+    --aster-shadow: oklch(30% .06 255);
+    --aster-highlight: 0 0 #0000;
+    --aster-ring: 0 0 0 1px var(--aster-rule);
+    --aster-e1: var(--aster-ring), 0 1px 2px oklch(from var(--aster-shadow) l c h / .06);
+    --aster-e2: var(--aster-ring), 0 3px 10px oklch(from var(--aster-shadow) l c h / .09);
+    --aster-e3: var(--aster-ring), 0 12px 32px oklch(from var(--aster-shadow) l c h / .16), 0 2px 6px oklch(from var(--aster-shadow) l c h / .07);
+    --aster-well: inset 0 0 0 1px var(--aster-rule);
+    --aster-scrim: oklch(25% .05 258 / .38);
+    --aster-press: oklch(15% .06 262 / .3);
+
+    --aster-r-ctl: 8px;
+    --aster-r-card: 12px;
+    --aster-r-pop: 14px;
+    --aster-r-dialog: 16px;
+
+    --aster-ease: cubic-bezier(.3, .7, .25, 1);
+    --aster-t-morph: 260ms;
+    --aster-t-ink: 200ms;
+    --aster-t-micro: 140ms;
+    --aster-t-caret: 220ms;
+    --aster-t-scheme: 260ms;
+
+    --aster-toast-bg: oklch(27% .04 258);
+    --aster-toast-text: oklch(97% .008 245);
+    --aster-toast-action: oklch(80% .1 265);
+    --aster-toast-mark: oklch(72% .16 32);
+
+    --aster-lamp: oklch(100% 0 0);
+    --aster-glow: 0;
+    --aster-lamp-bulb: transparent;
+
+    color-scheme: light;
+  }
+
+  :root[data-identity="harbour"][data-scheme="dark"] {
+    --aster-page: oklch(18.5% .022 258);
+    --aster-surface: oklch(25% .026 257);
+    --aster-sunk: oklch(21.5% .024 258);
+    --aster-pane: oklch(21.5% .024 258);
+
+    --aster-text: oklch(93% .012 245);
+    --aster-text-2: oklch(75% .02 250);
+    --aster-text-3: oklch(71% .022 252);
+
+    --aster-rule: oklch(90% .03 250 / .14);
+    --aster-rule-2: oklch(90% .03 250 / .07);
+
+    --aster-accent: oklch(78% .11 268);
+    --aster-accent-hi: oklch(84% .1 268);
+    --aster-accent-soft: oklch(78% .11 268 / .15);
+    --aster-on-accent: oklch(20% .05 265);
+    --aster-indicator: oklch(72% .16 32);
+
+    --aster-positive: oklch(76% .1 170);
+    --aster-negative: oklch(72% .14 25);
+    --aster-caution: oklch(78% .11 75);
+
+    --aster-identity-l: 70%;
+
+    --aster-shadow: oklch(5% .03 260);
+    --aster-e1: var(--aster-ring), 0 1px 2px oklch(from var(--aster-shadow) l c h / .3);
+    --aster-e2: var(--aster-ring), 0 3px 10px oklch(from var(--aster-shadow) l c h / .35);
+    --aster-e3: var(--aster-ring), 0 12px 32px oklch(from var(--aster-shadow) l c h / .5), 0 2px 6px oklch(from var(--aster-shadow) l c h / .3);
+    --aster-scrim: oklch(8% .03 260 / .55);
+    --aster-press: oklch(0% 0 0 / .35);
+
+    --aster-toast-bg: oklch(93% .012 245);
+    --aster-toast-text: oklch(22% .035 258);
+    --aster-toast-action: oklch(42% .15 268);
+    --aster-toast-mark: oklch(58% .17 32);
+
+    color-scheme: dark;
+  }
+}

package/styles/lamplight.css

@@ -0,0 +1,118 @@
+/* Lamplight: one warm lamp at the upper left, cool shadows (x = y / 2),
+   stone paper with grain, ink rules, serif ledger figures, and one green
+   ink that acts. Dark is the lamp dimmed, not a grey theme.
+   Fonts are loaded by the app; this sheet names them. */
+@property --aster-glow { syntax: "<number>"; inherits: true; initial-value: 1; }
+
+@layer aster.identity {
+  :root {
+    --aster-font-ui: "Bricolage Grotesque Variable", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
+    --aster-font-figure: "Fraunces Variable", "Fraunces", ui-serif, Georgia, serif;
+    --aster-font-size: 13px;
+    --aster-line: 1.45;
+    --aster-weight: 450;
+    --aster-weight-strong: 560;
+    --aster-weight-label: 600;
+    --aster-figure-settings: "SOFT" 30, "WONK" 1;
+    --aster-title-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
+    --aster-heading-settings: "opsz" 96, "SOFT" 30, "WONK" 1;
+    --aster-prose-settings: "opsz" 24, "SOFT" 50, "WONK" 0;
+
+    --aster-page: oklch(95.2% .006 75);
+    --aster-surface: oklch(98.8% .004 80);
+    --aster-sunk: oklch(96.6% .006 76);
+    --aster-pane: oklch(93.6% .008 74);
+    --aster-text: oklch(25% .018 60);
+    --aster-text-2: oklch(46% .016 62);
+    --aster-text-3: oklch(53% .013 66);
+    --aster-rule: oklch(32% .025 60 / .15);
+    --aster-rule-2: oklch(32% .025 60 / .08);
+    --aster-mark-ring: oklch(0% 0 0 / .2);
+
+    --aster-accent: oklch(47% .095 168);
+    --aster-accent-hi: oklch(53% .1 168);
+    --aster-accent-soft: oklch(47% .095 168 / .085);
+    --aster-on-accent: oklch(98% .01 160);
+    --aster-accent-sheen: oklch(100% 0 0 / .18);
+    --aster-positive: var(--aster-accent);
+    --aster-negative: oklch(53% .16 28);
+    --aster-caution: oklch(65% .13 75);
+    --aster-focus: oklch(from var(--aster-accent) l c h / .7);
+    --aster-focus-offset: 0px;
+    --aster-indicator: var(--aster-accent);
+    --aster-identity-l: 62%;
+    --aster-identity-c: .1;
+
+    --aster-shadow: oklch(28% .05 265);
+    --aster-highlight: inset 0 1px 0 oklch(100% 0 0 / .85);
+    --aster-ring: 0 0 0 .5px var(--aster-rule);
+    --aster-e1: var(--aster-ring), var(--aster-highlight), 1px 1px 2px oklch(from var(--aster-shadow) l c h / .06), 2px 3px 8px oklch(from var(--aster-shadow) l c h / .05);
+    --aster-e2: var(--aster-ring), var(--aster-highlight), 1px 2px 4px oklch(from var(--aster-shadow) l c h / .07), 3px 8px 20px oklch(from var(--aster-shadow) l c h / .07), 6px 18px 40px oklch(from var(--aster-shadow) l c h / .06);
+    --aster-e3: var(--aster-ring), var(--aster-highlight), 2px 4px 10px oklch(from var(--aster-shadow) l c h / .09), 6px 16px 36px oklch(from var(--aster-shadow) l c h / .11), 12px 32px 64px oklch(from var(--aster-shadow) l c h / .11);
+    --aster-well: 0 0 0 .5px var(--aster-rule), inset 1px 1px 2px oklch(from var(--aster-shadow) l c h / .09);
+    --aster-scrim: oklch(from var(--aster-shadow) l c h / .14);
+    --aster-press: oklch(0% 0 0 / .25);
+
+    --aster-r-ctl: 3px;
+    --aster-r-card: 5px;
+    --aster-r-pop: 8px;
+    --aster-r-dialog: 8px;
+
+    --aster-ease: cubic-bezier(.2, .8, .2, 1);
+    --aster-t-morph: 220ms;
+    --aster-t-ink: 160ms;
+    --aster-t-micro: 120ms;
+    --aster-t-caret: 180ms;
+    --aster-t-scheme: 420ms;
+
+    --aster-toast-bg: var(--aster-text);
+    --aster-toast-text: var(--aster-surface);
+    --aster-toast-action: oklch(85% .1 168);
+    --aster-toast-mark: oklch(80% .12 168);
+
+    --aster-lamp: oklch(99.5% .03 88);
+    --aster-glow: 1;
+    --aster-lamp-bulb: oklch(88% .12 85 / .7);
+    --aster-backdrop:
+      radial-gradient(115% 75% at 10% -12%, oklch(from var(--aster-lamp) l c h / calc(var(--aster-glow) * .9)), transparent 62%),
+      var(--aster-page);
+    --aster-frame:
+      radial-gradient(70% 55% at 0% 0%, oklch(from var(--aster-lamp) l c h / calc(var(--aster-glow) * .55)), transparent 70%),
+      var(--aster-surface);
+    --aster-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
+    --aster-texture-blend: multiply;
+    --aster-texture-opacity: .055;
+    color-scheme: light;
+  }
+
+  :root[data-scheme="dark"] {
+    --aster-page: oklch(19.5% .009 70);
+    --aster-surface: oklch(24.5% .01 72);
+    --aster-sunk: oklch(21.8% .009 70);
+    --aster-pane: oklch(21.5% .009 70);
+    --aster-text: oklch(92.5% .012 85);
+    --aster-text-2: oklch(72% .012 80);
+    --aster-text-3: oklch(68.5% .012 78);
+    --aster-rule: oklch(95% .02 85 / .1);
+    --aster-rule-2: oklch(95% .02 85 / .055);
+    --aster-accent: oklch(76% .1 168);
+    --aster-accent-hi: oklch(81% .1 168);
+    --aster-accent-soft: oklch(76% .1 168 / .12);
+    --aster-on-accent: oklch(20% .03 168);
+    --aster-negative: oklch(70% .14 28);
+    --aster-lamp: oklch(75% .06 80);
+    --aster-shadow: oklch(6% .03 265);
+    --aster-highlight: inset 0 1px 0 oklch(98% .02 85 / .075);
+    --aster-ring: 0 0 0 .5px oklch(0% 0 0 / .65);
+    --aster-e1: var(--aster-ring), var(--aster-highlight), 1px 1px 2px oklch(from var(--aster-shadow) l c h / .35), 2px 3px 8px oklch(from var(--aster-shadow) l c h / .25);
+    --aster-e2: var(--aster-ring), var(--aster-highlight), 1px 2px 4px oklch(from var(--aster-shadow) l c h / .4), 3px 8px 20px oklch(from var(--aster-shadow) l c h / .35), 6px 18px 40px oklch(from var(--aster-shadow) l c h / .3);
+    --aster-e3: var(--aster-ring), var(--aster-highlight), 2px 4px 10px oklch(from var(--aster-shadow) l c h / .45), 6px 16px 36px oklch(from var(--aster-shadow) l c h / .45), 12px 32px 64px oklch(from var(--aster-shadow) l c h / .4);
+    --aster-well: 0 0 0 .5px oklch(0% 0 0 / .6), inset 1px 1px 2px oklch(from var(--aster-shadow) l c h / .4);
+    --aster-scrim: oklch(0% 0 0 / .45);
+    --aster-toast-action: oklch(42% .1 168);
+    --aster-texture-blend: overlay;
+    --aster-texture-opacity: .07;
+    --aster-glow: .16;
+    color-scheme: dark;
+  }
+}