@nukleas/cyberdesign 0.1.0

package/src/tokens/semantic.ts

@@ -0,0 +1,63 @@
+import { palette } from './base.js';
+
+export const semanticTokens: Record<string, string> = {
+  // Backgrounds
+  'bg':             palette.bgBase,
+  'bg-panel':       palette.bgPanel,
+  'bg-panel-hover': palette.bgPanelHover,
+  'bg-surface':     palette.surfaceGlass,
+
+  // Borders
+  'border':     palette.borderMid,
+  'border-dim': palette.borderDim,
+
+  // Text
+  'text':           palette.textPrimary,
+  'text-alt':       palette.textPrimaryAlt,
+  'text-secondary': palette.textSecondary,
+  'text-muted':     palette.textMuted,
+  'text-muted-alt': palette.textMutedAlt,
+  'text-dim':       palette.textDim,
+
+  // Secondary accent — magenta, consistent across all themes
+  'accent-secondary':        palette.magenta,
+  'accent-secondary-glow':   'rgba(255, 43, 214, 0.32)',
+  'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+
+  // Supporting neon palette (for explicit color-coded categories)
+  'neon-green':    palette.greenBright,
+  'neon-red':      palette.redAlt,
+  'neon-blue':     palette.blueAlt,
+  'neon-purple':   palette.purple,
+  'neon-yellow':   palette.yellow,
+  'neon-amber':    palette.amber,
+  'neon-orange':   palette.orange,
+  'neon-cyan':     palette.cyan,
+  'neon-magenta':  palette.magenta,
+
+  // Raw palette exposed for explicit use (category color maps, etc.)
+  'orange':  palette.orange,
+  'amber':   palette.amber,
+  'gold':    palette.gold,
+  'cyan':    palette.cyan,
+  'magenta': palette.magenta,
+  'purple':  palette.purple,
+  'green':   palette.greenBright,
+  'red':     palette.redAlt,
+  'blue':    palette.blueAlt,
+  'yellow':  palette.yellow,
+
+  // CRT / effects
+  'scanline-color':   'rgba(0, 0, 0, 0.18)',
+  'pixel-grid-color': 'rgba(71, 246, 255, 0.055)',
+
+  // Font
+  'font-mono': '"JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace',
+
+  // Typography scale (rem-based for accessibility + user font scaling)
+  'text-xs':  '0.6875rem',  // ~11px — dense labels, badges, kbd
+  'text-sm':  '0.75rem',    // ~12px — current "body"/inputs (transition)
+  'text-base':'0.8125rem',  // ~13px — improved readable body, modals
+  'text-md':  '0.875rem',   // ~14px — larger headings/titles
+  'text-lg':  '0.9375rem',  // ~15px — prominent display
+};

package/src/tokens/themes/cyan.ts

