@navikt/ds-css 1.5.9 → 2.0.0-next.1

package/form/confirmation-panel.css

@@ -1,21 +1,11 @@
-:root,
-:host {
-  --navds-confirmation-panel-color-background: var(--navds-global-color-orange-50);
-  --navds-confirmation-panel-color-background-checked: var(--navds-global-color-green-50);
-  --navds-confirmation-panel-color-background-error: var(--navds-global-color-red-50);
-  --navds-confirmation-panel-color-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-confirmation-panel-color-border-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-confirmation-panel-color-border-error: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-confirmation-panel__inner {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding: var(--navds-spacing-4);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-confirmation-panel-color-border);
-  background-color: var(--navds-confirmation-panel-color-background);
+  gap: var(--a-spacing-3);
+  padding: var(--a-spacing-4);
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-confirmation-panel-border, var(--a-border-warning));
+  background-color: var(--ac-confirmation-panel-bg, var(--a-surface-warning-subtle));
   transition: background-color linear 100ms;
   justify-self: stretch;
 }
@@ -25,11 +15,11 @@
 }
 
 .navds-confirmation-panel--checked .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-checked);
-  border-color: var(--navds-confirmation-panel-color-border-checked);
+  border-color: var(--ac-confirmation-panel-checked-border, var(--a-border-success));
+  background-color: var(--ac-confirmation-panel-checked-bg, var(--a-surface-success-subtle));
 }
 
 .navds-confirmation-panel--error .navds-confirmation-panel__inner {
-  background-color: var(--navds-confirmation-panel-color-background-error);
-  border-color: var(--navds-confirmation-panel-color-border-error);
+  border-color: var(--ac-confirmation-panel-error-border, var(--a-border-danger));
+  background-color: var(--ac-confirmation-panel-error-bg, var(--a-surface-danger-subtle));
 }

package/form/error-summary.css

