@keboola/design 13.1.3 → 14.0.0

package/src/styles.css

@@ -284,10 +284,10 @@
      a sticky table header it read as a glowing seam. `--shadow-table` is softer than
      `--shadow-raised` because the header casts a full-width band.
 
-     Reaches rules that read `var(--shadow-table)` / `var(--shadow-card)` directly,
-     which is how kbc-ui's Less consumes them. It does NOT reach the `shadow-table` /
-     `shadow-card` Tailwind utilities: those are `@theme` tokens (theme.css), so v4
-     inlines the light literal into the generated class at build time. Making the
+     Reaches only rules that read `var(--shadow-table)` / `var(--shadow-card)` directly,
+     and no rule in this repo does. It does NOT reach the `shadow-table` / `shadow-card`
+     Tailwind utilities: those are `@theme` tokens (theme.css), so v4 inlines the light
+     literal into the generated class at build time. Making the
      utilities scheme-aware needs the token to carry a `var(--runtime, fallback)`
      shape, which is a separate change with control-ui / boilerplate to verify against. */
   --shadow-card: 0px 1px 4px rgb(0 0 0 / 0.4);
@@ -482,6 +482,185 @@
     quotes: none;
   }
 
+  /**
+   * `Button`'s loading spinner, mounted while `isLoading` and through its exit.
+   *
+   * 1. `inline`: no leading icon — the slot grows from zero width, the spinner pinned to its end.
+   * 2. `leading`: crossfades with the leading icon in its place; nothing moves.
+   * 3. `center`: crossfades with an icon-only button's icon.
+   * - A crossfade's outgoing glyph blurs and fades in half the incoming one's time.
+   */
+  [data-slot='button-spinner'] {
+    --button-spinner-in: calc(var(--motion-duration, 200ms) * 1.5);
+    --button-spinner-out: calc(var(--motion-duration, 200ms) * 0.75);
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: flex-end;
+    width: --spacing(4);
+    transform-origin: right;
+    pointer-events: none;
+    transition-property: opacity, scale, width, margin-inline-end;
+    transition-duration: var(--button-spinner-in);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  [data-slot='button-spinner'][data-state='closed'] {
+    width: 0;
+    margin-inline-end: --spacing(-2);
+    opacity: 0;
+    scale: 0.5;
+    transition-duration:
+      var(--button-spinner-out), var(--button-spinner-out), var(--button-spinner-in),
+      var(--button-spinner-in);
+  }
+
+  /* `left` is set by `Button`, centring the spinner on the icon it overlays. */
+  [data-slot='button-spinner'][data-placement='leading']:has(+ svg) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto 0;
+    justify-content: center;
+    transform-origin: center;
+    transition-property: opacity, scale, filter;
+  }
+
+  [data-slot='button-spinner'][data-placement='center'] {
+    position: absolute;
+    inset: 0;
+    width: fit-content;
+    height: fit-content;
+    margin: auto;
+    justify-content: center;
+    transform-origin: center;
+    transition-property: opacity, scale, filter;
+  }
+
+  [data-slot='button-spinner'][data-placement='leading'] + svg,
+  [data-slot='button-spinner'][data-placement='center'] ~ * {
+    transition-property: opacity, scale, filter;
+    transition-duration: calc(var(--motion-duration, 200ms) * 1.5);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  [data-slot='button-spinner'][data-state='closed']:is(
+      [data-placement='center'],
+      [data-placement='leading']:has(+ svg)
+    ),
+  [data-slot='button-spinner'][data-state='open'][data-placement='leading'] + svg,
+  [data-slot='button-spinner'][data-state='open'][data-placement='center'] ~ * {
+    opacity: 0;
+    scale: 0.5;
+    filter: blur(2px);
+    transition-duration: calc(var(--motion-duration, 200ms) * 0.75);
+  }
+
+  @starting-style {
+    [data-button-ready] > [data-slot='button-spinner'],
+    [data-button-ready] > [data-slot='button-spinner'] + svg {
+      opacity: 0;
+      scale: 0.5;
+      filter: blur(2px);
+    }
+
+    [data-button-ready] > [data-slot='button-spinner'][data-enter='grow'],
+    [data-button-ready] > [data-slot='button-spinner'][data-placement='leading']:not(:has(+ svg)) {
+      width: 0;
+      margin-inline-end: --spacing(-2);
+    }
+  }
+
+  /**
+   * `Button`'s content changes, armed by `data-button-ready` a frame after mount.
+   *
+   * - A new icon fades and scales in; with `data-icon-enter='grow'` it also widens into place.
+   * - A label's text rolls: the new text rises in, the old one rises out over it.
+   */
+  [data-button-ready] > svg {
+    transition-property: opacity, scale, filter, margin-inline-start, margin-inline-end;
+    transition-duration: calc(var(--motion-duration, 200ms) * 1.5);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  [data-button-ready][data-icon-enter='grow'][data-icon-only='false'] > svg:first-child {
+    transform-origin: left;
+  }
+
+  [data-button-ready][data-icon-enter='grow'][data-icon-only='false'] > svg:last-child {
+    transform-origin: right;
+  }
+
+  /* The timing here is read by `ButtonLabel`'s width animation. */
+  [data-slot='button-label'] {
+    position: relative;
+    transition-duration: calc(var(--motion-duration, 200ms) * 1.5);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  [data-slot='button-label-text'] {
+    display: inline-block;
+    transition-property: opacity, translate, filter;
+    transition-duration: calc(var(--motion-duration, 200ms) * 1.5);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  [data-slot='button-label-exit'] {
+    position: absolute;
+    inset-inline-start: 0;
+    top: 0;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    translate: 0 -40%;
+    filter: blur(2px);
+    transition-property: opacity, translate, filter;
+    transition-duration: calc(var(--motion-duration, 200ms) * 0.75);
+    transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
+  }
+
+  @starting-style {
+    [data-button-ready] > svg {
+      opacity: 0;
+      scale: 0.5;
+      filter: blur(2px);
+    }
+
+    [data-button-ready][data-icon-enter='grow'][data-icon-only='false'] > svg:first-child {
+      margin-inline-end: --spacing(-6);
+      scale: 0;
+    }
+
+    [data-button-ready][data-icon-enter='grow'][data-icon-only='false'] > svg:last-child {
+      margin-inline-start: --spacing(-6);
+      scale: 0;
+    }
+
+    [data-button-ready] > [data-slot='button-label'] > [data-slot='button-label-text'] {
+      opacity: 0;
+      translate: 0 40%;
+      filter: blur(2px);
+    }
+
+    [data-button-ready] > [data-slot='button-label'] > [data-slot='button-label-exit'] {
+      opacity: 1;
+      translate: 0 0;
+      filter: none;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    [data-slot='button-spinner'],
+    [data-slot='button-spinner'][data-placement='leading'] + svg,
+    [data-slot='button-spinner'][data-placement='center'] ~ *,
+    [data-button-ready] > svg,
+    [data-slot='button-label-text'],
+    [data-slot='button-label-exit'] {
+      transition: none !important;
+    }
+  }
+
   /* Ensure Google Picker (3rd party modal) always has pointer events enabled */
   /* The Google Picker uses class "picker" for its container div */
   .picker,

package/src/theme.css

@@ -36,15 +36,14 @@
   /* Chrome letter-spacing — `tracking-chrome`. */
   --tracking-chrome: var(--letter-spacing-chrome, 1px);
 
-  /* App-authored elevation + radius. Fixed values (no runtime-override var), so safe as
+  /* App-authored elevation. Fixed values (no runtime-override var), so safe as
    * @theme tokens. Ported because apps author these DIRECTLY — `shadow-card` (12 files),
-   * `shadow-table` + `hover:shadow-table`, `rounded-card` (19 files) — and can't rely on
+   * `shadow-table` + `hover:shadow-table` — and can't rely on
    * design's compiled CSS happening to emit the exact string. v4 gotcha: without
    * `--shadow-card`, `shadow-card` silently resolves against the `--color-card` token and
    * emits a shadow *colour* (no elevation) — registering it makes it a box-shadow utility. */
   --shadow-card: 0px 1px 4px rgba(100, 135, 153, 0.15);
   --shadow-table: 0px 6px 6px -4px rgba(100, 135, 153, 0.13);
-  --radius-card: 10px;
 
   /* Raised-surface elevation — `shadow-raised`. Dark-aware: `styles.css` flips the runtime
    * `--shadow-raised` to a black shadow under `[data-theme='dark']`. Reading a var of the same
@@ -289,7 +288,52 @@
  * Lives here, not in a JS plugin, for the same reason as `not-disabled`: apps compile design's classes. */
 @custom-variant interactive (&:is([data-interactive="true"], a[href]:not([data-interactive="false"])));
 
+/* Surface corners — `rounded-card`, `rounded-popover`, `rounded-modal`, `rounded-sheet`, `rounded-toast`.
+ * - Each reads a runtime override (`theme.radii.<name>` via `ThemeProvider`, or set on `:root`).
+ * - Unset: card 10px (what apps author `rounded-card` against), popover 1rem, modal 1.5rem,
+ *   sheet and toast the control radius `--radius-lg`.
+ * - `inline`, so the fallback resolves where the class is used and a `ThemeScope` subtree can re-point it. */
 @theme inline {
+  --radius-card: var(--radius-card, 10px);
+  --radius-popover: var(--radius-popover, 1rem);
+  --radius-modal: var(--radius-modal, 1.5rem);
+  --radius-sheet: var(--radius-sheet, var(--radius-lg, 0.5rem));
+  --radius-toast: var(--radius-toast, var(--radius-lg, 0.5rem));
+}
+
+/* Disabled controls — `disabled:opacity-disabled`. `--disabled-opacity` is the runtime override
+ * (`theme.opacity.disabled`); unset, 0.5. */
+@utility opacity-disabled {
+  opacity: var(--disabled-opacity, 0.5);
+}
+
+@theme inline {
+  /* Interaction states — `bg-hover`, `bg-pressed`, `bg-selected`, `bg-scrim`.
+   * - Each reads a full CSS colour (`--hover`, …), so a brand can set a translucent wash.
+   * - Unset, `hover` and `selected` are `accent` and `scrim` is black at 50%.
+   * - `pressed` is `accent` a step towards its foreground; no component reads it yet.
+   * - The fallbacks resolve where the class is used, so a `ThemeScope` re-pointing `--accent` reaches them. */
+  --color-hover: var(--hover, rgb(var(--accent)));
+  --color-hover-foreground: var(--hover-foreground, rgb(var(--accent-foreground)));
+  --color-pressed: var(
+    --pressed,
+    color-mix(in oklab, rgb(var(--accent)), rgb(var(--accent-foreground)) 12%)
+  );
+  --color-selected: var(--selected, rgb(var(--accent)));
+  --color-selected-foreground: var(--selected-foreground, rgb(var(--accent-foreground)));
+  --color-scrim: var(--scrim, rgb(0 0 0 / 0.5));
+  /* The sidebar's own pair — the rail is often a different surface from the page. Unset, `sidebar-accent`. */
+  --color-sidebar-hover: var(--sidebar-hover, rgb(var(--sidebar-accent)));
+  --color-sidebar-hover-foreground: var(
+    --sidebar-hover-foreground,
+    rgb(var(--sidebar-accent-foreground))
+  );
+  --color-sidebar-selected: var(--sidebar-selected, rgb(var(--sidebar-accent)));
+  --color-sidebar-selected-foreground: var(
+    --sidebar-selected-foreground,
+    rgb(var(--sidebar-accent-foreground))
+  );
+
   --color-inherit: inherit;
   --color-transparent: rgba(255, 255, 255, 0);
   --color-white: #fff;