@byline/ui 0.9.3 → 0.10.1

package/src/styles/components/loaders.css

@@ -0,0 +1,198 @@
+/* No longer used in our actual loaders for React and Astro components
+but left here as a reference. */
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+}
+
+.lds-ellipsis div {
+  position: absolute;
+  top: 41.25%;
+  width: 16.25%;
+  height: 32.25%;
+  border-radius: 50%;
+  background: #fff;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+
+.lds-ellipsis div:nth-child(1) {
+  left: 10%;
+  animation: lds-ellipsis1 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(2) {
+  left: 10%;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(3) {
+  left: 40%;
+  animation: lds-ellipsis2 0.6s infinite;
+}
+
+.lds-ellipsis div:nth-child(4) {
+  left: 70%;
+  animation: lds-ellipsis3 0.6s infinite;
+}
+
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0);
+  }
+}
+
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+
+  100% {
+    transform: translate(184.61%, 0);
+  }
+}
+
+.lds-ring {
+  display: inline-block;
+  position: relative;
+}
+
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  border: 8px solid #fff;
+  border-radius: 50%;
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: #fff transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lds-spinner {
+  color: official;
+  display: inline-block;
+  position: relative;
+  width: 56px;
+  height: 56px;
+}
+
+.lds-spinner div {
+  transform-origin: 28px 32px;
+  animation: lds-spinner 1.2s linear infinite;
+}
+
+.lds-spinner div .div-after {
+  content: " ";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 25px;
+  width: 5px;
+  height: 14px;
+  border-radius: 20%;
+  background: #fff;
+}
+
+.lds-spinner div:nth-child(1) {
+  transform: rotate(0deg);
+  animation-delay: -1.1s;
+}
+
+.lds-spinner div:nth-child(2) {
+  transform: rotate(30deg);
+  animation-delay: -1s;
+}
+
+.lds-spinner div:nth-child(3) {
+  transform: rotate(60deg);
+  animation-delay: -0.9s;
+}
+
+.lds-spinner div:nth-child(4) {
+  transform: rotate(90deg);
+  animation-delay: -0.8s;
+}
+
+.lds-spinner div:nth-child(5) {
+  transform: rotate(120deg);
+  animation-delay: -0.7s;
+}
+
+.lds-spinner div:nth-child(6) {
+  transform: rotate(150deg);
+  animation-delay: -0.6s;
+}
+
+.lds-spinner div:nth-child(7) {
+  transform: rotate(180deg);
+  animation-delay: -0.5s;
+}
+
+.lds-spinner div:nth-child(8) {
+  transform: rotate(210deg);
+  animation-delay: -0.4s;
+}
+
+.lds-spinner div:nth-child(9) {
+  transform: rotate(240deg);
+  animation-delay: -0.3s;
+}
+
+.lds-spinner div:nth-child(10) {
+  transform: rotate(270deg);
+  animation-delay: -0.2s;
+}
+
+.lds-spinner div:nth-child(11) {
+  transform: rotate(300deg);
+  animation-delay: -0.1s;
+}
+
+.lds-spinner div:nth-child(12) {
+  transform: rotate(330deg);
+  animation-delay: 0s;
+}
+
+@keyframes lds-spinner {
+  0% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

package/src/styles/functional/README.md

@@ -0,0 +1,67 @@
+# Functional Token Layer
+
+This directory holds the **semantic source of truth** for the uikit. Every token here is defined in three scopes: `:root` (light), `.dark` / `[data-theme="dark"]` (dark), and `.not-dark` (a local override that forces light-mode tokens regardless of an ancestor `.dark` class).
+
+Components must read from these tokens. They must not read base palette primitives directly unless there is no semantic equivalent.
+
+## Files
+
+- `colors.css` — intent token families (fill, text-on, text, stroke, ring, gradient × primary, secondary, noeffect, success, info, warning, danger), plus the generic `--focus-ring` role token.
+- `surfaces.css` — `--background`, `--foreground`, `--surface-panel*`, `--surface-item*`, `--surface-subtle*`, scrollbar tokens.
+- `typography.css` — `--text`, `--headings`, `--muted`, `--text-subtle`, `--text-placeholder`.
+- `borders.css` — `--border-color`, field-state tokens (`--field-border`, `--field-border-hover`, `--field-border-invalid`, `--field-ring`, `--field-ring-invalid`).
+- `grid-flex.css` — layout tokens.
+- `shadcn-compat.css` — optional `--shadcn-*` alias namespace covering core surface/content roles, the radius scale (`--shadcn-radius{,-sm,-md,-lg,-xl}`), the five-slot chart palette (`--shadcn-chart-1`…`-5`), and the sidebar primitive (`--shadcn-sidebar*`). Mode switching is handled by the underlying functional tokens, so the aliases are defined once in `:root` only. Strictly for ShadCN-style Tailwind utilities in consumer apps; **do not use inside uikit components**.
+
+## Intent Token Taxonomy
+
+`--{element}-{intent}[-{emphasis}][-{state}]`
+
+| Part | Values |
+| --- | --- |
+| element | `fill`, `text-on`, `text`, `stroke`, `ring`, `gradient` |
+| intent | `primary`, `secondary`, `noeffect`, `success`, `info`, `warning`, `danger` |
+| emphasis | `strong`, `weak`, `outlined`, `text` (present on `fill` and `text-on` tokens) |
+| state | `hover`, `disabled` (present where a state-specific value is needed) |
+
+There is **no `accent` intent family**. `--accent` is a raw brand palette token; prefer `--fill-primary-*` for emphasis surfaces or `--surface-subtle-*` for interactive neutral surfaces.
+
+### Standard variants per intent
+
+Every intent family provides these:
+
+- `--fill-{intent}-strong`, `-strong-hover`, `-strong-disabled`
+- `--fill-{intent}-weak`, `-weak-hover`, `-weak-disabled`
+- `--fill-{intent}-outlined`, `-outlined-hover`, `-outlined-disabled`
+- `--fill-{intent}-text`, `-text-hover`, `-text-disabled`
+- `--text-on-{intent}-strong`, `-strong-hover`, `-strong-disabled`
+- `--text-on-{intent}-weak`, `-weak-hover`, `-weak-disabled`
+- `--text-on-{intent}-outlined`, `-outlined-hover`, `-outlined-disabled`
+- `--text-{intent}`, `-weak`, `-hover`, `-disabled`
+- `--stroke-{intent}`, `-hover`, `-disabled`
+- `--ring-{intent}`
+- `--gradient-{intent}-start`, `-end`, `-foreground`, `-disabled`
+
+Noeffect additionally provides `--text-on-noeffect-text*` and `--gradient-noeffect-hover`.
+
+## Generic Role Tokens
+
+Use these when a component needs a role without adopting an intent:
+
+| Token | Purpose |
+| --- | --- |
+| `--focus-ring` | Neutral focus ring when the component is not tied to an intent |
+| `--field-border` | Default border on form fields |
+| `--field-border-hover` | Hover border on form fields |
+| `--field-border-invalid` | Invalid-state border on form fields |
+| `--field-ring` | Default focus ring on form fields |
+| `--field-ring-invalid` | Invalid-state focus ring on form fields |
+| `--surface-subtle` | Subdued neutral surface |
+| `--surface-subtle-hover` | Subdued neutral surface on hover / for interactive neutral highlight |
+| `--surface-subtle-active` | Subdued neutral surface when pressed / active |
+| `--text-subtle` | Subdued foreground text |
+| `--text-placeholder` | Placeholder-style foreground text |
+
+## Parity Contract
+
+Every token defined in `:root` must also be defined in `.dark` and `.not-dark`, or it will silently fall back to the property's initial value in one of the modes. A Python parity check is in the repo history at `packages/uikit/src/styles/functional/colors.css` — if you add a new token, audit all three scopes before merging.

package/src/styles/functional/borders.css

@@ -0,0 +1,42 @@
+/**
+ * BORDER FUNCTIONAL TOKENS
+ *
+ * Semantic tokens for borders, including colors and potentially
+ * widths, styles, and radii in the future.
+ */
+
+@layer byline-functional {
+  :root {
+    --border-color: var(--gray-100);
+
+    /* Generic field-state tokens (used by Input, Autocomplete, Select, etc.) */
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+
+  /* Dark mode */
+  .dark,
+  [data-theme="dark"] {
+    --border-color: var(--canvas-600);
+
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+
+  /* Force light mode (local override) */
+  .not-dark {
+    --border-color: var(--gray-100);
+
+    --field-border: var(--border-color);
+    --field-border-hover: var(--stroke-noeffect-hover);
+    --field-border-invalid: var(--stroke-danger);
+    --field-ring: var(--ring-primary);
+    --field-ring-invalid: var(--ring-danger);
+  }
+}