@@ -1,39 +1,33 @@
-:root,
-:host {
-  --navds-error-summary-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-error-summary-color-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-error-summary {
-  background-color: var(--navds-error-summary-color-background);
-  padding: var(--navds-spacing-5);
-  border: 4px solid var(--navds-error-summary-color-border);
+  background-color: var(--ac-error-summary-bg, var(--a-surface-default));
+  padding: var(--a-spacing-5);
+  border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
 }
 
 .navds-error-summary--small {
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
 }
 
 .navds-error-summary:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 .navds-error-summary__list {
-  margin: var(--navds-spacing-3) 0;
+  margin: var(--a-spacing-3) 0;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
-  padding-left: var(--navds-spacing-6);
+  gap: var(--a-spacing-3);
+  padding-left: var(--a-spacing-6);
   list-style: inherit;
 }
 
 .navds-error-summary__list > * {
-  color: var(--navds-global-color-blue-500);
+  color: var(--a-blue-500);
 }
 
 .navds-error-summary--small > .navds-error-summary__list {
-  margin: var(--navds-spacing-2) 0;
-  gap: var(--navds-spacing-2);
-  padding-left: var(--navds-spacing-5);
+  margin: var(--a-spacing-2) 0;
+  gap: var(--a-spacing-2);
+  padding-left: var(--a-spacing-5);
 }

package/form/fieldset.css

@@ -6,11 +6,11 @@
 }
 
 .navds-fieldset > :not(:first-child):not(:empty) {
-  margin-top: var(--navds-spacing-2);
+  margin-top: var(--a-spacing-2);
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {
-  margin-top: var(--navds-spacing-1);
+  margin-top: var(--a-spacing-1);
 }
 
 /* Applied when hideLegend is applied to fieldset */

package/form/form.css

@@ -1,7 +1,7 @@
 .navds-form-field {
   display: grid;
   justify-items: start;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-form-field__description {
@@ -11,7 +11,7 @@
 .navds-form-field .navds-error-message,
 .navds-fieldset .navds-error-message {
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-form-field .navds-error-message::before,

package/form/radio-checkbox.css

@@ -1,16 +1,3 @@
-:root,
-:host {
-  --navds-radio-checkbox-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
-  --navds-radio-checkbox-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-radio-checkbox-color-background-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow: var(--navds-semantic-color-border);
-  --navds-radio-checkbox-color-shadow-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-checked: var(--navds-semantic-color-interaction-primary);
-  --navds-radio-checkbox-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-radio-checkbox-color-label-hover: var(--navds-semantic-color-interaction-primary);
-}
-
 .navds-checkbox,
 .navds-radio {
   position: relative;
@@ -31,32 +18,32 @@
 
 .navds-checkbox__label,
 .navds-radio__label {
-  padding: var(--navds-spacing-3) 0;
+  padding: var(--a-spacing-3) 0;
   cursor: pointer;
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-checkbox__label::before,
 .navds-radio__label::before {
   content: "";
-  background-color: var(--navds-radio-checkbox-color-background);
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong));
   width: 1.5rem;
   height: 1.5rem;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   flex-shrink: 0;
 }
 
 .navds-radio__label::before {
-  border-radius: var(--navds-border-radius-full);
+  border-radius: var(--a-border-radius-full);
 }
 
 .navds-checkbox__content,
 .navds-radio__content {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-checkbox--small > .navds-checkbox__input,
@@ -80,17 +67,17 @@
 
 .navds-checkbox__input:focus + .navds-checkbox__label::before,
 .navds-radio__input:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-border, var(--a-border-strong)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
 .navds-radio__input:hover:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::before {
   box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:indeterminate + .navds-checkbox__label::after {
@@ -98,7 +85,7 @@
   position: absolute;
   top: 50%;
   transform: translate(0.375rem, -50%);
-  background-color: var(--navds-radio-checkbox-color-background);
+  background-color: var(--ac-radio-checkbox-bg, var(--a-surface-default));
   width: 0.75rem;
   height: 0.25rem;
   border-radius: 1px; /* Custom value OK */
@@ -115,7 +102,7 @@
   background-repeat: no-repeat;
   background-size: 13px;
   box-shadow: none;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox--small > .navds-checkbox__input:checked + .navds-checkbox__label::before {
@@ -124,31 +111,33 @@
 
 .navds-checkbox__input:indeterminate:focus + .navds-checkbox__label::before,
 .navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
-  box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-radio__input:checked + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff;
-  background-color: var(--navds-radio-checkbox-color-background-checked);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default));
+  background-color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-radio__input:checked:focus + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked), inset 0 0 0 4px #fff, var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action)),
+    inset 0 0 0 4px var(--ac-radio-checkbox-bg, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
 .navds-radio__input:hover:not(:disabled) + .navds-radio__label {
-  color: var(--navds-radio-checkbox-color-label-hover);
+  color: var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked):not(:focus) + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-action, var(--a-surface-action));
 }
 
 .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate) + .navds-checkbox__label::before,
 .navds-radio__input:hover:not(:disabled):not(:checked) + .navds-radio__label::before {
-  background-color: var(--navds-radio-checkbox-color-background-hover);
+  background-color: var(--ac-radio-checkbox-action-hover-bg, var(--a-surface-action-subtle));
 }
 
 .navds-checkbox--error
@@ -157,7 +146,7 @@
 .navds-radio--error
   > .navds-radio__input:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
 }
 
 .navds-checkbox--error
@@ -166,7 +155,27 @@
 .navds-radio--error
   > .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked):not(:indeterminate)
   + .navds-radio__label::before {
-  box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
+  + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger));
+}
+
+.navds-checkbox--error
+  > .navds-checkbox__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-checkbox__label::before,
+.navds-radio--error
+  > .navds-radio__input:focus:hover:not(:disabled):not(:checked):not(:indeterminate)
+  + .navds-radio__label::before {
+  background-color: var(--ac-radio-checkbox-error-hover-bg, var(--a-surface-danger-subtle));
+  box-shadow: inset 0 0 0 2px var(--ac-radio-checkbox-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 .navds-checkbox--disabled,

package/form/search.css

@@ -1,19 +1,9 @@
-:root,
-:host,
-[data-theme="light"] {
-  --navds-search-color-text: var(--navds-semantic-color-text);
-  --navds-search-color-border: var(--navds-semantic-color-border);
-  --navds-search-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-500);
-  --navds-search-color-border-error: var(--navds-global-color-red-500);
-}
-
 [data-theme="dark"] {
-  --navds-search-color-text: var(--navds-semantic-color-text-inverted);
-  --navds-search-color-border: var(--navds-semantic-color-border-inverted);
-  --navds-search-color-border-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-clear-hover: var(--navds-global-color-blue-200);
-  --navds-search-color-border-error: var(--navds-global-color-red-300);
+  --ac-search-button-border: var(--a-border-on-inverted);
+  --ac-search-button-border-hover: var(--a-blue-200);
+  --ac-search-clear-icon: var(--a-white);
+  --ac-search-clear-icon-hover: var(--a-blue-200);
+  --ac-search-error-border: var(--a-red-300);
 }
 
 .navds-search {
@@ -33,19 +23,19 @@
 }
 
 .navds-search__input {
-  padding-right: var(--navds-spacing-10);
+  padding-right: var(--a-spacing-10);
 }
 
 .navds-form-field--small .navds-search__input {
-  padding-right: var(--navds-spacing-8);
+  padding-right: var(--a-spacing-8);
 }
 
 .navds-search__input--simple {
-  padding-left: var(--navds-spacing-11);
+  padding-left: var(--a-spacing-11);
 }
 
 .navds-form-field--small .navds-search__input--simple {
-  padding-left: var(--navds-spacing-7);
+  padding-left: var(--a-spacing-7);
 }
 
 .navds-search__input:not(.navds-search__input--simple) {
@@ -55,7 +45,7 @@
 
 .navds-search__search-icon {
   position: absolute;
-  left: var(--navds-spacing-3);
+  left: var(--a-spacing-3);
   top: 50%;
   transform: translateY(-50%);
   pointer-events: none;
@@ -63,15 +53,15 @@
 }
 
 .navds-form-field--small .navds-search__search-icon {
-  left: var(--navds-spacing-2);
+  left: var(--a-spacing-2);
   font-size: 1rem;
 }
 
 .navds-search__button-clear {
   position: absolute;
   right: 0.75rem;
-  border-radius: var(--navds-border-radius-medium);
-  color: var(--navds-search-color-text);
+  border-radius: var(--a-border-radius-medium);
+  color: var(--ac-search-clear-icon, var(--a-text-default));
   height: 32px;
   width: 32px;
   top: 50%;
@@ -93,11 +83,11 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--navds-search-color-clear-hover);
+  color: var(--ac-search-clear-icon-hover, var(--a-text-action));
 }
 
 .navds-search__button-clear:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
@@ -106,8 +96,8 @@
   min-width: 64px;
   min-height: 32px;
   border-radius: 0;
-  border-top-right-radius: var(--navds-border-radius-medium);
-  border-bottom-right-radius: var(--navds-border-radius-medium);
+  border-top-right-radius: var(--a-border-radius-medium);
+  border-bottom-right-radius: var(--a-border-radius-medium);
 }
 
 .navds-form-field--small .navds-search__button-search svg {
@@ -119,13 +109,16 @@
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border) inset, 0 1px 0 0 var(--navds-search-color-border) inset,
-    0 -1px 0 0 var(--navds-search-color-border) inset;
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
 }
 
 .navds-search__button-search.navds-button--secondary:hover {
-  box-shadow: -1px 0 0 0 var(--navds-search-color-border-hover) inset, 0 1px 0 0 var(--navds-search-color-border-hover) inset,
-    0 -1px 0 0 var(--navds-search-color-border-hover) inset, -1px 0 0 0 var(--navds-search-color-border-hover);
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
   z-index: 1;
 }
 
