gbs-add-block 2.1.0 → 2.3.0

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

@@ -1,174 +1,173 @@
-/*
- * 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;
-    }
-  }
-}
+/*
+ * 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 are unlayered: they beat a framework reset on
+ * specificity, and lose to anything you pass through `className`. With
+ * Tailwind v4, import this file after the framework and inside its components
+ * layer - see the README.
+ */
+
+.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;
+  }
+}