@coras-io/embed 0.2.0 → 0.4.0

package/dist/components/dialog/dialog.styles.js

@@ -8,25 +8,28 @@ export default css `
     --dialog-max-width: 90vw;
     --dialog-max-height: 90vh;
     --dialog-border-radius: var(--coras-radius-lg);
-    --dialog-bg-color: var(--coras-palette-white);
-    --dialog-overlay-bg-color: color-mix(in srgb, black, transparent 40%);
+    --dialog-bg-color: var(--coras-color-card);
+    --dialog-overlay-bg-color: color-mix(
+      in srgb,
+      var(--coras-color-scrim) 60%,
+      transparent
+    );
     --dialog-box-shadow: var(--coras-shadow-strong);
     --dialog-padding: 1.5rem;
     --dialog-header-padding: 1rem 1.5rem;
     --dialog-footer-padding: 1rem 1.5rem;
     --dialog-border-color: var(--coras-color-neutral-100);
-    --dialog-divider-color: var(--coras-color-neutral-200);
+    --dialog-divider-color: var(--coras-color-divider);
     --dialog-close-icon-bg: var(--coras-color-neutral-50);
     --dialog-close-icon-hover-bg: var(--coras-color-neutral-200);
     --dialog-close-icon-fill: var(--coras-color-neutral-800);
     --dialog-close-icon-size: 2rem;
-    --dialog-back-button-color: var(--coras-color-text-secondary);
+    --dialog-back-button-color: var(--coras-color-text-muted);
     --dialog-animation-duration: 200ms;
 
     display: contents;
   }
 
-  /* ── Overlay ── */
   .overlay {
     position: fixed;
     inset: 0;
@@ -47,7 +50,6 @@ export default css `
     animation: overlayFadeOut var(--dialog-animation-duration) ease forwards;
   }
 
-  /* ── Dialog panel ── */
   .dialog {
     position: relative;
     background-color: var(--dialog-bg-color);
@@ -72,7 +74,6 @@ export default css `
       cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
 
-  /* ── Icon area ── */
   .icon-area {
     display: flex;
     justify-content: center;
@@ -83,7 +84,6 @@ export default css `
     display: none;
   }
 
-  /* ── Header ── */
   .header {
     display: flex;
     align-items: center;
@@ -112,7 +112,7 @@ export default css `
   }
 
   .back-button:focus-visible {
-    outline: 2px solid var(--coras-color-primary-500);
+    outline: 2px solid var(--coras-color-primary);
     outline-offset: 2px;
   }
 
@@ -155,11 +155,10 @@ export default css `
   }
 
   .close-button:focus-visible {
-    outline: 2px solid var(--coras-color-primary-500);
+    outline: 2px solid var(--coras-color-primary);
     outline-offset: 2px;
   }
 
-  /* ── Description ── */
   .description {
     padding: 0 var(--dialog-padding);
   }
@@ -168,14 +167,12 @@ export default css `
     display: none;
   }
 
-  /* ── Content ── */
   .content {
     overflow-y: auto;
     overflow-x: hidden;
     padding: var(--dialog-padding);
   }
 
-  /* ── Footer ── */
   .footer {
     padding: var(--dialog-footer-padding);
     border-top: 1px solid var(--dialog-divider-color);
@@ -185,7 +182,6 @@ export default css `
     display: none;
   }
 
-  /* ── Expanded mode ── */
   :host([expanded]) .dialog {
     width: 100%;
     height: 100%;
@@ -197,7 +193,6 @@ export default css `
     padding: 0.5rem;
   }
 
-  /* ── Mobile full-screen ── */
   @media (max-width: 768px) {
     :host([mobile-full-screen]) .overlay {
       padding: 0;
@@ -213,7 +208,6 @@ export default css `
     }
   }
 