@@ -134,25 +127,25 @@
 }
 
 .navds-search__button-search.navds-button--secondary:focus {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border) inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus:hover {
-  box-shadow: 0 0 0 1px var(--navds-search-color-border-hover) inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus:active {
-  box-shadow: 0 0 0 1px white inset, var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-focus-active-border, var(--a-surface-default)) inset, var(--a-shadow-focus);
 }
 
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--navds-search-color-border-error);
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error);
+  border-color: var(--ac-search-error-border, var(--a-border-danger));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
 }
 
 .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--navds-search-color-border-error), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
 }
 
 /* Focus layering */

package/form/select.css

@@ -1,19 +1,8 @@
-:root,
-:host {
-  --navds-select-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-select-color-border: var(--navds-semantic-color-border);
-  --navds-select-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-select-color-border-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-shadow-error: var(--navds-semantic-color-interaction-danger);
-  --navds-select-color-border-disabled: var(--navds-global-color-gray-400);
-  --navds-select-color-background-disabled: var(--navds-semantic-color-component-background-alternate);
-}
-
 .navds-select__input {
   appearance: none;
-  background-color: var(--navds-select-color-background);
-  border-radius: var(--navds-border-radius-medium);
-  border: 1px solid var(--navds-select-color-border);
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border-radius: var(--a-border-radius-medium);
+  border: 1px solid var(--ac-select-border, var(--a-border-strong));
   width: 100%;
   box-sizing: border-box;
   min-height: 48px;
@@ -24,12 +13,12 @@
 }
 
 .navds-select__input:hover {
-  border-color: var(--navds-select-color-border-hover);
+  border-color: var(--ac-select-hover-bg, var(--a-border-action));
 }
 
 .navds-select__input:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-select__container {
@@ -37,7 +26,7 @@
   display: flex;
   width: 100%;
   align-items: center;
-  color: var(--navds-semantic-color-text);
+  color: var(--a-text-default);
 }
 
 .navds-select__chevron {
@@ -57,13 +46,13 @@
   Error handling
 */
 .navds-select--error > * select:not(:hover):not(:focus):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--navds-select-color-shadow-error);
