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

package/tag.css

@@ -1,24 +1,10 @@
-:root,
-:host {
-  --navds-tag-color-border: var(--navds-semantic-color-border-muted);
-  --navds-tag-color-background: var(--navds-semantic-color-component-background-alternate);
-  --navds-tag-color-info-background: var(--navds-semantic-color-feedback-info-background);
-  --navds-tag-color-info-border: var(--navds-semantic-color-feedback-info-border);
-  --navds-tag-color-warning-background: var(--navds-semantic-color-feedback-warning-background);
-  --navds-tag-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-tag-color-success-background: var(--navds-semantic-color-feedback-success-background);
-  --navds-tag-color-success-border: var(--navds-semantic-color-feedback-success-border);
-  --navds-tag-color-error-background: var(--navds-semantic-color-feedback-danger-background);
-  --navds-tag-color-error-border: var(--navds-semantic-color-feedback-danger-border);
-}
-
 .navds-tag {
   border: 1px solid;
-  border-radius: var(--navds-border-radius-small);
+  border-radius: var(--a-border-radius-small);
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: 0.125rem var(--navds-spacing-2);
+  padding: var(--a-spacing-05) var(--a-spacing-2);
   min-height: 32px;
   line-height: 1;
 }
@@ -30,101 +16,101 @@
 
 .navds-tag--xsmall {
   min-height: 20px;
-  padding: 0 var(--navds-spacing-1);
+  padding: 0 var(--a-spacing-1);
 }
 
 .navds-tag--error {
-  border-color: var(--ac-tag-error-border, var(--navds-global-color-red-500));
-  background-color: var(--ac-tag-error-bg, var(--navds-global-color-red-50));
-  color: var(--ac-tag-error-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-error-border, var(--a-border-danger));
+  background-color: var(--ac-tag-error-bg, var(--a-surface-danger-subtle));
+  color: var(--ac-tag-error-text, var(--a-text-default));
 }
 
 .navds-tag--error-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-error-filled-bg, var(--navds-global-color-red-500));
-  color: var(--ac-tag-error-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-error-filled-bg, var(--a-surface-danger));
+  color: var(--ac-tag-error-filled-text, var(--a-text-on-danger));
 }
 
 .navds-tag--success {
-  border-color: var(--ac-tag-success-border, var(--navds-global-color-green-500));
-  background-color: var(--ac-tag-success-bg, var(--navds-global-color-green-50));
-  color: var(--ac-tag-success-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-success-border, var(--a-border-success));
+  background-color: var(--ac-tag-success-bg, var(--a-surface-success-subtle));
+  color: var(--ac-tag-success-text, var(--a-text-default));
 }
 
 .navds-tag--success-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-success-filled-bg, var(--navds-global-color-green-500));
-  color: var(--ac-tag-success-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-success-filled-bg, var(--a-surface-success));
+  color: var(--ac-tag-success-filled-text, var(--a-text-on-success));
 }
 
 .navds-tag--warning {
-  border-color: var(--ac-tag-warning-border, var(--navds-global-color-orange-600));
-  background-color: var(--ac-tag-warning-bg, var(--navds-global-color-orange-50));
-  color: var(--ac-tag-warning-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-warning-border, var(--a-border-warning));
+  background-color: var(--ac-tag-warning-bg, var(--a-surface-warning-subtle));
+  color: var(--ac-tag-warning-text, var(--a-text-default));
 }
 
 .navds-tag--warning-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-warning-filled-bg, var(--navds-global-color-orange-500));
-  color: var(--ac-tag-warning-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-warning-filled-bg, var(--a-surface-warning));
+  color: var(--ac-tag-warning-filled-text, var(--a-text-on-warning));
 }
 
 .navds-tag--info {
-  border-color: var(--ac-tag-info-border, var(--navds-global-color-lightblue-700));
-  background-color: var(--ac-tag-info-bg, var(--navds-global-color-lightblue-50));
-  color: var(--ac-tag-info-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-info-border, var(--a-border-info));
+  background-color: var(--ac-tag-info-bg, var(--a-surface-info-subtle));
+  color: var(--ac-tag-info-text, var(--a-text-default));
 }
 
 .navds-tag--info-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-info-filled-bg, var(--navds-global-color-lightblue-500));
