@hermes-ui/angular 0.1.7 → 0.2.0

package/README.md

@@ -3,7 +3,7 @@
 1.  Install Hermes packages through npm:
 
     ```
-    npm install @hermes/angular
+    npm install @hermes-ui/angular @hermes-ui/core
     ```
 
 2.  Import the HermesModule into your Angular application's module. Your application's main module might look like this:
@@ -11,7 +11,7 @@
     ```
     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
-    import { HermesModule } from '@hermes/angular';
+    import { HermesModule } from '@hermes-ui/angular';
     import { AppComponent } from './app.component';
 
     @NgModule({
@@ -26,20 +26,20 @@
     export class AppModule {    }
     ```
 
-3.  Include the necessary styles in the build. You can do this by either including the compiled/minified css in your angular.json
-    file or by importing the scss/css directly in your top level styles.scss/css file.
+3.  Include the necessary styles in the build. You can do this by either adding the scss entry point to your angular.json
+   or by importing it in your top level styles.scss file.
 
 ```
   //...
   "styles": [
-    "node_modules/@hermes/angular/hermes-ui.min.css",
+    "node_modules/@hermes-ui/angular/hermes-ui.scss",
     //... any other styles
   ]
   //...
 ```
 
 ```scss
-@use '@hermes/angular/hermes-ui';
+@use '@hermes-ui/angular/hermes-ui';
 ```
 
 4.  Set the Theme

package/button/_buttons.clarity.scss

@@ -19,13 +19,21 @@
     @include button-mixins.populateButtonProperties(default);
     @include mixins.generate-typography-token('BUTTON-12');
 
-    // shadcn text-sm; only overrides the size from BUTTON-12 above, keeps its weight/
-    // line-height/letter-spacing/text-transform.
+    // Size, weight and line-height follow app-botao (12px bold), not the shared BUTTON-12 token;
+    // its sentence case and untracked letters are kept.
     font-size: buttons-variables.$hermes-btn-font-size;
+    font-weight: buttons-variables.$hermes-btn-font-weight;
+    line-height: buttons-variables.$hermes-btn-line-height;
 
+    box-sizing: border-box;
     height: buttons-variables.$hermes-btn-appearance-form-height;
     padding: buttons-variables.$hermes-btn-appearance-form-padding;
 
+    // The focus ring takes the intent's legible color; the intents below retarget the token.
+    --hermes-btn-focus-color: var(--hermes-btn-palette-primary-ink);
+
+    @include button-mixins.btn-interaction();
+
     .hermes-loading-btn-content {
       display: flex;
       gap: buttons-variables.$hermes-btn-gap;
@@ -180,11 +188,68 @@
     @include button-mixins.populateButtonProperties(inverse);
   }
 
+  // Focus ring color per intent (--cor-* of app-botao).
+  .btn.btn-success,
+  .btn.btn-success-outline,
+  .btn.btn-outline-success,
+  .btn.btn-link-success,
+  .btn-success .btn,
+  .btn-success-outline .btn,
+  .btn-outline-success .btn,
+  .btn-link-success .btn {
+    --hermes-btn-focus-color: var(--hermes-btn-palette-success-ink);
+  }
+
+  .btn.btn-warning,
+  .btn.btn-warning-outline,
+  .btn.btn-outline-warning,
+  .btn.btn-link-warning,
+  .btn-warning .btn,
+  .btn-warning-outline .btn,
+  .btn-outline-warning .btn,
+  .btn-link-warning .btn {
+    --hermes-btn-focus-color: var(--hermes-btn-palette-warning-ink);
+  }
+
+  .btn.btn-danger,
+  .btn.btn-danger-outline,
+  .btn.btn-outline-danger,
+  .btn.btn-link-danger,
+  .btn-danger .btn,
+  .btn-danger-outline .btn,
+  .btn-outline-danger .btn,
+  .btn-link-danger .btn {
+    --hermes-btn-focus-color: var(--hermes-btn-palette-danger-ink);
+  }
+
+  // Minimal emphasis: underlined label, no dimming on hover (the tint is the feedback).
+  .btn.btn-link,
+  .btn.btn-link-primary,
+  .btn.btn-link-info,
+  .btn.btn-link-success,
+  .btn.btn-link-warning,
+  .btn.btn-link-danger,
+  .btn.btn-link-neutral,
+  .btn-link .btn,
+  .btn-link-primary .btn,
+  .btn-link-info .btn,
+  .btn-link-success .btn,
+  .btn-link-warning .btn,
+  .btn-link-danger .btn,
+  .btn-link-neutral .btn {
+    @include button-mixins.btn-underlined();
+  }
+
   .btn.btn-sm,
   .btn-sm .btn {
     @include button-mixins.btn-sm-appearance();
   }
 