-  /* ── Short viewport ── */
   @media (max-height: 400px) {
     .dialog {
       margin-top: 1rem;
@@ -221,7 +215,6 @@ export default css `
     }
   }
 
-  /* ── Animations ── */
   @keyframes overlayFadeIn {
     from {
       opacity: 0;

package/dist/components/drawer/drawer.component.js

@@ -72,6 +72,12 @@ let CorasDrawer = class CorasDrawer extends OverlayMixin(LitElement) {
         >
           ${this.renderHeader()}
           <slot part="body" class="body" data-testid="drawer-body"></slot>
+          <slot
+            name="footer"
+            part="footer"
+            class="footer"
+            data-testid="drawer-footer"
+          ></slot>
         </div>
       </div>
     `;

package/dist/components/drawer/drawer.styles.js

@@ -11,7 +11,8 @@ export default css `
     --drawer-width: 400px;
 
     --icon-background-color: var(--coras-color-neutral-500);
-    --drawer-close-icon-fill: var(--coras-palette-white);
+    --drawer-background-color: var(--coras-color-background);
+    --drawer-close-icon-fill: var(--drawer-background-color);
     --drawer-label-font-size: var(--coras-font-size-xl);
   }
 
@@ -37,9 +38,9 @@ export default css `
       z-index: 2;
       max-width: 100%;
       max-height: 100%;
-      background-color: var(--coras-color-surface);
+      background-color: var(--drawer-background-color);
       box-shadow: 0 0 0 1px color-mix(in srgb, black, transparent 90%);
-      overflow: auto;
+      overflow: hidden;
       pointer-events: all;
       animation: slideOutRight 0.4s both;
       top: 0;
@@ -56,6 +57,7 @@ export default css `
       .header {
         display: flex;
         flex-direction: row;
+        flex-shrink: 0;
         padding: 1rem 1.5rem;
         justify-content: space-between;
         align-items: center;
@@ -84,6 +86,18 @@ export default css `
           font-size: var(--drawer-label-font-size);
         }
       }
+
+      .body {
+        display: block;
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow-y: auto;
+      }
+
+      .footer {
+        display: block;
+        flex-shrink: 0;
+      }
     }
 
     &.open {

package/dist/components/dropdown/dropdown.component.js

@@ -25,6 +25,13 @@ export class CorasDropdown extends LitElement {
         };
         this.handleDocumentMouseDown = (event) => {
             const path = event.composedPath();
+            // A node clicked inside the dropdown that re-renders on that click (e.g. a
+            // basket item removing itself) is detached before this handler runs, which
+            // makes composedPath() empty. That is an inside interaction, not a
+            // click-away, so leave the dropdown open.
+            if (path.length === 0) {
+                return;
+            }
             if (!path.includes(this.containingElement)) {
                 this.dispatchCloseEvent();
             }

package/dist/components/dropdown/dropdown.styles.js

@@ -4,9 +4,9 @@ export default css `
   ${component}
 
   :host {
-    --dropdown-popover-background-color: var(--coras-color-surface);
-    --dropdown-popover-arrow-icon-color: var(--coras-color-primary-400);
-    --dropdown-popover-border-color: var(--coras-color-neutral-200);
+    --dropdown-popover-background-color: var(--coras-color-menu);
+    --dropdown-popover-arrow-icon-color: var(--coras-color-primary);
+    --dropdown-popover-border-color: var(--coras-color-menu-border);
     --dropdown-popover-border-radius: var(--coras-radius-sm);
     --dropdown-popover-options-shadow: var(--coras-shadow-md);
 
@@ -39,9 +39,6 @@ export default css `
       display: block;
     }
 
-    /* The scroll/clip lives here so the floating box stays overflow-visible and
-       the arrow above its top edge is never clipped. Inherits the box radius so
-       scrolled content keeps the rounded corners. */
     .scroll {
       border-radius: inherit;
     }

package/dist/components/expiration-timer/expiration-timer.styles.js

@@ -4,11 +4,11 @@ export default css `
   ${component}
 
   :host {
-    --expiration-timer-background-color: var(--coras-color-info-50);
+    --expiration-timer-background-color: var(--coras-color-info-background);
     --expiration-timer-font-size: var(--coras-font-size-base);
     --expiration-timer-line-height: var(--coras-font-size-xl);
     --expiration-timer-font-weight: var(--coras-font-weight-normal);
-    --expiration-timer-color: var(--coras-color-info-900);
+    --expiration-timer-color: var(--coras-color-info);
 
     display: grid;
     grid-template-columns: auto 1fr auto;
@@ -17,7 +17,7 @@ export default css `
     width: 100%;
     padding: 0.5rem;
     background-color: var(--expiration-timer-background-color);
-    border-radius: 0.25rem;
+    border-radius: var(--coras-radius-control);
     font-size: var(--expiration-timer-font-size);
     line-height: var(--expiration-timer-line-height);
     font-weight: var(--expiration-timer-font-weight);

package/dist/components/explore-card/explore-card.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --explore-card-border-radius: var(--coras-radius-sm);
     --explore-card-shadow: var(--coras-shadow-lg);
-    --explore-card-label-color: var(--coras-color-primary-100);
+    --explore-card-label-color: var(--coras-palette-white);
     --explore-card-label-font-size: var(--coras-font-size-3xl);
     --explore-card-label-font-weight: var(--coras-font-weight-semibold);
   }