-  color: var(--ac-tag-info-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-info-filled-bg, var(--a-surface-info));
+  color: var(--ac-tag-info-filled-text, var(--a-text-on-info));
 }
 
 .navds-tag--neutral {
-  border-color: var(--ac-tag-neutral-border, var(--navds-global-color-gray-500));
-  background-color: var(--ac-tag-neutral-bg, var(--navds-global-color-gray-100));
-  color: var(--ac-tag-neutral-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-neutral-border, var(--a-border-default));
+  background-color: var(--ac-tag-neutral-bg, var(--a-surface-neutral-subtle));
+  color: var(--ac-tag-neutral-text, var(--a-text-default));
 }
 
 .navds-tag--neutral-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-neutral-filled-bg, var(--navds-global-color-gray-800));
-  color: var(--ac-tag-neutral-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-neutral-filled-bg, var(--a-surface-neutral));
+  color: var(--ac-tag-neutral-filled-text, var(--a-text-on-neutral));
 }
 
 .navds-tag--alt1 {
-  border-color: var(--ac-tag-alt1-border, var(--navds-global-color-purple-400));
-  background-color: var(--ac-tag-alt1-bg, var(--navds-global-color-purple-100));
-  color: var(--ac-tag-alt1-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-1-border, var(--a-border-alt-1));
+  background-color: var(--ac-tag-alt-1-bg, var(--a-surface-alt-1-subtle));
+  color: var(--ac-tag-alt-1-text, var(--a-text-default));
 }
 
 .navds-tag--alt1-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt1-filled-bg, var(--navds-global-color-purple-400));
-  color: var(--ac-tag-alt1-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-alt-1-filled-bg, var(--a-surface-alt-1));
+  color: var(--ac-tag-alt-1-filled-text, var(--a-text-on-alt-1));
 }
 
 .navds-tag--alt2 {
-  border-color: var(--ac-tag-alt2-border, var(--navds-global-color-limegreen-500));
-  background-color: var(--ac-tag-alt2-bg, var(--navds-global-color-limegreen-100));
-  color: var(--ac-tag-alt2-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-2-border, var(--a-border-alt-2));
+  background-color: var(--ac-tag-alt-2-bg, var(--a-surface-alt-2-subtle));
+  color: var(--ac-tag-alt-2-text, var(--a-text-default));
 }
 
 .navds-tag--alt2-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt2-filled-bg, var(--navds-global-color-limegreen-400));
-  color: var(--ac-tag-alt2-filled-text, var(--navds-global-color-gray-900));
+  background-color: var(--ac-tag-alt-2-filled-bg, var(--a-surface-alt-2));
+  color: var(--ac-tag-alt-2-filled-text, var(--a-text-on-alt-2));
 }
 
 .navds-tag--alt3 {
-  border-color: var(--ac-tag-alt3-border, var(--navds-global-color-deepblue-400));
-  background-color: var(--ac-tag-alt3-bg, var(--navds-global-color-deepblue-100));
-  color: var(--ac-tag-alt3-text, var(--navds-global-color-gray-900));
+  border-color: var(--ac-tag-alt-3-border, var(--a-border-alt-3));
+  background-color: var(--ac-tag-alt-3-bg, var(--a-surface-alt-3-subtle));
+  color: var(--ac-tag-alt-3-text, var(--a-text-default));
 }
 
 .navds-tag--alt3-filled {
   border-color: transparent;
-  background-color: var(--ac-tag-alt3-filled-bg, var(--navds-global-color-deepblue-500));
-  color: var(--ac-tag-alt3-filled-text, var(--navds-global-color-white));
+  background-color: var(--ac-tag-alt-3-filled-bg, var(--a-surface-alt-3));
+  color: var(--ac-tag-alt-3-filled-text, var(--a-text-on-alt-3));
 }

package/toggle-group.css

