@dataimago/css 0.1.0-alpha.16 → 0.1.0-alpha.19

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

@@ -0,0 +1,73 @@
+// @dataimago/css@0.1.0-alpha.19 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.19 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.19 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.19 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.19 dist/templates/quarto_website/ethics.qmd.template · sha256:fc151adb9c9fd9934a3c23ca5822eb6b05ca27795070ff7dbb26acd0e50ddbe5 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 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.19 dist/templates/quarto_website/index.qmd.template · sha256:fa09cd4cce412445d164a1ca1248c5080e03ee65db6e762e4bf2e543557c2958 · generated from tokens; do not edit · restore: npx -p @dataimago/css@0.1.0-alpha.19 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

@@ -116,6 +116,20 @@
   --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"] {
@@ -183,6 +197,11 @@
   --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"] {
@@ -250,6 +269,11 @@
   --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) {
@@ -318,5 +342,10 @@
     --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;
   }
 }

package/dist/tokens.scss

@@ -116,6 +116,20 @@
   --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"] {
@@ -183,6 +197,11 @@
   --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"] {
@@ -250,6 +269,11 @@
   --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) {
@@ -318,5 +342,10 @@
     --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;
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dataimago/css",
-  "version": "0.1.0-alpha.16",
+  "version": "0.1.0-alpha.19",
   "description": "Compiled CSS and Tailwind preset for the dataimago ethical AI design system",
   "license": "MIT",
   "repository": {
@@ -18,14 +18,22 @@
     "./dataimago.min.css": "./dist/dataimago.min.css",
     "./tokens.css": "./dist/tokens.css",
     "./tailwind-preset": "./dist/tailwind-preset.js",
+    "./quarto/*": "./dist/quarto/*",
+    "./latex/*": "./dist/latex/*",
+    "./dataviz/*": "./dist/dataviz/*",
+    "./templates/*": "./dist/templates/*",
+    "./outputs.json": "./dist/outputs.json",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "dataimago-sync": "./dist/bin/dataimago-sync.mjs"
+  },
   "files": [
     "dist",
     "README.md"
   ],
   "dependencies": {
-    "@dataimago/tokens": "^0.1.0-alpha.16"
+    "@dataimago/tokens": "^0.1.0-alpha.18"
   },
   "devDependencies": {
     "sass": "^1.69.0"