@zambon-dev/ui 1.0.0 → 1.1.0

package/fesm2022/zambon-dev-ui.mjs

@@ -1,3 +1,6 @@
+import { ButtonComponent as LibButtonComponent } from "@zambon-dev/ui/library";
+import { ButtonComponent } from "@zambon-dev/ui/framework";
 export * from "@zambon-dev/ui/library";
 export * from "@zambon-dev/ui/framework";
 export * from "@zambon-dev/ui/shared";
+export { ButtonComponent, LibButtonComponent };

package/i18n/shared/login/en.json

@@ -1,4 +1,5 @@
 {
+  "Login-Copyright": "© All rights reserved.",
   "Login-DesignBy": "Design by Ricardo Zambon",
   "Login-Errors-InternalServerError": "Occurred some error with the server, please try again.",
   "Login-Errors-Invalid": "The username or password you entered is incorrect.",
@@ -7,6 +8,7 @@
   "Login-RememberMe": "Remember me",
   "Login-SelectLanguage": "Select language",
   "Login-SignIn": "Sign In",
+  "Login-Title": "Welcome back",
   "Login-Username-Required": "Please enter the username",
   "Login-Username": "Type your username",
 

package/i18n/shared/login/pt.json

@@ -1,4 +1,5 @@
 {
+  "Login-Copyright": "© Todos os direitos reservados.",
   "Login-DesignBy": "Design por Ricardo Zambon",
   "Login-Errors-InternalServerError": "Ocorreu algum erro no servidor, por favor tente novamente.",
   "Login-Errors-Invalid": "O usuário ou senha informados são inválidos",
@@ -7,6 +8,7 @@
   "Login-RememberMe": "Lembrar de mim",
   "Login-SelectLanguage": "Selecionar idioma",
   "Login-SignIn": "Entrar",
+  "Login-Title": "Bem-vindo de volta",
   "Login-Username-Required": "Por favor informe o usuário",
   "Login-Username": "Digite o seu usuário",
 

package/i18n/shared/top-bar/en.json

@@ -2,6 +2,9 @@
   "TopBar-Notifications-Title": "Notifications",
   "TopBar-Notifications-Empty": "No notifications",
   "TopBar-Notifications-MarkAllRead": "Mark all as read",
+  "TopBar-Theme-Light": "Light theme",
+  "TopBar-Theme-Dark": "Dark theme",
+  "TopBar-Theme-System": "Theme follows the system",
 
   "": ""
 }

package/i18n/shared/top-bar/pt.json

@@ -2,6 +2,9 @@
   "TopBar-Notifications-Title": "Notificações",
   "TopBar-Notifications-Empty": "Nenhuma notificação",
   "TopBar-Notifications-MarkAllRead": "Marcar todas como lidas",
+  "TopBar-Theme-Light": "Tema claro",
+  "TopBar-Theme-Dark": "Tema escuro",
+  "TopBar-Theme-System": "Tema acompanha o sistema",
 
   "": ""
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zambon-dev/ui",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Angular UI components, application framework and shared application layer for Zambon applications.",
   "keywords": [
     "angular",

package/styles/common.scss

@@ -1,7 +1,6 @@
 @reference './theme.css';
 
 @import 'variables';
-@import 'components/button';
 @import 'components/card';
 @import 'components/dropdown-static';
 @import 'components/input';

package/styles/components/card.scss

@@ -1,10 +1,16 @@
 .card {
-  @apply border rounded-lg relative mt-4 pt-3 px-2 pb-2;
-  @apply bg-white/80 border-gray-300/90;
+  @apply border relative mt-4 pt-3 px-2 pb-2;
   @apply grid gap-3;
+  border-radius: var(--radius-control);
+  background-color: var(--color-surface-solid);
+  border-color: var(--color-line);
 
   .title {
-    @apply text-lg font-semibold absolute -top-4 left-2 px-2 bg-white;
+    @apply absolute -top-4 left-2 px-2;
+    font-size: var(--text-title);
+    font-weight: var(--font-weight-emphasis);
+    background-color: var(--color-surface-solid);
+    color: var(--color-content-primary);
   }
 
   .input-group:not(:first-child) {

package/styles/components/dropdown-static.scss

@@ -1,19 +1,6 @@
 .dropdown {
   @apply relative;
 
-  .btn {
-    @apply bg-neutral-600/60 text-white border border-neutral-900/40 backdrop-blur-md;
-
-    @apply focus:ring-neutral-600/30;
-    @apply focus:bg-neutral-600/70 hover:bg-neutral-600/70;
-    @apply active:bg-neutral-600/80;
-
-    &:after {
-      @apply content-[''] inline-block ml-1 align-middle;
-      @apply border-x-[.3em] border-t-[.3em] border-solid border-x-white/0;
-    }
-  }
-
   &.show ul {
     @apply block;
   }
@@ -23,13 +10,24 @@
   }
 
   ul {
-    @apply absolute hidden py-1 rounded-sm shadow-sm;
-    @apply bg-white/95 border border-neutral-400 backdrop-blur-md shadow-md;
+    @apply absolute hidden py-1 border;
+    border-radius: var(--radius-control);
+    border-color: var(--color-line);
+    background-color: var(--color-surface-solid);
+    box-shadow: var(--shadow-overlay);
 
     .dropdown-item {
       @apply block p-2 cursor-pointer whitespace-nowrap select-none;
-      @apply focus:bg-neutral-200/80 hover:bg-neutral-200/80;
-      @apply active:bg-slate-400 active:text-white;
+      color: var(--color-content-primary);
+
+      &:hover,
+      &:focus-visible {
+        background-color: var(--state-hover);
+      }
+
+      &:active {
+        background-color: var(--state-pressed);
+      }
     }
   }
 }

package/styles/components/input-group.scss

@@ -4,7 +4,9 @@
 
     .input-group-text {
       @apply py-1.5 px-3 rounded-l flex flex-row items-center whitespace-nowrap select-none;
-      @apply bg-slate-500 text-gray-50 border-blue-400;
+      background-color: var(--color-surface-inset);
+      color: var(--color-content-secondary);
+      border-color: var(--color-line-strong);
     }
 
     input[type='text'].form-input,
@@ -14,7 +16,8 @@
 
       &.ng-touched.ng-invalid {
         ~ .input-group-text {
-          @apply bg-red-600;
+          background-color: var(--color-danger);
+          color: var(--color-content-on-accent);
         }
       }
     }
@@ -39,6 +42,7 @@
 
   .validations {
     @apply hidden basis-full mt-1;
-    @apply text-red-600 text-sm;
+    @apply text-sm;
+    color: var(--color-danger);
   }
 }

package/styles/components/input.scss

@@ -1,14 +1,22 @@
 .form-input {
-  @apply border-gray-400;
-  @apply focus:border-gray-400 focus:ring-4 focus:ring-primary-400/30;
+  border-color: var(--color-line-strong);
+
+  &:focus-visible {
+    @apply outline-hidden ring-[length:var(--focus-ring-width)];
+    --tw-ring-color: var(--color-focus-ring);
+  }
   @apply transition-colors transition-shadow;
 
-  @apply invalid:border-red-400;
+  &:invalid {
+    border-color: var(--color-danger);
+  }
 
-  @apply disabled:bg-slate-100;
+  &:disabled {
+    background-color: var(--color-surface-inset);
+  }
 
   &.ng-invalid.ng-touched {
-    @apply border-red-600;
+    border-color: var(--color-danger);
   }
 }
 
@@ -17,11 +25,14 @@ input[type='number'],
 input[type='password'],
 textarea {
   &.form-input {
-    @apply mt-1 block w-full rounded-md shadow-xs;
+    @apply mt-1 block w-full shadow-xs;
+    border-radius: var(--radius-field);
 
     &.ng-invalid.ng-touched {
       @apply pr-9;
-      @apply focus:ring-red-400/30;
+      &:focus-visible {
+        --tw-ring-color: var(--color-danger);
+      }
       @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");
     }
@@ -31,12 +42,17 @@ textarea {
 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 appearance-none;
+  background-color: var(--color-surface-solid);
 
   @apply disabled:pointer-events-none disabled:opacity-50;
 
   &:not(.switch) {
-    @apply border-2 shadow-md focus:ring-3 focus:shadow-none;
+    @apply border-2 shadow-md;
+
+    &:focus-visible {
+      @apply shadow-none;
+    }
 
     &:before {
       @apply content-[''] rounded-sm;
@@ -47,11 +63,13 @@ input[type='checkbox'].form-input {
   }
 
   &:checked {
-    @apply bg-none bg-primary-400 border-primary-400/80;
+    @apply bg-none;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
 
     &:before {
       @apply content-['\f00c'];
-      @apply text-white;
+      color: var(--color-content-on-accent);
     }
   }
 
@@ -68,11 +86,12 @@ input[type='checkbox'].form-input {
 
 input[type='checkbox'].form-input.switch {
   @apply w-10 rounded-[2rem];
-  @apply appearance-none bg-white;
+  @apply appearance-none;
+  background-color: var(--color-surface-solid);
 
   &:before {
     @apply content-[''] h-full aspect-square rounded-full;
-    @apply bg-slate-500/60;
+    background-color: var(--color-content-subtle);
   }
 
   &:after {
@@ -80,16 +99,18 @@ input[type='checkbox'].form-input.switch {
     transition: flex-grow 0.15s ease-in-out;
   }
 
-  &:focus:before {
-    @apply bg-slate-500/60;
+  &:focus-visible:before {
+    background-color: var(--color-accent);
   }
 
   &:checked {
-    @apply bg-none bg-primary-400 border-primary-400/80;
+    @apply bg-none;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
 
     &:before {
       @apply content-[''];
-      @apply bg-white;
+      background-color: var(--color-surface-solid);
     }
 
     &:after {

package/styles/components/label.scss

@@ -1,3 +1,6 @@
 .form-label {
-  @apply block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2;
+  @apply block mb-2;
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-emphasis);
+  color: var(--color-content-secondary);
 }

package/styles/theme.css

@@ -30,6 +30,13 @@
 
 @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
@@ -73,3 +80,228 @@
   --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);
+}