@@ -1,26 +1,15 @@
-:root,
-:host {
-  --navds-toggle-group-color-background: var(--navds-semantic-color-component-background-light);
-  --navds-toggle-group-color-text: var(--navds-semantic-color-text);
-  --navds-toggle-group-color-border: var(--navds-semantic-color-divider);
-  --navds-toggle-group-color-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-toggle-group-color-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-toggle-group-color-background-pressed: var(--navds-semantic-color-interaction-primary-selected);
-  --navds-toggle-group-color-text-pressed: var(--navds-semantic-color-text-inverted);
-}
-
 .navds-toggle-group__wrapper {
   display: grid;
   justify-items: start;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-toggle-group {
-  border-radius: 7px; /* Custom value OK */
-  background-color: var(--navds-toggle-group-color-background);
-  box-shadow: inset 0 0 0 1px var(--navds-toggle-group-color-border);
-  padding: calc(var(--navds-spacing-1) + 1px);
-  gap: var(--navds-spacing-1);
+  border-radius: 9px;
+  background-color: var(--ac-toggle-group-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 1px var(--ac-toggle-group-border, var(--a-border-default));
+  padding: calc(var(--a-spacing-1) + 1px);
+  gap: var(--a-spacing-1);
   display: inline-grid;
   grid-auto-flow: column;
   grid-auto-columns: 1fr;
@@ -30,34 +19,34 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
   min-height: 48px;
   border: none;
   cursor: pointer;
-  background-color: var(--navds-toggle-group-color-background);
-  color: var(--navds-toggle-group-color-text);
-  border-radius: var(--navds-border-radius-small);
+  background-color: var(--ac-toggle-group-button-bg, var(--a-surface-default));
+  color: var(--ac-toggle-group-button-text, var(--a-text-default));
+  border-radius: var(--a-border-radius-medium);
   min-width: fit-content;
 }
 
 .navds-toggle-group__button:hover {
-  background-color: var(--navds-toggle-group-color-background-hover);
-  color: var(--navds-toggle-group-color-text-hover);
+  background-color: var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle));
+  color: var(--ac-toggle-group-button-hover-text, var(--a-text-action-on-action-subtle));
 }
 
 .navds-toggle-group__button:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background), 0 0 0 4px var(--navds-semantic-color-focus);