-  border-color: var(--navds-select-color-border-error);
+  box-shadow: 0 0 0 1px var(--ac-select-error-border, var(--a-surface-danger));
+  border-color: var(--ac-select-error-border, var(--a-surface-danger));
 }
 
 .navds-select__input:disabled {
-  background-color: var(--navds-select-color-background);
-  border-color: var(--navds-select-color-border);
+  background-color: var(--ac-select-bg, var(--a-surface-default));
+  border: 1px solid var(--ac-select-border, var(--a-border-strong));
   box-shadow: none;
   cursor: not-allowed;
 }

package/form/switch.css

@@ -1,18 +1,3 @@
-:root,
-:host {
-  --navds-switch-color-label: var(--navds-semantic-color-text);
-  --navds-switch-color-label-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-switch-color-track-background: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-track-background-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-track-background-hover: var(--navds-global-color-gray-800);
-  --navds-switch-color-track-background-hover-checked: var(--navds-semantic-color-feedback-success-icon);
-  --navds-switch-color-track-shadow-inner-focus: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb: var(--navds-semantic-color-component-background-light);
-  --navds-switch-color-thumb-icon: var(--navds-semantic-color-text-muted);
-  --navds-switch-color-thumb-icon-checked: var(--navds-semantic-color-feedback-success-border);
-  --navds-switch-color-thumb-loader-checked: var(--navds-semantic-color-feedback-success-border);
-}
-
 .navds-switch {
   position: relative;
   min-height: 48px;
@@ -47,13 +32,13 @@
 /* Label */
 .navds-switch__label-wrapper {
   cursor: pointer;
-  color: var(--navds-switch-color-label);
+  color: var(--a-text-default);
 }
 
 .navds-switch__content {
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
   padding: 0.75rem 0 0.75rem 3.25rem;
 }
 
@@ -62,11 +47,11 @@
 }
 
 .navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 0 calc(var(--navds-spacing-2) - 2px) 3.25rem;
