doom-design-system 0.1.0

package/dist/styles/themes/definitions.d.ts

@@ -0,0 +1,211 @@
+export declare const themes: {
+    readonly default: {
+        readonly name: "Default";
+        readonly variables: {
+            readonly '--background': "#e0e7ff";
+            readonly '--foreground': "#000000";
+            readonly '--card-bg': "#ffffff";
+            readonly '--card-border': "#000000";
+            readonly '--primary': "#a855f7";
+            readonly '--primary-hover': "#9333ea";
+            readonly '--primary-foreground': "#000000";
+            readonly '--secondary': "#fbbf24";
+            readonly '--secondary-foreground': "#000000";
+            readonly '--accent': "#ec4899";
+            readonly '--muted': "#94a3b8";
+            readonly '--muted-foreground': "#334155";
+            readonly '--success': "#22c55e";
+            readonly '--warning': "#f59e0b";
+            readonly '--error': "#ef4444";
+            readonly '--border-width': "3px";
+            readonly '--radius': "8px";
+            readonly '--shadow-hard': "5px 5px 0px 0px #000000";
+            readonly '--shadow-hover': "7px 7px 0px 0px #000000";
+            readonly '--font-heading': "var(--font-montserrat)";
+            readonly '--heading-transform': "uppercase";
+            readonly '--heading-weight': "900";
+            readonly '--text-xs': string;
+            readonly '--text-sm': string;
+            readonly '--text-base': string;
+            readonly '--text-lg': string;
+            readonly '--text-xl': string;
+            readonly '--text-2xl': string;
+            readonly '--text-3xl': string;
+            readonly '--text-4xl': string;
+            readonly '--text-5xl': string;
+            readonly '--text-6xl': string;
+            readonly '--font-thin': string;
+            readonly '--font-extralight': string;
+            readonly '--font-light': string;
+            readonly '--font-regular': string;
+            readonly '--font-medium': string;
+            readonly '--font-semibold': string;
+            readonly '--font-bold': string;
+            readonly '--font-extrabold': string;
+            readonly '--font-black': string;
+            readonly '--z-base': string;
+            readonly '--z-elevated': string;
+            readonly '--z-header': string;
+            readonly '--z-dropdown': string;
+            readonly '--z-modal': string;
+            readonly '--z-tooltip': string;
+        };
+    };
+    readonly doom: {
+        readonly name: "DOOMSDAY";
+        readonly variables: {
+            readonly '--background': "#020617";
+            readonly '--foreground': "#e2e8f0";
+            readonly '--card-bg': "#0f172a";
+            readonly '--card-border': "#1e293b";
+            readonly '--primary': "#10b981";
+            readonly '--primary-hover': "#059669";
+            readonly '--primary-foreground': "#020617";
+            readonly '--secondary': "#334155";
+            readonly '--secondary-foreground': "#f8fafc";
+            readonly '--accent': "#fbbf24";
+            readonly '--muted': "#64748b";
+            readonly '--muted-foreground': "#94a3b8";
+            readonly '--success': "#10b981";
+            readonly '--warning': "#fbbf24";
+            readonly '--error': "#ef4444";
+            readonly '--border-width': "2px";
+            readonly '--radius': "2px";
+            readonly '--shadow-hard': "5px 5px 0px 0px #000000";
+            readonly '--shadow-hover': "7px 7px 0px 0px #000000";
+            readonly '--font-heading': "var(--font-montserrat)";
+            readonly '--heading-transform': "uppercase";
+            readonly '--heading-weight': "700";
+            readonly '--text-xs': string;
+            readonly '--text-sm': string;
+            readonly '--text-base': string;
+            readonly '--text-lg': string;
+            readonly '--text-xl': string;
+            readonly '--text-2xl': string;
+            readonly '--text-3xl': string;
+            readonly '--text-4xl': string;
+            readonly '--text-5xl': string;
+            readonly '--text-6xl': string;
+            readonly '--font-thin': string;
+            readonly '--font-extralight': string;
+            readonly '--font-light': string;
+            readonly '--font-regular': string;
+            readonly '--font-medium': string;
+            readonly '--font-semibold': string;
+            readonly '--font-bold': string;
+            readonly '--font-extrabold': string;
+            readonly '--font-black': string;
+            readonly '--z-base': string;
+            readonly '--z-elevated': string;
+            readonly '--z-header': string;
+            readonly '--z-dropdown': string;
+            readonly '--z-modal': string;
+            readonly '--z-tooltip': string;
+        };
+    };
+    readonly neighbor: {
+        readonly name: "THE CAPTAIN";
+        readonly variables: {
+            readonly '--background': "#F8FAFC";
+            readonly '--foreground': "#0F172A";
+            readonly '--card-bg': "#FFFFFF";
+            readonly '--card-border': "#002D72";
+            readonly '--primary': "#002D72";
+            readonly '--primary-hover': "#1E3A8A";
+            readonly '--primary-foreground': "#FFFFFF";
+            readonly '--secondary': "#B91C1C";
+            readonly '--secondary-foreground': "#FFFFFF";
+            readonly '--accent': "#C0C0C0";
+            readonly '--muted': "#64748B";
+            readonly '--muted-foreground': "#475569";
+            readonly '--success': "#15803D";
+            readonly '--warning': "#B45309";
+            readonly '--error': "#B91C1C";
+            readonly '--border-width': "3px";
+            readonly '--radius': "8px";
+            readonly '--shadow-hard': "6px 6px 0px 0px #0F172A";
+            readonly '--shadow-hover': "8px 8px 0px 0px #0F172A";
+            readonly '--font-heading': "var(--font-montserrat)";
+            readonly '--heading-transform': "uppercase";
+            readonly '--heading-weight': "900";
+            readonly '--text-xs': string;
+            readonly '--text-sm': string;
+            readonly '--text-base': string;
+            readonly '--text-lg': string;
+            readonly '--text-xl': string;
+            readonly '--text-2xl': string;
+            readonly '--text-3xl': string;
+            readonly '--text-4xl': string;
+            readonly '--text-5xl': string;
+            readonly '--text-6xl': string;
+            readonly '--font-thin': string;
+            readonly '--font-extralight': string;
+            readonly '--font-light': string;
+            readonly '--font-regular': string;
+            readonly '--font-medium': string;
+            readonly '--font-semibold': string;
+            readonly '--font-bold': string;
+            readonly '--font-extrabold': string;
+            readonly '--font-black': string;
+            readonly '--z-base': string;
+            readonly '--z-elevated': string;
+            readonly '--z-header': string;
+            readonly '--z-dropdown': string;
+            readonly '--z-modal': string;
+            readonly '--z-tooltip': string;
+        };
+    };
+    readonly vigilante: {
+        readonly name: "DARK KNIGHT";
+        readonly variables: {
+            readonly '--background': "#0F1419";
+            readonly '--foreground': "#E8E9ED";
+            readonly '--card-bg': "#1A1F29";
+            readonly '--card-border': "#2D3748";
+            readonly '--primary': "#F7B731";
+            readonly '--primary-hover': "#F5A623";
+            readonly '--primary-foreground': "#0F1419";
+            readonly '--secondary': "#4A5568";
+            readonly '--secondary-foreground': "#E8E9ED";
+            readonly '--accent': "#3B82F6";
+            readonly '--muted': "#718096";
+            readonly '--muted-foreground': "#A0AEC0";
+            readonly '--success': "#48BB78";
+            readonly '--warning': "#ED8936";
+            readonly '--error': "#F56565";
+            readonly '--border-width': "2px";
+            readonly '--radius': "6px";
+            readonly '--shadow-hard': "5px 5px 0px 0px #000000";
+            readonly '--shadow-hover': "7px 7px 0px 0px #000000";
+            readonly '--font-heading': "var(--font-montserrat)";
+            readonly '--heading-transform': "uppercase";
+            readonly '--heading-weight': "700";
+            readonly '--text-xs': string;
+            readonly '--text-sm': string;
+            readonly '--text-base': string;
+            readonly '--text-lg': string;
+            readonly '--text-xl': string;
+            readonly '--text-2xl': string;
+            readonly '--text-3xl': string;
+            readonly '--text-4xl': string;
+            readonly '--text-5xl': string;
+            readonly '--text-6xl': string;
+            readonly '--font-thin': string;
+            readonly '--font-extralight': string;
+            readonly '--font-light': string;
+            readonly '--font-regular': string;
+            readonly '--font-medium': string;
+            readonly '--font-semibold': string;
+            readonly '--font-bold': string;
+            readonly '--font-extrabold': string;
+            readonly '--font-black': string;
+            readonly '--z-base': string;
+            readonly '--z-elevated': string;
+            readonly '--z-header': string;
+            readonly '--z-dropdown': string;
+            readonly '--z-modal': string;
+            readonly '--z-tooltip': string;
+        };
+    };
+};
+export type ThemeKey = keyof typeof themes;

