jekyll-theme-centos 2.52.0.beta.3 → 2.52.0.beta.5

data/_sass/base/_customization.scss

@@ -0,0 +1,251 @@
+// This file is for custom CSS rules and utility classes that override standard
+// Bootstrap structure. It should be the last file in your import sequence.
+// Here, you define and generate custom utility classes using the variables and
+// maps that were set up previously.
+
+// ================================================================================
+// CSS Custom Properties (for dynamic inline styles)
+// ================================================================================
+// These variables are used in head.html.liquid for dynamic CSS generation.
+// Defined here for centralized configuration and availability to inline styles.
+:root {
+  // Breaking News Component
+  // Measurements used for calculating scroll-margin-top in head.html.liquid
+  --breakingnews-alert-height: 31px;
+  --navbar-height: 42px;
+  --heading-margin-top: 48px;
+
+  // Highlight.js Icon Sizing
+  // Used for copy button icon dimensions
+  --highlight-icon-width: 24px;
+  --highlight-icon-height: 24px;
+}
+
+body {
+  padding-top: $breakingnews-height;
+
+  .sticky-top-breakingnews {
+    top: $breakingnews-height;
+  }
+}
+
+// --------------------------------------------------------------------------------
+// Backgrounds, Texts, and Gradients classes
+// --------------------------------------------------------------------------------
+@each $color, $value in $theme-colors {
+  // Create a background utility class for each color.
+  .bg-#{$color} {
+    background-color: $value;
+  }
+  // Create a text color utility class for each color.
+  .text-#{$color} {
+    color: $value;
+  }
+}
+
+@each $color, $value in $centos-text-gradients {
+  .text-gradient-#{$color} {
+    background-image: $value;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+}
+
+.bg-image {
+  background-image: url("../../img/centos-motif.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+}
+.bg-image-center {
+  background-position: center;
+}
+
+.bg-image-top {
+  background-position: top;
+}
+
+.bg-image-bottom {
+  background-position: bottom;
+}
+
+// --------------------------------------------------------------------------------
+// Lists
+// --------------------------------------------------------------------------------
+#pageToc {
+  li {
+    list-style: none;
+  }
+  li:before {
+    font-family: FontAwesome;
+    font-size: .35rem;
+    color: $body-color;
+    position: relative;
+    left: -0.5rem;
+    top: -0.2rem;
+    content:"\f111";
+  }
+}
+
+// --------------------------------------------------------------------------------
+// Alerts (p), announcements (div), and breakingnews (div)
+// --------------------------------------------------------------------------------
+// Breaking News: Use Font Awesome HTML icons (fa-solid fa-bullhorn) for consistent
+//                visual identity across all color variations.
+//                Positioned at page level with sticky positioning.
+//                Excluded from CSS icon styling via .breakingnews class.
+// Announcements: Use Font Awesome HTML icons (fa-solid fa-bullhorn) for consistent
+//                visual identity across all color variations.
+//                Positioned within .content (inside main).
+//                Excluded from CSS icon styling via .announcement class.
+// Alerts:        Use CSS-based SVG icons ($centos-alert-icons map) for markdown-based
+//                alerts within .content, with type-specific icons per color.
+//                Only applied to .alert:not(.announcement) to avoid styling announcements.
+
+$centos-alert-icons: (
+  "primary": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 42.333 42.333'><g transform='rotate(45 -180.13 -610.203) scale(1.0529)'><circle cx='388.123' cy='-290.716' r='20.103' style='fill:rgba(#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))},1);stroke:none;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#{to-rgb(shade-color(map-get($theme-colors, 'primary'), 60%))}'/><path d='M377.366-301.473v6.301l-4.456 4.456 4.456 4.456v6.302h6.302l4.456 4.456 4.456-4.456h6.301v-6.302l4.456-4.456-4.456-4.456v-6.301h-6.301l-4.456-4.456-4.456 4.456zm2.271 4.183 1.913-1.912 3.227 3.227v1.913h-1.912zm-2.163 5.222h4.565l1.352 1.352-1.352 1.353h-4.564zm9.297-9.297h2.705v4.564l-1.352 1.353-1.353-1.353zm.091 7.607 1.261 1.282 1.26-1.283-.015 1.798 1.798-.016-1.282 1.26 1.283 1.261-1.798-.015.016 1.798-1.26-1.282-1.261 1.283.015-1.799-1.798.016 1.282-1.26-1.283-1.26 1.799.015zm-7.225 9.617 3.228-3.228h1.912v1.913l-3.227 3.227zm11.833-11.834 3.228-3.227 1.913 1.912-3.228 3.228h-1.912zm-4.698 11.345 1.352-1.352 1.352 1.352v4.564h-2.704zm6.085-6.085 1.352-1.353h4.564v2.705h-4.564zm-1.387 3.346h1.913l3.228 3.228-1.913 1.912-3.228-3.227z' style='fill:%23fff;fill-opacity:1;stroke-width:9.12808;stroke-linecap:round;paint-order:fill markers stroke;stop-color:%23000'/></g></svg>"),
+  "secondary": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' viewBox='0 0 42.333 42.333'><g transform='rotate(45 -180.13 -610.203) scale(1.0529)'><circle cx='388.123' cy='-290.716' r='20.103' style='fill:rgba(#{to-rgb(shade-color(map-get($theme-colors, 'secondary'), 60%))},1);stroke:none;stroke-width:1.32292;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:fill markers stroke;stop-color:#{to-rgb(shade-color(map-get($theme-colors, 'secondary'), 60%))}'/><path d='M377.366-301.473v6.301l-4.456 4.456 4.456 4.456v6.302h6.302l4.456 4.456 4.456-4.456h6.301v-6.302l4.456-4.456-4.456-4.456v-6.301h-6.301l-4.456-4.456-4.456 4.456zm2.271 4.183 1.913-1.912 3.227 3.227v1.913h-1.912zm-2.163 5.222h4.565l1.352 1.352-1.352 1.353h-4.564zm9.297-9.297h2.705v4.564l-1.352 1.353-1.353-1.353zm.091 7.607 1.261 1.282 1.26-1.283-.015 1.798 1.798-.016-1.282 1.26 1.283 1.261-1.798-.015.016 1.798-1.26-1.282-1.261 1.283.015-1.799-1.798.016 1.282-1.26-1.283-1.26 1.799.015zm-7.225 9.617 3.228-3.228h1.912v1.913l-3.227 3.227zm11.833-11.834 3.228-3.227 1.913 1.912-3.228 3.228h-1.912zm-4.698 11.345 1.352-1.352 1.352 1.352v4.564h-2.704zm6.085-6.085 1.352-1.353h4.564v2.705h-4.564zm-1.387 3.346h1.913l3.228 3.228-1.913 1.912-3.228-3.227z' style='fill:%23fff;fill-opacity:1;stroke-width:9.12808;stroke-linecap:round;paint-order:fill markers stroke;stop-color:%23000'/></g></svg>"),
+  "warning": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'warning'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480H40c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24V296c0 13.3 10.7 24 24 24s24-10.7 24-24V184c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/></svg>"),
+  "info": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'info'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/></svg>"),
+  "danger": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'danger'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/></svg>"),
+  "success": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'success'), 60%))},1)' viewBox='0 0 512 512'><path d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/></svg>"),
+  "light": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'light'), 60%))},1)' viewBox='0 0 512 512'><path d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z'/></svg>"),
+  "dark": url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='1rem' fill='rgba(#{to-rgb(shade-color(map-get($theme-colors, 'dark'), 60%))},1)' viewBox='0 0 512 512'><path d='M471.6 21.7c-21.9-21.9-57.3-21.9-79.2 0L362.3 51.7l97.9 97.9 30.1-30.1c21.9-21.9 21.9-57.3 0-79.2L471.6 21.7zm-299.2 220c-6.1 6.1-10.8 13.6-13.5 21.9l-29.6 88.8c-2.9 8.6-.6 18.1 5.8 24.6s15.9 8.7 24.6 5.8l88.8-29.6c8.2-2.7 15.7-7.4 21.9-13.5L437.7 172.3 339.7 74.3 172.4 241.7zM96 64C43 64 0 107 0 160V416c0 53 43 96 96 96H352c53 0 96-43 96-96V320c0-17.7-14.3-32-32-32s-32 14.3-32 32v96c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H96z'/></svg>")
+);
+
+// Breaking news with HTML-based Font Awesome icons
+// Positioned at page level (outside .content)
+.sticky-top-breakingnews {
+  .breakingnews {
+    padding-left: $spacer * 1.25;
+  }
+}
+
+.content {
+  // Markdown-based alerts with CSS-generated icons
+  // Only apply to alerts that are neither announcements nor breaking news
+  .alert:not(.announcement):not(.breakingnews) {
+    padding-left: $spacer * 3;
+    border-left-width: 0.5rem;
+
+    @each $color, $icon-url in $centos-alert-icons {
+      &.alert-#{$color} {
+        &::before {
+          content: "";
+          position: absolute;
+          left: 1rem;
+          top: 1.75rem;
+          transform: translateY(-50%);
+          width: 1.25rem;
+          height: 1.25rem;
+          background-image: #{$icon-url};
+          background-repeat: no-repeat;
+          background-position: center;
+          background-size: contain;
+        }
+      }
+    }
+  }
+}
+
+main {
+  // --------------------------------------------------------------------------------
+  // Navbar and linked headings' correction.
+  //
+  // By default, when you access page headings from the page table of content
+  // (toc) links, the heading is hidden behind the navbar.  This workaround
+  // fixes the linked headings visibility issue in the page.
+  // Also applies the same correction to accordion buttons for consistent behavior.
+  // --------------------------------------------------------------------------------
+  .content > h1,
+  .content > h2,
+  .content > h3,
+  .content > h4,
+  .content > h5,
+  .content > h6 {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+    margin-top: 3rem;
+  }
+  .content > h2 {
+    border-bottom: 0.35rem solid $primary;
+    padding-bottom: $spacer * 0.5;
+    margin-bottom: $spacer * 0.75;
+  }
+  .content > figure {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+
+  // Accordion containers' correction.
+  //
+  // When accessing accordion containers via internal anchor links, they wouldn't be
+  // hidden behind the navbar. This correction ensures accordion containers remain
+  // visible when linked to, and works in conjunction with the dynamic calculation
+  // in head.html.liquid when breaking news is present.
+  //
+  // Note: Applied to .accordion container (not items) to avoid disrupting accordion
+  // item internal layout while still providing proper scroll margin and visual spacing.
+  .content .accordion,
+  .content .accordion-item {
+    scroll-margin-top: 80px;
+    scroll-margin-bottom: 100px;
+  }
+
+  // --------------------------------------------------------------------------------
+  // DataTable BS5 corrections
+  // --------------------------------------------------------------------------------
+  .content { .dt-container { margin-bottom: 1rem; } }
+
+  // --------------------------------------------------------------------------------
+  // Highlightjs-copy
+  // --------------------------------------------------------------------------------
+  .content {
+    code.hljs {
+      border-radius: var(--bs-border-radius-lg);
+    }
+    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-left: 5px;
+        border-top: 1px;
+        border-right: 1px;
+        border-bottom: 1px;
+        border-color: var(--bs-light-border-subtle);
+        border-style: solid;
+      }
+    }
+  }
+}

