nk_jtb 0.27.3 → 0.28.0

package/docs/components/loaders-and-spinners.md

@@ -4,9 +4,9 @@ Page loaders and spinners to communicate in-progress and waiting states.
 
 ## Spinners
 
-### SVG Arc
+### SVG Border
 
-Apply `animate-spin` to an SVG with a dashed stroke to create a spinner.
+A static arc on a faint circular track. Apply `animate-spin` to the SVG.
 
 Use `wh-*` utilities to control size.
 
@@ -28,21 +28,82 @@ Use `wh-*` utilities to control size.
 Use `txt-*` utilities to control colour.
 
 ```html +demo-folded class="bx example-utils" preview-class="flex-centered gap"
-<svg class="animate-spin wh-2 txt-blue" viewBox="0 0 36 36">
+<svg class="animate-spin wh-3 txt-blue" viewBox="0 0 36 36">
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-opacity="0.25" />
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="butt" stroke-dasharray="22 66" />
 </svg>
-<svg class="animate-spin wh-2 txt-blue-900" viewBox="0 0 36 36">
+<svg class="animate-spin wh-3 txt-blue-900" viewBox="0 0 36 36">
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-opacity="0.25" />
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="butt" stroke-dasharray="22 66" />
 </svg>
-<svg class="animate-spin wh-2 txt-orange-400" viewBox="0 0 36 36">
+<svg class="animate-spin wh-3 txt-orange-400" viewBox="0 0 36 36">
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-opacity="0.25" />
     <circle cx="18" cy="18" r="14" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="butt" stroke-dasharray="22 66" />
 </svg>
 ```
 
-## Loader Container (review)
+### SVG Arc
+
+Apply `animate-dash` to an SVG element. A single class handles both rotation and
+stroke morphing. Use `wh-*` to control size and `txt-*` to control colour.
+
+```html +demo-folded class="bx example-utils" preview-class="flex-centered vac gap-2"
+<svg class="animate-dash wh-2 txt-primary" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+<svg class="animate-dash wh-3 txt-primary" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+<svg class="animate-dash wh-4 txt-primary" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+```
+
+Use `txt-*` utilities to control colour.
+
+```html +demo-folded class="bx example-utils" preview-class="flex-centered gap"
+<svg class="animate-dash wh-3 txt-blue" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+<svg class="animate-dash wh-3 txt-blue-900" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+<svg class="animate-dash wh-3 txt-orange-400" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+```
+
+### Dots (review)
 
-`.loader-container` centers a spinner and loading text as a column. For a
-composed example see [UI Examples](/docs/jtb/examples/showcase-ui).
+Eight dots arranged in a circle, fading in sequence. Use `wh-*` to control size
+and `txt-*` to control colour.
+
+```html +demo-folded class="bx example-jtb" preview-class="flex-centered vac gap-2"
+<div class="spinner-dots wh-2 txt-primary">
+    <div></div><div></div><div></div><div></div>
+    <div></div><div></div><div></div><div></div>
+</div>
+<div class="spinner-dots wh-3 txt-primary">
+    <div></div><div></div><div></div><div></div>
+    <div></div><div></div><div></div><div></div>
+</div>
+<div class="spinner-dots wh-4 txt-primary">
+    <div></div><div></div><div></div><div></div>
+    <div></div><div></div><div></div><div></div>
+</div>
+```
+
+## Page Loader
+
+Compose a page loader with utilities. Use `flex flex-col flex-centered` to
+centre the spinner and text as a column. Add `animate-dots` for an animated
+ellipsis alongside the loading label.
+
+```html +demo-folded class="bx example-utils" preview-class="flex-centered"
+<div class="flex flex-col flex-centered gap-1">
+    <svg class="animate-dash wh-4 txt-primary" viewBox="0 0 44 44">
+        <circle cx="22" cy="22" r="16" stroke="currentColor" />
+    </svg>
+    <span>Loading<span class="animate-dots"></span></span>
+</div>
+```

package/docs/jtb-status.md

@@ -52,7 +52,7 @@ a doc is confirmed accurate or a utility is completed.
 
 | Utility     | Framework | Docs   | Notes                 |
 | ----------- | --------- | ------ | --------------------- |
-| `animation` | review    | Review | `animate-*` utilities |
+| `animation` | ✅         | ✅      | `animate-*` utilities |
 
 ### Backgrounds (review)
 
