@principal-ade/industry-theme 0.1.2

package/src/defaultThemes.ts

@@ -0,0 +1,369 @@
+/**
+ * Collection of default themes for PrincipleMD
+ */
+
+import { Theme } from './index';
+
+// Default theme for rendered markdown
+export const defaultMarkdownTheme: Theme = {
+  // Spacing scale
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+
+  // Typography
+  fonts: {
+    body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    heading: '"Crimson Text", "Georgia", "Times New Roman", serif',
+    monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1.0,
+  fontWeights: {
+    body: 400,
+    heading: 600,
+    bold: 700,
+    light: 300,
+    medium: 500,
+    semibold: 600,
+  },
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.25,
+    relaxed: 1.75,
+  },
+
+  // Layout
+  breakpoints: ['640px', '768px', '1024px', '1280px'],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    'none',
+    '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
+    '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+    '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+    '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
+    '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+
+  // Colors - Light, high-contrast theme
+  colors: {
+    text: '#1a1a1a',
+    background: '#ffffff',
+    primary: '#007acc',
+    secondary: '#005a9e',
+    accent: '#1a1a1a',
+    highlight: 'rgba(0, 122, 204, 0.1)',
+    muted: '#f0f0f0',
+    success: '#28a745',
+    warning: '#ffc107',
+    error: '#dc3545',
+    info: '#17a2b8',
+    border: 'rgba(0, 0, 0, 0.1)',
+    backgroundSecondary: '#f8f9fa',
+    backgroundTertiary: '#e9ecef',
+    backgroundLight: 'rgba(0, 0, 0, 0.03)',
+    backgroundHover: 'rgba(0, 0, 0, 0.05)',
+    surface: '#ffffff',
+    textSecondary: '#555555',
+    textTertiary: '#888888',
+    textMuted: '#aaaaaa',
+    highlightBg: 'rgba(255, 235, 59, 0.3)',
+    highlightBorder: 'rgba(255, 235, 59, 0.6)',
+  },
+
+  // Component variants
+  buttons: {
+    primary: {
+      color: 'white',
+      bg: 'primary',
+      '&:hover': { bg: 'secondary' },
+    },
+    secondary: {
+      color: 'primary',
+      bg: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'primary',
+      '&:hover': { bg: 'highlight' },
+    },
+    ghost: {
+      color: 'text',
+      bg: 'transparent',
+      '&:hover': { bg: 'backgroundHover' },
+    },
+  },
+  text: {
+    heading: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading',
+    },
+    body: {
+      fontFamily: 'body',
+      fontWeight: 'body',
+      lineHeight: 'body',
+    },
+    caption: {
+      fontSize: 1,
+      color: 'textSecondary',
+    },
+  },
+  cards: {
+    primary: {
+      bg: 'surface',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 2,
+    },
+    secondary: {
+      bg: 'backgroundSecondary',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 2,
+    },
+  },
+};
+
+// Default theme for terminals
+export const defaultTerminalTheme: Theme = {
+  // Spacing scale
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+
+  // Typography
+  fonts: {
+    body: '"Courier New", Courier, monospace',
+    heading: '"Courier New", Courier, monospace',
+    monospace: '"Courier New", Courier, monospace',
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1.0,
+  fontWeights: {
+    body: 400,
+    heading: 500,
+    bold: 600,
+    light: 300,
+    medium: 500,
+    semibold: 600,
+  },
+  lineHeights: {
+    body: 1.4,
+    heading: 1.2,
+    tight: 1.3,
+    relaxed: 1.6,
+  },
+
+  // Layout
+  breakpoints: ['640px', '768px', '1024px', '1280px'],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    'none',
+    '0 0 5px rgba(255, 193, 7, 0.1)',
+    '0 0 10px rgba(255, 193, 7, 0.15)',
+    '0 0 15px rgba(255, 193, 7, 0.2)',
+    '0 0 20px rgba(255, 193, 7, 0.25)',
+    '0 0 30px rgba(255, 193, 7, 0.3)',
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+
+  // Colors - Amber on black retro terminal
+  colors: {
+    text: '#ffc107',
+    background: '#000000',
+    primary: '#ffc107',
+    secondary: '#ffb300',
+    accent: '#ffffff',
+    highlight: 'rgba(255, 193, 7, 0.1)',
+    muted: '#1a1a1a',
+    success: '#4caf50',
+    warning: '#ff9800',
+    error: '#f44336',
+    info: '#2196f3',
+    border: 'rgba(255, 193, 7, 0.2)',
+    backgroundSecondary: '#0a0a0a',
+    backgroundTertiary: '#111111',
+    backgroundLight: 'rgba(255, 193, 7, 0.03)',
+    backgroundHover: 'rgba(255, 193, 7, 0.05)',
+    surface: '#050505',
+    textSecondary: '#e0e0e0',
+    textTertiary: '#b0b0b0',
+    textMuted: '#808080',
+    highlightBg: 'rgba(255, 193, 7, 0.2)',
+    highlightBorder: 'rgba(255, 193, 7, 0.4)',
+  },
+
+  // Component variants
+  buttons: {
+    primary: {
+      color: 'black',
+      bg: 'primary',
+      borderWidth: 0,
+      '&:hover': { bg: 'secondary' },
+    },
+    secondary: {
+      color: 'primary',
+      bg: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'primary',
+      '&:hover': { bg: 'highlight' },
+    },
+    ghost: {
+      color: 'text',
+      bg: 'transparent',
+      '&:hover': { bg: 'backgroundHover' },
+    },
+  },
+  text: {
+    heading: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading',
+    },
+    body: {
+      fontFamily: 'body',
+      fontWeight: 'body',
+      lineHeight: 'body',
+    },
+    caption: {
+      fontSize: 1,
+      color: 'textSecondary',
+    },
+  },
+  cards: {
+    primary: {
+      bg: 'surface',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 0,
+    },
+    secondary: {
+      bg: 'backgroundSecondary',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 0,
+    },
+  },
+};
+
+// Default theme for file editors
+export const defaultEditorTheme: Theme = {
+  // Spacing scale
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+
+  // Typography
+  fonts: {
+    body: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
+    heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
+  },
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+  fontScale: 1.0,
+  fontWeights: {
+    body: 400,
+    heading: 600,
+    bold: 700,
+    light: 300,
+    medium: 500,
+    semibold: 600,
+  },
+  lineHeights: {
+    body: 1.5,
+    heading: 1.2,
+    tight: 1.3,
+    relaxed: 1.7,
+  },
+
+  // Layout
+  breakpoints: ['640px', '768px', '1024px', '1280px'],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 2, 4, 6, 8, 12, 16, 24],
+  shadows: [
+    'none',
+    '0 1px 2px rgba(0, 0, 0, 0.05)',
+    '0 2px 4px rgba(0, 0, 0, 0.1)',
+    '0 4px 8px rgba(0, 0, 0, 0.15)',
+    '0 8px 16px rgba(0, 0, 0, 0.2)',
+    '0 12px 24px rgba(0, 0, 0, 0.25)',
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+
+  // Colors - Dark theme for code editors
+  colors: {
+    text: '#d4d4d4',
+    background: '#1e1e1e',
+    primary: '#569cd6',
+    secondary: '#408ac9',
+    accent: '#c586c0',
+    highlight: 'rgba(86, 156, 214, 0.1)',
+    muted: '#2a2a2a',
+    success: '#6a9955',
+    warning: '#d18616',
+    error: '#f44747',
+    info: '#569cd6',
+    border: 'rgba(255, 255, 255, 0.1)',
+    backgroundSecondary: '#252526',
+    backgroundTertiary: '#333333',
+    backgroundLight: 'rgba(255, 255, 255, 0.03)',
+    backgroundHover: 'rgba(255, 255, 255, 0.05)',
+    surface: '#252526',
+    textSecondary: '#cccccc',
+    textTertiary: '#999999',
+    textMuted: '#666666',
+    highlightBg: 'rgba(255, 235, 59, 0.2)',
+    highlightBorder: 'rgba(255, 235, 59, 0.4)',
+  },
+
+  // Component variants
+  buttons: {
+    primary: {
+      color: 'white',
+      bg: 'primary',
+      '&:hover': { bg: 'secondary' },
+    },
+    secondary: {
+      color: 'primary',
+      bg: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'primary',
+      '&:hover': { bg: 'highlight' },
+    },
+    ghost: {
+      color: 'text',
+      bg: 'transparent',
+      '&:hover': { bg: 'backgroundHover' },
+    },
+  },
+  text: {
+    heading: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading',
+    },
+    body: {
+      fontFamily: 'body',
+      fontWeight: 'body',
+      lineHeight: 'body',
+    },
+    caption: {
+      fontSize: 1,
+      color: 'textSecondary',
+    },
+  },
+  cards: {
+    primary: {
+      bg: 'surface',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 1,
+    },
+    secondary: {
+      bg: 'backgroundSecondary',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 1,
+    },
+  },
+};