+  .btn.btn-lg,
+  .btn-lg .btn {
+    @include button-mixins.btn-lg-appearance();
+  }
+
   .btn-block {
     display: flex;
     width: 100%;
@@ -215,8 +280,21 @@
     }
   }
 
+  .btn-lg:not(.btn-link) {
+    hermes-icon,
+    hermes-icon {
+      &:not([size]) {
+        height: buttons-variables.$hermes-btn-icon-size-lg;
+        width: buttons-variables.$hermes-btn-icon-size-lg;
+      }
+    }
+  }
+
+  // Icon-only buttons are square, like app-botao-icone: the box is the height of the step.
   .btn-icon {
     min-width: 0;
+    padding-inline: 0;
+    aspect-ratio: 1;
   }
 
   //Overflow

package/button/_mixins.buttons.scss

@@ -103,7 +103,7 @@
     @include button-css-var($button-type, color);
 
     &:not([size]) {
-      @include mixins.min-equilateral(density.$hermes-base-icon-size-s);
+      @include mixins.min-equilateral(buttons-variables.$hermes-btn-icon-size);
     }
   }
 
@@ -194,7 +194,7 @@
   overflow: hidden;
 }
 @mixin btn-min-max-widths() {
-  min-width: tokens.$hermes-global-space-14;
+  min-width: buttons-variables.$hermes-btn-min-width;
   max-width: mixins.baselinePx(360);
 }
 @mixin btn-text-properties() {
@@ -226,7 +226,49 @@
   @include mixins.generate-typography-token('BUTTON-11-SMALL');
 
   height: buttons-variables.$hermes-btn-appearance-standard-height;
+  min-width: buttons-variables.$hermes-btn-min-width-sm;
   padding: buttons-variables.$hermes-btn-appearance-standard-padding;
+  font-size: buttons-variables.$hermes-btn-font-size-sm;
+  font-weight: buttons-variables.$hermes-btn-font-weight;
+  line-height: buttons-variables.$hermes-btn-line-height;
+}
+@mixin btn-lg-appearance() {
+  height: buttons-variables.$hermes-btn-height-lg;
+  min-width: buttons-variables.$hermes-btn-min-width-lg;
+  padding: buttons-variables.$hermes-btn-padding-lg;
+  font-size: buttons-variables.$hermes-btn-font-size-lg;
+}
+// Darkens the whole control (fill, label and icon) instead of swapping tokens per intent. The
+// resting pair was measured for contrast; a brightness filter scales it without re-measuring.
+@mixin btn-interaction() {
+  transition: buttons-variables.$hermes-btn-transition;
+
+  &:hover:not(:disabled):not(.disabled) {
+    filter: brightness(#{buttons-variables.$hermes-btn-hover-brightness});
+  }
+
+  &:active:not(:disabled):not(.disabled) {
+    filter: brightness(#{buttons-variables.$hermes-btn-active-brightness});
+  }
+
+  &:focus-visible {
+    outline: buttons-variables.$hermes-btn-focus-width solid buttons-variables.$hermes-btn-focus-color;
+    outline-offset: buttons-variables.$hermes-btn-focus-offset;
+  }
+}
+// Minimal emphasis has no frame, so the underline is what says it is actionable (WCAG 1.4.1).
+@mixin btn-underlined() {
+  text-decoration: underline;
+
+  &:hover,
+  &:active {
+    text-decoration: underline;
+  }
+
+  &:hover:not(:disabled):not(.disabled),
+  &:active:not(:disabled):not(.disabled) {
+    filter: none;
+  }
 }
 @mixin generateButton() {
   @include btn-appearance();