@semanticus/semanticus-css 0.8.0 → 0.9.0

package/src/semantics/elements/_main.css

@@ -0,0 +1,7 @@
+/**
+ * Main fills up the available width, and has a height defined by its content.
+ * Stacks its children vertically.
+ */
+main {
+  width: 100%;
+}

package/src/semantics/elements/_mark.css

@@ -0,0 +1,6 @@
+mark {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--color-mark-bg);
+  color: var(--color-mark-text);
+  vertical-align: baseline;
+}

package/src/semantics/{_nav.css → elements/_nav.css}

@@ -6,7 +6,7 @@ nav {
   --typography-headings-top: 0;
 
   display: flex;
-  gap: var(--spacing);
+  gap: calc(var(--nav-link-spacing) * 1.5);
   align-items: center;
   justify-content: space-between;
   overflow: visible;
@@ -21,13 +21,13 @@ nav {
 
     & ul li {
       &:not(:first-child) {
-        margin-inline-start: calc(var(--nav-link-spacing-horizontal) * 2);
+        margin-inline-start: calc(var(--nav-link-spacing) * 2);
       }
 
       &:not(:last-child)::after {
         display: inline-block;
         position: absolute;
-        width: calc(var(--nav-link-spacing-horizontal) * 4);
+        width: calc(var(--nav-link-spacing) * 3);
         content: var(--nav-breadcrumb-divider);
         color: var(--color-text-muted);
         text-align: center;
@@ -47,7 +47,7 @@ nav {
   ul, ol {
     align-items: center;
     display: flex;
-    gap: var(--spacing);
+    gap: calc(var(--nav-link-spacing) * 1.5);
     list-style: none;
     margin-bottom: 0 !important;
     padding: 0;

package/src/semantics/elements/_p.css

@@ -0,0 +1,11 @@
+p {
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

package/src/semantics/elements/_section.css

@@ -0,0 +1,7 @@
+/**
+ * Section
+ */
+section {
+  width: 100%;
+  margin-bottom: var(--spacing);
+}

package/src/semantics/elements/_strong.css

@@ -0,0 +1,4 @@
+b,
+strong {
+  font-weight: bolder;
+}

package/src/semantics/elements/_sub.css

@@ -0,0 +1,7 @@
+sub {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+  bottom: -0.25em;
+}

package/src/semantics/elements/_sup.css

@@ -0,0 +1,7 @@
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+  top: -0.5em;
+}

package/src/semantics/{_table.css → elements/_table.css}

@@ -1,11 +1,16 @@
 /**
  * Table
  */
-:where(table) {
-  width: 100%;
+table {
   border-collapse: collapse;
   border-spacing: 0;
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
   text-indent: 0;
+  width: 100%;
 }
 
 th,

package/src/semantics/modules.css

@@ -3,36 +3,51 @@
  * Just the semantic component styles (no variables, no normalize)
  * Used by the full version which imports variables/normalize separately
  */
+@import "./_misc.css";
 
-@import "./_aria-busy.css";
-@import "./_article.css";
-@import "./_aside.css";
-@import "./_body.css";
-@import "./_button.css";
-@import "./_code.css";
-@import "./_details.css";
-@import "./_dialog.css";
-@import "./_document.css";
-@import "./_embedded.css";
-@import "./_figure.css";
-@import "./_footer.css";
-@import "./_header.css";
-@import "./_hidden.css";
-@import "./_hr.css";
-@import "./_input.css";
-@import "./_links.css";
-@import "./_main.css";
-@import "./_nav.css";
-@import "./_progress.css";
-@import "./_role-group-search.css";
-@import "./_role-toolbar.css";
-@import "./_role-tooltip.css";
-@import "./_section.css";
-@import "./_table.css";
-@import "./_type-checkbox-radio.css";
-@import "./_type-color.css";
-@import "./_type-date.css";
-@import "./_type-file.css";
-@import "./_type-range.css";
-@import "./_type-search.css";
-@import "./_typography.css";
+@import "./attributes/_aria-busy.css";
+@import "./attributes/_hidden.css";
+@import "./attributes/_popover.css";
+@import "./attributes/_role-group-search.css";
+@import "./attributes/_role-toolbar.css";
+@import "./attributes/_role-tooltip.css";
+
+@import "./elements/_abbr.css";
+@import "./elements/_address.css";
+@import "./elements/_article.css";
+@import "./elements/_aside.css";
+@import "./elements/_blockquote.css";
+@import "./elements/_body.css";
+@import "./elements/_button.css";
+@import "./elements/_code.css";
+@import "./elements/_del.css";
+@import "./elements/_details.css";
+@import "./elements/_dialog.css";
+@import "./elements/_document.css";
+@import "./elements/_embedded.css";
+@import "./elements/_figure.css";
+@import "./elements/_footer.css";
+@import "./elements/_header.css";
+@import "./elements/_headings.css";
+@import "./elements/_hgroup.css";
+@import "./elements/_hr.css";
+@import "./elements/_input.css";
+@import "./elements/_ins.css";
+@import "./elements/_links.css";
+@import "./elements/_lists.css";
+@import "./elements/_main.css";
+@import "./elements/_mark.css";
+@import "./elements/_nav.css";
+@import "./elements/_p.css";
+@import "./elements/_progress.css";
+@import "./elements/_section.css";
+@import "./elements/_strong.css";
+@import "./elements/_sub.css";
+@import "./elements/_sup.css";
+@import "./elements/_table.css";
+@import "./elements/_type-checkbox-radio.css";
+@import "./elements/_type-color.css";
+@import "./elements/_type-date.css";
+@import "./elements/_type-file.css";
+@import "./elements/_type-range.css";
+@import "./elements/_type-search.css";

package/src/sizes/pico.css

@@ -22,11 +22,10 @@
   --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
 
   /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
-  --spacing: 1rem;
-  --responsive-multiplier: 1; /* Multiplier applied to spacing for responsive adjustments at wider breakpoints */
+  --base-spacing: 1rem;
+  --responsive-multiplier: 1;
+  --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
   --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
   --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
   --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
   --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
@@ -37,12 +36,8 @@
   --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
   --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
 
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
   /* Navigation – spacing and breadcrumb configuration */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
+  --nav-link-spacing: calc(var(--spacing) * 0.5); /* padding inside nav links */
   --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
 
   --sidebar-width: 25%; /* Sidebar width */
@@ -55,6 +50,8 @@
     --font-size: 106.25%;
     --sidebar-width: max(25%, 150px);
     --responsive-multiplier: 1.25;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -64,6 +61,8 @@
     --font-size: 112.5%;
     --sidebar-width: max(22%, 180px);
     --responsive-multiplier: 1.5;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -73,6 +72,8 @@
     --font-size: 118.75%;
     --sidebar-width: max(20%, 200px);
     --responsive-multiplier: 1.75;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -82,6 +83,8 @@
     --font-size: 125%;
     --sidebar-width: max(18%, 220px);
     --responsive-multiplier: 2;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }
 
@@ -91,5 +94,7 @@
     --font-size: 131.25%;
     --sidebar-width: clamp(240px, 16%, 300px);
     --responsive-multiplier: 2.25;
+    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+    --nav-link-spacing: calc(var(--spacing) * 0.5);
   }
 }

package/src/variables/_colors.css

@@ -55,7 +55,7 @@
   --color-info-emphasis-rgb: 2, 93, 93;
   --color-warning-emphasis-rgb: 105, 77, 0;
   --color-danger-emphasis-rgb: 155, 35, 24;
-  --color-contrast-emphasis-rgb: 249, 250, 251;
+  --color-contrast-emphasis-rgb: 248, 249, 250;
 
   /* Subtle backgrounds (low opacity) */
   --color-primary-bg-subtle: rgba(var(--color-primary-rgb), 0.1);
@@ -64,7 +64,7 @@
   --color-info-bg-subtle: rgba(var(--color-info-rgb), 0.1);
   --color-warning-bg-subtle: rgba(var(--color-warning-rgb), 0.1);
   --color-danger-bg-subtle: rgba(var(--color-danger-rgb), 0.1);
-  --color-contrast-bg-subtle: #ced4da;
+  --color-contrast-bg-subtle: rgba(var(--color-contrast-rgb), 0.85);
 
   /* Subtle borders (medium opacity) */
   --color-primary-border-subtle: rgba(var(--color-primary-rgb), 0.35);
@@ -73,7 +73,7 @@
   --color-info-border-subtle: rgba(var(--color-info-rgb), 0.35);
   --color-warning-border-subtle: rgba(var(--color-warning-rgb), 0.35);
   --color-danger-border-subtle: rgba(var(--color-danger-rgb), 0.35);
-  --color-contrast-border-subtle: #adb5bd;
+  --color-contrast-border-subtle: rgb(var(--color-contrast-rgb));
 
   /* Status inverse colors */
   --color-success-inverse: #fff;
@@ -82,7 +82,8 @@
   --color-danger-inverse: #fff;
 
   /* Core Colors */
-  --color-background: #fff;
+  --color-body-bg: rgb(var(--color-body-bg-rgb));
+  --color-background: var(--color-body-bg);
   --color-text: rgb(var(--color-text-rgb));
   --color-text-selection: rgba(2, 154, 232, 0.25);
   --color-text-muted: color-mix(in srgb, rgb(var(--color-text-rgb)), rgb(128, 128, 128) 70%);
@@ -132,10 +133,6 @@
   /* Mark & Text */
   --color-mark-bg: rgb(252.5, 230.5, 191.5);
   --color-mark-text: #0f1114;
-
-  /* Blockquote */
-  --blockquote-border-color: var(--color-border-muted);
-  --blockquote-footer-color: var(--color-text-muted);
 }
 
 /* ==========================================================================
@@ -175,7 +172,7 @@
     --color-info-emphasis-rgb: 37, 221, 221;
     --color-warning-emphasis-rgb: 232, 174, 1;
     --color-danger-emphasis-rgb: 245, 183, 168;
-    --color-contrast-emphasis-rgb: 255, 255, 255;
+    --color-contrast-emphasis-rgb: 24, 28, 37;
 
     /* Subtle backgrounds */
     --color-primary-bg-subtle: rgba(var(--color-primary-rgb), 0.15);
@@ -184,7 +181,7 @@
     --color-info-bg-subtle: rgba(var(--color-info-rgb), 0.15);
     --color-warning-bg-subtle: rgba(var(--color-warning-rgb), 0.15);
     --color-danger-bg-subtle: rgba(var(--color-danger-rgb), 0.15);
-    --color-contrast-bg-subtle: #2a3140;
+    --color-contrast-bg-subtle: color-mix(in srgb, rgb(var(--color-contrast-rgb)), black 7%);
 
     /* Subtle borders */
     --color-primary-border-subtle: rgba(var(--color-primary-rgb), 0.35);
@@ -193,7 +190,7 @@
     --color-info-border-subtle: rgba(var(--color-info-rgb), 0.35);
     --color-warning-border-subtle: rgba(var(--color-warning-rgb), 0.35);
     --color-danger-border-subtle: rgba(var(--color-danger-rgb), 0.35);
-    --color-contrast-border-subtle: #2a3140;
+    --color-contrast-border-subtle: rgb(var(--color-contrast-rgb));
 
     /* Core Colors */
     --color-background: rgb(19, 22.5, 30.5);
@@ -246,10 +243,6 @@
     /* Mark & Text */
     --color-mark-bg: #014063;
     --color-mark-text: #fff;
-
-    /* Blockquote */
-    --blockquote-border-color: var(--color-border-muted);
-    --blockquote-footer-color: var(--color-text-muted);
   }
 }
 
@@ -288,7 +281,7 @@
   --color-info-emphasis-rgb: 37, 221, 221;
   --color-warning-emphasis-rgb: 232, 174, 1;
   --color-danger-emphasis-rgb: 245, 183, 168;
-  --color-contrast-emphasis-rgb: 255, 255, 255;
+  --color-contrast-emphasis-rgb: 24, 28, 37;
 
   /* Subtle backgrounds */
   --color-primary-bg-subtle: rgba(var(--color-primary-rgb), 0.15);
@@ -297,7 +290,7 @@
   --color-info-bg-subtle: rgba(var(--color-info-rgb), 0.15);
   --color-warning-bg-subtle: rgba(var(--color-warning-rgb), 0.15);
   --color-danger-bg-subtle: rgba(var(--color-danger-rgb), 0.15);
-  --color-contrast-bg-subtle: #2a3140;
+  --color-contrast-bg-subtle: color-mix(in srgb, rgb(var(--color-contrast-rgb)), black 7%);
 
   /* Subtle borders */
   --color-primary-border-subtle: rgba(var(--color-primary-rgb), 0.35);
@@ -306,7 +299,7 @@
   --color-info-border-subtle: rgba(var(--color-info-rgb), 0.35);
   --color-warning-border-subtle: rgba(var(--color-warning-rgb), 0.35);
   --color-danger-border-subtle: rgba(var(--color-danger-rgb), 0.35);
-  --color-contrast-border-subtle: #2a3140;
+  --color-contrast-border-subtle: rgb(var(--color-contrast-rgb));
 
   /* Core Colors */
   --color-background: rgb(19, 22.5, 30.5);
@@ -359,8 +352,4 @@
   /* Mark & Text */
   --color-mark-bg: #014063;
   --color-mark-text: #fff;
-
-  /* Blockquote */
-  --blockquote-border-color: var(--color-border-muted);
-  --blockquote-footer-color: var(--color-text-muted);
 }

