@dataimago/css 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/templates/quarto_website/assets/js/logo-switch.js

@@ -0,0 +1,73 @@
+// @dataimago/css@0.1.0-alpha.21 dist/templates/quarto_website/assets/js/logo-switch.js · sha256:f69f3ad9c9ab670197c32d75e072cdfa5fb5cc0fc720f636dd9a9e3a3c44015c · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.21 dataimago-sync
+var defaultLogoSrc = '/assets/img/ai_monogram.svg';
+var defaultLogoHref = '{{SITE_URL}}';
+var hoverLogoHref = 'https://dataimago.ai';
+
+function getCurrentTheme() {
+  var dataTheme = document.documentElement.getAttribute('data-bs-theme');
+  if (dataTheme === 'dark') return 'dark';
+
+  var lightSheets = document.querySelectorAll('link.quarto-color-scheme:not(.quarto-color-alternate)');
+  var allLightDisabled = true;
+  for (var i = 0; i < lightSheets.length; i++) {
+    if (!lightSheets[i].disabled) { allLightDisabled = false; break; }
+  }
+  var darkSheets = document.querySelectorAll('link.quarto-color-scheme.quarto-color-alternate');
+  var anyDarkEnabled = false;
+  for (var j = 0; j < darkSheets.length; j++) {
+    if (!darkSheets[j].disabled) { anyDarkEnabled = true; break; }
+  }
+  if (allLightDisabled && anyDarkEnabled) return 'dark';
+  if (document.body.classList.contains('quarto-dark')) return 'dark';
+  return 'light';
+}
+
+function setupNavbarBrandHover() {
+  var navbarLogo = document.querySelector('.navbar-logo');
+  var navbarBrand = navbarLogo ? navbarLogo.closest('a') : document.querySelector('.navbar-brand');
+  if (!navbarBrand) return;
+
+  navbarBrand.addEventListener('mouseover', function() {
+    navbarBrand.href = hoverLogoHref;
+    if (navbarLogo) navbarLogo.classList.add('logo-hover');
+  });
+  navbarBrand.addEventListener('mouseout', function() {
+    navbarBrand.href = defaultLogoHref;
+    if (navbarLogo) navbarLogo.classList.remove('logo-hover');
+  });
+}
+
+function setupFooterLogoHover() {
+  var footerLogos = document.querySelectorAll('.footer-ai-monogram-logo');
+  footerLogos.forEach(function(logo) {
+    logo.addEventListener('mouseover', function() { logo.classList.add('logo-hover'); });
+    logo.addEventListener('mouseout', function() { logo.classList.remove('logo-hover'); });
+  });
+}
+
+function initLogoSwitch() {
+  setupNavbarBrandHover();
+  setupFooterLogoHover();
+}
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initLogoSwitch);
+} else {
+  initLogoSwitch();
+}
+
+var themeObserver = new MutationObserver(function(mutations) {
+  mutations.forEach(function(mutation) {
+    if (mutation.type === 'attributes' &&
+        (mutation.attributeName === 'data-bs-theme' || mutation.attributeName === 'class')) {
+      setTimeout(initLogoSwitch, 100);
+    }
+  });
+});
+themeObserver.observe(document.documentElement, { attributes: true });
+themeObserver.observe(document.body, { attributes: true });
+
+document.querySelectorAll('link.quarto-color-scheme').forEach(function(sheet) {
+  new MutationObserver(function() { setTimeout(initLogoSwitch, 100); })
+    .observe(sheet, { attributes: true, attributeFilter: ['disabled'] });
+});

package/dist/templates/quarto_website/assets/js/scroll.js

