nve-designsystem 2.16.0 → 3.0.0

package/components/nve-accordion-item/nve-accordion-item.styles.js

@@ -11,12 +11,12 @@ const e = r`
   .details__summary {
     padding: 0;
     order: 1;
-    margin-inline-start: var(--spacing-xx-small);
+    margin-inline-start: var(--spacing-2x-small);
   }
 
   .details__header {
     padding: 0;
-    font: var(--label-large);
+    font: var(--typography-label-large);
   }
 
   .details__content {
@@ -45,63 +45,63 @@ const e = r`
 
   :host([variant='none']) {
     --_bg-color: transparent;
-    --_text-color: var(--neutrals-foreground-primary);
-    --_hover-bg-color: var(--neutrals-background-secondary);
-    --_hover-text-color: var(--neutrals-foreground-primary);
-    --_border-color: var(--neutrals-border-default);
-    --_left_border-color: var(--brand-primary);
+    --_text-color: var(--color-neutrals-foreground-primary);
+    --_hover-bg-color: var(--color-neutrals-background-secondary);
+    --_hover-text-color: var(--color-neutrals-foreground-primary);
+    --_border-color: var(--color-neutrals-border-default);
+    --_left_border-color: var(--color-brand-background-primary);
     .details {
       padding-inline: 0;
     }
   }
 
   :host([variant='neutral']) {
-    --_bg-color: var(--neutrals-background-primary);
-    --_text-color: var(--neutrals-foreground-primary);
-    --_hover-bg-color: var(--feedback-background-default-neutral);
-    --_hover-text-color: var(--neutrals-foreground-primary);
-    --_border-color: var(--neutrals-border-default);
-    --_left_border-color: var(--brand-primary);
+    --_bg-color: var(--color-neutrals-background-primary);
+    --_text-color: var(--color-neutrals-foreground-primary);
+    --_hover-bg-color: var(--color-feedback-background-default-neutral);
+    --_hover-text-color: var(--color-neutrals-foreground-primary);
+    --_border-color: var(--color-neutrals-border-default);
+    --_left_border-color: var(--color-brand-background-primary);
   }
 
   :host([variant='secondary']) {
-    --_bg-color: var(--feedback-background-subtle-neutral);
-    --_text-color: var(--feedback-foreground-subtle-neutral);
-    --_hover-bg-color: var(--feedback-background-default-neutral);
-    --_hover-text-color: var(--feedback-foreground-default-neutral);
-    --_border-color: var(--feedback-background-emphasized-neutral);
+    --_bg-color: var(--color-feedback-background-subtle-neutral);
+    --_text-color: var(--color-feedback-foreground-subtle-neutral);
+    --_hover-bg-color: var(--color-feedback-background-default-neutral);
+    --_hover-text-color: var(--color-feedback-foreground-default-neutral);
+    --_border-color: var(--color-feedback-background-emphasized-neutral);
   }
 
   :host([variant='success']) {
-    --_bg-color: var(--feedback-background-subtle-success);
-    --_text-color: var(--feedback-foreground-subtle-success);
-    --_hover-bg-color: var(--feedback-background-default-success);
-    --_hover-text-color: var(--feedback-foreground-default-success);
-    --_border-color: var(--feedback-background-emphasized-success);
+    --_bg-color: var(--color-feedback-background-subtle-success);
+    --_text-color: var(--color-feedback-foreground-subtle-success);
+    --_hover-bg-color: var(--color-feedback-background-default-success);
+    --_hover-text-color: var(--color-feedback-foreground-default-success);
+    --_border-color: var(--color-feedback-background-emphasized-success);
   }
 
   :host([variant='info']) {
-    --_bg-color: var(--feedback-background-subtle-info);
-    --_text-color: var(--feedback-foreground-subtle-info);
-    --_hover-bg-color: var(--feedback-background-default-info);
-    --_hover-text-color: var(--feedback-foreground-default-info);
-    --_border-color: var(--feedback-background-emphasized-info);
+    --_bg-color: var(--color-feedback-background-subtle-info);
+    --_text-color: var(--color-feedback-foreground-subtle-info);
+    --_hover-bg-color: var(--color-feedback-background-default-info);
+    --_hover-text-color: var(--color-feedback-foreground-default-info);
+    --_border-color: var(--color-feedback-background-emphasized-info);
   }
 
   :host([variant='warning']) {
-    --_bg-color: var(--feedback-background-subtle-warning);
-    --_text-color: var(--feedback-foreground-subtle-warning);
-    --_hover-bg-color: var(--feedback-background-default-warning);
-    --_hover-text-color: var(--feedback-foreground-default-warning);
-    --_border-color: var(--feedback-background-emphasized-warning);
+    --_bg-color: var(--color-feedback-background-subtle-warning);
+    --_text-color: var(--color-feedback-foreground-subtle-warning);
+    --_hover-bg-color: var(--color-feedback-background-default-warning);
+    --_hover-text-color: var(--color-feedback-foreground-default-warning);
+    --_border-color: var(--color-feedback-background-emphasized-warning);
   }
 
   :host([variant='error']) {
-    --_bg-color: var(--feedback-background-subtle-error);
-    --_text-color: var(--feedback-foreground-subtle-error);
-    --_hover-bg-color: var(--feedback-background-default-error);
-    --_hover-text-color: var(--feedback-foreground-default-error);
-    --_border-color: var(--feedback-background-emphasized-error);
+    --_bg-color: var(--color-feedback-background-subtle-error);
+    --_text-color: var(--color-feedback-foreground-subtle-error);
+    --_hover-bg-color: var(--color-feedback-background-default-error);
+    --_hover-text-color: var(--color-feedback-foreground-default-error);
+    --_border-color: var(--color-feedback-background-emphasized-error);
   }
 
   :host([border]) .details {

package/components/nve-alert/nve-alert.styles.js

@@ -1,5 +1,5 @@
-import { i as e } from "../../chunks/lit-element.js";
-const a = e`
+import { i as r } from "../../chunks/lit-element.js";
+const a = r`
   :host {
     --left-stroke-width: 6px;
   }
@@ -10,8 +10,8 @@ const a = e`
     padding: var(--spacing-medium) var(--spacing-large) var(--spacing-medium)
       calc(var(--spacing-large) - var(--left-stroke-width));
     border-radius: var(--border-radius-small);
-    color: var(--feedback-foreground-default-info);
-    font: var(--body-medium);
+    color: var(--color-feedback-foreground-default-info);
+    font: var(--typography-body-medium);
     border-left: var(--left-stroke-width) solid transparent;
   }
 
@@ -43,7 +43,7 @@ const a = e`
 
   ::slotted([slot='label']),
   label {
-    font: var(--label-large);
+    font: var(--typography-label-large);
     margin-right: var(--spacing-medium);
   }
 
@@ -55,79 +55,79 @@ const a = e`
 
   /*variants */
   .alert--primary {
-    background-color: var(--feedback-background-default-info);
+    background-color: var(--color-feedback-background-default-info);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-info);
+      background: var(--color-feedback-background-subtle-info);
     }
   }
   .alert--danger {
-    background-color: var(--feedback-background-default-error);
+    background-color: var(--color-feedback-background-default-error);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-error);
+      background: var(--color-feedback-background-subtle-error);
     }
   }
   .alert--success {
-    background-color: var(--feedback-background-default-success);
+    background-color: var(--color-feedback-background-default-success);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-success);
+      background: var(--color-feedback-background-subtle-success);
     }
   }
 
   .alert--neutral {
-    background-color: var(--feedback-background-default-neutral);
+    background-color: var(--color-feedback-background-default-neutral);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-neutral);
+      background: var(--color-feedback-background-subtle-neutral);
     }
   }
   .alert--warning {
-    background-color: var(--feedback-background-default-warning);
+    background-color: var(--color-feedback-background-default-warning);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-warning);
+      background: var(--color-feedback-background-subtle-warning);
     }
   }
 
   /* Styling for høyere metningsgrad */
 
   .alert--emphasized {
-    color: var(--feedback-foreground-emphasized-neutral);
+    color: var(--color-feedback-foreground-emphasized-neutral);
   }
 
   .alert--emphasized.alert--primary {
-    background-color: var(--feedback-background-emphasized-info);
+    background-color: var(--color-feedback-background-emphasized-info);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-info);
-      color: var(--feedback-background-emphasized-info);
+      background: var(--color-feedback-background-subtle-info);
+      color: var(--color-feedback-background-emphasized-info);
     }
   }
   .alert--emphasized.alert--danger {
-    background-color: var(--feedback-background-emphasized-error);
+    background-color: var(--color-feedback-background-emphasized-error);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-error);
-      color: var(--feedback-background-emphasized-error);
+      background: var(--color-feedback-background-subtle-error);
+      color: var(--color-feedback-background-emphasized-error);
     }
   }
   .alert--emphasized.alert--success {
-    background-color: var(--feedback-background-emphasized-success);
+    background-color: var(--color-feedback-background-emphasized-success);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-success);
-      color: var(--feedback-background-emphasized-success);
+      background: var(--color-feedback-background-subtle-success);
+      color: var(--color-feedback-background-emphasized-success);
     }
   }
   .alert--emphasized.alert--neutral {
-    background-color: var(--feedback-background-emphasized-neutral);
+    background-color: var(--color-feedback-background-emphasized-neutral);
     .alert__button:hover {
-      background: var(--feedback-background-subtle-neutral);
-      color: var(--feedback-background-emphasized-neutral);
+      background: var(--color-feedback-background-subtle-neutral);
+      color: var(--color-feedback-background-emphasized-neutral);
     }
   }
   .alert--emphasized.alert--warning {
-    color: var(--feedback-foreground-emphasized-warning);
-    background-color: var(--feedback-background-emphasized-warning);
+    color: var(--color-feedback-foreground-emphasized-warning);
+    background-color: var(--color-feedback-background-emphasized-warning);
     .alert__icon {
-      color: var(--feedback-foreground-emphasized-warning) !important;
+      color: var(--color-feedback-foreground-emphasized-warning) !important;
     }
     .alert__button {
-      stroke: var(--feedback-foreground-emphasized-warning) !important;
+      stroke: var(--color-feedback-foreground-emphasized-warning) !important;
     }
   }
 
@@ -136,36 +136,36 @@ const a = e`
     border-left: 6px solid;
   }
   .alert--left-stroke.alert--primary {
-    border-color: var(--feedback-background-emphasized-info);
+    border-color: var(--color-feedback-background-emphasized-info);
   }
   .alert--left-stroke.alert--danger {
-    border-color: var(--feedback-background-emphasized-error);
+    border-color: var(--color-feedback-background-emphasized-error);
   }
   .alert--left-stroke.alert--success {
-    border-color: var(--feedback-background-emphasized-success);
+    border-color: var(--color-feedback-background-emphasized-success);
   }
   .alert--left-stroke.alert--neutral {
-    border-color: var(--feedback-foreground-default-neutral);
+    border-color: var(--color-feedback-foreground-default-neutral);
   }
   .alert--left-stroke.alert--warning {
-    border-color: var(--feedback-background-emphasized-warning);
+    border-color: var(--color-feedback-background-emphasized-warning);
   }
 
   /* leftStroke and emphasized */
   .alert--left-stroke.alert--emphasized.alert--primary {
-    border-color: var(--feedback-background-default-info);
+    border-color: var(--color-feedback-background-default-info);
   }
   .alert--left-stroke.alert--emphasized.alert--danger {
-    border-color: var(--feedback-background-default-error);
+    border-color: var(--color-feedback-background-default-error);
   }
   .alert--left-stroke.alert--emphasized.alert--success {
-    border-color: var(--feedback-background-subtle-success);
+    border-color: var(--color-feedback-background-subtle-success);
   }
   .alert--left-stroke.alert--emphasized.alert--neutral {
-    border-color: var(--feedback-background-default-neutral);
+    border-color: var(--color-feedback-background-default-neutral);
   }
   .alert--left-stroke.alert--emphasized.alert--warning {
-    border-color: var(--feedback-background-default-warning);
+    border-color: var(--color-feedback-background-default-warning);
   }
 `;
 export {

package/components/nve-badge/nve-badge.styles.js

@@ -1,12 +1,12 @@
 import { i as a } from "../../chunks/lit-element.js";
-const e = a`
+const o = a`
   :host {
     display: inline-flex;
   }
 
   .badge {
     display: inline-flex;
-    padding: var(--spacing-xx-small) var(--spacing-x-small);
+    padding: var(--spacing-2x-small) var(--spacing-x-small);
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -15,64 +15,64 @@ const e = a`
 
   /* Variant modifiers */
   .badge--brand {
-    background-color: var(--brand-primary);
-    color: var(--interactive-primary-foreground-default);
+    background-color: var(--color-brand-background-primary);
+    color: var(--color-interactive-primary-foreground-default);
   }
 
   .badge--neutral {
-    background-color: var(--feedback-background-default-neutral, #e4e5e7);
-    color: var(--feedback-foreground-default-neutral, #00131c);
+    background-color: var(--color-feedback-background-default-neutral, #e4e5e7);
+    color: var(--color-feedback-foreground-default-neutral, #00131c);
   }
 
   .badge--primary {
-    background-color: var(--feedback-background-emphasized-info, #1e6fdc);
-    color: var(--feedback-foreground-emphasized-info, #fff);
+    background-color: var(--color-feedback-background-emphasized-info, #1e6fdc);
+    color: var(--color-feedback-foreground-emphasized-info, #fff);
   }
 
   .badge--success {
-    background-color: var(--feedback-background-emphasized-success, #00814b);
-    color: var(--feedback-foreground-emphasized-success, #fff);
+    background-color: var(--color-feedback-background-emphasized-success, #00814b);
+    color: var(--color-feedback-foreground-emphasized-success, #fff);
   }
   .badge--warning {
-    background-color: var(--feedback-background-emphasized-warning, #ffd046);
-    color: var(--feedback-foreground-emphasized-warning, #0d0d0e);
+    background-color: var(--color-feedback-background-emphasized-warning, #ffd046);
+    color: var(--color-feedback-foreground-emphasized-warning, #0d0d0e);
   }
 
   .badge--danger {
-    background-color: var(--feedback-background-emphasized-error, #c00);
-    color: var(--feedback-foreground-emphasized-error, #fff);
+    background-color: var(--color-feedback-background-emphasized-error, #c00);
+    color: var(--color-feedback-foreground-emphasized-error, #fff);
   }
 
   /* Lav metningsgrad */
   .saturation--subtle {
-    color: var(--neutrals-foreground-primary, #00131c);
+    color: var(--color-neutrals-foreground-primary, #00131c);
   }
 
   .badge--brand.saturation--subtle {
-    background-color: var(--brand-light);
+    background-color: var(--color-brand-background-tertiary);
   }
 
   .badge--neutral.saturation--subtle {
-    background-color: var(--feedback-background-subtle-neutral, #f7f7f8);
+    background-color: var(--color-feedback-background-subtle-neutral, #f7f7f8);
   }
 
   .badge--primary.saturation--subtle {
-    background-color: var(--feedback-background-default-info, #ceeaff);
+    background-color: var(--color-feedback-background-default-info, #ceeaff);
   }
 
   .badge--success.saturation--subtle {
-    background-color: var(--feedback-background-default-success, #cbf9cb);
+    background-color: var(--color-feedback-background-default-success, #cbf9cb);
   }
   .badge--warning.saturation--subtle {
-    background-color: var(--feedback-background-default-warning, #ffe8a5);
+    background-color: var(--color-feedback-background-default-warning, #ffe8a5);
   }
   .badge--danger.saturation--subtle {
-    background-color: var(--feedback-background-default-error, #ffd8de);
+    background-color: var(--color-feedback-background-default-error, #ffd8de);
   }
 
   /* Sizing modifiers */
   .badge--small {
-    padding: var(--spacing-xx-small, 4px) 6px;
+    padding: var(--spacing-2x-small, 4px) 6px;
     font-family: 'Source Sans Pro';
     font-size: 12px;
     font-style: normal;
@@ -81,16 +81,16 @@ const e = a`
   }
 
   .badge--medium {
-    padding: var(--spacing-xx-small) var(--spacing-x-small);
-    font: var(--label-x-small);
+    padding: var(--spacing-2x-small) var(--spacing-x-small);
+    font: var(--typography-label-x-small);
   }
 
   .badge--large {
     // 2 piksler per top og bottom for å få 27px høyde
-    padding: calc(var(--spacing-xx-small, 4px) + 1px) 10px;
-    font: var(--label-small);
+    padding: calc(var(--spacing-2x-small, 4px) + 1px) 10px;
+    font: var(--typography-label-small);
   }
 `;
 export {
-  e as default
+  o as default
 };

package/components/nve-button/nve-button.styles.js

@@ -1,5 +1,5 @@
 import { i as t } from "../../chunks/lit-element.js";
-const n = t`
+const a = t`
   /* kan ikke bruke gap fordi den lager rom mellom slots selv om de er tomme */
   /* derfor setter margin på ::part(label) og substraherer margin verdi i horizontal padding i selve .button klassen  */
   :host {
@@ -24,7 +24,7 @@ const n = t`
 
   :host([has-icon-only]) .button--small {
     gap: unset;
-    padding: var(--spacing-xx-small);
+    padding: var(--spacing-2x-small);
     min-width: unset;
   }
 
@@ -74,15 +74,15 @@ const n = t`
   }
 
   :host::part(label) {
-    font: var(--label-medium);
+    font: var(--typography-label-medium);
   }
 
   :host([size='medium'])::part(label) {
-    font: var(--label-small);
+    font: var(--typography-label-small);
   }
 
   :host([size='small'])::part(label) {
-    font: var(--label-x-small);
+    font: var(--typography-label-x-small);
   }
 
   /** check if has loading if yes apply changes to has-suffix class it shouldnt be fire if loading is not here */
@@ -126,51 +126,51 @@ const n = t`
   }
 
   .button--small {
-    height: var(--fixed-sizing-medium);
+    height: var(--sizing-fixed-sizing-medium);
     min-height: unset;
     padding: 0px;
   }
   .button--large {
-    height: var(--fixed-sizing-x-large);
+    height: var(--sizing-fixed-sizing-x-large);
     min-height: unset;
     padding: var(--spacing-medium, 1rem) calc(var(--spacing-medium, 1rem) - var(--spacing-x-small));
   }
   /* fjern gap forskjell på venstre og høyre */
   .button--medium {
-    height: var(--fixed-sizing-large);
+    height: var(--sizing-fixed-sizing-large);
     min-height: unset;
     padding: var(--spacing-medium, 1rem) calc(var(--spacing-medium, 1rem) - var(--spacing-x-small));
   }
 
   /* PRIMARY */
   :host([variant='primary']) .button--standard.button {
-    background-color: var(--interactive-primary-background-default);
-    color: var(--interactive-primary-foreground-default);
+    background-color: var(--color-interactive-primary-background-default);
+    color: var(--color-interactive-primary-foreground-default);
     border: none;
   }
   :host([variant='primary']) .button--standard.button:hover:not(.button--disabled),
   :host([variant='primary']) .button--standard.button:active:not(.button--disabled) {
-    background: var(--interactive-primary-background-hover);
-    color: var(--interactive-primary-foreground-default);
+    background: var(--color-interactive-primary-background-hover);
+    color: var(--color-interactive-primary-foreground-default);
   }
 
   /* DEFAULT, aka SECONDARY */
   :host([variant='secondary']) .button--standard.button,
   :host([variant='default']) .button--standard.button {
-    background: var(--interactive-secondary-background-default);
-    color: var(--interactive-secondary-foreground-default);
+    background: var(--color-interactive-secondary-background-default);
+    color: var(--color-interactive-secondary-foreground-default);
     border: none;
   }
   :host([variant='secondary']) .button--standard.button:hover:not(.button--disabled),
   :host([variant='default']) .button--standard.button:hover:not(.button--disabled) {
-    background: var(--interactive-secondary-background-hover);
-    color: var(--interactive-secondary-foreground-hover);
+    background: var(--color-interactive-secondary-background-hover);
+    color: var(--color-interactive-secondary-foreground-hover);
   }
 
   /* TEXT aka GHOST */
   :host([variant='text']) .button.button--standard,
   :host([variant='ghost']) .button.button--standard {
-    color: var(--interactive-ghost-foreground-default);
+    color: var(--color-interactive-ghost-foreground-default);
     background-color: transparent;
     border-radius: var(--border-radius-small, 4px);
     border: none;
@@ -183,16 +183,16 @@ const n = t`
 
   :host([variant='text']) .button.button--standard:hover:not(.button--disabled),
   :host([variant='ghost']) .button.button--standard:hover:not(.button--disabled) {
-    background-color: var(--interactive-ghost-background-hover);
-    color: var(--interactive-ghost-foreground-hover);
+    background-color: var(--color-interactive-ghost-background-hover);
+    color: var(--color-interactive-ghost-foreground-hover);
   }
 
   /* NEUTRAL, aka OUTLINE */
   :host([variant='neutral']) .button.button--standard,
   :host([variant='outline']) .button.button--standard,
   :host([outline]) .button.button {
-    color: var(--interactive-outlined-foreground-default);
-    border-color: var(--interactive-outlined-border-default);
+    color: var(--color-interactive-outlined-foreground-default);
+    border-color: var(--color-interactive-outlined-border-default);
     border-width: var(--border-width-default);
     border-style: solid;
     background-color: transparent;
@@ -200,8 +200,8 @@ const n = t`
   :host([variant='neutral']) .button.button--standard:hover:not(.button--disabled),
   :host([variant='outline']) .button.button--standard:hover:not(.button--disabled),
   :host([outline]) .button.button:hover:not(.button--disabled) {
-    border-color: var(--interactive-outlined-border-hover);
-    color: var(--interactive-outlined-foreground-hover);
+    border-color: var(--color-interactive-outlined-border-hover);
+    color: var(--color-interactive-outlined-foreground-hover);
     border-width: var(--border-width-default);
     border-style: solid;
     background-color: transparent;
@@ -219,5 +219,5 @@ const n = t`
   }
 `;
 export {
-  n as default
+  a as default
 };

package/components/nve-carousel/nve-carousel.styles.js

@@ -1,5 +1,5 @@
 import { i as a } from "../../chunks/lit-element.js";
-const t = a`
+const o = a`
   :host::part(base) {
     gap: 0rem 10px;
   }
@@ -10,7 +10,7 @@ const t = a`
     position: absolute;
     bottom: 0;
     right: 0;
-    padding: var(--spacing-xx-small) var(--spacing-x-small);
+    padding: var(--spacing-2x-small) var(--spacing-x-small);
     border-radius: var(--border-radius-small);
     color: var(--pagination-counter-color, inherit);
     background-color: var(--pagination-counter-bg-color, inherit);
@@ -22,17 +22,17 @@ const t = a`
   }
 
   :host::part(navigation-button) {
-    background-color: var(--neutrals-background-secondary);
+    background-color: var(--color-neutrals-background-secondary);
     opacity: 70%;
     padding: var(--spacing-x-small);
     border-radius: var(--dimension-25x);
   }
 
   :host::part(navigation-button):hover {
-    background-color: var(--interactive-secondary-background-hover);
+    background-color: var(--color-interactive-secondary-background-hover);
     opacity: 70%;
     transition: 0.3s;
-    color: var(--neutrals-background-primary);
+    color: var(--color-neutrals-background-primary);
   }
 
   :host::part(pagination) {
@@ -43,27 +43,27 @@ const t = a`
   }
 
   :host::part(pagination-item) {
-    background-color: var(--neutrals-border-mute);
+    background-color: var(--color-neutrals-border-mute);
     width: var(--spacing-x-small);
     height: var(--spacing-x-small);
   }
 
   :host::part(pagination-item):hover {
-    background-color: var(--neutrals-border-default);
+    background-color: var(--color-neutrals-border-default);
     transition: 0.3s;
   }
 
   :host::part(pagination-item--active) {
-    background-color: var(--neutrals-background-primary);
-    border: 3px solid var(--neutrals-border-mute);
+    background-color: var(--color-neutrals-background-primary);
+    border: 3px solid var(--color-neutrals-border-mute);
     width: var(--spacing-small);
     height: var(--spacing-small);
   }
 
   :host::part(pagination-item--active):hover {
-    background-color: var(--neutrals-background-primary);
+    background-color: var(--color-neutrals-background-primary);
   }
 `;
 export {
-  t as default
+  o as default
 };

package/components/nve-carousel-item/nve-carousel-item.styles.js

@@ -1,23 +1,22 @@
-import { i as t } from "../../chunks/lit-element.js";
-const a = t`
-
-:host(nve-carousel-item) {
+import { i as o } from "../../chunks/lit-element.js";
+const r = o`
+  :host(nve-carousel-item) {
     aspect-ratio: 16/9;
     object-fit: contain;
     height: auto;
-}
+  }
 
-::slotted(img) {
+  ::slotted(img) {
     object-fit: contain;
-}
+  }
 
-.carousel-item__description {
-    background-color: var(--teal-150);
-    color: var(--neutrals-foreground-primary);
+  .carousel-item__description {
+    background-color: var(--color-shades-teal-150);
+    color: var(--color-neutrals-foreground-primary);
     width: 100%;
     padding: 0 var(--spacing-medium);
-}
+  }
 `;
 export {
-  a as default
+  r as default
 };