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

data/_includes/base/highlight.html.liquid

@@ -1,23 +1,24 @@
 {% comment %}
 ================================================================================
 Template: Highlight.js Code Syntax Highlighting Component
-Purpose: Loads Highlight.js library CSS and JavaScript from CDN with
-copy-to-clipboard functionality for code blocks.
-================================================================================
+Purpose: Loads Highlight.js from a CDN to color code blocks in the browser.
+
+This template only loads the JS library. It never loads a CSS theme file —
+the colors come from this site's own theme, _highlight-theme.scss, already
+part of the compiled stylesheet. It also doesn't add a copy button; that's
+base/highlight.js's job, which wraps every code block (plain Markdown or
+one built with base/preview.html.liquid) in the same toolbar, reusing the
+site-wide `.copy-btn` handler (src/JS/copyvalue.js).
 
-Design Logic:
-- CDN-based library: Highlight.js from cdnjs
-- Copy plugin: additional plugin for code clipboard functionality
-- Format switching: separate head (CSS) and script (JS) includes
-- Automatic initialization: on document load
-- Configurable theme: different color schemes available
-- 190+ languages supported
+Cdnjs's default build covers about 40 common languages. A block whose
+language isn't in that build renders as plain, uncolored text instead of
+erroring. Load any other language by setting
+with_highlight_data.languages.<id>: true in a page's front matter — see
+src/YAML/highlight_schema.yml for the full list of language ids.
 
 Optional Inputs:
-- type: "head" for CSS, "script" for JavaScript
-- theme: Syntax highlighting theme (default: "default")
-- version: Highlight.js version (e.g., "11.9.0")
-- data: Highlight.js configuration object
+- data: Highlight.js configuration object — version, script_integrity,
+  and languages (see above)
 
 Data Source Hierarchy (priority):
 1. include.data
@@ -41,44 +42,33 @@ Data Source Hierarchy (priority):
 
 {%- if with_highlight %}
 
-{%- assign highlight_theme          = with_highlight_data.theme                         | default: with_highlight_schema.theme.default %}
-{%- assign highlight_version        = with_highlight_data.version                       | default: with_highlight_schema.version.default %}
-{%- assign highlight_css_sri        = with_highlight_data.css_integrity                 | default: with_highlight_schema.css_integrity.default %}
-{%- assign highlight_script_sri     = with_highlight_data.script_integrity              | default: with_highlight_schema.script_integrity.default %}
-{%- assign copy_version             = with_highlight_data.copy_version                  | default: with_highlight_schema.copy_version.default %}
-{%- assign copy_script_sri          = with_highlight_data.copy_script_integrity         | default: with_highlight_schema.copy_script_integrity.default %}
-{%- assign copy_css_sri             = with_highlight_data.copy_css_integrity            | default: with_highlight_schema.copy_css_integrity.default %}
-{%- assign copy_icon_svg            = with_highlight_data.copy_button_icons.copy.svg    | default: with_highlight_schema.copy_button_icons.properties.copy.properties.svg.default %}
-{%- assign success_icon_svg         = with_highlight_data.copy_button_icons.success.svg | default: with_highlight_schema.copy_button_icons.properties.success.properties.svg.default %}
+{%- assign highlight_version    = with_highlight_data.version          | default: with_highlight_schema.version.default %}
+{%- assign highlight_script_sri = with_highlight_data.script_integrity | default: with_highlight_schema.script_integrity.default %}
 
