/* HOT theme for WebAwesome 1. First import WebAwesome base styles @import url("https://early.webawesome.com/webawesome@3.2.1/dist/styles/webawesome.css"); 2. Then import our HOT theme variables @import "./hot.css"; @import "./hot-font-face.css"; 3. Then HOT WebAwesome overrides @import "./hot-wa.css"; */ /* ─── Palette layer ───────────────────────────────────────────────────────── Maps HOT primitive colors onto WA's named palette slots. WA numbers 05 (darkest) → 95 (lightest); HOT numbers 950 (darkest) → 50 (lightest). These are ONLY color primitives - no typography or spacing here, because WA declares those tokens in @layer wa-theme which has higher priority than @layer wa-color-palette. Typography/spacing overrides live in wa-theme below. ─────────────────────────────────────────────────────────────────────────── */ @layer wa-color-palette { :where(:root), .wa-palette-hotosm { /* Red */ --wa-color-red-95: var(--hot-color-red-50); --wa-color-red-90: var(--hot-color-red-100); --wa-color-red-80: var(--hot-color-red-200); --wa-color-red-70: var(--hot-color-red-300); --wa-color-red-60: var(--hot-color-red-400); --wa-color-red-50: var(--hot-color-red-500); --wa-color-red-40: var(--hot-color-red-600); --wa-color-red-30: var(--hot-color-red-700); --wa-color-red-20: var(--hot-color-red-800); --wa-color-red-10: var(--hot-color-red-900); --wa-color-red-05: var(--hot-color-red-950); --wa-color-red: var(--wa-color-red-50); --wa-color-red-key: 50; /* Orange → HOT rose (persian plum) */ --wa-color-orange-95: var(--hot-color-rose-50); --wa-color-orange-90: var(--hot-color-rose-100); --wa-color-orange-80: var(--hot-color-rose-200); --wa-color-orange-70: var(--hot-color-rose-300); --wa-color-orange-60: var(--hot-color-rose-400); --wa-color-orange-50: var(--hot-color-rose-500); --wa-color-orange-40: var(--hot-color-rose-600); --wa-color-orange-30: var(--hot-color-rose-700); --wa-color-orange-20: var(--hot-color-rose-800); --wa-color-orange-10: var(--hot-color-rose-900); --wa-color-orange-05: var(--hot-color-rose-950); --wa-color-orange: var(--wa-color-orange-60); --wa-color-orange-key: 60; /* Yellow */ --wa-color-yellow-95: var(--hot-color-yellow-50); --wa-color-yellow-90: var(--hot-color-yellow-100); --wa-color-yellow-80: var(--hot-color-yellow-200); --wa-color-yellow-70: var(--hot-color-yellow-300); --wa-color-yellow-60: var(--hot-color-yellow-400); --wa-color-yellow-50: var(--hot-color-yellow-500); --wa-color-yellow-40: var(--hot-color-yellow-600); --wa-color-yellow-30: var(--hot-color-yellow-700); --wa-color-yellow-20: var(--hot-color-yellow-800); --wa-color-yellow-10: var(--hot-color-yellow-900); --wa-color-yellow-05: var(--hot-color-yellow-950); --wa-color-yellow: var(--wa-color-yellow-80); --wa-color-yellow-key: 80; /* Cyan */ --wa-color-cyan-95: var(--hot-color-cyan-50); --wa-color-cyan-90: var(--hot-color-cyan-100); --wa-color-cyan-80: var(--hot-color-cyan-200); --wa-color-cyan-70: var(--hot-color-cyan-300); --wa-color-cyan-60: var(--hot-color-cyan-400); --wa-color-cyan-50: var(--hot-color-cyan-500); --wa-color-cyan-40: var(--hot-color-cyan-600); --wa-color-cyan-30: var(--hot-color-cyan-700); --wa-color-cyan-20: var(--hot-color-cyan-800); --wa-color-cyan-10: var(--hot-color-cyan-900); --wa-color-cyan-05: var(--hot-color-cyan-950); --wa-color-cyan: var(--wa-color-cyan-70); --wa-color-cyan-key: 70; /* Blue (space cadet) */ --wa-color-blue-95: var(--hot-color-blue-50); --wa-color-blue-90: var(--hot-color-blue-100); --wa-color-blue-80: var(--hot-color-blue-200); --wa-color-blue-70: var(--hot-color-blue-300); --wa-color-blue-60: var(--hot-color-blue-400); --wa-color-blue-50: var(--hot-color-blue-500); --wa-color-blue-40: var(--hot-color-blue-600); --wa-color-blue-30: var(--hot-color-blue-700); --wa-color-blue-20: var(--hot-color-blue-800); --wa-color-blue-10: var(--hot-color-blue-900); --wa-color-blue-05: var(--hot-color-blue-950); --wa-color-blue: var(--wa-color-blue-50); --wa-color-blue-key: 50; /* Gray */ --wa-color-gray-95: var(--hot-color-gray-50); --wa-color-gray-90: var(--hot-color-gray-100); --wa-color-gray-80: var(--hot-color-gray-200); --wa-color-gray-70: var(--hot-color-gray-300); --wa-color-gray-60: var(--hot-color-gray-400); --wa-color-gray-50: var(--hot-color-gray-500); --wa-color-gray-40: var(--hot-color-gray-600); --wa-color-gray-30: var(--hot-color-gray-700); --wa-color-gray-20: var(--hot-color-gray-800); --wa-color-gray-10: var(--hot-color-gray-900); --wa-color-gray-05: var(--hot-color-gray-950); --wa-color-gray: var(--wa-color-gray-40); --wa-color-gray-key: 40; /* Brand → HOT primary (red) */ --wa-color-brand-95: var(--hot-color-primary-50); --wa-color-brand-90: var(--hot-color-primary-100); --wa-color-brand-80: var(--hot-color-primary-200); --wa-color-brand-70: var(--hot-color-primary-300); --wa-color-brand-60: var(--hot-color-primary-400); --wa-color-brand-50: var(--hot-color-primary-500); --wa-color-brand-40: var(--hot-color-primary-600); --wa-color-brand-30: var(--hot-color-primary-700); --wa-color-brand-20: var(--hot-color-primary-800); --wa-color-brand-10: var(--hot-color-primary-900); --wa-color-brand-05: var(--hot-color-primary-950); --wa-color-brand: var(--wa-color-brand-50); --wa-color-brand-key: 50; /* Neutral → HOT gray */ --wa-color-neutral-95: var(--hot-color-neutral-50); --wa-color-neutral-90: var(--hot-color-neutral-100); --wa-color-neutral-80: var(--hot-color-neutral-200); --wa-color-neutral-70: var(--hot-color-neutral-300); --wa-color-neutral-60: var(--hot-color-neutral-400); --wa-color-neutral-50: var(--hot-color-neutral-500); --wa-color-neutral-40: var(--hot-color-neutral-600); --wa-color-neutral-30: var(--hot-color-neutral-700); --wa-color-neutral-20: var(--hot-color-neutral-800); --wa-color-neutral-10: var(--hot-color-neutral-900); --wa-color-neutral-05: var(--hot-color-neutral-950); --wa-color-neutral: var(--wa-color-neutral-40); --wa-color-neutral-key: 40; /* Success → HOT cyan */ --wa-color-success-95: var(--hot-color-success-50); --wa-color-success-90: var(--hot-color-success-100); --wa-color-success-80: var(--hot-color-success-200); --wa-color-success-70: var(--hot-color-success-300); --wa-color-success-60: var(--hot-color-success-400); --wa-color-success-50: var(--hot-color-success-500); --wa-color-success-40: var(--hot-color-success-600); --wa-color-success-30: var(--hot-color-success-700); --wa-color-success-20: var(--hot-color-success-800); --wa-color-success-10: var(--hot-color-success-900); --wa-color-success-05: var(--hot-color-success-950); --wa-color-success: var(--wa-color-success-60); --wa-color-success-key: 60; /* Warning → HOT yellow */ --wa-color-warning-95: var(--hot-color-warning-50); --wa-color-warning-90: var(--hot-color-warning-100); --wa-color-warning-80: var(--hot-color-warning-200); --wa-color-warning-70: var(--hot-color-warning-300); --wa-color-warning-60: var(--hot-color-warning-400); --wa-color-warning-50: var(--hot-color-warning-500); --wa-color-warning-40: var(--hot-color-warning-600); --wa-color-warning-30: var(--hot-color-warning-700); --wa-color-warning-20: var(--hot-color-warning-800); --wa-color-warning-10: var(--hot-color-warning-900); --wa-color-warning-05: var(--hot-color-warning-950); --wa-color-warning: var(--wa-color-warning-80); --wa-color-warning-key: 80; /* Danger → HOT red (same as primary) */ --wa-color-danger-95: var(--hot-color-danger-50); --wa-color-danger-90: var(--hot-color-danger-100); --wa-color-danger-80: var(--hot-color-danger-200); --wa-color-danger-70: var(--hot-color-danger-300); --wa-color-danger-60: var(--hot-color-danger-400); --wa-color-danger-50: var(--hot-color-danger-500); --wa-color-danger-40: var(--hot-color-danger-600); --wa-color-danger-30: var(--hot-color-danger-700); --wa-color-danger-20: var(--hot-color-danger-800); --wa-color-danger-10: var(--hot-color-danger-900); --wa-color-danger-05: var(--hot-color-danger-950); --wa-color-danger: var(--wa-color-danger-50); --wa-color-danger-key: 50; /* Unchanged: green, indigo, purple, pink See https://early.webawesome.com/webawesome@3.2.1/dist/styles/color/palettes/default.css */ --wa-color-green-95: #e3f9e3 /* oklch(96.006% 0.03715 145.28) */; --wa-color-green-90: #c2f2c1 /* oklch(91.494% 0.08233 144.35) */; --wa-color-green-80: #93da98 /* oklch(82.445% 0.11601 146.11) */; --wa-color-green-70: #5dc36f /* oklch(73.554% 0.15308 147.59) */; --wa-color-green-60: #00ac49 /* oklch(64.982% 0.18414 148.83) */; --wa-color-green-50: #00883c /* oklch(54.765% 0.15165 149.77) */; --wa-color-green-40: #036730 /* oklch(45.004% 0.11963 151.06) */; --wa-color-green-30: #0a5027 /* oklch(37.988% 0.09487 151.62) */; --wa-color-green-20: #0a3a1d /* oklch(30.876% 0.07202 152.23) */; --wa-color-green-10: #052310 /* oklch(22.767% 0.05128 152.45) */; --wa-color-green-05: #031608 /* oklch(17.84% 0.03957 151.36) */; --wa-color-green: var(--wa-color-green-60); --wa-color-green-key: 60; --wa-color-indigo-95: #f0f2ff /* oklch(96.341% 0.0175 279.06) */; --wa-color-indigo-90: #dfe5ff /* oklch(92.527% 0.0359 275.35) */; --wa-color-indigo-80: #bcc7ff /* oklch(84.053% 0.07938 275.91) */; --wa-color-indigo-70: #9da9ff /* oklch(75.941% 0.12411 276.95) */; --wa-color-indigo-60: #808aff /* oklch(67.977% 0.17065 277.16) */; --wa-color-indigo-50: #6163f2 /* oklch(57.967% 0.20943 277.04) */; --wa-color-indigo-40: #4945cb /* oklch(48.145% 0.20042 277.08) */; --wa-color-indigo-30: #3933a7 /* oklch(40.844% 0.17864 277.26) */; --wa-color-indigo-20: #292381 /* oklch(33.362% 0.15096 277.21) */; --wa-color-indigo-10: #181255 /* oklch(24.534% 0.11483 277.73) */; --wa-color-indigo-05: #0d0a3a /* oklch(19.092% 0.08825 276.76) */; --wa-color-indigo: var(--wa-color-indigo-50); --wa-color-indigo-key: 50; --wa-color-purple-95: #f7f0ff /* oklch(96.49% 0.02119 306.84) */; --wa-color-purple-90: #eedfff /* oklch(92.531% 0.04569 306.6) */; --wa-color-purple-80: #ddbdff /* oklch(84.781% 0.09615 306.52) */; --wa-color-purple-70: #ca99ff /* oklch(76.728% 0.14961 305.27) */; --wa-color-purple-60: #b678f5 /* oklch(68.906% 0.1844 304.96) */; --wa-color-purple-50: #9951db /* oklch(58.603% 0.20465 304.87) */; --wa-color-purple-40: #7936b3 /* oklch(48.641% 0.18949 304.79) */; --wa-color-purple-30: #612692 /* oklch(41.23% 0.16836 304.92) */; --wa-color-purple-20: #491870 /* oklch(33.663% 0.14258 305.12) */; --wa-color-purple-10: #2d0b48 /* oklch(24.637% 0.10612 304.95) */; --wa-color-purple-05: #1e0532 /* oklch(19.393% 0.08461 305.26) */; --wa-color-purple: var(--wa-color-purple-50); --wa-color-purple-key: 50; --wa-color-pink-95: #feeff9 /* oklch(96.676% 0.02074 337.69) */; --wa-color-pink-90: #feddf0 /* oklch(93.026% 0.04388 342.45) */; --wa-color-pink-80: #fcb5d8 /* oklch(84.928% 0.09304 348.21) */; --wa-color-pink-70: #f78dbf /* oklch(77.058% 0.14016 351.19) */; --wa-color-pink-60: #e66ba3 /* oklch(69.067% 0.16347 353.69) */; --wa-color-pink-50: #c84382 /* oklch(58.707% 0.17826 354.82) */; --wa-color-pink-40: #9e2a6c /* oklch(48.603% 0.16439 350.08) */; --wa-color-pink-30: #7d1e58 /* oklch(41.017% 0.14211 347.77) */; --wa-color-pink-20: #5e1342 /* oklch(33.442% 0.11808 347.01) */; --wa-color-pink-10: #3c0828 /* oklch(24.601% 0.08768 347.8) */; --wa-color-pink-05: #28041a /* oklch(19.199% 0.06799 346.97) */; --wa-color-pink: var(--wa-color-pink-50); --wa-color-pink-key: 50; } } /* ─── Theme layer ──────────────────────────────────────────────────────────── Semantic color tokens + typography + spacing + borders. All overrides are in @layer wa-theme so they take precedence over WA's own wa-theme defaults (our hot-wa.css is imported after WA's default.css, so within the same layer our declarations win). ─────────────────────────────────────────────────────────────────────────── */ @layer wa-theme { :where(:root), .wa-theme-default, .wa-light, .wa-dark .wa-invert, .wa-light .wa-theme-default, .wa-dark .wa-theme-default.wa-invert, .wa-dark .wa-theme-default .wa-invert { /* #region Colors (Light) */ color-scheme: light; color: var(--wa-color-text-normal); --wa-color-surface-raised: white; --wa-color-surface-default: white; --wa-color-surface-lowered: var(--hot-color-neutral-50); --wa-color-surface-border: var(--hot-color-neutral-100); --wa-color-text-normal: var(--hot-color-neutral-900); --wa-color-text-quiet: var(--hot-color-neutral-600); --wa-color-text-link: var(--hot-color-primary-600); --wa-color-overlay-modal: color-mix( in oklab, var(--hot-color-neutral-950) 50%, transparent ); --wa-color-overlay-inline: color-mix( in oklab, var(--hot-color-neutral-200) 25%, transparent ); --wa-color-shadow: color-mix( in oklab, var(--hot-color-neutral-950) calc(var(--wa-shadow-blur-scale) * 4% + 8%), transparent ); --wa-color-focus: var(--hot-color-primary-400); --wa-color-mix-hover: black 10%; --wa-color-mix-active: black 20%; /* Brand = HOT primary (red) */ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); /* primary-50 */ --wa-color-brand-fill-normal: var(--wa-color-brand-90); /* primary-100 */ --wa-color-brand-fill-loud: var(--wa-color-brand-50); /* primary-500 */ --wa-color-brand-border-quiet: var(--wa-color-brand-90); /* primary-100 */ --wa-color-brand-border-normal: var(--wa-color-brand-80); /* primary-200 */ --wa-color-brand-border-loud: var(--wa-color-brand-60); /* primary-400 */ --wa-color-brand-on-quiet: var(--wa-color-brand-40); /* primary-600 */ --wa-color-brand-on-normal: var(--wa-color-brand-30); /* primary-700 */ --wa-color-brand-on-loud: white; /* Success = HOT cyan on-quiet/normal use darker values for sufficient contrast on light backgrounds */ --wa-color-success-fill-quiet: var(--wa-color-success-95); /* success-50 */ --wa-color-success-fill-normal: var(--wa-color-success-90); /* success-100 */ --wa-color-success-fill-loud: var(--wa-color-success-50); /* success-500 */ --wa-color-success-border-quiet: var(--wa-color-success-90); /* success-100 */ --wa-color-success-border-normal: var(--wa-color-success-80); /* success-200 */ --wa-color-success-border-loud: var(--wa-color-success-60); /* success-400 */ --wa-color-success-on-quiet: var(--wa-color-success-20); /* success-800 - a11y: cyan needs dark text */ --wa-color-success-on-normal: var(--wa-color-success-20); /* success-800 */ --wa-color-success-on-loud: white; /* Warning = HOT yellow on-* and on-loud use dark amber for contrast - white on bright yellow is unreadable */ --wa-color-warning-fill-quiet: var(--wa-color-warning-95); /* warning-50 */ --wa-color-warning-fill-normal: var(--wa-color-warning-90); /* warning-100 */ --wa-color-warning-fill-loud: var(--wa-color-warning-50); /* warning-500 (#FED82E) */ --wa-color-warning-border-quiet: var(--wa-color-warning-90); /* warning-100 */ --wa-color-warning-border-normal: var(--wa-color-warning-80); /* warning-200 */ --wa-color-warning-border-loud: var(--wa-color-warning-40); /* warning-600 (amber) */ --wa-color-warning-on-quiet: var(--wa-color-warning-05); /* warning-950 - a11y: yellow needs dark text */ --wa-color-warning-on-normal: var(--wa-color-warning-05); /* warning-950 */ --wa-color-warning-on-loud: var(--wa-color-warning-05); /* warning-950 - white on yellow = ~1:1 contrast */ /* Danger = HOT red on-quiet/normal use darker values for accessibility */ --wa-color-danger-fill-quiet: var(--wa-color-danger-95); /* danger-50 */ --wa-color-danger-fill-normal: var(--wa-color-danger-90); /* danger-100 */ --wa-color-danger-fill-loud: var(--wa-color-danger-50); /* danger-500 */ --wa-color-danger-border-quiet: var(--wa-color-danger-90); /* danger-100 */ --wa-color-danger-border-normal: var(--wa-color-danger-80); /* danger-200 */ --wa-color-danger-border-loud: var(--wa-color-danger-60); /* danger-400 */ --wa-color-danger-on-quiet: var(--wa-color-danger-05); /* danger-950 - a11y */ --wa-color-danger-on-normal: var(--wa-color-danger-05); /* danger-950 */ --wa-color-danger-on-loud: white; /* Neutral = HOT gray (secondary button colour) fill-loud uses neutral-200 (light gray) for a secondary button feel; on-loud uses neutral-950 (dark text) for contrast on light fill */ --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); /* neutral-50 */ --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); /* neutral-100 */ --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); /* neutral-200 */ --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); /* neutral-100 */ --wa-color-neutral-border-normal: var(--wa-color-neutral-80); /* neutral-200 */ --wa-color-neutral-border-loud: var(--wa-color-neutral-60); /* neutral-400 */ --wa-color-neutral-on-quiet: var(--wa-color-neutral-05); /* neutral-950 */ --wa-color-neutral-on-normal: var(--wa-color-neutral-05); /* neutral-950 */ --wa-color-neutral-on-loud: var(--wa-color-neutral-05); /* neutral-950 - dark text on light gray fill */ /* #endregion */ } /* ─── Typography, spacing and border tokens ────────────────────────────── Must be in @layer wa-theme (same layer as WA's own declarations) so our values win when this file is imported after WA's default.css. ──────────────────────────────────────────────────────────────────────── */ :where(:root), .wa-theme-default, .wa-light, .wa-dark, .wa-invert { /* #region Fonts */ --wa-font-family-body: var(--hot-font-sans); --wa-font-family-heading: var(--hot-font-sans-variant-condensed); --wa-font-family-code: var(--hot-font-mono); --wa-font-family-longform: var(--hot-font-serif); /* Font sizes - fixed values to match HOT scale */ --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */ --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */ --wa-font-size-s: var(--hot-font-size-small); /* 14px */ --wa-font-size-m: var(--hot-font-size-medium); /* 16px */ --wa-font-size-l: var(--hot-font-size-large); /* 20px */ --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */ --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */ --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */ --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */ /* wa-font-size-scale, wa-font-size-smaller/larger use calc() - no override */ /* Font weights */ --wa-font-weight-light: var(--hot-font-weight-light); /* 300 */ --wa-font-weight-normal: var(--hot-font-weight-normal); /* 400 */ --wa-font-weight-semibold: var(--hot-font-weight-semibold); /* 500 */ --wa-font-weight-bold: var(--hot-font-weight-bold); /* 700 */ /* Functional font weights */ --wa-font-weight-body: var(--wa-font-weight-normal); --wa-font-weight-heading: var(--wa-font-weight-bold); --wa-font-weight-code: var(--wa-font-weight-normal); --wa-font-weight-longform: var(--wa-font-weight-normal); --wa-font-weight-action: var(--wa-font-weight-semibold); /* Line heights */ --wa-line-height-condensed: var(--hot-line-height-dense); /* 1.4 */ --wa-line-height-normal: var(--hot-line-height-normal); /* 1.8 */ --wa-line-height-expanded: var(--hot-line-height-loose); /* 2.2 */ /* #endregion */ /* #region Spacing */ --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px */ --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px */ --wa-space-xs: var(--hot-spacing-x-small); /* 8px */ --wa-space-s: var(--hot-spacing-small); /* 12px */ --wa-space-m: var(--hot-spacing-medium); /* 16px */ --wa-space-l: var(--hot-spacing-large); /* 20px */ --wa-space-xl: var(--hot-spacing-x-large); /* 28px */ --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */ --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */ --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */ /* #endregion */ /* #region Border radius */ --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */ --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */ --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */ --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */ --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */ /* #endregion */ } }