jekyll-theme-centos 2.52.0.beta.101 → 2.52.0.beta.103

data/_includes/base/preview.html.liquid

@@ -0,0 +1,119 @@
+{% comment %}
+================================================================================
+Template: Preview Box Component
+Purpose: Puts a live demo, a toolbar, and a code sample in one bordered
+box, as up to three stacked rows.
+
+Behavior:
+- Pass `language` or `code`, and the template renders all three rows —
+  demo (`.preview-content`), toolbar with a language label and copy
+  button (`.preview-toolbar`), and code (`.preview-code`) — wrapped in
+  `<div class="preview ...">`. A row with nothing to show is skipped.
+- Pass neither, and the template renders a single plain
+  `<div class="{{ class }}">{{ content }}</div>`, so a caller that only
+  needs a demo wrapper gets one without a toolbar or code row.
+- Each render mode has its own default outer-box styling (padded and
+  tinted for the plain fallback, bordered and flush for the three-row
+  box). A `class` the caller passes replaces that default entirely.
+- The copy button reuses the site-wide `.copy-btn` click handler
+  (src/JS/copyvalue.js), loaded by copyvalue.html.liquid.
+- Highlight.js colors the code; this template only adds the
+  `language-{{ language }}` class the highlighter reads. The toolbar
+  label shows uppercase through `language_class`'s `text-uppercase`; the
+  value passed in stays lowercase to match that class.
+
+Optional Inputs:
+- class: CSS classes for the outer `<div>`.
+- content / content_class: The demo row's HTML (a caller-built `capture`
+  block) and its wrapper's classes.
+- language / language_class: The toolbar's language label and its
+  classes. Also becomes the `language-{{ language }}` class on the code
+  row's `<code>` tag.
+- copy_class: Extra classes on the copy button. Use `d-none` to hide it
+  without removing `code`. Only shows when `code` is set.
+- code / code_class: The code row's raw text (HTML-escaped automatically)
+  and its wrapper's classes.
+================================================================================
+{% endcomment %}
+
+{%- assign with_preview_schema = site.data.base.preview_schema.properties %}
+
+{%- assign preview_class          = include.class          | default: with_preview_schema.class.default %}
+{%- assign preview_content        = include.content         | default: with_preview_schema.content.default %}
+{%- assign preview_content_class  = include.content_class   | default: with_preview_schema.content_class.default %}
+{%- assign preview_language       = include.language        | default: with_preview_schema.language.default %}
+{%- assign preview_language_class = include.language_class  | default: with_preview_schema.language_class.default %}
+{%- assign preview_copy_class     = include.copy_class      | default: with_preview_schema.copy_class.default %}
+{%- assign preview_code           = include.code             | default: with_preview_schema.code.default %}
+{%- assign preview_code_class     = include.code_class       | default: with_preview_schema.code_class.default %}
+
+{%- comment %} === Presentation === {% endcomment %}
+
+{%- comment %} --- Row visibility --- {% endcomment %}
+{%- assign preview_show_code = false %}
+{%- if preview_code != "" %}
+  {%- assign preview_show_code = true %}
+{%- endif %}
+{%- assign preview_show_toolbar = false %}
+{%- if preview_language != "" or preview_show_code %}
+  {%- assign preview_show_toolbar = true %}
+{%- endif %}
+{%- assign preview_multirow = false %}
+{%- if preview_show_toolbar %}
+  {%- assign preview_multirow = true %}
+{%- endif %}
+
+{%- comment %} --- Outer container: use the default multirow look, unless the caller set their own `class` --- {% endcomment %}
+{%- if preview_multirow %}
+  {%- unless include.class %}
+    {%- assign preview_class = "mb-3 border rounded overflow-hidden" %}
+  {%- endunless %}
+{%- endif %}
+
+{%- comment %} --- Row 1: Live demo --- {% endcomment %}
+{%- capture html_preview_content %}
+  {%- if preview_content != "" %}
+  <div class="preview-content{% if preview_content_class != "" %} {{ preview_content_class }}{% endif %}">
+  {{- preview_content -}}
+  </div>
+  {%- endif %}
+{%- endcapture %}
+
+{%- comment %} --- Row 2: Toolbar (language label + copy button) --- {% endcomment %}
+{%- capture html_preview_toolbar %}
+  {%- if preview_show_toolbar %}
+  <div class="preview-toolbar m-0 p-2{% if preview_content != "" %} border-top{% endif %}{% if preview_show_code %} border-bottom{% endif %} border-centos-purple-100">
+    {%- if preview_language != "" %}<span class="preview-language{% if preview_language_class != "" %} {{ preview_language_class }}{% endif %}">{{ preview_language }}</span>{%- endif %}
+    <div class="preview-actions">
+      {%- if preview_show_code %}
+      <button type="button" class="copy-btn focus-ring preview-copy{% if preview_copy_class != "" %} {{ preview_copy_class }}{% endif %}" data-bs-toggle="tooltip" data-bs-title="Copy code" data-copy-value="{{ preview_code | escape }}" aria-label="Copy code">
+        <i class="fa-regular fa-copy"></i>
+      </button>
+      {%- endif %}
+    </div>
+  </div>
+  {%- endif %}
+{%- endcapture %}
+
+{%- comment %} --- Row 3: Code sample --- {% endcomment %}
+{%- capture html_preview_code %}
+  {%- if preview_show_code %}
+  <div class="preview-code{% if preview_code_class != "" %} {{ preview_code_class }}{% endif %}">
+    <pre class="p-2"><code{% if preview_language != "" %} class="language-{{ preview_language }}"{% endif %}>{{ preview_code | escape }}</code></pre>
+  </div>
+  {%- endif %}
+{%- endcapture %}
+
+{%- comment %} --- HTML --- {% endcomment -%}
+{%- if preview_multirow %}
+<div class="preview {{ preview_class }}">
+{{- html_preview_content | strip -}}
+{{- html_preview_toolbar | strip -}}
+{{- html_preview_code | strip -}}
+</div>
+{%- else %}
+<div class="{{ preview_class }}">
+{{- preview_content -}}
+</div>
+{%- endif %}
+{%- comment %} trim trailing output {% endcomment -%}

