@lgtm-hq/turbo-themes 0.12.16

package/packages/css/dist/components/tables.css

@@ -0,0 +1,157 @@
+/* ==========================================================================
+   Turbo Themes - Tables
+   ========================================================================== */
+
+.table {
+  width: 100%;
+
+  /* Use separate + spacing:0 to allow border-radius while removing cell gaps */
+  border-collapse: separate;
+  border-spacing: 0;
+  background: var(--turbo-bg-surface);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.table thead {
+  background: var(--turbo-bg-overlay);
+}
+
+.table th {
+  padding: var(--space-md) var(--space-lg);
+  text-align: left;
+  font-weight: 600;
+  color: var(--turbo-text-primary);
+  border-bottom: 2px solid var(--turbo-border-default);
+}
+
+.table td {
+  padding: var(--space-md) var(--space-lg);
+  border-bottom: 1px solid var(--turbo-border-default);
+  color: var(--turbo-text-secondary);
+}
+
+.table tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr {
+  transition: background-color var(--transition-fast);
+}
+
+.table tbody tr:hover {
+  background: color-mix(in srgb, var(--turbo-brand-primary) 5%, transparent);
+}
+
+/* Table header color variants */
+.table-header-primary thead {
+  background: color-mix(
+    in srgb,
+    var(--turbo-brand-primary) 15%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.table-header-primary th {
+  color: var(--turbo-brand-primary);
+  border-bottom-color: var(--turbo-brand-primary);
+}
+
+.table-header-info thead {
+  background: color-mix(in srgb, var(--turbo-state-info) 15%, var(--turbo-bg-surface));
+}
+
+.table-header-info th {
+  color: var(--turbo-state-info);
+  border-bottom-color: var(--turbo-state-info);
+}
+
+.table-header-success thead {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-success) 15%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.table-header-success th {
+  color: var(--turbo-state-success);
+  border-bottom-color: var(--turbo-state-success);
+}
+
+.table-header-warning thead {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-warning) 15%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.table-header-warning th {
+  color: var(--turbo-state-warning);
+  border-bottom-color: var(--turbo-state-warning);
+}
+
+.table-header-danger thead {
+  background: color-mix(
+    in srgb,
+    var(--turbo-state-danger) 15%,
+    var(--turbo-bg-surface)
+  );
+}
+
+.table-header-danger th {
+  color: var(--turbo-state-danger);
+  border-bottom-color: var(--turbo-state-danger);
+}
+
+/* Striped table */
+.table-striped tbody tr:nth-child(odd) {
+  background: color-mix(in srgb, var(--turbo-bg-overlay) 50%, transparent);
+}
+
+.table-striped tbody tr:nth-child(even) {
+  background: transparent;
+}
+
+/* Accent striped table */
+.table-striped-accent tbody tr:nth-child(odd) {
+  background: color-mix(in srgb, var(--turbo-brand-primary) 5%, transparent);
+}
+
+.table-striped-accent tbody tr:nth-child(even) {
+  background: transparent;
+}
+
+.table-striped-accent tbody tr:hover {
+  background: color-mix(in srgb, var(--turbo-brand-primary) 10%, transparent);
+}
+
+/* Bordered table - use single-direction borders to avoid doubling with border-collapse: separate */
+.table-bordered {
+  border: 1px solid var(--turbo-border-default);
+}
+
+.table-bordered th,
+.table-bordered td {
+  border-bottom: 1px solid var(--turbo-border-default);
+  border-right: 1px solid var(--turbo-border-default);
+}
+
+/* Remove right border from last column */
+.table-bordered th:last-child,
+.table-bordered td:last-child {
+  border-right: none;
+}
+
+/* Remove bottom border from last row (already handled by .table tr:last-child td) */
+.table-bordered tr:last-child td {
+  border-bottom: none;
+}
+
+/* Compact table */
+.table-compact th,
+.table-compact td {
+  padding: var(--space-sm) var(--space-md);
+}

package/packages/css/dist/components/tabs.css

@@ -0,0 +1,106 @@
+/* ==========================================================================
+   Turbo Themes - Tabs
+   ========================================================================== */
+
+.tabs {
+  display: flex;
+  gap: var(--space-xs);
+  border-bottom: 2px solid var(--turbo-border-default);
+  margin-bottom: var(--space-lg);
+}
+
+.tab {
+  padding: var(--space-md) var(--space-lg);
+  font-weight: 500;
+  color: var(--turbo-text-secondary);
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+.tab:hover:not(:disabled) {
+  color: var(--turbo-text-primary);
+}
+
+.tab:focus-visible {
+  outline: 2px solid var(--turbo-brand-primary);
+  outline-offset: 2px;
+}
+
+.tab.active {
+  color: var(--turbo-brand-primary);
+  border-bottom-color: var(--turbo-brand-primary);
+}
+
+.tab:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* Tab content panels */
+.tab-content {
+  display: none;
+}
+
+.tab-content.active {
+  display: block;
+}
+
+/* Boxed tabs variant */
+.tabs-boxed {
+  border-bottom: none;
+  background: var(--turbo-bg-overlay);
+  border-radius: var(--radius-lg);
+  padding: var(--space-xs);
+}
+
+.tabs-boxed .tab {
+  border-bottom: none;
+  border-radius: var(--radius-md);
+  margin-bottom: 0;
+}
+
+.tabs-boxed .tab.active {
+  background: var(--turbo-bg-surface);
+  color: var(--turbo-brand-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+/* Pills tabs variant */
+.tabs-pills {
+  border-bottom: none;
+  gap: var(--space-sm);
+}
+
+.tabs-pills .tab {
+  border-bottom: none;
+  border-radius: var(--radius-full);
+  margin-bottom: 0;
+}
+
+.tabs-pills .tab.active {
+  background: var(--turbo-brand-primary);
+  color: var(--turbo-text-inverse);
+}
+
+/* Vertical tabs */
+.tabs-vertical {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 2px solid var(--turbo-border-default);
+}
+
+.tabs-vertical .tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  margin-bottom: 0;
+  margin-right: -2px;
+  text-align: left;
+}
+
+.tabs-vertical .tab.active {
+  border-right-color: var(--turbo-brand-primary);
+}

package/packages/css/dist/components/tags.css

@@ -0,0 +1,121 @@
+/* ==========================================================================
+   Turbo Themes - Tags / Badges
+   ========================================================================== */
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  padding: var(--space-xs) var(--space-md);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--turbo-text-primary);
+  background: var(--turbo-bg-overlay);
+  border-radius: var(--radius-full);
+  transition: all var(--transition-fast);
+}
+
+/* Color variants */
+.tag-primary {
+  color: var(--turbo-text-inverse);
+  background: var(--turbo-brand-primary);
+}
+
+.tag-secondary {
+  color: var(--turbo-text-primary);
+  background: var(--turbo-bg-surface);
+  border: 1px solid var(--turbo-border-default);
+}
+
+.tag-success {
+  color: var(--turbo-bg-base);
+  background: var(--turbo-state-success);
+}
+
+.tag-warning {
+  color: var(--turbo-bg-base);
+  background: var(--turbo-state-warning);
+}
+
+.tag-danger {
+  color: var(--turbo-bg-base);
+  background: var(--turbo-state-danger);
+}
+
+.tag-info {
+  color: var(--turbo-bg-base);
+  background: var(--turbo-state-info);
+}
+
+/* Outline variants */
+.tag-outline {
+  background: transparent;
+  border: 1px solid var(--turbo-border-default);
+  color: var(--turbo-text-primary);
+}
+
+.tag-outline-primary {
+  background: transparent;
+  border: 1px solid var(--turbo-brand-primary);
+  color: var(--turbo-brand-primary);
+}
+
+.tag-outline-success {
+  background: transparent;
+  border: 1px solid var(--turbo-state-success);
+  color: var(--turbo-state-success);
+}
+
+.tag-outline-warning {
+  background: transparent;
+  border: 1px solid var(--turbo-state-warning);
+  color: var(--turbo-state-warning);
+}
+
+.tag-outline-danger {
+  background: transparent;
+  border: 1px solid var(--turbo-state-danger);
+  color: var(--turbo-state-danger);
+}
+
+.tag-outline-info {
+  background: transparent;
+  border: 1px solid var(--turbo-state-info);
+  color: var(--turbo-state-info);
+}
+
+/* Size variants */
+.tag-sm {
+  padding: calc(var(--space-xs) / 2) var(--space-sm);
+  font-size: 0.75rem;
+}
+
+.tag-lg {
+  padding: var(--space-sm) var(--space-lg);
+  font-size: 0.9375rem;
+}
+
+/* Tag group */
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-sm);
+}
+
+/* Removable tag */
+.tag-remove {
+  margin-left: var(--space-xs);
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity var(--transition-fast);
+  border-radius: var(--radius-sm);
+}
+
+.tag-remove:hover {
+  opacity: 1;
+}
+
+.tag-remove:focus-visible {
+  outline: 2px solid var(--turbo-brand-primary);
+  outline-offset: 1px;
+  opacity: 1;
+}

package/packages/css/dist/generator.d.ts

@@ -0,0 +1,60 @@
+/**
+ * CSS Custom Properties generator for Turbo Themes.
+ *
+ * Generates framework-agnostic CSS variables from theme tokens.
+ * This is the primary output format for platform-agnostic theming.
+ *
+ * @packageDocumentation
+ */
+import type { ThemeFlavor, ThemeTokens } from '@lgtm-hq/turbo-themes-core';
+import { CSS_VAR_PREFIX } from '@lgtm-hq/turbo-themes-core/css/mappings';
+/**
+ * Generates CSS custom property declarations from theme tokens.
+ * Uses centralized mapping configuration for consistency.
+ *
+ * @param tokens - The theme tokens to convert
+ * @returns Array of CSS variable declaration lines
+ *
+ * @example
+ * ```ts
+ * const lines = generateCssVarsFromTokens(theme.tokens);
+ * // ['  --turbo-bg-base: #1e1e2e;', '  --turbo-bg-surface: #313244;', ...]
+ * ```
+ */
+export declare function generateCssVarsFromTokens(tokens: ThemeTokens): string[];
+/**
+ * Generates a complete CSS file for a single theme flavor.
+ *
+ * @param flavor - The theme flavor to generate CSS for
+ * @returns Complete CSS string with data-theme selector
+ *
+ * @example
+ * ```ts
+ * const css = generateThemeCss(catppuccinMocha);
+ * // [data-theme="catppuccin-mocha"] { --turbo-bg-base: #1e1e2e; ... }
+ * ```
+ */
+export declare function generateThemeCss(flavor: ThemeFlavor): string;
+/**
+ * Generates the core CSS file with default variable values.
+ *
+ * @param defaultFlavor - The theme flavor to use as defaults
+ * @returns CSS string with :root selector
+ *
+ * @example
+ * ```ts
+ * const coreCss = generateCoreCss(catppuccinMocha);
+ * // :root { --turbo-bg-base: #1e1e2e; ... }
+ * ```
+ */
+export declare function generateCoreCss(defaultFlavor: ThemeFlavor): string;
+/**
+ * Generates a combined CSS file with all themes.
+ *
+ * @param flavors - Array of all theme flavors
+ * @param defaultFlavorId - ID of the theme to use as :root defaults
+ * @returns Complete CSS string with core and all theme selectors
+ */
+export declare function generateCombinedCss(flavors: readonly ThemeFlavor[], defaultFlavorId?: string): string;
+export { CSS_VAR_PREFIX };
+//# sourceMappingURL=generator.d.ts.map

package/packages/css/dist/generator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"generator.d.ts","sourceRoot":"","sources":["../src/generator.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH,OAAO,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAI3E,OAAO,EAEL,cAAc,EAEf,MAAM,yCAAyC,CAAC;AA0DjD;;;;;;;;;;;;GAYG;AACH,wBAAgB,yBAAyB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,EAAE,CAgGvE;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,gBAAgB,CAAC,MAAM,EAAE,WAAW,GAAG,MAAM,CAe5D;AA2CD;;;;;;;;;;;GAWG;AACH,wBAAgB,eAAe,CAAC,aAAa,EAAE,WAAW,GAAG,MAAM,CAGlE;AAED;;;;;;GAMG;AACH,wBAAgB,mBAAmB,CACjC,OAAO,EAAE,SAAS,WAAW,EAAE,EAC/B,eAAe,GAAE,MAA2B,GAC3C,MAAM,CAUR;AAGD,OAAO,EAAE,cAAc,EAAE,CAAC"}

package/packages/css/dist/generator.js

@@ -0,0 +1,267 @@
+// SPDX-License-Identifier: MIT
+/**
+ * CSS Custom Properties generator for Turbo Themes.
+ *
+ * Generates framework-agnostic CSS variables from theme tokens.
+ * This is the primary output format for platform-agnostic theming.
+ *
+ * @packageDocumentation
+ */
+import { generateSyntaxVarsFromTokens } from './syntax.js';
+// Import centralized mappings from config
+import { CORE_MAPPINGS, CSS_VAR_PREFIX, OPTIONAL_GROUPS, } from '@lgtm-hq/turbo-themes-core/css/mappings';
+/**
+ * Resolves a dot-separated path to a value in the tokens object.
+ *
+ * @param tokens - The tokens object to traverse
+ * @param path - Dot-separated path (e.g., 'background.base')
+ * @returns The resolved value or undefined if path doesn't exist
+ */
+function resolveTokenPath(tokens, path) {
+    const parts = path.split('.');
+    let current = tokens;
+    for (const part of parts) {
+        if (current === null || current === undefined || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[part];
+    }
+    return typeof current === 'string' ? current : undefined;
+}
+/**
+ * Trusted font provider domains for web font imports.
+ * Only HTTPS URLs from these domains are allowed to prevent CSS injection.
+ */
+const TRUSTED_FONT_DOMAINS = [
+    'fonts.googleapis.com',
+    'fonts.gstatic.com',
+    'use.typekit.net',
+    'fonts.bunny.net',
+    'rsms.me', // Inter font
+    'fonts.cdnfonts.com',
+    'github.githubassets.com', // GitHub themes
+];
+/**
+ * Validates that a web font URL is safe to include in CSS.
+ * Only allows HTTPS URLs from trusted font provider domains.
+ *
+ * @param url - The URL to validate
+ * @returns true if the URL is from a trusted font provider
+ */
+function isValidFontUrl(url) {
+    try {
+        const parsed = new URL(url);
+        if (parsed.protocol !== 'https:') {
+            return false;
+        }
+        return TRUSTED_FONT_DOMAINS.some((domain) => parsed.hostname === domain || parsed.hostname.endsWith(`.${domain}`));
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Generates CSS custom property declarations from theme tokens.
+ * Uses centralized mapping configuration for consistency.
+ *
+ * @param tokens - The theme tokens to convert
+ * @returns Array of CSS variable declaration lines
+ *
+ * @example
+ * ```ts
+ * const lines = generateCssVarsFromTokens(theme.tokens);
+ * // ['  --turbo-bg-base: #1e1e2e;', '  --turbo-bg-surface: #313244;', ...]
+ * ```
+ */
+export function generateCssVarsFromTokens(tokens) {
+    const lines = [];
+    const prefix = CSS_VAR_PREFIX;
+    const add = (name, value) => {
+        lines.push(`  --${prefix}-${name}: ${value};`);
+    };
+    // Apply core mappings from centralized config
+    for (const mapping of CORE_MAPPINGS) {
+        // Extract variable name from cssVar (remove prefix if present)
+        const varName = mapping.cssVar.startsWith('--')
+            ? mapping.cssVar.slice(2) // Remove leading --
+            : mapping.cssVar;
+        let value = resolveTokenPath(tokens, mapping.tokenPath);
+        // Try fallback if primary path didn't resolve
+        if (value === undefined && mapping.fallbackPath) {
+            value = resolveTokenPath(tokens, mapping.fallbackPath);
+        }
+        if (value !== undefined) {
+            add(varName, value);
+        }
+    }
+    // Optional token groups
+    const optionalGroups = OPTIONAL_GROUPS;
+    // Spacing tokens (if available)
+    if (tokens.spacing && optionalGroups.spacing) {
+        const { properties } = optionalGroups.spacing;
+        for (const prop of properties) {
+            const value = tokens.spacing[prop];
+            if (value) {
+                add(`${optionalGroups.spacing.prefix}-${prop}`, value);
+            }
+        }
+    }
+    // Elevation tokens (if available)
+    if (tokens.elevation && optionalGroups.elevation) {
+        const { properties } = optionalGroups.elevation;
+        for (const prop of properties) {
+            const value = tokens.elevation[prop];
+            if (value) {
+                add(`${optionalGroups.elevation.prefix}-${prop}`, value);
+            }
+        }
+    }
+    // Animation tokens (if available) - uses custom mappings
+    if (tokens.animation && optionalGroups.animation?.mappings) {
+        for (const mapping of optionalGroups.animation.mappings) {
+            const value = resolveTokenPath(tokens, mapping.tokenPath);
+            if (value) {
+                add(`${optionalGroups.animation.prefix}-${mapping.cssVar}`, value);
+            }
+        }
+    }
+    // Opacity tokens (if available)
+    if (tokens.opacity && optionalGroups.opacity) {
+        const { properties } = optionalGroups.opacity;
+        for (const prop of properties) {
+            const value = tokens.opacity[prop];
+            if (value !== undefined) {
+                add(`${optionalGroups.opacity.prefix}-${prop}`, String(value));
+            }
+        }
+    }
+    // Component tokens (if available)
+    if (tokens.components) {
+        const { components } = tokens;
+        if (components.card) {
+            if (components.card.bg)
+                add('card-bg', components.card.bg);
+            if (components.card.border)
+                add('card-border', components.card.border);
+        }
+        if (components.modal) {
+            if (components.modal.bg)
+                add('modal-bg', components.modal.bg);
+            if (components.modal.cardBg)
+                add('modal-card-bg', components.modal.cardBg);
+        }
+        if (components.dropdown) {
+            if (components.dropdown.bg)
+                add('dropdown-bg', components.dropdown.bg);
+            if (components.dropdown.border)
+                add('dropdown-border', components.dropdown.border);
+            if (components.dropdown.itemHoverBg)
+                add('dropdown-item-hover', components.dropdown.itemHoverBg);
+        }
+    }
+    // Syntax highlighting tokens
+    const syntaxLines = generateSyntaxVarsFromTokens(tokens);
+    lines.push(...syntaxLines);
+    return lines;
+}
+/**
+ * Generates a complete CSS file for a single theme flavor.
+ *
+ * @param flavor - The theme flavor to generate CSS for
+ * @returns Complete CSS string with data-theme selector
+ *
+ * @example
+ * ```ts
+ * const css = generateThemeCss(catppuccinMocha);
+ * // [data-theme="catppuccin-mocha"] { --turbo-bg-base: #1e1e2e; ... }
+ * ```
+ */
+export function generateThemeCss(flavor) {
+    const vars = generateCssVarsFromTokens(flavor.tokens);
+    const webFonts = flavor.tokens.typography?.webFonts ?? [];
+    const fontImports = webFonts
+        .filter(isValidFontUrl)
+        .map((url) => `@import url('${url}');`)
+        .join('\n');
+    const colorScheme = flavor.appearance === 'dark' ? 'dark' : 'light';
+    const cssContent = `[data-theme="${flavor.id}"] {
+${vars.join('\n')}
+  color-scheme: ${colorScheme};
+}`;
+    return fontImports ? `${fontImports}\n\n${cssContent}\n` : `${cssContent}\n`;
+}
+/**
+ * Design system tokens that are theme-agnostic.
+ * These provide spacing, shadows, radius, and transitions for components.
+ */
+const DESIGN_SYSTEM_TOKENS = `
+  /* Spacing */
+  --space-xs: 0.25rem;
+  --space-sm: 0.5rem;
+  --space-md: 1rem;
+  --space-lg: 1.5rem;
+  --space-xl: 2rem;
+  --space-2xl: 3rem;
+  --space-3xl: 4rem;
+  --space-4xl: 6rem;
+
+  /* Border Radius */
+  --radius-sm: 0.5rem;
+  --radius-md: 0.75rem;
+  --radius-lg: 1rem;
+  --radius-xl: 1.5rem;
+  --radius-2xl: 2rem;
+  --radius-full: 9999px;
+
+  /* Shadows */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.05);
+  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
+  --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15), 0 10px 10px rgba(0, 0, 0, 0.04);
+  --shadow-glow: 0 0 30px color-mix(in srgb, var(--turbo-brand-primary) 30%, transparent);
+  --shadow-glow-sm: 0 0 15px color-mix(in srgb, var(--turbo-brand-primary) 20%, transparent);
+
+  /* Transitions */
+  --transition-fast: 120ms ease-out;
+  --transition-normal: 200ms ease-out;
+  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+  /* Gradients (theme-aware) */
+  --gradient-primary: linear-gradient(135deg, var(--turbo-brand-primary), var(--turbo-state-info));
+  --gradient-surface: linear-gradient(180deg, var(--turbo-bg-surface), var(--turbo-bg-base));
+`;
+/**
+ * Generates the core CSS file with default variable values.
+ *
+ * @param defaultFlavor - The theme flavor to use as defaults
+ * @returns CSS string with :root selector
+ *
+ * @example
+ * ```ts
+ * const coreCss = generateCoreCss(catppuccinMocha);
+ * // :root { --turbo-bg-base: #1e1e2e; ... }
+ * ```
+ */
+export function generateCoreCss(defaultFlavor) {
+    const vars = generateCssVarsFromTokens(defaultFlavor.tokens);
+    return `:root {\n${vars.join('\n')}\n${DESIGN_SYSTEM_TOKENS}}\n`;
+}
+/**
+ * Generates a combined CSS file with all themes.
+ *
+ * @param flavors - Array of all theme flavors
+ * @param defaultFlavorId - ID of the theme to use as :root defaults
+ * @returns Complete CSS string with core and all theme selectors
+ */
+export function generateCombinedCss(flavors, defaultFlavorId = 'catppuccin-mocha') {
+    const defaultFlavor = flavors.find((f) => f.id === defaultFlavorId) || flavors[0];
+    if (!defaultFlavor) {
+        throw new Error('No flavors provided');
+    }
+    const coreCss = generateCoreCss(defaultFlavor);
+    const themeCss = flavors.map((flavor) => generateThemeCss(flavor)).join('\n');
+    return `/* Turbo Themes - Pure CSS Custom Properties */\n/* Generated automatically - do not edit */\n\n${coreCss}\n${themeCss}`;
+}
+// Re-export the prefix for external use
+export { CSS_VAR_PREFIX };
+//# sourceMappingURL=generator.js.map