-{%- capture html_highlight_head %}
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/styles/{{ highlight_theme | replace_first: 'base16-', 'base16/' | default: 'default' }}.min.css" integrity="{{ highlight_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <link rel="stylesheet" href="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.css" integrity="{{ copy_css_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" />
-  <!-- Highlight.js Copy Button Icon Customization (from schema) -->
-  <style>
-    .hljs-copy-button:not([data-copied="true"])::before {
-      mask: url('data:image/svg+xml;utf-8,{{ copy_icon_svg }}');
-    }
-    .hljs-copy-button[data-copied='true']::after {
-      background-image: url('data:image/svg+xml;utf-8,{{ success_icon_svg }}');
-    }
-  </style>
-{%- endcapture %}
+<!-- Highlight.js Library -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js" integrity="{{ highlight_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
 
-{%- capture html_highlight_script %}
-  <!-- Highlight.js Library and Copy Plugin -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/highlight.min.js" integrity="{{ highlight_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-  <script src="https://unpkg.com/highlightjs-copy@{{ copy_version }}/dist/highlightjs-copy.min.js" integrity="{{ copy_script_sri }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
-  <!-- Initialize Highlight.js -->
-  <script src="{{ site.baseurl }}/assets/js/base/highlight.min.js" defer></script>
-{%- endcapture %}
+{%- comment %}
+Optional per-language modules. Each script tag must come after the core
+library above, so its `hljs.registerLanguage` call has a global `hljs` to
+register against. A language's toggle lives in with_highlight_data.languages,
+set in a page's front matter. Its SRI hash comes from the schema's own
+x_integrity map — a page only names the languages it wants, never their
+hashes.
+{%- endcomment %}
+{%- assign highlight_languages   = with_highlight_data.languages %}
+{%- assign language_integrity    = with_highlight_schema.languages.properties.x_integrity.properties %}
+{%- if highlight_languages %}
+  {%- for language in highlight_languages %}
+    {%- assign language_id      = language[0] %}
+    {%- assign language_enabled = language[1] %}
+    {%- if language_enabled %}
+<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/{{ highlight_version }}/languages/{{ language_id }}.min.js" integrity="{{ language_integrity[language_id].default }}" crossorigin="anonymous" referrerpolicy="no-referrer" defer></script>
+    {%- endif %}
+  {%- endfor %}
+{%- endif %}
 
-{%- assign type = include.type %}
-{%- case type %}
-{%- when "head" %}
-  {{ html_highlight_head }}
-{%- when "script" %}
-  {{ html_highlight_script }}
-{%- endcase %}
+<!-- Initialize Highlight.js and wrap code blocks in the shared preview toolbar -->
+<script src="{{ site.baseurl }}/assets/js/base/highlight.min.js" defer></script>
 
 {%- endif %}

data/_includes/base/navbar.html.liquid

@@ -58,7 +58,7 @@ Data Source Hierarchy (priority):
 
     {%- if navbar_brand_image != "" %}
       {%- assign navbar_brand_link = "/" | locale_url: page.locale %}
-      <a class="navbar-brand" href="{{ site.baseurl }}{{ navbar_brand_link }}">
+      <a class="navbar-brand focus-ring" href="{{ site.baseurl }}{{ navbar_brand_link }}">
 
         <img
             class="d-inline-block align-text-middle me-2{% if navbar_brand_image_class != "" %} {{ navbar_brand_image_class }}{% endif %}"
@@ -85,7 +85,7 @@ Data Source Hierarchy (priority):
             {%- if navitem.menu.size == 0 %}
               <li class="nav-item">
                 {%- include base/link.html.liquid
-                class = "nav-link"
+                class = "nav-link focus-ring"
                 name  = navitem.name
                 link  = navitem_link
                 role  = "presentation"
@@ -94,7 +94,7 @@ Data Source Hierarchy (priority):
               </li>
             {%- else %}
               <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <a class="nav-link dropdown-toggle focus-ring" href="#" id="navbarDropdown-{{ forloop.index }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                   <i class="{{ navitem.icon }} me-1" aria-hidden="true"></i>{{ navitem.name }}
                 </a>
                 <ul class="dropdown-menu dropdown-menu-dark shadow">
@@ -102,7 +102,7 @@ Data Source Hierarchy (priority):
                     {%- assign dropdownitem_link = dropdownitem.link | locale_url: page.locale %}
                     <li>
                       {%- include base/link.html.liquid
-                      class = "dropdown-item"
+                      class = "dropdown-item focus-ring"
                       name  = dropdownitem.name
                       link  = dropdownitem_link
                       role  = "presentation"

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,67 @@ 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 */
+    .preview-code code {
+      padding: 0;
+      background-color: transparent;
+      border-radius: 0;
+    }
 
-      }
-      .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;
-      }
+    // A configuration default's long unbroken token (an SRI hash, a CDN
+    // URL, ...) has no natural break point, so it needs an explicit
+    // permission to wrap — otherwise it either overflows or forces its
+    // column wide (configuration_variables-default-cell.html.liquid, used
+    // by both configuration_variables.html.liquid and its nested
+    // counterpart). `anywhere` (not `break-word`) also lets it contribute
+    // a single-character min-content width, so table auto layout gives the
+    // column only the space it actually needs, regardless of how many
+    // columns the table has.
+    .long-value {
+      overflow-wrap: anywhere;
     }
   }
 }
 
+// --------------------------------------------------------------------------------
+// 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/_theme-colors.scss

@@ -26,14 +26,17 @@ $theme-colors: map-merge($theme-colors, $centos-base-colors);
       // Light shades: use standard tint-color (adds white, works well)
       $shade-color: tint-color($color, percentage(math.div(500 - $shade, 500)));
     } @else if $shade > 500 {
-      // Special case: Green 700 needs 30% black mix (not 20%) for AA compliance.
-      // This ensures WHITE text contrast meets 4.5:1 threshold.
+      // Special case: green-700 skips the saturated-shade formula below and
+      // mixes 30% black directly, to keep its contrast against this theme's
+      // body text at a safe margin above WCAG AA — see src/YAML/color.yml's
+      // generated centos-green-700 entry for the current contrast ratio.
       @if $name == "centos-green" and $shade == 700 {
         $shade-color: shade-color($color, 30%);
       } @else {
-        // NEW: Use saturation-normalized shade for all other dark shades
-        // This function increases saturation multiplier for grades 800-950
-        // Result: vivid dark colors that feel on-brand
+        // Saturation-normalized shade for every other dark grade (800-950):
+        // increases the saturation multiplier so these stay vivid and
+        // on-brand instead of fading gray, the way Bootstrap's own
+        // shade-color() would.
         $shade-color: saturated-shade($color, $shade);
       }
     } @else {