@@ -0,0 +1,67 @@
+// @dataimago/css@0.1.0-alpha.21 dist/templates/quarto_website/assets/js/scroll.js · sha256:694f335a8c098d252123b523e1a7ac8d475da436eb3c5f73451d96108b2863d2 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.21 dataimago-sync
+$(window).scroll(function(){
+    if($(window).scrollTop() > 35) {
+        $('.navbar').addClass("shrink");
+        $('.navbar-title').addClass("shrink");
+        $('.navbar-logo').addClass("shrink");
+        $('body').addClass("shrink");
+    } else {
+        $('.navbar').removeClass("shrink");
+        $('.navbar-title').removeClass("shrink");
+        $('.navbar-logo').removeClass("shrink");
+        $('body').removeClass("shrink");
+    }
+});
+
+$(document).ready(function() {
+    function observeDropdownChanges() {
+        var observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.type === 'attributes') {
+                    var $target = $(mutation.target);
+                    if ($target.hasClass('dropdown-toggle')) {
+                        var $dropdown = $target.closest('.dropdown, .nav-item');
+                        var isExpanded = $target.attr('aria-expanded') === 'true';
+
+                        if (isExpanded) {
+                            $dropdown.addClass('open');
+                        } else {
+                            $dropdown.removeClass('open');
+                        }
+                    }
+                }
+            });
+        });
+
+        $('.navbar-nav .dropdown-toggle').each(function() {
+            observer.observe(this, {
+                attributes: true,
+                attributeFilter: ['aria-expanded']
+            });
+        });
+    }
+
+    observeDropdownChanges();
+
+    $('.navbar-nav .dropdown-toggle').on('click', function() {
+        var $this = $(this);
+        var $dropdown = $this.closest('.dropdown, .nav-item');
+
+        setTimeout(function() {
+            var isExpanded = $this.attr('aria-expanded') === 'true';
+            if (isExpanded) {
+                $dropdown.addClass('open');
+            } else {
+                $dropdown.removeClass('open');
+            }
+        }, 50);
+    });
+
+    $('.navbar-nav .dropdown, .navbar-nav .nav-item').on('show.bs.dropdown', function() {
+        $(this).addClass('open');
+    });
+
+    $('.navbar-nav .dropdown, .navbar-nav .nav-item').on('hide.bs.dropdown', function() {
+        $(this).removeClass('open');
+    });
+});

package/dist/templates/quarto_website/ethics.qmd.template

@@ -0,0 +1,49 @@
+<!-- @dataimago/css@0.1.0-alpha.21 dist/templates/quarto_website/ethics.qmd.template · sha256:fc151adb9c9fd9934a3c23ca5822eb6b05ca27795070ff7dbb26acd0e50ddbe5 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.21 dataimago-sync -->
+---
+title: "Ethical AI Principles"
+subtitle: "Superalignment Through Design Architecture"
+format:
+  html:
+    toc: true
+    toc-depth: 3
+---
+
+{{PACKAGE_NAME}} treats every design token, animation curve, and color choice as a moral decision with consequences for human agency. Ethics is not bolted on after design --- it is embedded in the system architecture from the foundation.
+
+## Core Commitments
+
+1. **Emancipation over efficiency** --- When efficiency and emancipation conflict, emancipation always wins.
+2. **AI in culture, not culture in AI** --- Technology serves lived human contexts, not the reverse.
+3. **Democratic participation** --- Communities affected by design decisions must have binding authority.
+4. **Reflexive practice** --- The system questions its own power relations.
+5. **Dialectical thinking** --- Productive tension over false simplicity.
+
+## Design Principles
+
+### Accessibility Beyond Compliance
+WCAG compliance is a floor, not a ceiling. Enhanced standards: 7.0:1 contrast, 48px touch targets, 300ms motion maximum.
+
+### Ethical Tokens First-Class
+Ethical constraints are first-class design tokens enforced at build time through the three-tier hierarchy (Primitive, Semantic, Ethical).
+
+### Performance Equity
+Speed is access. Design targets the most constrained users: 2G networks, single-core processors, 1GB RAM devices.
+
+### Color Democracy
+Color is communication technology serving community meaning-making, not brand commodity.
+
+### Motion Dignity
+Animation must respect vestibular safety, cognitive load, and cultural expectations.
+
+## How Ethics Are Enforced
+
+::: {.ethical-note}
+**Build-time validation:** Three automated validators gate every deployment:
+
+- **Contrast checking** --- 7.0:1 minimum ratio
+- **Motion linting** --- 300ms maximum duration, `prefers-reduced-motion` required
+- **Bundle size checking** --- Performance equity for low-bandwidth users
+:::
+
+For the complete design system documentation, see the [Design System](design_system.qmd) page.
+For governance processes, see [Democratic Governance](governance.qmd).

package/dist/templates/quarto_website/index.qmd.template