+  padding: calc(var(--a-spacing-2) - 2px) 0 calc(var(--a-spacing-2) - 2px) 3.25rem;
 }
 
 .navds-switch--right.navds-switch--small > .navds-switch__label-wrapper > .navds-switch__content {
-  padding: calc(var(--navds-spacing-2) - 2px) 3.25rem calc(var(--navds-spacing-2) - 2px) 0;
+  padding: calc(var(--a-spacing-2) - 2px) 3.25rem calc(var(--a-spacing-2) - 2px) 0;
 }
 
 .navds-switch--with-description,
@@ -76,7 +61,7 @@
 
 .navds-switch__input:hover ~ .navds-switch__label-wrapper,
 .navds-switch__label-wrapper:hover {
-  color: var(--navds-switch-color-label-hover);
+  color: var(--ac-switch-action, var(--a-surface-action));
 }
 
 .navds-switch__input:disabled:hover ~ .navds-switch__label-wrapper {
@@ -87,16 +72,16 @@
 .navds-switch__track {
   width: 44px;
   height: 24px;
-  background-color: var(--navds-switch-color-track-background);
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
   position: absolute;
-  top: var(--navds-spacing-3);
+  top: var(--a-spacing-3);
   left: 0;
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .navds-switch--small > .navds-switch__track {
-  top: var(--navds-spacing-1);
+  top: var(--a-spacing-1);
 }
 
 .navds-switch--right > .navds-switch__input,
@@ -106,34 +91,34 @@
 }
 
 .navds-switch__input:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
+  background-color: var(--ac-switch-checked-bg, var(--a-surface-success));
 }
 
 .navds-switch__input:hover ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover);
+  background-color: var(--ac-switch-hover-bg, var(--a-surface-neutral-hover));
 }
 
 .navds-switch__input:hover:checked ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-hover-checked);
+  background-color: var(--ac-switch-checked-hover-bg, var(--a-surface-success-hover));
 }
 
 .navds-switch__input:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background);
+  background-color: var(--ac-switch-bg, var(--a-surface-neutral));
 }
 
 .navds-switch__input:checked:disabled ~ .navds-switch__track {
-  background-color: var(--navds-switch-color-track-background-checked);
+  background-color: var(--ac-switch-checked-bg, var(--a-border-success));
 }
 
 .navds-switch__input:focus ~ .navds-switch__track {
-  box-shadow: 0 0 0 1px var(--navds-switch-color-track-shadow-inner-focus), var(--navds-shadow-focus);
+  box-shadow: 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 /* Thumb */
 .navds-switch__thumb {
-  background-color: var(--navds-switch-color-thumb);
-  color: var(--navds-switch-color-thumb-icon);
-  border-radius: var(--navds-border-radius-small);
+  background-color: var(--ac-switch-thumb-bg, var(--a-surface-default));
+  color: var(--ac-switch-thumb-icon, var(--a-icon-subtle));
+  border-radius: var(--a-border-radius-small);
   width: 20px;
   height: 20px;
   position: absolute;
@@ -148,7 +133,7 @@
 
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
   transform: translateX(20px);
-  color: var(--navds-switch-color-thumb-icon-checked);
+  color: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -171,7 +156,7 @@
 
 /* Loader */
 .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb .navds-loader__foreground {
-  stroke: var(--navds-switch-color-thumb-loader-checked);
+  stroke: var(--ac-switch-thumb-icon-checked, var(--a-icon-success));
 }
 
 /* Disabled */