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

package/styles/components/input.scss

@@ -1,99 +1,99 @@
-.form-input {
-  @apply border-gray-400;
-  @apply focus:border-gray-400 focus:ring-4 focus:ring-primary-400/30;
-  @apply transition-colors transition-shadow;
-
-  @apply invalid:border-red-400;
-
-  @apply disabled:bg-slate-100;
-
-  &.ng-invalid.ng-touched {
-    @apply border-red-600;
-  }
-}
-
-input[type='text'],
-input[type='number'],
-input[type='password'],
-textarea {
-  &.form-input {
-    @apply mt-1 block w-full rounded-md shadow-xs;
-
-    &.ng-invalid.ng-touched {
-      @apply pr-9;
-      @apply focus:ring-red-400/30;
-      @apply bg-no-repeat bg-[right_0.5625rem_center] bg-[length:1.125rem_1.125rem];
-      background-image: url("data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
-    }
-  }
-}
-
-input[type='checkbox'].form-input {
-  @apply p-0.5 h-5 w-5 rounded-sm relative;
-  @apply inline-flex flex-row justify-end;
-  @apply appearance-none bg-white;
-
-  @apply disabled:pointer-events-none disabled:opacity-50;
-
-  &:not(.switch) {
-    @apply border-2 shadow-md focus:ring-3 focus:shadow-none;
-
-    &:before {
-      @apply content-[''] rounded-sm;
-      @apply flex items-center justify-center absolute inset-0 p-1;
-      font-family: var(--fa-family-classic, 'Font Awesome 6 Free');
-      font-weight: 900;
-    }
-  }
-
-  &:checked {
-    @apply bg-none bg-primary-400 border-primary-400/80;
-
-    &:before {
-      @apply content-['\f00c'];
-      @apply text-white;
-    }
-  }
-
-  &:disabled {
-    ~ label {
-      @apply opacity-50;
-    }
-  }
-
-  ~ label {
-    @apply ml-2 select-none;
-  }
-}
-
-input[type='checkbox'].form-input.switch {
-  @apply w-10 rounded-[2rem];
-  @apply appearance-none bg-white;
-
-  &:before {
-    @apply content-[''] h-full aspect-square rounded-full;
-    @apply bg-slate-500/60;
-  }
-
-  &:after {
-    @apply content-[''] grow;
-    transition: flex-grow 0.15s ease-in-out;
-  }
-
-  &:focus:before {
-    @apply bg-slate-500/60;
-  }
-
-  &:checked {
-    @apply bg-none bg-primary-400 border-primary-400/80;
-
-    &:before {
-      @apply content-[''];
-      @apply bg-white;
-    }
-
-    &:after {
-      @apply grow-0;
-    }
-  }
-}
+.form-input {
+  @apply border-gray-400;
+  @apply focus:border-gray-400 focus:ring-4 focus:ring-primary-400/30;
+  @apply transition-colors transition-shadow;
+
+  @apply invalid:border-red-400;
+
+  @apply disabled:bg-slate-100;
+
+  &.ng-invalid.ng-touched {
+    @apply border-red-600;
+  }
+}
+
+input[type='text'],
+input[type='number'],
+input[type='password'],
+textarea {
+  &.form-input {
+    @apply mt-1 block w-full rounded-md shadow-xs;
+
+    &.ng-invalid.ng-touched {
+      @apply pr-9;
+      @apply focus:ring-red-400/30;
+      @apply bg-no-repeat bg-[right_0.5625rem_center] bg-[length:1.125rem_1.125rem];
+      background-image: url("data:image/svg+xml,%3csvg class='text-white' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
+    }
+  }
+}
+
+input[type='checkbox'].form-input {
+  @apply p-0.5 h-5 w-5 rounded-sm relative;
+  @apply inline-flex flex-row justify-end;
+  @apply appearance-none bg-white;
+
+  @apply disabled:pointer-events-none disabled:opacity-50;
+
+  &:not(.switch) {
+    @apply border-2 shadow-md focus:ring-3 focus:shadow-none;
+
+    &:before {
+      @apply content-[''] rounded-sm;
+      @apply flex items-center justify-center absolute inset-0 p-1;
+      font-family: var(--fa-family-classic, 'Font Awesome 6 Free');
+      font-weight: 900;
+    }
+  }
+
+  &:checked {
+    @apply bg-none bg-primary-400 border-primary-400/80;
+
+    &:before {
+      @apply content-['\f00c'];
+      @apply text-white;
+    }
+  }
+
+  &:disabled {
+    ~ label {
+      @apply opacity-50;
+    }
+  }
+
+  ~ label {
+    @apply ml-2 select-none;
+  }
+}
+
+input[type='checkbox'].form-input.switch {
+  @apply w-10 rounded-[2rem];
+  @apply appearance-none bg-white;
+
+  &:before {
+    @apply content-[''] h-full aspect-square rounded-full;
+    @apply bg-slate-500/60;
+  }
+
+  &:after {
+    @apply content-[''] grow;
+    transition: flex-grow 0.15s ease-in-out;
+  }
+
+  &:focus:before {
+    @apply bg-slate-500/60;
+  }
+
+  &:checked {
+    @apply bg-none bg-primary-400 border-primary-400/80;
+
+    &:before {
+      @apply content-[''];
+      @apply bg-white;
+    }
+
+    &:after {
+      @apply grow-0;
+    }
+  }
+}

package/styles/components/label.scss

@@ -1,3 +1,3 @@
-.form-label {
-  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
-}
+.form-label {
+  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
+}

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,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;
-}
+/*
+ * 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

@@ -1,60 +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;
-}
+: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;
+}