initial

2026-01-06 02:24:12 +00:00
commit edea37a856
64 changed files with 18007 additions and 0 deletions
--- a/ts_web/elements/00theme.ts
+++ b/ts_web/elements/00theme.ts
@@ -0,0 +1,218 @@
+import { css, type CSSResult } from '@design.estate/dees-element';
+
+// ============================================
+// Theme Token Type Definitions
+// ============================================
+
+export interface IThemeColors {
+  bgPrimary: string;
+  bgSecondary: string;
+  bgTertiary: string;
+  textPrimary: string;
+  textSecondary: string;
+  textMuted: string;
+  borderDefault: string;
+  borderSubtle: string;
+  borderStrong: string;
+  accentPrimary: string;
+  accentSuccess: string;
+  accentWarning: string;
+  accentError: string;
+}
+
+export interface IThemeSpacing {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  '2xl': string;
+  '3xl': string;
+}
+
+export interface IThemeRadius {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+  full: string;
+}
+
+export interface IThemeShadows {
+  xs: string;
+  sm: string;
+  md: string;
+  lg: string;
+}
+
+export interface IThemeTransitions {
+  fast: string;
+  default: string;
+  slow: string;
+  slower: string;
+}
+
+export interface IThemeControlHeights {
+  sm: string;
+  md: string;
+  lg: string;
+  xl: string;
+}
+
+export interface ITheme {
+  colors: {
+    light: IThemeColors;
+    dark: IThemeColors;
+  };
+  spacing: IThemeSpacing;
+  radius: IThemeRadius;
+  shadows: IThemeShadows;
+  transitions: IThemeTransitions;
+  controlHeights: IThemeControlHeights;
+}
+
+// ============================================
+// Default Theme Values (TypeScript Object)
+// ============================================
+
+export const themeDefaults: ITheme = {
+  colors: {
+    light: {
+      bgPrimary: '#ffffff',
+      bgSecondary: '#fafafa',
+      bgTertiary: '#f4f4f5',
+      textPrimary: '#09090b',
+      textSecondary: '#374151',
+      textMuted: '#71717a',
+      borderDefault: '#e5e7eb',
+      borderSubtle: '#f4f4f5',
+      borderStrong: '#d1d5db',
+      accentPrimary: '#3b82f6',
+      accentSuccess: '#22c55e',
+      accentWarning: '#f59e0b',
+      accentError: '#ef4444',
+    },
+    dark: {
+      bgPrimary: '#09090b',
+      bgSecondary: '#0a0a0a',
+      bgTertiary: '#18181b',
+      textPrimary: '#fafafa',
+      textSecondary: '#d4d4d8',
+      textMuted: '#a1a1aa',
+      borderDefault: '#27272a',
+      borderSubtle: '#1a1a1a',
+      borderStrong: '#3f3f46',
+      accentPrimary: '#3b82f6',
+      accentSuccess: '#22c55e',
+      accentWarning: '#f59e0b',
+      accentError: '#ef4444',
+    },
+  },
+  spacing: {
+    xs: '4px',
+    sm: '8px',
+    md: '12px',
+    lg: '16px',
+    xl: '24px',
+    '2xl': '32px',
+    '3xl': '48px',
+  },
+  radius: {
+    xs: '2px',
+    sm: '4px',
+    md: '6px',
+    lg: '8px',
+    xl: '12px',
+    full: '999px',
+  },
+  shadows: {
+    xs: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
+    md: '0 2px 8px rgba(0, 0, 0, 0.15)',
+    lg: '0 4px 12px rgba(0, 0, 0, 0.15)',
+  },
+  transitions: {
+    fast: '0.1s',
+    default: '0.15s',
+    slow: '0.2s',
+    slower: '0.3s',
+  },
+  controlHeights: {
+    sm: '32px',
+    md: '36px',
+    lg: '40px',
+    xl: '48px',
+  },
+};
+
+// ============================================
+// CSS Block for Component Import
+// ============================================
+
+/**
+ * Default theme styles to be imported into every component's static styles array.
+ * Provides CSS custom properties for spacing, radius, shadows, transitions, and control heights.
+ *
+ * Usage:
+ * ```typescript
+ * import { themeDefaultStyles } from '../00theme.js';
+ *
+ * @customElement('my-component')
+ * export class MyComponent extends DeesElement {
+ *   public static styles = [
+ *     themeDefaultStyles,
+ *     cssManager.defaultStyles,
+ *     css`...`
+ *   ];
+ * }
+ * ```
+ */
+export const themeDefaultStyles: CSSResult = css`
+  :host {
+    /* ========================================
+     * Spacing Scale
+     * ======================================== */
+    --dees-spacing-xs: 4px;
+    --dees-spacing-sm: 8px;
+    --dees-spacing-md: 12px;
+    --dees-spacing-lg: 16px;
+    --dees-spacing-xl: 24px;
+    --dees-spacing-2xl: 32px;
+    --dees-spacing-3xl: 48px;
+
+    /* ========================================
+     * Border Radius Scale
+     * ======================================== */
+    --dees-radius-xs: 2px;
+    --dees-radius-sm: 4px;
+    --dees-radius-md: 6px;
+    --dees-radius-lg: 8px;
+    --dees-radius-xl: 12px;
+    --dees-radius-full: 999px;
+
+    /* ========================================
+     * Shadow Elevation Scale
+     * ======================================== */
+    --dees-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --dees-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+    --dees-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.15);
+    --dees-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
+
+    /* ========================================
+     * Transition Duration Scale
+     * ======================================== */
+    --dees-transition-fast: 0.1s;
+    --dees-transition-default: 0.15s;
+    --dees-transition-slow: 0.2s;
+    --dees-transition-slower: 0.3s;
+
+    /* ========================================
+     * Control Height Scale
+     * ======================================== */
+    --dees-control-height-sm: 32px;
+    --dees-control-height-md: 36px;
+    --dees-control-height-lg: 40px;
+    --dees-control-height-xl: 48px;
+  }
+`;