@@ -295,7 +295,7 @@ Files parked in `docs/review/` — purpose or audience unclear.
 | `components/menu.md`                | review  |                                                  |
 | `components/navbar.md`              | review  |                                                  |
 | `components/table.md`               | review  |                                                  |
-| `components/loaders-and-spinners.md` | partial | Spinners section confirmed (SVG Arc utility approach). Loader Container still pending. |
+| `components/loaders-and-spinners.md` | partial | SVG Border, SVG Arc, Page Loader confirmed. Dots section still under review. |
 | `components/example-navigations.md` | stub    | Bare HTML, no explanation                        |
 
 ### Utilities
@@ -304,7 +304,7 @@ Files parked in `docs/review/` — purpose or audience unclear.
 | ------------------------------------- | ------ | --------------------------------------------------- |
 | `utilities/border.md`                 | review | Border, outline, and divider utilities              |
 | `utilities/typography.md`             | review | New — needs review pass                             |
-| `utilities/animation.md`              | review | Rewritten — loader/spinner content moved to components/loaders-and-spinners.md |
+| `utilities/animation.md`              | ✅      |                                                                                 |
 | `utilities/display-and-visibility.md` | review |                                                     |
 | `utilities/effects.md`                | review |                                                     |
 | `utilities/position.md`               | review |                                                     |

package/docs/utilities/animation.md

@@ -2,26 +2,28 @@
 
 Utility classes for applying CSS animations.
 
-| Class                 | Animation           |
-| --------------------- | ------------------- |
-| `animate-spin`        | Continuous rotation |
-| `animate-bounce`      | Vertical bounce     |
-| `animate-pulse`       | Opacity fade        |
-| `animate-pulse-ring`  | Expanding ring      |
-| `animate-ping`        | Scale and fade out  |
-| `animate-checkmark`   | SVG stroke draw-in  |
-| `animate-circle`      | SVG stroke draw-in  |
-| `animate-none`        | Removes animation   |
-
-## Spin (review)
-
-Rotates an element continuously. Commonly used for loading indicators.
-
-```html +demo-folded class="bx"
-<div class="animate-spin wh-3 bdr-4 bdr-gray-200 bdr-t-blue-500 rounded-full"></div>
+| Class                | Animation               |
+| -------------------- | ----------------------- |
+| `animate-spin`       | Continuous rotation     |
+| `animate-bounce`     | Vertical bounce         |
+| `animate-pulse`      | Opacity fade            |
+| `animate-pulse-ring` | Expanding ring          |
+| `animate-ping`       | Scale and fade out      |
+| `animate-dash`       | SVG stroke arc morphing |
+| `animate-dots`       | Animated ellipsis       |
+| `animate-checkmark`  | SVG stroke draw-in      |
+| `animate-circle`     | SVG stroke draw-in      |
+| `animate-none`       | Removes animation       |
+
+## Spin
+
+Rotates an element continuously.
+
+```html +demo-folded class="bx" preview-class="flex-centered"
+<div class="animate-spin wh-3 bdr-4 bdr-blue-500 rounded-full"></div>
 ```
 
-## Bounce (review)
+## Bounce
 
 Applies a vertical bounce. Stagger `animation-delay` across sibling elements for
 a sequential effect.
@@ -32,16 +34,15 @@ a sequential effect.
 <div class="wh-1 bg-blue-600 rounded-full animate-bounce" style="animation-delay: 0.2s;"></div>
 ```
 
-## Pulse (review)
+## Pulse
 
-Fades an element's opacity in and out. Use for skeleton loaders or ambient
-status indicators.
+Fades an element's opacity in and out.
 
 ```html +demo-folded class="bx"
 <div class="wh-4 bg-teal-500 rounded-full animate-pulse"></div>
 ```
 
-## Pulse Ring (review)
+## Pulse Ring
 
 Scales and fades an element outward to create an expanding ring effect. Use
 `relative` positioning with overlapping siblings for layered rings.
@@ -54,7 +55,7 @@ Scales and fades an element outward to create an expanding ring effect. Use
 </div>
 ```
 
-## Ping (review)
+## Ping
 
 Scales an element to twice its size while fading it out — a one-shot burst
 effect. Commonly used as a notification indicator layered over a badge or dot.
@@ -66,14 +67,35 @@ effect. Commonly used as a notification indicator layered over a badge or dot.
 </div>
 ```
 
