crdx-components 1.0.0 → 2.0.0

package/src/index.ts

@@ -1,45 +0,0 @@
-export * from './lib/lib-ui/lib-ui';
-export * from './lib/icons/register-icons';
-
-// Core data display/navigation.
-export * from './lib/components/shared-table/shared-table.component';
-export * from './lib/components/breadcrumb/breadcrumb.component';
-export * from './lib/components/sidebar/sidebar';
-export * from './lib/components/header/header';
-
-// Inputs and selections.
-export * from './lib/components/form-field/text-field';
-export * from './lib/components/form-field/select-field';
-export * from './lib/components/list-item/list-item';
-export * from './lib/components/checkbox/checkbox';
-export * from './lib/components/checkbox/checkbox-showcase.component';
-
-/**
- * @deprecated Prefer `lib-select-field` for new implementations.
- * Kept for compatibility during migration window.
- */
-export * from './lib/components/menu/menu';
-
-// Actions and affordances.
-export * from './lib/components/button/button';
-export * from './lib/components/icon-button/icon-button';
-export * from './lib/components/slide-toggle/slide-toggle';
-export * from './lib/components/circular-progress-stepper/circular-progress-stepper';
-export * from './lib/components/spinner/spinner';
-export * from './lib/components/divider/divider';
-export * from './lib/components/tooltip/tooltip';
-export * from './lib/components/card/card';
-
-// Dialogs and modal containers.
-export * from './lib/components/dialogs/confirm-modal/confirm-modal';
-export * from './lib/components/dialogs/confirm-modal/confirm-modal.store';
-export * from './lib/components/dialogs/side-modal/side-modal';
-export * from './lib/components/dialogs/side-modal/side-modal.state';
-
-// Footer layouts.
-export * from './lib/components/footer-actions/page-footer-actions/page-footer-actions';
-export * from './lib/components/footer-actions/modal-footer-actions/modal-footer-actions';
-export * from './lib/components/footer-actions/footer/footer';
-export * from './lib/components/footer-actions/footer/footer-flow.store';
-
-export const LIB_UI_STYLES_PATH = './lib/styles/index.scss';

package/src/lib/components/breadcrumb/breadcrumb.component.css

