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

package/i18n/shared/operations-history/en.json

@@ -1,5 +1,5 @@
-{
-  "OperationsHistory-Modal-Title": "Object changes details",
-
-  "": ""
-}
+{
+  "OperationsHistory-Modal-Title": "Object changes details",
+
+  "": ""
+}

package/i18n/shared/operations-history/pt.json

@@ -1,5 +1,5 @@
-{
-  "OperationsHistory-Modal-Title": "Detalhes de alteração do objeto",
-
-  "": ""
-}
+{
+  "OperationsHistory-Modal-Title": "Detalhes de alteração do objeto",
+
+  "": ""
+}

package/i18n/shared/services-history/en.json

@@ -1,14 +1,14 @@
-{
-  "ServicesHistory-Field-ChangedBy": "Employee",
-  "ServicesHistory-Field-ChangedOnFrom": "From",
-  "ServicesHistory-Field-ChangedOnTo": "To",
-  "ServicesHistory-Field-Name": "Action",
-  "ServicesHistory-Field-OnlyCurrentEntity": "This record only?",
-  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "An action usually writes to more than one table, and every operation it performed is listed by default — that is what shows the related records a change also touched. Tick this to see only the operations on this record.",
-  "ServicesHistory-Filters-Title": "History filters",
-  "ServicesHistory-FormGroup-Operations": "Operations",
-  "ServicesHistory-FormGroup-Period": "Period",
-  "ServicesHistory-FormGroup-Service": "Action",
-
-  "": ""
-}
+{
+  "ServicesHistory-Field-ChangedBy": "Employee",
+  "ServicesHistory-Field-ChangedOnFrom": "From",
+  "ServicesHistory-Field-ChangedOnTo": "To",
+  "ServicesHistory-Field-Name": "Action",
+  "ServicesHistory-Field-OnlyCurrentEntity": "This record only?",
+  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "An action usually writes to more than one table, and every operation it performed is listed by default — that is what shows the related records a change also touched. Tick this to see only the operations on this record.",
+  "ServicesHistory-Filters-Title": "History filters",
+  "ServicesHistory-FormGroup-Operations": "Operations",
+  "ServicesHistory-FormGroup-Period": "Period",
+  "ServicesHistory-FormGroup-Service": "Action",
+
+  "": ""
+}

package/i18n/shared/services-history/pt.json

@@ -1,14 +1,14 @@
-{
-  "ServicesHistory-Field-ChangedBy": "Funcionário",
-  "ServicesHistory-Field-ChangedOnFrom": "De",
-  "ServicesHistory-Field-ChangedOnTo": "Até",
-  "ServicesHistory-Field-Name": "Ação",
-  "ServicesHistory-Field-OnlyCurrentEntity": "Apenas este registro?",
-  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "Uma ação costuma alterar mais de uma tabela, e por padrão são listadas todas as operações que ela realizou — é isso que mostra os registros relacionados que a alteração também tocou. Marque para ver somente as operações sobre este registro.",
-  "ServicesHistory-Filters-Title": "Filtros do histórico",
-  "ServicesHistory-FormGroup-Operations": "Operações",
-  "ServicesHistory-FormGroup-Period": "Período",
-  "ServicesHistory-FormGroup-Service": "Ação",
-
-  "": ""
-}
+{
+  "ServicesHistory-Field-ChangedBy": "Funcionário",
+  "ServicesHistory-Field-ChangedOnFrom": "De",
+  "ServicesHistory-Field-ChangedOnTo": "Até",
+  "ServicesHistory-Field-Name": "Ação",
+  "ServicesHistory-Field-OnlyCurrentEntity": "Apenas este registro?",
+  "ServicesHistory-Field-OnlyCurrentEntity-Notes": "Uma ação costuma alterar mais de uma tabela, e por padrão são listadas todas as operações que ela realizou — é isso que mostra os registros relacionados que a alteração também tocou. Marque para ver somente as operações sobre este registro.",
+  "ServicesHistory-Filters-Title": "Filtros do histórico",
+  "ServicesHistory-FormGroup-Operations": "Operações",
+  "ServicesHistory-FormGroup-Period": "Período",
+  "ServicesHistory-FormGroup-Service": "Ação",
+
+  "": ""
+}

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

