@zambon-dev/ui 0.0.1-bootstrap.0 → 1.1.0

package/styles/components/row.scss

@@ -1,48 +1,48 @@
-.row {
-  @apply grid gap-3;
-
-  &.cols-1 {
-    @apply grid-cols-1;
-  }
-  &.cols-2 {
-    @apply grid-cols-2;
-  }
-  &.cols-3 {
-    @apply grid-cols-3;
-  }
-  &.cols-4 {
-    @apply grid-cols-4;
-  }
-  &.cols-5 {
-    @apply grid-cols-5;
-  }
-  &.cols-6 {
-    @apply grid-cols-6;
-  }
-  &.cols-7 {
-    @apply grid-cols-7;
-  }
-  &.cols-8 {
-    @apply grid-cols-8;
-  }
-  &.cols-9 {
-    @apply grid-cols-9;
-  }
-  &.cols-10 {
-    @apply grid-cols-10;
-  }
-  &.cols-11 {
-    @apply grid-cols-11;
-  }
-  &.cols-12 {
-    @apply grid-cols-12;
-  }
-
-  .input-group ~ .input-group {
-    @apply mt-0;
-  }
-
-  ~ .row {
-    @apply mt-3;
-  }
-}
+.row {
+  @apply grid gap-3;
+
+  &.cols-1 {
+    @apply grid-cols-1;
+  }
+  &.cols-2 {
+    @apply grid-cols-2;
+  }
+  &.cols-3 {
+    @apply grid-cols-3;
+  }
+  &.cols-4 {
+    @apply grid-cols-4;
+  }
+  &.cols-5 {
+    @apply grid-cols-5;
+  }
+  &.cols-6 {
+    @apply grid-cols-6;
+  }
+  &.cols-7 {
+    @apply grid-cols-7;
+  }
+  &.cols-8 {
+    @apply grid-cols-8;
+  }
+  &.cols-9 {
+    @apply grid-cols-9;
+  }
+  &.cols-10 {
+    @apply grid-cols-10;
+  }
+  &.cols-11 {
+    @apply grid-cols-11;
+  }
+  &.cols-12 {
+    @apply grid-cols-12;
+  }
+
+  .input-group ~ .input-group {
+    @apply mt-0;
+  }
+
+  ~ .row {
+    @apply mt-3;
+  }
+}

package/styles/mixins/background.scss

