astryx-dracula 0.6.2 → 0.7.0

package/theme.css

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.7.2
- * Core: @astryxdesign/core@0.7.2
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 @layer reset, astryx-base, astryx-theme;
@@ -149,6 +149,18 @@
     --duration-slow-min: 730ms;
     --duration-slow: 975ms;
     --duration-slow-max: 1300ms;
+    --_astryx-pre-tempo-duration-fast-min: 130ms;
+    --_astryx-pre-tempo-duration-fast: 175ms;
+    --_astryx-pre-tempo-duration-fast-max: 235ms;
+    --_astryx-pre-tempo-duration-medium-min: 310ms;
+    --_astryx-pre-tempo-duration-medium: 410ms;
+    --_astryx-pre-tempo-duration-medium-max: 545ms;
+    --_astryx-pre-tempo-duration-slow-min: 730ms;
+    --_astryx-pre-tempo-duration-slow: 975ms;
+    --_astryx-pre-tempo-duration-slow-max: 1300ms;
+    --_astryx-motion-tempo: 1;
+    --ease-entrance: cubic-bezier(0.24, 1, 0.4, 1);
+    --ease-move: cubic-bezier(0.24, 1, 0.4, 1);
     --font-family-body: "JetBrains Mono", monospace;
     --font-family-heading: "JetBrains Mono", monospace;
     --font-family-code: "JetBrains Mono", monospace;