@@ -1,7 +1,10 @@
-{
-  "TopBar-Notifications-Title": "Notifications",
-  "TopBar-Notifications-Empty": "No notifications",
-  "TopBar-Notifications-MarkAllRead": "Mark all as read",
-
-  "": ""
-}
+{
+  "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

@@ -1,7 +1,10 @@
-{
-  "TopBar-Notifications-Title": "Notificações",
-  "TopBar-Notifications-Empty": "Nenhuma notificação",
-  "TopBar-Notifications-MarkAllRead": "Marcar todas como lidas",
-
-  "": ""
-}
+{
+  "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": "0.0.1-bootstrap.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,10 +1,9 @@
-@reference './theme.css';
-
-@import 'variables';
-@import 'components/button';
-@import 'components/card';
-@import 'components/dropdown-static';
-@import 'components/input';
-@import 'components/input-group';
-@import 'components/label';
-@import 'components/row';
+@reference './theme.css';
+
+@import 'variables';
+@import 'components/card';
+@import 'components/dropdown-static';
+@import 'components/input';
+@import 'components/input-group';
+@import 'components/label';
+@import 'components/row';

package/styles/components/card.scss

@@ -1,13 +1,19 @@
-.card {
-  @apply border rounded-lg relative mt-4 pt-3 px-2 pb-2;
-  @apply bg-white/80 border-gray-300/90;
-  @apply grid gap-3;
-
-  .title {
-    @apply text-lg font-semibold absolute -top-4 left-2 px-2 bg-white;
-  }
-
-  .input-group:not(:first-child) {
-    @apply mt-0;
-  }
-}
+.card {
+  @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 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) {
+    @apply mt-0;
+  }
+}

package/styles/components/dropdown-static.scss

@@ -1,35 +1,33 @@
-.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;
-  }
-
-  &.right ul {
-    @apply right-0;
-  }
-
-  ul {
-    @apply absolute hidden py-1 rounded-sm shadow-sm;
-    @apply bg-white/95 border border-neutral-400 backdrop-blur-md shadow-md;
-
-    .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;
-    }
-  }
-}
+.dropdown {
+  @apply relative;
+
+  &.show ul {
+    @apply block;
+  }
+
+  &.right ul {
+    @apply right-0;
+  }
+
+  ul {
+    @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;
+      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

@@ -1,44 +1,48 @@
-.input-group {
-  &.inline {
-    @apply flex flex-row-reverse flex-wrap items-stretch mb-3;
-
-    .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;
-    }
-
-    input[type='text'].form-input,
-    input[type='password'].form-input {
-      @apply mt-0 rounded-l-none -ml-1;
-      @apply w-1 grow;
-
-      &.ng-touched.ng-invalid {
-        ~ .input-group-text {
-          @apply bg-red-600;
-        }
-      }
-    }
-  }
-
-  &.checkbox {
-    @apply pt-[1.85rem] text-center;
-  }
-
-  &:not(:first-child) {
-    @apply mt-3;
-  }
-
-  input[type='text'].form-input,
-  input[type='password'].form-input {
-    &.ng-touched.ng-invalid {
-      ~ .validations {
-        @apply block;
-      }
-    }
-  }
-
-  .validations {
-    @apply hidden basis-full mt-1;
-    @apply text-red-600 text-sm;
-  }
-}
+.input-group {
+  &.inline {
+    @apply flex flex-row-reverse flex-wrap items-stretch mb-3;
+
+    .input-group-text {
+      @apply py-1.5 px-3 rounded-l flex flex-row items-center whitespace-nowrap select-none;
+      background-color: var(--color-surface-inset);
+      color: var(--color-content-secondary);
+      border-color: var(--color-line-strong);
+    }
+
+    input[type='text'].form-input,
+    input[type='password'].form-input {
+      @apply mt-0 rounded-l-none -ml-1;
+      @apply w-1 grow;
+
+      &.ng-touched.ng-invalid {
+        ~ .input-group-text {
+          background-color: var(--color-danger);
+          color: var(--color-content-on-accent);
+        }
+      }
+    }
+  }
+
+  &.checkbox {
+    @apply pt-[1.85rem] text-center;
+  }
+
+  &:not(:first-child) {
+    @apply mt-3;
+  }
+
+  input[type='text'].form-input,
+  input[type='password'].form-input {
+    &.ng-touched.ng-invalid {
+      ~ .validations {
+        @apply block;
+      }
+    }
+  }
+
+  .validations {
+    @apply hidden basis-full mt-1;
+    @apply text-sm;
+    color: var(--color-danger);
+  }
+}

package/styles/components/input.scss

@@ -1,99 +1,120 @@
-.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 {
+  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;
+
+  &:invalid {
+    border-color: var(--color-danger);
+  }
+
+  &:disabled {
+    background-color: var(--color-surface-inset);
+  }
+
+  &.ng-invalid.ng-touched {
+    border-color: var(--color-danger);
+  }
+}
+
+input[type='text'],
+input[type='number'],
+input[type='password'],
+textarea {
+  &.form-input {
+    @apply mt-1 block w-full shadow-xs;
+    border-radius: var(--radius-field);
+
+    &.ng-invalid.ng-touched {
+      @apply pr-9;
+      &: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");
+    }
+  }
+}
+
+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;
+  background-color: var(--color-surface-solid);
+
+  @apply disabled:pointer-events-none disabled:opacity-50;
+
+  &:not(.switch) {
+    @apply border-2 shadow-md;
+
+    &:focus-visible {
+      @apply 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;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+
+    &:before {
+      @apply content-['\f00c'];
+      color: var(--color-content-on-accent);
+    }
+  }
+
+  &: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;
+  background-color: var(--color-surface-solid);
+
+  &:before {
+    @apply content-[''] h-full aspect-square rounded-full;
+    background-color: var(--color-content-subtle);
+  }
+
+  &:after {
+    @apply content-[''] grow;
+    transition: flex-grow 0.15s ease-in-out;
+  }
+
+  &:focus-visible:before {
+    background-color: var(--color-accent);
+  }
+
+  &:checked {
+    @apply bg-none;
+    background-color: var(--color-accent);
+    border-color: var(--color-accent);
+
+    &:before {
+      @apply content-[''];
+      background-color: var(--color-surface-solid);
+    }
+
+    &:after {
+      @apply grow-0;
+    }
+  }
+}

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;
-}
+.form-label {
+  @apply block mb-2;
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-emphasis);
+  color: var(--color-content-secondary);
+}