package/src/variables/_components.css

@@ -26,10 +26,10 @@
   --table-row-stripe-bg: rgba(111, 120, 135, 0.0375);
 
   /* Code */
-  --color-code-bg: rgb(243, 244.5, 246.75);
-  --color-code-text: #646b79;
-  --color-kbd-bg: var(--color-text);
-  --color-kbd-text: var(--color-background);
+  --code-bg: rgb(243, 244.5, 246.75);
+  --code-color: #646b79;
+  --kbd-bg: var(--color-text);
+  --kbd-color: var(--color-background);
 
   /* Form Elements */
   --form-bg: rgb(251, 251.5, 252.25);
@@ -68,21 +68,21 @@
   --accordion-open-summary: var(--color-text-muted);
 
   /* Card */
-  --card-bg: var(--color-background);
-  --card-border: var(--color-border-muted);
-  --card-shadow: var(--shadow-lg);
-  --card-section-bg: rgb(251, 251.5, 252.25);
-
-  /* Dropdown */
-  --dropdown-bg: #fff;
-  --dropdown-border: #eff1f4;
-  --dropdown-shadow: var(--shadow-lg);
-  --dropdown-text: var(--color-text);
-  --dropdown-hover-bg: #eff1f4;
-
-  /* Loading & Modal */
+  --pane-bg: var(--color-background);
+  --pane-border: transparent;
+  --pane-shadow: none;
+  --pane-section-border: var(--color-border-muted);
+  --pane-section-bg: rgb(251, 251.5, 252.25);
+
+  /* Menu & Dropdown */
+  --menu-bg: #fff;
+  --menu-border: #eff1f4;
+  --menu-shadow: var(--shadow-lg);
+  --menu-text: var(--color-text);
+  --menu-hover-bg: #eff1f4;
+
+  /* Loading */
   --loading-spinner-opacity: 0.5;
