@astryxdesign/cli 0.1.1 → 0.1.2-canary.2149fa3

package/templates/themes/gothic/icons.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file icons.tsx
+ * @input Uses lucide-react icon components, IconRegistry type
+ * @output Exports gothicIconRegistry for the neutral theme
+ * @position Icon configuration for the neutral theme; consumed by index.ts
+ *
+ * Maps semantic icon names to Lucide icon components.
+ * These icons are bundled with the theme, not with @astryxdesign/core.
+ */
+
+import React from 'react';
+import type {IconRegistry} from '@astryxdesign/core/Icon';
+
+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';
+
+const iconProps = {
+  size: '1em',
+  'aria-hidden': true as const,
+};
+
+export const gothicIconRegistry: IconRegistry = {
+  close: <X {...iconProps} />,
+  chevronDown: <ChevronDown {...iconProps} />,
+  chevronLeft: <ChevronLeft {...iconProps} />,
+  chevronRight: <ChevronRight {...iconProps} />,
+  check: <Check {...iconProps} />,
+  success: <CheckCircle {...iconProps} />,
+  error: <XCircle {...iconProps} />,
+  warning: <AlertTriangle {...iconProps} />,
+  info: <Info {...iconProps} />,
+  calendar: <Calendar {...iconProps} />,
+  clock: <Clock {...iconProps} />,
+  externalLink: <ExternalLink {...iconProps} />,
+  menu: <Menu {...iconProps} />,
+  moreHorizontal: <MoreHorizontal {...iconProps} />,
+  search: <Search {...iconProps} />,
+  arrowUp: <ArrowUp {...iconProps} />,
+  arrowDown: <ArrowDown {...iconProps} />,
+  arrowsUpDown: <ArrowUpDown {...iconProps} />,
+  funnel: <Filter {...iconProps} />,
+  eyeSlash: <EyeOff {...iconProps} />,
+  viewColumns: <Columns {...iconProps} />,
+  copy: <Copy {...iconProps} />,
+  checkDouble: <CheckCheck {...iconProps} />,
+  wrench: <Wrench {...iconProps} />,
+  stop: <Square {...iconProps} />,
+  microphone: <Mic {...iconProps} />,
+};

package/templates/themes/manifest.json