data/_sass/base/_calendar.scss

@@ -130,7 +130,8 @@ body .ec .ec-button:not(:disabled):hover:not(.ec-active) {
 // the library's LTR/RTL mirroring transform, sized for the old glyph; our
 // `body .ec` prefix out-specifies its `[dir=rtl]` variant too. Coupled to
 // FontAwesome's default "css" mode and "Font Awesome 7 Free" family
-// (with_fontawesome_data.version default 7.0.1) — revisit if either changes.
+// (see src/YAML/fontawesome_schema.yml for the current default version) —
+// revisit if either changes.
 //
 // .ec-icon also needs resizing: the library sizes it at a fixed 1em for the
 // old 0.5em glyph. `1.25em` matches FontAwesome's default icon width;

data/_sass/base/_customization.scss

@@ -9,18 +9,12 @@
 // CSS Custom Properties (currently unused)
 // ================================================================================
 // Not read anywhere — head.html.liquid computes its own scroll-offset values
-// inline from Liquid data instead, and the copy-button icon size below is
-// hardcoded rather than referencing --highlight-icon-width/height. Kept as a
-// record of the values those should stay in sync with.
+// inline from Liquid data instead.
 :root {
   // Breaking News Component
   --breakingnews-alert-height: 31px;
   --navbar-height: 42px;
   --heading-margin-top: 48px;
-
-  // Highlight.js Icon Sizing
-  --highlight-icon-width: 24px;
-  --highlight-icon-height: 24px;
 }
 
 body {
@@ -297,7 +291,17 @@ main {
   // Copy Value Component
   // --------------------------------------------------------------------------------
   .content {
+    // `.copy-btn` is a real <button>, so it gets native focus and
+    // Enter/Space activation. These rules restyle it as a plain icon
+    // trigger. Border, background, and padding reset separately below,
+    // scoped to skip `.input-group-text.copy-btn` (checksum and SRI-hash
+    // rows), which keeps Bootstrap's own addon box styling instead.
     .copy-btn {
+      appearance: none;
+      -webkit-appearance: none;
+      margin: 0;
+      font: inherit;
+      line-height: inherit;
       cursor: pointer;
       color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
       text-decoration: none;
@@ -307,62 +311,54 @@ main {
       }
     }
 
+    .copy-btn:not(.input-group-text) {
+      border: 0;
+      background: none;
+      padding: 0;
+    }
+
     .alert .copy-btn {
       color: var(--bs-alert-link-color);
     }
-  }
 
-  // --------------------------------------------------------------------------------
-  // Highlightjs-copy
-  // --------------------------------------------------------------------------------
-  .content {
-    code.hljs {
-      border-radius: var(--bs-border-radius-lg);
+    // --------------------------------------------------------------------------------
+    // Inline code
+    // --------------------------------------------------------------------------------
+    // Bootstrap's inline `code` sets a text color ($code-color) but no
+    // background, so it barely stands out from surrounding text. This adds
+    // a muted background chip: padding, border-radius, and the same light
+    // background as the preview toolbar (_preview.scss's centos-purple-50);
+    // a darker shade reads as too strong next to body text.
+    //
+    // Code inside .preview-code is excluded — it's a block sample with its
+    // own background and padding already (_preview.scss).
+    code {
+      padding: 0.1em 0.4em;
+      background-color: var(--bs-centos-purple-50);
+      border-radius: var(--bs-border-radius);
     }
-    pre {
-      .hljs {
-        max-height: 50vh;
-        overflow: auto;
-      }
-      .hljs-copy-button {
-        top: 0.2rem;
-        right: 0.2rem;
-        border-radius: var(--bs-border-radius-lg);
-      }
 
-      .hljs-copy-button:not([data-copied="true"])::before {
-        mask-size: 100% 100%;
-      }
-
-      .hljs-copy-button[data-copied='true'] {
-        color: transparent !important;
-        font-size: 0 !important;
-        text-indent: -9999px !important;
-        width: 1.85rem !important; /* Set a fixed width for the button */
-        height: 1.85rem !important; /* Set a fixed height for the button */
-        position: relative !important; /* Required for absolute positioning of the SVG */
-
-      }
-      .hljs-copy-button[data-copied='true']::after {
-        content: "";
-        background-repeat: no-repeat;
-        background-size: contain;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-        width: 1rem; /* Adjust icon size as needed */
-        height: 1rem; /* Adjust icon size as needed */
-      }
-      code {
-        border: 1px;
-        border-color: var(--bs-light-border-subtle);
-        border-style: solid;
-      }
+    .preview-code code {
+      padding: 0;
+      background-color: transparent;
+      border-radius: 0;
     }
   }
 }
 
+// --------------------------------------------------------------------------------
+// Focus Ring Utility
+// --------------------------------------------------------------------------------
+// Bootstrap's `.focus-ring` utility draws its ring on `:focus`, including
+// mouse clicks. Every theme component that uses the class (copy buttons,
+// links, card actions, navbar items, download buttons) needs the ring to
+// show only on keyboard focus, so this single rule suppresses it whenever
+// `:focus-visible` wouldn't otherwise match — instead of re-deriving
+// `:focus-visible` behavior per component.
+.focus-ring:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 // --------------------------------------------------------------------------------
 // Navbar-dependent scroll offset (fixed-top navbar only)
 // --------------------------------------------------------------------------------

data/_sass/base/_highlight-theme.scss

@@ -0,0 +1,102 @@
+// ================================================================================
+// Highlight.js syntax colors
+// ================================================================================
+// Colors highlight.js's token classes with this site's CentOS palette,
+// grouped by meaning — keyword, title, string, and so on — instead of
+// Bootstrap's semantic roles. Every color meets WCAG AA contrast against
+// the code background.
+//
+// Tag and attribute markup (HTML and XML structure) keeps the plain body
+// text color, matching highlight.js's own default theme.
+//
+// The CentOS palette has no red. Removed diff lines use Bootstrap's
+// danger color instead; added diff lines use CentOS green.
+// ================================================================================
+
+main {
+  .content {
+    .hljs {
+      color: var(--bs-body-color);
+      background: transparent;
+    }
+
+    .hljs-tag,
+    .hljs-punctuation,
+    .hljs-tag .hljs-name,
+    .hljs-tag .hljs-attr {
+      color: var(--bs-body-color);
+    }
+
+    // Keywords
+    .hljs-keyword,
+    .hljs-selector-tag,
+    .hljs-attribute,
+    .hljs-doctag,
+    .hljs-strong {
+      color: var(--bs-centos-purple-700);
+      font-weight: bold;
+    }
+
+    // Titles: function and class names being declared
+    .hljs-title,
+    .hljs-section,
+    .hljs-name {
+      color: var(--bs-centos-blue-500);
+      font-weight: bold;
+    }
+
+    // Strings
+    .hljs-string,
+    .hljs-template-tag,
+    .hljs-quote {
+      color: var(--bs-centos-green-800);
+    }
+
+    // Numbers, types, and meta (decorators, shebang lines)
+    .hljs-type,
+    .hljs-number,
+    .hljs-selector-id,
+    .hljs-selector-class,
+    .hljs-meta,
+    .hljs-meta .hljs-string {
+      color: var(--bs-centos-orange-800);
+    }
+
+    // Built-ins, literals, variables, operators, regexp
+    .hljs-built_in,
+    .hljs-bullet,
+    .hljs-code,
+    .hljs-literal,
+    .hljs-regexp,
+    .hljs-symbol,
+    .hljs-variable,
+    .hljs-template-variable,
+    .hljs-link,
+    .hljs-selector-attr,
+    .hljs-operator,
+    .hljs-selector-pseudo {
+      color: var(--bs-centos-purple-900);
+    }
+
+    // Removed diff lines
+    .hljs-deletion {
+      color: var(--bs-danger-text-emphasis);
+      background-color: var(--bs-danger-bg-subtle);
+    }
+
+    // Added diff lines
+    .hljs-addition {
+      color: var(--bs-centos-green-800);
+      background-color: var(--bs-centos-green-100);
+    }
+
+    // Comments — a lighter shade so they recede from the code around them
+    .hljs-comment {
+      color: var(--bs-centos-blue-400);
+    }
+
+    .hljs-emphasis {
+      font-style: italic;
+    }
+  }
+}

data/_sass/base/_preview.scss

@@ -0,0 +1,74 @@
+// ================================================================================
+// Preview component: demo, toolbar, and code row layout
+// ================================================================================
+// Styles the three-row layout preview.html.liquid can render: a live demo,
+// a toolbar (language name and copy button), and a code sample. The rows
+// sit flush against each other and the box, with no gaps or padding of
+// their own. The plain, single-row layout (just `content`, no `language`
+// or `code`) uses none of these classes, so none of these rules apply.
+//
+// The toolbar's own border classes live in preview.html.liquid and
+// highlight.js instead of here, since the toolbar has no class to
+// configure in the schema. Each border only shows on the side facing
+// another row, so it never doubles up with the box's outer border.
+//
+// Every code block on the site — plain Markdown or built with the
+// preview component — gets the same toolbar/code layout via highlight.js,
+// and the same copy button, handled by copyvalue.js (loaded through
+// copyvalue.html.liquid).
+//
+// Long code blocks are capped at 50vh with a scrollbar, so one long
+// sample can't stretch the whole page.
+// ================================================================================
+
+.preview {
+  > .preview-content + .preview-toolbar,
+  > .preview-toolbar + .preview-code {
+    margin-top: $spacer * 0.75;
+  }
+
+  .preview-toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: $spacer * 0.5;
+    // Same purple family as table headers (see _datatable.scss), one
+    // shade lighter.
+    background-color: var(--bs-centos-purple-50);
+  }
+
+  // margin-left: auto keeps the copy button pinned to the right edge even
+  // with no language label. justify-content: space-between would work too,
+  // but only when a label is present — with nothing beside the copy button,
+  // space-between has nothing to distribute space between, so the button
+  // would land on the left instead.
+  .preview-actions {
+    display: flex;
+    align-items: center;
+    gap: $spacer * 0.75;
+    margin-left: auto;
+  }
+
+  // Bootstrap adds a bottom margin to every <pre> by default; removed so
+  // the code sits flush against the row's bottom edge. Padding comes from
+  // a `p-2` class set on the <pre> in preview.html.liquid and highlight.js,
+  // not duplicated here.
+  .preview-code pre {
+    margin-bottom: 0;
+    background-color: #fcfcfc;
+  }
+
+  .preview-code code {
+    border: 0;
+  }
+
+  .preview-code .hljs {
+    // max-height/overflow have no effect on a non-replaced inline element
+    // (CSS2.1 §10.7); highlight.js's own stylesheet normally sets this
+    // block display, but this theme skips that file (see highlight.html.liquid)
+    // and only pulls colors from _highlight-theme.scss.
+    display: block;
+    max-height: 50vh;
+    overflow: auto;
+  }
+}

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,16 @@ $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
+                       // used across most centos-purple shades in _data/base/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 +169,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).