/* * theme-kaleb-one — All Palettes * Material Design 3 theme tokens for kaleb.one * * Usage: Set data-theme on to one of: * "obsidian" | "midnight-ocean" | "volcanic" | "frost" */ /* === Typography === */ :root { --md-sys-font-family-display: 'Inter', 'Roboto', sans-serif; --md-sys-font-family-body: 'Inter', 'Roboto', sans-serif; --md-sys-font-family-mono: 'JetBrains Mono', 'Fira Code', monospace; --md-sys-typescale-display-large-size: 57px; --md-sys-typescale-display-large-weight: 400; --md-sys-typescale-display-large-tracking: -0.25px; --md-sys-typescale-display-large-line-height: 64px; --md-sys-typescale-display-medium-size: 45px; --md-sys-typescale-display-medium-weight: 400; --md-sys-typescale-display-medium-tracking: 0px; --md-sys-typescale-display-medium-line-height: 52px; --md-sys-typescale-display-small-size: 36px; --md-sys-typescale-display-small-weight: 400; --md-sys-typescale-display-small-tracking: 0px; --md-sys-typescale-display-small-line-height: 44px; --md-sys-typescale-headline-large-size: 32px; --md-sys-typescale-headline-large-weight: 400; --md-sys-typescale-headline-large-tracking: 0px; --md-sys-typescale-headline-large-line-height: 40px; --md-sys-typescale-headline-medium-size: 28px; --md-sys-typescale-headline-medium-weight: 400; --md-sys-typescale-headline-medium-tracking: 0px; --md-sys-typescale-headline-medium-line-height: 36px; --md-sys-typescale-headline-small-size: 24px; --md-sys-typescale-headline-small-weight: 400; --md-sys-typescale-headline-small-tracking: 0px; --md-sys-typescale-headline-small-line-height: 32px; --md-sys-typescale-title-large-size: 22px; --md-sys-typescale-title-large-weight: 500; --md-sys-typescale-title-large-tracking: 0px; --md-sys-typescale-title-large-line-height: 28px; --md-sys-typescale-title-medium-size: 16px; --md-sys-typescale-title-medium-weight: 500; --md-sys-typescale-title-medium-tracking: 0.15px; --md-sys-typescale-title-medium-line-height: 24px; --md-sys-typescale-title-small-size: 14px; --md-sys-typescale-title-small-weight: 500; --md-sys-typescale-title-small-tracking: 0.1px; --md-sys-typescale-title-small-line-height: 20px; --md-sys-typescale-body-large-size: 16px; --md-sys-typescale-body-large-weight: 400; --md-sys-typescale-body-large-tracking: 0.5px; --md-sys-typescale-body-large-line-height: 24px; --md-sys-typescale-body-medium-size: 14px; --md-sys-typescale-body-medium-weight: 400; --md-sys-typescale-body-medium-tracking: 0.25px; --md-sys-typescale-body-medium-line-height: 20px; --md-sys-typescale-body-small-size: 12px; --md-sys-typescale-body-small-weight: 400; --md-sys-typescale-body-small-tracking: 0.4px; --md-sys-typescale-body-small-line-height: 16px; --md-sys-typescale-label-large-size: 14px; --md-sys-typescale-label-large-weight: 500; --md-sys-typescale-label-large-tracking: 0.1px; --md-sys-typescale-label-large-line-height: 20px; --md-sys-typescale-label-medium-size: 12px; --md-sys-typescale-label-medium-weight: 500; --md-sys-typescale-label-medium-tracking: 0.5px; --md-sys-typescale-label-medium-line-height: 16px; --md-sys-typescale-label-small-size: 11px; --md-sys-typescale-label-small-weight: 500; --md-sys-typescale-label-small-tracking: 0.5px; --md-sys-typescale-label-small-line-height: 16px; } /* === Spacing === */ :root { --md-sys-spacing-0: 0px; --md-sys-spacing-1: 4px; --md-sys-spacing-2: 8px; --md-sys-spacing-3: 12px; --md-sys-spacing-4: 16px; --md-sys-spacing-5: 20px; --md-sys-spacing-6: 24px; --md-sys-spacing-7: 28px; --md-sys-spacing-8: 32px; --md-sys-spacing-9: 36px; --md-sys-spacing-10: 40px; --md-sys-spacing-11: 44px; --md-sys-spacing-12: 48px; --md-sys-spacing-16: 64px; } /* === Elevation === */ :root { --md-sys-elevation-0: none; --md-sys-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14); --md-sys-elevation-2: 0 2px 6px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14); --md-sys-elevation-3: 0 4px 12px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14); --md-sys-elevation-4: 0 6px 18px rgba(0,0,0,0.12), 0 8px 10px rgba(0,0,0,0.14); --md-sys-elevation-5: 0 10px 24px rgba(0,0,0,0.12), 0 12px 14px rgba(0,0,0,0.14); --darkOverlays: [object Object]; } /* === Shape === */ :root { --md-sys-shape-corner-none: 0px; --md-sys-shape-corner-extra-small: 4px; --md-sys-shape-corner-small: 8px; --md-sys-shape-corner-medium: 12px; --md-sys-shape-corner-large: 16px; --md-sys-shape-corner-extra-large: 28px; --md-sys-shape-corner-full: 9999px; } /* === Motion — Duration === */ :root { --md-sys-motion-duration-short1: 50ms; --md-sys-motion-duration-short2: 100ms; --md-sys-motion-duration-short3: 150ms; --md-sys-motion-duration-short4: 200ms; --md-sys-motion-duration-medium1: 250ms; --md-sys-motion-duration-medium2: 300ms; --md-sys-motion-duration-medium3: 350ms; --md-sys-motion-duration-medium4: 400ms; --md-sys-motion-duration-long1: 450ms; --md-sys-motion-duration-long2: 500ms; --md-sys-motion-duration-extra-long1: 550ms; --md-sys-motion-duration-extra-long2: 600ms; --md-sys-motion-duration-extra-long3: 650ms; --md-sys-motion-duration-extra-long4: 700ms; } /* === Motion — Easing === */ :root { --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-standard-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-standard-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1); --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --md-sys-motion-easing-legacy: cubic-bezier(0.4, 0, 0.2, 1); --md-sys-motion-easing-linear: linear; } /* * Theme: Obsidian * Dark slate, electric accent — sharp, modern, minimal * Generated from source color: #7B8FA8 */ :root[data-theme="obsidian"] { --md-sys-color-primary: #BACFE5; --md-sys-color-on-primary: #2C3E50; --md-sys-color-primary-container: #3D5167; --md-sys-color-on-primary-container: #D6E5F5; --md-sys-color-secondary: #C6CBD9; --md-sys-color-on-secondary: #31343C; --md-sys-color-secondary-container: #474B55; --md-sys-color-on-secondary-container: #E3E6EF; --md-sys-color-tertiary: #CDC6E2; --md-sys-color-on-tertiary: #342F45; --md-sys-color-tertiary-container: #4B465C; --md-sys-color-on-tertiary-container: #E9E2FF; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #11151C; --md-sys-color-on-surface: #DCE1E9; --md-sys-color-surface-variant: #454D56; --md-sys-color-on-surface-variant: #C5CDD9; --md-sys-color-surface-container-lowest: #0D1117; --md-sys-color-surface-container-low: #1A1F26; --md-sys-color-surface-container: #1E242C; --md-sys-color-surface-container-high: #282E36; --md-sys-color-surface-container-highest: #31383F; --md-sys-color-outline: #8F97A3; --md-sys-color-outline-variant: #454D56; --md-sys-color-inverse-surface: #DCE1E9; --md-sys-color-inverse-on-surface: #1A1F26; --md-sys-color-inverse-primary: #506680; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; --md-sys-color-elevation: transparent; } :root[data-theme="obsidian"] .md-elevation-1 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 3%, var(--md-sys-color-surface)); } :root[data-theme="obsidian"] .md-elevation-2 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 6%, var(--md-sys-color-surface)); } :root[data-theme="obsidian"] .md-elevation-3 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface)); } :root[data-theme="obsidian"] .md-elevation-4 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface)); } :root[data-theme="obsidian"] .md-elevation-5 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface)); } /* * Theme: Midnight Ocean * Deep navy, teal accent — calm authority * Generated from source color: #4A90D9 */ :root[data-theme="midnight-ocean"] { --md-sys-color-primary: #A1C2F2; --md-sys-color-on-primary: #1B2D44; --md-sys-color-primary-container: #2A4264; --md-sys-color-on-primary-container: #C4DDFF; --md-sys-color-secondary: #BECAD9; --md-sys-color-on-secondary: #2A3340; --md-sys-color-secondary-container: #404958; --md-sys-color-on-secondary-container: #DAE5F0; --md-sys-color-tertiary: #53D8D6; --md-sys-color-on-tertiary: #003736; --md-sys-color-tertiary-container: #004F4E; --md-sys-color-on-tertiary-container: #7CF5F2; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #10151E; --md-sys-color-on-surface: #DDE5EE; --md-sys-color-surface-variant: #424B58; --md-sys-color-on-surface-variant: #C1CAD9; --md-sys-color-surface-container-lowest: #0C1118; --md-sys-color-surface-container-low: #171E28; --md-sys-color-surface-container: #1C232E; --md-sys-color-surface-container-high: #262D38; --md-sys-color-surface-container-highest: #303844; --md-sys-color-outline: #8C95A4; --md-sys-color-outline-variant: #424B58; --md-sys-color-inverse-surface: #DDE5EE; --md-sys-color-inverse-on-surface: #171E28; --md-sys-color-inverse-primary: #3D5986; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; --md-sys-color-elevation: transparent; } :root[data-theme="midnight-ocean"] .md-elevation-1 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 3%, var(--md-sys-color-surface)); } :root[data-theme="midnight-ocean"] .md-elevation-2 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 6%, var(--md-sys-color-surface)); } :root[data-theme="midnight-ocean"] .md-elevation-3 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface)); } :root[data-theme="midnight-ocean"] .md-elevation-4 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface)); } :root[data-theme="midnight-ocean"] .md-elevation-5 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface)); } /* * Theme: Volcanic * Dark warm gray, amber/orange accent — warm, grounded * Generated from source color: #D4853A */ :root[data-theme="volcanic"] { --md-sys-color-primary: #E4BB8E; --md-sys-color-on-primary: #442C14; --md-sys-color-primary-container: #5C4021; --md-sys-color-on-primary-container: #FFD7AD; --md-sys-color-secondary: #CAC4BD; --md-sys-color-on-secondary: #322F2A; --md-sys-color-secondary-container: #494540; --md-sys-color-on-secondary-container: #E7E0D9; --md-sys-color-tertiary: #C6C8CA; --md-sys-color-on-tertiary: #2F3132; --md-sys-color-tertiary-container: #464849; --md-sys-color-on-tertiary-container: #E2E4E6; --md-sys-color-error: #FFB4AB; --md-sys-color-on-error: #690005; --md-sys-color-error-container: #93000A; --md-sys-color-on-error-container: #FFDAD6; --md-sys-color-surface: #15130F; --md-sys-color-on-surface: #E5E1DA; --md-sys-color-surface-variant: #48443E; --md-sys-color-on-surface-variant: #C7C4BD; --md-sys-color-surface-container-lowest: #110F0D; --md-sys-color-surface-container-low: #1C1A16; --md-sys-color-surface-container: #201E1A; --md-sys-color-surface-container-high: #2A2824; --md-sys-color-surface-container-highest: #34322D; --md-sys-color-outline: #928F88; --md-sys-color-outline-variant: #48443E; --md-sys-color-inverse-surface: #E5E1DA; --md-sys-color-inverse-on-surface: #1C1A16; --md-sys-color-inverse-primary: #76562E; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; --md-sys-color-elevation: transparent; } :root[data-theme="volcanic"] .md-elevation-1 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 3%, var(--md-sys-color-surface)); } :root[data-theme="volcanic"] .md-elevation-2 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 6%, var(--md-sys-color-surface)); } :root[data-theme="volcanic"] .md-elevation-3 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface)); } :root[data-theme="volcanic"] .md-elevation-4 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface)); } :root[data-theme="volcanic"] .md-elevation-5 { background-color: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface)); } /* * Theme: Frost * Light theme — cool gray, blue accent — clean, professional * Generated from source color: #3B82F6 */ :root[data-theme="frost"] { --md-sys-color-primary: #0064C2; --md-sys-color-on-primary: #FFFFFF; --md-sys-color-primary-container: #D3E3FF; --md-sys-color-on-primary-container: #001B3D; --md-sys-color-secondary: #5A5F71; --md-sys-color-on-secondary: #FFFFFF; --md-sys-color-secondary-container: #DDE4FB; --md-sys-color-on-secondary-container: #171C2B; --md-sys-color-tertiary: #605E78; --md-sys-color-on-tertiary: #FFFFFF; --md-sys-color-tertiary-container: #E7E0FF; --md-sys-color-on-tertiary-container: #1C1B2E; --md-sys-color-error: #BA1A1A; --md-sys-color-on-error: #FFFFFF; --md-sys-color-error-container: #FFDAD6; --md-sys-color-on-error-container: #410002; --md-sys-color-surface: #F8F8FF; --md-sys-color-on-surface: #1B1B1F; --md-sys-color-surface-variant: #E2E2EB; --md-sys-color-on-surface-variant: #464752; --md-sys-color-surface-container-lowest: #FFFFFF; --md-sys-color-surface-container-low: #F3F3FB; --md-sys-color-surface-container: #EDEDF5; --md-sys-color-surface-container-high: #E8E8F2; --md-sys-color-surface-container-highest: #DBDBE5; --md-sys-color-outline: #767780; --md-sys-color-outline-variant: #C6C6CF; --md-sys-color-inverse-surface: #2E2E33; --md-sys-color-inverse-on-surface: #F0F0F8; --md-sys-color-inverse-primary: #A8C7FF; --md-sys-color-scrim: #000000; --md-sys-color-shadow: #000000; }