@@ -0,0 +1,90 @@
+{
+  "version": 1,
+  "generatedBy": "scripts/generate-cli-themes.mjs",
+  "themes": [
+    {
+      "slug": "butter",
+      "displayName": "Butter",
+      "description": "Warm, creamy yellows with a friendly blue accent. Playful enough for consumer surfaces, soft enough to stay readable.",
+      "maintained": false,
+      "entry": "butterTheme.ts",
+      "exportName": "butterTheme",
+      "files": [
+        "butterTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "chocolate",
+      "displayName": "Chocolate",
+      "description": "Warm chocolate theme for Astryx — rich brown palette with Fraunces headings, Albert Sans body, and Lucide icons",
+      "maintained": false,
+      "entry": "chocolateTheme.ts",
+      "exportName": "chocolateTheme",
+      "files": [
+        "chocolateTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "gothic",
+      "displayName": "Gothic",
+      "description": "Deep blue-grays and a signature display serif. Dramatic and editorial, for surfaces that want to be remembered.",
+      "maintained": false,
+      "entry": "gothicTheme.ts",
+      "exportName": "gothicTheme",
+      "files": [
+        "gothicTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "matcha",
+      "displayName": "Matcha",
+      "description": "Earthy greens with a calm, organic feel. Naturalistic and grounded, great for wellness or content-first apps.",
+      "maintained": false,
+      "entry": "matchaTheme.ts",
+      "exportName": "matchaTheme",
+      "files": [
+        "matchaTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "neutral",
+      "displayName": "Neutral",
+      "description": "Restrained warm grays. Minimal and quiet, so the content stays the focus.",
+      "maintained": true,
+      "entry": "neutralTheme.ts",
+      "exportName": "neutralTheme",
+      "files": [
+        "neutralTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "stone",
+      "displayName": "Stone",
+      "description": "Warm stone and slate, earthy and understated, with just enough character to feel handcrafted.",
+      "maintained": false,
+      "entry": "stoneTheme.ts",
+      "exportName": "stoneTheme",
+      "files": [
+        "stoneTheme.ts",
+        "icons.tsx"
+      ]
+    },
+    {
+      "slug": "y2k",
+      "displayName": "Y2K",
+      "description": "Hot pinks, lime greens, and Poppins. Bubbly, playful, and unmistakably retro.",
+      "maintained": false,
+      "entry": "y2kTheme.ts",
+      "exportName": "y2kTheme",
+      "files": [
+        "y2kTheme.ts",
+        "icons.tsx"
+      ]
+    }
+  ]
+}

package/templates/themes/matcha/icons.tsx

@@ -0,0 +1,67 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+import React from 'react';
+import type {IconRegistry} from '@astryxdesign/core/Icon';
+
+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';
+
+const iconProps = {
+  size: '1em',
+  'aria-hidden': true as const,
+};
+
+export const matchaIconRegistry: IconRegistry = {
+  close: <X {...iconProps} />,
+  chevronDown: <ChevronDown {...iconProps} />,
+  chevronLeft: <ChevronLeft {...iconProps} />,
+  chevronRight: <ChevronRight {...iconProps} />,
+  check: <Check {...iconProps} />,
+  success: <CheckCircle {...iconProps} />,
+  error: <XCircle {...iconProps} />,
+  warning: <AlertTriangle {...iconProps} />,
+  info: <Info {...iconProps} />,
+  calendar: <Calendar {...iconProps} />,
+  clock: <Clock {...iconProps} />,
+  externalLink: <ExternalLink {...iconProps} />,
+  menu: <Menu {...iconProps} />,
+  moreHorizontal: <MoreHorizontal {...iconProps} />,
+  search: <Search {...iconProps} />,
+  arrowUp: <ArrowUp {...iconProps} />,
+  arrowDown: <ArrowDown {...iconProps} />,
+  arrowsUpDown: <ArrowUpDown {...iconProps} />,
+  funnel: <Filter {...iconProps} />,
+  eyeSlash: <EyeOff {...iconProps} />,
+  viewColumns: <Columns {...iconProps} />,
+  copy: <Copy {...iconProps} />,
+  checkDouble: <CheckCheck {...iconProps} />,
+  wrench: <Wrench {...iconProps} />,
+  stop: <Square {...iconProps} />,
+  microphone: <Mic {...iconProps} />,
+};

package/templates/themes/matcha/matchaTheme.ts

@@ -0,0 +1,247 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * Matcha Theme
+ *
+ * An earthy green theme inspired by matcha tea and natural botanicals.
+ * Core palette: #3E481D, #707E46, #C0CBA9, #F0F0E0, #FFFFFF
+ * Uses Playwrite US Trad for headings and DM Sans for body text.
+ */
+
+import {defineTheme, defineSyntaxTheme} from '@astryxdesign/core/theme';
+import {matchaIconRegistry} from './icons';
+
+/** Matcha syntax palette — earthy greens and warm tones. */
+const matchaSyntax = defineSyntaxTheme({
+  name: 'xds-matcha',
+  tokens: {
+    keyword: ['#5a6b2a', '#a8bf6a'],
+    string: ['#2e6b4a', '#7bc49e'],
+    comment: ['#707E46', '#707E46'],
+    number: ['#8c6b30', '#d4b870'],
+    function: ['#3a5e8c', '#7ba8d4'],
+    type: ['#6b4a8c', '#b08ed4'],
+    variable: ['#3E481D', '#C0CBA9'],
+    operator: ['#707E46', '#94a468'],
+    constant: ['#8c6b30', '#d4b870'],
+    tag: ['#8c3a3a', '#d47a7a'],
+    attribute: ['#7c5e3a', '#c4a882'],
+    property: ['#3a7c6b', '#70c4b0'],
+    punctuation: ['#707E46', '#5a6440'],
+    background: ['#F0F0E0', '#1a1c14'],
+  },
+});
+
+export const matchaTheme = defineTheme({
+  name: 'matcha',
+
+  typography: {
+    // base 16 / ratio 1.25 — aligned with the other themes' geometric scale.
+    scale: {base: 16, ratio: 1.25},
+    body: {
+      family: 'DM Sans',
+      fallbacks:
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+    },
+    heading: {
+      family: 'Playwrite US Trad',
+      fallbacks: 'Georgia, "Times New Roman", Times, serif',
+    },
+    code: {
+      family: 'JetBrains Mono',
+      fallbacks: '"SF Mono", Monaco, Consolas, monospace',
+    },
+  },
+
+  motion: {fast: 125, medium: 300, slow: 700, ratio: 0.75},
+
+  syntax: matchaSyntax,
+
+  tokens: {
+    // =========================================================================
+    // Colors — earthy matcha palette
+    // Core: #3E481D, #707E46, #C0CBA9, #F0F0E0, #FFFFFF
+    // =========================================================================
+
+    // Core semantic
+    '--color-accent': ['#3E481D', '#C0CBA9'],
+    '--color-accent-muted': ['#3E481D14', '#C0CBA920'],
+    '--color-neutral': ['#3E481D0F', '#C0CBA91A'],
+    '--color-background-surface': ['#FFFFFF', '#1a1c14'],
+    '--color-background-body': ['#F0F0E0', '#12140e'],
+    '--color-overlay': ['#3E481D80', '#3E481DCC'],
+    '--color-overlay-hover': ['#3E481D0D', '#C0CBA90D'],
+    '--color-overlay-pressed': ['#3E481D1A', '#C0CBA91A'],
+    '--color-background-muted': ['#F0F0E0', '#3E481D'],
+
+    // Text
+    '--color-text-primary': ['#3E481D', '#C0CBA9'],
+    '--color-text-secondary': ['#707E46', '#94a468'],
+    '--color-text-disabled': ['#C0CBA9', '#5a6440'],
+    '--color-text-accent': ['#3E481D', '#C0CBA9'],
+    '--color-on-dark': '#FFFFFF',
+    '--color-on-light': '#3E481D',
+    '--color-on-accent': ['#FFFFFF', '#3E481D'],
+    '--color-on-success': ['#FFFFFF', '#3E481D'],
+    '--color-on-error': ['#FFFFFF', '#3E481D'],
+    '--color-on-warning': ['#3E481D', '#3E481D'],
+
+    // Icon
+    '--color-icon-accent': ['#3E481D', '#C0CBA9'],
+    '--color-icon-primary': ['#3E481D', '#C0CBA9'],
+    '--color-icon-secondary': ['#707E46', '#94a468'],
+    '--color-icon-disabled': ['#C0CBA9', '#5a6440'],
+
+    // Surface variants
+    '--color-background-card': ['#FFFFFF', '#1e2016'],
+    '--color-background-popover': ['#FFFFFF', '#3E481D'],
+    '--color-background-inverted': ['#3E481D', '#C0CBA9'],
+
+    // Status / Sentiment
+    '--color-success': ['#4D9900', '#6dbf2a'],
+    '--color-success-muted': ['#4D990020', '#6dbf2a20'],
+    '--color-error': ['#FD0000', '#ff5c5c'],
+    '--color-error-muted': ['#FD000020', '#ff5c5c20'],
+    '--color-warning': ['#FFB600', '#ffc940'],
+    '--color-warning-muted': ['#FFB60020', '#ffc94020'],
+
+    // Border
+    // Softer sage borders (default + emphasized/card) in light mode.
+    '--color-border': ['#DCE3CE', '#C0CBA91A'],
+    '--color-border-emphasized': ['#B7C29E', '#5a6440'],
+
+    // Effects
+    '--color-skeleton': ['#C0CBA9', '#5a6440'],
+    '--color-shadow': ['#3E481D1A', '#0000004D'],
+    '--color-tint-hover': ['black', 'white'],
+
+    // Categorical — Blue
+    '--color-background-blue': ['#3a5e8c33', '#3a5e8c33'],
+    '--color-border-blue': ['#3a5e8c', '#7ba8d4'],
+    '--color-icon-blue': ['#3a5e8c', '#7ba8d4'],
+    '--color-text-blue': ['#2e4a6e', '#8dbce0'],
+
+    // Categorical — Cyan
+    '--color-background-cyan': ['#3a7c7c33', '#3a7c7c33'],
+    '--color-border-cyan': ['#3a7c7c', '#70c4c4'],
+    '--color-icon-cyan': ['#3a7c7c', '#70c4c4'],
+    '--color-text-cyan': ['#2e6060', '#82d4d4'],
+
+    // Categorical — Gray
+    '--color-background-gray': ['#707E4633', '#5a644033'],
+    '--color-border-gray': ['#707E46', '#707E46'],
+    '--color-icon-gray': ['#707E46', '#94a468'],
+    '--color-text-gray': ['#3E481D', '#C0CBA9'],
+
+    // Categorical — Green
+    '--color-background-green': ['#4D990033', '#6dbf2a33'],
+    '--color-border-green': ['#4D9900', '#6dbf2a'],
+    '--color-icon-green': ['#4D9900', '#6dbf2a'],
+    '--color-text-green': ['#3d7a00', '#80d43a'],
+
+    // Categorical — Orange
+    '--color-background-orange': ['#c4762033', '#d4903a33'],
+    '--color-border-orange': ['#c47620', '#d4903a'],
+    '--color-icon-orange': ['#c47620', '#d4903a'],
+    '--color-text-orange': ['#a06018', '#e0a04a'],
+
+    // Categorical — Pink
+    '--color-background-pink': ['#c44a7033', '#e07a9a33'],
+    '--color-border-pink': ['#c44a70', '#e07a9a'],
+    '--color-icon-pink': ['#c44a70', '#e07a9a'],
+    '--color-text-pink': ['#a03a5a', '#f08aaa'],
+
+    // Categorical — Purple
+    '--color-background-purple': ['#6b4a8c33', '#b08ed433'],
+    '--color-border-purple': ['#6b4a8c', '#b08ed4'],
+    '--color-icon-purple': ['#6b4a8c', '#b08ed4'],
+    '--color-text-purple': ['#553a70', '#c0a0e0'],
+
+    // Categorical — Red
+    '--color-background-red': ['#FD000033', '#ff5c5c33'],
+    '--color-border-red': ['#FD0000', '#ff5c5c'],
+    '--color-icon-red': ['#FD0000', '#ff5c5c'],
+    '--color-text-red': ['#cc0000', '#ff7a7a'],
+
+    // Categorical — Teal
+    '--color-background-teal': ['#2e6b5a33', '#5ab89833'],
+    '--color-border-teal': ['#2e6b5a', '#5ab898'],
+    '--color-icon-teal': ['#2e6b5a', '#5ab898'],
+    '--color-text-teal': ['#245546', '#6ccaaa'],
+
+    // Categorical — Yellow
+    '--color-background-yellow': ['#FFB60033', '#ffc94033'],
+    '--color-border-yellow': ['#FFB600', '#ffc940'],
+    '--color-icon-yellow': ['#FFB600', '#ffc940'],
+    '--color-text-yellow': ['#cc9200', '#ffd960'],
+
+    // =========================================================================
+    // Spacing
+    // =========================================================================
+    '--spacing-0-5': '3px',
+    '--spacing-1': '6px',
+    '--spacing-1-5': '9px',
+    '--spacing-2': '12px',
+    '--spacing-3': '18px',
+    '--spacing-4': '24px',
+    '--spacing-5': '30px',
+    '--spacing-6': '36px',
+    '--spacing-7': '42px',
+    '--spacing-8': '48px',
+    '--spacing-9': '54px',
+    '--spacing-10': '60px',
+    '--spacing-11': '66px',
+    '--spacing-12': '72px',
+
+    // =========================================================================
+    // Radius — soft and rounded
+    // =========================================================================
+    '--radius-inner': '6px',
+    '--radius-element': '12px',
+    '--radius-container': '18px',
+    '--radius-page': '42px',
+
+    // No explicit --font-size-* overrides — font sizes come from
+    // typography.scale above, keeping the scale the single source of truth.
+
+    // =========================================================================
+    // Element sizes
+    // =========================================================================
+    '--size-element-sm': '36px',
+    '--size-element-md': '40px',
+    '--size-element-lg': '44px',
+
+    // =========================================================================
+    // Shadows
+    // =========================================================================
+    '--shadow-low': '0 2px 4px #3E481D0D, 0 4px 8px #3E481D1A',
+    '--shadow-med': '0 2px 4px #3E481D0D, 0 4px 12px #3E481D1A',
+    '--shadow-high': '0 4px 6px #3E481D1A, 0 12px 24px #3E481D26',
+    '--shadow-inset-hover': 'inset 0px 0px 0px 2px #3E481D30',
+    '--shadow-inset-selected': 'inset 0px 0px 0px 2px #3E481D50',
+    '--shadow-inset-success': 'inset 0px 0px 0px 2px #4D990050',
+    '--shadow-inset-warning': 'inset 0px 0px 0px 2px #FFB60050',
+    '--shadow-inset-error': 'inset 0px 0px 0px 2px #FD000050',
+  },
+
+  components: {
+    button: {
+      base: {
+        borderRadius: 'var(--radius-full)',
+      },
+    },
+    card: {
+      base: {
+        borderRadius: 'var(--radius-page)',
+        padding: 'var(--spacing-3)',
+      },
+    },
+    section: {
+      base: {
+        padding: 'var(--spacing-3)',
+      },
+    },
+  },
+
+  icons: matchaIconRegistry,
+});

package/templates/themes/neutral/icons.tsx

@@ -0,0 +1,77 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file icons.tsx
+ * @input Uses lucide-react icon components, IconRegistry type
+ * @output Exports neutralIconRegistry for the neutral theme
+ * @position Icon configuration for the neutral theme; consumed by index.ts
+ *
+ * Maps semantic icon names to Lucide icon components.
+ * These icons are bundled with the theme, not with @astryxdesign/core.
+ */
+
+import React from 'react';
+import type {IconRegistry} from '@astryxdesign/core/Icon';
+
+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';
+
+const iconProps = {
+  size: '1em',
+  'aria-hidden': true as const,
+};
+
+export const neutralIconRegistry: IconRegistry = {
+  close: <X {...iconProps} />,
+  chevronDown: <ChevronDown {...iconProps} />,
+  chevronLeft: <ChevronLeft {...iconProps} />,
+  chevronRight: <ChevronRight {...iconProps} />,
+  check: <Check {...iconProps} />,
+  success: <CheckCircle {...iconProps} />,
+  error: <XCircle {...iconProps} />,
+  warning: <AlertTriangle {...iconProps} />,
+  info: <Info {...iconProps} />,
+  calendar: <Calendar {...iconProps} />,
+  clock: <Clock {...iconProps} />,
+  externalLink: <ExternalLink {...iconProps} />,
+  menu: <Menu {...iconProps} />,
+  moreHorizontal: <MoreHorizontal {...iconProps} />,
+  search: <Search {...iconProps} />,
+  arrowUp: <ArrowUp {...iconProps} />,
+  arrowDown: <ArrowDown {...iconProps} />,
+  arrowsUpDown: <ArrowUpDown {...iconProps} />,
+  funnel: <Filter {...iconProps} />,
+  eyeSlash: <EyeOff {...iconProps} />,
+  viewColumns: <Columns {...iconProps} />,
+  copy: <Copy {...iconProps} />,
+  checkDouble: <CheckCheck {...iconProps} />,
+  wrench: <Wrench {...iconProps} />,
+  stop: <Square {...iconProps} />,
+  microphone: <Mic {...iconProps} />,
+};