@digdir/designsystemet-css 0.10.0 → 0.11.0-alpha.3

package/link.css

@@ -1,36 +1,60 @@
-@layer fds.link {
-  .fds-link {
-    color: var(--fds-semantic-text-action-default);
+@layer ds.link {
+  .ds-link {
+    --dsc-link-color: var(--ds-color-accent-text-subtle);
+    --dsc-link-color-hover: var(--ds-color-accent-text-default);
+    --dsc-link-color-active: var(--ds-color-accent-text-default);
+    --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
+    --dsc-link-color-focus: var(--ds-color-focus-inner);
+    --dsc-link-color-focus-background: var(--ds-color-focus-outer);
+
+    position: relative;
+    color: var(--dsc-link-color);
     cursor: pointer;
     text-decoration: underline;
     text-decoration-thickness: max(1px, 0.0625rem);
-    text-underline-offset: max(4px, 0.25rem);
+    text-underline-offset: max(5px, 0.25rem);
     display: inline-flex;
     align-items: center;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
+  }
+
+  .ds-link--accent {
+    --dsc-link-color: var(--ds-color-accent-text-subtle);
+    --dsc-link-color-hover: var(--ds-color-accent-text-default);
+    --dsc-link-color-active: var(--ds-color-accent-text-default);
+    --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
   }
 
-  .fds-link:visited {
-    color: var(--fds-semantic-text-visited-default);
+  .ds-link--neutral {
+    --dsc-link-color: var(--ds-color-neutral-text-default);
+    --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
+    --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
+    --dsc-link-color-visited: var(--ds-global-purple-12);
+  }
+
+  .ds-link:visited {
+    color: var(--dsc-link-color-visited);
     text-decoration: none;
   }
 
-  .fds-link:hover {
-    color: var(--fds-semantic-text-action-hover);
+  .ds-link:hover {
+    color: var(--dsc-link-color-hover);
     text-decoration-thickness: max(2px, 0.125rem, 0.12em);
   }
 
-  .fds-link:focus-visible {
-    background: var(--fds-semantic-border-focus-outline);
-    box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow);
-    color: var(--fds-semantic-text-action-active);
+  .ds-link:focus-visible {
+    color: var(--dsc-link-color-focus);
+    background: var(--dsc-link-color-focus-background);
     outline: none;
-    text-decoration: none;
   }
 
-  .fds-link--inverted:not(:focus-visible, :active),
-  .fds-link--inverted:not(:focus-visible, :active):hover,
-  .fds-link--inverted:not(:focus-visible, :active):visited {
-    color: white;
+  .ds-link:active {
+    color: var(--dsc-link-color-active);
+    background: var(--dsc-link-color-active-background);
+    border-radius: var(--ds-border-radius-md);
+    outline: none;
   }
 }

package/list.css

@@ -1,18 +1,18 @@
-@layer fds.list {
-  .fds-list--sm {
-    padding-left: var(--fds-spacing-4);
+@layer ds.list {
+  .ds-list--sm {
+    padding-left: var(--ds-spacing-4);
   }
 
-  .fds-list--md,
-  .fds-list--lg {
-    padding-left: var(--fds-spacing-6);
+  .ds-list--md,
+  .ds-list--lg {
+    padding-left: var(--ds-spacing-6);
   }
 
-  .fds-list__item {
-    margin-bottom: var(--fds-spacing-2);
+  .ds-list__item {
+    margin-bottom: var(--ds-spacing-2);
   }
 
-  .fds-list__item > .fds-list {
-    margin-top: var(--fds-spacing-2);
+  .ds-list__item > .ds-list {
+    margin-top: var(--ds-spacing-2);
   }
 }

package/modal.css

@@ -1,35 +1,37 @@
-@layer fds.modal {
-  .fds-modal {
+@layer ds.modal {
+  .ds-modal {
     padding: 0;
     width: 100%;
     max-width: 650px;
     border: none;
-    border-radius: var(--fds-border_radius-medium);
-    box-shadow: var(--fds-shadow-xlarge);
+    border-radius: var(--ds-border-radius-md);
+    box-shadow: var(--ds-shadow-xl);
+    background-color: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-modal::backdrop {
+  .ds-modal::backdrop {
     background-color: rgb(0 0 0 / 0.5);
     animation: fade-in 300ms ease-in-out;
   }
 
-  .fds-modal[open] {
+  .ds-modal[open] {
     animation:
       slide-in 300ms ease-in-out,
       fade-in 300ms ease-in-out;
   }
 
-  .fds-modal > hr {
-    margin: var(--fds-spacing-3) 0 !important;
-    border-color: var(--fds-semantic-border-divider-subtle);
+  .ds-modal > hr {
+    margin: var(--ds-spacing-3) 0 !important;
+    border-color: var(--ds-color-neutral-border-subtle);
   }
 
-  .fds-modal--lock-scroll {
+  .ds-modal--lock-scroll {
     overflow: hidden;
   }
 
   @media (max-width: 650px) {
-    .fds-modal {
+    .ds-modal {
       min-width: 100%;
       max-width: 100%;
       border-radius: 0;
@@ -37,11 +39,11 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .fds-modal[open] {
+    .ds-modal[open] {
       animation: none;
     }
 
-    .fds-modal::backdrop {
+    .ds-modal::backdrop {
       animation: none;
     }
   }
@@ -66,40 +68,40 @@
     }
   }
 
-  .fds-modal__header {
+  .ds-modal__header {
     display: flex;
     justify-content: space-between;
     flex-direction: column;
-    padding-top: var(--fds-spacing-6);
-    padding-bottom: var(--fds-spacing-2);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-18);
-    gap: var(--fds-spacing-1);
-    color: var(--fds-semantic-text-neutral-default);
+    padding-top: var(--ds-spacing-6);
+    padding-bottom: var(--ds-spacing-2);
+    padding-left: var(--ds-spacing-6);
+    padding-right: var(--ds-spacing-18);
+    gap: var(--ds-spacing-1);
+    color: var(--ds-color-neutral-text-default);
   }
 
-  .fds-modal__header--no-button {
-    padding-right: var(--fds-spacing-6);
+  .ds-modal__header--no-button {
+    padding-right: var(--ds-spacing-6);
   }
 
-  .fds-modal__header__button {
+  .ds-modal__header__button {
     position: absolute;
-    top: var(--fds-spacing-3);
-    right: var(--fds-spacing-3);
+    top: var(--ds-spacing-3);
+    right: var(--ds-spacing-3);
   }
 
-  .fds-modal__footer {
+  .ds-modal__footer {
     display: flex;
     align-items: center;
-    gap: var(--fds-spacing-4);
-    padding-top: var(--fds-spacing-3);
-    padding-bottom: var(--fds-spacing-6);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-6);
+    gap: var(--ds-spacing-4);
+    padding-top: var(--ds-spacing-3);
+    padding-bottom: var(--ds-spacing-6);
+    padding-left: var(--ds-spacing-6);
+    padding-right: var(--ds-spacing-6);
   }
 
-  .fds-modal__content {
-    padding: var(--fds-spacing-2) var(--fds-spacing-6);
+  .ds-modal__content {
+    padding: var(--ds-spacing-2) var(--ds-spacing-6);
     max-height: 80vh;
     overflow-y: auto;
   }

package/native-select.css

@@ -1,92 +1,108 @@
-@layer fds.nativeselect {
-  .fds-native-select {
+@layer ds.nativeselect {
+  .ds-native-select__wrapper {
+    position: relative;
+    display: grid;
+    flex: 0 1 auto;
+  }
+
+  /* chevron for native select */
+  .ds-native-select__wrapper::after {
+    content: '';
+    position: absolute;
+    background-color: var(--ds-color-neutral-text-default);
+    pointer-events: none;
+    top: 50%;
+    right: var(--ds-spacing-2);
+    transform: translateY(-50%);
+    width: 1.5em;
+    height: 1.5em;
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+    mask-size: contain;
+  }
+
+  .ds-native-select {
     position: relative;
-    font: inherit;
     font-family: inherit;
     box-sizing: border-box;
-    flex: 0 1 auto;
-    padding: 0 var(--fds-spacing-2);
-    border: solid 1px var(--fds-semantic-border-input-default);
-    border-radius: var(--fds-border_radius-medium);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
-    background-color: var(--fds-semantic-background-default);
-    background-repeat: no-repeat;
-    background-position: right var(--fds-spacing-2) center;
-    background-size: 1.5em 1.5em;
+    padding: 0 var(--ds-spacing-2);
+    border: solid 1px var(--ds-color-neutral-border-default);
+    border-radius: var(--ds-border-radius-md);
+    background-color: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
     appearance: none;
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .fds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
-      border-color: var(--fds-semantic-border-input-hover);
-      box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+    .ds-native-select:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      border-color: var(--ds-color-accent-border-strong);
+      box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
     }
   }
 
-  .fds-native-select.fds-native-select--multiple {
+  .ds-native-select.ds-native-select--multiple {
     background-image: none;
   }
 
-  .fds-native-select--sm {
-    padding: 0 var(--fds-spacing-2);
-    padding-right: var(--fds-spacing-8);
-    height: var(--fds-sizing-10);
+  .ds-native-select--sm {
+    padding: 0 var(--ds-spacing-2);
+    padding-right: var(--ds-spacing-8);
+    height: var(--ds-sizing-10);
   }
 
-  .fds-native-select--md {
-    padding: 0 var(--fds-spacing-3);
-    padding-right: var(--fds-spacing-10);
-    height: var(--fds-sizing-12);
+  .ds-native-select--md {
+    padding: 0 var(--ds-spacing-3);
+    padding-right: var(--ds-spacing-10);
+    height: var(--ds-sizing-12);
   }
 
-  .fds-native-select--lg {
-    padding: 0 var(--fds-spacing-4);
-    padding-right: var(--fds-spacing-12);
-    height: var(--fds-sizing-14);
+  .ds-native-select--lg {
+    padding: 0 var(--ds-spacing-4);
+    padding-right: var(--ds-spacing-12);
+    height: var(--ds-sizing-14);
   }
 
-  .fds-native-select--container {
+  .ds-native-select--container {
     display: grid;
-    gap: var(--fds-spacing-2);
+    gap: var(--ds-spacing-2);
   }
 
-  .fds-native-select--container:has(.fds-native-select:disabled) {
-    opacity: var(--fds-opacity-disabled);
+  .ds-native-select--container:has(.ds-native-select:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-native-select:disabled {
+  .ds-native-select:disabled {
     cursor: not-allowed;
   }
 
-  .fds-native-select--readonly .fds-native-select {
-    background: var(--fds-semantic-surface-neutral-subtle);
-    border-color: var(--fds-semantic-border-neutral-default);
+  .ds-native-select--readonly .ds-native-select {
+    background: var(--ds-color-neutral-background-subtle);
+    border-color: var(--ds-color-neutral-border-strong);
   }
 
-  .fds-native-select--error>.fds-native-select:not(:focus-visible) {
-    border-color: var(--fds-semantic-border-danger-default);
-    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+  .ds-native-select--error > .ds-native-select:not(:focus-visible) {
+    border-color: var(--ds-color-danger-border-default);
+    box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
   }
 
-  .fds-native-select__readonly__icon {
+  .ds-native-select__readonly__icon {
     height: 1.2em;
     width: 1.2em;
   }
 
-  .fds-native-select__error-message:empty {
+  .ds-native-select__error-message:empty {
     display: none;
   }
 
-  .fds-native-select__label {
+  .ds-native-select__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
-    gap: var(--fds-spacing-1);
+    gap: var(--ds-spacing-1);
     align-items: center;
   }
 
-  .fds-native-select__description {
-    color: var(--fds-semantic-text-neutral-subtle);
-    margin-top: calc(var(--fds-spacing-2) * -1);
+  .ds-native-select__description {
+    color: var(--ds-color-neutral-text-subtle);
+    margin-top: calc(var(--ds-spacing-2) * -1);
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.10.0",
+  "version": "0.11.0-alpha.3",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -39,5 +39,5 @@
     "postcss-import": "^16.0.1",
     "rimraf": "^5.0.5"
   },
-  "gitHead": "245eb9f42ec347248133be61b1e690679cb96000"
+  "gitHead": "735ada71b971dfd1c917e95a7d6c3d1b70852be2"
 }

package/pagination.css

@@ -1,8 +1,8 @@
-@layer fds.pagination {
-  .fds-pagination {
-    --fds-pagination-listitem-margin: var(--fds-spacing-4);
-    --fds-pagination-ellipsis-width: var(--fds-sizing-12);
-    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+@layer ds.pagination {
+  .ds-pagination {
+    --dsc-pagination-listitem-margin: var(--ds-spacing-4);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
+    --dsc-pagination-chevron-margin: var(--ds-spacing-2);
 
     list-style-type: none;
     display: flex;
@@ -12,58 +12,58 @@
     width: fit-content;
   }
 
-  .fds-pagination--hidden {
+  .ds-pagination--hidden {
     visibility: hidden;
   }
 
-  .fds-pagination--sm {
-    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  .ds-pagination--sm {
+    --dsc-pagination-chevron-margin: var(--ds-spacing-2);
   }
 
-  .fds-pagination--md {
-    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  .ds-pagination--md {
+    --dsc-pagination-chevron-margin: var(--ds-spacing-2);
   }
 
-  .fds-pagination--lg {
-    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  .ds-pagination--lg {
+    --dsc-pagination-chevron-margin: var(--ds-spacing-2);
   }
 
-  .fds-pagination li:first-child {
-    margin-right: var(--fds-pagination-chevron-margin);
+  .ds-pagination li:first-child {
+    margin-right: var(--dsc-pagination-chevron-margin);
   }
 
-  .fds-pagination li:last-child {
-    margin-left: var(--fds-pagination-chevron-margin);
+  .ds-pagination li:last-child {
+    margin-left: var(--dsc-pagination-chevron-margin);
   }
 
-  .fds-pagination__item {
+  .ds-pagination__item {
     flex: 1;
-    margin-right: var(--fds-pagination-listitem-margin);
+    margin-right: var(--dsc-pagination-listitem-margin);
   }
 
-  .fds-pagination--sm .fds-pagination__item {
-    --fds-pagination-listitem-margin: var(--fds-spacing-2);
-    --fds-pagination-ellipsis-width: var(--fds-sizing-10);
+  .ds-pagination--sm .ds-pagination__item {
+    --dsc-pagination-listitem-margin: var(--ds-spacing-2);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
   }
 
-  .fds-pagination--md .fds-pagination__item {
-    --fds-pagination-listitem-margin: var(--fds-spacing-4);
-    --fds-pagination-ellipsis-width: var(--fds-sizing-12);
+  .ds-pagination--md .ds-pagination__item {
+    --dsc-pagination-listitem-margin: var(--ds-spacing-4);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
   }
 
-  .fds-pagination--lg .fds-pagination__item {
-    --fds-pagination-listitem-margin: var(--fds-spacing-6);
-    --fds-pagination-ellipsis-width: var(--fds-sizing-14);
+  .ds-pagination--lg .ds-pagination__item {
+    --dsc-pagination-listitem-margin: var(--ds-spacing-6);
+    --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
   }
 
-  .fds-pagination__item.fds-pagination--compact {
-    --fds-pagination-listitem-margin: var(--fds-spacing-0);
-    --fds-pagination-chevron-margin: var(--fds-spacing-1);
+  .ds-pagination__item.ds-pagination--compact {
+    --dsc-pagination-listitem-margin: var(--ds-spacing-0);
+    --dsc-pagination-chevron-margin: var(--ds-spacing-1);
   }
 
-  .fds-pagination__ellipsis {
+  .ds-pagination__ellipsis {
     margin-top: 0.5em;
     text-align: center;
-    width: var(--fds-pagination-ellipsis-width);
+    width: var(--dsc-pagination-ellipsis-width);
   }
 }

package/popover.css

@@ -1,79 +1,82 @@
-@layer fds.fds-popover {
-  .fds-popover {
-    --fds-popover-border: 1px solid;
-    --fds-popover-background: var(--fds-semantic-surface-neutral-default);
+@layer ds.popover {
+  .ds-popover {
+    --dsc-popover-border: 1px solid;
+    --dsc-popover-background: var(--ds-color-neutral-background-default);
 
     z-index: 1500;
-    background: var(--fds-popover-background);
-    padding: var(--fds-spacing-3);
-    border: var(--fds-popover-border);
-    border-radius: var(--fds-border_radius-medium);
+    background: var(--dsc-popover-background);
+    padding: var(--ds-spacing-3);
+    border: var(--dsc-popover-border);
+    border-radius: var(--ds-border-radius-md);
     max-width: 300px;
   }
 
-  .fds-popover--sm {
-    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  .ds-popover--sm {
+    padding: var(--ds-spacing-2) var(--ds-spacing-3);
   }
 
-  .fds-popover--md {
-    padding: var(--fds-spacing-3) var(--fds-spacing-4);
+  .ds-popover--md {
+    padding: var(--ds-spacing-3) var(--ds-spacing-4);
   }
 
-  .fds-popover--lg {
-    padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  .ds-popover--lg {
+    padding: var(--ds-spacing-3) var(--ds-spacing-5);
   }
 
-  .fds-popover--default {
-    --fds-popover-background: var(--fds-semantic-surface-neutral-default);
+  .ds-popover--default {
+    --dsc-popover-background: var(--ds-color-neutral-background-default);
 
-    border-color: var(--fds-semantic-border-neutral-default);
+    border-color: var(--ds-color-neutral-border-default);
   }
 
-  .fds-popover--info {
-    --fds-popover-background: var(--fds-semantic-surface-info-subtle);
+  .ds-popover--info {
+    --dsc-popover-background: var(--ds-color-info-surface-default);
 
-    border-color: var(--fds-semantic-border-info-default);
+    border-color: var(--ds-color-info-border-default);
+    color: var(--ds-color-info-text-default);
   }
 
-  .fds-popover--warning {
-    --fds-popover-background: var(--fds-semantic-surface-warning-subtle);
+  .ds-popover--warning {
+    --dsc-popover-background: var(--ds-color-warning-surface-default);
 
-    border-color: var(--fds-semantic-border-warning-default);
+    border-color: var(--ds-color-warning-border-default);
+    color: var(--ds-color-warning-text-default);
   }
 
-  .fds-popover--danger {
-    --fds-popover-background: var(--fds-semantic-surface-danger-subtle);
+  .ds-popover--danger {
+    --dsc-popover-background: var(--ds-color-danger-surface-default);
 
-    border-color: var(--fds-semantic-border-danger-default);
+    border-color: var(--ds-color-danger-border-default);
+    color: var(--ds-color-danger-text-default);
   }
 
-  .fds-popover__arrow {
+  .ds-popover__arrow {
     position: absolute;
-    background: var(--fds-popover-background);
+    background: var(--dsc-popover-background);
     transform: rotate(45deg);
   }
 
-  .fds-popover__arrow.fds-popover__arrow--top {
-    border-top: var(--fds-popover-border);
-    border-left: var(--fds-popover-border);
+  .ds-popover__arrow.ds-popover__arrow--top {
+    border-top: var(--dsc-popover-border);
+    border-left: var(--dsc-popover-border);
     border-color: inherit;
   }
 
-  .fds-popover__arrow.fds-popover__arrow--bottom {
-    border-bottom: var(--fds-popover-border);
-    border-right: var(--fds-popover-border);
+  .ds-popover__arrow.ds-popover__arrow--bottom {
+    border-bottom: var(--dsc-popover-border);
+    border-right: var(--dsc-popover-border);
     border-color: inherit;
   }
 
-  .fds-popover__arrow.fds-popover__arrow--right {
-    border-top: var(--fds-popover-border);
-    border-right: var(--fds-popover-border);
+  .ds-popover__arrow.ds-popover__arrow--right {
+    border-top: var(--dsc-popover-border);
+    border-right: var(--dsc-popover-border);
     border-color: inherit;
   }
 
-  .fds-popover__arrow.fds-popover__arrow--left {
-    border-bottom: var(--fds-popover-border);
-    border-left: var(--fds-popover-border);
+  .ds-popover__arrow.ds-popover__arrow--left {
+    border-bottom: var(--dsc-popover-border);
+    border-left: var(--dsc-popover-border);
     border-color: inherit;
   }
 }