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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @navikt/ds-css
 
+## 2.0.0-next.1
+
+### Patch Changes
+
+- Fonter: Latin-extended, synket tokens med figma
+
+## 2.0.0-next.0
+
+### Major Changes
+
+- v2: Tokens update and font-loading
+
 ## 1.5.9
 
 ### Patch Changes

package/accordion.css

@@ -1,11 +1,3 @@
-:root,
-:host {
-  --navds-accordion-color-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-accordion-color-border: var(--navds-semantic-color-border);
-  --navds-accordion-color-border-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-accordion-color-background-open: var(--navds-semantic-color-interaction-primary-hover-subtle);
-}
-
 .navds-accordion__item:focus-within {
   position: relative;
 }
@@ -15,24 +7,24 @@
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  gap: var(--navds-spacing-2);
-  padding: 14px var(--navds-spacing-3) var(--navds-spacing-3);
+  gap: var(--a-spacing-2);
+  padding: 14px var(--a-spacing-3) var(--a-spacing-3);
   margin: 0;
   text-align: left;
   background: transparent;
   cursor: pointer;
   border: none;
-  border-bottom: 2px solid var(--navds-accordion-color-border);
+  border-bottom: 2px solid var(--a-border-strong);
 }
 
 .navds-accordion__header:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-accordion__header:hover {
-  color: var(--navds-accordion-color-text-hover);
-  border-color: var(--navds-accordion-color-border-hover);
+  color: var(--ac-accordion-header-text-hover, var(--a-text-action-on-action-subtle));
+  border-color: var(--ac-accordion-header-border-hover, var(--a-border-strong-hover));
 }
 
 .navds-accordion__header-content {
@@ -41,17 +33,17 @@
 }
 
 .navds-accordion__item--open > .navds-accordion__header {
-  background-color: var(--navds-accordion-color-background-open);
-  border-color: var(--navds-accordion-color-background-open);
+  background-color: var(--ac-accordion-item-bg-open, var(--a-surface-action-subtle));
+  border-color: var(--ac-accordion-item-border-open, var(--a-surface-action-subtle));
 }
 
 .navds-accordion__content {
-  padding: var(--navds-spacing-3) var(--navds-spacing-3) 18px;
-  border-bottom: 2px solid var(--navds-accordion-color-border);
+  padding: var(--a-spacing-3) var(--a-spacing-3) 18px;
+  border-bottom: 2px solid var(--ac-accordion-content-border, var(--a-border-strong));
 }
 
 .navds-accordion__item--open > .navds-accordion__header:hover + * .navds-accordion__content {
-  border-color: var(--navds-accordion-color-border-hover);
+  border-color: var(--ac-accordion-content-border-open, var(--a-border-strong-hover));
 }
 
 .navds-accordion__expand-icon {

package/alert.css

@@ -1,23 +1,9 @@
-:root,
-:host {
-  --navds-alert-color-border: var(--navds-semantic-color-border-muted);
-  --navds-alert-color-error-border: var(--navds-semantic-color-feedback-danger-border);
-  --navds-alert-color-error-background: var(--navds-global-color-red-50);
-  --navds-alert-color-warning-border: var(--navds-semantic-color-feedback-warning-border);
-  --navds-alert-color-warning-background: var(--navds-global-color-orange-50);
-  --navds-alert-color-info-border: var(--navds-semantic-color-feedback-info-border);
-  --navds-alert-color-info-background: var(--navds-global-color-lightblue-50);
-  --navds-alert-color-success-border: var(--navds-semantic-color-feedback-success-border);
-  --navds-alert-color-success-background: var(--navds-global-color-green-50);
-}
-
 .navds-alert {
-  border-radius: var(--navds-border-radius-medium);
+  border-radius: var(--a-border-radius-medium);
   border: 1px solid;
-  border-color: var(--navds-alert-color-border);
-  padding: var(--navds-spacing-4);
+  padding: var(--a-spacing-4);
   display: flex;
-  gap: var(--navds-spacing-3);
+  gap: var(--a-spacing-3);
   align-items: center;
 }
 
@@ -26,7 +12,7 @@
 }
 
 .navds-alert--small {
-  padding: var(--navds-spacing-2) var(--navds-spacing-4);
+  padding: var(--a-spacing-2) var(--a-spacing-4);
 }
 
 .navds-alert--full-width {
@@ -37,32 +23,32 @@
   flex-shrink: 0;
   font-size: 1.5rem;
   align-self: flex-start;
-  height: var(--navds-font-line-height-xlarge);
+  height: var(--a-font-line-height-xlarge);
 }
 
 .navds-alert--small > .navds-alert__icon {
   font-size: 1.25rem;
-  height: var(--navds-font-line-height-large);
+  height: var(--a-font-line-height-large);
 }
 
 .navds-alert--error {
-  border-color: var(--navds-alert-color-error-border);
-  background-color: var(--navds-alert-color-error-background);
+  border-color: var(--ac-alert-error-border, var(--a-border-danger));
+  background-color: var(--ac-alert-error-bg, var(--a-surface-danger-subtle));
 }
 
 .navds-alert--warning {
-  border-color: var(--navds-alert-color-warning-border);
-  background-color: var(--navds-alert-color-warning-background);
+  border-color: var(--ac-alert-warning-border, var(--a-border-warning));
+  background-color: var(--ac-alert-warning-bg, var(--a-surface-warning-subtle));
 }
 
 .navds-alert--info {
-  border-color: var(--navds-alert-color-info-border);
-  background-color: var(--navds-alert-color-info-background);
+  border-color: var(--ac-alert-info-border, var(--a-border-info));
+  background-color: var(--ac-alert-info-bg, var(--a-surface-info-subtle));
 }
 
 .navds-alert--success {
-  border-color: var(--navds-alert-color-success-border);
-  background-color: var(--navds-alert-color-success-background);
+  border-color: var(--ac-alert-success-border, var(--a-border-success));
+  background-color: var(--ac-alert-success-bg, var(--a-surface-success-subtle));
 }
 
 .navds-alert--inline {

package/baseline/baseline.css

@@ -1,8 +1,6 @@
 @import "@navikt/ds-tokens";
 @import "normalize.css";
-@import "Source-Sans-Pro-regular.css";
-@import "Source-Sans-Pro-italic.css";
-@import "Source-Sans-Pro-600.css";
+@import "fonts.css";
 @import "print.css";
 @import "utility.css";
 
@@ -20,26 +18,26 @@ html,
 :root,
 :host,
 [data-theme="light"] {
-  --navds-shadow-focus: 0 0 0 3px var(--navds-semantic-color-focus);
+  --a-shadow-focus: 0 0 0 3px var(--a-border-focus);
 
-  color: var(--navds-semantic-color-text);
+  color: var(--a-text-default);
 }
 
 [data-theme="dark"] {
-  --navds-shadow-focus: var(--navds-shadow-focus-inverted);
+  --a-shadow-focus: var(--a-shadow-focus-inverted);
 
-  color: var(--navds-semantic-color-text-inverted);
+  color: var(--a-text-on-inverted);
 }
 
 body,
 :host {
-  font-family: var(--navds-font-family, "Source Sans Pro", Arial, sans-serif);
+  font-family: var(--a-font-family, "Source Sans Pro", Arial, sans-serif);
   line-height: 1.333;
   font-size: 1.125rem;
 }
 
 a {
-  color: var(--navds-semantic-color-link);
+  color: var(--a-semantic-color-link);
 }
 
 button {

package/baseline/fonts.css

@@ -0,0 +1,21 @@
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+}
+@font-face {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2") format("woff2");
+}

package/button.css

@@ -1,60 +1,18 @@
-:root,
-:host,
-[data-theme="light"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-primary-background: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-primary-background-hover: var(--navds-semantic-color-interaction-primary-hover);
-  --navds-button-color-primary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-hover: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-secondary-border: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-secondary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-secondary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Tertiary */
-  --navds-button-color-tertiary-text: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-text-active: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-tertiary-background-hover: var(--navds-semantic-color-interaction-primary-hover-subtle);
-  --navds-button-color-tertiary-border-focus: var(--navds-semantic-color-interaction-primary);
-  --navds-button-color-tertiary-border-active: var(--navds-semantic-color-component-background-light);
-  --navds-button-color-tertiary-background-active: var(--navds-semantic-color-interaction-primary-selected);
-
-  /* Danger */
-  --navds-button-color-danger-text: var(--navds-semantic-color-text-inverted);
-  --navds-button-color-danger-background: var(--navds-semantic-color-interaction-danger);
-  --navds-button-color-danger-background-hover: var(--navds-semantic-color-interaction-danger-hover);
-  --navds-button-color-danger-background-active: var(--navds-semantic-color-interaction-danger-selected);
-  --navds-button-color-danger-border-focus: var(--navds-semantic-color-component-background-light);
-
-  /* Loader */
-  --navds-loader-color-on-button-background: rgb(255 255 255 / 0.3);
-  --navds-loader-color-on-button-foreground: currentColor;
-}
-
 [data-theme="dark"] {
-  /* Primary */
-  --navds-button-color-primary-text: var(--navds-semantic-color-text);
-  --navds-button-color-primary-border-focus: var(--navds-semantic-color-text);
-  --navds-button-color-primary-background: var(--navds-global-color-blue-200);
-  --navds-button-color-primary-background-hover: var(--navds-global-color-blue-300);
-  --navds-button-color-primary-background-active: var(--navds-global-color-blue-400);
-
-  /* Secondary */
-  --navds-button-color-secondary-text: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-hover: var(--navds-global-color-white);
-  --navds-button-color-secondary-text-active: var(--navds-global-color-white);
-  --navds-button-color-secondary-border: var(--navds-global-color-blue-200);
-  --navds-button-color-secondary-border-focus-active-hover: var(--navds-semantic-color-text);
-  --navds-button-color-secondary-background: var(--navds-semantic-color-component-background-inverted);
-  --navds-button-color-secondary-background-hover: var(--navds-global-color-gray-800);
-  --navds-button-color-secondary-background-active: var(--navds-global-color-gray-700);
+  --ac-button-primary-text: var(--a-gray-900);
+  --ac-button-primary-bg: var(--a-blue-200);
+  --ac-button-primary-focus-border: var(--a-gray-900);
+  --ac-button-primary-hover-bg: var(--a-blue-300);
+  --ac-button-primary-active-bg: var(--a-blue-400);
+  --ac-button-secondary-text: var(--a-white);
+  --ac-button-secondary-hover-text: var(--a-white);
+  --ac-button-secondary-active-text: var(--a-white);
+  --ac-button-secondary-active-focus-border: var(--a-gray-900);
+  --ac-button-secondary-bg: var(--a-gray-900);
+  --ac-button-secondary-border: var(--a-blue-200);
+  --ac-button-secondary-hover-bg: var(--a-gray-800);
+  --ac-button-secondary-focus-border: var(--a-blue-200);
+  --ac-button-secondary-active-bg: var(--a-gray-700);
 }
 
 .navds-button {
@@ -64,24 +22,24 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: var(--navds-border-radius-small);
-  padding: var(--navds-spacing-3) var(--navds-spacing-5);
+  border-radius: var(--a-border-radius-medium);
+  padding: var(--a-spacing-3) var(--a-spacing-5);
   align-items: center;
   justify-content: center;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-button--small {
-  padding: 0.375rem var(--navds-spacing-3);
+  padding: 0.375rem var(--a-spacing-3);
 }
 
 .navds-button--xsmall {
-  padding: 0.125rem var(--navds-spacing-2);
-  gap: var(--navds-spacing-1);
+  padding: var(--a-spacing-05) var(--a-spacing-2);
+  gap: var(--a-spacing-1);
 }
 
 .navds-button--icon-only {
-  padding: var(--navds-spacing-3);
+  padding: var(--a-spacing-3);
 }
 
 .navds-button--small.navds-button--icon-only {
@@ -89,27 +47,27 @@
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  padding: var(--navds-spacing-1);
+  padding: var(--a-spacing-1);
 }
 
 .navds-button:focus {
   outline: none;
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
 }
 
 .navds-button__icon {
-  --navds-button-icon-adjustment: -4px;
+  --ac-button-icon-margin: -4px;
 
   font-size: 1.5rem;
   display: flex;
 }
 
 .navds-button__icon:first-child {
-  margin-left: var(--navds-button-icon-adjustment);
+  margin-left: var(--ac-button-icon-margin);
 }
 
 .navds-button__icon:last-child {
-  margin-right: var(--navds-button-icon-adjustment);
+  margin-right: var(--ac-button-icon-margin);
 }
 
 .navds-button__icon:only-child {
@@ -117,13 +75,13 @@
 }
 
 .navds-button--small .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
+  --ac-button-icon-margin: -2px;
 
   font-size: 1.25rem;
 }
 
 .navds-button--xsmall .navds-button__icon {
-  --navds-button-icon-adjustment: -2px;
+  --ac-button-icon-margin: -2px;
 
   font-size: 1rem;
 }
@@ -133,25 +91,25 @@
  *************************/
 
 .navds-button--primary {
-  background-color: var(--navds-button-color-primary-background);
-  color: var(--navds-button-color-primary-text);
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
+  color: var(--ac-button-primary-text, var(--a-text-on-action));
 }
 
 .navds-button--primary:hover {
-  background-color: var(--navds-button-color-primary-background-hover);
+  background-color: var(--ac-button-primary-hover-bg, var(--a-surface-action-hover));
 }
 
 .navds-button--primary:active {
-  background-color: var(--navds-button-color-primary-background-active);
+  background-color: var(--ac-button-primary-active-bg, var(--a-surface-action-active));
 }
 
 .navds-button--primary:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-primary-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-button-primary-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-button--primary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--primary:active:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-primary-background);
