@scania/tegel 1.52.0 → 1.53.0

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

@@ -1,203 +1,108 @@
-:root,
-.tds-mode-light {
-  --tds-btn-primary-background: var(--background-clickable-primary-primary);
-  --tds-btn-primary-background-hover: var(--background-clickable-primary-primary-hover);
-  --tds-btn-primary-background-active: var(--background-clickable-primary-pressed);
-  --tds-btn-primary-background-focus: var(--background-clickable-primary-focus);
-  --tds-btn-primary-background-disabled-primary: var(--background-clickable-primary-disabled);
-  --tds-btn-primary-background-disabled-secondary: var(--tds-white);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-  --tds-btn-primary-color: var(--tds-white);
-  --tds-btn-primary-color-hover: var(--tds-white);
-  --tds-btn-primary-color-active: var(--tds-white);
-  --tds-btn-primary-color-focus: var(--tds-white);
-  --tds-btn-primary-color-disabled: var(--tds-grey-250);
-  --tds-btn-primary-border-color: transparent;
-  --tds-btn-primary-border-color-hover: transparent;
-  --tds-btn-primary-border-color-active: var(--tds-blue-700);
-  --tds-btn-primary-border-color-focus: var(--tds-blue-700);
-  --tds-btn-primary-outline-color-focus: var(--tds-blue-400);
-  --tds-btn-primary-border-color-disabled: transparent;
-  /* ICON */
-  --tds-btn-icon-primary-fill: var(--tds-grey-50);
-  --tds-btn-icon-primary-color: var(--tds-grey-50);
-  --tds-btn-secondary-background: transparent;
-  --tds-btn-secondary-color: var(--tds-black);
-  --tds-btn-secondary-border-color: var(--tds-grey-350);
-  --tds-btn-secondary-background-hover: var(--tds-blue-700);
-  --tds-btn-secondary-color-hover: var(--tds-white);
-  --tds-btn-secondary-border-color-hover: var(--tds-blue-500);
-  --tds-btn-secondary-background-active: transparent;
-  --tds-btn-secondary-color-active: var(--tds-black);
-  --tds-btn-secondary-border-color-active: var(--tds-grey-650);
-  --tds-btn-secondary-background-focus: var(--tds-blue-700);
-  --tds-btn-secondary-color-focus: var(--tds-white);
-  --tds-btn-secondary-border-color-focus: var(--tds-white);
-  --tds-btn-secondary-outline-color: var(--tds-grey-350);
-  --tds-btn-secondary-outline-color-focus: var(--tds-blue-400);
-  --tds-btn-secondary-background-disabled: transparent;
-  --tds-btn-secondary-color-disabled: var(--tds-grey-250);
-  --tds-btn-secondary-border-color-disabled: var(--tds-grey-250);
-  --tds-btn-icon-secondary-color-focus: var(--tds-black);
-  --tds-btn-icon-secondary-fill-focus: var(--tds-black);
-  --tds-btn-icon-secondary-fill-active: var(--tds-grey-950);
-  /* ICON */
-  --tds-btn-icon-secondary-fill: var(--tds-grey-950);
-  --tds-btn-icon-secondary-color: var(--tds-grey-950);
-  /* ICON HOVER */
-  --tds-btn-icon-secondary-fill-hover: var(--tds-grey-50);
-  --tds-btn-icon-secondary-color-hover: var(--tds-grey-50);
-  /* ICON HOVER */
-  --tds-btn-icon-secondary-color-active: var(--tds-grey-950);
-  --tds-btn-ghost-background: transparent;
-  --tds-btn-ghost-color: var(--tds-grey-950);
-  --tds-btn-ghost-border-color: transparent;
-  --tds-btn-ghost-background-hover: transparent;
-  --tds-btn-ghost-color-hover: var(--tds-grey-950);
-  --tds-btn-ghost-border-color-hover: var(--tds-grey-350);
-  --tds-btn-ghost-outline-color-hover: var(--tds-grey-350);
-  --tds-btn-ghost-background-active: transparent;
-  --tds-btn-ghost-color-active: var(--tds-grey-950);
-  --tds-btn-ghost-border-color-active: var(--tds-grey-650);
-  --tds-btn-ghost-background-focus: transparent;
-  --tds-btn-ghost-color-focus: var(--tds-grey-950);
-  --tds-btn-ghost-border-color-focus: var(--tds-grey-350);
-  --tds-btn-ghost-outline-color-focus: var(--tds-blue-400);
-  --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: var(--tds-grey-250);
-  --tds-btn-ghost-border-color-disabled: transparent;
-  /* ICON */
-  --tds-btn-icon-ghost-fill: var(--tds-grey-950);
-  --tds-btn-icon-ghost-color: var(--tds-grey-950);
-  --tds-btn-danger-background: var(--scania-extended-red-400);
-  --tds-btn-danger-color: var(--tds-white);
-  --tds-btn-danger-border-color: transparent;
-  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
-  --tds-btn-danger-color-hover: var(--tds-white);
-  --tds-btn-danger-border-color-hover: transparent;
-  --tds-btn-danger-background-active: var(--scania-extended-red-600);
-  --tds-btn-danger-color-active: var(--tds-white);
-  --tds-btn-danger-border-color-active: var(--tds-red-700);
-  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
-  --tds-btn-danger-color-focus: var(--tds-white);
-  --tds-btn-danger-border-color-focus: var(--tds-red-500);
-  --tds-btn-danger-outline-color-focus: var(--tds-blue-400);
-  --tds-btn-danger-background-disabled-primary: var(--tds-grey-50);
-  --tds-btn-danger-background-disabled-secondary: var(--tds-white);
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: var(--tds-grey-250);
-  --tds-btn-danger-border-color-disabled: transparent;
-  /* ICON */
-  --tds-btn-icon-danger-fill: var(--tds-grey-50);
-  --tds-btn-icon-danger-color: var(--tds-grey-50);
-}
-:root .tds-mode-variant-primary,
-.tds-mode-light .tds-mode-variant-primary {
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-}
-:root .tds-mode-variant-secondary,
-.tds-mode-light .tds-mode-variant-secondary {
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
-}
-
-.tds-mode-dark {
-  --tds-btn-primary-background: var(--scania-blue-400);
-  --tds-btn-primary-background-hover: var(--scania-blue-500);
-  --tds-btn-primary-background-active: var(--scania-blue-600);
-  --tds-btn-primary-background-focus: var(--scania-blue-500);
-  --tds-btn-primary-border-color-focus: var(--tds-white);
-  --tds-btn-primary-border-color: transparent;
-  --tds-btn-primary-border-color-hover: var(--tds-white);
-  --tds-btn-primary-outline-color-focus: var(--tds-blue-300);
-  --tds-btn-primary-background-disabled-primary: var(--tds-grey-900);
-  --tds-btn-primary-background-disabled-secondary: var(--tds-grey-850);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-  --tds-btn-primary-color-disabled: var(--scania-neutral-transparent-inverse-500);
-  /* ICON */
-  --tds-btn-icon-primary-fill: var(--tds-grey-50);
-  --tds-btn-icon-primary-color: var(--tds-grey-50);
-  --tds-btn-secondary-background: transparent;
-  --tds-btn-secondary-color: var(--tds-white);
-  --tds-btn-secondary-border-color: var(--scania-neutral-transparent-inverse-400);
-  --tds-btn-secondary-background-hover: var(--tds-blue-500);
-  --tds-btn-secondary-color-hover: var(--tds-white);
-  --tds-btn-secondary-border-color-hover: var(--tds-white);
-  --tds-btn-secondary-background-active: var(--scania-blue-600);
-  --tds-btn-secondary-color-active: var(--tds-white);
-  --tds-btn-secondary-border-color-active: var(--tds-grey-200);
-  --tds-btn-secondary-background-focus: var(--scania-blue-500);
-  --tds-btn-secondary-color-focus: var(--tds-white);
-  --tds-btn-secondary-border-color-focus: var(--tds-white);
-  --tds-btn-secondary-outline-color-focus: var(--tds-blue-300);
-  --tds-btn-secondary-outline-color: var(--tds-white);
-  --tds-btn-secondary-background-disabled: transparent;
-  --tds-btn-secondary-color-disabled: var(--tds-grey-500);
-  --tds-btn-secondary-border-color-disabled: var(--tds-grey-500);
-  --tds-btn-icon-secondary-color-focus: var(--tds-white);
-  --tds-btn-icon-secondary-fill-focus: var(--tds-white);
-  /* ICON */
-  --tds-btn-icon-secondary-fill: var(--tds-grey-50);
-  --tds-btn-icon-secondary-color: var(--tds-grey-50);
-  --tds-btn-ghost-background: transparent;
-  --tds-btn-ghost-color: var(--tds-white);
-  --tds-btn-ghost-border-color: transparent;
-  --tds-btn-ghost-background-hover: transparent;
-  --tds-btn-ghost-color-hover: var(--tds-white);
-  --tds-btn-ghost-border-color-hover: var(--tds-grey-400);
-  --tds-btn-ghost-outline-color-hover: var(--scania-neutral-transparent-inverse-400);
-  --tds-btn-ghost-background-active: transparent;
-  --tds-btn-ghost-color-active: var(--tds-white);
-  --tds-btn-ghost-border-color-active: var(--tds-grey-200);
-  --tds-btn-ghost-background-focus: transparent;
-  --tds-btn-ghost-color-focus: var(--tds-white);
-  --tds-btn-ghost-border-color-focus: var(--tds-white);
-  --tds-btn-ghost-outline-color-focus: var(--tds-blue-300);
-  --tds-btn-ghost-background-disabled: transparent;
-  --tds-btn-ghost-color-disabled: var(--tds-grey-500);
-  --tds-btn-ghost-border-color-disabled: transparent;
-  /* ICON */
-  --tds-btn-icon-ghost-fill: var(--tds-grey-50);
-  --tds-btn-icon-ghost-color: var(--tds-grey-50);
-  --tds-btn-danger-background: var(--scania-extended-red-400);
-  --tds-btn-danger-color: var(--tds-white);
-  --tds-btn-danger-border-color: transparent;
-  --tds-btn-danger-background-hover: var(--scania-extended-red-500);
-  --tds-btn-danger-color-hover: var(--tds-white);
-  --tds-btn-danger-border-color-hover: var(--tds-white);
-  --tds-btn-danger-background-active: var(--scania-extended-red-600);
-  --tds-btn-danger-color-active: var(--tds-white);
-  --tds-btn-danger-border-color-active: transparent;
-  --tds-btn-danger-background-focus: var(--scania-extended-red-500);
-  --tds-btn-danger-color-focus: var(--tds-white);
-  --tds-btn-danger-border-color-focus: var(--tds-white);
-  --tds-btn-danger-outline-color-focus: var(--tds-blue-300);
-  --tds-btn-danger-background-disabled-primary: var(--tds-grey-900);
-  --tds-btn-danger-background-disabled-secondary: var(--tds-grey-850);
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-danger-color-disabled: var(--tds-grey-500);
-  --tds-btn-danger-border-color-disabled: transparent;
-  /* ICON */
-  --tds-btn-icon-danger-fill: var(--tds-white);
-  --tds-btn-icon-danger-color: var(--tds-white);
-}
-.tds-mode-dark .tds-mode-variant-primary {
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-primary);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-primary);
-}
-.tds-mode-dark .tds-mode-variant-secondary {
-  --tds-btn-danger-background-disabled: var(--tds-btn-danger-background-disabled-secondary);
-  --tds-btn-primary-background-disabled: var(--tds-btn-primary-background-disabled-secondary);
+tds-button {
+  --tds-btn-border-radius: calc(var(--component-button-border-radius-default) * 1px);
+  --tds-btn-opacity-disabled: calc(var(--component-button-opacity-disabled) / 100);
+  --tds-btn-primary-background: var(--component-button-background-standard-primary-default);
+  --tds-btn-primary-background-hover: var(--component-button-background-standard-primary-hover);
+  --tds-btn-primary-background-active: var(--component-button-background-standard-primary-active);
+  --tds-btn-primary-background-focus: var(--component-button-background-standard-primary-default);
+  --tds-btn-primary-color: var(--component-button-text-standard-primary-default);
+  --tds-btn-primary-color-hover: var(--component-button-text-standard-primary-hover);
+  --tds-btn-primary-color-active: var(--component-button-text-standard-primary-active);
+  --tds-btn-primary-color-focus: var(--component-button-text-standard-primary-hover);
+  --tds-btn-primary-border-color: var(--component-button-border-standard-primary-default);
+  --tds-btn-primary-border-color-hover: var(--component-button-border-standard-primary-hover);
+  --tds-btn-primary-border-color-active: var(--component-button-border-standard-primary-active);
+  --tds-btn-primary-border-color-focus: var(--component-button-border-standard-primary-hover);
+  --tds-btn-primary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-icon-primary-fill: var(--component-button-icon-standard-primary-default);
+  --tds-btn-icon-primary-color: var(--component-button-icon-standard-primary-default);
+  --tds-btn-icon-primary-fill-hover: var(--component-button-icon-standard-primary-hover);
+  --tds-btn-icon-primary-color-hover: var(--component-button-icon-standard-primary-hover);
+  --tds-btn-icon-primary-fill-active: var(--component-button-icon-standard-primary-active);
+  --tds-btn-icon-primary-color-active: var(--component-button-icon-standard-primary-active);
+  --tds-btn-icon-primary-fill-focus: var(--component-button-icon-standard-primary-hover);
+  --tds-btn-icon-primary-color-focus: var(--component-button-icon-standard-primary-hover);
+  --tds-btn-secondary-background: var(--component-button-background-standard-secondary-default);
+  --tds-btn-secondary-background-hover: var(--component-button-background-standard-secondary-hover);
+  --tds-btn-secondary-background-active: var(
+    --component-button-background-standard-secondary-active
+  );
+  --tds-btn-secondary-background-focus: var(
+    --component-button-background-standard-secondary-default
+  );
+  --tds-btn-secondary-color: var(--component-button-text-standard-secondary-default);
+  --tds-btn-secondary-color-hover: var(--component-button-text-standard-secondary-hover);
+  --tds-btn-secondary-color-active: var(--component-button-text-standard-secondary-active);
+  --tds-btn-secondary-color-focus: var(--component-button-text-standard-secondary-hover);
+  --tds-btn-secondary-border-color: var(--component-button-border-standard-secondary-default);
+  --tds-btn-secondary-border-color-hover: var(--component-button-border-standard-secondary-hover);
+  --tds-btn-secondary-border-color-active: var(--component-button-border-standard-secondary-active);
+  --tds-btn-secondary-border-color-focus: var(--component-button-border-standard-secondary-hover);
+  --tds-btn-secondary-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-icon-secondary-fill: var(--component-button-icon-standard-secondary-default);
+  --tds-btn-icon-secondary-color: var(--component-button-icon-standard-secondary-default);
+  --tds-btn-icon-secondary-fill-hover: var(--component-button-icon-standard-secondary-hover);
+  --tds-btn-icon-secondary-color-hover: var(--component-button-icon-standard-secondary-hover);
+  --tds-btn-icon-secondary-fill-active: var(--component-button-icon-standard-secondary-active);
+  --tds-btn-icon-secondary-color-active: var(--component-button-icon-standard-secondary-active);
+  --tds-btn-icon-secondary-fill-focus: var(--component-button-icon-standard-secondary-hover);
+  --tds-btn-icon-secondary-color-focus: var(--component-button-icon-standard-secondary-hover);
+  --tds-btn-ghost-background: var(--component-button-background-standard-tertiary-default);
+  --tds-btn-ghost-background-hover: var(--component-button-background-standard-tertiary-hover);
+  --tds-btn-ghost-background-active: var(--component-button-background-standard-tertiary-active);
+  --tds-btn-ghost-background-focus: var(--component-button-background-standard-tertiary-default);
+  --tds-btn-ghost-color: var(--component-button-text-standard-tertiary-default);
+  --tds-btn-ghost-color-hover: var(--component-button-text-standard-tertiary-hover);
+  --tds-btn-ghost-color-active: var(--component-button-text-standard-tertiary-active);
+  --tds-btn-ghost-color-focus: var(--component-button-text-standard-tertiary-hover);
+  --tds-btn-ghost-border-color: var(--component-button-border-standard-tertiary-default);
+  --tds-btn-ghost-border-color-hover: var(--component-button-border-standard-tertiary-hover);
+  --tds-btn-ghost-border-color-active: var(--component-button-border-standard-tertiary-active);
+  --tds-btn-ghost-border-color-focus: var(--component-button-border-standard-tertiary-hover);
+  --tds-btn-ghost-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-icon-ghost-fill: var(--component-button-icon-standard-tertiary-default);
+  --tds-btn-icon-ghost-color: var(--component-button-icon-standard-tertiary-default);
+  --tds-btn-icon-ghost-fill-hover: var(--component-button-icon-standard-tertiary-hover);
+  --tds-btn-icon-ghost-color-hover: var(--component-button-icon-standard-tertiary-hover);
+  --tds-btn-icon-ghost-fill-active: var(--component-button-icon-standard-tertiary-active);
+  --tds-btn-icon-ghost-color-active: var(--component-button-icon-standard-tertiary-active);
+  --tds-btn-icon-ghost-fill-focus: var(--component-button-icon-standard-tertiary-hover);
+  --tds-btn-icon-ghost-color-focus: var(--component-button-icon-standard-tertiary-hover);
+  --tds-btn-danger-background: var(--component-button-background-danger-primary-default);
+  --tds-btn-danger-background-hover: var(--component-button-background-danger-primary-hover);
+  --tds-btn-danger-background-active: var(--component-button-background-danger-primary-active);
+  --tds-btn-danger-background-focus: var(--component-button-background-danger-primary-default);
+  --tds-btn-danger-color: var(--component-button-text-danger-primary-default);
+  --tds-btn-danger-color-hover: var(--component-button-text-danger-primary-hover);
+  --tds-btn-danger-color-active: var(--component-button-text-danger-primary-active);
+  --tds-btn-danger-color-focus: var(--component-button-text-danger-primary-hover);
+  --tds-btn-danger-border-color: var(--component-button-border-danger-primary-default);
+  --tds-btn-danger-border-color-hover: var(--component-button-border-danger-primary-hover);
+  --tds-btn-danger-border-color-active: var(--component-button-border-danger-primary-active);
+  --tds-btn-danger-border-color-focus: var(--component-button-border-danger-primary-hover);
+  --tds-btn-danger-outline-color-focus: var(--tds-focus-outline-color);
+  --tds-btn-icon-danger-fill: var(--component-button-icon-danger-primary-default);
+  --tds-btn-icon-danger-color: var(--component-button-icon-danger-primary-default);
+  --tds-btn-icon-danger-fill-hover: var(--component-button-icon-danger-primary-hover);
+  --tds-btn-icon-danger-color-hover: var(--component-button-icon-danger-primary-hover);
+  --tds-btn-icon-danger-fill-active: var(--component-button-icon-danger-primary-active);
+  --tds-btn-icon-danger-color-active: var(--component-button-icon-danger-primary-active);
+  --tds-btn-icon-danger-fill-focus: var(--component-button-icon-danger-primary-hover);
+  --tds-btn-icon-danger-color-focus: var(--component-button-icon-danger-primary-hover);
 }
 
+/* Typography Usage mixins */
 button {
   box-sizing: border-box;
-  font: var(--tds-detail-02);
-  letter-spacing: var(--tds-detail-02-ls);
+  font-family: var(--detail-02-font-family);
+  font-size: var(--detail-02-font-size);
+  line-height: var(--detail-02-line-height);
+  font-weight: var(--detail-02-font-weight);
+  letter-spacing: var(--detail-02-letter-spacing);
+  text-transform: var(--detail-02-text-transform);
   display: inline-flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: var(--tds-btn-border-radius);
   border: none;
   box-shadow: none;
   position: relative;
@@ -211,7 +116,7 @@ button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: 1px solid var(--scania-blue-400);
+  outline: 1px solid var(--tds-focus-outline-color);
 }
 button:focus-visible {
   outline: 2px solid var(--tds-focus-outline-color);
@@ -223,7 +128,7 @@ button.xs {
   padding: var(--tds-spacing-element-4) var(--tds-spacing-element-8);
   height: 24px;
   font-size: 12px;
-  border-radius: 2px;
+  border-radius: var(--tds-btn-border-radius);
 }
 button.sm {
   padding: var(--tds-spacing-element-12);
@@ -312,10 +217,7 @@ button.primary:active:not(.disabled) ::slotted([slot=icon]), button.primary.acti
   color: var(--tds-btn-icon-primary-color-active);
 }
 button.primary.disabled, button.primary:disabled {
-  background: var(--tds-btn-primary-background-disabled);
-  border-color: var(--tds-btn-primary-border-color-disabled);
-  color: var(--tds-btn-primary-color-disabled);
-  outline-color: var(--tds-btn-primary-outline-color-disabled);
+  opacity: var(--tds-btn-opacity-disabled);
 }
 button.secondary {
   background: var(--tds-btn-secondary-background);
@@ -366,10 +268,7 @@ button.secondary:active:not(.disabled) ::slotted([slot=icon]), button.secondary.
   color: var(--tds-btn-icon-secondary-color-active);
 }
 button.secondary.disabled, button.secondary:disabled {
-  background: var(--tds-btn-secondary-background-disabled);
-  border-color: var(--tds-btn-secondary-border-color-disabled);
-  color: var(--tds-btn-secondary-color-disabled);
-  outline-color: var(--tds-btn-secondary-outline-color-disabled);
+  opacity: var(--tds-btn-opacity-disabled);
 }
 button.ghost {
   background: var(--tds-btn-ghost-background);
@@ -420,10 +319,7 @@ button.ghost:active:not(.disabled) ::slotted([slot=icon]), button.ghost.active:n
   color: var(--tds-btn-icon-ghost-color-active);
 }
 button.ghost.disabled, button.ghost:disabled {
-  background: var(--tds-btn-ghost-background-disabled);
-  border-color: var(--tds-btn-ghost-border-color-disabled);
-  color: var(--tds-btn-ghost-color-disabled);
-  outline-color: var(--tds-btn-ghost-outline-color-disabled);
+  opacity: var(--tds-btn-opacity-disabled);
 }
 button.danger {
   background: var(--tds-btn-danger-background);
@@ -474,10 +370,7 @@ button.danger:active:not(.disabled) ::slotted([slot=icon]), button.danger.active
   color: var(--tds-btn-icon-danger-color-active);
 }
 button.danger.disabled, button.danger:disabled {
-  background: var(--tds-btn-danger-background-disabled);
-  border-color: var(--tds-btn-danger-border-color-disabled);
-  color: var(--tds-btn-danger-color-disabled);
-  outline-color: var(--tds-btn-danger-outline-color-disabled);
+  opacity: var(--tds-btn-opacity-disabled);
 }
 
 :host(tds-button) {