package/dist/components/filter-chip/filter-chip.styles.js

@@ -20,21 +20,23 @@ export default css `
     --filter-chip-font-size: var(--coras-font-size-base);
     --filter-chip-line-height: var(--coras-font-size-2xl);
     --filter-chip-box-shadow: var(--coras-shadow-md);
-    --filter-chip-hover-background-color: var(--coras-color-surface-hover);
-    --filter-chip-selected-background-color: var(--coras-color-primary-500);
+    --filter-chip-hover-background-color: color-mix(
+      in srgb,
+      var(--coras-color-background),
+      var(--coras-state-overlay) var(--coras-state-hover)
+    );
+    --filter-chip-selected-background-color: var(--coras-color-primary);
     --filter-chip-selected-hover-background-color: var(
-      --coras-color-primary-700
+      --coras-color-primary-button-hover
     );
     --filter-chip-selected-color: var(--coras-palette-white);
-    --filter-chip-disabled-color: var(--coras-color-neutral-500);
+    --filter-chip-disabled-color: var(--coras-color-text-disabled);
     --filter-chip-disabled-background-color: var(--coras-color-neutral-200);
     --filter-chip-icon-color: var(--coras-color-text);
     --filter-chip-selected-icon-color: var(--coras-palette-white);
-    --filter-chip-disabled-icon-color: var(--coras-color-neutral-500);
-    --filter-chip-text-selected-icon-color: var(--coras-color-primary-500);
-    --filter-chip-text-selected-hover-icon-color: var(
-      --coras-color-primary-700
-    );
+    --filter-chip-disabled-icon-color: var(--coras-color-text-disabled);
+    --filter-chip-text-selected-icon-color: var(--coras-color-primary);
+    --filter-chip-text-selected-hover-icon-color: var(--coras-color-primary);
   }
 
   button {

package/dist/components/filters-drawer/filters-drawer.component.js

@@ -35,7 +35,7 @@ let CorasFiltersDrawer = class CorasFiltersDrawer extends LitElement {
           <div class="title">${msg("Filters")}</div>
           <slot></slot>
         </div>
-        <div class="bottom">
+        <div slot="footer" class="bottom">
           <slot name="reset-action"></slot>
           <slot name="apply-action"></slot>
         </div>

package/dist/components/filters-drawer/filters-drawer.styles.js

@@ -6,12 +6,14 @@ export default css `
   :host {
     --filters-drawer-title-font-size: var(--coras-font-size-xl);
     --filters-drawer-title-font-weight: var(--coras-font-weight-semibold);
-    --filters-drawer-bottom-background-color: var(--coras-color-surface-muted);
-    --filters-drawer-bottom-border-color: var(--coras-color-neutral-200);
+    --filters-drawer-bottom-background-color: var(--coras-color-card-muted);
+    --filters-drawer-bottom-border-color: var(--coras-color-divider);
   }
 
   coras-drawer {
-    --drawer-width-mobile: 100vw;
+    /* Not 100vw: coras-drawer applies this as min-width, which overrides its own
+       max-width cap, so the window width would escape a narrower container. */
+    --drawer-width-mobile: 100%;
     --drawer-width: 400px;
 
     &::part(header-icon) {
@@ -21,10 +23,9 @@ export default css `
 
   .container {
     padding: 0.25rem 1rem 2rem 1.625rem;
-    height: 100%;
-    overflow-y: auto;
 
     .title {
+      font-family: var(--coras-font-family-heading);
       font-size: var(--filters-drawer-title-font-size);
       font-weight: var(--filters-drawer-title-font-weight);
       line-height: 1.75rem;

package/dist/components/image/image.styles.js

@@ -5,13 +5,13 @@ export default css `
 
   :host {
     --coras-image-border-radius: 0;
-    --coras-image-placeholder-bg: var(--coras-color-surface-sunken);
+    --coras-image-placeholder-bg: var(--coras-color-card-sunken);
     --coras-image-placeholder-shimmer: color-mix(
       in srgb,
-      var(--coras-color-surface-raised),
+      var(--coras-color-card),
       transparent 30%
     );
-    --coras-image-error-bg: var(--coras-color-surface-sunken);
+    --coras-image-error-bg: var(--coras-color-card-sunken);
     --coras-image-error-color: var(--coras-color-text-muted);
 
     display: block;

package/dist/components/image-chip/image-chip.styles.js

@@ -6,7 +6,7 @@ export default css `
   :host {
     --image-chip-font-weight: var(--coras-font-weight-semibold);
     --image-chip-font-size: var(--coras-font-size-sm);
-    --image-chip-color: var(--coras-color-secondary-700);
+    --image-chip-color: var(--coras-color-secondary);
     --image-chip-border-color: color-mix(
       in srgb,
       var(--coras-color-text),

package/dist/components/input-field/input-field.styles.js

@@ -6,10 +6,10 @@ export default css `
   :host {
     --input-field-background-color: var(--coras-input-field-background-color);
 
-    --input-border-color: var(--coras-color-neutral-400);
+    --input-border-color: var(--coras-color-field-border);
     --input-font-size: var(--coras-font-size-base);
-    --input-placeholder-color: var(--coras-color-text-secondary);
-    --input-background-color-focus: var(--coras-color-primary-100);
+    --input-placeholder-color: var(--coras-color-text-muted);
+    --input-background-color-focus: var(--coras-color-primary-tint);
 
     --field-label-font-size: var(--coras-font-size-base);
     --field-label-line-height: var(--coras-font-size-2xl);
@@ -27,19 +27,24 @@ export default css `
     --field-input-padding-left: 1rem;
     --field-input-padding-right: 1rem;
     --field-input-font-weight: inherit;
-    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-border-color: var(--coras-color-field-border);
     --field-input-border-radius: var(--coras-radius-field);
-    --field-input-placeholder-color: var(--coras-color-text-secondary);
+    /* The rounded variant is only used by the nav and location search, so it
+       follows the Search Field Corners brand setting. */
+    --field-input-rounded-border-radius: var(--coras-radius-search);
+    --field-input-placeholder-color: var(--coras-color-text-muted);
     --field-input-disabled-color: var(--coras-color-neutral-500);
     --field-input-disabled-background-color: var(--coras-color-neutral-50);
-    --field-input-error-color: var(--coras-color-error-500);
-    --field-input-error-helper-text-color: var(--coras-color-error-500);
-    --field-input-valid-color: var(--coras-color-success-500);
+    --field-input-error-color: var(--coras-color-error);
+    --field-input-error-helper-text-color: var(--coras-color-error);
+    --field-input-valid-color: var(--coras-color-success);
     --field-input-shadow: var(--coras-shadow-md);
-    --field-input-focused-border-color: var(--coras-color-primary-500);
+    --field-input-focused-border-color: var(--coras-color-primary);
 
-    --text-field-icon-color-valid: var(--coras-color-success-500);
-    --text-field-icon-color-error: var(--coras-color-error-500);
+    --text-field-icon-color-valid: var(--coras-color-success);
+    --text-field-icon-color-error: var(--coras-color-error);
+
+    --field-prefix-icon-color: var(--coras-color-text);
 
     display: block;
     width: 100%;
@@ -72,7 +77,7 @@ export default css `
       display: flex;
       border: 1px solid var(--field-input-border-color);
       border-radius: var(--field-input-border-radius);
-      background-color: var(--coras-color-surface);
+      background-color: var(--input-field-background-color);
       box-shadow: var(--field-input-box-shadow, none);
       position: relative;
       width: 100%;
@@ -103,11 +108,11 @@ export default css `
       }
 
       &.rounded {
-        border-radius: 100px;
+        border-radius: var(--field-input-rounded-border-radius);
 
         input,
         textarea {
-          border-radius: 100px;
+          border-radius: var(--field-input-rounded-border-radius);
         }
       }
 
@@ -130,7 +135,7 @@ export default css `
         }
 
         ::slotted(coras-icon) {
-          fill: var(--coras-color-text);
+          fill: var(--field-prefix-icon-color);
         }
       }
 
@@ -224,11 +229,11 @@ export default css `
         color: var(--field-input-color);
         font-weight: var(--field-input-font-weight);
         border: none;
-        background-color: var(--coras-color-surface);
+        background-color: var(--input-field-background-color);
         border-radius: var(--field-input-border-radius);
 
         &.compact {
-          height: 2.625rem; /* 42px */
+          height: 2.625rem;
         }
 
         &:disabled {

package/dist/components/itinerary/itinerary-item/itinerary-item.styles.js

@@ -8,7 +8,7 @@ export default css `
     --itinerary-item-dot-background-color: var(--coras-color-text);
     --itinerary-item-label-font-size: var(--coras-font-size-base);
     --itinerary-item-label-font-weight: var(--coras-font-weight-medium);
-    --itinerary-item-border-left-color: var(--coras-color-secondary-500);
+    --itinerary-item-border-left-color: var(--coras-color-secondary);
     --itinerary-item-description-font-size: var(--coras-font-size-base);
     --itinerary-item-description-font-weight: var(--coras-font-weight-normal);
     --itinerary-item-footer-font-size: var(--coras-font-size-xs);

package/dist/components/joined-fields/joined-fields.styles.js

@@ -13,11 +13,15 @@ export default css `
     --field-helper-text-font-size: var(--coras-font-size-xxs);
     --field-helper-text-line-height: var(--coras-font-size-sm);
     --field-helper-text-color: var(--coras-color-text);
-    --field-input-border-color: var(--coras-color-neutral-400);
+    --field-input-background-color: var(--coras-input-field-background-color);
+    --field-input-border-color: var(--coras-color-field-border);
     --field-input-border-radius: var(--coras-radius-field);
-    --field-input-error-color: var(--coras-color-error-500);
-    --field-input-valid-color: var(--coras-color-success-500);
-    --field-input-focused-border-color: var(--coras-color-primary-500);
+    /* Matches coras-field: the rounded variant is a search affordance, so it
+       follows the Search Field Corners brand setting. */
+    --field-input-rounded-border-radius: var(--coras-radius-search);
+    --field-input-error-color: var(--coras-color-error);
+    --field-input-valid-color: var(--coras-color-success);
+    --field-input-focused-border-color: var(--coras-color-primary);
 
     display: block;
     width: 100%;
@@ -50,14 +54,14 @@ export default css `
       display: flex;
       border: 1px solid var(--field-input-border-color);
       border-radius: var(--field-input-border-radius);
-      background-color: var(--coras-color-surface);
+      background-color: var(--field-input-background-color);
       box-shadow: var(--field-input-box-shadow, none);
       position: relative;
       width: 100%;
       overflow: hidden;
 
       &.rounded {
-        border-radius: 100px;
+        border-radius: var(--field-input-rounded-border-radius);
       }
 
       &.error {

package/dist/components/loading-spinner/loading-spinner.styles.js

@@ -14,7 +14,7 @@ export default css `
     box-sizing: border-box;
     border-radius: 50%;
     border: 3px solid var(--coras-color-neutral-300);
-    border-bottom-color: var(--coras-color-primary-700);
+    border-bottom-color: var(--coras-color-primary);
     animation: rotation 1s linear infinite;
   }
 

package/dist/components/location-image/location-image.component.d.ts

@@ -8,6 +8,12 @@ export declare class CorasLocationImage extends LitElement {
     city: string | undefined;
     imageExtension: string;
     alt: string;
+    /**
+     * Intrinsic size of the banner. Kept in sync with the rendered box
+     * (`--location-image-max-width` / `--location-image-height`) so imgix crops
+     * to the ratio that is actually displayed and `object-fit` has nothing left
+     * to trim.
+     */
     width: number;
     height: number;
     loading: boolean;

package/dist/components/location-image/location-image.component.js

@@ -10,6 +10,12 @@ import { property, state } from "lit/decorators.js";
 import { getLocationImageURL } from "../../core/images/helpers.js";
 import "../image/image.js";
 import styles from "./location-image.styles.js";
+/**
+ * Candidate widths for the banner srcset. Capped at the width of the source
+ * assets (1160px) - wider candidates only make imgix upscale the same pixels
+ * and ship more bytes for no extra detail.
+ */
+const BANNER_WIDTHS = "480,640,768,952,1160";
 let CorasLocationImage = class CorasLocationImage extends LitElement {
     constructor() {
         super(...arguments);
@@ -18,8 +24,14 @@ let CorasLocationImage = class CorasLocationImage extends LitElement {
         this.country = "ireland";
         this.imageExtension = "png";
         this.alt = msg("Location image");
-        this.width = 1160;
-        this.height = 160;
+        /**
+         * Intrinsic size of the banner. Kept in sync with the rendered box
+         * (`--location-image-max-width` / `--location-image-height`) so imgix crops
+         * to the ratio that is actually displayed and `object-fit` has nothing left
+         * to trim.
+         */
+        this.width = 952;
+        this.height = 148;
         this.loading = false;
         this.currentSrc = "";
         this.fallbackTried = false;
@@ -86,6 +98,7 @@ let CorasLocationImage = class CorasLocationImage extends LitElement {
         width=${this.width}
         height=${this.height}
         preset="header-banner"
+        widths=${BANNER_WIDTHS}
         loading="eager"
         @coras-image-load=${this.handleImageLoad}
         @coras-image-error=${this.handleImageError}

package/dist/components/location-image/location-image.styles.js

@@ -12,7 +12,7 @@ export default css `
     --location-image-border-radius: 40px 2px;
     --location-image-drop-shadow: 0px 4px 4px
       color-mix(in srgb, black, transparent 75%);
-    --location-image-placeholder-bg: var(--coras-color-surface-sunken);
+    --location-image-placeholder-bg: var(--coras-color-card-sunken);
     --location-image-placeholder-color: var(--coras-color-text-muted);
   }
 

package/dist/components/locations-results/locations-results.styles.js

@@ -4,16 +4,14 @@ export default css `
   ${component}
 
   :host {
-    --locations-results-background-color: var(--coras-color-surface);
+    --locations-results-background-color: var(--coras-color-menu);
     --locations-results-font-size: var(--coras-font-size-sm);
-    --locations-results-hover-background-color: var(
-      --coras-color-surface-hover
-    );
-    --locations-results-popular-border-color: var(--coras-color-neutral-200);
+    --locations-results-hover-background-color: var(--coras-color-menu-hover);
+    --locations-results-popular-border-color: var(--coras-color-divider);
     --locations-results-popular-font-size: var(--coras-font-size-sm);
     --locations-results-popular-border-radius: var(--coras-radius-chip);
     --locations-results-popular-background-color: var(
-      --coras-color-primary-300
+      --coras-color-primary-tint
     );
 
     background-color: var(--locations-results-background-color);

package/dist/components/marketing-tag/marketing-tag.styles.js

@@ -8,7 +8,7 @@ export default css `
 
     --marketing-tag-line-height: 1rem;
     --marketing-tag-letter-spacing: 0.01em;
-    --marketing-tag-background-color: var(--coras-color-info-500);
+    --marketing-tag-background-color: var(--coras-color-info);
 
     --marketing-tag-border-radius: var(--coras-radius-md);
     --marketing-tag-font-size: var(--coras-font-size-xs);

package/dist/components/message-card/message-card.styles.js

@@ -10,8 +10,8 @@ export default css `
     .container {
       border-radius: 20px;
       padding: 16px;
-      border: 1px solid var(--coras-color-info-500);
-      background-color: var(--coras-color-info-50);
+      border: 1px solid var(--coras-color-info);
+      background-color: var(--coras-color-info-background);
       display: flex;
       align-items: flex-start;
       gap: 12px;
@@ -28,7 +28,7 @@ export default css `
           display: flex;
           align-items: center;
           justify-content: center;
-          fill: var(--coras-color-info-500);
+          fill: var(--coras-color-info);
         }
       }
 
