wabtec-internal-volt-basic-components 1.2.0 → 1.4.0

package/dist/collection/components/button/vds-button.css

@@ -509,6 +509,7 @@
   --spacing-18:4.25rem;
   --spacing-19:4.5rem;
   --spacing-20:4.75rem;
+  --spacing-21:5rem;
   --opacity-64:0.64;
   --opacity-32:0.32;
   --opacity-16:0.16;
@@ -761,6 +762,11 @@
   --elevation-layer-3:6;
   --elevation-layer-4:8;
   --elevation-layer-5:12;
+  --elevation-layer-6:16;
+  --elevation-layer-7:20;
+  --elevation-layer-8:24;
+  --elevation-layer-9:28;
+  --elevation-layer-10:32;
   --border-thickness-01:0.0625rem;
   --border-thickness-02:0.078125rem;
   --border-thickness-03:0.09375rem;
@@ -770,6 +776,16 @@
   --border-thickness-07:0.15625rem;
   --border-thickness-08:0.171875rem;
   --border-thickness-09:0.1875rem;
+  --duration-instant:0ms;
+  --duration-short:100ms;
+  --duration-medium:200ms;
+  --duration-long:300ms;
+  --duration-extra-long:500ms;
+  --easing-standard:cubic-bezier(0.2, 0, 0, 1);
+  --easing-emphasized:cubic-bezier(0.2, 0, 0, 1);
+  --easing-decelerate:cubic-bezier(0, 0, 0, 1);
+  --easing-accelerate:cubic-bezier(0.3, 0, 1, 1);
+  --easing-linear:linear;
 }
 
 :root body .vds-font-display-large {
@@ -893,17 +909,6 @@
   gap: var(--spacing-03);
 }
 
-.vds__menu--backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  backdrop-filter: grayscale(100%) opacity(0.5);
-  pointer-events: auto;
-}
-
 :host(.disabled) {
   pointer-events: none;
 }