@@ -1,31 +1,31 @@
-@mixin fixed-background($image, $color) {
-  @apply fixed -z-50 w-full h-screen;
-
-  @include background($image, $color);
-}
-
-@mixin background($image, $color) {
-  @apply overflow-hidden;
-
-  &,
-  &:before {
-    @apply bg-[url(#{$image})] bg-fixed bg-cover;
-  }
-
-  &:before,
-  &:after {
-    @apply content-[''] absolute inset-0;
-  }
-
-  &:before {
-    @apply blur-sm;
-  }
-
-  &:after {
-    @apply #{$color};
-  }
-
-  * {
-    @apply z-10;
-  }
-}
+@mixin fixed-background($image, $color) {
+  @apply fixed -z-50 w-full h-screen;
+
+  @include background($image, $color);
+}
+
+@mixin background($image, $color) {
+  @apply overflow-hidden;
+
+  &,
+  &:before {
+    @apply bg-[url(#{$image})] bg-fixed bg-cover;
+  }
+
+  &:before,
+  &:after {
+    @apply content-[''] absolute inset-0;
+  }
+
+  &:before {
+    @apply blur-sm;
+  }
+
+  &:after {
+    @apply #{$color};
+  }
+
+  * {
+    @apply z-10;
+  }
+}

package/styles/theme.css

@@ -1,75 +1,307 @@
-/*
- * The Tailwind entry point and the design tokens built on top of it.
- *
- * Tailwind 4 has no JavaScript config: the theme is CSS custom properties declared in `@theme`,
- * and every one of them doubles as a utility. `--color-primary-600` both defines the token and
- * creates `bg-primary-600`, `text-primary-600` and the rest, which is why the palette that used to
- * live in `tailwind.config.js` lives here now.
- *
- * Two kinds of file consume this:
- *
- *   An application's global stylesheet imports it, and gets the framework plus the theme:
- *     @import '@zambon-dev/shared/styles/theme.css';
- *
- *   A stylesheet that only uses `@apply` references it, and gets the theme without emitting the
- *   framework a second time:
- *     @reference '@zambon-dev/shared/styles/theme.css';
- *
- * That split is new in 4. In 3 the PostCSS plugin carried the config to every file it processed,
- * so `@apply` worked anywhere; in 4 a file is on its own unless it says where its theme comes from.
- */
-
-/*
- * `theme(static)` emits every theme variable, not only the ones this file is seen to use.
- * Tailwind 4 prunes unused ones, and the design tokens in variables.scss reference the palette
- * through `var(--color-gray-100)` from a different file -- which the pruner cannot see. Without
- * this, those variables resolve to nothing: the sidebar text lost its colour and --app-backdrop's
- * gradient became invalid and disappeared.
- */
-@import 'tailwindcss' theme(static);
-
-@plugin '@tailwindcss/forms';
-
-/*
- * Tailwind 4 changed the default border colour from `gray-200` to `currentColor`, so every element
- * with a border and no colour of its own inherits the text colour. Across the Storybooks that was
- * 615 elements going from a light grey hairline to solid black -- a change nothing in the build
- * reports, which is the case tools/style-snapshot exists to catch.
- *
- * This restores the 3.x default. Removing it is a deliberate visual decision, not a cleanup: it
- * means auditing every bordered element for one that was relying on the old default.
- */
-@layer base {
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentColor);
-  }
-}
-
-/*
- * Tailwind 4 dropped the preflight rule that gave buttons a pointer cursor; the base reset now
- * leaves them on the browser default. Restored, because every button in these libraries relied on
- * it -- 41 elements across the Storybooks lost their pointer.
- */
-@layer base {
-  button:not(:disabled),
-  [role='button']:not(:disabled) {
-    cursor: pointer;
-  }
-}
-
-@theme {
-  --color-primary-50: #e6f4ff;
-  --color-primary-100: #9acaed;
-  --color-primary-200: #59a5db;
-  --color-primary-300: #2585c8;
-  --color-primary-400: #006bb6;
-  --color-primary-500: #005794;
-  --color-primary-600: #004372;
-  --color-primary-700: #002f50;
-  --color-primary-800: #001b2f;
-  --color-primary-900: #00070d;
-}
+/*
+ * The Tailwind entry point and the design tokens built on top of it.
+ *
+ * Tailwind 4 has no JavaScript config: the theme is CSS custom properties declared in `@theme`,
+ * and every one of them doubles as a utility. `--color-primary-600` both defines the token and
+ * creates `bg-primary-600`, `text-primary-600` and the rest, which is why the palette that used to
+ * live in `tailwind.config.js` lives here now.
+ *
+ * Two kinds of file consume this:
+ *
+ *   An application's global stylesheet imports it, and gets the framework plus the theme:
+ *     @import '@zambon-dev/shared/styles/theme.css';
+ *
+ *   A stylesheet that only uses `@apply` references it, and gets the theme without emitting the
+ *   framework a second time:
+ *     @reference '@zambon-dev/shared/styles/theme.css';
+ *
+ * That split is new in 4. In 3 the PostCSS plugin carried the config to every file it processed,
+ * so `@apply` worked anywhere; in 4 a file is on its own unless it says where its theme comes from.
+ */
+
+/*
+ * `theme(static)` emits every theme variable, not only the ones this file is seen to use.
+ * Tailwind 4 prunes unused ones, and the design tokens in variables.scss reference the palette
+ * through `var(--color-gray-100)` from a different file -- which the pruner cannot see. Without
+ * this, those variables resolve to nothing: the sidebar text lost its colour and --app-backdrop's
+ * gradient became invalid and disappeared.
+ */
+@import 'tailwindcss' theme(static);
+
+@plugin '@tailwindcss/forms';
+
+/*
+ * Tailwind's `dark:` has to follow the same switch the tokens do. Left as the default it keys off
+ * the operating system, so the one `dark:bg-gray-700` in this repo already fires on a dark OS while
+ * nothing else does -- a skeleton that goes dark inside an otherwise light screen.
+ */
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+/*
+ * Tailwind 4 changed the default border colour from `gray-200` to `currentColor`, so every element
+ * with a border and no colour of its own inherits the text colour. Across the Storybooks that was
+ * 615 elements going from a light grey hairline to solid black -- a change nothing in the build
+ * reports, which is the case tools/style-snapshot exists to catch.
+ *
+ * This restores the 3.x default. Removing it is a deliberate visual decision, not a cleanup: it
+ * means auditing every bordered element for one that was relying on the old default.
+ */
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
+/*
+ * Tailwind 4 dropped the preflight rule that gave buttons a pointer cursor; the base reset now
+ * leaves them on the browser default. Restored, because every button in these libraries relied on
+ * it -- 41 elements across the Storybooks lost their pointer.
+ */
+@layer base {
+  button:not(:disabled),
+  [role='button']:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@theme {
+  --color-primary-50: #e6f4ff;
+  --color-primary-100: #9acaed;
+  --color-primary-200: #59a5db;
+  --color-primary-300: #2585c8;
+  --color-primary-400: #006bb6;
+  --color-primary-500: #005794;
+  --color-primary-600: #004372;
+  --color-primary-700: #002f50;
+  --color-primary-800: #001b2f;
+  --color-primary-900: #00070d;
+}
+
+/*
+ * ---------------------------------------------------------------------------------------------
+ * The semantic core.
+ *
+ * Everything above this line is Tailwind's own theme: `--color-primary-*` is the raw brand ramp.
+ * Everything below names a *job* rather than a value -- a surface, a piece of content, a line, a
+ * state -- so that a component asks for the role it needs and a theme decides what that looks
+ * like. The component tokens that already shipped (`--sidebar-*`, `--tabs-*`) stay exactly where
+ * they are and derive from these; they are the published contract, this is the implementation.
+ *
+ * Every value here is the one those components already compute today. The core was read out of
+ * them, not invented, which is why adopting it changes no pixel.
+ *
+ * `static` is load-bearing, and not for the reason the `theme(static)` on the import above is.
+ * That option covers the theme Tailwind itself imports; a second `@theme` block is pruned on its
+ * own terms, and these tokens are referenced from other files, which the pruner cannot see. Built
+ * without it, every one of them is dropped and the dark block below is the only thing left --
+ * so the light theme resolves to nothing while the dark theme works. Nothing reports this.
+ * ---------------------------------------------------------------------------------------------
+ */
+@theme static {
+  /*
+   * Surfaces name the plane, not the colour. The language is "translucent cards floating over the
+   * backdrop", and what separates one level from the next is how much of the backdrop it lets
+   * through. The 45/70/88 ladder is the same one the tabs use for rest/hover/active -- not a
+   * coincidence, and the reason it lives here: hovering a tab is literally climbing one surface.
+   */
+  --color-surface-brand: color-mix(in srgb, var(--color-primary-600) 82%, transparent);
+  --color-surface-glass-weak: color-mix(in srgb, white 45%, transparent);
+  --color-surface-glass: color-mix(in srgb, white 70%, transparent);
+  --color-surface-glass-strong: color-mix(in srgb, white 88%, transparent);
+  --color-surface-solid: var(--color-white);
+  --color-surface-inset: color-mix(in srgb, var(--color-gray-200) 40%, transparent);
+  --color-surface-scrim: color-mix(in srgb, black 50%, transparent);
+
+  /*
+   * "Content" and not "text": half the consumers are icons, `::before` glyphs and spinners.
+   * There is no `-disabled` here because disabled is an opacity on the element everywhere in
+   * this repo, never a colour -- see --opacity-disabled.
+   */
+  --color-content-primary: var(--color-gray-900);
+  --color-content-secondary: var(--color-gray-600);
+  --color-content-subtle: var(--color-gray-400);
+  --color-content-on-brand: var(--color-gray-100);
+  --color-content-on-brand-muted: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
+  --color-content-on-accent: var(--color-white);
+
+  /* "Line" covers border, divider and rule in one word; half of these are 1px pseudo-elements. */
+  --color-line: var(--color-gray-200);
+  --color-line-strong: color-mix(in srgb, var(--color-gray-400) 90%, transparent);
+  --color-line-on-glass: color-mix(in srgb, white 60%, transparent);
+  --color-line-on-brand: color-mix(in srgb, white 80%, var(--color-primary-600));
+
+  /*
+   * "Accent" rather than "primary": `--color-primary-*` is already the raw ramp, so this names the
+   * rung we chose. Retuning the brand becomes an edit here instead of a find-and-replace by rung.
+   */
+  --color-accent: var(--color-primary-600);
+  --color-accent-strong: var(--color-primary-700);
+  --color-accent-weak: var(--color-primary-50);
+
+  /* Focus is its own family because it is the one state that has to survive every theme and every
+     surface, and because this repo currently has two generations of it to collapse. */
+  --color-focus-ring: var(--color-primary-400);
+
+  /* Two per role, because each appears exactly two ways: as ink (a validation message, a badge)
+     and as a 75% fill (the ribbon button's status). A third variant is a color-mix at the point
+     of use. */
+  --color-danger: var(--color-red-600);
+  --color-danger-surface: color-mix(in srgb, var(--color-red-600) 75%, transparent);
+  --color-warning: var(--color-yellow-600);
+  --color-warning-surface: color-mix(in srgb, var(--color-yellow-600) 75%, transparent);
+  --color-success: var(--color-green-600);
+  --color-success-surface: color-mix(in srgb, var(--color-green-600) 75%, transparent);
+  --color-info: var(--color-primary-400);
+  --color-info-surface: color-mix(in srgb, var(--color-primary-400) 75%, transparent);
+
+  /*
+   * Shapes, not a t-shirt scale: `sm/md/lg` invites copying a size instead of asking what kind of
+   * thing this is. --radius-nested keeps a child's corners parallel to its parent's, which is only
+   * true when the inner radius is the outer radius minus the gap between them.
+   */
+  --radius-surface: 1.25rem;
+  --radius-control: 10px;
+  --radius-field: 0.375rem;
+  --radius-nested: calc(var(--radius-surface) - 0.5rem - 1px);
+
+  /* --shadow-overlay is the two-layer pair currently written out by hand in four files. */
+  --shadow-float: 0 10px 40px -12px rgb(0 0 0 / 0.25);
+  --shadow-float-strong: 0 10px 40px -12px rgb(0 0 0 / 0.45);
+  --shadow-overlay: 0 0 4px 0 rgb(0 0 0 / 0.2), 0 3px 20px 0 rgb(0 0 0 / 0.19);
+
+  /* One value for glass is deliberate: two translucent surfaces only match when the blur beneath
+     them matches too. The popover blur exists because a menu shares its plane with nothing. */
+  --blur-glass: 16px;
+  --blur-popover: 12px;
+
+  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
+  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
+
+  /*
+   * Roles, not a scale. There is no typographic scale here to preserve -- there are five jobs, and
+   * naming them is what stops `text-sm` vs `text-base` from being chosen by feel. These are new
+   * names inside Tailwind's `--text-*` namespace; overriding `--text-sm` would move the whole
+   * scale. No name may exist in both `--color-*` and `--text-*`, or `text-<name>` turns ambiguous.
+   */
+  --text-caption: 0.75rem;
+  --text-body: 0.875rem;
+  --text-ui: 1rem;
+  --text-title: 1.125rem;
+  --text-display: 1.5rem;
+  --font-weight-ui: 500;
+  --font-weight-emphasis: 600;
+  --font-weight-strong: 700;
+}
+
+/*
+ * The rest of the core. These have no Tailwind namespace to live in -- there is no `--state-*` or
+ * `--duration-*` in the framework -- so they are plain custom properties. A declaration in a bare
+ * `:root` is never pruned, so they need no help from theme(static).
+ */
+:root {
+  /* State is a wash, expressed as a mix rather than a colour, because the established pattern is a
+     ladder of opacity over whatever is underneath -- not a different colour per state. */
+  --state-hover: color-mix(in srgb, var(--color-gray-900) 6%, transparent);
+  --state-pressed: color-mix(in srgb, var(--color-gray-900) 10%, transparent);
+  --state-selected: color-mix(in srgb, var(--color-primary-200) 25%, transparent);
+  --state-hover-on-brand: color-mix(in srgb, white 12%, transparent);
+  --state-selected-on-brand: color-mix(in srgb, white 22%, transparent);
+
+  --opacity-disabled: 0.6;
+
+  --focus-ring-width: 2px;
+  --focus-ring-offset: 0px;
+
+  /* Named for how they feel, not what they measure: a `--duration-200` is a number with extra
+     steps. Routing every transition through these is what makes the reduced-motion block below a
+     single rule instead of an audit. */
+  --duration-instant: 120ms;
+  --duration-short: 200ms;
+  --duration-long: 600ms;
+}
+
+/*
+ * One rule turns off the 600ms margin/width/rotate transitions across the whole repo, because every
+ * transition reads a duration token. This is the return on naming them.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --duration-instant: 1ms;
+    --duration-short: 1ms;
+    --duration-long: 1ms;
+  }
+}
+
+/*
+ * ---------------------------------------------------------------------------------------------
+ * The dark theme.
+ *
+ * An attribute on <html>, not `prefers-color-scheme`. A media query would take the choice away
+ * from both sides: a consuming application could not opt out of a dark theme, and a user could not
+ * choose light on a dark OS. "Follow the system" is still the behaviour we want, but it is read in
+ * TypeScript and written here as `dark` -- so this file holds one block instead of two that have
+ * to be kept identical. The CSS never sees "system".
+ *
+ * Unlayered, so it beats the `@layer theme` block Tailwind emits above without !important.
+ *
+ * It restates colour and shadow only -- radius, blur, motion and type do not move between themes,
+ * and that is verifiable rather than asserted. It touches *only* core tokens, never `--sidebar-*`
+ * or `--tabs-*`: an application that overrides one of those keeps its override in both themes
+ * without doing anything.
+ * ---------------------------------------------------------------------------------------------
+ */
+:root {
+  color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --app-backdrop: linear-gradient(160deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
+
+  --color-surface-brand: color-mix(in srgb, var(--color-primary-800) 82%, transparent);
+  --color-surface-glass-weak: color-mix(in srgb, var(--color-gray-900) 45%, transparent);
+  --color-surface-glass: color-mix(in srgb, var(--color-gray-900) 70%, transparent);
+  --color-surface-glass-strong: color-mix(in srgb, var(--color-gray-900) 88%, transparent);
+  --color-surface-solid: var(--color-gray-900);
+  --color-surface-inset: color-mix(in srgb, var(--color-gray-700) 40%, transparent);
+  --color-surface-scrim: color-mix(in srgb, black 70%, transparent);
+
+  --color-content-primary: var(--color-gray-100);
+  --color-content-secondary: var(--color-gray-400);
+  --color-content-subtle: var(--color-gray-500);
+  /* The on-brand pair does not move: the brand surface is dark in both themes. */
+
+  --color-line: var(--color-gray-700);
+  --color-line-strong: var(--color-gray-600);
+  --color-line-on-glass: color-mix(in srgb, white 12%, transparent);
+  --color-line-on-brand: color-mix(in srgb, white 45%, var(--color-primary-800));
+
+  --color-accent: var(--color-primary-300);
+  --color-accent-strong: var(--color-primary-200);
+  --color-accent-weak: color-mix(in srgb, var(--color-primary-300) 18%, transparent);
+  --color-focus-ring: var(--color-primary-300);
+
+  /* The wash inverts from black to white; the on-brand rungs stay white in both themes. */
+  --state-hover: color-mix(in srgb, white 8%, transparent);
+  --state-pressed: color-mix(in srgb, white 14%, transparent);
+  --state-selected: color-mix(in srgb, var(--color-primary-300) 22%, transparent);
+
+  --color-danger: var(--color-red-400);
+  --color-danger-surface: color-mix(in srgb, var(--color-red-400) 75%, transparent);
+  --color-warning: var(--color-yellow-400);
+  --color-warning-surface: color-mix(in srgb, var(--color-yellow-400) 75%, transparent);
+  --color-success: var(--color-green-400);
+  --color-success-surface: color-mix(in srgb, var(--color-green-400) 75%, transparent);
+  --color-info: var(--color-primary-300);
+  --color-info-surface: color-mix(in srgb, var(--color-primary-300) 75%, transparent);
+
+  /* Shadows carry further on a dark backdrop before they read as depth. */
+  --shadow-float: 0 10px 40px -12px rgb(0 0 0 / 0.7);
+  --shadow-float-strong: 0 10px 40px -12px rgb(0 0 0 / 0.85);
+  --shadow-overlay: 0 0 4px 0 rgb(0 0 0 / 0.5), 0 3px 20px 0 rgb(0 0 0 / 0.6);
+}