@@ -0,0 +1,71 @@
+<!-- @dataimago/css@0.1.0-alpha.21 dist/templates/quarto_website/index.qmd.template · sha256:fa09cd4cce412445d164a1ca1248c5080e03ee65db6e762e4bf2e543557c2958 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.21 dataimago-sync -->
+---
+format:
+  html:
+    page-layout: full
+    toc: false
+    sidebar: false
+---
+
+::::::::: {.lenis-slide}
+::::::: {.hero-section}
+:::::: {.grid}
+:::: {.g-col-12 .g-col-md-4 .logo-column}
+::: {.logo-container}
+![](assets/img/package_hex_logo.svg){width=500 .hero-logo}
+:::
+::::
+:::: {.g-col-12 .g-col-md-8 .g-start-md-5}
+::: {.hero-content-scroller data-lenis-animate="fade-left"}
+::: {.scroller-content}
+
+### {{PACKAGE_NAME}} {.content-item}
+
+{{PACKAGE_DESCRIPTION}}
+
+### Built with dataimago {.content-item}
+
+This package is built using the dataimago framework --- an AI-native application development framework for data science with ethical AI principles at its core.
+
+### R-First Workflows {.content-item}
+
+Familiar R interfaces wrap sophisticated web tools, providing modern development capabilities without leaving your preferred environment.
+
+:::
+:::
+::::
+::::::
+:::::::
+:::::::::
+
+:::::: {.lenis-slide}
+:::: {.cards-container}
+:::: {.cards-grid}
+
+::: {.feature-card}
+### R Package
+
+Complete function documentation and examples.
+
+[View Documentation](r_package.qmd)
+:::
+
+::: {.feature-card}
+### Ethical AI
+
+Built on dataimago's ethical AI framework with build-time enforcement.
+
+[Learn More](ethics.qmd)
+:::
+
+::: {.feature-card}
+### Design System
+
+Three-tier token architecture ensuring accessibility and cultural sensitivity.
+
+[Explore](design_system.qmd)
+:::
+
+::::
+::::
+::::::

package/dist/tokens.css

@@ -45,10 +45,12 @@
   --color-palette-copper-700: #913d15;
   --color-palette-copper-800: #753318;
   --color-palette-copper-900: #612b16;
-  --color-palette-accent-50: #fdf2f2;
-  --color-palette-accent-500: #b54a27;
-  --color-palette-accent-600: #9a3e20;
-  --color-palette-accent-700: #7d321a;
+  --color-palette-accent-50: #f0f8fc;
+  --color-palette-accent-300: #3498DB;
+  --color-palette-accent-400: #2980B9;
+  --color-palette-accent-500: #1f618d;
+  --color-palette-accent-600: #154d6f;
+  --color-palette-accent-700: #0f3a52;
   --color-palette-presentation-blue-50: #f0f8fc;
   --color-palette-presentation-blue-500: #3498DB;
   --color-palette-presentation-blue-600: #2980B9;
@@ -114,31 +116,75 @@
   --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
   --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
   --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1);
