jekyll-theme-centos 2.52.0.beta.84 → 2.52.0.beta.86

data/_includes/base/configuration_variables.html.liquid

@@ -27,7 +27,7 @@ of separate, nested DataTables for complex properties.
 
   {% comment %} 3. Render the top-level table completely {% endcomment %}
   <table class="{{ table_classes }}">
-    <thead class="table-light">
+    <thead>
       <tr>
         <th scope="col">{{ col_name }}</th>
         {% if columns %}

data/_includes/base/event.html.liquid

@@ -16,10 +16,12 @@ Design Logic:
 
 Required Inputs:
 - title: Event name/title
+- start: Event start (YYYY-MM-DD for an all-day event, or YYYY-MM-DDTHH:MM
+  to give it a specific start time on that same day)
 
 Optional Inputs:
 - description: Event description text
-- date: Event date/time string
+- end: Event inclusive end (same format as start), defaults to start
 - location: Event location name
 - color: Alert color scheme (default: "secondary")
 - icon: Icon class (default: "fa-solid fa-calendar")
@@ -57,8 +59,61 @@ Data Source Hierarchy (priority):
     {%- assign event_city        = event.city        | default: with_event_schema.city.default %}
     {%- assign event_color       = event.color       | default: with_event_schema.color.default %}
     {%- assign event_location    = event.location    | default: with_event_schema.location.default %}
-    {%- assign event_date        = event.date        | default: with_event_schema.date.default %}
     {%- assign event_description = event.description | default: with_event_schema.description.default %}
