jekyll-theme-centos 2.52.0.beta.102 → 2.52.0.beta.104

data/_sass/base/_variables.scss

@@ -20,39 +20,36 @@
 // ────────────────────────────────────────────────────────────────────────────
 // Function: Get saturation multiplier for a given shade grade
 // ────────────────────────────────────────────────────────────────────────────
-// For dark shades (800-950), multiply saturation to prevent desaturation
-// For medium shades (600-700), keep saturation as-is (already good)
-// For light shades (50-400), reduce saturation for softer appearance on light bg
-// For base shade (500), use normal saturation
-//
-// Option 2: Target wallpaper saturation (100%) for grade 950
-// Using 2.0x multiplier to reach 100% from base ~50% saturation
+// Light shades (50-400) get less saturated for a softer look on a light
+// background; dark shades (800-950) get more, to counter the desaturation
+// Bootstrap's own algorithm would otherwise produce. The 950 multiplier
+// (2.0x) pushes toward the wallpaper's 100% saturation, but only reaches it
+// for a base color already at 50%+ saturation — see saturated-shade() below
+// for how this plays out for each CentOS color.
 @function saturation-multiplier($shade) {
   @if $shade <= 400 {
-    @return 0.6;    // Light shades (50-400): reduce saturation for soft appearance
+    @return 0.6;
   } @else if $shade == 500 {
-    @return 1.0;    // Base color: keep normal saturation
+    @return 1.0;
   } @else if $shade == 600 {
-    @return 1.0;    // Keep as-is, already perceptually good
+    @return 1.0;
   } @else if $shade == 700 {
-    @return 1.0;    // Keep as-is, already perceptually good
+    @return 1.0;
   } @else if $shade == 800 {
-    @return 1.1;    // Subtle boost for slight vibrancy increase
+    @return 1.1;
   } @else if $shade == 900 {
-    @return 1.8;    // Significant increase to match wallpaper saturation
+    @return 1.8;
   } @else if $shade == 950 {
-    @return 2.0;    // Ensure 100% saturation for all colors (wallpaper-anchored)
+    @return 2.0;
   } @else {
-    @return 1.0;    // Default fallback
+    @return 1.0;
   }
 }
 
 // ────────────────────────────────────────────────────────────────────────────
 // Function: Calculate target lightness for a shade grade
 // ────────────────────────────────────────────────────────────────────────────