@@ -1,206 +0,0 @@
-.shared-breadcrumb {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0;
-  color: var(
-    --breadcrumbs-label-enabled-breadcrumb-enabled-label-text-color,
-    var(--pallete-scheme-surface-on-surface-variant, #434749)
-  );
-  font-family: var(--breadcrumbs-label-enabled-breadcrumb-label-text-font, Heebo);
-  font-size: var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);
-  font-style: normal;
-  font-weight: var(--breadcrumbs-label-enabled-breadcrumb-label-text-weight, 400);
-  line-height: calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);
-  letter-spacing: var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, 0.25px);
-}
-
-.shared-breadcrumb__parent {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  border: none;
-  background: none;
-  padding: 0.625rem 0.75rem;
-  border-radius: 100px;
-  position: relative;
-  overflow: hidden;
-  font: inherit;
-  font-weight: var(
-    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
-    400
-  );
-  color: inherit;
-  cursor: pointer;
-  transition: color 150ms ease, background-color 150ms ease;
-  /* Token ya contiene RGBA con alpha baked-in: usar directo, sin color-mix adicional. */
-  --breadcrumb-ripple-color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color,
-    rgba(24, 28, 30, 0.08)
-  );
-}
-
-.shared-breadcrumb__parent::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 48px;
-  height: 28px;
-  background-color: var(--breadcrumb-ripple-color);
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.shared-breadcrumb__parent:hover,
-.shared-breadcrumb__parent:focus-visible {
-  color: var(
-    --breadcrumbs-label-hovered-breadcrumb-hovered-label-text-color,
-    var(--pallete-scheme-surface-on-surface, #181c1e)
-  );
-  background-color: var(
-    --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color,
-    rgba(24, 28, 30, 0.08)
-  );
-  outline: none;
-}
-
-.shared-breadcrumb__parent:focus-visible {
-  outline: calc(
-      var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-weight, 3) * 1px
-    )
-    solid var(--breadcrumbs-label-focused-breadcrumb-focused-indicator-color, #5b5f61);
-  outline-offset: 2px;
-}
-
-.shared-breadcrumb__parent:active {
-  color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color,
-    var(--pallete-scheme-surface-on-surface, #181c1e)
-  );
-  background-color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color,
-    rgba(24, 28, 30, 0.1)
-  );
-}
-
-.shared-breadcrumb__parent:active::after {
-  opacity: 1;
-}
-
-.shared-breadcrumb__separator {
-  display: inline-flex;
-  align-items: center;
-  color: var(--breadcrumbs-divider-breadcrumb-divider-color, #181c1e);
-  text-align: center;
-  font-family: var(--breadcrumbs-divider-breadcrumb-divider-text-font, Heebo);
-  font-size: var(--breadcrumbs-divider-breadcrumb-divider-text-size, 14px);
-  font-style: normal;
-  font-weight: var(--breadcrumbs-divider-breadcrumb-divider-text-weight, 400);
-  line-height: calc(var(--breadcrumbs-divider-breadcrumb-divider-text-line-height, 20) * 1px);
-  letter-spacing: var(--breadcrumbs-divider-breadcrumb-divider-text-tracking, 0.25px);
-}
-
-.shared-breadcrumb__current {
-  display: inline-flex;
-  align-items: center;
-  padding: 0.625rem 0.75rem;
-  gap: 0.5rem;
-  border-radius: 100px;
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  font-weight: var(
-    --breadcrumbs-label-selected-breadcrumb-selected-label-text-weight,
-    700
-  );
-  color: var(
-    --breadcrumbs-label-selected-breadcrumb-selected-label-hovered-text-color,
-    var(--pallete-scheme-surface-on-surface, #181c1e)
-  );
-  letter-spacing: var(--breadcrumbs-label-selected-breadcrumb-selected-label-text-tracking, 0.1px);
-  /* Token ya contiene RGBA con alpha baked-in: usar directo, sin color-mix adicional. */
-  --breadcrumb-ripple-color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-ripple-color,
-    rgba(24, 28, 30, 0.08)
-  );
-}
-
-.shared-breadcrumb__current::after {
-  content: '';
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 48px;
-  height: 28px;
-  background-color: var(--breadcrumb-ripple-color);
-  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
-  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='28' viewBox='0 0 48 28' fill='none'><path d='M48 3.12389V28H0C0 12.536 14.7249 0 32.8889 0C38.3368 0 43.4753 1.12771 48 3.12389Z' fill='black'/></svg>");
-  -webkit-mask-repeat: no-repeat;
-  mask-repeat: no-repeat;
-  -webkit-mask-size: contain;
-  mask-size: contain;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.shared-breadcrumb__current:hover,
-.shared-breadcrumb__current:focus-visible {
-  background-color: var(
-    --breadcrumbs-label-hovered-breadcrumb-hovered-state-layer-color,
-    rgba(24, 28, 30, 0.08)
-  );
-  outline: none;
-}
-
-.shared-breadcrumb__current:active {
-  color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-label-text-color,
-    #181c1e
-  );
-  background-color: var(
-    --breadcrumbs-label-pressed-breadcrumb-pressed-state-layer-color,
-    rgba(24, 28, 30, 0.1)
-  );
-}
-
-.shared-breadcrumb__current:active::after {
-  opacity: 1;
-}
-
-.shared-breadcrumb__current-label {
-  position: relative;
-  z-index: 1;
-  text-align: center;
-  font-size: var(--breadcrumbs-label-enabled-breadcrumb-label-text-size, 14px);
-  font-style: normal;
-  line-height: calc(var(--breadcrumbs-label-enabled-breadcrumb-label-text-line-height, 20) * 1px);
-  letter-spacing: var(--breadcrumbs-label-enabled-breadcrumb-label-text-tracking, 0.25px);
-  font-weight: inherit;
-}
-
-.shared-breadcrumb__parent-label {
-  position: relative;
-  z-index: 1;
-}
-
-.shared-breadcrumb__current:active .shared-breadcrumb__current-label {
-  font-weight: var(
-    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
-    400
-  );
-}
-
-.shared-breadcrumb__current:hover .shared-breadcrumb__current-label,
-.shared-breadcrumb__current:focus-visible .shared-breadcrumb__current-label {
-  font-weight: var(
-    --breadcrumbs-label-enabled-breadcrumb-label-text-weight,
-    400
-  );
-}

package/src/lib/components/breadcrumb/breadcrumb.component.html

@@ -1,15 +0,0 @@
-<nav class="shared-breadcrumb" *ngIf="currentLabel() || parentLabel()">
-  @if (parentLabel()) {
-    <button
-      type="button"
-      class="shared-breadcrumb__parent"
-      (click)="navigateToParent()"
-    >
-      <span class="shared-breadcrumb__parent-label">{{ parentLabel() }}</span>
-    </button>
-    <span class="shared-breadcrumb__separator">/</span>
-  }
-  <span class="shared-breadcrumb__current">
-    <span class="shared-breadcrumb__current-label">{{ currentLabel() }}</span>
-  </span>
-</nav>

package/src/lib/components/breadcrumb/breadcrumb.component.ts

@@ -1,47 +0,0 @@
-import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, inject, signal } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-@Component({
-  selector: 'lib-breadcrumb, shared-breadcrumb',
-  standalone: true,
-  imports: [CommonModule],
-  templateUrl: './breadcrumb.component.html',
-  styleUrl: './breadcrumb.component.css',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class SharedBreadcrumbComponent implements OnInit {
-  private readonly route = inject(ActivatedRoute, { optional: true });
-  private readonly router = inject(Router, { optional: true });
-  @Output() parentNavigate = new EventEmitter<string>();
-
-  readonly parentLabel = signal<string>('');
-  readonly parentUrl = signal<string>('');
-  readonly currentLabel = signal<string>('');
-
-  ngOnInit(): void {
-    const currentRoute = this.route;
-    if (!currentRoute) {
-      return;
-    }
-
-    const parentRoute = currentRoute.parent;
-    const parentData = parentRoute?.snapshot.data ?? {};
-    const currentData = currentRoute.snapshot.data ?? {};
-
-    const parentLabel = parentData['breadcrumb'] ?? currentData['parentBreadcrumb'] ?? '';
-    const parentUrl = parentData['url'] ?? currentData['parentUrl'] ?? '/';
-    const currentLabel = currentData['breadcrumb'] ?? '';
-
-    this.parentLabel.set(parentLabel);
-    this.parentUrl.set(parentUrl);
-    this.currentLabel.set(currentLabel);
-  }
-
-  navigateToParent(): void {
-    const target = this.parentUrl();
-    if (target) {
-      this.parentNavigate.emit(target);
-    }
-  }
-}
-

package/src/lib/components/button/button.css

@@ -1,371 +0,0 @@
-.lib-mat-btn {
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  box-sizing: border-box !important;
-  overflow: hidden !important;
-}
-
-.lib-mat-btn ::ng-deep .mdc-button__label {
-  overflow: visible !important;
-  position: static !important;
-  display: flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  gap: var(--lib-mat-btn-gap) !important;
-}
-
-.lib-mat-btn ::ng-deep .mdc-button__label > .mat-icon {
-  display: inline-flex !important;
-  align-items: center !important;
-  justify-content: center !important;
-  align-self: center !important;
-  margin: 0 !important;
-  line-height: 1 !important;
-  vertical-align: middle !important;
-}
-
-.lib-mat-btn ::ng-deep .mdc-button__label > span {
-  display: inline-flex !important;
-  align-items: center !important;
-  line-height: var(--lib-mat-btn-line-height) !important;
-  vertical-align: middle !important;
-}
-
-.lib-mat-btn:focus-visible {
-  outline: none;
-  box-shadow:
-    0 0 0 calc(var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61),
-    0 0 0 calc((var(--buttons-wip-button-enabled-button-focus-ring-indicator-thickness, 3) + var(--buttons-wip-button-enabled-button-focus-ring-outline-offset, 2)) * 1px) var(--buttons-wip-button-enabled-button-focus-ring-indicator-color, #5b5f61);
-}
-
-.lib-mat-btn.lib-mat-btn--pressed:not([disabled]) {
-  border-radius: calc(var(--lib-mat-btn-pressed-radius, var(--buttons-wip-size-medium-button-medium-shape-pressed-morph, 8)) * 1px);
-}
-
-.lib-mat-btn.lib-mat-btn--debug-padding {
-  box-shadow:
-    inset var(--lib-mat-btn-padding-x) 0 0 0 rgba(255, 0, 0, 0.6),
-    inset calc(100% - var(--lib-mat-btn-padding-x-right) - 2px) 0 0 0 rgba(0, 100, 255, 0.6);
-}
-
-.lib-mat-btn__content {
-  position: relative;
-  z-index: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--lib-mat-btn-gap);
-}
-
-.lib-mat-btn--align-start .lib-mat-btn__content,
-.lib-mat-btn--align-center .lib-mat-btn__content,
-.lib-mat-btn--align-end .lib-mat-btn__content {
-  width: 100%;
-}
-
-.lib-mat-btn--align-start .lib-mat-btn__content {
-  justify-content: flex-start;
-}
-
-.lib-mat-btn--align-center .lib-mat-btn__content {
-  justify-content: center;
-}
-
-.lib-mat-btn--align-end .lib-mat-btn__content {
-  justify-content: flex-end;
-}
-
-:host .lib-mat-btn--align-start .mdc-button__label,
-:host ::ng-deep .lib-mat-btn--align-start .mdc-button__label {
-  width: 100% !important;
-  justify-content: flex-start !important;
-}
-
-:host .lib-mat-btn--align-center .mdc-button__label,
-:host ::ng-deep .lib-mat-btn--align-center .mdc-button__label {
-  width: 100% !important;
-  justify-content: center !important;
-}
-
-:host .lib-mat-btn--align-end .mdc-button__label,
-:host ::ng-deep .lib-mat-btn--align-end .mdc-button__label {
-  width: 100% !important;
-  justify-content: flex-end !important;
-}
-
-/* Variables base (medium) */
-.lib-mat-btn {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
-  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-medium-button-medium-label-text-weight, 500);
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--variant-outlined {
-  color: var(--buttons-wip-color-outlined-enabled-button-outlined-label-color, #434749) !important;
-}
-
-.lib-mat-btn--variant-outlined:focus-visible {
-  color: var(--buttons-wip-color-outlined-focused-button-outlined-focused-label-color, #434749) !important;
-}
-
-.lib-mat-btn--variant-outlined .lib-mat-btn__content,
-.lib-mat-btn--variant-outlined .mdc-button__label {
-  color: inherit !important;
-}
-
-.lib-mat-btn--variant-tonal {
-  background-color: var(--buttons-wip-color-tonal-enabled-button-tonal-container-color, #e0e3e5) !important;
-  color: var(--buttons-wip-color-tonal-enabled-button-tonal-label-color, #434749) !important;
-  --mat-button-tonal-ripple-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, 0.1));
-}
-
-:host ::ng-deep .lib-mat-btn--variant-tonal:hover:not([disabled]) .mat-mdc-button-persistent-ripple::before {
-  background-color: var(--buttons-wip-color-tonal-hovered-button-tonal-hovered-container-state-layer-color, rgba(67, 71, 73, 0.08)) !important;
-  opacity: 1 !important;
-}
-
-:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-program-focused .mat-mdc-button-persistent-ripple::before,
-:host ::ng-deep .lib-mat-btn--variant-tonal.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
-  background-color: var(--buttons-wip-color-tonal-focused-button-tonal-focused-container-state-layer-color, rgba(67, 71, 73, 0.1)) !important;
-  opacity: 1 !important;
-}
-
-:host ::ng-deep .lib-mat-btn--variant-tonal:active:not([disabled]) .mat-mdc-button-persistent-ripple::before {
-  background-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-container-state-layer-color, rgba(67, 71, 73, 0.1)) !important;
-  opacity: 1 !important;
-}
-
-:host ::ng-deep .lib-mat-btn--variant-tonal .mat-ripple-element {
-  background-color: var(--buttons-wip-color-tonal-pressed-button-tonal-pressed-ripple-color, rgba(67, 71, 73, 0.1)) !important;
-}
-
-.lib-mat-btn--full {
-  width: 100%;
-}
-
-/* xsmall */
-.lib-mat-btn--xsmall {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xsmall-button-xsmall-leading-space) * 1px);
-  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xsmall-button-xsmall-trailing-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-xsmall-button-xsmall-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xsmall-button-xsmall-shape-square, 8) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-xsmall-button-xsmall-shape-pressed-morph);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-xsmall-button-xsmall-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xsmall-button-xsmall-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x-right) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-xsmall-button-xsmall-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-xsmall-button-xsmall-label-text-weight, 500);
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--xsmall .mat-icon,
-.lib-mat-btn--xsmall .mat-mdc-button-touch-target {
-  width: var(--lib-mat-btn-icon-size);
-  height: var(--lib-mat-btn-icon-size);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* small */
-.lib-mat-btn--small {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-small-button-small-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-small-button-small-leading-space) * 1px);
-  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-small-button-small-trailing-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-small-button-small-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-small-button-small-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-small-button-small-shape-square, 8) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-small-button-small-shape-pressed-morph);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-small-button-small-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-small-button-small-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-small-button-small-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-small-button-small-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x-right) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-small-button-small-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-small-button-small-label-text-weight, 500) !important;
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--small .mat-icon,
-.lib-mat-btn--small .mat-mdc-button-touch-target {
-  width: var(--lib-mat-btn-icon-size);
-  height: var(--lib-mat-btn-icon-size);
-  font-size: var(--lib-mat-btn-icon-size);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* medium */
-.lib-mat-btn--medium {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-medium-button-medium-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-medium-button-medium-leading-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-medium-button-medium-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-medium-button-medium-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-medium-button-medium-shape-square, 12) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-medium-button-medium-shape-pressed-morph);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-medium-button-medium-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-medium-button-medium-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-medium-button-medium-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-medium-button-medium-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x-right) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-medium-button-medium-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-medium-button-medium-label-text-weight, 500) !important;
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--medium .mat-icon,
-.lib-mat-btn--medium .mat-mdc-button-touch-target {
-  width: var(--lib-mat-btn-icon-size);
-  height: var(--lib-mat-btn-icon-size);
-  font-size: var(--lib-mat-btn-icon-size);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* large */
-.lib-mat-btn--large {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-large-button-large-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-large-button-large-leading-space) * 1px);
-  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-large-button-large-trailing-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-large-button-large-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-large-button-large-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-large-button-large-shape-square, 16) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-large-button-large-shape-pressed-morph);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-large-button-large-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-large-button-large-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-large-button-large-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-large-button-large-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x-right) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-large-button-large-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-large-button-large-label-text-weight, 400) !important;
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--large .mat-icon,
-.lib-mat-btn--large .mat-mdc-button-touch-target {
-  width: var(--lib-mat-btn-icon-size);
-  height: var(--lib-mat-btn-icon-size);
-  font-size: var(--lib-mat-btn-icon-size);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* xlarge */
-.lib-mat-btn--xlarge {
-  --lib-mat-btn-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-container-height) * 1px);
-  --lib-mat-btn-padding-x: calc(var(--buttons-wip-size-xlarge-button-xlarge-leading-space) * 1px);
-  --lib-mat-btn-padding-x-right: calc(var(--buttons-wip-size-xlarge-button-xlarge-trailing-space) * 1px);
-  --lib-mat-btn-gap: calc(var(--buttons-wip-size-xlarge-button-xlarge-between-icon-label-space) * 1px);
-  --lib-mat-btn-radius-round: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-round, 1000) * 1px);
-  --lib-mat-btn-radius-square: calc(var(--buttons-wip-size-xlarge-button-xlarge-shape-square, 16) * 1px);
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-  --lib-mat-btn-pressed-radius: var(--buttons-wip-size-xlarge-button-xlarge-shape-pressed-morph);
-  --lib-mat-btn-font-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-size) * 1px);
-  --lib-mat-btn-line-height: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-line-height) * 1px);
-  --lib-mat-btn-tracking: calc(var(--buttons-wip-size-xlarge-button-xlarge-label-text-tracking) * 1px);
-  --lib-mat-btn-icon-size: calc(var(--buttons-wip-size-xlarge-button-xlarge-icon-size) * 1px);
-
-  min-height: var(--lib-mat-btn-height);
-  height: var(--lib-mat-btn-height);
-  padding-left: var(--lib-mat-btn-padding-x) !important;
-  padding-right: var(--lib-mat-btn-padding-x-right) !important;
-  color: var(--buttons-wip-color-filled-enabled-button-filled-label-color, #fff);
-  font-family: var(--buttons-wip-size-xlarge-button-xlarge-label-text-font, Heebo);
-  font-size: var(--lib-mat-btn-font-size);
-  font-style: normal;
-  font-weight: var(--buttons-wip-size-xlarge-button-xlarge-label-text-weight, 400) !important;
-  line-height: var(--lib-mat-btn-line-height);
-  letter-spacing: var(--lib-mat-btn-tracking);
-  border-radius: var(--lib-mat-btn-radius);
-}
-
-.lib-mat-btn--xlarge .mat-icon,
-.lib-mat-btn--xlarge .mat-mdc-button-touch-target {
-  width: var(--lib-mat-btn-icon-size);
-  height: var(--lib-mat-btn-icon-size);
-  font-size: var(--lib-mat-btn-icon-size);
-  line-height: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.lib-mat-btn--shape-round {
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-round);
-}
-
-.lib-mat-btn--shape-square {
-  --lib-mat-btn-radius: var(--lib-mat-btn-radius-square);
-}