data/_sass/base/_light-dark.scss

@@ -0,0 +1,10 @@
+// Auto-generated from saturation-normalized shade algorithm
+// DO NOT EDIT: This file is generated by generate-scss-light-dark.py
+// Source: centos-purple (#A14F8C)
+// Generated: Shade 50 → $light, Shade 950 → $dark
+//
+// To regenerate after color changes, run:
+//   python3 scripts/colors/generate-scss-light-dark.py
+
+$light: #F6EDF4;  // centos-purple-50: reduced saturation (~60%), high lightness (~95%)
+$dark:  #22061B;   // centos-purple-950: enhanced saturation (100%), low lightness (8%)

data/_sass/base/_maps.scss

@@ -0,0 +1,104 @@
+@use "sass:math";
+
+// Merge the base colors into the main `$theme-colors` map
+$theme-colors: map-merge($theme-colors, $centos-base-colors);
+
+// Generate all custom color shades and merge them into `$theme-colors`.
+// Uses saturation-normalized shade generation to maintain brand saturation
+// throughout the dark range (grades 800-950), creating visual consistency
+// between web UI and wallpaper colors.
+@each $name, $color in $centos-base-colors {
+  @each $shade in $centos-color-shades {
+    $shade-name: "#{$name}-#{$shade}";
+    $shade-color: null;
+
+    @if $shade < 500 {
+      // 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.
+      @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
+        $shade-color: saturated-shade($color, $shade);
+      }
+    } @else {
+      // Grade 500: use base color as-is
+      $shade-color: $color;
+    }
+
+    $theme-colors: map-merge($theme-colors, ($shade-name: $shade-color));
+  }
+}
+
+// Define custom background gradients.
+$centos-bg-gradients: (
+  "primary": linear-gradient(
+    90deg,
+    rgba(map-get($theme-colors, "centos-purple-100"), 1) 50%,
+    rgba(map-get($theme-colors, "centos-orange-100"), 1) 100%
+  ),
+  "secondary": linear-gradient(
+    90deg,
+    rgba(map-get($theme-colors, "centos-orange-100"), 1) 50%,
+    rgba(map-get($theme-colors, "centos-purple-100"), 1) 100%
+  ),
+  "header": linear-gradient(
+    180deg,
+    rgba(map-get($theme-colors, "centos-purple-100"), 1) 0%,
+    rgba($white, 0.98) 100%
+  ),
+  "footer": linear-gradient(
+    180deg,
+    rgba($white, 1) 0%,
+    rgba(map-get($theme-colors, "centos-purple-100"), 1) 100%
+  )
+);
+
+// Define custom text gradients.
+$centos-text-gradients: (
+  "primary": linear-gradient(
+    90deg,
+    rgba(map-get($theme-colors, "centos-purple"), 1) 50%,
+    rgba(map-get($theme-colors, "centos-orange"), 1) 100%
+  ),
+  "secondary": linear-gradient(
+    270deg,
+    rgba(map-get($theme-colors, "centos-purple"), 1) 50%,
+    rgba(map-get($theme-colors, "centos-orange"), 1) 100%
+  )
+);
+
+// Define custom utilities using the correct Bootstrap API. This allows you to
+// use classes like `text-bg-centos-purple-800`.
+$utilities: map-merge(
+  $utilities,
+  (
+    "centos-text-bg-color": (
+      property: background-color,
+      class: text-bg,
+      values: $theme-colors,
+      state: "text-bg"
+    ),
+    "centos-border-color": (
+      property: border-color,
+      class: border,
+      values: $theme-colors,
+      state: "border"
+    ),
+    "centos-bg-gradient": (
+      property: background,
+      class: bg-gradient,
+      values: $centos-bg-gradients
+    ),
+    "centos-text-gradient": (
+      property: color,
+      class: text-gradient,
+      values: $centos-text-gradients,
+    ),
+  )
+);