-// Returns the lightness percentage for each shade number (50-950)
-// Creates smooth interpolation from light to dark
-// Option 2: Target 8% lightness for grade 950 (matches wallpaper ~16% brightness)
+// Interpolates lightness smoothly from light (grade 50) to dark (grade 950).
 @function target-lightness($shade, $base-lightness) {
   @if $shade < 500 {
     // Light shades: interpolate from 95% (very light) down to base lightness
@@ -67,8 +64,7 @@
     // Grade 900: transition toward wallpaper lightness
     @return $base-lightness - math.div(900 - 500, 500) * ($base-lightness - 10%);
   } @else if $shade == 950 {
-    // Grade 950: target 8% lightness (wallpaper-aligned, matches #1A0029)
-    // All grade-950 colors use 8% lightness to match wallpaper depth
+    // Every color's grade-950 targets the wallpaper's 8% lightness.
     @return 8%;
   } @else {
     // Default fallback
@@ -77,29 +73,21 @@
 }
 
 // ────────────────────────────────────────────────────────────────────────────
-// Function: Generate saturation-normalized shade
+// Function: Generate a saturation-normalized shade
 // ────────────────────────────────────────────────────────────────────────────
-// Main function that creates shades with maintained saturation
-// Extracts HSL from base color, applies multipliers, returns HSL shade
-// Special case: purple-950 returns wallpaper-anchored #1A0029 (exact match)
+// Extracts HSL from the base color, applies the multipliers above, and
+// returns the shade as HSL. Kept as a function rather than hardcoded shades
+// so every color family follows the same rule and stays internally
+// consistent if a base color ever changes.
+//
+// Grade 950 targets the wallpaper's saturation and lightness (see the top
+// of this file), but only reaches it for a base color already saturated
+// enough for the 2.0x multiplier to hit 100% — orange, blue, and green all
+// do. Purple's base saturation is too low, so purple-950 lands close to the
+// wallpaper's dark corner rather than matching it exactly; see
+// src/YAML/color.yml or the generated src/SASS/_light-dark.scss for its
+// actual current value.
 @function saturated-shade($color, $shade) {
-  // ────────────────────────────────────────────────────────────────────────────
-  // Function: Generate saturation-normalized shade with wallpaper alignment
-  // ────────────────────────────────────────────────────────────────────────────
-  // Design Principle: Grade-950 colors maintain native hues while achieving
-  // wallpaper aesthetic through shared saturation (100%) and lightness (~8%)
-  //
-  // Wallpaper Reference: #1A0029 (100% saturation, 8% lightness)
-  // Grade-950 Alignment: All colors achieve 100% saturation + 8% lightness
-  // Result: UI colors share wallpaper depth while maintaining brand identity
-  //
-  // Why function-based instead of hardcoded?
-  // - Maintains hue consistency within each color family
-  // - Preserves algorithmic cohesion across all 4 color families
-  // - Achieves wallpaper correlation through saturation/brightness alignment
-  // - Creates unified visual language respecting color family rules
-  // ────────────────────────────────────────────────────────────────────────────
-
   // Extract current HSL values from the color
   $current-hue: hue($color);
   $current-saturation: saturation($color);
@@ -128,38 +116,25 @@ $centos-base-colors: (
 $centos-color-shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950;
 
 // --------------------------------------------------------------------------------
-// Theme Colors - Option D: Orange Family Variants for Brand Coherence
-// All colors verified to meet WCAG 2.1 standards with color theory compliance.
-//
-// CentOS brand colors are directly integrated as semantic colors to reinforce
-// brand identity and follow international color standards (ISO 3864). Warning
-// uses a darkened centos-orange variant to communicate caution urgency while
-// maintaining brand coherence. Success uses darkened centos-green for positive
-// outcomes. Brand colors remain from official CentOS specification.
-//
-// Color Theory Rationale:
-// - Orange = Caution/Warning (warm, attention-getting, ISO standard)
-// - Blue = Information (cool, trustworthy, ISO standard)
-// - Red = Danger (alert, critical, ISO standard)
-// - Green = Success (positive, safe, ISO standard)
-// - Purple = Brand primary (custom, strong visual identity)
-//
-// Mapping:
-// - Primary: centos-purple #A54C93 (brand primary - balanced for visual prominence)
-// - Secondary: centos-orange #B27800 (brand secondary - balanced for color harmony)
-// - Success: centos-green #4A8400 darkened (positive outcomes, from #84B800)
-// - Warning: centos-orange #C86A00 darkened (caution/attention, warm tone - correct psychology)
-// - Danger: External red #C62828 (critical/destructive - no CentOS equivalent)
-// - Info: External blue #1976D2 (informational - distinguishes from warning)
+// Theme colors
+// --------------------------------------------------------------------------------
+// Primary and secondary come straight from the CentOS brand palette. Success
+// and warning are darkened centos-green/centos-orange, keeping them on-brand
+// while following the ISO 3864 color meanings (green = success, orange =
+// caution). Danger and info have no CentOS equivalent, so they use ISO
+// 3864's own red and blue instead.
 //
-// See color.md documentation for detailed contrast ratio and psychology analysis.
+// All four are WCAG AA verified against both white and black text. After
+// changing one, re-check with:
+//   python3 scripts/colors/tools/calculate-contrast.py "#FFFFFF" "<hex>"
+// See color.md for the full contrast and color-psychology write-up.
 // --------------------------------------------------------------------------------
 $primary:   map-get($centos-base-colors, 'centos-purple');
-$secondary: map-get($centos-base-colors, 'centos-orange');  // #B27800 - CentOS brand secondary
-$success:   #4A8400; // Darkened centos-green: 4.57:1 (white), 4.59:1 (black) - WCAG AA ✓
-$warning:   #C86A00; // Darkened centos-orange: 3.81:1 (white), 8.21:1 (black) - warm, urgent
-$danger:    #C62828; // External red: 5.39:1 (white), 3.89:1 (black) - WCAG AA ✓
-$info:      #1976D2; // External blue: 4.60:1 (white), 4.56:1 (black) - WCAG AA ✓
+$secondary: map-get($centos-base-colors, 'centos-orange');  // CentOS brand secondary
+$success:   #4A8400; // Darkened centos-green
+$warning:   #C86A00; // Darkened centos-orange - warm, urgent
+$danger:    #C62828; // External red - no CentOS equivalent
+$info:      #1976D2; // External blue - distinguishes from warning
 
 // Light and dark are automatically generated from centos-purple using the saturation-normalized
 // shade system. Instead of assigning function results to variables here (which causes Dart Sass
@@ -174,10 +149,17 @@ $info:      #1976D2; // External blue: 4.60:1 (white), 4.56:1 (black) - WCAG AA
 $white:     #ffffff;
 $black:     #000000;
 
+// Bootstrap's default inline-code color isn't part of this site's brand
+// and fails WCAG AA against the code background in _customization.scss.
+// This is centos-purple-700.
+$code-color: #673259;
+
 // Background and Body variables
 // These control the default background and text colors for the entire page.
 $body-bg: $white;
-$body-color: #1c0d19; // centos-purple-900
+$body-color: #1c0d19; // purple-tinted near-black; matches the text_color_hex value
+                       // paired with the light centos-purple shades (50-400) in
+                       // src/YAML/color.yml
 
 // Bootstrap's color-contrast() function (used by .text-bg-* utilities like
 // .text-bg-light) picks between $color-contrast-dark/-light to pair with a
@@ -188,8 +170,8 @@ $color-contrast-dark: $body-color;
 
 // Border and Emphasis colors
 // Used for borders, dividers, and higher-contrast text.
-$border-color: #e8d9e5;   // centos-purple-100
-$emphasis-color: #d1b3cb; // centos-purple-200
+$border-color: #e8d9e5;   // light purple-family tint, for borders and dividers
+$emphasis-color: #d1b3cb; // light purple-family tint, higher-contrast than $border-color
 
 // Dropdown menu
 $dropdown-dark-bg: $dark;

data/assets/css/base/stylesheet.min.scss

@@ -3,7 +3,7 @@
 
 /*!
  * CentOS Customization
- * Copyright 2025 Alain Reguera Delgado
+ * Copyright (c) 2026 Alain Reguera Delgado
  * Licensed under MIT License (https://opensource.org/licenses/MIT)
  *
  * Customized CSS extensions for the CentOS project built on top of Bootstrap.
@@ -42,6 +42,8 @@
 // 6. Add additional custom code here
 @import "base/customization";
 @import "base/download";
+@import "base/preview";
+@import "base/highlight-theme";
 
 // 7. Third-party component theme overrides (must load after our own
 // customizations so component-specific corrections win the cascade).

data/assets/js/base/backtotop.js

@@ -15,8 +15,8 @@ document.addEventListener('DOMContentLoaded', () => {
   }
 
   const config = {
-    diameter: parseInt(scriptTag.dataset.diameter || '56', 10),
-    backgroundColor: scriptTag.dataset.backgroundColor || '#A54C93',
+    diameter: parseInt(scriptTag.dataset.diameter || '44', 10),
+    backgroundColor: scriptTag.dataset.backgroundColor || '#A14F8C',
     textColor: scriptTag.dataset.textColor || '#ffffff'
   }
 

data/assets/js/base/copyvalue.js

@@ -126,6 +126,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const handlers = new WeakMap()
 
+  // .copy-btn is a real <button>, so the browser already turns Enter and
+  // Space into a native click — one listener covers mouse, keyboard, and
+  // assistive-tech activation.
   document.addEventListener('click', function (e) {
     const button = e.target.closest('.copy-btn')
     if (!button) return

data/assets/js/base/datatable.js

@@ -1,12 +1,10 @@
-// DataTables Initialization
-// Reads configuration from data attributes on this script tag
-// Applied via datatable.html.liquid template with data attributes
-
-// Waits for DOMContentLoaded (like highlight.js) rather than running
-// synchronously at defer time, so highlight.js's 'code' class-adding pass
-// (also on DOMContentLoaded, registered first since its script tag comes
-// first in the document) always runs before DataTables prunes off-page
-// rows from the DOM — otherwise their <code> elements never get 'hljs'.
+// Reads its configuration from data attributes datatable.html.liquid sets
+// on this script tag.
+
+// Waits for DOMContentLoaded, same as highlight.js, whose script tag comes
+// first in the document and so runs first: this ordering makes sure every
+// <code> element gets its 'hljs' class before DataTables prunes off-page
+// rows from the DOM.
 document.addEventListener('DOMContentLoaded', () => {
   if (typeof DataTable === 'undefined') {
     console.warn('datatable: DataTable not available')
@@ -41,7 +39,19 @@ document.addEventListener('DOMContentLoaded', () => {
       wrapper.appendChild(tableEl)
     }
 
+    // DataTables' autoWidth measures every cell in a detached, unconstrained
+    // clone before the table is laid out, so a `.long-value` cell's
+    // `overflow-wrap: anywhere` (_customization.scss) never gets a chance
+    // to wrap during that measurement — DataTables sees the value's full
+    // one-line length and gives its column that much width, starving every
+    // other column. Detected by content, not column position or count, so
+    // it holds regardless of which column the value ends up in or how many
+    // columns the table has. Skipping autoWidth here lets the browser's own
+    // table layout size columns instead, which does respect the wrap.
+    const hasWrappingLongValue = tableEl.querySelector('.long-value') !== null
+
     new DataTable(tableEl, {
+      autoWidth: !hasWrappingLongValue,
       paging: enabledCondition,
       info: enabledCondition,
       searching: enabledCondition,
@@ -55,6 +65,14 @@ document.addEventListener('DOMContentLoaded', () => {
           next: '<i class="fa-solid fa-chevron-right" aria-hidden="true"></i>',
           last: '<i class="fa-solid fa-angles-right" aria-hidden="true"></i>'
         }
+      },
+      // DataTables puts the keyboard-focusable sort trigger on a nested
+      // `.dt-column-order` span, not the `<th>` itself, so focus-ring has to
+      // go there. initComplete runs once the header row exists, which is
+      // the earliest point that span can be selected.
+      initComplete: function () {
+        this.api().table().header().querySelectorAll('.dt-column-order')
+          .forEach(handle => handle.classList.add('focus-ring'))
       }
     })
   })

data/assets/js/base/highlight.js

@@ -1,17 +1,91 @@
-// Highlight.js Initialization
-// Initializes syntax highlighting on all code blocks with 'hljs' class
-// Enables copy-to-clipboard functionality via highlightjs-copy plugin
-
-// This script tag lives in <head>, before <body> exists. defer normally
-// delays execution until after parsing, but consumers that inline this
-// file (e.g. monolith bundling) drop the src that defer depends on, so the
-// wait for DOMContentLoaded is done explicitly instead of relying on it.
+// Colorizes every <pre><code> block, then gives any block not already
+// inside a preview component the same toolbar (language label + copy
+// button) preview.html.liquid renders for its own code row. This way
+// every code sample looks and behaves the same, whether it's a plain
+// fenced Markdown block or built with the preview component. A wrapped
+// block has no demo row, since a plain fenced block has no demo to show.
+
+// Waits for DOMContentLoaded explicitly instead of relying on `defer`:
+// this script tag lives in <head>, and a consumer that inlines the file
+// (e.g. monolith bundling) drops the `src` that `defer` depends on.
 document.addEventListener('DOMContentLoaded', () => {
-  if (typeof hljs === 'undefined' || typeof CopyButtonPlugin === 'undefined') {
-    console.warn('highlight: hljs or CopyButtonPlugin not available')
+  if (typeof hljs === 'undefined') {
+    console.warn('highlight: hljs not available')
     return
   }
-  document.querySelectorAll('code').forEach(el => el.classList.add('hljs'))
-  hljs.addPlugin(new CopyButtonPlugin())
+
+  // Records each block's declared language (a ```language fence becomes a
+  // language-<x> class) before hljs.highlightAll() runs. highlightAll()
+  // guesses a language for any block missing one, and that guess is often
+  // wrong (a short Liquid snippet can easily read as Bash) — only a
+  // language the author actually wrote should show as the toolbar label.
+  //
+  // Scoped to `pre code`: an inline `code` span getting the `.hljs` class
+  // would pull in _highlight-theme.scss's block-code color reset, stomping
+  // the separate inline-code chip style in _customization.scss.
+  const declaredLanguages = new WeakMap()
+  document.querySelectorAll('pre code').forEach(el => {
+    el.classList.add('hljs')
+    const languageClass = [...el.classList].find(c => c.startsWith('language-'))
+    if (languageClass) declaredLanguages.set(el, languageClass.replace('language-', ''))
+  })
+
   hljs.highlightAll()
+
+  document.querySelectorAll('pre code.hljs').forEach(codeEl => {
+    const preEl = codeEl.parentElement
+    if (!preEl || preEl.closest('.preview-code')) return
+
+    const language = declaredLanguages.get(codeEl) || ''
+
+    const wrapper = document.createElement('div')
+    wrapper.className = 'preview mb-3 border rounded overflow-hidden'
+
+    // No border-top: the toolbar is always the first row here (a wrapped
+    // block has no demo row above it), so a top border would double up
+    // against the outer .preview border.
+    const toolbar = document.createElement('div')
+    toolbar.className = 'preview-toolbar m-0 p-2 border-bottom border-centos-purple-100'
+
+    if (language) {
+      const languageEl = document.createElement('span')
+      languageEl.className = 'preview-language small font-monospace text-body-secondary text-uppercase'
+      languageEl.textContent = language
+      toolbar.appendChild(languageEl)
+    }
+
+    const actions = document.createElement('div')
+    actions.className = 'preview-actions'
+
+    const copyBtn = document.createElement('button')
+    copyBtn.setAttribute('type', 'button')
+    copyBtn.className = 'copy-btn focus-ring preview-copy'
+    copyBtn.setAttribute('data-bs-toggle', 'tooltip')
+    copyBtn.setAttribute('data-bs-title', 'Copy code')
+    copyBtn.setAttribute('data-copy-value', codeEl.textContent)
+    copyBtn.setAttribute('aria-label', 'Copy code')
+    copyBtn.innerHTML = '<i class="fa-regular fa-copy"></i>'
+    actions.appendChild(copyBtn)
+    toolbar.appendChild(actions)
+
+    const codeRow = document.createElement('div')
+    codeRow.className = 'preview-code p-0 m-0'
+
+    // Matches the p-2 preview.html.liquid puts on its own <pre> — same
+    // padding for a code block whether it came from a plain fenced
+    // Markdown block or the preview component.
+    preEl.classList.add('p-2')
+
+    preEl.replaceWith(wrapper)
+    wrapper.appendChild(toolbar)
+    codeRow.appendChild(preEl)
+    wrapper.appendChild(codeRow)
+
+    // init-tooltips.js already made its one-time pass before this button
+    // existed, so its tooltip has to be initialized here instead — the
+    // same thing preview.html.liquid's server-rendered copy buttons need.
+    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip) {
+      new bootstrap.Tooltip(copyBtn)
+    }
+  })
 })

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: jekyll-theme-centos
 version: !ruby/object:Gem::Version
-  version: 2.52.0.beta.102
+  version: 2.52.0.beta.104
 platform: ruby
 authors:
 - Alain Reguera Delgado
@@ -317,6 +317,7 @@ files:
 - _data/base/navindex_schema.yml
 - _data/base/ogp.yml
 - _data/base/ogp_schema.yml
+- _data/base/preview_schema.yml
 - _data/base/project.yml
 - _data/base/project_schema.yml
 - _data/base/script_schema.yml
@@ -340,6 +341,7 @@ files:
 - _includes/base/calendar.html.liquid
 - _includes/base/card.html.liquid
 - _includes/base/color-table.html.liquid
+- _includes/base/configuration_variables-default-cell.html.liquid
 - _includes/base/configuration_variables-nested.html.liquid
 - _includes/base/configuration_variables.html.liquid
 - _includes/base/content.html.liquid
@@ -365,6 +367,7 @@ files:
 - _includes/base/navbar.html.liquid
 - _includes/base/navindex.html.liquid
 - _includes/base/ogp.html.liquid
+- _includes/base/preview.html.liquid
 - _includes/base/project.html.liquid
 - _includes/base/shortcut.html.liquid
 - _includes/base/social.html.liquid
@@ -379,8 +382,10 @@ files:
 - _sass/base/_customization.scss
 - _sass/base/_datatable.scss
 - _sass/base/_download.scss
+- _sass/base/_highlight-theme.scss
 - _sass/base/_light-dark.scss
 - _sass/base/_maps.scss
+- _sass/base/_preview.scss
 - _sass/base/_theme-colors.scss
 - _sass/base/_variables.scss
 - _sass/bootstrap/_accordion.scss