diff --git a/docs/css/extra.css b/docs/css/extra.css index 68239e3..20e91f0 100644 --- a/docs/css/extra.css +++ b/docs/css/extra.css @@ -1,47 +1,57 @@ /* ============================================ - Immersive Fusion - Futuristic Documentation Theme - Based on Example.Spa cyberpunk design system + Immersive Fusion - DeepCube Docs Theme + Colours and fonts come from the DeepCube design kit (dc-styles), vendored in + css/vendor/dc-tokens.css, with fonts self-hosted in css/fonts.css, the same way + immersivefusion.com consumes it. This file reads only --if-* tokens: no raw colour + literals except neutral black shadows and tints (rgba(0, 0, 0, a)). ============================================ */ -/* Import Google Fonts */ -@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400;600;700&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600;700&display=swap'); - /* ============================================ - CSS Custom Properties (Variables) + Bridge: dc-styles tokens -> this site and Material for MkDocs ============================================ */ + +/* light-dark() in the tokens resolves against color-scheme, so each Material scheme sets it. */ +[data-md-color-scheme="slate"] { color-scheme: dark; } +[data-md-color-scheme="default"] { color-scheme: light; } + :root { - /* Futuristic color palette */ - --color-primary: #00E5FF; - --color-secondary: #7C4DFF; - --color-accent: #FF6D00; - --color-success: #00E676; - --color-danger: #FF1744; - --color-bg-dark: #0a0a0f; - --color-bg-card: rgba(20, 20, 35, 0.8); - --color-text: #E0E0E0; - --color-text-muted: #888; + /* The site's own palette names, kept so every rule below still reads them. */ + --color-primary: var(--if-brand); + --color-secondary: var(--if-decor); + --color-accent: var(--if-status-warn); + --color-success: var(--if-status-ok); + --color-danger: var(--if-status-crit); + --color-bg-dark: var(--if-bg); + --color-bg-card: color-mix(in srgb, var(--if-surface) 80%, transparent); + --color-text: var(--if-fg); + --color-text-muted: var(--if-fg-muted); /* Glow effects */ - --glow-primary: 0 0 10px rgba(0, 229, 255, 0.5), 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(0, 229, 255, 0.15); - --glow-secondary: 0 0 10px rgba(124, 77, 255, 0.5), 0 0 20px rgba(124, 77, 255, 0.3); + --glow-primary: 0 0 10px color-mix(in srgb, var(--if-brand) 50%, transparent), 0 0 20px color-mix(in srgb, var(--if-brand) 30%, transparent), 0 0 40px color-mix(in srgb, var(--if-brand) 15%, transparent); + --glow-secondary: 0 0 10px color-mix(in srgb, var(--if-decor) 50%, transparent), 0 0 20px color-mix(in srgb, var(--if-decor) 30%, transparent); + + /* Material fonts (theme.font is false in mkdocs.yml, so Material loads nothing from Google). */ + --md-text-font: var(--if-font-sans); + --md-code-font: var(--if-font-mono); } + /* ============================================ Dark Mode (Slate) - Primary Futuristic Theme ============================================ */ [data-md-color-scheme="slate"] { /* Override Material theme colors */ - --md-primary-fg-color: #0a0a0f; - --md-primary-fg-color--light: #141420; - --md-primary-fg-color--dark: #050508; - --md-accent-fg-color: #00E5FF; - --md-default-bg-color: #0a0a0f; - --md-default-fg-color: #E0E0E0; - --md-default-fg-color--light: #888; - --md-typeset-color: #E0E0E0; - --md-typeset-a-color: #00E5FF; - --md-code-bg-color: rgba(15, 15, 25, 0.9); - --md-code-fg-color: #00E5FF; + --md-primary-fg-color: var(--if-bg); + --md-primary-fg-color--light: var(--if-surface); + --md-primary-fg-color--dark: var(--if-bg); + --md-accent-fg-color: var(--if-brand); + --md-default-bg-color: var(--if-bg); + --md-default-fg-color: var(--if-fg); + --md-default-fg-color--light: var(--if-fg-muted); + --md-typeset-color: var(--if-fg); + --md-typeset-a-color: var(--if-brand); + --md-code-bg-color: color-mix(in srgb, var(--if-surface) 90%, transparent); + --md-code-fg-color: var(--if-brand); } /* ============================================ @@ -64,16 +74,16 @@ html, body { } [data-md-color-scheme="slate"] { - --md-default-bg-color: #0a0a0f !important; + --md-default-bg-color: var(--if-bg) !important; } [data-md-color-scheme="slate"] body, [data-md-color-scheme="slate"] .md-container { background: - radial-gradient(ellipse 80% 50% at 50% -10%, rgba(124, 77, 255, 0.25) 0%, transparent 50%), - radial-gradient(ellipse 60% 40% at 80% 0%, rgba(0, 229, 255, 0.15) 0%, transparent 40%), - radial-gradient(ellipse 50% 30% at 20% 5%, rgba(0, 229, 255, 0.1) 0%, transparent 35%), - linear-gradient(180deg, #0a0a12 0%, #08080c 50%, #0a0a0f 100%) !important; + radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--if-decor) 25%, transparent) 0%, transparent 50%), + radial-gradient(ellipse 60% 40% at 80% 0%, color-mix(in srgb, var(--if-brand) 15%, transparent) 0%, transparent 40%), + radial-gradient(ellipse 50% 30% at 20% 5%, color-mix(in srgb, var(--if-brand) 10%, transparent) 0%, transparent 35%), + linear-gradient(180deg, var(--if-bg) 0%, var(--if-bg) 50%, var(--if-bg) 100%) !important; background-attachment: fixed !important; } @@ -81,10 +91,10 @@ html, body { Header - Clean Dark Style (like main site) ============================================ */ [data-md-color-scheme="slate"] .md-header { - background: rgba(10, 10, 18, 0.95) !important; + background: color-mix(in srgb, var(--if-surface) 95%, transparent) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); - border-bottom: 1px solid rgba(0, 229, 255, 0.2); + border-bottom: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); box-shadow: none; } @@ -95,14 +105,14 @@ html, body { /* Header title with gradient like "Immersive Fusion" */ [data-md-color-scheme="slate"] .md-header__title { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-weight: 600; letter-spacing: 0; text-transform: none; } [data-md-color-scheme="slate"] .md-header__topic { - background: linear-gradient(90deg, #00E5FF, #7C4DFF); + background: linear-gradient(90deg, var(--if-brand), var(--if-decor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -116,49 +126,49 @@ html, body { } [data-md-color-scheme="slate"] .md-header__button.md-logo:hover img { - filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5)); + filter: drop-shadow(0 0 8px color-mix(in srgb, var(--if-brand) 50%, transparent)); } /* Search box styling */ [data-md-color-scheme="slate"] .md-search__form { - background: rgba(30, 30, 45, 0.6) !important; - border: 1px solid rgba(0, 229, 255, 0.15); + background: color-mix(in srgb, var(--if-surface) 60%, transparent) !important; + border: 1px solid color-mix(in srgb, var(--if-brand) 15%, transparent); border-radius: 6px; } [data-md-color-scheme="slate"] .md-search__input { - color: #E0E0E0; + color: var(--if-fg); } [data-md-color-scheme="slate"] .md-search__input::placeholder { - color: rgba(224, 224, 224, 0.5); + color: color-mix(in srgb, var(--if-fg) 50%, transparent); } /* ============================================ Navigation Tabs - Integrated with header ============================================ */ [data-md-color-scheme="slate"] .md-tabs { - background: rgba(10, 10, 18, 0.95) !important; - border-bottom: 1px solid rgba(0, 229, 255, 0.1); + background: color-mix(in srgb, var(--if-surface) 95%, transparent) !important; + border-bottom: 1px solid color-mix(in srgb, var(--if-brand) 10%, transparent); } [data-md-color-scheme="slate"] .md-tabs__link { - font-family: 'Inter', sans-serif; + font-family: var(--if-font-sans); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 0.7rem; - color: rgba(255, 255, 255, 0.6); + color: color-mix(in srgb, var(--if-fg) 60%, transparent); transition: color 0.2s ease; padding: 0 0.5rem; } [data-md-color-scheme="slate"] .md-tabs__link:hover { - color: rgba(255, 255, 255, 0.9); + color: color-mix(in srgb, var(--if-fg) 90%, transparent); } [data-md-color-scheme="slate"] .md-tabs__link--active { - color: #fff; + color: var(--if-fg); font-weight: 500; } @@ -174,17 +184,17 @@ html, body { } [data-md-color-scheme="slate"] .md-nav__link { - color: rgba(255, 255, 255, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); transition: all 0.2s ease; font-weight: 400; } [data-md-color-scheme="slate"] .md-nav__link:hover { - color: #fff; + color: var(--if-fg); } [data-md-color-scheme="slate"] .md-nav__link--active { - color: #fff !important; + color: var(--if-fg) !important; font-weight: 600; } @@ -194,7 +204,7 @@ html, body { text-transform: none; font-size: 0.8rem; letter-spacing: 0; - color: rgba(255, 255, 255, 0.9); + color: color-mix(in srgb, var(--if-fg) 90%, transparent); } /* ============================================ @@ -202,7 +212,7 @@ html, body { ============================================ */ .md-header__topic, h1, h2, h3, h4, h5, h6 { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-weight: 400; margin: 0 0 15px 0; } @@ -211,7 +221,7 @@ h1, h2, h3, h4, h5, h6 { font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; - background: linear-gradient(135deg, #00E5FF, #7C4DFF); + background: linear-gradient(135deg, var(--if-brand), var(--if-decor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -221,7 +231,7 @@ h1, h2, h3, h4, h5, h6 { font-size: 1.25rem; font-weight: 700; letter-spacing: 1px; - background: linear-gradient(135deg, #00E5FF, #7C4DFF); + background: linear-gradient(135deg, var(--if-brand), var(--if-decor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -230,8 +240,8 @@ h1, h2, h3, h4, h5, h6 { [data-md-color-scheme="slate"] h3 { font-size: 1rem; font-weight: 600; - color: #fff; - text-shadow: 0 0 20px rgba(0, 229, 255, 0.3); + color: var(--if-fg); + text-shadow: 0 0 20px color-mix(in srgb, var(--if-brand) 30%, transparent); letter-spacing: 0.5px; } @@ -242,7 +252,7 @@ h4 { } h5 { - font-family: 'Inter', sans-serif; + font-family: var(--if-font-sans); font-size: 0.8rem; font-style: italic; line-height: 1.48; @@ -264,15 +274,15 @@ h5 { Links - Neon Style ============================================ */ [data-md-color-scheme="slate"] a { - color: #00E5FF; + color: var(--if-brand); text-decoration: none; transition: all 0.2s ease; position: relative; } [data-md-color-scheme="slate"] a:hover { - color: #66F0FF; - text-shadow: 0 0 10px rgba(0, 229, 255, 0.5); + color: var(--if-accent); + text-shadow: 0 0 10px color-mix(in srgb, var(--if-brand) 50%, transparent); } /* Underline animation on hover */ @@ -283,7 +293,7 @@ h5 { left: 0; width: 0; height: 1px; - background: linear-gradient(90deg, #00E5FF, #7C4DFF); + background: linear-gradient(90deg, var(--if-brand), var(--if-decor)); transition: width 0.3s ease; } @@ -296,13 +306,13 @@ h5 { ============================================ */ [data-md-color-scheme="slate"] .highlight, [data-md-color-scheme="slate"] pre { - background: linear-gradient(145deg, #0d0d15, #080810) !important; + background: linear-gradient(145deg, var(--if-bg), var(--if-bg)) !important; border-radius: 12px; - border: 1px solid rgba(0, 229, 255, 0.2); + border: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); box-shadow: - 0 0 10px rgba(0, 229, 255, 0.08), - 0 0 20px rgba(0, 229, 255, 0.05), - inset 0 0 15px rgba(0, 229, 255, 0.02); + 0 0 10px color-mix(in srgb, var(--if-brand) 8%, transparent), + 0 0 20px color-mix(in srgb, var(--if-brand) 5%, transparent), + inset 0 0 15px color-mix(in srgb, var(--if-brand) 2%, transparent); position: relative; overflow: hidden; } @@ -315,11 +325,11 @@ h5 { left: 15px; width: 12px; height: 12px; - background: #FF1744; + background: var(--if-status-crit); border-radius: 50%; box-shadow: - 20px 0 0 #FF6D00, - 40px 0 0 #00E676; + 20px 0 0 var(--if-status-warn), + 40px 0 0 var(--if-status-ok); z-index: 1; } @@ -330,9 +340,9 @@ h5 { } [data-md-color-scheme="slate"] code { - font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, monospace; - color: #00E5FF; - text-shadow: 0 0 5px rgba(0, 229, 255, 0.3); + font-family: var(--if-font-mono); + color: var(--if-brand); + text-shadow: 0 0 5px color-mix(in srgb, var(--if-brand) 30%, transparent); } [data-md-color-scheme="slate"] .highlight code { @@ -341,8 +351,8 @@ h5 { /* Inline code */ [data-md-color-scheme="slate"] :not(pre) > code { - background: rgba(0, 229, 255, 0.1) !important; - border: 1px solid rgba(0, 229, 255, 0.2); + background: color-mix(in srgb, var(--if-brand) 10%, transparent) !important; + border: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); border-radius: 4px; padding: 2px 6px; } @@ -351,10 +361,10 @@ h5 { Buttons - Neon Glow ============================================ */ [data-md-color-scheme="slate"] .md-button { - background: linear-gradient(145deg, rgba(30, 30, 50, 0.8), rgba(15, 15, 30, 0.9)); - border: 1px solid rgba(0, 229, 255, 0.3); + background: linear-gradient(145deg, color-mix(in srgb, var(--if-surface) 80%, transparent), color-mix(in srgb, var(--if-surface) 90%, transparent)); + border: 1px solid color-mix(in srgb, var(--if-brand) 30%, transparent); border-radius: 8px; - color: #00E5FF; + color: var(--if-brand); font-weight: 600; letter-spacing: 1px; text-transform: uppercase; @@ -370,15 +380,15 @@ h5 { left: -100%; width: 100%; height: 100%; - background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.1), transparent); + background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--if-brand) 10%, transparent), transparent); transition: left 0.5s ease; } [data-md-color-scheme="slate"] .md-button:hover { - border-color: #00E5FF; + border-color: var(--if-brand); box-shadow: var(--glow-primary); transform: translateY(-2px); - color: #66F0FF; + color: var(--if-accent); } [data-md-color-scheme="slate"] .md-button:hover::before { @@ -386,8 +396,8 @@ h5 { } [data-md-color-scheme="slate"] .md-button--primary { - background: linear-gradient(135deg, rgba(124, 77, 255, 0.3), rgba(0, 229, 255, 0.2)); - border-color: rgba(0, 229, 255, 0.4); + background: linear-gradient(135deg, color-mix(in srgb, var(--if-decor) 30%, transparent), color-mix(in srgb, var(--if-brand) 20%, transparent)); + border-color: color-mix(in srgb, var(--if-brand) 40%, transparent); } /* ============================================ @@ -395,19 +405,19 @@ h5 { ============================================ */ [data-md-color-scheme="slate"] .admonition, [data-md-color-scheme="slate"] details { - background: rgba(15, 15, 30, 0.6) !important; + background: color-mix(in srgb, var(--if-surface) 60%, transparent) !important; backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); - border: 1px solid rgba(0, 229, 255, 0.2) !important; + border: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent) !important; border-radius: 10px !important; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05); + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 color-mix(in srgb, var(--if-fg) 5%, transparent); overflow: hidden; } [data-md-color-scheme="slate"] .admonition-title, [data-md-color-scheme="slate"] summary { - background: rgba(0, 229, 255, 0.1) !important; - border-bottom: 1px solid rgba(0, 229, 255, 0.2); + background: color-mix(in srgb, var(--if-brand) 10%, transparent) !important; + border-bottom: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); font-weight: 600; letter-spacing: 0.5px; } @@ -415,51 +425,51 @@ h5 { /* Info admonition */ [data-md-color-scheme="slate"] .admonition.info, [data-md-color-scheme="slate"] .admonition.note { - border-color: rgba(0, 229, 255, 0.4) !important; + border-color: color-mix(in srgb, var(--if-brand) 40%, transparent) !important; } /* Warning admonition */ [data-md-color-scheme="slate"] .admonition.warning { - border-color: rgba(255, 109, 0, 0.4) !important; + border-color: color-mix(in srgb, var(--if-status-warn) 40%, transparent) !important; } [data-md-color-scheme="slate"] .admonition.warning .admonition-title { - background: rgba(255, 109, 0, 0.15) !important; + background: color-mix(in srgb, var(--if-status-warn) 15%, transparent) !important; } /* Danger admonition */ [data-md-color-scheme="slate"] .admonition.danger { - border-color: rgba(255, 23, 68, 0.4) !important; + border-color: color-mix(in srgb, var(--if-status-crit) 40%, transparent) !important; } [data-md-color-scheme="slate"] .admonition.danger .admonition-title { - background: rgba(255, 23, 68, 0.15) !important; + background: color-mix(in srgb, var(--if-status-crit) 15%, transparent) !important; } /* Success/Tip admonition */ [data-md-color-scheme="slate"] .admonition.tip, [data-md-color-scheme="slate"] .admonition.success { - border-color: rgba(0, 230, 118, 0.4) !important; + border-color: color-mix(in srgb, var(--if-status-ok) 40%, transparent) !important; } [data-md-color-scheme="slate"] .admonition.tip .admonition-title, [data-md-color-scheme="slate"] .admonition.success .admonition-title { - background: rgba(0, 230, 118, 0.15) !important; + background: color-mix(in srgb, var(--if-status-ok) 15%, transparent) !important; } /* ============================================ Tables - Futuristic Grid ============================================ */ [data-md-color-scheme="slate"] .md-typeset table:not([class]) { - background: rgba(20, 20, 35, 0.6); - border: 1px solid rgba(0, 229, 255, 0.2); + background: color-mix(in srgb, var(--if-surface) 60%, transparent); + border: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); border-radius: 12px; overflow: hidden; } [data-md-color-scheme="slate"] .md-typeset table:not([class]) th { - background: rgba(0, 229, 255, 0.1); - color: #00E5FF; + background: color-mix(in srgb, var(--if-brand) 10%, transparent); + color: var(--if-brand); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; @@ -467,73 +477,73 @@ h5 { } [data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover { - background: rgba(0, 229, 255, 0.05); + background: color-mix(in srgb, var(--if-brand) 5%, transparent); } /* ============================================ Search - Glassmorphism ============================================ */ [data-md-color-scheme="slate"] .md-search__form { - background: rgba(20, 20, 35, 0.8); - border: 1px solid rgba(0, 229, 255, 0.2); + background: color-mix(in srgb, var(--if-surface) 80%, transparent); + border: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); border-radius: 8px; } [data-md-color-scheme="slate"] .md-search__input { - color: #E0E0E0; + color: var(--if-fg); } [data-md-color-scheme="slate"] .md-search__input::placeholder { - color: rgba(224, 224, 224, 0.5); + color: color-mix(in srgb, var(--if-fg) 50%, transparent); } [data-md-color-scheme="slate"] .md-search-result { - background: rgba(20, 20, 35, 0.95); + background: color-mix(in srgb, var(--if-surface) 95%, transparent); backdrop-filter: blur(12px); } [data-md-color-scheme="slate"] .md-search-result__link:hover { - background: rgba(0, 229, 255, 0.1); + background: color-mix(in srgb, var(--if-brand) 10%, transparent); } /* ============================================ Footer - Cyber Style ============================================ */ [data-md-color-scheme="slate"] .md-footer { - background: rgba(10, 10, 18, 0.95); - border-top: 1px solid rgba(0, 229, 255, 0.2); + background: color-mix(in srgb, var(--if-surface) 95%, transparent); + border-top: 1px solid color-mix(in srgb, var(--if-brand) 20%, transparent); } [data-md-color-scheme="slate"] .md-footer-meta { - background: rgba(10, 10, 18, 0.95); + background: color-mix(in srgb, var(--if-surface) 95%, transparent); } [data-md-color-scheme="slate"] .md-footer-meta__inner { - color: rgba(255, 255, 255, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); } [data-md-color-scheme="slate"] .md-footer a { - color: rgba(255, 255, 255, 0.8); + color: color-mix(in srgb, var(--if-fg) 80%, transparent); } [data-md-color-scheme="slate"] .md-footer a:hover { - color: #00E5FF; + color: var(--if-brand); } [data-md-color-scheme="slate"] .md-footer__link { - color: rgba(255, 255, 255, 0.8); + color: color-mix(in srgb, var(--if-fg) 80%, transparent); } [data-md-color-scheme="slate"] .md-copyright { - color: rgba(255, 255, 255, 0.6); + color: color-mix(in srgb, var(--if-fg) 60%, transparent); } [data-md-color-scheme="slate"] .md-copyright a { - color: rgba(255, 255, 255, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); } [data-md-color-scheme="slate"] .md-copyright a:hover { - color: #00E5FF; + color: var(--if-brand); } /* ============================================ @@ -545,27 +555,27 @@ h5 { } [data-md-color-scheme="slate"] .md-banner { - background: linear-gradient(90deg, rgba(124, 77, 255, 0.2), rgba(0, 229, 255, 0.2)); - border-bottom: 1px solid rgba(0, 229, 255, 0.3); + background: linear-gradient(90deg, color-mix(in srgb, var(--if-decor) 20%, transparent), color-mix(in srgb, var(--if-brand) 20%, transparent)); + border-bottom: 1px solid color-mix(in srgb, var(--if-brand) 30%, transparent); } [data-md-color-scheme="slate"] .md-banner a { - color: #00E5FF; + color: var(--if-brand); } [data-md-color-scheme="default"] .md-banner { - background: linear-gradient(90deg, rgba(0, 229, 255, 0.15), rgba(124, 77, 255, 0.15)); - border-bottom: 1px solid rgba(0, 0, 0, 0.06); + background: linear-gradient(90deg, color-mix(in srgb, var(--if-brand) 15%, transparent), color-mix(in srgb, var(--if-decor) 15%, transparent)); + border-bottom: 1px solid var(--if-border); } [data-md-color-scheme="default"] .md-banner, [data-md-color-scheme="default"] .md-banner__inner { - color: #333 !important; + color: var(--if-fg) !important; font-size: 0.75rem; } [data-md-color-scheme="default"] .md-banner a { - color: #00838f !important; + color: var(--if-accent) !important; } /* ============================================ @@ -577,32 +587,32 @@ h5 { } [data-md-color-scheme="slate"] ::-webkit-scrollbar-track { - background: rgba(10, 10, 15, 0.8); + background: color-mix(in srgb, var(--if-surface) 80%, transparent); } [data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #00E5FF, #7C4DFF); + background: linear-gradient(180deg, var(--if-brand), var(--if-decor)); border-radius: 4px; } [data-md-color-scheme="slate"] ::-webkit-scrollbar-thumb:hover { - background: linear-gradient(180deg, #66F0FF, #9D7FFF); + background: linear-gradient(180deg, var(--if-accent), var(--if-decor)); } /* ============================================ Selection - Neon Highlight ============================================ */ [data-md-color-scheme="slate"] ::selection { - background: rgba(0, 229, 255, 0.3); - color: #fff; + background: color-mix(in srgb, var(--if-brand) 30%, transparent); + color: var(--if-fg); } /* ============================================ TOC (Table of Contents) ============================================ */ [data-md-color-scheme="slate"] .md-nav--secondary .md-nav__link--active { - color: #00E5FF; - border-left: 2px solid #00E5FF; + color: var(--if-brand); + border-left: 2px solid var(--if-brand); padding-left: 10px; margin-left: -12px; } @@ -611,18 +621,18 @@ h5 { Tab Content ============================================ */ [data-md-color-scheme="slate"] .tabbed-labels > label { - color: rgba(224, 224, 224, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); border-bottom: 2px solid transparent; transition: all 0.3s ease; } [data-md-color-scheme="slate"] .tabbed-labels > label:hover { - color: #00E5FF; + color: var(--if-brand); } [data-md-color-scheme="slate"] .tabbed-labels > label.tabbed-set--active { - color: #00E5FF; - border-bottom-color: #00E5FF; + color: var(--if-brand); + border-bottom-color: var(--if-brand); } /* ============================================ @@ -631,58 +641,58 @@ h5 { /* Light mode color variables */ [data-md-color-scheme="default"] { - --md-primary-fg-color: #00b8d4; - --md-accent-fg-color: #00E5FF; - --md-typeset-a-color: #00b8d4; + --md-primary-fg-color: var(--if-accent); + --md-accent-fg-color: var(--if-brand); + --md-typeset-a-color: var(--if-accent); } /* Light mode background - clean white with subtle cyan glow */ [data-md-color-scheme="default"] body, [data-md-color-scheme="default"] .md-container { background: - radial-gradient(ellipse 80% 50% at 50% -10%, rgba(0, 229, 255, 0.08) 0%, transparent 50%), - radial-gradient(ellipse 60% 40% at 80% 0%, rgba(124, 77, 255, 0.05) 0%, transparent 40%), - #fafafa !important; + radial-gradient(ellipse 80% 50% at 50% -10%, color-mix(in srgb, var(--if-brand) 8%, transparent) 0%, transparent 50%), + radial-gradient(ellipse 60% 40% at 80% 0%, color-mix(in srgb, var(--if-decor) 5%, transparent) 0%, transparent 40%), + var(--if-bg) !important; background-attachment: fixed !important; } /* Header styling - clean white like dark mode is clean dark */ [data-md-color-scheme="default"] .md-header { - background: #ffffff !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.08); + background: var(--if-surface) !important; + border-bottom: 1px solid var(--if-border); box-shadow: none; } [data-md-color-scheme="default"] .md-header__title { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-weight: 600; } [data-md-color-scheme="default"] .md-header__topic { - color: #333 !important; + color: var(--if-fg) !important; font-weight: 600; } [data-md-color-scheme="default"] .md-header .md-icon { - color: #424242 !important; + color: var(--if-fg) !important; } /* Search box styling */ [data-md-color-scheme="default"] .md-search__form { background: rgba(0, 0, 0, 0.04) !important; - border: 1px solid rgba(0, 0, 0, 0.08); + border: 1px solid var(--if-border); border-radius: 6px; } /* Tabs styling - clean white */ [data-md-color-scheme="default"] .md-tabs { - background: #ffffff !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.06); + background: var(--if-surface) !important; + border-bottom: 1px solid var(--if-border); } [data-md-color-scheme="default"] .md-tabs__link { - color: rgba(0, 0, 0, 0.5) !important; - font-family: 'Inter', sans-serif; + color: color-mix(in srgb, var(--if-fg) 50%, transparent) !important; + font-family: var(--if-font-sans); font-weight: 400; font-size: 0.7rem; padding: 0 0.5rem; @@ -690,36 +700,36 @@ h5 { } [data-md-color-scheme="default"] .md-tabs__link:hover { - color: rgba(0, 0, 0, 0.8) !important; + color: color-mix(in srgb, var(--if-fg) 80%, transparent) !important; } [data-md-color-scheme="default"] .md-tabs__link--active { - color: #333 !important; + color: var(--if-fg) !important; font-weight: 500; } /* Typography */ [data-md-color-scheme="default"] h1 { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-size: 1.5rem; font-weight: 700; letter-spacing: 1px; - color: #5E35B1; + color: var(--if-decor); } [data-md-color-scheme="default"] h2 { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: 1px; - color: #5E35B1; + color: var(--if-decor); } [data-md-color-scheme="default"] h3 { - font-family: 'Josefin Sans', sans-serif; + font-family: var(--if-font-display); font-size: 1rem; font-weight: 600; - color: #7E57C2; + color: var(--if-decor); letter-spacing: 0.5px; } @@ -729,21 +739,21 @@ h5 { } [data-md-color-scheme="default"] .md-nav__link { - color: rgba(0, 0, 0, 0.6); + color: color-mix(in srgb, var(--if-fg) 60%, transparent); } [data-md-color-scheme="default"] .md-nav__link:hover { - color: rgba(0, 0, 0, 0.9); + color: color-mix(in srgb, var(--if-fg) 90%, transparent); } [data-md-color-scheme="default"] .md-nav__link--active { - color: #333 !important; + color: var(--if-fg) !important; font-weight: 600; } [data-md-color-scheme="default"] .md-nav__item--nested > .md-nav__link { font-weight: 600; - color: rgba(0, 0, 0, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); } /* Content area - no card styling to match dark mode */ @@ -753,19 +763,19 @@ h5 { /* Links */ [data-md-color-scheme="default"] .md-content a { - color: #0077b6; + color: var(--if-accent); } [data-md-color-scheme="default"] .md-content a:hover { - color: #00a8e8; + color: var(--if-accent); } /* Code blocks */ [data-md-color-scheme="default"] .highlight, [data-md-color-scheme="default"] pre { - background: #f5f5f5 !important; + background: var(--if-surface-sunken) !important; border-radius: 12px; - border: 1px solid rgba(0, 0, 0, 0.08) !important; + border: 1px solid var(--if-border) !important; box-shadow: none; } @@ -780,11 +790,11 @@ h5 { left: 15px; width: 12px; height: 12px; - background: #e57373; + background: var(--if-status-crit); border-radius: 50%; box-shadow: - 20px 0 0 #ffb74d, - 40px 0 0 #81c784; + 20px 0 0 var(--if-status-warn), + 40px 0 0 var(--if-status-ok); z-index: 1; } @@ -795,23 +805,23 @@ h5 { } [data-md-color-scheme="default"] code { - font-family: 'JetBrains Mono', 'Fira Code', SFMono-Regular, Consolas, monospace; - color: #00838f; + font-family: var(--if-font-mono); + color: var(--if-accent); } [data-md-color-scheme="default"] :not(pre) > code { background: rgba(0, 0, 0, 0.04) !important; - border: 1px solid rgba(0, 0, 0, 0.08); + border: 1px solid var(--if-border); border-radius: 4px; padding: 2px 6px; - color: #00838f; + color: var(--if-accent); } /* Admonitions */ [data-md-color-scheme="default"] .admonition, [data-md-color-scheme="default"] details { - background: #fff !important; - border: 1px solid rgba(0, 0, 0, 0.1) !important; + background: var(--if-surface) !important; + border: 1px solid var(--if-border) !important; border-radius: 10px !important; box-shadow: none; } @@ -819,20 +829,20 @@ h5 { [data-md-color-scheme="default"] .admonition-title, [data-md-color-scheme="default"] summary { background: rgba(0, 0, 0, 0.03) !important; - border-bottom: 1px solid rgba(0, 0, 0, 0.08); + border-bottom: 1px solid var(--if-border); } /* Tables */ [data-md-color-scheme="default"] .md-typeset table:not([class]) { - background: #fff; - border: 1px solid rgba(0, 0, 0, 0.1); + background: var(--if-surface); + border: 1px solid var(--if-border); border-radius: 12px; overflow: hidden; } [data-md-color-scheme="default"] .md-typeset table:not([class]) th { background: rgba(0, 0, 0, 0.03); - color: rgba(0, 0, 0, 0.7); + color: color-mix(in srgb, var(--if-fg) 70%, transparent); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; @@ -840,7 +850,7 @@ h5 { } [data-md-color-scheme="default"] .md-typeset table:not([class]) td { - border-top: 1px solid rgba(0, 0, 0, 0.06); + border-top: 1px solid var(--if-border); } [data-md-color-scheme="default"] .md-typeset table:not([class]) tr:hover { @@ -849,88 +859,88 @@ h5 { /* Buttons */ [data-md-color-scheme="default"] .md-button { - background: #fff; - border: 1px solid rgba(0, 0, 0, 0.15) !important; + background: var(--if-surface); + border: 1px solid var(--if-border) !important; border-radius: 8px; - color: #424242 !important; + color: var(--if-fg) !important; font-weight: 600; transition: all 0.3s ease; } [data-md-color-scheme="default"] .md-button:hover { - border-color: #5E35B1 !important; - color: #5E35B1 !important; - background: rgba(94, 53, 177, 0.1) !important; + border-color: var(--if-decor) !important; + color: var(--if-decor) !important; + background: color-mix(in srgb, var(--if-decor) 10%, transparent) !important; transform: translateY(-2px); } [data-md-color-scheme="default"] .md-button--primary { - background: #5E35B1 !important; - color: #fff !important; + background: var(--if-accent) !important; + color: var(--if-on-accent) !important; border: none !important; } [data-md-color-scheme="default"] .md-button--primary:hover { - background: #7E57C2 !important; + background: var(--if-decor) !important; transform: translateY(-2px); } /* Footer */ [data-md-color-scheme="default"] .md-footer { - background: #d0d0d0 !important; - border-top: 1px solid rgba(0, 0, 0, 0.2); + background: var(--if-fg) !important; + border-top: 1px solid var(--if-border); } [data-md-color-scheme="default"] .md-footer-meta { - background: #c8c8c8 !important; + background: var(--if-surface-sunken) !important; } [data-md-color-scheme="default"] .md-footer-meta__inner { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-footer * { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-footer a, [data-md-color-scheme="default"] .md-footer a:visited { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-footer a:hover { - color: #5E35B1 !important; + color: var(--if-decor) !important; } [data-md-color-scheme="default"] .md-footer__link { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-copyright, [data-md-color-scheme="default"] .md-copyright * { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-copyright a, [data-md-color-scheme="default"] .md-copyright a:visited { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-copyright a:hover { - color: #5E35B1 !important; + color: var(--if-decor) !important; } [data-md-color-scheme="default"] .md-footer-copyright, [data-md-color-scheme="default"] .md-footer-copyright * { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-social__link { - color: #000 !important; + color: var(--if-fg) !important; } [data-md-color-scheme="default"] .md-social__link svg { - fill: #000 !important; + fill: var(--if-fg) !important; } /* Scrollbar */ @@ -940,34 +950,34 @@ h5 { } [data-md-color-scheme="default"] ::-webkit-scrollbar-track { - background: #f5f5f5; + background: var(--if-surface-sunken); } [data-md-color-scheme="default"] ::-webkit-scrollbar-thumb { - background: linear-gradient(180deg, #00E5FF, #7C4DFF); + background: linear-gradient(180deg, var(--if-brand), var(--if-decor)); border-radius: 4px; } /* TOC active link */ [data-md-color-scheme="default"] .md-nav--secondary .md-nav__link--active { - color: #00E5FF; - border-left: 2px solid #00E5FF; + color: var(--if-brand); + border-left: 2px solid var(--if-brand); padding-left: 10px; margin-left: -12px; } /* Tabs content */ [data-md-color-scheme="default"] .tabbed-labels > label { - color: rgba(0, 0, 0, 0.5); + color: color-mix(in srgb, var(--if-fg) 50%, transparent); } [data-md-color-scheme="default"] .tabbed-labels > label:hover { - color: rgba(0, 0, 0, 0.8); + color: color-mix(in srgb, var(--if-fg) 80%, transparent); } [data-md-color-scheme="default"] .tabbed-labels > label.tabbed-set--active { - color: #00E5FF; - border-bottom-color: #00E5FF; + color: var(--if-brand); + border-bottom-color: var(--if-brand); } /* ============================================ @@ -989,7 +999,7 @@ h5 { } [data-md-color-scheme="slate"] img:hover { - filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.3)); + filter: drop-shadow(0 0 10px color-mix(in srgb, var(--if-brand) 30%, transparent)); } /* ============================================ @@ -1014,7 +1024,7 @@ h5 { } .md-header__topic:first-child .md-ellipsis::after { content: "IF(docs) { }"; - font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', monospace; + font-family: var(--if-font-mono); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; @@ -1027,7 +1037,7 @@ h5 { /* Slate (dark): inherit the existing cyan -> purple gradient text-fill the header-topic already carries, so the lockup glows in the cyberpunk theme. */ [data-md-color-scheme="slate"] .md-header__topic:first-child .md-ellipsis::after { - background: linear-gradient(90deg, #00E5FF, #7C4DFF); + background: linear-gradient(90deg, var(--if-brand), var(--if-decor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; @@ -1035,6 +1045,6 @@ h5 { /* Default (light): dark ink, matching the rest of the light-mode header. */ [data-md-color-scheme="default"] .md-header__topic:first-child .md-ellipsis::after { - color: #333; + color: var(--if-fg); } diff --git a/docs/css/fonts.css b/docs/css/fonts.css new file mode 100644 index 0000000..f9a6380 --- /dev/null +++ b/docs/css/fonts.css @@ -0,0 +1,8 @@ +/* Self-hosted fonts for the DeepCube design kit (dc-styles), copied 2026-10-29. Copied from @fontsource-variable 5.3.0, as immersivefusion.com does; + SIL Open Font License 1.1, licenses alongside in /fonts. Replaces the Google Fonts links (no third party). */ +@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } +@font-face { font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900; src: url(../fonts/inter-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } +@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } +@font-face { font-family: 'JetBrains Mono Variable'; font-style: normal; font-display: swap; font-weight: 100 800; src: url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } +@font-face { font-family: 'Josefin Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 700; src: url(../fonts/josefin-sans-latin-ext-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } +@font-face { font-family: 'Josefin Sans Variable'; font-style: normal; font-display: swap; font-weight: 100 700; src: url(../fonts/josefin-sans-latin-wght-normal.woff2) format('woff2-variations'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } diff --git a/docs/css/vendor/dc-tokens.css b/docs/css/vendor/dc-tokens.css new file mode 100644 index 0000000..c5852e8 --- /dev/null +++ b/docs/css/vendor/dc-tokens.css @@ -0,0 +1,399 @@ +/* VENDORED from the released @immersivefusion/dc-styles 0.2.2 (tokens.css, byte for byte below this header), the + version DeepCube Web pins. Source: IF.UX.Web packages/dc-styles. Same as immersivefusion.com + (src/IF.StoreFront.App/wwwroot/css/vendor/dc-tokens.css, PR 4876). + Why vendored, not installed: the package lives on the Immersive Fusion Azure Artifacts feed, and neither this + repo's GitHub CI nor the publish pipeline (IF.Charts cd-static-site) authenticates to it. Do not edit here: update + by re-copying a released version and changing the version above. Switch to the package (pinned exact) once the + pipelines authenticate to the feed. Owner of the tokens: IF.UX. */ +/* + * SP-081 / ADR-0007: the --if-* design tokens. Values re-tuned in A5 (PBI 3722) to the merged table of + * inventory 03 §3 and the prototype; every changed value is listed in 03 §3.3 (the A5 mapping table). + * + * This is the one place raw literals (hex, rgb, shadow) are allowed; stylelint ignores this folder. It is plain CSS + * with no Sass so the Portal can consume the same file later (DEC-5). tools/contrast-gate.mjs reads this file and + * gates every text pair at 4.5:1 and every control, ring, series and fill pair at 3:1, light and dark + * (src/design/tokens.contrast.spec.ts runs it on every test run). + * + * Tiers (03 §3.0, prefix map frozen in A5): + * --if-ref-* primitive: raw ramps. Only the semantic tier reads them. + * --if-* semantic: role tokens, light/dark pairs written light-dark(, ). + * motif --if-chamfer-*, --if-glow*, --if-grid-*, --if-hl-inset, --if-decor: only the emitter classes and the + * components named in 03 §6.1 read them. + * --dc-* component-scoped run-time properties; never declared here. + * + * Inert outside v2: light-dark() resolves against the consuming element's color-scheme, which is set only inside + * [data-ui="v2"] (assets/scss/v2/v2.scss), and no v1 rule reads an --if-* property. Declaring these on :root changes + * nothing on a v1 screen (A5 harness: 660/660 with an empty intended-change list). + * + * Theme-dependent shadows keep one geometry per layer and switch the colour with light-dark(); a layer that exists + * in one theme only is transparent in the other (the light theme has no glow and no inset highlight). + */ +@layer tokens { + :root { + /* ==== Primitive tier ================================================================================== */ + + /* Graphite ramp (slice 1). Kept, not overwritten (03 §3.0); no semantic token reads it since A5 except + --if-ref-neutral-0 and the light unknown --if-ref-neutral-600. */ + --if-ref-neutral-0: #ffffff; + --if-ref-neutral-50: #f6f7f9; + --if-ref-neutral-100: #eceef2; + --if-ref-neutral-200: #d9dce3; + --if-ref-neutral-400: #8a90a0; + --if-ref-neutral-600: #565c6b; + --if-ref-neutral-800: #1d2029; + --if-ref-neutral-850: #161922; + --if-ref-neutral-900: #0f1117; + --if-ref-neutral-950: #0a0b10; + --if-ref-neutral-text-dark: #e6e8ee; + --if-ref-neutral-text-light: #14161c; + + /* Navy ramp (Shoebox surfaces, A5): the dark identity. */ + --if-ref-navy-990: #02060a; + --if-ref-navy-950: #060f18; + --if-ref-navy-940: #070f18; + --if-ref-navy-925: #0a1521; + --if-ref-navy-900: #0b1622; + --if-ref-navy-890: #0d1b28; + --if-ref-navy-850: #12202f; + --if-ref-navy-820: #16293c; + --if-ref-navy-810: #1a2b3d; + --if-ref-navy-800: #1e3247; + --if-ref-navy-780: #20374d; + --if-ref-navy-750: #2b4560; + --if-ref-navy-500: #5f7a91; + --if-ref-navy-350: #8a9fb1; + --if-ref-navy-300: #8fa8ba; + --if-ref-navy-50: #e8f1f6; + + /* Slate ramp (prototype light theme, A5). */ + --if-ref-slate-25: #f8f9fb; + --if-ref-slate-50: #f5f6f8; + --if-ref-slate-75: #f0f2f5; + --if-ref-slate-90: #eef1f5; + --if-ref-slate-100: #eceff3; + --if-ref-slate-150: #e6eaf0; + --if-ref-slate-200: #e1e4ea; + --if-ref-slate-225: #dde2ea; + --if-ref-slate-275: #cfd6e0; + --if-ref-slate-300: #cbd1da; + --if-ref-slate-500: #6f7888; + --if-ref-slate-600: #58627a; + --if-ref-slate-650: #566074; + --if-ref-slate-950: #121722; + + /* Cyan: exact brand #00E5FF (cyan-400) for fills and the dark ring; softened cyan for reading. */ + --if-ref-cyan-300: #5df0ff; + --if-ref-cyan-350: #3ddcf5; + --if-ref-cyan-400: #00e5ff; + --if-ref-cyan-500: #00b8d4; + --if-ref-cyan-650: #0b8eac; + --if-ref-cyan-700: #007c8c; + --if-ref-cyan-750: #006a80; + --if-ref-cyan-800: #00626f; + --if-ref-cyan-975: #04212a; + --if-ref-teal-300: #5df2e2; + + /* Violet stays in data series (DEC-2), never chrome. */ + --if-ref-violet-300: #a58bff; + --if-ref-violet-400: #7c4dff; + --if-ref-violet-600: #5b4ad1; + + /* Status. */ + --if-ref-green-450: #3fb27f; + --if-ref-green-500: #2fbf71; + --if-ref-green-700: #17794a; + --if-ref-green-800: #146a43; + --if-ref-amber-450: #e3a83b; + --if-ref-amber-500: #f0a020; + --if-ref-amber-700: #8f5d00; + --if-ref-amber-800: #7f5200; + --if-ref-red-400: #ff6b70; + --if-ref-red-500: #ff5d5d; + --if-ref-red-650: #c9292f; + --if-ref-red-700: #c0262d; + --if-ref-red-750: #b0262c; + + /* Energy canon (IF.Knowledge energy-model.md): Optimal cyan, Approaching amber, Conserving grey (blue-grey on dark; + neutral grey on light, owner ruling 2026-10-16, so it stays apart from light Optimal under colour-vision deficiency). */ + --if-ref-amber-550: #b8862d; + --if-ref-amber-650: #a86d10; + --if-ref-bluegrey-300: #90a4ae; + --if-ref-bluegrey-400: #78909c; + --if-ref-grey-550: #666666; + --if-ref-grey-600: #5c5c5c; + + /* Data series, prototype --s1..--s12 (light s5 #578f0a, 03 §3.1). */ + --if-ref-s1-dark: #8b7cf6; + --if-ref-s1-light: #6d5ce8; + --if-ref-s2-dark: #5aa9ff; + --if-ref-s2-light: #2f7fe0; + --if-ref-s3-dark: #2fbfa8; + --if-ref-s3-light: #13998a; + --if-ref-s4-dark: #e879c9; + --if-ref-s4-light: #c2449f; + --if-ref-s5-dark: #a3d94a; + --if-ref-s5-light: #578f0a; + --if-ref-s6-dark: #94a3b8; + --if-ref-s6-light: #64748b; + --if-ref-s7-dark: #ff9f68; + --if-ref-s7-light: #c2570c; + --if-ref-s8-dark: #d6c46a; + --if-ref-s8-light: #8a7000; + --if-ref-s9-dark: #35d0ff; + --if-ref-s9-light: #0b7fa6; + --if-ref-s10-dark: #f08a7e; + --if-ref-s10-light: #b3463a; + --if-ref-s11-dark: #e2e8f0; + --if-ref-s11-light: #475569; + --if-ref-s12-dark: #59c264; + --if-ref-s12-light: #2a7d36; + + /* ==== Semantic tier: colour ============================================================================ */ + + /* Surfaces. */ + --if-bg: light-dark(var(--if-ref-slate-50), var(--if-ref-navy-950)); + --if-surface: light-dark(var(--if-ref-neutral-0), var(--if-ref-navy-900)); + --if-surface-raised: light-dark(var(--if-ref-slate-75), var(--if-ref-navy-850)); + --if-surface-sunken: light-dark(var(--if-ref-slate-100), var(--if-ref-navy-940)); + --if-surface-overlay: light-dark(var(--if-ref-neutral-0), var(--if-ref-navy-850)); + --if-surface-inverse: light-dark(var(--if-ref-slate-950), var(--if-ref-navy-50)); + --if-on-inverse: light-dark(var(--if-ref-neutral-0), var(--if-ref-navy-950)); + --if-scrim: light-dark( + color-mix(in srgb, var(--if-ref-slate-950) 45%, transparent), + color-mix(in srgb, var(--if-ref-navy-990) 62%, transparent) + ); + + /* Foreground (text) colours. --if-fg* are the names from A5 (03 §3.2, H-15): --if-text-* is the type scale. */ + --if-fg: light-dark(var(--if-ref-slate-950), var(--if-ref-navy-50)); + --if-fg-muted: light-dark(var(--if-ref-slate-650), var(--if-ref-navy-300)); + --if-fg-subtle: light-dark(var(--if-ref-slate-600), var(--if-ref-navy-350)); + /* Deprecated aliases, kept until phase H; new code uses --if-fg*. */ + --if-text: var(--if-fg); + --if-text-muted: var(--if-fg-muted); + --if-text-subtle: var(--if-fg-subtle); + + /* Borders. --if-border* are decorative only (1.1 to 2:1); every control boundary uses --if-ctl (WCAG 1.4.11). + Stylelint bans --if-border* on input, select and button. */ + --if-border: light-dark(var(--if-ref-slate-200), var(--if-ref-navy-800)); + --if-border-strong: light-dark(var(--if-ref-slate-300), var(--if-ref-navy-750)); + --if-ctl: light-dark(var(--if-ref-slate-500), var(--if-ref-navy-500)); + + /* Brand: exact #00E5FF for brand moments only (the primary call to action, selected chip fill), always with dark + ink. Never text, ring or line on light. */ + --if-brand: var(--if-ref-cyan-400); + --if-on-brand: var(--if-ref-cyan-975); + + /* Accent: softened cyan for reading (links, active nav text). */ + --if-accent: light-dark(var(--if-ref-cyan-750), var(--if-ref-cyan-350)); + --if-accent-hover: light-dark(var(--if-ref-cyan-800), var(--if-ref-cyan-300)); + --if-accent-ink: light-dark(var(--if-ref-neutral-0), var(--if-ref-cyan-975)); + --if-on-accent: var(--if-accent-ink); + --if-accent-subtle: light-dark( + color-mix(in srgb, var(--if-ref-cyan-750) 10%, transparent), + color-mix(in srgb, var(--if-ref-cyan-350) 12%, transparent) + ); + /* OD-23: outline CTA, selected chip edge, hover border. .75 light, .55 dark. */ + --if-accent-line: light-dark( + color-mix(in srgb, var(--if-ref-cyan-750) 75%, transparent), + color-mix(in srgb, var(--if-ref-cyan-350) 55%, transparent) + ); + + /* Focus: OD-14, exact brand ring on dark, #006a80 on light, always with the inner tone (two-tone ring). */ + --if-focus-ring: light-dark(var(--if-ref-cyan-750), var(--if-ref-cyan-400)); + --if-focus-inner: light-dark(var(--if-ref-neutral-0), var(--if-ref-cyan-975)); + + /* Selected, pressed, current: never tint-only (03 §2). The bar is the cue; the tint is decoration. */ + --if-active-bar: var(--if-accent); + --if-selected-bg: var(--if-accent-subtle); + + /* Status. "unknown" is mandatory: unknown is not the same as fine. */ + --if-status-ok: light-dark(var(--if-ref-green-800), var(--if-ref-green-450)); + --if-status-warn: light-dark(var(--if-ref-amber-800), var(--if-ref-amber-450)); + --if-status-crit: light-dark(var(--if-ref-red-750), var(--if-ref-red-400)); + --if-status-unknown: light-dark(var(--if-ref-neutral-600), var(--if-ref-navy-300)); + --if-status-ok-subtle: light-dark( + color-mix(in srgb, var(--if-ref-green-800) 10%, transparent), + color-mix(in srgb, var(--if-ref-green-450) 14%, transparent) + ); + --if-status-warn-subtle: light-dark( + color-mix(in srgb, var(--if-ref-amber-800) 11%, transparent), + color-mix(in srgb, var(--if-ref-amber-450) 15%, transparent) + ); + --if-status-crit-subtle: light-dark( + color-mix(in srgb, var(--if-ref-red-750) 10%, transparent), + color-mix(in srgb, var(--if-ref-red-400) 15%, transparent) + ); + --if-status-unknown-subtle: light-dark( + color-mix(in srgb, var(--if-ref-neutral-600) 10%, transparent), + color-mix(in srgb, var(--if-ref-navy-300) 14%, transparent) + ); + /* Fill behind white text (destructive buttons). */ + --if-status-crit-solid: var(--if-ref-red-650); + --if-on-crit-solid: var(--if-ref-neutral-0); + /* Ink on a crit fill; Material on-error from A6. */ + --if-on-crit: light-dark(var(--if-ref-neutral-0), var(--if-ref-cyan-975)); + /* The Shoebox crosshatch line: broken or failing states only, alpha at most .20 (03 §6.1 hatch). Text on a + hatched surface is --if-fg: the crit tone on its own hatch line is 3.6:1 at any alpha the hatch stays visible at. */ + --if-hatch-line: color-mix(in srgb, var(--if-status-crit) 20%, transparent); + + /* Third party / external. */ + --if-external: var(--if-chart-series-1); + + /* Data series. Default order for colour-vision deficiency: s2, s7, s3, s11, s12, s1, s5, s4, s9, s10, s6, s8. */ + --if-chart-series-1: light-dark(var(--if-ref-s1-light), var(--if-ref-s1-dark)); + --if-chart-series-2: light-dark(var(--if-ref-s2-light), var(--if-ref-s2-dark)); + --if-chart-series-3: light-dark(var(--if-ref-s3-light), var(--if-ref-s3-dark)); + --if-chart-series-4: light-dark(var(--if-ref-s4-light), var(--if-ref-s4-dark)); + --if-chart-series-5: light-dark(var(--if-ref-s5-light), var(--if-ref-s5-dark)); + --if-chart-series-6: light-dark(var(--if-ref-s6-light), var(--if-ref-s6-dark)); + --if-chart-series-7: light-dark(var(--if-ref-s7-light), var(--if-ref-s7-dark)); + --if-chart-series-8: light-dark(var(--if-ref-s8-light), var(--if-ref-s8-dark)); + --if-chart-series-9: light-dark(var(--if-ref-s9-light), var(--if-ref-s9-dark)); + --if-chart-series-10: light-dark(var(--if-ref-s10-light), var(--if-ref-s10-dark)); + --if-chart-series-11: light-dark(var(--if-ref-s11-light), var(--if-ref-s11-dark)); + --if-chart-series-12: light-dark(var(--if-ref-s12-light), var(--if-ref-s12-dark)); + --if-chart-grid: var(--if-border); + --if-chart-axis: var(--if-fg-muted); + + /* Energy (canon colours, never red) and experience. A value ramp on the bar, never text. Light values are the + darkest steps that clear 3:1 on every ground and on the bar track (contrast gate; 03 §3.3). */ + --if-energy-optimal: light-dark(var(--if-ref-cyan-750), var(--if-ref-cyan-500)); + --if-energy-optimal-hi: light-dark(var(--if-ref-cyan-700), var(--if-ref-cyan-400)); + --if-energy-approaching: light-dark(var(--if-ref-amber-700), var(--if-ref-amber-550)); + --if-energy-approaching-hi: light-dark(var(--if-ref-amber-650), var(--if-ref-amber-450)); + --if-energy-conserving: light-dark(var(--if-ref-grey-600), var(--if-ref-bluegrey-400)); + --if-energy-conserving-hi: light-dark(var(--if-ref-grey-550), var(--if-ref-bluegrey-300)); + --if-energy-replenishing: var(--if-energy-conserving); + --if-xp-fill: light-dark(var(--if-ref-s1-light), var(--if-ref-s1-dark)); + --if-xp-track: light-dark(var(--if-ref-slate-225), var(--if-ref-navy-810)); + --if-xp-rested-alpha: 0.45; + + /* Avatar (prototype .avatar; AD-27). */ + --if-avatar-bg: var(--if-ref-violet-600); + --if-avatar-ink: var(--if-ref-neutral-0); + + /* ==== Motif tier (03 §6.1 owners only) ================================================================== */ + --if-decor: light-dark(var(--if-ref-cyan-750), var(--if-ref-teal-300)); + --if-grid-line: light-dark( + color-mix(in srgb, var(--if-ref-cyan-750) 7%, transparent), + color-mix(in srgb, var(--if-ref-teal-300) 5%, transparent) + ); + --if-grid-pitch: 32px; + --if-chamfer-wall-far: light-dark(var(--if-ref-slate-150), var(--if-ref-navy-780)); + --if-chamfer-wall-side: light-dark(var(--if-ref-slate-225), var(--if-ref-navy-820)); + --if-chamfer-wall-near: light-dark(var(--if-ref-slate-275), var(--if-ref-navy-890)); + --if-chamfer-floor-top: light-dark(var(--if-ref-slate-25), var(--if-ref-navy-925)); + --if-chamfer-floor-bottom: light-dark(var(--if-ref-slate-90), var(--if-ref-navy-940)); + --if-chamfer-depth: 26px; + --if-hl-inset: 0 1px 0 light-dark(transparent, rgb(93 242 226 / 6%)) inset; + --if-glow-sm: + 0 0 0 1px light-dark(transparent, rgb(0 229 255 / 35%)), + 0 4px 14px light-dark(transparent, rgb(0 229 255 / 25%)); + --if-glow: + 0 0 0 1px light-dark(transparent, rgb(0 229 255 / 35%)), + 0 6px 20px light-dark(transparent, rgb(0 229 255 / 28%)); + --if-glow-hover: + 0 0 0 1px light-dark(transparent, rgb(0 229 255 / 50%)), + 0 10px 26px light-dark(transparent, rgb(0 229 255 / 38%)); + --if-chamfer-shadow: + 0 1px 0 light-dark(rgb(255 255 255 / 80%), rgb(93 242 226 / 10%)) inset, + 0 34px 64px light-dark(transparent, rgb(0 0 0 / 55%)), + 0 24px 48px light-dark(rgb(18 23 34 / 14%), transparent); + --if-chamfer-floor-shadow: + 0 28px 42px -28px light-dark(transparent, rgb(0 0 0 / 90%)) inset, + 0 -20px 32px -28px light-dark(transparent, rgb(0 0 0 / 65%)) inset, + 24px 0 36px -28px light-dark(transparent, rgb(0 0 0 / 65%)) inset, + -24px 0 36px -28px light-dark(transparent, rgb(0 0 0 / 65%)) inset, + 0 14px 24px -18px light-dark(rgb(18 23 34 / 25%), transparent) inset, + 0 -10px 18px -16px light-dark(rgb(18 23 34 / 15%), transparent) inset; + + /* ==== Semantic tier: shape, elevation, space, size ===================================================== */ + --if-radius-sm: 4px; + --if-radius-md: 6px; + --if-radius-lg: 10px; + --if-radius-xl: 12px; + --if-radius-chamfer: 16px; + --if-radius-full: 9999px; + + /* Elevation ladder. Surfaces are flat and bordered; only overlays cast a shadow (03 §3.2). */ + --if-shadow-overlay: 0 12px 32px light-dark(rgb(18 23 34 / 14%), rgb(0 0 0 / 50%)); + --if-elevation-0: none; /* page ground, dense views */ + --if-elevation-1: var(--if-hl-inset); /* .dc-surface: inset highlight, no drop shadow */ + --if-elevation-2: var(--if-shadow-overlay); /* menus, popovers, dialogs, toasts (CDK overlay) */ + --if-elevation-3: var(--if-chamfer-shadow); /* hero chamfer only (Q17) */ + + /* Space: 4px base; prototype off-scale values (2, 5, 6, 10, 14, 18 px) map to the nearest step. */ + --if-space-0: 0; + --if-space-1: 4px; + --if-space-2: 8px; + --if-space-3: 12px; + --if-space-4: 16px; + --if-space-5: 20px; + --if-space-6: 24px; + --if-space-7: 32px; + --if-space-8: 48px; + + /* Controls: 24 px is the WCAG 2.5.8 minimum target, 32 px the default control. */ + --if-ctl-h-sm: 24px; + --if-ctl-h-md: 32px; + --if-disabled-opacity: 0.45; + + /* Z-index ladder. --if-z-overlay equals the CDK overlay container (1000): dialogs, menus, selects, popovers and + the palette share it; only the toast host and the skip link sit above. */ + --if-z-base: 0; + --if-z-sticky: 10; + --if-z-chrome: 20; + --if-z-panel: 30; + --if-z-scrim: 40; + --if-z-overlay: 1000; + --if-z-toast: 1010; + --if-z-skip: 1100; + + /* ==== Semantic tier: type ============================================================================== */ + /* Display: wordmark and page titles, 20 px and up (OD-16). 'Josefin Sans Variable' is the family name of the + optional peer @fontsource-variable/josefin-sans; 'Josefin Sans' a static or system install; then Inter. */ + --if-font-display: 'Josefin Sans Variable', 'Josefin Sans', var(--if-font-sans); + --if-font-sans: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; + --if-font-mono: 'JetBrains Mono Variable', ui-monospace, 'Cascadia Mono', consolas, monospace; + /* Type scale in rem (names kept from slice 1). 12 px floor for data text; 2xs only for uppercase eyebrows and + icon-adjacent counts. */ + --if-text-2xs: 0.6875rem; + --if-text-2xs-lh: 1rem; + --if-text-xs: 0.75rem; + --if-text-xs-lh: 1rem; + --if-text-sm: 0.8125rem; + --if-text-sm-lh: 1.25rem; + --if-text-base: 0.875rem; + --if-text-base-lh: 1.375rem; + --if-text-lg: 1rem; + --if-text-lg-lh: 1.5rem; + --if-text-xl: 1.25rem; + --if-text-xl-lh: 1.75rem; + --if-text-2xl: 1.5rem; + --if-text-2xl-lh: 2rem; + --if-text-3xl: 1.625rem; + --if-text-3xl-lh: 1.875rem; + --if-weight-regular: 400; + --if-weight-medium: 500; + --if-weight-semibold: 600; + --if-weight-bold: 700; + --if-tracking-eyebrow: 0.08em; + --if-numeric: tabular-nums; + + /* ==== Motion; every duration is zeroed under prefers-reduced-motion below ============================== */ + --if-duration-fast: 120ms; + --if-duration-base: 200ms; + --if-duration-slow: 320ms; + --if-ease-standard: cubic-bezier(0.2, 0, 0, 1); + --if-ease-emphasized: cubic-bezier(0.3, 0, 0, 1); + --if-ease-exit: cubic-bezier(0.3, 0, 1, 1); + } + + @media (prefers-reduced-motion: reduce) { + :root { + --if-duration-fast: 0ms; + --if-duration-base: 0ms; + --if-duration-slow: 0ms; + } + } +} diff --git a/docs/fonts/OFL-inter.txt b/docs/fonts/OFL-inter.txt new file mode 100644 index 0000000..40589da --- /dev/null +++ b/docs/fonts/OFL-inter.txt @@ -0,0 +1,93 @@ +Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) Inter-Italic[opsz,wght].ttf: Copyright 2016 The Inter Project Authors (https://github.com/rsms/inter) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/fonts/OFL-jetbrains-mono.txt b/docs/fonts/OFL-jetbrains-mono.txt new file mode 100644 index 0000000..8f7ed67 --- /dev/null +++ b/docs/fonts/OFL-jetbrains-mono.txt @@ -0,0 +1,93 @@ +Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) JetBrainsMono-Italic[wght].ttf: Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/fonts/OFL-josefin-sans.txt b/docs/fonts/OFL-josefin-sans.txt new file mode 100644 index 0000000..c7422ec --- /dev/null +++ b/docs/fonts/OFL-josefin-sans.txt @@ -0,0 +1,93 @@ +Copyright 2010 The Josefin Sans Project Authors (https://github.com/ThomasJockin/JosefinSansFont-master), with Reserved Font Name "Josefin Sans". JosefinSans-Italic[wght].ttf: Copyright 2010 The Josefin Sans Project Authors (https://github.com/ThomasJockin/JosefinSansFont-master), with Reserved Font Name "Josefin Sans". + +This Font Software is licensed under the SIL Open Font License, Version 1.1. +This license is copied below, and is also available with a FAQ at: +http://scripts.sil.org/OFL + + +----------------------------------------------------------- +SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 +----------------------------------------------------------- + +PREAMBLE +The goals of the Open Font License (OFL) are to stimulate worldwide +development of collaborative font projects, to support the font creation +efforts of academic and linguistic communities, and to provide a free and +open framework in which fonts may be shared and improved in partnership +with others. + +The OFL allows the licensed fonts to be used, studied, modified and +redistributed freely as long as they are not sold by themselves. The +fonts, including any derivative works, can be bundled, embedded, +redistributed and/or sold with any software provided that any reserved +names are not used by derivative works. The fonts and derivatives, +however, cannot be released under any other type of license. The +requirement for fonts to remain under this license does not apply +to any document created using the fonts or their derivatives. + +DEFINITIONS +"Font Software" refers to the set of files released by the Copyright +Holder(s) under this license and clearly marked as such. This may +include source files, build scripts and documentation. + +"Reserved Font Name" refers to any names specified as such after the +copyright statement(s). + +"Original Version" refers to the collection of Font Software components as +distributed by the Copyright Holder(s). + +"Modified Version" refers to any derivative made by adding to, deleting, +or substituting -- in part or in whole -- any of the components of the +Original Version, by changing formats or by porting the Font Software to a +new environment. + +"Author" refers to any designer, engineer, programmer, technical +writer or other person who contributed to the Font Software. + +PERMISSION & CONDITIONS +Permission is hereby granted, free of charge, to any person obtaining +a copy of the Font Software, to use, study, copy, merge, embed, modify, +redistribute, and sell modified and unmodified copies of the Font +Software, subject to the following conditions: + +1) Neither the Font Software nor any of its individual components, +in Original or Modified Versions, may be sold by itself. + +2) Original or Modified Versions of the Font Software may be bundled, +redistributed and/or sold with any software, provided that each copy +contains the above copyright notice and this license. These can be +included either as stand-alone text files, human-readable headers or +in the appropriate machine-readable metadata fields within text or +binary files as long as those fields can be easily viewed by the user. + +3) No Modified Version of the Font Software may use the Reserved Font +Name(s) unless explicit written permission is granted by the corresponding +Copyright Holder. This restriction only applies to the primary font name as +presented to the users. + +4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font +Software shall not be used to promote, endorse or advertise any +Modified Version, except to acknowledge the contribution(s) of the +Copyright Holder(s) and the Author(s) or with their explicit written +permission. + +5) The Font Software, modified or unmodified, in part or in whole, +must be distributed entirely under this license, and must not be +distributed under any other license. The requirement for fonts to +remain under this license does not apply to any document created +using the Font Software. + +TERMINATION +This license becomes null and void if any of the above conditions are +not met. + +DISCLAIMER +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT +OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE +COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL +DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM +OTHER DEALINGS IN THE FONT SOFTWARE. diff --git a/docs/fonts/inter-latin-ext-wght-normal.woff2 b/docs/fonts/inter-latin-ext-wght-normal.woff2 new file mode 100644 index 0000000..479d010 Binary files /dev/null and b/docs/fonts/inter-latin-ext-wght-normal.woff2 differ diff --git a/docs/fonts/inter-latin-wght-normal.woff2 b/docs/fonts/inter-latin-wght-normal.woff2 new file mode 100644 index 0000000..d15208d Binary files /dev/null and b/docs/fonts/inter-latin-wght-normal.woff2 differ diff --git a/docs/fonts/jetbrains-mono-latin-ext-wght-normal.woff2 b/docs/fonts/jetbrains-mono-latin-ext-wght-normal.woff2 new file mode 100644 index 0000000..01769d9 Binary files /dev/null and b/docs/fonts/jetbrains-mono-latin-ext-wght-normal.woff2 differ diff --git a/docs/fonts/jetbrains-mono-latin-wght-normal.woff2 b/docs/fonts/jetbrains-mono-latin-wght-normal.woff2 new file mode 100644 index 0000000..cd5102a Binary files /dev/null and b/docs/fonts/jetbrains-mono-latin-wght-normal.woff2 differ diff --git a/docs/fonts/josefin-sans-latin-ext-wght-normal.woff2 b/docs/fonts/josefin-sans-latin-ext-wght-normal.woff2 new file mode 100644 index 0000000..30e7717 Binary files /dev/null and b/docs/fonts/josefin-sans-latin-ext-wght-normal.woff2 differ diff --git a/docs/fonts/josefin-sans-latin-wght-normal.woff2 b/docs/fonts/josefin-sans-latin-wght-normal.woff2 new file mode 100644 index 0000000..547aed3 Binary files /dev/null and b/docs/fonts/josefin-sans-latin-wght-normal.woff2 differ diff --git a/mkdocs.yml b/mkdocs.yml index 80558b2..48aef25 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -50,25 +50,22 @@ theme: - toc.follow # - toc.integrate palette: - # Dark mode first (default) - Futuristic cyberpunk theme + # Dark mode first (default); colours come from the dc-styles tokens via css/extra.css - scheme: slate - primary: black - accent: cyan + primary: custom + accent: custom toggle: icon: material/brightness-4 name: Switch to light mode # Light mode alternative - scheme: default - primary: deep purple - accent: deep purple + primary: custom + accent: custom toggle: icon: material/brightness-7 name: Switch to dark mode - font: - header: Josefin Sans # doesn't actually do anything, just for the record - #text: Josefin Sans - text: Roboto - code: Roboto Mono + # Fonts are self-hosted from the DeepCube design kit (css/fonts.css); false stops Material loading Google Fonts. + font: false # Shared brand icon family (sibling of immersivefusion.academy). The full # family (apple-touch-icon, web-app-manifest PNGs, site.webmanifest, # theme-color) is wired in overrides/main.html {% block extrahead %}. @@ -485,6 +482,9 @@ extra_javascript: [] # Removed: require.js 2.3.6 (CVE-2024-38999, CVSS 10.0) and highlight.js 10.1.1 (2 CVEs) # Both were vestigial - pymdownx.highlight handles syntax highlighting server-side via Pygments extra_css: + # DeepCube design kit (dc-styles): fonts, then the vendored tokens, then the site's bridge and rules. + - css/fonts.css + - css/vendor/dc-tokens.css - css/extra.css # # Page tree # nav: diff --git a/src/serve-headers.json b/src/serve-headers.json index 65bf3a6..f775fe8 100644 --- a/src/serve-headers.json +++ b/src/serve-headers.json @@ -7,10 +7,10 @@ "Follows the house pattern set by spatialobservability.org/dist/serve.json, but", "NOT its values. That site is entirely self-contained, so it can run", "default-src 'self'. This one is not: the built HTML pulls from", - "fonts.googleapis.com, fonts.gstatic.com, www.googletagmanager.com and", - "static.zdassets.com, and mkdocs-material emits inline