@zambon-dev/ui 0.0.0-stage → 0.0.1-bootstrap.0

package/styles/mixins/background.scss

@@ -0,0 +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;
+  }
+}

package/styles/theme.css

@@ -0,0 +1,75 @@
+/*
+ * 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;
+}

package/styles/variables.scss

@@ -0,0 +1,60 @@
+:root {
+  /* Dimensions */
+  --sidebar-animation-duration: 600ms;
+  --sidebar-collapsed-width: 70px;
+  --sidebar-expanded-width: 220px;
+  --sidebar-icon-collapsed-margin: 10px;
+  --sidebar-item-height: 2.75rem;
+  --sidebar-logo-height: 50px;
+  --sidebar-picture-size: 50px;
+
+  /* Surfaces & colors — translucent "glass" (brand-tinted) */
+  --sidebar-bg: color-mix(in srgb, var(--color-primary-600) 82%, transparent);
+  --sidebar-nav-bg: color-mix(in srgb, white 5%, transparent);
+  --sidebar-text: var(--color-gray-100);
+  --sidebar-text-muted: color-mix(in srgb, var(--color-gray-100) 60%, transparent);
+  --sidebar-item-hover-bg: color-mix(in srgb, white 12%, transparent);
+  --sidebar-item-selected-bg: color-mix(in srgb, white 22%, transparent);
+  --sidebar-item-selected-text: var(--color-white);
+  --sidebar-accent: var(--color-gray-100);
+  --sidebar-tree-line: color-mix(in srgb, white 80%, var(--color-primary-600));
+
+  /* Glass */
+  --sidebar-blur: 16px;
+  --sidebar-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.45);
+  /* App background the glass sidebar floats over (tune to taste). */
+  --app-backdrop: linear-gradient(160deg, var(--color-gray-100) 0%, var(--color-gray-300) 100%);
+
+  /* Radii (rounded restyle) */
+  --sidebar-radius: 1.25rem;
+  --sidebar-item-radius: 10px;
+
+  /* Tabs — a light glass card the views live in. The sidebar's glass is brand-tinted
+     and dark; this one is white-tinted, because the panel holds forms and grids that
+     need dark-on-light contrast. Same language (blur, radius, shadow), different hue. */
+  --tabs-item-bg: color-mix(in srgb, white 45%, transparent);
+  --tabs-item-hover-bg: color-mix(in srgb, white 70%, transparent);
+  --tabs-item-active-bg: color-mix(in srgb, white 88%, transparent);
+  --tabs-item-text: var(--color-gray-600);
+  --tabs-item-active-text: var(--color-gray-900);
+  --tabs-content-bg: color-mix(in srgb, white 88%, transparent);
+  --tabs-border: color-mix(in srgb, white 60%, transparent);
+  --tabs-close: var(--color-gray-400);
+  --tabs-close-hover-bg: color-mix(in srgb, var(--color-gray-900) 10%, transparent);
+  --tabs-close-hover: var(--color-gray-700);
+
+  /* Glass — softer than the sidebar's, which floats over the backdrop rather than content. */
+  --tabs-blur: 16px;
+  --tabs-shadow: 0 10px 40px -12px rgba(0, 0, 0, 0.25);
+
+  /* Radii & dimensions */
+  --tabs-radius: 1.25rem;
+  --tabs-item-radius: 10px;
+  --tabs-height: 2.75rem;
+  --tabs-item-max-width: 14rem;
+  /* Tabs compress to this before the strip starts scrolling -- still wide enough for a few
+     characters plus the close button, so a compressed tab is identifiable rather than a stub. */
+  --tabs-item-min-width: 7rem;
+  --tabs-scroll-width: 1.75rem;
+  --tabs-fade-width: 1.5rem;
+}