package/src/glassmorphismTheme.ts

@@ -0,0 +1,213 @@
+/**
+ * Glassmorphism theme - Showcasing transparency and blur effects
+ * Designed to work over gradient or image backgrounds
+ */
+
+import { Theme } from './index';
+
+export const glassmorphismTheme: Theme = {
+  // Spacing scale
+  space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
+
+  // Typography - Modern sans-serif
+  fonts: {
+    body: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    heading: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+    monospace: '"Fira Code", "SF Mono", Monaco, Inconsolata, monospace',
+  },
+
+  fontSizes: [12, 14, 16, 18, 20, 24, 32, 48, 64, 96],
+
+  fontScale: 1.0,
+
+  fontWeights: {
+    body: 400,
+    heading: 600,
+    bold: 700,
+    light: 300,
+    medium: 500,
+    semibold: 600,
+  },
+
+  lineHeights: {
+    body: 1.6,
+    heading: 1.3,
+    tight: 1.4,
+    relaxed: 1.8,
+  },
+
+  // Layout
+  breakpoints: ['640px', '768px', '1024px', '1280px'],
+  sizes: [16, 32, 64, 128, 256, 512, 768, 1024, 1536],
+  radii: [0, 8, 12, 16, 20, 24, 32, 40],
+  shadows: [
+    'none',
+    '0 8px 32px 0 rgba(31, 38, 135, 0.15)',
+    '0 12px 40px 0 rgba(31, 38, 135, 0.2)',
+    '0 16px 48px 0 rgba(31, 38, 135, 0.25)',
+    '0 20px 56px 0 rgba(31, 38, 135, 0.3)',
+    '0 24px 64px 0 rgba(31, 38, 135, 0.35)',
+  ],
+  zIndices: [0, 1, 10, 20, 30, 40, 50],
+
+  // Colors - Heavy use of transparency for glass effect
+  colors: {
+    // Base colors with transparency
+    text: 'rgba(255, 255, 255, 0.95)', // Nearly opaque white
+    background: 'rgba(255, 255, 255, 0.1)', // Very transparent white
+    primary: 'rgba(99, 102, 241, 0.9)', // Semi-transparent indigo
+    secondary: 'rgba(139, 92, 246, 0.9)', // Semi-transparent purple
+    accent: 'rgba(236, 72, 153, 0.9)', // Semi-transparent pink
+    highlight: 'rgba(99, 102, 241, 0.2)', // Transparent indigo
+    muted: 'rgba(255, 255, 255, 0.05)', // Barely visible white
+
+    // Status colors with transparency
+    success: 'rgba(34, 197, 94, 0.9)', // Semi-transparent green
+    warning: 'rgba(251, 146, 60, 0.9)', // Semi-transparent orange
+    error: 'rgba(239, 68, 68, 0.9)', // Semi-transparent red
+    info: 'rgba(59, 130, 246, 0.9)', // Semi-transparent blue
+
+    // Glass effect colors
+    border: 'rgba(255, 255, 255, 0.18)', // Transparent white border
+    backgroundSecondary: 'rgba(255, 255, 255, 0.15)', // Slightly more opaque
+    backgroundTertiary: 'rgba(255, 255, 255, 0.2)', // Even more opaque
+    backgroundLight: 'rgba(255, 255, 255, 0.08)', // Very light overlay
+    backgroundHover: 'rgba(255, 255, 255, 0.25)', // Hover state
+    surface: 'rgba(255, 255, 255, 0.12)', // Surface panels
+    textSecondary: 'rgba(255, 255, 255, 0.8)', // Slightly transparent text
+    textTertiary: 'rgba(255, 255, 255, 0.6)', // More transparent text
+    textMuted: 'rgba(255, 255, 255, 0.5)', // Half transparent text
+
+    // Search highlight colors
+    highlightBg: 'rgba(251, 191, 36, 0.3)', // Transparent yellow
+    highlightBorder: 'rgba(251, 191, 36, 0.5)', // Stronger yellow border
+  },
+
+  // Dark mode with different transparency levels
+  modes: {
+    dark: {
+      // Dark glass colors
+      text: 'rgba(255, 255, 255, 0.95)',
+      background: 'rgba(0, 0, 0, 0.3)', // Semi-transparent black
+      primary: 'rgba(129, 140, 248, 0.9)', // Lighter indigo
+      secondary: 'rgba(167, 139, 250, 0.9)', // Lighter purple
+      accent: 'rgba(244, 114, 182, 0.9)', // Lighter pink
+      highlight: 'rgba(129, 140, 248, 0.25)',
+      muted: 'rgba(0, 0, 0, 0.15)',
+
+      success: 'rgba(74, 222, 128, 0.9)',
+      warning: 'rgba(251, 191, 36, 0.9)',
+      error: 'rgba(248, 113, 113, 0.9)',
+      info: 'rgba(96, 165, 250, 0.9)',
+
+      border: 'rgba(255, 255, 255, 0.15)',
+      backgroundSecondary: 'rgba(0, 0, 0, 0.4)',
+      backgroundTertiary: 'rgba(0, 0, 0, 0.5)',
+      backgroundLight: 'rgba(0, 0, 0, 0.2)',
+      backgroundHover: 'rgba(255, 255, 255, 0.1)',
+      surface: 'rgba(0, 0, 0, 0.35)',
+      textSecondary: 'rgba(255, 255, 255, 0.8)',
+      textTertiary: 'rgba(255, 255, 255, 0.6)',
+      textMuted: 'rgba(255, 255, 255, 0.4)',
+
+      highlightBg: 'rgba(251, 191, 36, 0.35)',
+      highlightBorder: 'rgba(251, 191, 36, 0.6)',
+    },
+
+    // Frosted mode - maximum blur effect
+    frosted: {
+      text: 'rgba(31, 41, 55, 0.95)', // Dark text for light backgrounds
+      background: 'rgba(255, 255, 255, 0.3)', // More opaque white
+      primary: 'rgba(79, 70, 229, 0.95)', // Solid indigo
+      secondary: 'rgba(124, 58, 237, 0.95)', // Solid purple
+      accent: 'rgba(219, 39, 119, 0.95)', // Solid pink
+      highlight: 'rgba(79, 70, 229, 0.15)',
+      muted: 'rgba(255, 255, 255, 0.4)',
+
+      success: 'rgba(16, 185, 129, 0.95)',
+      warning: 'rgba(245, 158, 11, 0.95)',
+      error: 'rgba(220, 38, 38, 0.95)',
+      info: 'rgba(37, 99, 235, 0.95)',
+
+      border: 'rgba(255, 255, 255, 0.5)',
+      backgroundSecondary: 'rgba(255, 255, 255, 0.4)',
+      backgroundTertiary: 'rgba(255, 255, 255, 0.5)',
+      backgroundLight: 'rgba(255, 255, 255, 0.25)',
+      backgroundHover: 'rgba(255, 255, 255, 0.6)',
+      surface: 'rgba(255, 255, 255, 0.35)',
+      textSecondary: 'rgba(31, 41, 55, 0.8)',
+      textTertiary: 'rgba(31, 41, 55, 0.6)',
+      textMuted: 'rgba(31, 41, 55, 0.5)',
+
+      highlightBg: 'rgba(251, 191, 36, 0.4)',
+      highlightBorder: 'rgba(251, 191, 36, 0.7)',
+    }
+  },
+
+  // Component variants
+  buttons: {
+    primary: {
+      color: 'white',
+      bg: 'primary',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      '&:hover': {
+        bg: 'secondary',
+      },
+    },
+    secondary: {
+      color: 'text',
+      bg: 'rgba(255, 255, 255, 0.1)',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'rgba(255, 255, 255, 0.2)',
+      '&:hover': {
+        bg: 'rgba(255, 255, 255, 0.2)',
+      },
+    },
+    ghost: {
+      color: 'text',
+      bg: 'transparent',
+      borderWidth: 1,
+      borderStyle: 'solid',
+      borderColor: 'transparent',
+      '&:hover': {
+        borderColor: 'rgba(255, 255, 255, 0.2)',
+        bg: 'rgba(255, 255, 255, 0.05)',
+      },
+    },
+  },
+
+  text: {
+    heading: {
+      fontFamily: 'heading',
+      fontWeight: 'heading',
+      lineHeight: 'heading',
+    },
+    body: {
+      fontFamily: 'body',
+      fontWeight: 'body',
+      lineHeight: 'body',
+    },
+    caption: {
+      fontSize: 1,
+      color: 'textSecondary',
+    },
+  },
+
+  cards: {
+    primary: {
+      bg: 'surface',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 3,
+    },
+    secondary: {
+      bg: 'backgroundSecondary',
+      border: '1px solid',
+      borderColor: 'border',
+      borderRadius: 3,
+    },
+  },
+};