@@ -59,12 +59,12 @@ export default css `
 
   :host([variant="error"]) {
     .container {
-      border-color: var(--coras-color-error-500);
-      background-color: var(--coras-color-error-50);
+      border-color: var(--coras-color-error);
+      background-color: var(--coras-color-error-background);
 
       .icon {
         coras-icon {
-          fill: var(--coras-color-error-500);
+          fill: var(--coras-color-error);
         }
       }
     }

package/dist/components/option-group/option-chip/option-chip.styles.js

@@ -11,15 +11,16 @@ export default css `
     --option-chip-font-size: var(--coras-font-size-sm);
     --option-chip-font-weight: var(--coras-font-weight-normal);
     --option-chip-line-height: var(--coras-font-size-sm);
-    --option-chip-checked-background-color: var(--coras-color-secondary-500);
+    --option-chip-checked-background-color: var(--coras-color-secondary);
     --option-chip-checked-color: var(--coras-palette-white);
-    --option-chip-hover-background-color: var(--coras-color-surface-hover);
+    --option-chip-background-color: var(--coras-color-field);
+    --option-chip-hover-background-color: var(--coras-color-field-hover);
     --option-chip-hover-border-color: var(--coras-color-neutral-700);
     --option-chip-hover-color: var(--coras-color-text);
 
     cursor: pointer;
     display: inline-flex;
-    background-color: transparent;
+    background-color: var(--option-chip-background-color);
     border-radius: var(--option-chip-border-radius);
     border: 1px solid var(--option-chip-border-color);
     padding: 8px;