+  background-color: var(--ac-button-primary-bg, var(--a-surface-action));
 }
 
 /**************************
@@ -159,35 +117,35 @@
  **************************/
 
 .navds-button--secondary {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
 .navds-button--secondary:hover {
-  color: var(--navds-button-color-secondary-text-hover);
-  background-color: var(--navds-button-color-secondary-background-hover);
+  color: var(--ac-button-secondary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-secondary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-button--secondary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
 .navds-button--secondary:active {
-  color: var(--navds-button-color-secondary-text-active);
-  background-color: var(--navds-button-color-secondary-background-active);
+  color: var(--ac-button-secondary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-secondary-active-bg, var(--a-surface-action-active));
   box-shadow: none;
 }
 
 .navds-button--secondary:focus:active {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-secondary-border-focus-active-hover), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-button-secondary-active-focus-border, var(--a-surface-default)), var(--a-shadow-focus);
 }
 
 .navds-button--secondary:where(:disabled, .navds-button--disabled),
 .navds-button--secondary:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-secondary-text);
-  background-color: var(--navds-button-color-secondary-background);
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-secondary-border);
+  color: var(--ac-button-secondary-text, var(--a-text-action));
+  background-color: var(--ac-button-secondary-bg, var(--a-surface-default));
+  box-shadow: inset 0 0 0 1.5px var(--ac-button-secondary-border, var(--a-border-action));
 }
 
 /****************************
@@ -195,36 +153,37 @@
  ****************************/
 
 .navds-button--tertiary {
-  color: var(--navds-button-color-tertiary-text);
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
 }
 
 .navds-button--tertiary:hover {
-  background-color: var(--navds-button-color-tertiary-background-hover);
+  color: var(--ac-button-tertiary-hover-text, var(--a-text-action-on-action-subtle));
+  background-color: var(--ac-button-tertiary-hover-bg, var(--a-surface-action-subtle-hover));
 }
 
 .navds-button--tertiary:focus {
-  box-shadow: inset 0 0 0 2px var(--navds-button-color-tertiary-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1.5px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
 }
 
 .navds-button--tertiary:active {
-  color: var(--navds-button-color-tertiary-text-active);
-  background-color: var(--navds-button-color-tertiary-background-active);
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active);
+  color: var(--ac-button-tertiary-active-text, var(--a-text-on-action));
+  background-color: var(--ac-button-tertiary-active-bg, var(--a-surface-action-active));
+  box-shadow: inset 0 0 0 1px var(--a-surface-default);
 }
 
 .navds-button--tertiary:active:hover {
-  background-color: var(--navds-button-color-tertiary-background-active);
+  background-color: var(--ac-button-tertiary-active-hover-bg, var(--a-surface-action-active));
 }
 
 .navds-button--tertiary:active:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-tertiary-border-active), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 .navds-button--tertiary:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:hover:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:where(:disabled, .navds-button--disabled),
 .navds-button--tertiary:active:hover:where(:disabled, .navds-button--disabled) {
-  color: var(--navds-button-color-tertiary-text);
+  color: var(--ac-button-tertiary-text, var(--a-text-action));
   background: none;
   box-shadow: none;
 }