+
+    {%- comment %}
+    Derive the same style of display string the old free-text `date` field
+    used to hold (e.g. "September 19 - 20, 2025") from the structured,
+    inclusive `start`/`end` ISO dates — collapsing the month/year whenever
+    both sides share it, spelling both out in full otherwise. No date
+    arithmetic here, only formatting and string comparison of the formatted
+    output; the calendar component (reading this same with_event_data) is
+    the one place that does inclusive-to-exclusive end-date arithmetic, in
+    JS. See the calendar component's event data contract documentation.
+
+    A `start` carrying a time-of-day (`YYYY-MM-DDTHH:MM`) is a same-day timed
+    event rather than a date range — it gets its own branch below that
+    appends the clock time(s) instead of running the range-collapsing logic.
+    {% endcomment %}
+    {%- assign event_start = event.start %}
+    {%- if event_start != "" and event_start != nil %}
+      {%- assign event_end = event.end | default: event_start %}
+      {%- if event_end == "" %}
+        {%- assign event_end = event_start %}
+      {%- endif %}
+      {%- if event_start contains "T" %}
+        {%- assign event_date = event_start | date: "%B %-d, %Y" %}
+        {%- assign event_start_time = event_start | date: "%-l:%M %p" %}
+        {%- if event_end != event_start %}
+          {%- assign event_end_time = event_end | date: "%-l:%M %p" %}
+          {%- assign event_date = event_date | append: ", " | append: event_start_time | append: " - " | append: event_end_time %}
+        {%- else %}
+          {%- assign event_date = event_date | append: ", " | append: event_start_time %}
+        {%- endif %}
+      {%- else %}
+        {%- assign event_start_ym = event_start | date: "%Y-%m" %}
+        {%- assign event_end_ym   = event_end   | date: "%Y-%m" %}
+        {%- assign event_start_y  = event_start | date: "%Y" %}
+        {%- assign event_end_y    = event_end   | date: "%Y" %}
+        {%- if event_start == event_end %}
+          {%- assign event_date = event_start | date: "%B %-d, %Y" %}
+        {%- elsif event_start_ym == event_end_ym %}
+          {%- assign event_date_start = event_start | date: "%B %-d" %}
+          {%- assign event_date_end   = event_end   | date: "%-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- elsif event_start_y == event_end_y %}
+          {%- assign event_date_start = event_start | date: "%B %-d" %}
+          {%- assign event_date_end   = event_end   | date: "%B %-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- else %}
+          {%- assign event_date_start = event_start | date: "%B %-d, %Y" %}
+          {%- assign event_date_end   = event_end   | date: "%B %-d, %Y" %}
+          {%- assign event_date = event_date_start | append: " - " | append: event_date_end %}
+        {%- endif %}
+      {%- endif %}
+    {%- else %}
+      {%- assign event_date = "" %}
+    {%- endif %}
     {%- assign event_icon        = event.icon        | default: with_event_schema.icon.default %}
     {%- assign event_image_url   = event.image_url   | default: with_event_schema.image_url.default %}
     {%- assign event_link        = event.link        | default: with_event_schema.link.default %}

data/_includes/base/head.html.liquid

@@ -11,7 +11,7 @@ Design Logic:
 - Favicon support: multiple formats (16x16, 32x32, SVG with type, Apple Touch)
 - Google Fonts: Montserrat (5 weights) and Source Code Pro (2 weights) via async stylesheet
 - Breakingnews scroll offset: dynamic CSS calculation
-- Conditional includes: OGP, Highlight.js, DataTables, FontAwesome (SVG+JS)
+- Conditional includes: OGP, Highlight.js, DataTables, FontAwesome (SVG+JS), Event Calendar
 - CSS prioritization: custom stylesheet last for override
 - Script loading: Bootstrap base first (defer), then optional extensions, then UI behaviors
 - Bootstrap and FontAwesome preloaded (high-priority fetch); CDN origins preconnected + dns-prefetched per active component
@@ -25,6 +25,7 @@ Optional Inputs:
 - page.with_ogp, page.with_fontawesome: Include OGP/Font Awesome SVG+JS (boolean)
 - page.with_breakingnews, page.with_highlight: Include breaking news/highlight
 - page.with_datatable: Include DataTables (boolean)
+- page.with_calendar: Include Event Calendar (boolean)
 - page.with_breakingnews_data: Array of breaking news items
 - page.with_backtotop: Include back-to-top button (boolean)
 - page.with_copyvalue: Include copy-to-clipboard behavior (boolean)
@@ -67,6 +68,10 @@ Optional Inputs:
 <link rel="preconnect" href="https://cdn.datatables.net" crossorigin />
 <link rel="dns-prefetch" href="https://cdn.datatables.net" />
 {%- endif %}
+{%- if page.with_calendar %}
+<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
+<link rel="dns-prefetch" href="https://cdn.jsdelivr.net" />
+{%- endif %}
 <link rel="preload" href="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js" as="script" fetchpriority="high" />
 {%- include base/fontawesome.html.liquid type="preload" %}
 <link rel="preload" href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Source+Code+Pro:ital,wght@0,400;0,700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'" />
@@ -121,6 +126,7 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 {%- include base/fontawesome.html.liquid type="head" %}
 {%- include base/highlight.html.liquid type="head" %}
 {%- include base/datatable.html.liquid type="head" %}
+{%- include base/calendar.html.liquid type="head" %}
 
 {%- comment %} JavaScript base — Bootstrap must execute before all component scripts {%- endcomment %}
 <script src="{{ site.baseurl }}/assets/js/bootstrap.bundle.min.js" defer></script>
@@ -130,6 +136,7 @@ Uses CSS custom properties for cleaner, more maintainable dynamic styling.
 {%- include base/fontawesome.html.liquid type="script" %}
 {%- include base/highlight.html.liquid type="script" %}
 {%- include base/datatable.html.liquid type="script" %}
+{%- include base/calendar.html.liquid type="script" %}
 
 {%- comment %} JavaScript UI behavior components — depend on Bootstrap and FontAwesome SVG+JS {%- endcomment %}
 {%- include base/backtotop.html.liquid %}

data/_includes/base/link.html.liquid

@@ -64,6 +64,14 @@ Security & External Links:
   {%- assign anchor            = nil %}
   {%- assign rel_attr          = nil %}
 
+  {%- comment %} --- Security: neutralize dangerous URI schemes --- {% endcomment %}
+  {%- if link != nil -%}
+    {%- assign link_downcase = link | downcase -%}
+    {%- if link_downcase contains "javascript:" or link_downcase contains "data:" or link_downcase contains "vbscript:" -%}
+      {%- assign link = "#" -%}
+    {%- endif -%}
+  {%- endif -%}
+
   {%- comment %} === Data processing === {% endcomment %}
   {%- if link != nil -%}
     {%- assign link_char1 = link | slice: 0, 1 -%}

data/_includes/base/navindex.html.liquid

@@ -129,7 +129,7 @@ Data Object Properties:
 {% capture table %}
 {% assign show_page_filename = include.show_page_filename | default: "false" %}
 <table class="table dataTable">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th>Name</th>
       <th>Description</th>
@@ -155,7 +155,7 @@ Data Object Properties:
 
 {% capture component_table %}
 <table class="table dataTable">
-  <thead class="table-light">
+  <thead>
     <tr>
       <th>Name</th>
       <th>Status</th>

data/_sass/base/_calendar.scss

@@ -0,0 +1,185 @@
+// ================================================================================
+// Event Calendar (@event-calendar/build) theming
+// ================================================================================
+// Purpose: map the CentOS color palette onto the library's own CSS custom
+// properties (--ec-*) instead of hand-rolling calendar styles.
+//
+// `body` prefix: event-calendar.min.css loads after this theme's own
+// stylesheet (see head.html.liquid) and ships its own same-specificity
+// `.ec { --ec-*: ...; }` block, so a plain `.ec { }` here would lose the
+// cascade. `body .ec` bumps specificity above it.
+//
+// Dark mode keys off Bootstrap's `[data-bs-theme="dark"]`, not the
+// library's own `.ec-dark`/`.ec-auto-dark` classes, to match every other
+// Bootstrap component. Two selector branches below because the attribute
+// can sit on `<html>` itself or on some other ancestor (e.g. `<nav>`), and
+// one selector can't match both.
+// ================================================================================
+
+body .ec {
+  // --ec-bg-color is never applied to .ec itself, leaving the outer
+  // container transparent. --ec-surface-bg-color fills that gap (declared
+  // once here, cascades to the dark block below).
+  //
+  // Kept separate from --ec-bg-color: the library also derives
+  // --ec-day-bg-color, .ec-sidebar, and .ec-col-head from --ec-bg-color, so
+  // feeding it $light (to match the doc preview boxes) would flatten the
+  // day grid to the same color and lose contrast. --ec-bg-color stays
+  // $white.
+  background-color: var(--ec-surface-bg-color);
+  --ec-surface-bg-color: #{$light};
+
+  --ec-bg-color: #{$white};
+  --ec-text-color: #{$body-color};
+  --ec-border-color: #{$border-color};
+
+  --ec-button-bg-color: #{$white};
+  --ec-button-border-color: #{$border-color};
+  --ec-button-text-color: var(--bs-link-color);
+  --ec-button-active-bg-color: #{$primary};
+  --ec-button-active-border-color: #{$primary};
+  --ec-button-active-text-color: #{$white};
+
+  // --bs-pagination-hover-* only exists inside `.pagination`, so use the
+  // root-scoped tokens instead — also keeps this in sync with
+  // [data-bs-theme] without a separate dark-mode copy.
+  --ec-button-hover-bg-color: var(--bs-tertiary-bg);
+  --ec-button-hover-text-color: var(--bs-link-hover-color);
+
+  --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-50')};
+  --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-50')};
+
+  --ec-event-bg-color: #{$primary};
+  --ec-event-text-color: #{$white};
+  --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-200')};
+
+  --ec-now-indicator-color: #{$danger};
+  --ec-popup-bg-color: #{$white};
+
+  // The library only resets .ec-event-title's font-size in list view;
+  // elsewhere it falls through to this theme's Bootstrap h4 size. Matched
+  // to the calendar's own body text size instead.
+  //
+  // Grid/all-day views also set `min-block-size: 1.5em` here for tap
+  // targets; since the element is `display: block`, the shrunk text stays
+  // top-biased inside that height. Flex + centered alignment fixes that (a
+  // no-op where the min-height isn't set).
+  .ec-event-title {
+    font-size: #{$font-size-base};
+    display: flex;
+    align-items: center;
+  }
+
+  // Same h4 collision as .ec-event-title above; matched to body text size,
+  // kept bold so the two rows stay visually distinct. (.ec-day-head also
+  // doubles as the day-number cell in month view.)
+  .ec-day-head {
+    font-size: #{$font-size-base};
+    font-weight: 700;
+  }
+
+  // These are real headings, so they inherit this theme's
+  // `color: var(--bs-heading-color)` → `inherit` ($headings-color is
+  // unset). Normally that's the body color, but breaks wherever the
+  // calendar sits inside something that forces its own text color (e.g.
+  // the doc example's `.text-bg-light` preview, which forces black). Set
+  // explicitly instead of relying on inheritance.
+  .ec-title,
+  .ec-col-head,
+  .ec-day-head {
+    color: var(--ec-text-color);
+  }
+
+  // Only gets a background when event data sets one inline; our example
+  // events don't, so default it to the event color instead of leaving it
+  // invisible.
+  .ec-event-tag {
+    background-color: var(--ec-event-bg-color);
+  }
+
+  // .ec-header is `position: sticky`, but the library only backgrounds its
+  // own .ec-sidebar cell inside it — the toolbar cell stays transparent, so
+  // scrolled-under content shows through. .ec-toolbar gets the same
+  // --ec-surface-bg-color as .ec to close that gap.
+  //
+  // The library also spaces the toolbar from the body with
+  // `margin-block-end: 1em` (not padding), so that gap isn't painted by the
+  // background above. Zeroed out and replaced with equal padding instead.
+  .ec-toolbar {
+    background-color: var(--ec-surface-bg-color);
+    margin-block-end: 0;
+    padding-block-end: 1em;
+  }
+}
+
+// The library's hover rule shares --ec-button-active-* with .ec-active, so
+// hover and the persisted selection would look identical; `:not(.ec-active)`
+// leaves the active button's fill alone on hover.
+body .ec .ec-button:not(:disabled):hover:not(.ec-active) {
+  background-color: var(--ec-button-hover-bg-color);
+  border-color: var(--ec-button-border-color);
+  color: var(--ec-button-hover-text-color);
+  // Avoids tying with .ec-active's z-index:1 at the grouped buttons' 1px
+  // overlap seam, which made hover/active flicker near that pixel.
+  z-index: 0;
+}
+
+// Event Calendar draws its prev/next glyph as a pure-CSS border trick (no
+// icon-injection API exists). Swapped for real FontAwesome chevrons to
+// match datatable's pagination icons (datatable.js). `rotate: none` cancels
+// 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.
+//
+// .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;
+// `line-height: 1` mirrors FontAwesome's own rule instead of the button's 1.5.
+body .ec .ec-icon.ec-prev,
+body .ec .ec-icon.ec-next {
+  inline-size: 1.25em;
+  text-align: center;
+  line-height: 1;
+}
+
+body .ec .ec-icon.ec-prev::after,
+body .ec .ec-icon.ec-next::after {
+  content: "\f053"; // fa-chevron-left
+  font-family: "Font Awesome 7 Free";
+  font-weight: 900;
+  font-style: normal; // matches FontAwesome's own .fas rule; guards against inherited italics
+  border: none;
+  rotate: none;
+  inset-inline-start: 0;
+  block-size: auto;
+  inline-size: auto;
+}
+
+body .ec .ec-icon.ec-next::after {
+  content: "\f054"; // fa-chevron-right
+}
+
+// [data-bs-theme="dark"] may sit on <html> itself or on some other ancestor
+// — two branches to match both (see header comment).
+html[data-bs-theme="dark"] .ec,
+html [data-bs-theme="dark"] .ec {
+  --ec-surface-bg-color: #{$dark};
+  --ec-bg-color: #{$dark};
+  --ec-text-color: #{$light};
+  --ec-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+  --ec-button-bg-color: #{$dark};
+  --ec-button-border-color: #{map-get($theme-colors, 'centos-purple-800')};
+  --ec-button-active-bg-color: #{$primary};
+  --ec-button-active-border-color: #{$primary};
+  --ec-button-active-text-color: #{$white};
+
+  --ec-today-bg-color: #{map-get($theme-colors, 'centos-orange-900')};
+  --ec-highlight-color: #{map-get($theme-colors, 'centos-purple-900')};
+
+  --ec-event-bg-color: #{map-get($theme-colors, 'centos-purple-400')};
+  --ec-event-text-color: #{$dark};
+  --ec-bg-event-color: #{map-get($theme-colors, 'centos-purple-800')};
+
+  --ec-popup-bg-color: #{$dark};
+}

data/_sass/base/_customization.scss

@@ -1,22 +1,24 @@
-// 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.
+// Custom CSS rules and utility classes that override standard Bootstrap
+// structure. Imported after `base/bootstrap` (so these win the cascade) and
+// before third-party component overrides like base/calendar (so those win
+// over these in turn).
 // 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)
+// CSS Custom Properties (currently unused)
 // ================================================================================
-// These variables are used in head.html.liquid for dynamic CSS generation.
-// Defined here for centralized configuration and availability to inline styles.
+// 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.
 :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;
 }
@@ -142,7 +144,8 @@ body {
 //                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.
+//                Only applied to .alert:not(.announcement):not(.breakingnews), to
+//                avoid styling announcements and breaking news.
 
 $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>"),
@@ -192,13 +195,11 @@ $centos-alert-icons: (
 
 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.
+  // Linked headings' bottom clearance.
   // --------------------------------------------------------------------------------
+  // Navbar-independent baseline spacing for anchor-linked headings/figures.
+  // The fixed-navbar top clearance for these same selectors lives in the
+  // `.has-navbar main` block near the end of this file.
   .content > h1,
   .content > h2,
   .content > h3,
@@ -289,25 +290,14 @@ main {
     color: var(--bs-primary);
   }
 
-  // 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.
+  // Accordion containers' bottom clearance — same as the headings/figure
+  // block above, applied to both `.accordion` and `.accordion-item` since an
+  // anchor can target either level.
   .content .accordion,
   .content .accordion-item {
     scroll-margin-bottom: 100px;
   }
 
-  // --------------------------------------------------------------------------------
-  // DataTable BS5 corrections
-  // --------------------------------------------------------------------------------
-  .content { .dt-container { margin-bottom: 1rem; } }
-
   // --------------------------------------------------------------------------------
   // Copy Value Component
   // --------------------------------------------------------------------------------
@@ -370,10 +360,7 @@ main {
         height: 1rem; /* Adjust icon size as needed */
       }
       code {
-        border-left: 5px;
-        border-top: 1px;
-        border-right: 1px;
-        border-bottom: 1px;
+        border: 1px;
         border-color: var(--bs-light-border-subtle);
         border-style: solid;
       }

data/_sass/base/_datatable.scss

@@ -0,0 +1,125 @@
+// ================================================================================
+// DataTables (datatables.net) BS5 theming corrections
+// ================================================================================
+// Purpose: fix up the parts of DataTables' Bootstrap 5 styling integration
+// that don't compose cleanly with this theme's own Bootstrap variables and
+// tokens.
+// ================================================================================
+
+main {
+  // --------------------------------------------------------------------------------
+  // DataTable BS5 corrections
+  // --------------------------------------------------------------------------------
+  .content { .dt-container { margin-bottom: 0.5rem; } }
+
+  // Bootstrap paints table cells from `--bs-table-bg`, not `background-color`,
+  // so override that variable instead of adding a class. Scoped to `thead`
+  // only, without requiring `.table-light`: kramdown's `{:.table .dataTable}`
+  // IAL can't add a class to the generated `<thead>`, so a `.table-light`
+  // requirement would silently skip every Markdown-authored table.
+  .content {
+    table.dataTable thead {
+      --bs-table-bg: var(--bs-centos-purple-100);
+    }
+  }
+
+  // DataTables' bundled CSS never reads `--bs-table-striped-bg`; it paints
+  // striped rows with a hardcoded black box-shadow (`--dt-row-stripe`) that
+  // paints over any background-color, so neither the Bootstrap variable nor
+  // a class has any effect. Overridden directly with `--bs-light` — the same
+  // token driving the DataTables wrapper's `.bg-light` (datatable.js), so
+  // stripe and container share one semantic color.
+  // `:not(:hover)` defers to the hover rule below; `:not([class])` defers to
+  // contextual row classes like `.table-warning`.
+  .content {
+    table.table.dataTable.table-striped > tbody > tr:nth-of-type(2n+1):not(:hover):not([class]) > * {
+      box-shadow: inset 0 0 0 9999px var(--bs-light);
+    }
+  }
+
+  // DataTables' own hover rule has the same box-shadow-over-background issue
+  // (`--dt-row-hover`, flat 7.5%-opacity black). Translucent purple composites
+  // over whatever's already on the row — plain, striped, or `.table-warning`
+  // — instead of needing to exclude any of them; alpha kept low (0.05) so it
+  // doesn't collide with the stripe color (`--bs-light`).
+  .content {
+    table.table.dataTable.table-hover > tbody > tr:hover > * {
+      box-shadow: inset 0 0 0 9999px rgba(var(--bs-primary-rgb), 0.05);
+    }
+  }
+
+  // DataTables marks sort state by opacity alone (idle/active), no hue and
+  // no icon-injection API — replaced with real FontAwesome glyphs so each
+  // header shows one icon matching its actual state. Coupled to
+  // with_fontawesome_data.version's default "Font Awesome 7 Free" family —
+  // revisit if that changes.
+  //
+  // Our selectors out-specify DataTables' own, but specificity wins per
+  // property, not per rule — every ::before/::after property that would
+  // conflict with a single centered glyph is redeclared below.
+  .content {
+    table.dataTable thead tr th .dt-column-order,
+    table.dataTable thead tr td .dt-column-order {
+      text-align: center;
+      line-height: 20px;
+    }
+
+    // Idle: orderable but not the active sort column/direction — single
+    // fa-sort (⇅) on ::before; ::after suppressed so only one glyph shows.
+    table.dataTable thead tr th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before,
+    table.dataTable thead tr td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::before {
+      content: "\f0dc"; // fa-sort
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-centos-purple-300);
+    }
+
+    table.dataTable thead tr th.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after,
+    table.dataTable thead tr td.dt-orderable-asc:not(.dt-ordering-asc):not(.dt-ordering-desc) .dt-column-order::after {
+      display: none;
+    }
+
+    // Ascending: ::before becomes fa-sort-up; ::after suppressed.
+    table.dataTable thead tr th.dt-ordering-asc .dt-column-order::before,
+    table.dataTable thead tr td.dt-ordering-asc .dt-column-order::before {
+      content: "\f0de"; // fa-sort-up
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-primary);
+    }
+
+    table.dataTable thead tr th.dt-ordering-asc .dt-column-order::after,
+    table.dataTable thead tr td.dt-ordering-asc .dt-column-order::after {
+      display: none;
+    }
+
+    // Descending: ::after becomes fa-sort-down; ::before suppressed.
+    table.dataTable thead tr th.dt-ordering-desc .dt-column-order::after,
+    table.dataTable thead tr td.dt-ordering-desc .dt-column-order::after {
+      content: "\f0dd"; // fa-sort-down
+      font-family: "Font Awesome 7 Free";
+      font-weight: 900;
+      font-style: normal;
+      position: static;
+      line-height: inherit;
+      font-size: 0.8em;
+      opacity: 1;
+      color: var(--bs-primary);
+    }
+
+    table.dataTable thead tr th.dt-ordering-desc .dt-column-order::before,
+    table.dataTable thead tr td.dt-ordering-desc .dt-column-order::before {
+      display: none;
+    }
+  }
+}

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

@@ -33,3 +33,8 @@
 
 // 6. Add additional custom code here
 @import "base/customization";
+
+// 7. Third-party component theme overrides (must load after our own
+// customizations so component-specific corrections win the cascade).
+@import "base/calendar";
+@import "base/datatable";