-  --modal-overlay-bg: rgba(232, 234, 237, 0.75);
 
   /* Progress */
   --progress-bg: #dfe3eb;
@@ -91,6 +91,10 @@
   /* Tooltip */
   --tooltip-bg: var(--color-contrast-bg);
   --tooltip-text: var(--color-contrast-inverse);
+
+  /* Backdrop Overlay */
+  --backdrop-overlay-filter: blur(0.375rem);
+  --backdrop-overlay-bg: rgba(232, 234, 237, 0.75);
 }
 
 /* Form focus override for actionable input types in light mode */
@@ -137,10 +141,10 @@
     --table-row-stripe-bg: rgba(111, 120, 135, 0.0375);
 
     /* Code */
-    --color-code-bg: rgb(26, 30.5, 40.25);
-    --color-code-text: #8891a4;
-    --color-kbd-bg: var(--color-text);
-    --color-kbd-text: var(--color-background);
+    --code-bg: rgb(26, 30.5, 40.25);
+    --code-color: #8891a4;
+    --kbd-bg: var(--color-text);
+    --kbd-color: var(--color-background);
 
     /* Form Elements */
     --form-bg: rgb(28, 33, 43.5);
@@ -179,21 +183,21 @@
     --accordion-open-summary: var(--color-text-muted);
 
     /* Card */