@@ -214,7 +226,7 @@
     --color-background-surface: light-dark(#343746, #343746);
     --color-background-card: light-dark(#343746, #343746);
     --color-background-popover: light-dark(#424450, #424450);
-    --color-background-muted: light-dark(#44475A, #44475A);
+    --color-background-muted: light-dark(#21222C, #21222C);
     --color-overlay: light-dark(#191A21CC, #191A21CC);
     --color-overlay-hover: light-dark(#0000001F, #0000001F);
     --color-overlay-pressed: light-dark(#00000033, #00000033);
@@ -229,6 +241,14 @@
     --color-text-secondary: light-dark(#9AA1BC, #9AA1BC);
     --color-text-disabled: light-dark(#6272A4, #6272A4);
     --color-text-accent: light-dark(#BD93F9, #BD93F9);
+    --color-text-info: light-dark(#8BE9FD, #8BE9FD);
+    --color-text-success: light-dark(#50FA7B, #50FA7B);
+    --color-text-warning: light-dark(#F1FA8C, #F1FA8C);
+    --color-text-error: light-dark(#FF7575, #FF7575);
+    --color-on-info-muted: light-dark(#8BE9FD, #8BE9FD);
+    --color-on-success-muted: light-dark(#50FA7B, #50FA7B);
+    --color-on-warning-muted: light-dark(#F1FA8C, #F1FA8C);
+    --color-on-error-muted: light-dark(#FF7575, #FF7575);
     --color-icon-primary: light-dark(#F8F8F2, #F8F8F2);
     --color-icon-secondary: light-dark(#9AA1BC, #9AA1BC);
     --color-icon-disabled: light-dark(#6272A4, #6272A4);
@@ -369,6 +389,15 @@
     --color-tag-yellow: light-dark(#F1FA8C, #F1FA8C);
     --color-tag-green: light-dark(#50FA7B, #50FA7B);
     --color-tag-purple: light-dark(#BD93F9, #BD93F9);
+    --color-icon-info: var(--color-text-info);
+    --color-icon-success: var(--color-text-success);
+    --color-icon-warning: var(--color-text-warning);
+    --color-icon-error: var(--color-text-error);
+    --color-border-info: var(--color-text-info);
+    --color-border-success: var(--color-text-success);
+    --color-border-warning: var(--color-text-warning);
+    --color-border-error: var(--color-text-error);
+    --duration-exit: var(--duration-fast);
   }
 
   :scope {
@@ -770,6 +799,12 @@
 
   .astryx-link[data-color="accent"] { color: var(--color-text-accent); }
 
+  .astryx-text[data-color="inherit"] { color: inherit; }
+
+  .astryx-heading[data-color="inherit"] { color: inherit; }
+
+  .astryx-link[data-color="inherit"] { color: inherit; }
+
   .astryx-text[data-size="4xs"] { font-size: var(--font-size-4xs); }
 
   .astryx-text[data-size="3xs"] { font-size: var(--font-size-3xs); }

package/theme.css.d.ts

@@ -2,8 +2,8 @@
  * @generated by `astryx theme build` — do not edit manually.
  * Source: astryx-theme.ts
  * Command: astryx theme build astryx-theme.ts --out theme.css
- * CLI: @astryxdesign/cli@0.7.2
- * Core: @astryxdesign/core@0.7.2
+ * CLI: @astryxdesign/cli@0.7.10
+ * Core: @astryxdesign/core@0.7.10
  */
 
 export {};

package/tokens.css

@@ -1,13 +1,20 @@
 /* Astryx Styles — pure Dracula brand tokens.
  * Plain-CSS path: `@import './tokens.css'` then use var(--color-*) / var(--dracula-*) / var(--space-*).
  * This file is the pre-theme paint fallback. Values follow the Dracula spec UI
- * palette (Background Light #343746 surfaces, Selection #44475A quiet edges,
- * Current Line #6272A4 visible edges). Do not add new hexes here.
+ * palette (Background Light #343746 surfaces, Background Lighter #424450 floaters,
+ * Background Dark #21222C recessed wells, Current Line #6272A4 visible edges). Do not
+ * add new hexes here: every value
+ * below is one of the spec's four palettes (Syntax, ANSI, UI, Functional) or a
+ * lift documented in this header — check the spec before assuming a hex is a
+ * stray.
  * Deliberate spec deviations, mirrored in astryx-theme.ts: spec Comment
  * #6272A4 fails the 4.5:1 WCAG floor for body text, so secondary #9AA1BC,
  * paragraph #B0B3C4 and base-muted #8288A6 are same-hue lifts, #4C5067
  * (subdue) is chrome only and never text, and theme.css adds #FFD5CC as the
- * pale inverted error surface. Do not revert any of them to spec hexes.
+ * pale inverted error surface. #FF7575 is the spec's AnsiBrightRed lifted 5%
+ * toward Foreground for the error TEXT role: BrightRed is 5.23:1 on the body
+ * but 4.33:1 on a surface, just under the spec's own 4.5 floor. Do not revert
+ * any of them to spec hexes.
  * Two categorical data hues are excluded from the CHART palette: `brown` (was
  * byte-identical to orange, and a categorical series set is a palette where
  * distinctness IS the contract) and `purple` (purple means tappable, never
@@ -73,11 +80,25 @@ body {
 	--dracula-bg-light: #343746;
 	--dracula-bg-lighter: #424450;
 	--dracula-bg-dark: #21222c;
+	/* Spec UI Functional palette — interactive elements, borders, indicators.
+	   Not for editor or terminal use, and never a status channel. */
 	--dracula-functional-red: #de5735;
 	--dracula-functional-orange: #a39514;
 	--dracula-functional-green: #089108;
 	--dracula-functional-cyan: #0081d6;
 	--dracula-functional-purple: #815cd6;
+	/* Spec ANSI bright row. A second, brighter step of the same eight hues,
+	   for emphasis where the base hue is too quiet, and for a chart series that
+	   must stay distinct past the base eight. Not wired to a semantic token:
+	   reach for one directly when you need it. BrightBlack is Comment. */
+	--dracula-ansi-bright-black: #6272a4;
+	--dracula-ansi-bright-red: #ff6e6e;
+	--dracula-ansi-bright-green: #69ff94;
+	--dracula-ansi-bright-yellow: #ffffa5;
+	--dracula-ansi-bright-blue: #d6acff;
+	--dracula-ansi-bright-magenta: #ff92df;
+	--dracula-ansi-bright-cyan: #a4ffff;
+	--dracula-ansi-bright-white: #ffffff;
 
 	--space-gap: 24px;
 	--space-viewport: 16px;
@@ -183,7 +204,7 @@ body {
 	--color-background-surface: #343746;
 	--color-background-card: #343746;
 	--color-background-popover: #424450;
-	--color-background-muted: #44475a;
+	--color-background-muted: #21222c;
 	--color-background-inverted: #f8f8f2;
 	--color-background-error-inverted: #ffd5cc;
 	--color-overlay: #191a21cc;
@@ -226,6 +247,22 @@ body {
 	--color-on-warning: #21222c;
 	--color-on-error: #21222c;
 	--color-on-info: #21222c;
+	/* Status text, added to core in 0.7.10. core derives each one from a
+	   --color-text-<hue> and inlines the source at build time, so a theme that
+	   pins only the source keeps Stone's amber. Error text is Red lifted 20%
+	   toward Foreground: spec Red is 4.53:1 on the body but 3.75:1 on a
+	   surface, under the 4.5 floor, and the lift reads 5.46 and 4.52. */
+	--color-text-info: var(--dracula-cyan);
+	--color-text-success: var(--dracula-green);
+	--color-text-warning: var(--dracula-yellow);
+	--color-text-error: #ff7575;
+	--color-on-info-muted: var(--dracula-cyan);
+	--color-on-success-muted: var(--dracula-green);
+	--color-on-warning-muted: var(--dracula-yellow);
+	--color-on-error-muted: #ff7575;
+	/* Token compatibility only: core and every shipped component ignore these,
+	   and they are never a status channel. Values are the spec's UI Functional
+	   palette, which is a real part of the specification. */
 	--color-functional-red: #de5735;
 	--color-functional-orange: #a39514;
 	--color-functional-green: #089108;