+  box-shadow: 0 0 0 1px var(--a-surface-default), 0 0 0 4px var(--a-border-focus);
 }
 
 .navds-toggle-group__button:focus:hover[aria-pressed="false"] {
-  box-shadow: 0 0 0 1px var(--navds-toggle-group-color-background-hover), 0 0 0 4px var(--navds-semantic-color-focus);
+  box-shadow: 0 0 0 1px var(--ac-toggle-group-button-hover-bg, var(--a-surface-action-subtle)), 0 0 0 4px var(--a-border-focus);
 }
 
 .navds-toggle-group__button-inner {
   display: flex;
   align-items: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-toggle-group__button-inner > * {
@@ -66,8 +55,8 @@
 
 .navds-toggle-group__button[aria-pressed="true"],
 .navds-toggle-group__button[aria-checked="true"] {
-  background-color: var(--navds-toggle-group-color-background-pressed);
-  color: var(--navds-toggle-group-color-text-pressed);
+  background-color: var(--ac-toggle-group-selected-bg, var(--a-surface-action-selected));
+  color: var(--ac-toggle-group-selected-text, var(--a-text-on-action));
 }
 
 .navds-toggle-group--small > .navds-toggle-group__button {

package/tokens.json

@@ -0,0 +1,303 @@
+{
+  "alert": {
+    "--ac-alert-error-border": "--a-border-danger",
+    "--ac-alert-error-bg": "--a-surface-danger-subtle",
+    "--ac-alert-warning-border": "--a-border-warning",
+    "--ac-alert-warning-bg": "--a-surface-warning-subtle",
+    "--ac-alert-info-border": "--a-border-info",
+    "--ac-alert-info-bg": "--a-surface-info-subtle",
+    "--ac-alert-success-border": "--a-border-success",
+    "--ac-alert-success-bg": "--a-surface-success-subtle"
+  },
+  "accordion": {
+    "--ac-accordion-header-text-hover": "--a-text-action-on-action-subtle",
+    "--ac-accordion-header-border-hover": "--a-border-strong-hover",
+    "--ac-accordion-item-bg-open": "--a-surface-action-subtle",
+    "--ac-accordion-item-border-open": "--a-surface-action-subtle",
+    "--ac-accordion-content-border": "--a-border-strong",
+    "--ac-accordion-content-border-open": "--a-border-strong-hover"
+  },
+  "button": {
+    "--ac-button-primary-bg": "--a-surface-action",
+    "--ac-button-primary-text": "--a-text-on-action",
+    "--ac-button-primary-hover-bg": "--a-surface-action-hover",
+    "--ac-button-primary-active-bg": "--a-surface-action-active",
+    "--ac-button-primary-focus-border": "--a-surface-default",
+    "--ac-button-secondary-text": "--a-text-action",
+    "--ac-button-secondary-bg": "--a-surface-default",
+    "--ac-button-secondary-border": "--a-border-action",
+    "--ac-button-secondary-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-button-secondary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-secondary-focus-border": "--a-border-action",
+    "--ac-button-secondary-active-text": "--a-text-on-action",
+    "--ac-button-secondary-active-bg": "--a-surface-action-active",
+    "--ac-button-secondary-active-focus-border": "--a-surface-default",
+    "--ac-button-tertiary-text": "--a-text-action",
+    "--ac-button-tertiary-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-button-tertiary-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-button-tertiary-focus-border": "--a-border-action",
+    "--ac-button-tertiary-active-text": "--a-text-on-action",
+    "--ac-button-tertiary-active-bg": "--a-surface-action-active",
+    "--ac-button-tertiary-active-hover-bg": "--a-surface-action-active",
+    "--ac-button-danger-bg": "--a-surface-danger",
+    "--ac-button-danger-text": "--a-text-on-danger",
+    "--ac-button-danger-hover-bg": "--a-surface-danger-hover",
+    "--ac-button-danger-active-bg": "--a-surface-danger-active",
+    "--ac-button-loader-stroke": "currentColor",
+    "--ac-button-primary-loader-stroke-bg": "rgb(255 255 255 / 0.3)"
+  },
+  "chat": {
+    "--ac-chat-avatar-bg": "--a-bg-subtle",
+    "--ac-chat-avatar-color": "--a-text-default",
+    "--ac-chat-bubble-bg": "--a-bg-subtle",
+    "--ac-chat-top-text": "--a-text-default"
+  },
+  "chips": {
+    "--ac-chip-toggle-border": "--a-border-default",
+    "--ac-chip-toggle-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-toggle-hover-border": "--a-border-strong",
+    "--ac-chip-toggle-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-toggle-pressed-bg": "--a-surface-action-selected",
+    "--ac-chip-toggle-pressed-text": "--a-text-on-action",
+    "--ac-chip-toggle-pressed-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-toggle-focus": "--a-border-focus",
+    "--ac-chip-removable-action-bg": "--a-surface-action-selected",
+    "--ac-chip-removable-action-text": "--a-text-on-action",
+    "--ac-chip-removable-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-chip-removable-neutral-text": "--a-text-default",
+    "--ac-chip-removable-neutral-border": "--a-border-default",
+    "--ac-chip-removable-action-hover-bg": "--a-surface-action-selected-hover",
+    "--ac-chip-removable-neutral-hover-bg": "--a-surface-neutral-subtle-hover",
+    "--ac-chip-removable-neutral-hover-border": "--a-border-strong"
+  },
+  "date": {
+    "--ac-date-middle-text": "--a-text-on-action",
+    "--ac-date-middle-bg": "--a-surface-action-selected",
+    "--ac-date-week-text": "--a-text-on-neutral",
+    "--ac-date-week-bg": "--a-surface-neutral",
+    "--ac-date-selected-text": "--a-text-on-action",
+    "--ac-date-selected-bg": "--a-surface-action-selected",
+    "--ac-date-disabled-bg": "--a-surface-neutral-subtle",
+    "--ac-date-disabled-text": "--a-text-subtle",
+    "--ac-date-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-date-today-border": "--a-border-action-selected",
+    "--ac-date-caption-text": "--a-text-default",
+    "--ac-date-input-error-border": "--a-border-danger",
+    "--ac-date-input-button-text": "--a-text-default"
+  },
+  "guidepanel": {
+    "--ac-guide-panel-bg": "--a-surface-default",
+    "--ac-guide-panel-border": "--a-border-action",
+    "--ac-guide-panel-illustration-bg": "--a-surface-action-subtle"
+  },
+  "helptext": {
+    "--ac-help-text-button-color": "--a-surface-action",
+    "--ac-help-text-popover-bg": "--a-surface-info-subtle"
+  },
+  "linkpanel": {
+    "--ac-link-panel-text": "--a-text-default",
+    "--ac-link-panel-hover-text": "--a-text-action",
+    "--ac-link-panel-hover-border": "--a-border-action"
+  },
+  "link": {
+    "--ac-link-text": "--a-text-action",
+    "--ac-link-focus-text": "--a-text-on-action",
+    "--ac-link-focus-bg": "--a-border-focus",
+    "--ac-link-focus-border": "--a-border-focus",
+    "--ac-link-active-text": "--a-text-on-action",
+    "--ac-link-active-bg": "--a-border-focus",
+    "--ac-link-active-border": "--a-border-focus"
+  },
+  "loader": {
+    "--ac-loader-stroke": "--a-border-default",
+    "--ac-loader-stroke-bg": "--a-surface-active",
+    "--ac-loader-neutral-stroke": "--a-border-default",
+    "--ac-loader-interaction-stroke": "--a-border-action",
+    "--ac-loader-inverted-stroke": "--a-border-on-inverted",
+    "--ac-loader-inverted-stroke-bg": "--a-border-on-inverted-subtle"
+  },
+  "modal": {
+    "--ac-modal-bg": "--a-surface-default",
+    "--ac-modal-backdrop": "--a-surface-backdrop"
+  },
+  "pagination": {
+    "--ac-pagination-text": "--a-text-default",
+    "--ac-pagination-selected-bg": "--a-surface-action-selected",
+    "--ac-pagination-selected-text": "--a-text-on-action"
+  },
+  "panel": {
+    "--ac-panel-bg": "--a-surface-default",
+    "--ac-panel-border": "--a-border-default"
+  },
+  "popover": {
+    "--ac-popover-bg": "--a-surface-default",
+    "--ac-popover-border": "--a-border-default"
+  },
+  "readmore": {
+    "--ac-read-more-text": "--a-text-action",
+    "--ac-read-more-hover-bg": "--a-surface-hover",
+    "--ac-read-more-active-bg": "--a-surface-active",
+    "--ac-read-more-line": "--a-border-divider"
+  },
+  "stepper": {
+    "--ac-stepper-text": "--a-surface-action",
+    "--ac-stepper-line": "--a-border-default",
+    "--ac-stepper-line-completed": "--a-border-selected",
+    "--ac-stepper-non-interactive": "--a-text-subtle",
+    "--ac-stepper-active": "--a-text-action-selected",
+    "--ac-stepper-active-bg": "--a-surface-action-selected",
+    "--ac-stepper-active-border": "--a-border-action-selected",
+    "--ac-stepper-active-text": "--a-text-on-action",
+    "--ac-stepper-hover-bg": "--a-surface-action-subtle-hover",
+    "--ac-stepper-non-interactive-active": "--a-text-default",
+    "--ac-stepper-non-interactive-line-completed": "--a-border-strong",
+    "--ac-stepper-non-interactive-active-bg": "--a-surface-inverted",
+    "--ac-stepper-non-interactive-active-border": "--a-surface-inverted",
+    "--ac-stepper-non-interactive-active-text": "--a-text-on-inverted",
+    "--ac-stepper-active-completed": "--a-text-action-selected",
+    "--ac-stepper-non-interactive-active-completed": "--a-text-default"
+  },
+  "table": {
+    "--ac-table-row-hover": "--a-bg-subtle",
+    "--ac-table-row-selected": "--a-surface-action-subtle",
+    "--ac-table-row-selected-hover": "--a-surface-action-subtle-hover",
+    "--ac-table-row-zebra": "--a-surface-subtle",
+    "--ac-table-row-border": "--a-border-default",
+    "--ac-table-row-hover-border": "--a-border-strong",
+    "--ac-table-sort-button-text": "--a-text-action",
+    "--ac-table-sort-button-hover-bg": "--a-bg-subtle",
+    "--ac-table-sort-button-sorted-bg": "--a-surface-selected",
+    "--ac-table-sort-button-sorted-text": "--a-text-action-on-action-subtle"
+  },
+  "tabs": {
+    "--ac-tabs-border": "--a-border-divider",
+    "--ac-tabs-text": "--a-text-subtle",
+    "--ac-tabs-hover-border": "--a-border-subtle-hover",
+    "--ac-tabs-selected-border": "--a-border-action",
+    "--ac-tabs-selected-text": "--a-text-default",
+    "--ac-tabs-focus-text": "--a-text-default"
+  },
+  "tag": {
+    "--ac-tag-error-border": "--a-border-danger",
+    "--ac-tag-error-bg": "--a-surface-danger-subtle",
+    "--ac-tag-error-text": "--a-text-default",
+    "--ac-tag-error-filled-bg": "--a-surface-danger",
+    "--ac-tag-error-filled-text": "--a-text-on-danger",
+    "--ac-tag-success-border": "--a-border-success",
+    "--ac-tag-success-bg": "--a-surface-success-subtle",
+    "--ac-tag-success-text": "--a-text-default",
+    "--ac-tag-success-filled-bg": "--a-surface-success",
+    "--ac-tag-success-filled-text": "--a-text-on-success",
+    "--ac-tag-warning-border": "--a-border-warning",
+    "--ac-tag-warning-bg": "--a-surface-warning-subtle",
+    "--ac-tag-warning-text": "--a-text-default",
+    "--ac-tag-warning-filled-bg": "--a-surface-warning",
+    "--ac-tag-warning-filled-text": "--a-text-on-warning",
+    "--ac-tag-info-border": "--a-border-info",
+    "--ac-tag-info-bg": "--a-surface-info-subtle",
+    "--ac-tag-info-text": "--a-text-default",
+    "--ac-tag-info-filled-bg": "--a-surface-info",
+    "--ac-tag-info-filled-text": "--a-text-on-info",
+    "--ac-tag-neutral-border": "--a-border-default",
+    "--ac-tag-neutral-bg": "--a-surface-neutral-subtle",
+    "--ac-tag-neutral-text": "--a-text-default",
+    "--ac-tag-neutral-filled-bg": "--a-surface-neutral",
+    "--ac-tag-neutral-filled-text": "--a-text-on-neutral",
+    "--ac-tag-alt-1-border": "--a-border-alt-1",
+    "--ac-tag-alt-1-bg": "--a-surface-alt-1-subtle",
+    "--ac-tag-alt-1-text": "--a-text-default",
+    "--ac-tag-alt-1-filled-bg": "--a-surface-alt-1",
+    "--ac-tag-alt-1-filled-text": "--a-text-on-alt-1",
+    "--ac-tag-alt-2-border": "--a-border-alt-2",
+    "--ac-tag-alt-2-bg": "--a-surface-alt-2-subtle",
+    "--ac-tag-alt-2-text": "--a-text-default",
+    "--ac-tag-alt-2-filled-bg": "--a-surface-alt-2",
+    "--ac-tag-alt-2-filled-text": "--a-text-on-alt-2",
+    "--ac-tag-alt-3-border": "--a-border-alt-3",
+    "--ac-tag-alt-3-bg": "--a-surface-alt-3-subtle",
+    "--ac-tag-alt-3-text": "--a-text-default",
+    "--ac-tag-alt-3-filled-bg": "--a-surface-alt-3",
+    "--ac-tag-alt-3-filled-text": "--a-text-on-alt-3"
+  },
+  "togglegroup": {
+    "--ac-toggle-group-bg": "--a-surface-default",
+    "--ac-toggle-group-border": "--a-border-default",
+    "--ac-toggle-group-button-bg": "--a-surface-default",
+    "--ac-toggle-group-button-text": "--a-text-default",
+    "--ac-toggle-group-button-hover-bg": "--a-surface-action-subtle",
+    "--ac-toggle-group-button-hover-text": "--a-text-action-on-action-subtle",
+    "--ac-toggle-group-selected-bg": "--a-surface-action-selected",
+    "--ac-toggle-group-selected-text": "--a-text-on-action"
+  },
+  "tooltip": {
+    "--ac-tooltip-bg": "--a-surface-inverted",
+    "--ac-tooltip-text": "--a-text-on-inverted",
+    "--ac-tooltip-key-bg": "--a-surface-neutral",
+    "--ac-tooltip-key-text": "--a-text-on-inverted"
+  },
+  "typography": {
+    "--ac-typo-error-text": "--a-text-danger"
+  },
+  "confirmationpanel": {
+    "--ac-confirmation-panel-border": "--a-border-warning",
+    "--ac-confirmation-panel-bg": "--a-surface-warning-subtle",
+    "--ac-confirmation-panel-checked-border": "--a-border-success",
+    "--ac-confirmation-panel-checked-bg": "--a-surface-success-subtle",
+    "--ac-confirmation-panel-error-border": "--a-border-danger",
+    "--ac-confirmation-panel-error-bg": "--a-surface-danger-subtle"
+  },
+  "errorsummary": {
+    "--ac-error-summary-bg": "--a-surface-default",
+    "--ac-error-summary-border": "--a-border-danger"
+  },
+  "checkbox-radio": {
+    "--ac-radio-checkbox-bg": "--a-surface-default",
+    "--ac-radio-checkbox-border": "--a-border-strong",
+    "--ac-radio-checkbox-action": "--a-surface-action",
+    "--ac-radio-checkbox-action-hover-bg": "--a-surface-action-subtle",
+    "--ac-radio-checkbox-error-border": "--a-border-danger",
+    "--ac-radio-checkbox-error-hover-bg": "--a-surface-danger-subtle"
+  },
+  "search": {
+    "--ac-search-button-border": "--a-border-default",
+    "--ac-search-button-border-hover": "--a-border-action",
+    "--ac-search-clear-icon": "--a-text-default",
+    "--ac-search-clear-icon-hover": "--a-text-action",
+    "--ac-search-button-focus-active-border": "--a-surface-default",
+    "--ac-search-error-border": "--a-border-danger"
+  },
+  "select": {
+    "--ac-select-bg": "--a-surface-default",
+    "--ac-select-border": "--a-border-strong",
+    "--ac-select-hover-bg": "--a-border-action",
+    "--ac-select-error-border": "--a-surface-danger"
+  },
+  "switch": {
+    "--ac-switch-action": "--a-surface-action",
+    "--ac-switch-bg": "--a-surface-neutral",
+    "--ac-switch-checked-bg": "--a-surface-success",
+    "--ac-switch-hover-bg": "--a-surface-neutral-hover",
+    "--ac-switch-checked-hover-bg": "--a-surface-success-hover",
+    "--ac-switch-thumb-bg": "--a-surface-default",
+    "--ac-switch-thumb-icon": "--a-icon-subtle",
+    "--ac-switch-thumb-icon-checked": "--a-icon-success"
+  },
+  "textfield": {
+    "--ac-textfield-bg": "--a-surface-default",
+    "--ac-textfield-border": "--a-border-default",
+    "--ac-textfield-text": "--a-text-default",
+    "--ac-textfield-placeholder": "--a-text-subtle",
+    "--ac-textfield-hover-border": "--a-border-action",
+    "--ac-textfield-error-border": "--a-border-danger"
+  },
+  "textarea": {
+    "--ac-textarea-bg": "--a-surface-default",
+    "--ac-textarea-border": "--a-border-default",
+    "--ac-textarea-text": "--a-text-default",
+    "--ac-textarea-placeholder": "--a-text-subtle",
+    "--ac-textarea-hover-border": "--a-border-action",
+    "--ac-textarea-counter-text": "--a-text-subtle",
+    "--ac-textarea-counter-error-text": "--a-surface-danger",
+    "--ac-textarea-error-border": "--a-border-danger"
+  }
+}

package/tooltip.css

@@ -9,11 +9,11 @@
 }
 
 .navds-tooltip {
-  z-index: var(--navds-z-index-tooltip);
-  background-color: var(--navds-semantic-color-component-background-inverted);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-2);
+  z-index: var(--a-z-index-tooltip);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
+  color: var(--ac-tooltip-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-2);
   align-items: center;
   filter: drop-shadow(0 2px 4px rgba(0 0 0 / 0.1)) drop-shadow(0 4px 6px rgba(0 0 0 / 0.1));
   display: flex;
@@ -29,22 +29,22 @@
   width: 7px;
   transform: rotate(45deg);
   z-index: -1;
-  background-color: var(--navds-semantic-color-component-background-inverted);
+  background-color: var(--ac-tooltip-bg, var(--a-surface-inverted));
   position: absolute;
 }
 
 .navds-tooltip__keys {
-  padding-bottom: var(--navds-spacing-1);
+  padding-bottom: var(--a-spacing-1);
   display: flex;
-  gap: var(--navds-spacing-1);
+  gap: var(--a-spacing-1);
 }
 
 .navds-tooltip__key {
-  font-family: var(--navds-font-family);
-  background-color: var(--navds-global-color-gray-700);
-  color: var(--navds-semantic-color-text-inverted);
-  border-radius: var(--navds-border-radius-small);
-  padding: 0 var(--navds-spacing-1);
+  font-family: var(--a-font-family);
+  background-color: var(--ac-tooltip-key-bg, var(--a-surface-neutral));
+  color: var(--ac-tooltip-key-text, var(--a-text-on-inverted));
+  border-radius: var(--a-border-radius-small);
+  padding: 0 var(--a-spacing-1);
   min-width: 18px;
   height: 18px;
   display: inline-flex;