-## SVG Animations (review)
+## Dots
+
+Animates a `::after` pseudo-element to cycle through an ellipsis sequence.
+
+```html +demo-folded class="bx" preview-class="flex-centered"
+<span>Loading<span class="animate-dots"></span></span>
+```
+
+## SVG Animations
+
+### Dash
+
+Rotates an SVG while morphing its child circle's `stroke-dasharray`. A single
+class handles both the rotation and the stroke animation.
+
+```html +demo-folded class="bx" preview-class="flex-centered"
+<svg class="animate-dash wh-4 txt-blue-500" viewBox="0 0 44 44">
+    <circle cx="22" cy="22" r="16" stroke="currentColor" />
+</svg>
+```
+
+### Draw-in
 
 `animate-circle` draws a circular stroke in from nothing to full.
-`animate-checkmark` does the same for a path. Both classes set `stroke-dasharray`
+`animate-checkmark` does the same for a path. Both set `stroke-dasharray`
 and animate `stroke-dashoffset`. The SVG path or circle length must be no greater
 than the class's `stroke-dasharray` value (166 for circle, 100 for checkmark).
 
-```html +demo-folded class="bx"
+```html +demo-folded class="bx" preview-class="flex-centered"
 <svg viewBox="0 0 52 52" class="wh-4 txt-green-600" fill="none">
     <circle cx="26" cy="26" r="25" stroke="currentColor" stroke-width="2" class="animate-circle" />
     <path d="M14 27l8 8 16-16" stroke="currentColor" stroke-width="2" class="animate-checkmark" />

package/index.html

@@ -10,6 +10,18 @@
 
 <body>
 
+ 
+
+    <div class="mb-2.5">
+        <h2>Page loader</h2>
+        <div class="bx flex-col flex-centered gap-1">
+            <svg class="animate-dash wh-3 txt-blue-500" viewBox="0 0 44 44">
+                <circle cx="22" cy="22" r="16" stroke="currentColor" />
+            </svg>
+            <p class="txt-sm txt-muted">Loading your workspace…</p>
+        </div>
+    </div>
+
     <style>
         /* ============================================================
        Local helpers — JTB gaps documented in jtb-conversion-notes.md
@@ -171,52 +183,6 @@
     </style>
 
     <div class="py-1.5 container-md">
-     <style>
-
-/*SVG arc — @keyframes dash not in JTB animation utilities*/
-@keyframes dash {
-    0% {
-        stroke-dasharray: 1, 150;
-        stroke-dashoffset: 0;
-    }
-
-    50% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -35;
-    }
-
-    100% {
-        stroke-dasharray: 90, 150;
-        stroke-dashoffset: -124;
-    }
-}
-
-.arc circle {
-    fill: none;
-    stroke-width: 3;
-    stroke-linecap: round;
-    animation: dash 1.4s ease-in-out infinite;
-}
-</style>
-
-<div class="mb-2.5">
-    <h2>SVG arc spinner</h2>
-    <div class="bx flex-vac flex-wrap gap-1.5">
-        <div class="flex-col flex-vac gap-05">
-            <svg class="animate-spin arc wh-2.5 txt-blue-500" viewBox="0 0 36 36">
-                <circle cx="18" cy="18" r="14" stroke="currentColor" />
-            </svg>
-            <span class="txt-xs txt-muted">smooth arc</span>
-        </div>
-        <div class="flex-col flex-vac gap-05">
-            <svg class="animate-spin arc wh-3 txt-emerald-500" viewBox="0 0 48 48">
-                <circle cx="24" cy="24" r="18" stroke="currentColor" />
-            </svg>
-            <span class="txt-xs txt-muted">teal / lg</span>
-        </div>
-    </div>
-</div>
-
         <div class="mb-2.5">
             <h2>Dot indicators</h2>
             <div class="bx flex-vac flex-wrap gap-1.5">
@@ -338,15 +304,7 @@
             </div>
         </div>
 
-        <div class="mb-2.5">
-            <h2>Page loader</h2>
-            <div class="bx flex-col flex-centered gap-1">
-                <svg class="animate-spin arc wh-3 txt-blue-500" viewBox="0 0 44 44">
-                    <circle cx="22" cy="22" r="16" stroke="currentColor" />
-                </svg>
-                <p class="txt-sm txt-muted">Loading your workspace…</p>
-            </div>
-        </div>
+
 
     </div>
 

package/jtb-conversion-notes.md

