@scania/tegel 1.52.0 → 1.53.0-focus-ring-beta.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(--component--focus-ring-color-strong);
+  --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(--component--focus-ring-color-strong);
+  --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(--component--focus-ring-color-strong);
+  --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(--component--focus-ring-color-strong);
+  --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,11 +116,11 @@ button * {
   box-sizing: border-box;
 }
 button:focus {
-  outline: 1px solid var(--scania-blue-400);
+  outline: 1px solid var(--component--focus-ring-color-strong);
 }
 button:focus-visible {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -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) {

package/dist/collection/components/chip/chip.css

@@ -77,8 +77,8 @@
   z-index: -1;
 }
 .tds-chip-component input:focus-visible + label {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   background-color: var(--tds-chips-background-focus);

package/dist/collection/components/datetime/datetime.css

@@ -198,8 +198,8 @@
 .tds-datetime-focus .tds-datetime-input-md,
 .tds-datetime-focus .tds-datetime-input-sm {
   border-radius: 0;
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
   z-index: 1;
 }

package/dist/collection/components/dropdown/dropdown-option/dropdown-option.css

@@ -21,8 +21,8 @@
   color: var(--tds-dropdown-option-color-disabled);
 }
 :host .dropdown-option button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: inset 0 0 0 3px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
   outline-offset: -2px;
 }
 :host .dropdown-option button {

package/dist/collection/components/dropdown/dropdown.css

@@ -63,8 +63,8 @@
 }
 
 :host .dropdown-select:focus-within {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
 }
@@ -202,8 +202,8 @@ body {
   position: relative;
 }
 :host .dropdown-select button:focus {
-  outline: 2px solid var(--tds-focus-outline-color);
-  box-shadow: 0 0 0 1px var(--tds-white);
+  outline: 2px solid var(--component--focus-ring-color-strong);
+  box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
   outline-offset: 1px;
   z-index: 1;
   border-radius: 0;