-    --card-bg: #181c25;
-    --card-border: var(--card-bg);
-    --card-shadow: var(--shadow-lg);
-    --card-section-bg: rgb(26, 30.5, 40.25);
+    --pane-bg: #181c25;
+    --pane-border: transparent;
+    --pane-shadow: none;
+    --pane-section-border: var(--pane-bg);
+    --pane-section-bg: rgb(26, 30.5, 40.25);
 
     /* Dropdown */
-    --dropdown-bg: #181c25;
-    --dropdown-border: #202632;
-    --dropdown-shadow: var(--shadow-lg);
-    --dropdown-text: var(--color-text);
-    --dropdown-hover-bg: #202632;
+    --menu-bg: #181c25;
+    --menu-border: #202632;
+    --menu-shadow: var(--shadow-lg);
+    --menu-text: var(--color-text);
+    --menu-hover-bg: #202632;
 
     /* Loading & Modal */
     --loading-spinner-opacity: 0.5;
-    --modal-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
 
     /* Progress */
     --progress-bg: #202632;
@@ -202,6 +206,10 @@
     /* Tooltip */
     --tooltip-bg: var(--color-contrast-bg);
     --tooltip-text: var(--color-contrast-inverse);
+
+    /* Backdrop Overlay */
+    --backdrop-overlay-filter: blur(0.375rem);
+    --backdrop-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
   }
 
   :root:not([data-theme]) input:is(
@@ -238,10 +246,10 @@
   --table-row-stripe-bg: rgba(111, 120, 135, 0.0375);
 
   /* Code */
-  --color-code-bg: rgb(26, 30.5, 40.25);
-  --color-code-text: #8891a4;
-  --color-kbd-bg: var(--color-text);
-  --color-kbd-text: var(--color-background);
+  --code-bg: rgb(26, 30.5, 40.25);
+  --code-color: #8891a4;
+  --kbd-bg: var(--color-text);
+  --kbd-color: var(--color-background);
 
   /* Form Elements */
   --form-bg: rgb(28, 33, 43.5);
@@ -280,21 +288,21 @@
   --accordion-open-summary: var(--color-text-muted);
 
   /* Card */
-  --card-bg: #181c25;
-  --card-border: var(--card-bg);
-  --card-shadow: var(--shadow-lg);
-  --card-section-bg: rgb(26, 30.5, 40.25);
+  --pane-bg: #181c25;
+  --pane-border: transparent;
+  --pane-shadow: none;
+  --pane-section-border: var(--pane-bg);
+  --pane-section-bg: rgb(26, 30.5, 40.25);
 
   /* Dropdown */
-  --dropdown-bg: #181c25;
-  --dropdown-border: #202632;
-  --dropdown-shadow: var(--shadow-lg);
-  --dropdown-text: var(--color-text);
-  --dropdown-hover-bg: #202632;
+  --menu-bg: #181c25;
+  --menu-border: #202632;
+  --menu-shadow: var(--shadow-lg);
+  --menu-text: var(--color-text);
+  --menu-hover-bg: #202632;
 
-  /* Loading & Modal */
+  /* Loading */
   --loading-spinner-opacity: 0.5;
-  --modal-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
 
   /* Progress */
   --progress-bg: #202632;
@@ -303,6 +311,10 @@
   /* Tooltip */
   --tooltip-bg: var(--color-contrast-bg);
   --tooltip-text: var(--color-contrast-inverse);
+
+  /* Backdrop Overlay */
+  --backdrop-overlay-filter: blur(0.375rem);
+  --backdrop-overlay-bg: rgba(7.5, 8.5, 10, 0.75);
 }
 
 /* Form focus override for actionable input types in explicit dark mode */

package/src/variables/_elements.css

@@ -15,11 +15,6 @@ a {
   --text-decoration: underline;
 }
 
-a.secondary,
-a.contrast {
-  --text-decoration: underline;
-}
-
 /* Small text */
 small {
   --font-size: 0.875em;

package/src/variables/_icons.css

@@ -10,6 +10,18 @@
    are defined in _layout.css as they use consistent colors across themes.
    ========================================================================== */
 
+:root,
+:host {
+  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
+  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
+  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E");
+  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
+  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
+  --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E");
+}
+
 /* ==========================================================================
    Light Theme Validation Icons
    ========================================================================== */