package/dist/styles/themes/definitions.js

@@ -0,0 +1,48 @@
+const baseVariables = {
+    // Typography Scale
+    '--text-xs': '0.75rem',
+    '--text-sm': '0.875rem',
+    '--text-base': '1rem',
+    '--text-lg': '1.125rem',
+    '--text-xl': '1.25rem',
+    '--text-2xl': '1.5rem',
+    '--text-3xl': '1.875rem',
+    '--text-4xl': '2.25rem',
+    '--text-5xl': '3rem',
+    '--text-6xl': '3.75rem',
+    // Font Weights
+    '--font-thin': '100',
+    '--font-extralight': '200',
+    '--font-light': '300',
+    '--font-regular': '400',
+    '--font-medium': '500',
+    '--font-semibold': '600',
+    '--font-bold': '700',
+    '--font-extrabold': '800',
+    '--font-black': '900',
+    // Z-Indices
+    '--z-base': '0',
+    '--z-elevated': '10',
+    '--z-header': '40',
+    '--z-dropdown': '50',
+    '--z-modal': '100',
+    '--z-tooltip': '200',
+};
+export const themes = {
+    default: {
+        name: 'Default',
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#e0e7ff', '--foreground': '#000000', '--card-bg': '#ffffff', '--card-border': '#000000', '--primary': '#a855f7', '--primary-hover': '#9333ea', '--primary-foreground': '#000000', '--secondary': '#fbbf24', '--secondary-foreground': '#000000', '--accent': '#ec4899', '--muted': '#94a3b8', '--muted-foreground': '#334155', '--success': '#22c55e', '--warning': '#f59e0b', '--error': '#ef4444', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
+    },
+    doom: {
+        name: 'DOOMSDAY',
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#020617', '--foreground': '#e2e8f0', '--card-bg': '#0f172a', '--card-border': '#1e293b', '--primary': '#10b981', '--primary-hover': '#059669', '--primary-foreground': '#020617', '--secondary': '#334155', '--secondary-foreground': '#f8fafc', '--accent': '#fbbf24', '--muted': '#64748b', '--muted-foreground': '#94a3b8', '--success': '#10b981', '--warning': '#fbbf24', '--error': '#ef4444', '--border-width': '2px', '--radius': '2px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
+    },
+    neighbor: {
+        name: 'THE CAPTAIN',
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#F8FAFC', '--foreground': '#0F172A', '--card-bg': '#FFFFFF', '--card-border': '#002D72', '--primary': '#002D72', '--primary-hover': '#1E3A8A', '--primary-foreground': '#FFFFFF', '--secondary': '#B91C1C', '--secondary-foreground': '#FFFFFF', '--accent': '#C0C0C0', '--muted': '#64748B', '--muted-foreground': '#475569', '--success': '#15803D', '--warning': '#B45309', '--error': '#B91C1C', '--border-width': '3px', '--radius': '8px', '--shadow-hard': '6px 6px 0px 0px #0F172A', '--shadow-hover': '8px 8px 0px 0px #0F172A', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '900' })
+    },
+    vigilante: {
+        name: 'DARK KNIGHT',
+        variables: Object.assign(Object.assign({}, baseVariables), { '--background': '#0F1419', '--foreground': '#E8E9ED', '--card-bg': '#1A1F29', '--card-border': '#2D3748', '--primary': '#F7B731', '--primary-hover': '#F5A623', '--primary-foreground': '#0F1419', '--secondary': '#4A5568', '--secondary-foreground': '#E8E9ED', '--accent': '#3B82F6', '--muted': '#718096', '--muted-foreground': '#A0AEC0', '--success': '#48BB78', '--warning': '#ED8936', '--error': '#F56565', '--border-width': '2px', '--radius': '6px', '--shadow-hard': '5px 5px 0px 0px #000000', '--shadow-hover': '7px 7px 0px 0px #000000', '--font-heading': 'var(--font-montserrat)', '--heading-transform': 'uppercase', '--heading-weight': '700' })
+    }
+};