@@ -911,24 +916,94 @@
 :host {
   display: inline-block;
   width: fit-content;
+  /* Primary */
+  --vds-button-primary-background-color: var(--color-background-brand-default);
+  --vds-button-primary-background-hover-color: var(--color-background-brand-hover);
+  --vds-button-primary-background-press-color: var(--color-background-brand-press);
+  --vds-button-primary-border-hover-color: var(--color-border-brand-hover);
+  --vds-button-primary-text-color: var(--static-white);
+  --vds-button-primary-icon-color: var(--static-white);
+  /* Secondary */
+  --vds-button-secondary-background-hover-color: var(--color-interaction-brand-lowest);
+  --vds-button-secondary-background-press-color: var(--color-interaction-brand-lower);
+  --vds-button-secondary-border-color: var(--color-border-brand);
+  --vds-button-secondary-text-color: var(--color-link-default);
+  --vds-button-secondary-text-hover-color: var(--color-link-hover);
+  --vds-button-secondary-text-press-color: var(--color-link-press);
+  --vds-button-secondary-icon-color: var(--color-icon-brand-default);
+  --vds-button-secondary-icon-hover-color: var(--color-icon-brand-hover);
+  --vds-button-secondary-icon-press-color: var(--color-icon-brand-press);
+  /* Tertiary */
+  --vds-button-tertiary-background-color: var(--surface-medium);
+  --vds-button-tertiary-background-hover-color: var(--surface-low);
+  --vds-button-tertiary-background-press-color: var(--surface-lower);
+  --vds-button-tertiary-border-color: var(--color-border-disabled);
+  --vds-button-tertiary-text-color: var(--color-text-high);
+  --vds-button-tertiary-icon-color: var(--color-icon-high);
+  /* Ghost */
+  --vds-button-ghost-background-hover-color: var(--color-interaction-brand-lowest);
+  --vds-button-ghost-background-press-color: var(--color-interaction-brand-lower);
+  --vds-button-ghost-text-color: var(--color-link-default);
+  --vds-button-ghost-text-hover-color: var(--color-link-hover);
+  --vds-button-ghost-text-press-color: var(--color-link-press);
+  --vds-button-ghost-icon-color: var(--color-icon-brand-default);
+  --vds-button-ghost-icon-hover-color: var(--color-icon-brand-hover);
+  --vds-button-ghost-icon-press-color: var(--color-icon-brand-press);
+  /* Ghost alt */
+  --vds-button-ghost-alt-background-hover-color: var(--color-interaction-black-lowest);
+  --vds-button-ghost-alt-background-press-color: var(--color-interaction-black-lower);
+  --vds-button-ghost-alt-text-color: var(--color-text-high);
+  --vds-button-ghost-alt-icon-color: var(--color-icon-high);
+  /* Danger Primary */
+  --vds-button-primary-danger-background-color: var(--color-background-danger-default);
+  --vds-button-primary-danger-background-hover-color: var(--color-background-danger-high-hover);
+  --vds-button-primary-danger-background-press-color: var(--color-background-danger-high-press);
+  --vds-button-primary-danger-border-hover-color: var(--color-interaction-danger-medium);
+  --vds-button-primary-danger-text-color: var(--static-white);
+  --vds-button-primary-danger-icon-color: var(--static-white);
+  /* Danger Secondary */
+  --vds-button-secondary-danger-background-hover-color: var(--color-background-danger-lowest-hover);
+  --vds-button-secondary-danger-background-press-color: var(--color-background-danger-lowest-press);
+  --vds-button-secondary-danger-border-color: var(--color-border-danger);
+  --vds-button-secondary-danger-text-color: var(--color-text-danger-medium);
+  --vds-button-secondary-danger-text-press-color: var(--vds-button-secondary-danger-text-color);
+  --vds-button-secondary-danger-icon-color: var(--color-icon-danger);
+  --vds-button-secondary-danger-icon-press-color: var(--vds-button-secondary-danger-icon-color);
+  /* Danger Ghost */
+  --vds-button-ghost-danger-background-hover-color: var(--color-background-danger-lowest-hover);
+  --vds-button-ghost-danger-background-press-color: var(--color-background-danger-lowest-press);
+  --vds-button-ghost-danger-text-color: var(--color-text-danger-medium);
+  --vds-button-ghost-danger-text-press-color: var(--vds-button-ghost-danger-text-color);
+  --vds-button-ghost-danger-icon-color: var(--color-icon-danger);
+  --vds-button-ghost-danger-icon-press-color: var(--vds-button-ghost-danger-icon-color);
+  /* Layout */
+  --vds-button-border-radius: var(--radius-medium);
+  --vds-button-width: auto;
+  --vds-button-height-large: 3rem;
+  --vds-button-height-medium: 2.25rem;
+  --vds-button-height-small: 1.5rem;
+  --vds-button-padding-large: calc(var(--spacing-04)) calc(var(--spacing-05));
+  --vds-button-padding-medium: calc(var(--spacing-03)) calc(var(--spacing-04));
+  --vds-button-padding-small: calc(var(--spacing-02)) calc(var(--spacing-03));
 }
 :host .vds-button__element {
   display: flex;
   align-items: center;
   border: none;
-  border-radius: var(--radius-medium);
+  border-radius: var(--vds-button-border-radius);
   box-sizing: border-box;
-  box-shadow: none;
+  box-shadow: var(--vds-button-box-shadow, none);
   cursor: pointer;
+  width: var(--vds-button-width);
 }
 :host .vds-button__element:focus-visible {
   outline: 0.125rem solid var(--color-border-focus-2);
   outline-offset: 0.125rem;
 }
 :host .vds-button__size--large {
-  padding: calc(var(--spacing-04)) calc(var(--spacing-05));
+  padding: var(--vds-button-padding-large);
   gap: var(--spacing-03);
-  height: 3rem;
+  height: var(--vds-button-height-large);
   font-family: "Roboto Flex", sans-serif;
   font-size: 1rem;
   font-weight: 600;
@@ -936,9 +1011,9 @@
   letter-spacing: normal;
 }
 :host .vds-button__size--medium {
-  padding: calc(var(--spacing-03)) calc(var(--spacing-04));
+  padding: var(--vds-button-padding-medium);
   gap: var(--spacing-03);
-  height: 2.25rem;
+  height: var(--vds-button-height-medium);
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.875rem;
   font-weight: 600;
@@ -946,9 +1021,9 @@
   letter-spacing: normal;
 }
 :host .vds-button__size--small {
-  padding: calc(var(--spacing-02)) calc(var(--spacing-03));
+  padding: var(--vds-button-padding-small);
   gap: var(--spacing-02);
-  height: 1.5rem;
+  height: var(--vds-button-height-small);
   font-family: "Roboto Flex", sans-serif;
   font-size: 0.75rem;
   font-weight: 600;
@@ -956,121 +1031,126 @@
   letter-spacing: 0.00875rem;
 }
 :host .vds-button__variant--primary {
-  background-color: var(--color-background-brand-default);
-  color: var(--static-white);
+  background-color: var(--vds-button-primary-background-color);
+  color: var(--vds-button-primary-text-color);
 }
 :host .vds-button__variant--primary ::slotted(vds-icon) {
-  color: var(--static-white);
-  fill: var(--static-white);
+  color: var(--vds-button-primary-icon-color);
+  fill: var(--vds-button-primary-icon-color);
 }
 :host .vds-button__variant--primary.vds-button__danger {
-  background-color: var(--color-background-danger-default);
+  background-color: var(--vds-button-primary-danger-background-color);
+  color: var(--vds-button-primary-danger-text-color);
+}
+:host .vds-button__variant--primary.vds-button__danger ::slotted(vds-icon) {
+  color: var(--vds-button-primary-danger-icon-color);
+  fill: var(--vds-button-primary-danger-icon-color);
 }
 :host .vds-button__variant--primary.vds-button__danger:active, :host .vds-button__variant--primary.vds-button__danger:active:hover {
-  background-color: var(--color-background-danger-high-press);
+  background-color: var(--vds-button-primary-danger-background-press-color);
   outline: none;
 }
 :host .vds-button__variant--primary.vds-button__danger:hover {
-  background-color: var(--color-background-danger-high-hover);
-  outline: 0.25rem solid var(--color-interaction-danger-medium);
+  background-color: var(--vds-button-primary-danger-background-hover-color);
+  outline: 0.25rem solid var(--vds-button-primary-danger-border-hover-color);
   outline-offset: 0;
 }
 :host .vds-button__variant--primary:active, :host .vds-button__variant--primary:active:hover {
-  background-color: var(--color-background-brand-press);
+  background-color: var(--vds-button-primary-background-press-color);
   outline: none;
 }
 :host .vds-button__variant--primary:hover {
-  background-color: var(--color-background-brand-hover);
-  outline: 0.25rem solid var(--color-border-brand-hover);
+  background-color: var(--vds-button-primary-background-hover-color);
+  outline: 0.25rem solid var(--vds-button-primary-border-hover-color);
   outline-offset: 0;
 }
 :host .vds-button__variant--primary:disabled {
   background-color: transparent;
   color: var(--color-text-disabled);
   pointer-events: none;
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
+  box-shadow: var(--vds-button-box-shadow-disabled, 0 0 0 0.0625rem inset var(--color-border-disabled));
 }
 :host .vds-button__variant--primary:disabled ::slotted(vds-icon) {
   color: var(--color-icon-disabled);
   fill: var(--color-icon-disabled);
 }
 :host .vds-button__variant--secondary {
-  background-color: transparent;
-  color: var(--color-link-default);
-  box-shadow: 0 0 0 0.125rem inset var(--color-border-brand);
+  background-color: var(--vds-button-secondary-background-color);
+  color: var(--vds-button-secondary-text-color);
+  box-shadow: var(--vds-button-box-shadow-secondary, 0 0 0 0.125rem inset var(--vds-button-secondary-border-color));
 }
 :host .vds-button__variant--secondary ::slotted(vds-icon) {
-  color: var(--color-icon-brand-default);
-  fill: var(--color-icon-brand-default);
+  color: var(--vds-button-secondary-icon-color);
+  fill: var(--vds-button-secondary-icon-color);
 }
 :host .vds-button__variant--secondary.vds-button__danger {
-  color: var(--color-text-danger-medium);
-  box-shadow: 0 0 0 0.125rem inset var(--color-border-danger);
+  color: var(--vds-button-secondary-danger-text-color);
+  box-shadow: var(--vds-button-box-shadow-secondary-danger, 0 0 0 0.125rem inset var(--vds-button-secondary-danger-border-color));
 }
 :host .vds-button__variant--secondary.vds-button__danger ::slotted(vds-icon) {
-  color: var(--color-icon-danger);
-  fill: var(--color-icon-danger);
+  color: var(--vds-button-secondary-danger-icon-color);
+  fill: var(--vds-button-secondary-danger-icon-color);
 }
 :host .vds-button__variant--secondary.vds-button__danger:active, :host .vds-button__variant--secondary.vds-button__danger:hover, :host .vds-button__variant--secondary.vds-button__danger:active:hover {
-  background-color: var(--color-background-danger-lowest-press);
-  color: var(--color-text-danger-medium);
+  background-color: var(--vds-button-secondary-danger-background-press-color);
+  color: var(--vds-button-secondary-danger-text-press-color);
 }
 :host .vds-button__variant--secondary.vds-button__danger:active ::slotted(vds-icon), :host .vds-button__variant--secondary.vds-button__danger:hover ::slotted(vds-icon), :host .vds-button__variant--secondary.vds-button__danger:active:hover ::slotted(vds-icon) {
-  color: var(--color-icon-danger);
-  fill: var(--color-icon-danger);
+  color: var(--vds-button-secondary-danger-icon-press-color);
+  fill: var(--vds-button-secondary-danger-icon-press-color);
 }
 :host .vds-button__variant--secondary.vds-button__danger:hover {
-  background-color: var(--color-background-danger-lowest-hover);
+  background-color: var(--vds-button-secondary-danger-background-hover-color);
 }
 :host .vds-button__variant--secondary:active, :host .vds-button__variant--secondary:active:hover {
-  background-color: var(--color-interaction-brand-lower);
-  color: var(--color-link-press);
+  background-color: var(--vds-button-secondary-background-press-color);
+  color: var(--vds-button-secondary-text-press-color);
 }
 :host .vds-button__variant--secondary:active ::slotted(vds-icon), :host .vds-button__variant--secondary:active:hover ::slotted(vds-icon) {
-  color: var(--color-icon-brand-press);
-  fill: var(--color-icon-brand-press);
+  color: var(--vds-button-secondary-icon-press-color);
+  fill: var(--vds-button-secondary-icon-press-color);
 }
 :host .vds-button__variant--secondary:hover {
-  background-color: var(--color-interaction-brand-lowest);
-  color: var(--color-link-hover);
+  background-color: var(--vds-button-secondary-background-hover-color);
+  color: var(--vds-button-secondary-text-hover-color);
 }
 :host .vds-button__variant--secondary:hover ::slotted(vds-icon) {
-  color: var(--color-icon-brand-hover);
-  fill: var(--color-icon-brand-hover);
+  color: var(--vds-button-secondary-icon-hover-color);
+  fill: var(--vds-button-secondary-icon-hover-color);
 }
 :host .vds-button__variant--secondary:disabled {
   background-color: transparent;
   color: var(--color-text-disabled);
   pointer-events: none;
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
+  box-shadow: var(--vds-button-box-shadow-disabled, 0 0 0 0.0625rem inset var(--color-border-disabled));
 }
 :host .vds-button__variant--secondary:disabled ::slotted(vds-icon) {
   color: var(--color-icon-disabled);
   fill: var(--color-icon-disabled);
 }
 :host .vds-button__variant--secondary:disabled {
-  box-shadow: 0 0 0 0.125rem inset var(--color-border-disabled);
+  box-shadow: var(--vds-button-box-shadow-secondary-disabled, 0 0 0 0.125rem inset var(--color-border-disabled));
 }
 :host .vds-button__variant--tertiary {
-  background-color: var(--surface-medium);
-  color: var(--color-text-high);
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
+  background-color: var(--vds-button-tertiary-background-color);
+  color: var(--vds-button-tertiary-text-color);
+  box-shadow: var(--vds-button-box-shadow-tertiary, 0 0 0 0.0625rem inset var(--vds-button-tertiary-border-color));
 }
 :host .vds-button__variant--tertiary ::slotted(vds-icon) {
-  color: var(--color-icon-high);
-  fill: var(--color-icon-high);
+  color: var(--vds-button-tertiary-icon-color);
+  fill: var(--vds-button-tertiary-icon-color);
 }
 :host .vds-button__variant--tertiary:active, :host .vds-button__variant--tertiary:active:hover {
-  background-color: var(--surface-lower);
+  background-color: var(--vds-button-tertiary-background-press-color);
 }
 :host .vds-button__variant--tertiary:hover {
-  background-color: var(--surface-low);
+  background-color: var(--vds-button-tertiary-background-hover-color);
 }
 :host .vds-button__variant--tertiary:disabled {
   background-color: transparent;
   color: var(--color-text-disabled);
   pointer-events: none;
-  box-shadow: 0 0 0 0.0625rem inset var(--color-border-disabled);
+  box-shadow: var(--vds-button-box-shadow-disabled, 0 0 0 0.0625rem inset var(--color-border-disabled));
 }
 :host .vds-button__variant--tertiary:disabled ::slotted(vds-icon) {
   color: var(--color-icon-disabled);
@@ -1078,45 +1158,45 @@
 }
 :host .vds-button__variant--ghost {
   background-color: transparent;
-  color: var(--color-link-default);
+  color: var(--vds-button-ghost-text-color);
 }
 :host .vds-button__variant--ghost ::slotted(vds-icon) {
-  color: var(--color-icon-brand-default);
-  fill: var(--color-icon-brand-default);
+  color: var(--vds-button-ghost-icon-color);
+  fill: var(--vds-button-ghost-icon-color);
 }
 :host .vds-button__variant--ghost.vds-button__danger {
-  color: var(--color-text-danger-medium);
+  color: var(--vds-button-ghost-danger-text-color);
 }
 :host .vds-button__variant--ghost.vds-button__danger ::slotted(vds-icon) {
-  color: var(--color-icon-danger);
-  fill: var(--color-icon-danger);
+  color: var(--vds-button-ghost-danger-icon-color);
+  fill: var(--vds-button-ghost-danger-icon-color);
 }
 :host .vds-button__variant--ghost.vds-button__danger:active, :host .vds-button__variant--ghost.vds-button__danger:hover, :host .vds-button__variant--ghost.vds-button__danger:active:hover {
-  background-color: var(--color-background-danger-lowest-press);
-  color: var(--color-text-danger-medium);
+  background-color: var(--vds-button-ghost-danger-background-press-color);
+  color: var(--vds-button-ghost-danger-text-press-color);
 }
 :host .vds-button__variant--ghost.vds-button__danger:active ::slotted(vds-icon), :host .vds-button__variant--ghost.vds-button__danger:hover ::slotted(vds-icon), :host .vds-button__variant--ghost.vds-button__danger:active:hover ::slotted(vds-icon) {
-  color: var(--color-icon-danger);
-  fill: var(--color-icon-danger);
+  color: var(--vds-button-ghost-danger-icon-press-color);
+  fill: var(--vds-button-ghost-danger-icon-press-color);
 }
 :host .vds-button__variant--ghost.vds-button__danger:hover {
-  background-color: var(--color-background-danger-lowest-hover);
+  background-color: var(--vds-button-ghost-danger-background-hover-color);
 }
 :host .vds-button__variant--ghost:active, :host .vds-button__variant--ghost:active:hover {
-  background-color: var(--color-interaction-brand-lower);
-  color: var(--color-link-press);
+  background-color: var(--vds-button-ghost-background-press-color);
+  color: var(--vds-button-ghost-text-press-color);
 }
 :host .vds-button__variant--ghost:active ::slotted(vds-icon), :host .vds-button__variant--ghost:active:hover ::slotted(vds-icon) {
-  color: var(--color-icon-brand-press);
-  fill: var(--color-icon-brand-press);
+  color: var(--vds-button-ghost-icon-press-color);
+  fill: var(--vds-button-ghost-icon-press-color);
 }
 :host .vds-button__variant--ghost:hover {
-  background-color: var(--color-interaction-brand-lowest);
-  color: var(--color-link-hover);
+  background-color: var(--vds-button-ghost-background-hover-color);
+  color: var(--vds-button-ghost-text-hover-color);
 }
 :host .vds-button__variant--ghost:hover ::slotted(vds-icon) {
-  color: var(--color-icon-brand-hover);
-  fill: var(--color-icon-brand-hover);
+  color: var(--vds-button-ghost-icon-hover-color);
+  fill: var(--vds-button-ghost-icon-hover-color);
 }
 :host .vds-button__variant--ghost:disabled {
   background-color: transparent;
@@ -1129,17 +1209,17 @@
 }
 :host .vds-button__variant--ghost-alt {
   background-color: transparent;
-  color: var(--color-text-high);
+  color: var(--vds-button-ghost-alt-text-color);
 }
 :host .vds-button__variant--ghost-alt ::slotted(vds-icon) {
-  color: var(--color-icon-high);
-  fill: var(--color-icon-high);
+  color: var(--vds-button-ghost-alt-icon-color);
+  fill: var(--vds-button-ghost-alt-icon-color);
 }
 :host .vds-button__variant--ghost-alt:active, :host .vds-button__variant--ghost-alt:active:hover {
-  background-color: var(--color-interaction-black-lower);
+  background-color: var(--vds-button-ghost-alt-background-press-color);
 }
 :host .vds-button__variant--ghost-alt:hover {
-  background-color: var(--color-interaction-black-lowest);
+  background-color: var(--vds-button-ghost-alt-background-hover-color);
 }
 :host .vds-button__variant--ghost-alt:disabled {
   background-color: transparent;