+  --color-dataviz-okabe-ito-orange: #E69F00;
+  --color-dataviz-okabe-ito-sky-blue: #56B4E9;
+  --color-dataviz-okabe-ito-bluish-green: #009E73;
+  --color-dataviz-okabe-ito-yellow: #F0E442;
+  --color-dataviz-okabe-ito-blue: #0072B2;
+  --color-dataviz-okabe-ito-vermillion: #D55E00;
+  --color-dataviz-okabe-ito-reddish-purple: #CC79A7;
+  --color-dataviz-categorical-1: #E69F00;
+  --color-dataviz-categorical-2: #56B4E9;
+  --color-dataviz-categorical-3: #009E73;
+  --color-dataviz-categorical-4: #F0E442;
+  --color-dataviz-categorical-5: #0072B2;
+  --color-dataviz-categorical-6: #D55E00;
+  --color-dataviz-categorical-7: #CC79A7;
 }
 
 :root, [data-bs-theme="light"] {
   --color-surface-page: #ededeb;
+  --color-surface-page: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-page-scrolled: #ededeb;
+  --color-surface-page-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-elevated: #f7f7f6;
+  --color-surface-elevated: color(display-p3 0.9686 0.9686 0.9651);
   --color-surface-sunken: #faf2e3;
+  --color-surface-sunken: color(display-p3 0.9749 0.9501 0.8963);
   --color-surface-navbar: #ededeb;
+  --color-surface-navbar: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-navbar-scrolled: #ededeb;
+  --color-surface-navbar-scrolled: color(display-p3 0.9294 0.9294 0.9223);
   --color-surface-code: #faf2e3;
-  --color-border-subtle: rgba(12, 10, 9, 0.08);
-  --color-border-moderate: rgba(12, 10, 9, 0.15);
-  --color-border-strong: rgba(12, 10, 9, 0.25);
-  --color-border-card: rgba(12, 10, 9, 0.15);
+  --color-surface-code: color(display-p3 0.9749 0.9501 0.8963);
+  --color-border-subtle: rgba(12, 10, 9, 0.45);
+  --color-border-subtle: color(display-p3 0.0457 0.0395 0.0358 / 0.45);
+  --color-border-moderate: rgba(12, 10, 9, 0.60);
+  --color-border-moderate: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
+  --color-border-strong: rgba(12, 10, 9, 0.75);
+  --color-border-strong: color(display-p3 0.0457 0.0395 0.0358 / 0.75);
+  --color-border-card: rgba(12, 10, 9, 0.60);
+  --color-border-card: color(display-p3 0.0457 0.0395 0.0358 / 0.60);
   --color-border-code: #d6d3d1;
+  --color-border-code: color(display-p3 0.8371 0.8278 0.8205);
   --color-content-primary: #14140f;
-  --color-content-secondary: #7c7c7c;
-  --color-content-muted: #78716c;
+  --color-content-primary: color(display-p3 0.0784 0.0784 0.0608);
+  --color-content-secondary: #6a6a6a;
+  --color-content-secondary: color(display-p3 0.4157 0.4157 0.4157);
+  --color-content-muted: #706964;
+  --color-content-muted: color(display-p3 0.4345 0.4127 0.3945);
   --color-content-inverse: #fdf9f2;
+  --color-content-inverse: color(display-p3 0.9894 0.977 0.9518);
   --color-interactive-primary: #434739;
+  --color-interactive-primary: color(display-p3 0.2656 0.2779 0.2287);
   --color-interactive-hover: #363a2e;
-  --color-interactive-accent: #b54a27;
+  --color-interactive-hover: color(display-p3 0.2146 0.2269 0.1848);
+  --color-interactive-accent: #1f618d;
+  --color-interactive-accent: color(display-p3 0.198 0.375 0.5385);
   --color-interactive-focus: #434739;
-  --color-presentation-accent: #3498DB;
-  --color-presentation-accent-hover: #2980B9;
+  --color-interactive-focus: color(display-p3 0.2656 0.2779 0.2287);
+  --color-presentation-accent: #3498db;
+  --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+  --color-presentation-accent-hover: #2980b9;
+  --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+  --color-vertical-accent-dissertation: #b87333;
+  --color-vertical-accent-dissertation: color(display-p3 0.7242 0.4389 0.1259);
+  --color-vertical-accent-rpkg: #3b82f6;
+  --color-vertical-accent-rpkg: color(display-p3 0.3047 0.5035 0.9338);
+  --color-vertical-accent-SGPc: #5a6310;
+  --color-vertical-accent-SGPc: color(display-p3 0.3595 0.3871 0.1309);
+  --color-brand-mark-red: #cc0000;
+  --color-brand-mark-red: color(display-p3 0.7331 0.1519 0.1019);
   --contrast-high: rgb(20, 20, 16);
   --contrast-readable: rgb(20, 20, 16);
   --contrast-medium: #7c7c7c;
@@ -146,36 +192,71 @@
   --shadow-subtle: 0 1px 2px 0 rgb(20 20 16 / 0.05);
   --shadow-moderate: 0 4px 6px -1px rgb(20 20 16 / 0.1);
   --shadow-prominent: 0 10px 15px -3px rgb(20 20 16 / 0.1);
-  --border-subtle: rgba(20, 20, 16, 0.1);
-  --border-moderate: rgba(20, 20, 16, 0.15);
+  --border-subtle: rgba(20, 20, 16, 0.47);
+  --border-moderate: rgba(20, 20, 16, 0.63);
   --border-focus: #3498DB;
   --navigation-hover-background: rgba(20, 20, 16, 0.05);
   --navigation-active-background: rgba(20, 20, 16, 0.1);
+  --color-dataviz-okabe-ito-black: #000000;
+  --color-dataviz-categorical-8: #000000;
+  --color-dataviz-uncertainty-outer: #D6D6D6;
+  --color-dataviz-uncertainty-union: #9E9E9E;
+  --color-dataviz-uncertainty-inner: #333333;
 }
 
 [data-bs-theme="dark"] {
   --color-surface-page: #141410;
+  --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-page-scrolled: #141410;
+  --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-elevated: #1c1917;
+  --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
   --color-surface-sunken: #0c0a09;
+  --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
   --color-surface-navbar: #141410;
+  --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-navbar-scrolled: #141410;
+  --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
   --color-surface-code: #1c1917;
-  --color-border-subtle: rgba(253, 249, 242, 0.08);
-  --color-border-moderate: rgba(253, 249, 242, 0.15);
-  --color-border-strong: rgba(253, 249, 242, 0.25);
-  --color-border-card: rgba(253, 249, 242, 0.15);
+  --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
+  --color-border-subtle: rgba(253, 249, 242, 0.45);
+  --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
+  --color-border-moderate: rgba(253, 249, 242, 0.60);
+  --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+  --color-border-strong: rgba(253, 249, 242, 0.75);
+  --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
+  --color-border-card: rgba(253, 249, 242, 0.60);
+  --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
   --color-border-code: #292524;
+  --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
   --color-content-primary: #fdf9f2;
+  --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
   --color-content-secondary: #a8a29e;
-  --color-content-muted: #78716c;
+  --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
+  --color-content-muted: #89827d;
+  --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
   --color-content-inverse: #0c0a09;
+  --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
   --color-interactive-primary: #98a384;
+  --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
   --color-interactive-hover: #7e8a6b;
-  --color-interactive-accent: #b54a27;
+  --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
+  --color-interactive-accent: #3498db;
+  --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
   --color-interactive-focus: #98a384;
-  --color-presentation-accent: #3498DB;
-  --color-presentation-accent-hover: #2980B9;
+  --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
+  --color-presentation-accent: #3498db;
+  --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+  --color-presentation-accent-hover: #2980b9;
+  --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+  --color-vertical-accent-dissertation: #ce8e5c;
+  --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
+  --color-vertical-accent-rpkg: #60a5fa;
+  --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
+  --color-vertical-accent-SGPc: #b2bf22;
+  --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
+  --color-brand-mark-red: #ff0000;
+  --color-brand-mark-red: color(display-p3 1 0 0);
   --contrast-high: rgb(237, 237, 235);
   --contrast-readable: rgb(237, 237, 235);
   --contrast-medium: #83838f;
@@ -183,37 +264,72 @@
   --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
   --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
   --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
-  --border-subtle: rgba(237, 237, 235, 0.1);
-  --border-moderate: rgba(237, 237, 235, 0.15);
+  --border-subtle: rgba(237, 237, 235, 0.47);
+  --border-moderate: rgba(237, 237, 235, 0.63);
   --border-focus: #4FC3F7;
   --navigation-hover-background: rgba(237, 237, 235, 0.05);
   --navigation-active-background: rgba(237, 237, 235, 0.1);
+  --color-dataviz-okabe-ito-black: #FDF9F2;
+  --color-dataviz-categorical-8: #FDF9F2;
+  --color-dataviz-uncertainty-outer: #333333;
+  --color-dataviz-uncertainty-union: #6B6B6B;
+  --color-dataviz-uncertainty-inner: #D6D6D6;
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:where(:not([data-bs-theme="light"])) {
     --color-surface-page: #141410;
+    --color-surface-page: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-page-scrolled: #141410;
+    --color-surface-page-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-elevated: #1c1917;
+    --color-surface-elevated: color(display-p3 0.1078 0.0985 0.0911);
     --color-surface-sunken: #0c0a09;
+    --color-surface-sunken: color(display-p3 0.0457 0.0395 0.0358);
     --color-surface-navbar: #141410;
+    --color-surface-navbar: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-navbar-scrolled: #141410;
+    --color-surface-navbar-scrolled: color(display-p3 0.0784 0.0784 0.0643);
     --color-surface-code: #1c1917;
-    --color-border-subtle: rgba(253, 249, 242, 0.08);
-    --color-border-moderate: rgba(253, 249, 242, 0.15);
-    --color-border-strong: rgba(253, 249, 242, 0.25);
-    --color-border-card: rgba(253, 249, 242, 0.15);
+    --color-surface-code: color(display-p3 0.1078 0.0985 0.0911);
+    --color-border-subtle: rgba(253, 249, 242, 0.45);
+    --color-border-subtle: color(display-p3 0.9894 0.977 0.9518 / 0.45);
+    --color-border-moderate: rgba(253, 249, 242, 0.60);
+    --color-border-moderate: color(display-p3 0.9894 0.977 0.9518 / 0.60);
+    --color-border-strong: rgba(253, 249, 242, 0.75);
+    --color-border-strong: color(display-p3 0.9894 0.977 0.9518 / 0.75);
+    --color-border-card: rgba(253, 249, 242, 0.60);
+    --color-border-card: color(display-p3 0.9894 0.977 0.9518 / 0.60);
     --color-border-code: #292524;
+    --color-border-code: color(display-p3 0.1581 0.1456 0.1418);
     --color-content-primary: #fdf9f2;
+    --color-content-primary: color(display-p3 0.9894 0.977 0.9518);
     --color-content-secondary: #a8a29e;
-    --color-content-muted: #78716c;
+    --color-content-secondary: color(display-p3 0.6547 0.6361 0.6215);
+    --color-content-muted: #89827d;
+    --color-content-muted: color(display-p3 0.5325 0.5107 0.4925);
     --color-content-inverse: #0c0a09;
+    --color-content-inverse: color(display-p3 0.0457 0.0395 0.0358);
     --color-interactive-primary: #98a384;
+    --color-interactive-primary: color(display-p3 0.604 0.6378 0.5291);
     --color-interactive-hover: #7e8a6b;
-    --color-interactive-accent: #b54a27;
+    --color-interactive-hover: color(display-p3 0.5029 0.5397 0.4313);
+    --color-interactive-accent: #3498db;
+    --color-interactive-accent: color(display-p3 0.3208 0.588 0.8369);
     --color-interactive-focus: #98a384;
-    --color-presentation-accent: #3498DB;
-    --color-presentation-accent-hover: #2980B9;
+    --color-interactive-focus: color(display-p3 0.604 0.6378 0.5291);
+    --color-presentation-accent: #3498db;
+    --color-presentation-accent: color(display-p3 0.3208 0.588 0.8369);
+    --color-presentation-accent-hover: #2980b9;
+    --color-presentation-accent-hover: color(display-p3 0.2638 0.495 0.7068);
+    --color-vertical-accent-dissertation: #ce8e5c;
+    --color-vertical-accent-dissertation: color(display-p3 0.8089 0.5486 0.3177);
+    --color-vertical-accent-rpkg: #60a5fa;
+    --color-vertical-accent-rpkg: color(display-p3 0.4405 0.6403 0.9545);
+    --color-vertical-accent-SGPc: #b2bf22;
+    --color-vertical-accent-SGPc: color(display-p3 0.7074 0.7474 0.2714);
+    --color-brand-mark-red: #ff0000;
+    --color-brand-mark-red: color(display-p3 1 0 0);
     --contrast-high: rgb(237, 237, 235);
     --contrast-readable: rgb(237, 237, 235);
     --contrast-medium: #83838f;
@@ -221,10 +337,15 @@
     --shadow-subtle: 0 1px 2px 0 rgb(237 237 235 / 0.03);
     --shadow-moderate: 0 4px 6px -1px rgb(237 237 235 / 0.05);
     --shadow-prominent: 0 10px 15px -3px rgb(237 237 235 / 0.4);
-    --border-subtle: rgba(237, 237, 235, 0.1);
-    --border-moderate: rgba(237, 237, 235, 0.15);
+    --border-subtle: rgba(237, 237, 235, 0.47);
+    --border-moderate: rgba(237, 237, 235, 0.63);
     --border-focus: #4FC3F7;
     --navigation-hover-background: rgba(237, 237, 235, 0.05);
     --navigation-active-background: rgba(237, 237, 235, 0.1);
+    --color-dataviz-okabe-ito-black: #FDF9F2;
+    --color-dataviz-categorical-8: #FDF9F2;
+    --color-dataviz-uncertainty-outer: #333333;
+    --color-dataviz-uncertainty-union: #6B6B6B;
+    --color-dataviz-uncertainty-inner: #D6D6D6;
   }
 }