@zambon-dev/ui 1.0.0 → 1.1.0

package/styles/variables.scss

@@ -1,60 +1,86 @@
-: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;
+/*
+ * Component tokens -- the published contract.
+ *
+ * These names are API: applications override them, and the CHANGELOG documents them. So they stay.
+ * What changed is where their values come from. Each one now names a role in the semantic core
+ * (see shared/styles/theme.css) instead of repeating a literal, which is what lets a theme move
+ * them all at once. The component token is the contract; the core is the implementation.
+ *
+ * Wrapped in a cascade layer on purpose. Until now an application's override only won if its
+ * stylesheet was imported after this one -- same selector, same specificity, later wins. An
+ * unlayered declaration beats any layer whatever the order, so an override now wins either way.
+ * This can only make an override win more, never less. Override without a layer.
+ *
+ * A consequence worth knowing: a static override pins that token in both themes. To vary by theme,
+ * write `:root[data-theme='dark'] { --sidebar-bg: ... }` -- same specificity as ours, declared
+ * later, so it wins. Note that the dark block in theme.css touches core tokens only and never
+ * these, so a brand override stays yours in both themes without any work.
+ */
+@layer tokens {
+  :root {
+    /* Dimensions. Geometry of a component rather than design decisions, so they stay literal. */
+    --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));
+    /* Surfaces & colors -- translucent "glass" (brand-tinted) */
+    --sidebar-animation-duration: var(--duration-long);
+    --sidebar-bg: var(--color-surface-brand);
+    /* A single 5% rung with no pair in the core. Adding one for one use would be a worse trade,
+       and it reads correctly in both themes because the surface beneath it is dark in both. */
+    --sidebar-nav-bg: color-mix(in srgb, white 5%, transparent);
+    --sidebar-text: var(--color-content-on-brand);
+    --sidebar-text-muted: var(--color-content-on-brand-muted);
+    --sidebar-item-hover-bg: var(--state-hover-on-brand);
+    --sidebar-item-selected-bg: var(--state-selected-on-brand);
+    --sidebar-item-selected-text: var(--color-content-on-accent);
+    --sidebar-accent: var(--color-content-on-brand);
+    --sidebar-tree-line: var(--color-line-on-brand);
 
-  /* 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%);
+    /* Glass */
+    --sidebar-blur: var(--blur-glass);
+    --sidebar-shadow: var(--shadow-float-strong);
+    /* App background the glass sidebar floats over. A gradient, so it has no home in --color-*;
+       the dark theme restates it in theme.css. */
+    --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;
+    /* Radii (rounded restyle) */
+    --sidebar-radius: var(--radius-surface);
+    --sidebar-item-radius: var(--radius-control);
 
-  /* 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);
+    /* 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.
 
-  /* 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);
+       That the active tab and the panel now resolve to one token is the point: they are a single
+       surface, which is why no seam shows between them. */
+    --tabs-item-bg: var(--color-surface-glass-weak);
+    --tabs-item-hover-bg: var(--color-surface-glass);
+    --tabs-item-active-bg: var(--color-surface-glass-strong);
+    --tabs-item-text: var(--color-content-secondary);
+    --tabs-item-active-text: var(--color-content-primary);
+    --tabs-content-bg: var(--color-surface-glass-strong);
+    --tabs-border: var(--color-line-on-glass);
+    --tabs-close: var(--color-content-subtle);
+    --tabs-close-hover-bg: var(--state-pressed);
+    --tabs-close-hover: var(--color-gray-700);
 
-  /* 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;
+    /* Glass -- softer than the sidebar's, which floats over the backdrop rather than content. */
+    --tabs-blur: var(--blur-glass);
+    --tabs-shadow: var(--shadow-float);
+
+    /* Radii & dimensions */
+    --tabs-radius: var(--radius-surface);
+    --tabs-item-radius: var(--radius-control);
+    --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;
+  }
 }

package/types/zambon-dev-ui-framework.d.ts

