@f5xc-salesdemos/docs-theme 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@f5xc-salesdemos/docs-theme",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "F5 Distributed Cloud branded Starlight documentation theme",
   "type": "module",
   "license": "MIT",

package/styles/custom.css

@@ -55,13 +55,13 @@
   --color-N200: #e6e9f3;
 }
 
-:root:not([data-theme='light']) {
+:root:not([data-theme="light"]) {
   --color-N600: #e5eaff;
   --color-blue-light: #0e41aa;
   --color-N200: #1a2a6c;
 }
 
-:root[data-theme='light'] {
+:root[data-theme="light"] {
   --color-N600: #0f1e57;
   --color-blue-light: #e5eaff;
   --color-N200: #e6e9f3;
@@ -99,18 +99,10 @@
 
   /* Shadows — dark mode (neutral-tinted #cccccc base) */
   --f5-shadow-inset: inset 0px 1px 2px 1px #cccccc0d;
-  --f5-shadow-low:
-    0px 1px 1px 0px #cccccc0a,
-    0px 2px 2px 0px #cccccc0a;
-  --f5-shadow-mid:
-    0px 2px 3px 0px #cccccc0d,
-    0px 8px 16px -10px #cccccc1a;
-  --f5-shadow-high:
-    0px 2px 3px 0px #cccccc1a,
-    0px 16px 16px -10px #cccccc1a;
-  --f5-shadow-higher:
-    0px 2px 3px 0px #cccccc0d,
-    0px 12px 28px 0px #cccccc26;
+  --f5-shadow-low: 0px 1px 1px 0px #cccccc0a, 0px 2px 2px 0px #cccccc0a;
+  --f5-shadow-mid: 0px 2px 3px 0px #cccccc0d, 0px 8px 16px -10px #cccccc1a;
+  --f5-shadow-high: 0px 2px 3px 0px #cccccc1a, 0px 16px 16px -10px #cccccc1a;
+  --f5-shadow-higher: 0px 2px 3px 0px #cccccc0d, 0px 12px 28px 0px #cccccc26;
 
   /* Borders — dark mode (alpha-transparent) */
   --f5-border-faint: #f5f5f51a;
@@ -129,12 +121,14 @@
   --f5-transition-spring: 0.2s cubic-bezier(0.54, 1.5, 0.38, 1.11);
 
   /* Focus rings */
-  --f5-focus-action: inset 0 0 0 1px var(--f5-river), 0 0 0 3px var(--f5-river-2);
-  --f5-focus-critical: inset 0 0 0 1px var(--f5-red-3), 0 0 0 3px var(--f5-red-2);
+  --f5-focus-action:
+    inset 0 0 0 1px var(--f5-river), 0 0 0 3px var(--f5-river-2);
+  --f5-focus-critical:
+    inset 0 0 0 1px var(--f5-red-3), 0 0 0 3px var(--f5-red-2);
 }
 
 /* ===== Light Mode ===== */
-:root[data-theme='light'] {
+:root[data-theme="light"] {
   --sl-color-white: var(--f5-black-4);
   --sl-color-gray-1: var(--f5-black-4);
   --sl-color-gray-2: var(--f5-black-3);
@@ -157,18 +151,10 @@
 
   /* Shadows — light mode (#343434 base) */
   --f5-shadow-inset: inset 0px 1px 2px 1px #3434341a;
-  --f5-shadow-low:
-    0px 1px 1px 0px #3434340d,
-    0px 2px 2px 0px #3434340d;
-  --f5-shadow-mid:
-    0px 2px 3px 0px #3434341a,
-    0px 8px 16px -10px #34343433;
-  --f5-shadow-high:
-    0px 2px 3px 0px #34343426,
-    0px 16px 16px -10px #34343433;
-  --f5-shadow-higher:
-    0px 2px 3px 0px #3434341a,
-    0px 12px 28px 0px #34343440;
+  --f5-shadow-low: 0px 1px 1px 0px #3434340d, 0px 2px 2px 0px #3434340d;
+  --f5-shadow-mid: 0px 2px 3px 0px #3434341a, 0px 8px 16px -10px #34343433;
+  --f5-shadow-high: 0px 2px 3px 0px #34343426, 0px 16px 16px -10px #34343433;
+  --f5-shadow-higher: 0px 2px 3px 0px #3434341a, 0px 12px 28px 0px #34343440;
 
   /* Borders — light mode */
   --f5-border-faint: #3434341a;
@@ -182,8 +168,9 @@
 
 /* ===== Fonts & Layout ===== */
 :root {
-  --sl-font: "proximaNova", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
-  --sl-font-heading: "neusaNextProWide", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
+  --sl-font: "proximaNova", system-ui, "Segoe UI", helvetica, arial, sans-serif;
+  --sl-font-heading:
+    "neusaNextProWide", system-ui, "Segoe UI", helvetica, arial, sans-serif;
   --sl-content-width: 60rem;
   --sl-sidebar-width: 15rem;
 
@@ -195,12 +182,18 @@
   --sl-text-h4: var(--sl-text-lg);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--sl-font-heading);
 }
 
 /* F5 type hierarchy weights */
-h1, h2 {
+h1,
+h2 {
   font-weight: 700;
 }
 
@@ -208,14 +201,16 @@ h3 {
   font-weight: 500;
 }
 
-h4, h5, h6 {
+h4,
+h5,
+h6 {
   font-family: var(--sl-font);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.05em;
 }
 
-@media (min-width: 72rem) {
+@media (width >= 72rem) {
   .right-sidebar-container {
     max-width: 11rem;
   }
@@ -252,9 +247,11 @@ h4, h5, h6 {
 /* Starlight Card — consistent shadow */
 .card {
   box-shadow: var(--f5-shadow-low);
-  transition: box-shadow var(--f5-transition-base),
-              transform var(--f5-transition-base);
+  transition:
+    box-shadow var(--f5-transition-base),
+    transform var(--f5-transition-base);
 }
+
 .card:hover {
   box-shadow: var(--f5-shadow-mid);
   transform: translateY(-1px);
@@ -274,11 +271,11 @@ h4, h5, h6 {
 
 /* macOS iTerm-style window frame for terminal code blocks */
 .expressive-code .frame.is-terminal {
-  border: 2px solid rgba(255, 255, 255, 0.15);
+  border: 2px solid rgb(255 255 255 / 15%);
 }
 
 :root[data-theme="light"] .expressive-code .frame.is-terminal {
-  border-color: rgba(0, 0, 0, 0.2);
+  border-color: rgb(0 0 0 / 20%);
 }
 
 .expressive-code .frame.is-terminal .header {
@@ -296,7 +293,8 @@ h4, h5, h6 {
 .expressive-code .frame.is-terminal .header::before {
   -webkit-mask-image: none !important;
   mask-image: none !important;
-  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E") no-repeat center / contain !important;
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Ccircle cx='6' cy='6' r='6' fill='%23ff5f56'/%3E%3Cpath d='M3.8 3.8L8.2 8.2M8.2 3.8L3.8 8.2' stroke='%234d0000' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='26' cy='6' r='6' fill='%23ffbd2e'/%3E%3Cpath d='M23.5 6H28.5' stroke='%23995700' stroke-width='1.1' stroke-linecap='round'/%3E%3Ccircle cx='46' cy='6' r='6' fill='%2327c93f'/%3E%3Cpolygon points='43.5,3.5 43.5,6 46,3.5' fill='%23006500'/%3E%3Cpolygon points='48.5,8.5 48.5,6 46,8.5' fill='%23006500'/%3E%3C/svg%3E")
+    no-repeat center / contain !important;
   opacity: 1 !important;
   width: 52px;
   height: 12px;
@@ -338,7 +336,7 @@ h4, h5, h6 {
 }
 
 .breadcrumbs li + li::before {
-  content: '/';
+  content: "/";
   padding-inline: 0.375rem;
   color: var(--sl-color-gray-5);
 }
@@ -371,9 +369,10 @@ h4, h5, h6 {
   text-decoration: none;
   white-space: nowrap;
   flex-shrink: 0;
-  transition: color var(--f5-transition-fast),
-              background var(--f5-transition-fast),
-              border-color var(--f5-transition-fast);
+  transition:
+    color var(--f5-transition-fast),
+    background var(--f5-transition-fast),
+    border-color var(--f5-transition-fast);
 }
 
 .edit-link:hover {
@@ -412,8 +411,13 @@ h4, h5, h6 {
   font-family: var(--sl-font);
 }
 
-.swatch-color.text-light { color: #fff; }
-.swatch-color.text-dark { color: #000; }
+.swatch-color.text-light {
+  color: #fff;
+}
+
+.swatch-color.text-dark {
+  color: #000;
+}
 
 .swatch-label {
   padding: 0.5rem;
@@ -452,7 +456,7 @@ h4, h5, h6 {
   background: var(--sl-color-gray-7, #faf9f7);
 }
 
-:root:not([data-theme='light']) .icon-card-image {
+:root:not([data-theme="light"]) .icon-card-image {
   background: var(--sl-color-gray-6);
 }
 
@@ -463,12 +467,12 @@ h4, h5, h6 {
 }
 
 /* Invert near-black SVGs for dark mode visibility */
-:root:not([data-theme='light']) .icon-card-image img {
+:root:not([data-theme="light"]) .icon-card-image img {
   filter: invert(1);
 }
 
 /* Preserve original colors for branded/color-variant icons in dark mode */
-:root:not([data-theme='light']) .icon-card-image.no-invert img {
+:root:not([data-theme="light"]) .icon-card-image.no-invert img {
   filter: none;
 }
 
@@ -480,7 +484,7 @@ h4, h5, h6 {
   font-family: var(--sl-font);
   background: var(--sl-color-gray-6);
   color: var(--sl-color-gray-1);
-  word-break: break-word;
+  overflow-wrap: break-word;
 }
 
 /* ===== Scroll-to-Top Button Size Override ===== */
@@ -488,14 +492,17 @@ h4, h5, h6 {
   width: 36px !important;
   height: 36px !important;
 }
+
 .scroll-to-top-button svg {
   width: 20px !important;
   height: 20px !important;
 }
+
 .scroll-to-top-button .scroll-progress-ring {
   width: 36px !important;
   height: 36px !important;
 }
+
 .scroll-to-top-button .scroll-progress-ring circle {
   cx: 18;
   cy: 18;
@@ -508,6 +515,7 @@ body.light-mode {
   background-color: var(--sl-color-bg) !important;
   color: var(--sl-color-text) !important;
 }
+
 body {
   --scalar-background-1: unset;
   --scalar-background-2: unset;
@@ -517,8 +525,9 @@ body {
 /* ===== Phase 2: Sidebar Navigation Enhancement ===== */
 .sidebar-content a {
   border-radius: var(--f5-radius-sm);
-  transition: background-color var(--f5-transition-fast),
-              color var(--f5-transition-fast);
+  transition:
+    background-color var(--f5-transition-fast),
+    color var(--f5-transition-fast);
 }
 
 .sidebar-content a:hover {
@@ -534,12 +543,15 @@ body {
 }
 
 /* ===== Phase 3: Card Hover Effects + Link Transitions ===== */
-.swatch, .icon-card {
-  transition: box-shadow var(--f5-transition-base),
-              transform var(--f5-transition-base);
+.swatch,
+.icon-card {
+  transition:
+    box-shadow var(--f5-transition-base),
+    transform var(--f5-transition-base);
 }
 
-.swatch:hover, .icon-card:hover {
+.swatch:hover,
+.icon-card:hover {
   box-shadow: var(--f5-shadow-mid);
   transform: translateY(-1px);
 }
@@ -570,9 +582,11 @@ body {
   background: var(--f5-red);
   color: var(--f5-white);
   border: none;
-  transition: background-color var(--f5-transition-fast),
-              box-shadow var(--f5-transition-fast);
+  transition:
+    background-color var(--f5-transition-fast),
+    box-shadow var(--f5-transition-fast);
 }
+
 .btn-primary:hover {
   background: var(--f5-red-3);
   box-shadow: var(--f5-shadow-low);
@@ -584,9 +598,11 @@ body {
   background: transparent;
   color: var(--sl-color-gray-2);
   border: 1px solid var(--f5-border-default);
-  transition: background-color var(--f5-transition-fast),
-              border-color var(--f5-transition-fast);
+  transition:
+    background-color var(--f5-transition-fast),
+    border-color var(--f5-transition-fast);
 }
+
 .btn-secondary:hover {
   background: var(--f5-surface-hover);
   border-color: var(--f5-border-strong);
@@ -599,56 +615,79 @@ body {
   border: none;
   transition: background-color var(--f5-transition-fast);
 }
+
 .btn-tertiary:hover {
   background: var(--f5-surface-hover);
   text-decoration: none;
 }
 
-.btn-sm { padding: 0.375rem 0.75rem; font-size: 0.8125rem; min-height: 2rem; }
-.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; min-height: 3rem; }
+.btn-sm {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.8125rem;
+  min-height: 2rem;
+}
+
+.btn-lg {
+  padding: 0.75rem 1.5rem;
+  font-size: 1rem;
+  min-height: 3rem;
+}
 
 .btn-critical {
   background: var(--f5-red-3);
   color: var(--f5-white);
   border: none;
-  transition: background-color var(--f5-transition-fast),
-              box-shadow var(--f5-transition-fast);
+  transition:
+    background-color var(--f5-transition-fast),
+    box-shadow var(--f5-transition-fast);
 }
+
 .btn-critical:hover {
   background: var(--f5-red-4);
   box-shadow: var(--f5-shadow-low);
   text-decoration: none;
   color: var(--f5-white);
 }
+
 .btn-critical:focus-visible {
   box-shadow: var(--f5-focus-critical);
 }
 
 /* ===== Phase 5: Hero Gradients ===== */
 .hero-gradient-primary {
-  background: linear-gradient(135deg, var(--f5-river-2) 0%, var(--f5-river) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--f5-river-2) 0%,
+    var(--f5-river) 100%
+  );
 }
 
 .hero-gradient-eggplant {
-  background: linear-gradient(135deg, var(--f5-eggplant-2) 0%, var(--f5-eggplant) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--f5-eggplant-2) 0%,
+    var(--f5-eggplant) 100%
+  );
 }
 
 .hero-gradient-red {
   background: linear-gradient(135deg, var(--f5-red-2) 0%, var(--f5-red) 100%);
 }
 
-:root[data-theme='light'] .hero-gradient-faint {
+:root[data-theme="light"] .hero-gradient-faint {
   background: linear-gradient(180deg, #faf9f7 0%, #f5f5f5 100%);
 }
-:root:not([data-theme='light']) .hero-gradient-faint {
+
+:root:not([data-theme="light"]) .hero-gradient-faint {
   background: linear-gradient(180deg, #222 0%, #000 100%);
 }
 
 .hero-fade {
   position: relative;
 }
+
 .hero-fade::after {
-  content: '';
+  content: "";
   position: absolute;
   bottom: 0;
   left: 0;
@@ -658,12 +697,19 @@ body {
   pointer-events: none;
 }
 
-.hero-vignette { position: relative; }
+.hero-vignette {
+  position: relative;
+}
+
 .hero-vignette::after {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
-  background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.15) 100%);
+  background: radial-gradient(
+    ellipse at center,
+    transparent 40%,
+    rgb(0 0 0 / 15%) 100%
+  );
   pointer-events: none;
 }
 
@@ -683,14 +729,15 @@ summary:focus-visible {
 }
 
 .social-links a {
-  transition: opacity var(--f5-transition-base),
-              color var(--f5-transition-base);
+  transition:
+    opacity var(--f5-transition-base),
+    color var(--f5-transition-base);
 }
 
 /* Widen mega-menu flyout to prevent title word-wrap in two-column layouts.
-   Radix JS sets --radix-navigation-menu-viewport-width based on intrinsic
-   content measurement (~320px), so max-width alone cannot force expansion.
-   We override min-width to ensure two-column grids have adequate room. */
+  Radix JS sets --radix-navigation-menu-viewport-width based on intrinsic
+  content measurement (~320px), so max-width alone cannot force expansion.
+  We override min-width to ensure two-column grids have adequate room. */
 .smm-viewport {
   min-width: min(90vw, 650px);
   max-width: min(90vw, 800px);