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

package/src/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/src/source.ts

@@ -0,0 +1,4 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+export {matchaTheme} from './matchaTheme';
+export {matchaIconRegistry} from './icons';