@astryxdesign/theme-gothic 0.0.0-bootstrap.0 → 0.0.15

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Meta Platforms, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,104 @@
 # @astryxdesign/theme-gothic
 
-This is a `0.0.0-bootstrap.0` placeholder published only to claim the npm name while configuring npm trusted publishing. Do not install it; it will be superseded by the first real release.
+**Dark-only** atmospheric gothic theme for Astryx — deep blue-gray surfaces, distressed display heading, and pastel categorical accents that glow against the dark page like illuminated panels. Uses Manufacturing Consent for headings, Fustat for body text, and [Lucide](https://lucide.dev) icons.
+
+> Gothic is a single-mode theme: it always renders dark, regardless of the user's system color preference. For best browser-chrome integration (scrollbars, native form controls), pass `mode="dark"` to your `XDSTheme` provider.
+
+## Install
+
+```bash
+npm install @astryxdesign/theme-gothic
+```
+
+## Usage
+
+Wrap your app with `XDSTheme` and pass the theme:
+
+```tsx
+import {XDSTheme} from '@astryxdesign/core/theme';
+import {gothicTheme} from '@astryxdesign/theme-gothic/built';
+
+function App() {
+  return (
+    <XDSTheme theme={gothicTheme} mode="dark">
+      {/* your app */}
+    </XDSTheme>
+  );
+}
+```
+
+### Import paths
+
+| Path                          | Use case                                               |
+| ----------------------------- | ------------------------------------------------------ |
+| `@astryxdesign/theme-gothic`           | Source build (StyleX compilation via `@astryxdesign/build`)     |
+| `@astryxdesign/theme-gothic/built`     | Pre-built dist (Tailwind, plain CSS, or no build step) |
+| `@astryxdesign/theme-gothic/theme.css` | Pre-built CSS file (import in your stylesheet)         |
+
+If you're using `@astryxdesign/build` for StyleX source compilation, import from the bare path. Otherwise, use `/built`.
+
+### CSS import
+
+Add the theme CSS to your stylesheet:
+
+```css
+@import '@astryxdesign/theme-gothic/theme.css';
+```
+
+## Aesthetic
+
+Gothic is dark-only by design: every token is a single value, and the
+output CSS contains no `light-dark()`, so the theme renders identically
+whether the user prefers light or dark.
+
+| Aspect       | Choice                                                 |
+| ------------ | ------------------------------------------------------ |
+| Mode         | Dark only, no light variant                           |
+| Neutral      | Cool blue-gray (#101314 → #E8F1F6)                     |
+| Status       | Forest moss, blood crimson, candlelight amber          |
+| Categorical  | Pastel-on-dark: light backgrounds, dark text          |
+| Radius       | Subtle rounding (2–24px)                               |
+| Motion       | Slower / theatrical (150ms → 800ms, 0.75 ratio)        |
+| Type scale   | 14px base, 1.2 ratio                                   |
+
+## Fonts
+
+This theme uses custom typefaces:
+
+| Role    | Font                  | Vibe                       |
+| ------- | --------------------- | -------------------------- |
+| Body    | Fustat                | Clean modern sans          |
+| Heading | Manufacturing Consent | Distressed display         |
+| Code    | JetBrains Mono        | Crisp, monospaced          |
+
+**These fonts must be loaded separately.** The theme references them by name but does not bundle the font files.
+
+Add this to your HTML `<head>`:
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Fustat:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&family=Manufacturing+Consent&display=swap" />
+```
+
+Without this, the theme falls back to system fonts (heading falls through Manufacturing Consent → UnifrakturMaguntia → Old English Text MT → serif).
+
+## Tonal palettes
+
+The theme exports raw tonal palettes for custom components or data
+visualization. Each palette has 21 tone steps (0–100 in 5s):
+
+```tsx
+import {gothicPalettes} from '@astryxdesign/theme-gothic';
+
+// e.g. cathedral plum at tone 50
+const plum = gothicPalettes.purple[50]; // '#a363bd'
+
+// or use the metadata for derived tools
+const {hue, chroma} = gothicPalettes.neutral; // {hue: 210, chroma: 4}
+```
+
+Available palettes: `neutral`, `blue`, `cyan`, `green`, `orange`, `pink`,
+`purple`, `red`, `teal`, `yellow`.

package/dist/chunk-DQCR44CW.mjs

@@ -0,0 +1,66 @@
+// src/icons.tsx
+import {
+  X,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  Check,
+  CheckCircle,
+  XCircle,
+  AlertTriangle,
+  Info,
+  Calendar,
+  Clock,
+  ExternalLink,
+  Menu,
+  MoreHorizontal,
+  Search,
+  ArrowUp,
+  ArrowDown,
+  ArrowUpDown,
+  Filter,
+  EyeOff,
+  Columns,
+  Copy,
+  CheckCheck,
+  Wrench,
+  Square,
+  Mic
+} from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var iconProps = {
+  size: "1em",
+  "aria-hidden": true
+};
+var gothicIconRegistry = {
+  close: /* @__PURE__ */ jsx(X, { ...iconProps }),
+  chevronDown: /* @__PURE__ */ jsx(ChevronDown, { ...iconProps }),
+  chevronLeft: /* @__PURE__ */ jsx(ChevronLeft, { ...iconProps }),
+  chevronRight: /* @__PURE__ */ jsx(ChevronRight, { ...iconProps }),
+  check: /* @__PURE__ */ jsx(Check, { ...iconProps }),
+  success: /* @__PURE__ */ jsx(CheckCircle, { ...iconProps }),
+  error: /* @__PURE__ */ jsx(XCircle, { ...iconProps }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { ...iconProps }),
+  info: /* @__PURE__ */ jsx(Info, { ...iconProps }),
+  calendar: /* @__PURE__ */ jsx(Calendar, { ...iconProps }),
+  clock: /* @__PURE__ */ jsx(Clock, { ...iconProps }),
+  externalLink: /* @__PURE__ */ jsx(ExternalLink, { ...iconProps }),
+  menu: /* @__PURE__ */ jsx(Menu, { ...iconProps }),
+  moreHorizontal: /* @__PURE__ */ jsx(MoreHorizontal, { ...iconProps }),
+  search: /* @__PURE__ */ jsx(Search, { ...iconProps }),
+  arrowUp: /* @__PURE__ */ jsx(ArrowUp, { ...iconProps }),
+  arrowDown: /* @__PURE__ */ jsx(ArrowDown, { ...iconProps }),
+  arrowsUpDown: /* @__PURE__ */ jsx(ArrowUpDown, { ...iconProps }),
+  funnel: /* @__PURE__ */ jsx(Filter, { ...iconProps }),
+  eyeSlash: /* @__PURE__ */ jsx(EyeOff, { ...iconProps }),
+  viewColumns: /* @__PURE__ */ jsx(Columns, { ...iconProps }),
+  copy: /* @__PURE__ */ jsx(Copy, { ...iconProps }),
+  checkDouble: /* @__PURE__ */ jsx(CheckCheck, { ...iconProps }),
+  wrench: /* @__PURE__ */ jsx(Wrench, { ...iconProps }),
+  stop: /* @__PURE__ */ jsx(Square, { ...iconProps }),
+  microphone: /* @__PURE__ */ jsx(Mic, { ...iconProps })
+};
+
+export {
+  gothicIconRegistry
+};

package/dist/gothic.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/gothicTheme.ts
+ * Command: astryx theme build src/gothicTheme.ts --out dist/theme.css
+ * Generated: 2026-06-24T18:16:16.708Z
+ */
+
+import type { DefinedTheme } from '@astryxdesign/core/theme';
+import type { IconRegistry } from '@astryxdesign/core/Icon';
+export declare const gothicIconRegistry: IconRegistry;
+export declare const gothicTheme: DefinedTheme;

package/dist/gothic.js

@@ -0,0 +1,195 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/gothicTheme.ts
+ * Command: astryx theme build src/gothicTheme.ts --out dist/theme.css
+ * Generated: 2026-06-24T18:16:16.707Z
+ */
+
+import { gothicIconRegistry } from './icons';
+/**
+ * gothic theme — built by `pnpm exec astryx theme build`
+ * Import the CSS file alongside this module:
+ *
+ *   import { gothicTheme } from './gothic';
+ *   import './gothic.css';
+ */
+export const gothicTheme = {
+  name: 'gothic',
+  __built: true,
+  tokens: {
+    "--font-size-4xs": "0.3125rem",
+    "--font-size-3xs": "0.4375rem",
+    "--font-size-2xs": "0.5rem",
+    "--font-size-xs": "0.625rem",
+    "--font-size-sm": "0.8125rem",
+    "--font-size-base": "1rem",
+    "--font-size-lg": "1.25rem",
+    "--font-size-xl": "1.5625rem",
+    "--font-size-2xl": "1.9375rem",
+    "--font-size-3xl": "2.4375rem",
+    "--font-size-4xl": "3.0625rem",
+    "--font-size-5xl": "3.8125rem",
+    "--text-heading-1-size": "var(--font-size-2xl)",
+    "--text-heading-1-weight": "var(--font-weight-semibold)",
+    "--text-heading-1-leading": "1.4194",
+    "--text-heading-2-size": "var(--font-size-xl)",
+    "--text-heading-2-weight": "var(--font-weight-semibold)",
+    "--text-heading-2-leading": "1.44",
+    "--text-heading-3-size": "var(--font-size-lg)",
+    "--text-heading-3-weight": "var(--font-weight-bold)",
+    "--text-heading-3-leading": "1.4",
+    "--text-heading-4-size": "var(--font-size-base)",
+    "--text-heading-4-weight": "var(--font-weight-bold)",
+    "--text-heading-4-leading": "1.5",
+    "--text-heading-5-size": "var(--font-size-sm)",
+    "--text-heading-5-weight": "var(--font-weight-semibold)",
+    "--text-heading-5-leading": "1.5385",
+    "--text-heading-6-size": "var(--font-size-xs)",
+    "--text-heading-6-weight": "var(--font-weight-semibold)",
+    "--text-heading-6-leading": "1.6",
+    "--text-body-size": "var(--font-size-base)",
+    "--text-body-weight": "var(--font-weight-normal)",
+    "--text-body-leading": "1.5",
+    "--text-large-size": "var(--font-size-lg)",
+    "--text-large-weight": "var(--font-weight-semibold)",
+    "--text-large-leading": "1.4",
+    "--text-label-size": "var(--font-size-base)",
+    "--text-label-weight": "var(--font-weight-medium)",
+    "--text-label-leading": "1.5",
+    "--text-code-size": "var(--font-size-base)",
+    "--text-code-weight": "var(--font-weight-normal)",
+    "--text-code-leading": "1.5",
+    "--text-supporting-size": "var(--font-size-sm)",
+    "--text-supporting-weight": "var(--font-weight-normal)",
+    "--text-supporting-leading": "1.5385",
+    "--text-display-1-size": "var(--font-size-5xl)",
+    "--text-display-1-weight": "var(--font-weight-normal)",
+    "--text-display-1-leading": "1.2459",
+    "--text-display-2-size": "var(--font-size-4xl)",
+    "--text-display-2-weight": "var(--font-weight-normal)",
+    "--text-display-2-leading": "1.2245",
+    "--text-display-3-size": "var(--font-size-3xl)",
+    "--text-display-3-weight": "var(--font-weight-normal)",
+    "--text-display-3-leading": "1.2308",
+    "--duration-fast-min": "115ms",
+    "--duration-fast": "150ms",
+    "--duration-fast-max": "200ms",
+    "--duration-medium-min": "265ms",
+    "--duration-medium": "350ms",
+    "--duration-medium-max": "465ms",
+    "--duration-slow-min": "600ms",
+    "--duration-slow": "800ms",
+    "--duration-slow-max": "1065ms",
+    "--font-family-body": "Fustat, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+    "--font-family-heading": "Fustat, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif",
+    "--font-family-code": "\"JetBrains Mono\", \"SF Mono\", Monaco, Consolas, monospace",
+    "--color-syntax-keyword": "#c39adb",
+    "--color-syntax-string": "#a3c987",
+    "--color-syntax-comment": "#6b7079",
+    "--color-syntax-number": "#dec074",
+    "--color-syntax-function": "#8aa1d8",
+    "--color-syntax-type": "#c39adb",
+    "--color-syntax-variable": "#E8F1F6",
+    "--color-syntax-operator": "#96A0AB",
+    "--color-syntax-constant": "#e6b85e",
+    "--color-syntax-tag": "#d97580",
+    "--color-syntax-attribute": "#dec074",
+    "--color-syntax-property": "#7cc5b3",
+    "--color-syntax-punctuation": "#7a8290",
+    "--color-syntax-background": "#101314",
+    "--color-accent": "#E8F1F6",
+    "--color-accent-muted": "#E8F1F620",
+    "--color-neutral": "#E8F1F61A",
+    "--color-background-surface": "#101314",
+    "--color-background-body": "#101314",
+    "--color-overlay": "#101314CC",
+    "--color-overlay-hover": "#E8F1F60D",
+    "--color-overlay-pressed": "#E8F1F61A",
+    "--color-background-muted": "#24292D",
+    "--color-text-primary": "#E8F1F6",
+    "--color-text-secondary": "#96A0AB",
+    "--color-text-disabled": "#495056",
+    "--color-text-accent": "#E8F1F6",
+    "--color-on-dark": "#E8F1F6",
+    "--color-on-light": "#101314",
+    "--color-on-accent": "#101314",
+    "--color-on-success": "#101314",
+    "--color-on-error": "#101314",
+    "--color-on-warning": "#101314",
+    "--color-icon-accent": "#E8F1F6",
+    "--color-icon-primary": "#E8F1F6",
+    "--color-icon-secondary": "#96A0AB",
+    "--color-icon-disabled": "#495056",
+    "--color-background-card": "#1a1d20",
+    "--color-background-popover": "#24292D",
+    "--color-background-inverted": "#E8F1F6",
+    "--color-success": "#b3c79a",
+    "--color-success-muted": "#b3c79a",
+    "--color-error": "#c6a6a2",
+    "--color-error-muted": "#c6a6a2",
+    "--color-warning": "#d3c490",
+    "--color-warning-muted": "#d3c490",
+    "--color-border": "#E8F1F61A",
+    "--color-border-emphasized": "#495056",
+    "--color-skeleton": "#495056",
+    "--color-shadow": "#0000004D",
+    "--color-tint-hover": "white",
+    "--color-background-blue": "#a3b5d6",
+    "--color-border-blue": "#8696b8",
+    "--color-icon-blue": "#2a3b6e",
+    "--color-text-blue": "#1f2c54",
+    "--color-background-cyan": "#a3c2cf",
+    "--color-border-cyan": "#86a4b1",
+    "--color-icon-cyan": "#2a5e75",
+    "--color-text-cyan": "#204858",
+    "--color-background-gray": "#3d4248",
+    "--color-border-gray": "#5d646b",
+    "--color-icon-gray": "#E8F1F6",
+    "--color-text-gray": "#E8F1F6",
+    "--color-background-green": "#b3c79a",
+    "--color-border-green": "#96a880",
+    "--color-icon-green": "#3a5e2c",
+    "--color-text-green": "#244023",
+    "--color-background-orange": "#d3b89a",
+    "--color-border-orange": "#b6987d",
+    "--color-icon-orange": "#8a4818",
+    "--color-text-orange": "#6e3812",
+    "--color-background-pink": "#c89aab",
+    "--color-border-pink": "#aa7d8e",
+    "--color-icon-pink": "#8d2d4c",
+    "--color-text-pink": "#71223c",
+    "--color-background-purple": "#b29bc4",
+    "--color-border-purple": "#947da6",
+    "--color-icon-purple": "#5a2370",
+    "--color-text-purple": "#481b58",
+    "--color-background-red": "#c6a6a2",
+    "--color-border-red": "#a48581",
+    "--color-icon-red": "#5e3a35",
+    "--color-text-red": "#4a2520",
+    "--color-background-teal": "#a3c2b6",
+    "--color-border-teal": "#86a499",
+    "--color-icon-teal": "#1f5e52",
+    "--color-text-teal": "#174a40",
+    "--color-background-yellow": "#d3c490",
+    "--color-border-yellow": "#b6a775",
+    "--color-icon-yellow": "#876515",
+    "--color-text-yellow": "#6c5010",
+    "--radius-none": "0.125rem",
+    "--radius-inner": "0.25rem",
+    "--radius-element": "0.5rem",
+    "--radius-container": "0.75rem",
+    "--radius-page": "1.5rem",
+    "--radius-full": "9999px",
+    "--shadow-low": "0 2px 4px #00000033, 0 4px 8px #00000040",
+    "--shadow-med": "0 2px 4px #00000033, 0 4px 12px #00000040",
+    "--shadow-high": "0 4px 6px #00000040, 0 12px 24px #0000004D",
+    "--shadow-inset-hover": "inset 0px 0px 0px 1px #96A0AB30",
+    "--shadow-inset-selected": "inset 0px 0px 0px 2px #96A0AB50",
+    "--shadow-inset-success": "inset 0px 0px 0px 1px #87b06a50",
+    "--shadow-inset-warning": "inset 0px 0px 0px 1px #d6b56a50",
+    "--shadow-inset-error": "inset 0px 0px 0px 1px #d4485150"
+  },
+  icons: gothicIconRegistry,
+};
+
+export { gothicIconRegistry };

package/dist/gothic.variants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @generated by `astryx theme build` — do not edit manually.
+ * Source: src/gothicTheme.ts
+ * Command: astryx theme build src/gothicTheme.ts --out dist/theme.css
+ * Generated: 2026-06-24T18:16:16.714Z
+ */
+
+// Generated by astryx theme build
+export {};
+
+declare module '@astryxdesign/core/Heading' {
+  interface XDSHeadingLevelMap {
+    '1': true;
+    '2': true;
+    '3': true;
+    '4': true;
+    '5': true;
+    '6': true;
+  }
+}
+
+declare module '@astryxdesign/core/Card' {
+  interface XDSCardVariantMap {
+    'blue': true;
+    'cyan': true;
+    'gray': true;
+    'green': true;
+    'orange': true;
+    'pink': true;
+    'purple': true;
+    'red': true;
+    'teal': true;
+    'yellow': true;
+  }
+}