@@ -1,6 +1,6 @@
 import * as i0 from "@angular/core";
 import { AfterViewInit, ApplicationRef, EnvironmentProviders, EventEmitter, InjectionToken, InputSignal, ModelSignal, NgZone, OnDestroy, OnInit, OutputEmitterRef, Provider, Signal, TemplateRef, WritableSignal } from "@angular/core";
-import { AngularAssetPattern, DataGridConfigsProvider, DataGridDataset, DataProviderService, DateValidators, FormService, IModal, IRibbonButtonOption, ITabView, ModalComponent, ModalSize, MultiEditorComponent, MultiEditorDataset, MultiSelectComponent, MultiSelectResultDataset, RibbonButtonComponent, RibbonGroupChild } from "@zambon-dev/ui/library";
+import { AngularAssetPattern, ButtonIntent, DataGridConfigsProvider, DataGridDataset, DataProviderService, DateValidators, FormService, IModal, IRibbonButtonOption, ITabView, ModalComponent, ModalSize, MultiEditorComponent, MultiEditorDataset, MultiSelectComponent, MultiSelectResultDataset, RibbonButtonComponent, RibbonGroupChild } from "@zambon-dev/ui/library";
 import { Observable, ReplaySubject, Subject } from "rxjs";
 import { JwtHelperService } from "@auth0/angular-jwt";
 import { Location } from "@angular/common";
