gbs-add-block 2.0.3 → 2.1.0

package/source/beta-components/spinner/styles.css

@@ -1,174 +1,174 @@
-/*
- * Spinner styles.
- *
- * The indicator draws in `currentColor`, so it takes the color of its
- * surroundings. Tokens read the shared --gbs-* variables when they are set on an
- * ancestor. Rules live in the `components` layer, so utility classes passed
- * through `className` / `classNames` override them.
- */
-@layer theme, base, components, utilities;
-
-@layer components {
-  .sp-root,
-  .sp-container {
-    --sp-size: 24px;
-    --sp-color: currentColor;
-    --sp-track: color-mix(in oklab, currentColor 18%, transparent);
-    --sp-duration: 0.8s;
-    --sp-overlay-bg: color-mix(in oklab, var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e))) 72%, transparent);
-    --sp-overlay-color: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
-    --sp-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
-
-    color-scheme: inherit;
-  }
-
-  :where(.dark, [data-theme="dark"]) .sp-root {
-    color-scheme: dark;
-  }
-  :where(.light, [data-theme="light"]) .sp-root {
-    color-scheme: light;
-  }
-
-  :where(.sp-root, .sp-container) *,
-  :where(.sp-root, .sp-container) *::before,
-  :where(.sp-root, .sp-container) *::after {
-    box-sizing: border-box;
-  }
-
-  .sp-root {
-    display: inline-flex;
-    align-items: center;
-    vertical-align: middle;
-    color: var(--sp-color);
-    font-size: var(--sp-font-size);
-  }
-
-  .sp-status {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-  .sp-label {
-    line-height: 1.4;
-  }
-
-  .sp-indicator {
-    display: inline-grid;
-    flex: none;
-    place-items: center;
-    width: var(--sp-size);
-    height: var(--sp-size);
-  }
-
-  /* ---------------------------------------------------------------- ring */
-
-  .sp-ring {
-    width: 100%;
-    height: 100%;
-    animation: sp-rotate var(--sp-duration) linear infinite;
-  }
-  .sp-track,
-  .sp-arc {
-    fill: none;
-    stroke-width: 2.5;
-  }
-  .sp-track {
-    stroke: var(--sp-track);
-  }
-  .sp-arc {
-    stroke: currentColor;
-    stroke-linecap: round;
-    stroke-dasharray: 28 100;
-  }
-  @keyframes sp-rotate {
-    to {
-      transform: rotate(360deg);
-    }
-  }
-
-  /* ---------------------------------------------------------------- dots */
-
-  .sp-indicator[data-variant="dots"] {
-    grid-auto-flow: column;
-    gap: calc(var(--sp-size) * 0.1);
-  }
-  .sp-dot {
-    width: calc(var(--sp-size) * 0.22);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background: currentColor;
-    animation: sp-pulse calc(var(--sp-duration) * 1.4) ease-in-out infinite;
-  }
-  .sp-dot:nth-child(2) {
-    animation-delay: calc(var(--sp-duration) * 0.18);
-  }
-  .sp-dot:nth-child(3) {
-    animation-delay: calc(var(--sp-duration) * 0.36);
-  }
-  @keyframes sp-pulse {
-    0%,
-    80%,
-    100% {
-      opacity: 0.25;
-      scale: 0.7;
-    }
-    40% {
-      opacity: 1;
-      scale: 1;
-    }
-  }
-
-  /* ----------------------------------------------------------- container */
-
-  .sp-container {
-    position: relative;
-  }
-  .sp-overlay {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    display: grid;
-    place-items: center;
-    border-radius: inherit;
-    background: var(--sp-overlay-bg);
-    color: var(--sp-overlay-color);
-    font-size: var(--sp-font-size);
-    animation: sp-fade 150ms ease both;
-  }
-  @keyframes sp-fade {
-    from {
-      opacity: 0;
-    }
-  }
-
-  .sp-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    margin: -1px;
-    padding: 0;
-    overflow: hidden;
-    clip-path: inset(50%);
-    white-space: nowrap;
-    border: 0;
-  }
-
-  /* Slower, not stopped: a frozen spinner reads as a hang. */
-  @media (prefers-reduced-motion: reduce) {
-    .sp-root,
-    .sp-container {
-      --sp-duration: 2.4s;
-    }
-    .sp-overlay {
-      animation: none;
-    }
-  }
-
-  @media (forced-colors: active) {
-    .sp-arc,
-    .sp-dot {
-      stroke: CanvasText;
-      background: CanvasText;
-    }
-  }
-}
+/*
+ * Spinner styles.
+ *
+ * The indicator draws in `currentColor`, so it takes the color of its
+ * surroundings. Tokens read the shared --gbs-* variables when they are set on
+ * an ancestor. Rules live in the `gbs` layer. Declare where that sits in your
+ * global CSS — e.g. `@layer reset, gbs, app, utilities;` — and anything in a
+ * later layer, Tailwind utilities included, overrides them.
+ */
+
+@layer gbs {
+  .sp-root,
+  .sp-container {
+    --sp-size: 24px;
+    --sp-color: currentColor;
+    --sp-track: color-mix(in oklab, currentColor 18%, transparent);
+    --sp-duration: 0.8s;
+    --sp-overlay-bg: color-mix(in oklab, var(--gbs-bg, var(--dg-bg, light-dark(#ffffff, #0b0b0e))) 72%, transparent);
+    --sp-overlay-color: var(--gbs-accent, var(--dg-accent, light-dark(#2563eb, #60a5fa)));
+    --sp-font-size: var(--gbs-font-size, var(--dg-font-size, 13px));
+
+    color-scheme: inherit;
+  }
+
+  :where(.dark, [data-theme="dark"]) .sp-root {
+    color-scheme: dark;
+  }
+  :where(.light, [data-theme="light"]) .sp-root {
+    color-scheme: light;
+  }
+
+  :where(.sp-root, .sp-container) *,
+  :where(.sp-root, .sp-container) *::before,
+  :where(.sp-root, .sp-container) *::after {
+    box-sizing: border-box;
+  }
+
+  .sp-root {
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    color: var(--sp-color);
+    font-size: var(--sp-font-size);
+  }
+
+  .sp-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .sp-label {
+    line-height: 1.4;
+  }
+
+  .sp-indicator {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    width: var(--sp-size);
+    height: var(--sp-size);
+  }
+
+  /* ---------------------------------------------------------------- ring */
+
+  .sp-ring {
+    width: 100%;
+    height: 100%;
+    animation: sp-rotate var(--sp-duration) linear infinite;
+  }
+  .sp-track,
+  .sp-arc {
+    fill: none;
+    stroke-width: 2.5;
+  }
+  .sp-track {
+    stroke: var(--sp-track);
+  }
+  .sp-arc {
+    stroke: currentColor;
+    stroke-linecap: round;
+    stroke-dasharray: 28 100;
+  }
+  @keyframes sp-rotate {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  /* ---------------------------------------------------------------- dots */
+
+  .sp-indicator[data-variant="dots"] {
+    grid-auto-flow: column;
+    gap: calc(var(--sp-size) * 0.1);
+  }
+  .sp-dot {
+    width: calc(var(--sp-size) * 0.22);
+    aspect-ratio: 1;
+    border-radius: 50%;
+    background: currentColor;
+    animation: sp-pulse calc(var(--sp-duration) * 1.4) ease-in-out infinite;
+  }
+  .sp-dot:nth-child(2) {
+    animation-delay: calc(var(--sp-duration) * 0.18);
+  }
+  .sp-dot:nth-child(3) {
+    animation-delay: calc(var(--sp-duration) * 0.36);
+  }
+  @keyframes sp-pulse {
+    0%,
+    80%,
+    100% {
+      opacity: 0.25;
+      scale: 0.7;
+    }
+    40% {
+      opacity: 1;
+      scale: 1;
+    }
+  }
+
+  /* ----------------------------------------------------------- container */
+
+  .sp-container {
+    position: relative;
+  }
+  .sp-overlay {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    display: grid;
+    place-items: center;
+    border-radius: inherit;
+    background: var(--sp-overlay-bg);
+    color: var(--sp-overlay-color);
+    font-size: var(--sp-font-size);
+    animation: sp-fade 150ms ease both;
+  }
+  @keyframes sp-fade {
+    from {
+      opacity: 0;
+    }
+  }
+
+  .sp-sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /* Slower, not stopped: a frozen spinner reads as a hang. */
+  @media (prefers-reduced-motion: reduce) {
+    .sp-root,
+    .sp-container {
+      --sp-duration: 2.4s;
+    }
+    .sp-overlay {
+      animation: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sp-arc,
+    .sp-dot {
+      stroke: CanvasText;
+      background: CanvasText;
+    }
+  }
+}