@@ -1,28 +1,28 @@
-# JTB Conversion Notes
-
-Actionable gaps found during conversion of `loaders_and_spinners.html`.
-
-## Missing Keyframes / Animation Utilities
-
-| Gap                                 | Detail                                                                                                           |
-| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
-| `@keyframes dash`                   | SVG arc morphing — stroke-dasharray animates between values. No JTB equivalent. Candidate for `_animation.scss`. |
-| `@keyframes grow`                   | Vertical scale pulse for bar equalizer. No JTB equivalent.                                                       |
-| `@keyframes skeleton`               | Gradient sweep shimmer. Very commonly needed. Strong candidate for `_animation.scss`.                            |
-| `@keyframes progress-indeterminate` | Horizontal bar sweep for indeterminate progress. No JTB equivalent.                                              |
-| `@keyframes ripple`                 | Scale from 0 → 2.5 with fade. `animate-ping` starts from scale 1 — not a match.                                  |
-
-## Missing Utilities
-
-| Gap                     | Detail                                                                                                                                    |
-| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
-| Positional border-color | `bdr-t-{color}` not generated — `border-color` config has no `positions` key. Needed for spinner accent colour and the spin demo example. |
-| `flex-shrink: 0`        | No `fs-0` or equivalent confirmed. Used on skeleton avatar.                                                                               |
-| Percentage widths       | `55%`, `65%`, `80%` width values not in JTB sizing scale. Needed for skeleton text blocks.                                                |
-
-## Component Gaps
-
-| Gap                    | Detail                                                                                                                                          |
-| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
-| Spinner colour theming | `.spinner` hardcodes `#f3f3f3` and `#3498db` — no CSS custom properties for colour. Accent and button-context spinners require local overrides. |
-| Icon-only button       | `.btn` has no square/icon variant. A `btn-icon` or `btn xs` pattern would cover `width = height, padding: 0`.                                   |
+# JTB Conversion Notes
+
+Actionable gaps found during conversion of `loaders_and_spinners.html`.
+
+## Missing Keyframes / Animation Utilities
+
+| Gap                                 | Detail                                                                                                           |
+| ----------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `@keyframes dash`                   | ✅ Added as `animate-dash` in `_animation.scss`.                                                                  |
+| `@keyframes grow`                   | Vertical scale pulse for bar equalizer. No JTB equivalent.                                                       |
+| `@keyframes skeleton`               | Gradient sweep shimmer. Very commonly needed. Strong candidate for `_animation.scss`.                            |
+| `@keyframes progress-indeterminate` | Horizontal bar sweep for indeterminate progress. No JTB equivalent.                                              |
+| `@keyframes ripple`                 | Scale from 0 → 2.5 with fade. `animate-ping` starts from scale 1 — not a match.                                  |
+
+## Missing Utilities
+
+| Gap                     | Detail                                                                                                                                    |
+| ----------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
+| Positional border-color | `bdr-t-{color}` not generated — `border-color` config has no `positions` key. Needed for spinner accent colour and the spin demo example. |
+| `flex-shrink: 0`        | No `fs-0` or equivalent confirmed. Used on skeleton avatar.                                                                               |
+| Percentage widths       | `55%`, `65%`, `80%` width values not in JTB sizing scale. Needed for skeleton text blocks.                                                |
+
+## Component Gaps
+
+| Gap                    | Detail                                                                                                                                          |
+| ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| Spinner colour theming | ✅ `.spinner` component removed — spinner is now utility-based, colour via `txt-*`.                                                             |
+| Icon-only button       | `.btn` has no square/icon variant. A `btn-icon` or `btn xs` pattern would cover `width = height, padding: 0`.                                   |

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "nk_jtb",
     "description": "Yet another utility based framework.",
-    "version": "0.27.3",
+    "version": "0.28.0",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/naykel76/nk_jtb.git"

package/scripts/jtb-nav.json