package/dist/styles/themes/index.d.ts

@@ -0,0 +1,3 @@
+export * from './definitions';
+export * from './ThemeProvider';
+export * from './actions';

package/dist/styles/themes/index.js

@@ -0,0 +1,3 @@
+export * from './definitions';
+export * from './ThemeProvider';
+export * from './actions';

package/dist/styles/utilities.d.ts

@@ -0,0 +1 @@
+export declare const utilityStyles: import("@emotion/utils").SerializedStyles;

package/dist/styles/utilities.js

@@ -0,0 +1,184 @@
+import { css } from '@emotion/react';
+export const utilityStyles = css `
+  /* Typography Base Styles */
+  h1, h2, h3, h4, h5, h6 {
+    font-family: var(--font-heading, var(--font-montserrat)), sans-serif;
+    font-weight: var(--heading-weight, 700);
+    text-transform: var(--heading-transform, none);
+    line-height: 1.1;
+    letter-spacing: 0.02em;
+    margin-bottom: 0.5em;
+  }
+
+  h1 { font-size: var(--text-5xl); }
+  h2 { font-size: var(--text-4xl); }
+  h3 { font-size: var(--text-3xl); }
+  h4 { font-size: var(--text-2xl); }
+  h5 { font-size: var(--text-xl); }
+  h6 { font-size: var(--text-lg); }
+
+  p {
+    margin-bottom: 1em;
+    line-height: 1.6;
+  }
+
+  /* Generated Utilities */
+  ${(() => {
+    const utils = [];
+    // Typography Sizes
+    const textSizes = ['xs', 'sm', 'base', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl', '6xl'];
+    textSizes.forEach(size => {
+        utils.push(`.text-${size} { font-size: var(--text-${size}); }`);
+    });
+    // Font Weights
+    const weights = ['thin', 'extralight', 'light', 'regular', 'medium', 'semibold', 'bold', 'extrabold', 'black'];
+    weights.forEach(weight => {
+        utils.push(`.font-${weight} { font-weight: var(--font-${weight}); }`);
+    });
+    // Colors (Text & Background)
+    const colors = ['primary', 'secondary', 'muted', 'success', 'warning', 'error', 'background', 'foreground'];
+    colors.forEach(color => {
+        // Text Colors
+        utils.push(`.text-${color} { color: var(--${color}); }`);
+        // Background Colors
+        utils.push(`.bg-${color} { background-color: var(--${color}); }`);
+    });
+    // Special Text Colors
+    utils.push('.text-muted { color: var(--muted-foreground); }');
+    // Z-Index
+    const zIndices = {
+        '0': 'var(--z-base)',
+        '10': 'var(--z-elevated)',
+        '40': 'var(--z-header)',
+        '50': 'var(--z-dropdown)',
+        'modal': 'var(--z-modal)',
+        'tooltip': 'var(--z-tooltip)'
+    };
+    Object.entries(zIndices).forEach(([key, value]) => {
+        utils.push(`.z-${key} { z-index: ${value}; }`);
+    });
+    // Opacity (0-100, step 10)
+    for (let i = 0; i <= 100; i += 10) {
+        utils.push(`.opacity-${i} { opacity: ${i / 100}; }`);
+    }
+    // Spacing (Margin, Padding, Width, Height)
+    const MAX_SPACING = 10;
+    for (let i = 0; i <= MAX_SPACING; i++) {
+        const value = i === 0 ? '0' : `${i * 0.25}rem`;
+        // Margin & Padding
+        utils.push(`
+        .m-${i} { margin: ${value}; }
+        .mt-${i} { margin-top: ${value}; }
+        .mb-${i} { margin-bottom: ${value}; }
+        .ml-${i} { margin-left: ${value}; }
+        .mr-${i} { margin-right: ${value}; }
+        .mx-${i} { margin-left: ${value}; margin-right: ${value}; }
+        .my-${i} { margin-top: ${value}; margin-bottom: ${value}; }
+        
+        .p-${i} { padding: ${value}; }
+        .pt-${i} { padding-top: ${value}; }
+        .pb-${i} { padding-bottom: ${value}; }
+        .pl-${i} { padding-left: ${value}; }
+        .pr-${i} { padding-right: ${value}; }
+        .px-${i} { padding-left: ${value}; padding-right: ${value}; }
+        .py-${i} { padding-top: ${value}; padding-bottom: ${value}; }
+      `);
+        // Width & Height (Spacing Scale)
+        utils.push(`
+        .w-${i} { width: ${value}; }
+        .h-${i} { height: ${value}; }
+      `);
+    }
+    // Width Percentages
+    const widthPercentages = {
+        '1/4': '25%',
+        '2/4': '50%',
+        '1/2': '50%',
+        '3/4': '75%',
+        'full': '100%'
+    };
+    Object.entries(widthPercentages).forEach(([key, value]) => {
+        utils.push(`.w-${key} { width: ${value}; }`);
+    });
+    return utils.join('\n');
+})()}
+
+  /* Manual Overrides & Extras */
+  
+  /* Text Extras */
+  .italic { font-style: italic; }
+  .uppercase { text-transform: uppercase; }
+  .capitalize { text-transform: capitalize; }
+  .block { display: block; }
+  .tracking-wide { letter-spacing: 0.05em; }
+  .tracking-widest { letter-spacing: 0.1em; }
+  .leading-none { line-height: 1; }
+  .text-left { text-align: left; }
+  .text-center { text-align: center; }
+  .text-right { text-align: right; }
+
+  /* Flex */
+  .flex { display: flex; }
+  .flex-wrap { flex-wrap: wrap; }
+  .align-self-start { align-self: flex-start; }
+  .items-center { align-items: center; }
+  .justify-center { justify-content: center; }
+  .justify-between { justify-content: space-between; }
+
+  /* Grid */
+  .grid { display: grid; }
+  .col-span-full { grid-column: 1 / -1; }
+
+  /* Layout & Sizing Extras */
+  .w-fit { width: fit-content; }
+  .min-w-fit { min-width: fit-content;}
+  .w-32 { width: 8rem; } /* Kept for compatibility, though covered by w-32 generator if we went that high */
+  .h-full { height: 100%; }
+  .hidden { display: none; }
+
+  /* Positioning */
+  .relative { position: relative; }
+  .absolute { position: absolute; }
+  .fixed { position: fixed; }
+  .top-0 { top: 0; }
+  .top-4 { top: 1rem; }
+  .right-0 { right: 0; }
+  .right-4 { right: 1rem; }
+  .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
+
+  /* Backgrounds & Borders Extras */
+  .bg-black-50 { background-color: rgba(0, 0, 0, 0.5); }
+  .bg-slate-50 { background-color: #f8fafc; }
+  .bg-transparent { background-color: transparent; }
+  .bg-amber-100 { background-color: #fef3c7; }
+  .bg-blue-100 { background-color: #dbeafe; }
+  
+  .border-slate-100 { border-color: #f1f5f9; }
+  .border-b-2 { border-bottom-width: 2px; }
+  .border-t-2 { border-top-width: 2px; }
+  .border-2 { border-width: 2px; }
+  .border-brand { border-width: var(--border-width); }
+  .border-black { border-color: #000000; }
+  .rounded-lg { border-radius: var(--radius); }
+
+  /* Effects */
+  .backdrop-blur-sm { backdrop-filter: blur(4px); }
+  .shadow-hard { box-shadow: var(--shadow-hard); }
+  .shadow-hover { box-shadow: var(--shadow-hover); }
+
+  /* Overflow */
+  .overflow-hidden { overflow: hidden; }
+
+  /* Max Width */
+  .max-w-md { max-width: 500px; }
+
+  /* Transforms & Transitions */
+  .transition-all { transition: all 0.2s ease; }
+  .duration-200 { transition-duration: 200ms; }
+  .translate-x-\[-2px\] { transform: translateX(-2px); }
+  .translate-y-\[-2px\] { transform: translateY(-2px); }
+  .hover\:translate-y-\[-2px\]:hover { transform: translateY(-2px); }
+  .hover\:shadow-hover:hover { box-shadow: var(--shadow-hover); }
+  .cursor-pointer { cursor: pointer; }
+  .cursor-not-allowed { cursor: not-allowed; }
+`;