data/_sass/base/_variables.scss

@@ -0,0 +1,232 @@
+// ================================================================================
+// SATURATION-NORMALIZED SHADE GENERATION
+// ================================================================================
+// Purpose: Generate color shades that maintain brand saturation throughout
+// the entire range (light to dark), creating visual consistency between
+// web UI and wallpapers.
+//
+// Background: Bootstrap's default shade-color() desaturates dark colors,
+// making them look gray. This custom function maintains saturation for
+// a unified brand experience aligned with wallpaper colors.
+//
+// Reference: Analyzed centos-background-p-1024x1024.png wallpaper to extract
+// dark purple corners (#1A0029) which use 100% saturation at 16% brightness.
+// Standard shade algorithm produces #210F1D (55% saturation) which feels gray.
+// ================================================================================
+
+@use "sass:color";
+@use "sass:math";
+
+// ────────────────────────────────────────────────────────────────────────────
+// 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
+@function saturation-multiplier($shade) {
+  @if $shade <= 400 {
+    @return 0.6;    // Light shades (50-400): reduce saturation for soft appearance
+  } @else if $shade == 500 {
+    @return 1.0;    // Base color: keep normal saturation
+  } @else if $shade == 600 {
+    @return 1.0;    // Keep as-is, already perceptually good
+  } @else if $shade == 700 {
+    @return 1.0;    // Keep as-is, already perceptually good
+  } @else if $shade == 800 {
+    @return 1.1;    // Subtle boost for slight vibrancy increase
+  } @else if $shade == 900 {
+    @return 1.8;    // Significant increase to match wallpaper saturation
+  } @else if $shade == 950 {
+    @return 2.0;    // Ensure 100% saturation for all colors (wallpaper-anchored)
+  } @else {
+    @return 1.0;    // Default fallback
+  }
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// 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)
+@function target-lightness($shade, $base-lightness) {
+  @if $shade < 500 {
+    // Light shades: interpolate from 95% (very light) down to base lightness
+    @return $base-lightness + math.div(500 - $shade, 450) * (95% - $base-lightness);
+  } @else if $shade == 500 {
+    // Base color: return as-is
+    @return $base-lightness;
+  } @else if $shade == 600 or $shade == 700 or $shade == 800 {
+    // Grades 600-800: use original Bootstrap curve (down to 5%)
+    @return $base-lightness - math.div($shade - 500, 500) * ($base-lightness - 5%);
+  } @else if $shade == 900 {
+    // 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
+    @return 8%;
+  } @else {
+    // Default fallback
+    @return $base-lightness - math.div($shade - 500, 500) * ($base-lightness - 5%);
+  }
+}
+
+// ────────────────────────────────────────────────────────────────────────────
+// Function: Generate 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)
+@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);
+  $current-lightness: lightness($color);
+
+  // Calculate target values for this shade
+  $target-light: target-lightness($shade, $current-lightness);
+  $sat-multiplier: saturation-multiplier($shade);
+  $target-saturation: math.min($current-saturation * $sat-multiplier, 100%);
+
+  // Generate and return the new color in HSL
+  @return hsl($current-hue, $target-saturation, $target-light);
+}
+
+// ================================================================================
+// CentOS Color (Our beloved branding colors)
+// ================================================================================
+$centos-base-colors: (
+  centos-purple: #A14F8C,
+  centos-orange: #EFA724,
+  centos-blue:   #262577,
+  centos-green:  #9CCD2A,
+);
+
+// Define the shade steps.
+$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)
+//
+// See color.md documentation for detailed contrast ratio and psychology analysis.
+// --------------------------------------------------------------------------------
+$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 ✓
+
+// 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
+// chicken-egg issues), we generate these values with a Python script and import them below.
+// This ensures $light and $dark are consistently computed from the same shade algorithm used
+// for all other shades in the color system.
+//
+// To update after color changes: python3 scripts/colors/generate-scss-light-dark.py
+// The generated values are imported from: src/SASS/_light-dark.scss
+@import "light-dark";
+
+$white:     #ffffff;
+$black:     #000000;
+
+// 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
+
+// Border and Emphasis colors
+// Used for borders, dividers, and higher-contrast text.
+$border-color: #e8d9e5;   // centos-purple-100
+$emphasis-color: #d1b3cb; // centos-purple-200
+
+// Dropdown menu
+$dropdown-dark-bg: $dark;
+$dropdown-dark-color: $light;
+
+// --------------------------------------------------------------------------------
+// Spacing customization
+// --------------------------------------------------------------------------------
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .25,
+  2: $spacer * .5,
+  3: $spacer,
+  4: $spacer * 1.5,
+  5: $spacer * 3,
+  6: $spacer * 5,
+);
+
+// --------------------------------------------------------------------------------
+// Typography
+// --------------------------------------------------------------------------------
+$font-family-sans-serif: "Montserrat", sans-serif;
+$font-family-monospace: "Source Code Pro", monospace;
+$headings-font-weight: 700;
+$font-size-base: $spacer;
+$h1-font-size: $font-size-base * 2.75;
+$body-emphasis-color: mix(#000, $body-color, 15%);
+
+// --------------------------------------------------------------------------------
+// Breadcrumb
+// --------------------------------------------------------------------------------
+$breadcrumb-divider: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><path d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z'/></svg>");
+
+// --------------------------------------------------------------------------------
+// Negative margins
+// --------------------------------------------------------------------------------
+$enable-negative-margins: true;
+
+// --------------------------------------------------------------------------------
+// Breakingnews
+// --------------------------------------------------------------------------------
+// Use a Sass variable for the breaking news height to make it easy to update
+// both the body padding and the sticky element's top position. If you change
+// this value, you also need to tune-up the _includes/head.html file, where
+// dynamic calculation of scroll-margin-top property takes place.
+$breakingnews-height: 59px;