@@ -261,7 +261,12 @@ export declare class ButtonConfirmComponent extends BaseButton {
   readonly color: InputSignal<string>;
   readonly icon: InputSignal<string>;
   readonly label: InputSignal<string>;
-  readonly modalConfirmButtonColor: InputSignal<string>;
+  /**
+   * What the confirm button is for. Replaces `modalConfirmButtonColor`, which took a Tailwind
+   * palette name -- `green-500` -- and so could neither follow a theme nor say what the button
+   * meant.
+   */
+  readonly modalConfirmButtonIntent: InputSignal<ButtonIntent>;
   readonly modalConfirmButtonLabel: InputSignal<string>;
   readonly modalMessage: InputSignal<string>;
   readonly modalMessageIcon: InputSignal<string>;
@@ -293,8 +298,8 @@ export declare class ButtonConfirmComponent extends BaseButton {
       "required": false;
       "isSignal": true;
     };
-    "modalConfirmButtonColor": {
-      "alias": "modalConfirmButtonColor";
+    "modalConfirmButtonIntent": {
+      "alias": "modalConfirmButtonIntent";
       "required": false;
       "isSignal": true;
     };
@@ -1443,6 +1448,8 @@ export interface AppConfigOptions {
   companyName?: string;
   environment?: string;
   logoUrl?: string;
+  loginBackgroundUrl?: string;
+  loginLogoUrl?: string;
   notificationsEnabled?: boolean;
   notificationsUrl?: string;
   version?: string;
@@ -1457,6 +1464,10 @@ export declare class AppConfig {
   environment: string;
   /** Optional brand logo URL shown in the top bar. */
   logoUrl?: string;
+  /** Optional photograph behind the sign-in screen. Without one the app backdrop shows. */
+  loginBackgroundUrl?: string;
+  /** Optional logo on the sign-in card. Falls back to `logoUrl`. */
+  loginLogoUrl?: string;
   /** Whether the top-bar notifications feature (bell + badge) is enabled. */
   notificationsEnabled: boolean;
   /** SignalR hub URL the notifications service connects to when enabled. */

package/types/zambon-dev-ui-library.d.ts

@@ -10,6 +10,87 @@ export declare abstract class BaseComponent implements OnDestroy {
   static ɵfac: i0.ɵɵFactoryDeclaration<BaseComponent, never>;
   static ɵcmp: i0.ɵɵComponentDeclaration<BaseComponent, "ng-component", never, {}, {}, never, never, true, never>;
 }
+/** What the button is for, which is what decides how loud it looks. */
+type ButtonIntent = 'primary' | 'secondary' | 'danger' | 'ghost';
+/**
+ * The one button.
+ *
+ * It replaces the global `.btn` classes, which generated 154 variants by interpolating Tailwind
+ * colour names -- `btn blue-500`, `btn red-700` -- in a `@for` loop. Those named a palette entry
+ * rather than a purpose, so a screen's buttons were a colour decision taken 154 times, and none of
+ * them could follow a theme. An intent says what the button is for and lets the theme decide what
+ * that looks like.
+ *
+ * `lib-ribbon-button` is deliberately not folded in here. It is a different shape -- icon above
+ * label, large hit area, an options menu -- and merging the two would produce one component with
+ * two personalities. They share the tokens instead.
+ *
+ * There is no click output: the inner element is a real `<button>`, so a `(click)` bound on
+ * `<lib-button>` receives the bubbled event, and a disabled button emits nothing to bubble. For the
+ * same reason `type="submit"` works from inside a form with no wiring.
+ */
+export declare class ButtonComponent {
+  /** What the button is for. Governs fill and text colour. */
+  readonly intent: InputSignal<ButtonIntent>;
+  /** Native button type. `submit` works because the rendered button is inside the host's form. */
+  readonly type: InputSignal<'button' | 'submit' | 'reset'>;
+  readonly disabled: InputSignal<boolean>;
+  /** Shows a spinner, announces `aria-busy` and blocks activation -- by the keyboard too. */
+  readonly loading: InputSignal<boolean>;
+  /** Transient confirmation. Blocks activation so the action cannot be fired twice. */
+  readonly success: InputSignal<boolean>;
+  /** Transient failure. Leaves the button usable so the action can be retried. */
+  readonly error: InputSignal<boolean>;
+  /** Font Awesome classes for a leading icon, e.g. `fa-solid fa-floppy-disk`. */
+  readonly icon: InputSignal<string | undefined>;
+  /** Required when the button has an icon and no text. */
+  readonly ariaLabel: InputSignal<string | undefined>;
+  /** Loading and success both stand for "this action is settled"; error is retryable. */
+  protected readonly isBlocked: Signal<boolean>;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "lib-button", never, {
+    "intent": {
+      "alias": "intent";
+      "required": false;
+      "isSignal": true;
+    };
+    "type": {
+      "alias": "type";
+      "required": false;
+      "isSignal": true;
+    };
+    "disabled": {
+      "alias": "disabled";
+      "required": false;
+      "isSignal": true;
+    };
+    "loading": {
+      "alias": "loading";
+      "required": false;
+      "isSignal": true;
+    };
+    "success": {
+      "alias": "success";
+      "required": false;
+      "isSignal": true;
+    };
+    "error": {
+      "alias": "error";
+      "required": false;
+      "isSignal": true;
+    };
+    "icon": {
+      "alias": "icon";
+      "required": false;
+      "isSignal": true;
+    };
+    "ariaLabel": {
+      "alias": "ariaLabel";
+      "required": false;
+      "isSignal": true;
+    };
+  }, {}, never, ["*"], true, never>;
+}
 export interface IBatchUpdate<TEntity, TKey> {
   entitiesToDelete: Array<TKey>;
   entitiesToInsertOrUpdate: Array<TEntity>;
@@ -1672,4 +1753,5 @@ export declare class DateValidators {
   static lessThanToday(control: AbstractControl): ValidationErrors | null;
   static maxDate(maxDate: Date): ValidatorFn;
   static minDate(minDate: Date): ValidatorFn;
-}
+}
+export type { ButtonIntent };

package/types/zambon-dev-ui-shared.d.ts

@@ -548,8 +548,11 @@ export declare function createZambonSharedTranslateLoader(httpBackend: HttpBacke
 export declare function provideZambonSharedTranslateLoader(appResources?: (string | TranslationResource)[]): Provider;
 export declare function provideZambonSharedTranslateService(config?: ZambonSharedTranslateConfig): EnvironmentProviders;
 export declare class LoginLayoutComponent {
+  private config;
+  /** Optional photograph behind the card. Absent leaves the app backdrop showing. */
+  protected get backgroundUrl(): string | undefined;
   static ɵfac: i0.ɵɵFactoryDeclaration<LoginLayoutComponent, never>;
-  static ɵcmp: i0.ɵɵComponentDeclaration<LoginLayoutComponent, "shared-login-layout", never, {}, {}, never, never, true, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<LoginLayoutComponent, "shared-login-layout", never, {}, {}, never, ["*"], true, never>;
 }
 export declare class MainLayoutComponent implements OnInit, OnDestroy {
   private readonly logoutModal;
@@ -672,4 +675,68 @@ export declare class UtcDatePipe implements PipeTransform {
   transform(value?: Date | string): Date | null;
   static ɵfac: i0.ɵɵFactoryDeclaration<UtcDatePipe, never>;
   static ɵpipe: i0.ɵɵPipeDeclaration<UtcDatePipe, "utcDate", true>;
+}
+/** What the user chose. `system` follows the operating system and keeps following it. */
+export type ThemePreference = 'light' | 'dark' | 'system';
+/** What the stylesheet is actually asked for. The CSS never sees `system`. */
+export type ResolvedTheme = 'light' | 'dark';
+/** Key the preference is stored under, and the one the pre-paint snippet has to read. */
+export declare const THEME_STORAGE_KEY = "zambon-theme";
+/**
+ * Owns the light/dark choice and writes it to `<html>`.
+ *
+ * The CSS switch is an attribute rather than `prefers-color-scheme` so that both sides keep a
+ * choice: an application can leave the attribute unwritten and never have a dark theme, and a user
+ * can pick light on a dark machine. Following the operating system is still a supported choice --
+ * it is resolved here, in TypeScript, and written out as a concrete `light` or `dark`. That is why
+ * `theme.css` holds one dark block instead of two that would have to be kept identical.
+ *
+ * The attribute is normally written before this service exists, by the snippet in `index.html`
+ * documented in the design-tokens guide -- an Angular service cannot run before the first paint,
+ * and a frame of the wrong theme is worse than no theme. This picks up from there.
+ */
+export declare class ThemeService {
+  private readonly document;
+  private readonly preferenceState;
+  private readonly systemPrefersDark;
+  /** What the user chose, including `system`. */
+  readonly preference: import("@angular/core").Signal<ThemePreference>;
+  /** What is actually applied right now. `system` is already resolved here. */
+  readonly resolved: import("@angular/core").Signal<ResolvedTheme>;
+  constructor();
+  /** Records a choice and applies it. Persisting is best-effort: a blocked store is not an error. */
+  setPreference(preference: ThemePreference): void;
+  /** Steps light -> dark -> system -> light, which is what a single-button switch needs. */
+  cyclePreference(): void;
+  private readStoredPreference;
+  private readSystemPrefersDark;
+  /**
+   * Keeps following the operating system after the first read. Without this, choosing `system` and
+   * then switching the machine to dark would leave the application on light until a reload.
+   */
+  private watchSystemPreference;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeService, never>;
+  static ɵprov: i0.ɵɵInjectableDeclaration<any>;
+}
+/**
+ * The top bar's light/dark control.
+ *
+ * One button stepping light -> dark -> system rather than three, because the bar is tight and this
+ * is not a setting people change often. The icon shows the choice that is in force, not the one a
+ * click would bring: a control that displays its own next state cannot be read at a glance.
+ *
+ * It has no stylesheet: a ghost `lib-button` is already the icon-button treatment, and a second
+ * copy of it here would drift from the one in the top bar beside it.
+ */
+export declare class ThemeSwitchComponent {
+  private readonly theme;
+  /** The choice in force, including `system`. */
+  protected readonly preference: import("@angular/core").Signal<ThemePreference>;
+  /** Full Font Awesome classes for the current choice -- the style prefix is not optional. */
+  protected readonly icon: import("@angular/core").Signal<string>;
+  /** Translation key naming the current choice, used for the label and the tooltip. */
+  protected readonly label: import("@angular/core").Signal<string>;
+  protected onClick(): void;
+  static ɵfac: i0.ɵɵFactoryDeclaration<ThemeSwitchComponent, never>;
+  static ɵcmp: i0.ɵɵComponentDeclaration<ThemeSwitchComponent, "shared-theme-switch", never, {}, {}, never, never, true, never>;
 }

package/types/zambon-dev-ui.d.ts

@@ -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 * from "@zambon-dev/ui/shared";
+export { ButtonComponent, LibButtonComponent };

package/styles/components/button.scss

@@ -1,101 +0,0 @@
-input[type='button'],
-input[type='reset'],
-input[type='submit'],
-button,
-a {
-  &.btn {
-    @apply relative px-3 py-1.5 inline-block text-center rounded-sm select-none;
-    @apply bg-slate-700 text-white;
-    @apply transition-all;
-
-    @apply focus:ring-4 focus:ring-slate-600/30;
-    @apply focus:bg-slate-800 hover:bg-slate-800;
-    @apply active:bg-slate-900;
-
-    i:not(:last-child) {
-      @apply mr-2;
-    }
-
-    &.disabled,
-    &:disabled {
-      @apply pointer-events-none opacity-[.60] ring-0;
-    }
-
-    &.error {
-      @apply bg-red-700 focus:ring-red-600/30;
-      @apply focus:bg-red-800 hover:bg-red-800;
-      @apply active:bg-red-900;
-
-      i:before {
-        @apply content-['\f00d'];
-      }
-    }
-
-    &.success {
-      @apply bg-green-700 ring-4 ring-green-600/30;
-      @apply pointer-events-none opacity-[.60];
-
-      i:before {
-        @apply content-['\f00c'];
-      }
-    }
-
-    &.loading {
-      @apply pointer-events-none opacity-[.60] ring-0 pl-8;
-      @apply transition-[margin-left] duration-200 ease-in-out;
-
-      &:before {
-        @apply content-[''] absolute left-2 top-0 bg-center bg-contain bg-no-repeat w-5 h-full animate-spin text-white;
-        @apply transition-opacity duration-200 ease-in-out;
-        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="white" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="white" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
-      }
-
-      i {
-        @apply invisible;
-      }
-    }
-  }
-}
-
-@mixin button($color) {
-  input[type='button'],
-  input[type='reset'],
-  input[type='submit'],
-  button,
-  a {
-    &.btn {
-      @for $i from 1 through 7 {
-        &.#{$color + '-' + $i + '00'} {
-          @if $i > 4 {
-            @apply text-white;
-          } @else {
-            @apply text-black;
-
-            &.loading:before {
-              background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"%3E%3Ccircle style="opacity:.25" cx="12" cy="12" r="10" stroke="black" stroke-width="4"%3E%3C/circle%3E%3Cpath style="opacity:.75" fill="black" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"%3E%3C/path%3E%3C/svg%3E');
-            }
-          }
-
-          @apply #{'bg-' + $color + '-' + $i + '00'};
-
-          $ring: $i + '00/30';
-          @if $i < 5 {
-            $ring: '400/20';
-          }
-
-          @apply #{'focus:ring-' + $color + '-' + $ring};
-          @apply #{'focus:bg-' + $color + '-' + ($i+1) + '00'};
-          @apply #{'hover:bg-' + $color + '-' + ($i+1) + '00'};
-          @apply #{'active:bg-' + $color + '-' + ($i+2) + '00'};
-        }
-      }
-    }
-  }
-}
-
-$colors:
-  'slate', 'gray', 'zinc', 'neutral', 'stone', 'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
-  'cyan', 'sky', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose', 'primary';
-@each $color in $colors {
-  @include button($color);
-}