@@ -234,25 +193,25 @@
  *************************/
 
 .navds-button--danger {
-  background-color: var(--navds-button-color-danger-background);
-  color: var(--navds-button-color-danger-text);
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
+  color: var(--ac-button-danger-text, var(--a-text-on-danger));
 }
 
 .navds-button--danger:hover {
-  background-color: var(--navds-button-color-danger-background-hover);
+  background-color: var(--ac-button-danger-hover-bg, var(--a-surface-danger-hover));
 }
 
 .navds-button--danger:active {
-  background-color: var(--navds-button-color-danger-background-active);
+  background-color: var(--ac-button-danger-active-bg, var(--a-surface-danger-active));
 }
 
 .navds-button--danger:focus {
-  box-shadow: inset 0 0 0 1px var(--navds-button-color-danger-border-focus), var(--navds-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--a-surface-default), var(--a-shadow-focus);
 }
 
 .navds-button--danger:active:where(:disabled, .navds-button--disabled),
 .navds-button--danger:hover:where(:disabled, .navds-button--disabled) {
-  background-color: var(--navds-button-color-danger-background);
+  background-color: var(--ac-button-danger-bg, var(--a-surface-danger));
 }
 
 /**************************
@@ -268,10 +227,10 @@
 }
 
 .navds-button .navds-loader .navds-loader__foreground {
-  stroke: var(--navds-loader-color-on-button-foreground);
+  stroke: var(--ac-button-loader-stroke, currentColor);
 }
 
 .navds-button--primary .navds-loader .navds-loader__background,
 .navds-button--danger .navds-loader .navds-loader__background {
-  stroke: var(--navds-loader-color-on-button-background);
+  stroke: var(--ac-button-primary-loader-stroke-bg, rgb(255 255 255 / 0.3));
 }

package/chat.css

@@ -1,21 +1,14 @@
-:root,
-:host {
-  --navds-chat-color-background: var(--navds-semantic-color-canvas-background);
-  --navds-chat-color-avatar: var(--navds-semantic-color-text);
-  --navds-chat-color-avatar-background: var(--navds-semantic-color-canvas-background);
-}
-
 .navds-chat {
   display: flex;
   align-items: flex-end;
-  gap: var(--navds-spacing-4);
-  padding-right: var(--navds-spacing-16);
+  gap: var(--a-spacing-4);
+  padding-right: var(--a-spacing-16);
 }
 
 .navds-chat--right {
   flex-direction: row-reverse;
   padding-right: 0;
-  padding-left: var(--navds-spacing-16);
+  padding-left: var(--a-spacing-16);
 }
 
 .navds-chat__bubble-wrapper {
@@ -24,7 +17,7 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-3);
+  gap: var(--a-spacing-3);
 }
 
 .navds-chat--right .navds-chat__bubble-wrapper {
@@ -33,9 +26,9 @@
 
 .navds-chat__avatar {
   align-items: center;
-  background: var(--navds-chat-color-avatar-background);
-  color: var(--navds-chat-color-avatar);
-  border-radius: var(--navds-border-radius-full);
+  background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
+  color: var(--ac-chat-avatar-color, var(--a-text-default));
+  border-radius: var(--a-border-radius-full);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -52,31 +45,31 @@
 
 .navds-chat__bubble {
   padding: 1rem;
-  box-shadow: var(--navds-shadow-small);
+  box-shadow: var(--a-shadow-small);
   width: fit-content;
   max-width: 37.5rem;
-  background-color: var(--navds-chat-color-background);
-  border-radius: var(--navds-border-radius-xlarge);
+  background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
+  border-radius: var(--a-border-radius-xlarge);
   border-bottom-left-radius: 2px;
   display: flex;
   flex-direction: column;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
 }
 
 .navds-chat__bubble:focus {
-  box-shadow: var(--navds-shadow-focus);
+  box-shadow: var(--a-shadow-focus);
   outline: none;
 }
 
 .navds-chat--right .navds-chat__bubble {
-  border-radius: var(--navds-border-radius-xlarge);
+  border-radius: var(--a-border-radius-xlarge);
   border-bottom-right-radius: 2px;
 }
 
 .navds-chat__top-text {
-  color: var(--navds-semantic-color-text);
+  color: var(--ac-chat-top-text, var(--a-text-default));
   display: flex;
-  gap: var(--navds-spacing-2);
+  gap: var(--a-spacing-2);
   align-items: baseline;
 }
 
@@ -85,5 +78,5 @@
 }
 
 .navds-chat__name {
-  font-weight: var(--navds-font-weight-bold);
+  font-weight: var(--a-font-weight-bold);
 }