@@ -49,7 +49,7 @@
     "Utilities": {
         "links": [
             {
-                "name": "Animation (wip)",
+                "name": "Animation",
                 "route_name": "docs.jtb.utilities.animation"
             },
             {

package/skills-lock.json

@@ -23,7 +23,7 @@
       "source": "naykel76/skills-and-guidelines",
       "sourceType": "github",
       "skillPath": "nk-documentation-best-practices/SKILL.md",
-      "computedHash": "ad8bdd5e8b52cd29d50caf9a1be1615fd107e37b1b00114e4447f3656b22f956"
+      "computedHash": "64d145c8e7e332c70805a8faddf1fc2afe276aa6f3300c6c924c8a9f0fba7d85"
     },
     "skill-creation": {
       "source": "naykel76/skills-and-guidelines",

package/src/base/_root.scss

@@ -2,6 +2,16 @@
 @use '../maps_and_variables/colors' as *;
 @use '../maps_and_variables/components' as *;
 @use '../maps_and_variables/typography' as *;
+@use '../functions/color-functions' as *;
+@use 'sass:map';
+
+@mixin define-runtime-theme-vars($theme-name, $theme-color) {
+    --#{$theme-name}: #{$theme-color};
+    --#{$theme-name}-hover: color-mix(in srgb, var(--#{$theme-name}), white 5%);
+    --#{$theme-name}-active: color-mix(in srgb, var(--#{$theme-name}), black 5%);
+    --#{$theme-name}-border: #{border-contrast($theme-color)};
+    --on-#{$theme-name}: #{text-color($theme-color)};
+}
 
 :root {
     // create css variables including brand colors
@@ -37,10 +47,10 @@
     --bg-toggle-on: var(--primary);
     --bg-toggle-ball: var(--white);
 
-    // -- Brand Colors --
-    --primary: #{$primary};
-    --secondary: #{$secondary};
-    --accent: #{$accent};
+    // -- Runtime Semantic Theme Colors --
+    @each $theme-name in $runtime-theme-colors {
+        @include define-runtime-theme-vars($theme-name, map.get($base-colors, $theme-name));
+    }
 
     // -- Text Colors --
     --text-color: #{$text-color};

package/src/components/_button.scss

@@ -109,3 +109,19 @@
         @include active($color);
     }
 }
+
+@each $theme-name in $runtime-theme-colors {
+    .#{$button-prefix}.#{$theme-name} {
+        &:hover {
+            background-color: var(--#{$theme-name}-hover);
+            border-color: var(--#{$theme-name}-border);
+            color: var(--on-#{$theme-name});
+        }
+
+        &:active {
+            background-color: var(--#{$theme-name}-active);
+            border-color: var(--#{$theme-name}-border);
+            color: var(--on-#{$theme-name});
+        }
+    }
+}

package/src/components/_loaders-and-spinners.scss

@@ -1,24 +1,24 @@
-.loader-container {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    .loading-text {
-        color: #fff;
-        font-size: 18px;
-        font-weight: 500;
-        letter-spacing: 0.5px;
-    }
-
-    .dots {
-        display: inline-block;
-        text-align: left;
-        width: 20px;
-
-        &::after {
-            animation: dots 1.5s steps(4, end) infinite;
-            content: '';
-        }
-    }
-}
+.spinner-dots {
+    position: relative;
+
+    > div {
+        animation: ball-spin 1s ease-in-out infinite;
+        background-color: currentColor;
+        border-radius: 50%;
+        height: 25%;
+        margin-left: -12.5%;
+        margin-top: -12.5%;
+        position: absolute;
+        width: 25%;
+    }
+
+    // prettier-ignore
+    > div:nth-child(1) { top:  5%;    left: 50%;    animation-delay: -1.125s; }
+    > div:nth-child(2) { top: 18.18%; left: 81.82%; animation-delay: -1.25s;  }
+    > div:nth-child(3) { top: 50%;    left: 95%;    animation-delay: -1.375s; }
+    > div:nth-child(4) { top: 81.82%; left: 81.82%; animation-delay: -1.5s;   }
+    > div:nth-child(5) { top: 95%;    left: 50%;    animation-delay: -1.625s; }
+    > div:nth-child(6) { top: 81.82%; left: 18.18%; animation-delay: -1.75s;  }
+    > div:nth-child(7) { top: 50%;    left:  5%;    animation-delay: -1.875s; }
+    > div:nth-child(8) { top: 18.18%; left: 18.18%; animation-delay: -2s;     }
+}

package/src/maps_and_variables/_colors.scss

@@ -51,6 +51,10 @@ $theme-colors: (
     'warning': #ffdd57
 ) !default;
 
+// Semantic theme names that should remain runtime-swappable via CSS custom
+// properties. Hue and scale colors stay compile-time tokens.
+$runtime-theme-colors: ('primary', 'secondary', 'accent') !default;
+
 // based on Tailwind 500 series colors
 $base-colors: (
     'primary': base.$primary,

package/src/utilities/_animation.scss

@@ -73,11 +73,47 @@
     75% { content: '...'; }
 }
 
+@keyframes ball-spin {
+    0%,
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+
+    20% {
+        opacity: 1;
+    }
+
+    80% {
+        opacity: 0;
+        transform: scale(0);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 150;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -35;
+    }
+
+    100% {
+        stroke-dasharray: 90, 150;
+        stroke-dashoffset: -124;
+    }
+}
+
 // ============================================================================
 // -- Animations --
 // ============================================================================
 :root {
     --animate-bounce: bounce 1s infinite;
+    --animate-dash: dash 1.4s ease-in-out infinite;
+    --animate-dots: dots 1.5s steps(4, end) infinite;
     --animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
     --animate-pulse-ring: pulse-ring 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
@@ -108,6 +144,28 @@
     animation: var(--animate-spin);
 }
 
+.animate-dash {
+    animation: var(--animate-spin);
+
+    > circle {
+        animation: var(--animate-dash);
+        fill: none;
+        stroke-linecap: round;
+        stroke-width: 3;
+    }
+}
+
+.animate-dots {
+    display: inline-block;
+    text-align: left;
+    width: 20px;
+
+    &::after {
+        animation: var(--animate-dots);
+        content: '';
+    }
+}
+
 .animate-checkmark {
     animation: checkmark 0.6s ease-in-out forwards;
     stroke-dasharray: 100;

package/src/utilities/_backgrounds.scss

@@ -22,4 +22,18 @@ $background-color-properties: (
     )
 );
 
+$runtime-background-colors: ();
+
+@each $theme-name in $runtime-theme-colors {
+    $runtime-background-colors: map.set($runtime-background-colors, $theme-name, var(--#{$theme-name}));
+}
+
+$runtime-background-color-properties: (
+    background-color: (
+        prefix: 'bg-',
+        values: $runtime-background-colors
+    )
+);
+
 @include build-classes($background-color-properties, $responsive: false, $with-state: true);
+@include build-classes($runtime-background-color-properties, $responsive: false, $with-state: true);

package/src/utilities/_border.scss

@@ -51,6 +51,23 @@ $divider-properties-map: (
     )
 ) !default;
 
+$runtime-border-colors: ();
+
+@each $theme-name in $runtime-theme-colors {
+    $runtime-border-colors: map.set($runtime-border-colors, $theme-name, var(--#{$theme-name}));
+}
+
+$runtime-border-properties-map: (
+    border-color: (
+        prefix: #{$border-prefix},
+        values: $runtime-border-colors
+    ),
+    outline-color: (
+        prefix: 'outline-',
+        values: $runtime-border-colors
+    )
+);
+
 .divide-y-gradient > :not(:last-child) {
     border-block-end-width: 3px;
     border-image-slice: 1;
@@ -68,4 +85,5 @@ $divider-properties-map: (
 // Builds
 // ============================================================================
 @include build-classes($border-properties-map, $responsive: true);
+@include build-classes($runtime-border-properties-map, $responsive: true);
 @include build-composite-classes($divider-properties-map, $responsive: true);

package/src/utilities/_themes.scss

@@ -50,3 +50,22 @@ $themes-map: ();
 @each $color, $value in map.merge($base-colors, $theme-colors) {
     @include build-outline-theme('#{$color}-outline', $value);
 }
+
+@each $theme-name in $runtime-theme-colors {
+    .#{$theme-name} {
+        background-color: var(--#{$theme-name});
+        border: 1px solid var(--#{$theme-name}-border);
+        color: var(--on-#{$theme-name});
+    }
+
+    .#{$theme-name}-outline {
+        background-color: transparent;
+        border: 1px solid var(--#{$theme-name});
+        color: var(--#{$theme-name});
+
+        &:hover:not(:disabled, .disabled) {
+            background-color: var(--#{$theme-name});
+            color: var(--on-#{$theme-name});
+        }
+    }
+}

package/src/utilities/_typography.scss

@@ -124,8 +124,23 @@ $text-classes-map: (
     )
 );
 
+$runtime-text-colors: ();
+
+@each $theme-name in $runtime-theme-colors {
+    $runtime-text-colors: map.set($runtime-text-colors, $theme-name, var(--#{$theme-name}));
+}
+
+$runtime-typography-properties-map: (
+    color: (
+        prefix: '#{$text-prefix}',
+        values: $runtime-text-colors,
+        states: ('hover', 'focus')
+    )
+);
+
 // ============================================================================
 // BUILDS
 // ============================================================================
 @include build-classes($typography-properties-map, $responsive: true);
+@include build-classes($runtime-typography-properties-map, $responsive: true);
 @include build-composite-classes($text-classes-map, $responsive: true);