@@ -0,0 +1,16 @@
+import { palette } from '../base.js';
+
+export const cyanTheme: Record<string, string> = {
+  'accent':              palette.cyan,
+  'accent-bright':       palette.cyanBright,
+  'accent-subtle':       'rgba(71, 246, 255, 0.12)',
+  'accent-glow':         'rgba(71, 246, 255, 0.34)',
+  'accent-subtle-glow':  'rgba(71, 246, 255, 0.20)',
+  'border-glow':         'rgba(71, 246, 255, 0.20)',
+  'scrollbar-thumb':     'rgba(71, 246, 255, 0.20)',
+  'panel-shadow':        'inset 0 0 0 1px rgba(71, 246, 255, 0.04), 0 0 24px rgba(71, 246, 255, 0.07)',
+  // complement: magenta — CMY pairing
+  'accent-secondary':        '#ff2bd6',
+  'accent-secondary-glow':   'rgba(255, 43, 214, 0.32)',
+  'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+};

package/src/tokens/themes/green.ts

@@ -0,0 +1,16 @@
+import { palette } from '../base.js';
+
+export const greenTheme: Record<string, string> = {
+  'accent':              palette.green,
+  'accent-bright':       palette.greenBright,
+  'accent-subtle':       'rgba(0, 255, 0, 0.12)',
+  'accent-glow':         'rgba(0, 255, 0, 0.34)',
+  'accent-subtle-glow':  'rgba(0, 255, 0, 0.20)',
+  'border-glow':         'rgba(0, 255, 0, 0.20)',
+  'scrollbar-thumb':     'rgba(0, 255, 0, 0.20)',
+  'panel-shadow':        'inset 0 0 0 1px rgba(0, 255, 0, 0.04), 0 0 24px rgba(0, 255, 0, 0.07)',
+  // complement: purple — avoids green+magenta clash
+  'accent-secondary':        '#9d7cff',
+  'accent-secondary-glow':   'rgba(157, 124, 255, 0.32)',
+  'accent-secondary-subtle': 'rgba(157, 124, 255, 0.12)',
+};

package/src/tokens/themes/orange.ts

@@ -0,0 +1,16 @@
+import { palette } from '../base.js';
+
+export const orangeTheme: Record<string, string> = {
+  'accent':              palette.orange,
+  'accent-bright':       palette.amber,
+  'accent-subtle':       'rgba(255, 136, 0, 0.12)',
+  'accent-glow':         'rgba(255, 136, 0, 0.40)',
+  'accent-subtle-glow':  'rgba(255, 136, 0, 0.20)',
+  'border-glow':         'rgba(255, 136, 0, 0.20)',
+  'scrollbar-thumb':     'rgba(255, 136, 0, 0.20)',
+  'panel-shadow':        'inset 0 0 0 1px rgba(255, 136, 0, 0.04), 0 0 24px rgba(255, 136, 0, 0.07)',
+  // complement: magenta (default — no override needed but explicit for clarity)
+  'accent-secondary':        '#ff2bd6',
+  'accent-secondary-glow':   'rgba(255, 43, 214, 0.32)',
+  'accent-secondary-subtle': 'rgba(255, 43, 214, 0.12)',
+};

package/src/tokens/themes/red.ts

@@ -0,0 +1,16 @@
+import { palette } from '../base.js';
+
+export const redTheme: Record<string, string> = {
+  'accent':              palette.red,
+  'accent-bright':       palette.redBright,
+  'accent-subtle':       'rgba(255, 68, 68, 0.12)',
+  'accent-glow':         'rgba(255, 68, 68, 0.34)',
+  'accent-subtle-glow':  'rgba(255, 68, 68, 0.20)',
+  'border-glow':         'rgba(255, 68, 68, 0.20)',
+  'scrollbar-thumb':     'rgba(255, 68, 68, 0.20)',
+  'panel-shadow':        'inset 0 0 0 1px rgba(255, 68, 68, 0.04), 0 0 24px rgba(255, 68, 68, 0.07)',
+  // complement: blue — cool contrast against hot red
+  'accent-secondary':        '#6aa8ff',
+  'accent-secondary-glow':   'rgba(106, 168, 255, 0.32)',
+  'accent-secondary-subtle': 'rgba(106, 168, 255, 0.12)',
+};

package/src/tokens/themes/steel.ts

@@ -0,0 +1,16 @@
+import { palette } from '../base.js';
+
+export const steelTheme: Record<string, string> = {
+  'accent':              palette.steel,
+  'accent-bright':       palette.steelBright,
+  'accent-subtle':       'rgba(154, 175, 196, 0.12)',
+  'accent-glow':         'rgba(154, 175, 196, 0.28)',
+  'accent-subtle-glow':  'rgba(154, 175, 196, 0.16)',
+  'border-glow':         'rgba(154, 175, 196, 0.18)',
+  'scrollbar-thumb':     'rgba(154, 175, 196, 0.20)',
+  'panel-shadow':        'inset 0 0 0 1px rgba(154, 175, 196, 0.06), 0 0 24px rgba(154, 175, 196, 0.06)',
+  // complement: amber — warm tension against cool steel
+  'accent-secondary':        '#ffaa00',
+  'accent-secondary-glow':   'rgba(255, 170, 0, 0.28)',
+  'accent-secondary-subtle': 'rgba(255, 170, 0, 0.12)',
+};