@servicetitan/anvil2 3.14.0 → 3.14.1

package/dist/src/components/Page/PageHeader.d.ts

@@ -92,7 +92,9 @@ export type PageHeaderProps = Omit<ComponentPropsWithoutRef<"header">, "title">
      */
     preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
     /**
-     * Layout configuration for the header
+     * Header {@link LayoutProps}. When unset, the header uses the default fixed
+     * 1280px layout. Match the `fluid` and `variant` of the `Layout` inside
+     * `Page.Content`.
      */
     layout?: LayoutProps;
 };
@@ -105,7 +107,7 @@ export type PageHeaderProps = Omit<ComponentPropsWithoutRef<"header">, "title">
  * - Status chips display
  * - Primary and secondary action buttons
  * - Preference action button/link
- * - Responsive layout with fluid grid
+ * - Responsive layout grid
  * - Accessibility support with proper ARIA labels
  * - Flexible layout configuration
  * - Description content support
@@ -150,7 +152,9 @@ export declare const PageHeader: import('react').ForwardRefExoticComponent<Omit<
      */
     preferenceAction?: PreferenceButtonProps | PreferenceLinkProps;
     /**
-     * Layout configuration for the header
+     * Header {@link LayoutProps}. When unset, the header uses the default fixed
+     * 1280px layout. Match the `fluid` and `variant` of the `Layout` inside
+     * `Page.Content`.
      */
     layout?: LayoutProps;
 } & import('react').RefAttributes<HTMLHeadElement>>;

package/dist/token/core/component-variables.scss

@@ -192,82 +192,121 @@ $light: (
   chip-close-background-color-active: var(--a2-color-neutral-400, #8b8b8b),
   chip-default-background-color: var(--a2-color-neutral-20, #f9f9f9),
   chip-default-background-color-hover: var(--a2-color-neutral-50, #eeeeee),
-  chip-default-background-color-active: var(--a2-color-neutral-200, #c4c4c4),
+  chip-default-background-color-active: var(--a2-color-neutral-50, #eeeeee),
   chip-default-border-color: var(--a2-color-neutral-50, #eeeeee),
   chip-default-border-color-hover: var(--a2-color-neutral-200, #c4c4c4),
   chip-default-border-color-active: var(--a2-color-neutral-300, #a8a8a8),
+  chip-default-foreground-color: var(--a2-color-neutral-950, #040404),
+  chip-default-foreground-color-hover: var(--a2-color-neutral-950, #040404),
+  chip-default-foreground-color-active: var(--a2-color-neutral-950, #040404),
   chip-info-background-color: var(--a2-color-blue-100, #cce3ff),
   chip-info-background-color-hover: var(--a2-color-blue-200, #9ecaff),
   chip-info-background-color-active: var(--a2-color-blue-200, #9ecaff),
   chip-info-border-color: var(--a2-color-blue-200, #9ecaff),
   chip-info-border-color-hover: var(--a2-color-blue-300, #70b1ff),
   chip-info-border-color-active: var(--a2-color-blue-400, #3d95ff),
+  chip-info-foreground-color: var(--a2-color-blue-900, #002047),
+  chip-info-foreground-color-hover: var(--a2-color-blue-900, #002047),
+  chip-info-foreground-color-active: var(--a2-color-blue-950, #000b19),
   chip-success-background-color: var(--a2-color-green-100, #b8f5dd),
   chip-success-background-color-hover: var(--a2-color-green-200, #70ebbc),
-  chip-success-background-color-active: var(--a2-color-green-300, #3be3a2),
+  chip-success-background-color-active: var(--a2-color-green-200, #70ebbc),
   chip-success-border-color: var(--a2-color-green-200, #70ebbc),
   chip-success-border-color-hover: var(--a2-color-green-300, #3be3a2),
   chip-success-border-color-active: var(--a2-color-green-400, #0bd085),
+  chip-success-foreground-color: var(--a2-color-green-900, #022c1c),
+  chip-success-foreground-color-hover: var(--a2-color-green-900, #022c1c),
+  chip-success-foreground-color-active: var(--a2-color-green-950, #010f0a),
   chip-warning-background-color: var(--a2-color-yellow-100, #fff9e2),
   chip-warning-background-color-hover: var(--a2-color-yellow-200, #fff0b1),
-  chip-warning-background-color-active: var(--a2-color-yellow-300, #ffe278),
+  chip-warning-background-color-active: var(--a2-color-yellow-200, #fff0b1),
   chip-warning-border-color: var(--a2-color-yellow-200, #fff0b1),
   chip-warning-border-color-hover: var(--a2-color-yellow-300, #ffe278),
   chip-warning-border-color-active: var(--a2-color-yellow-400, #ffc902),
+  chip-warning-foreground-color: var(--a2-color-yellow-900, #382500),
+  chip-warning-foreground-color-hover: var(--a2-color-yellow-900, #382500),
+  chip-warning-foreground-color-active: var(--a2-color-yellow-950, #191100),
   chip-danger-background-color: var(--a2-color-red-50, #ffe9e5),
   chip-danger-background-color-hover: var(--a2-color-red-100, #ffd4cc),
-  chip-danger-background-color-active: var(--a2-color-red-200, #ffac9e),
+  chip-danger-background-color-active: var(--a2-color-red-100, #ffd4cc),
   chip-danger-border-color: var(--a2-color-red-100, #ffd4cc),
   chip-danger-border-color-hover: var(--a2-color-red-200, #ffac9e),
   chip-danger-border-color-active: var(--a2-color-red-300, #ff8670),
+  chip-danger-foreground-color: var(--a2-color-red-900, #470b00),
+  chip-danger-foreground-color-hover: var(--a2-color-red-900, #470b00),
+  chip-danger-foreground-color-active: var(--a2-color-red-950, #0a0200),
   chip-in-progress-background-color: var(--a2-color-cyan-50, #daf7fc),
   chip-in-progress-background-color-hover: var(--a2-color-cyan-100, #c2f2fb),
-  chip-in-progress-background-color-active: var(--a2-color-cyan-200, #7fe5f6),
+  chip-in-progress-background-color-active: var(--a2-color-cyan-100, #c2f2fb),
   chip-in-progress-border-color: var(--a2-color-cyan-100, #c2f2fb),
   chip-in-progress-border-color-hover: var(--a2-color-cyan-200, #7fe5f6),
   chip-in-progress-border-color-active: var(--a2-color-cyan-300, #45d8f2),
+  chip-in-progress-foreground-color: var(--a2-color-cyan-900, #032025),
+  chip-in-progress-foreground-color-hover: var(--a2-color-cyan-900, #032025),
+  chip-in-progress-foreground-color-active: var(--a2-color-cyan-950, #011013),
   chip-table-entity-background-color: var(--a2-color-blue-grey-100, #dce4ea),
   chip-table-entity-background-color-hover: var(--a2-color-blue-grey-200, #b9c9d5),
-  chip-table-entity-background-color-active: var(--a2-color-blue-grey-300, #99b1c2),
+  chip-table-entity-background-color-active: var(--a2-color-blue-grey-200, #b9c9d5),
   chip-table-entity-border-color: var(--a2-color-blue-grey-200, #b9c9d5),
   chip-table-entity-border-color-hover: var(--a2-color-blue-grey-300, #99b1c2),
   chip-table-entity-border-color-active: var(--a2-color-blue-grey-400, #7899b0),
+  chip-table-entity-foreground-color: var(--a2-color-blue-grey-900, #192329),
+  chip-table-entity-foreground-color-hover: var(--a2-color-blue-grey-900, #192329),
+  chip-table-entity-foreground-color-active: var(--a2-color-blue-grey-950, #090d10),
   chip-brown-background-color: var(--a2-color-brown-100, #eddace),
-  chip-brown-background-color-hover: var(--a2-color-brown-100, #eddace),
-  chip-brown-background-color-active: var(--a2-color-brown-100, #eddace),
+  chip-brown-background-color-hover: var(--a2-color-brown-200, #e1c1ad),
+  chip-brown-background-color-active: var(--a2-color-brown-200, #e1c1ad),
   chip-brown-border-color: var(--a2-color-brown-200, #e1c1ad),
   chip-brown-border-color-hover: var(--a2-color-brown-300, #d4a487),
   chip-brown-border-color-active: var(--a2-color-brown-400, #c5855e),
+  chip-brown-foreground-color: var(--a2-color-brown-900, #1e120b),
+  chip-brown-foreground-color-hover: var(--a2-color-brown-900, #1e120b),
+  chip-brown-foreground-color-active: var(--a2-color-brown-950, #0c0704),
   chip-lime-background-color: var(--a2-color-lime-100, #e3eccf),
   chip-lime-background-color-hover: var(--a2-color-lime-200, #c3d595),
-  chip-lime-background-color-active: var(--a2-color-lime-300, #a8c26a),
+  chip-lime-background-color-active: var(--a2-color-lime-200, #c3d595),
   chip-lime-border-color: var(--a2-color-lime-200, #c3d595),
   chip-lime-border-color-hover: var(--a2-color-lime-300, #a8c26a),
   chip-lime-border-color-active: var(--a2-color-lime-400, #8aad39),
+  chip-lime-foreground-color: var(--a2-color-lime-900, #111801),
+  chip-lime-foreground-color-hover: var(--a2-color-lime-900, #111801),
+  chip-lime-foreground-color-active: var(--a2-color-lime-950, #0a0f01),
   chip-magenta-background-color: var(--a2-color-magenta-100, #f8ddef),
   chip-magenta-background-color-hover: var(--a2-color-magenta-200, #efb3db),
-  chip-magenta-background-color-active: var(--a2-color-magenta-300, #e892cc),
+  chip-magenta-background-color-active: var(--a2-color-magenta-200, #efb3db),
   chip-magenta-border-color: var(--a2-color-magenta-200, #efb3db),
   chip-magenta-border-color-hover: var(--a2-color-magenta-300, #e892cc),
   chip-magenta-border-color-active: var(--a2-color-magenta-400, #eb61be),
+  chip-magenta-foreground-color: var(--a2-color-magenta-900, #26081c),
+  chip-magenta-foreground-color-hover: var(--a2-color-magenta-900, #26081c),
+  chip-magenta-foreground-color-active: var(--a2-color-magenta-950, #15040f),
   chip-mauve-background-color: var(--a2-color-mauves-100, #fff4f0),
   chip-mauve-background-color-hover: var(--a2-color-mauves-200, #ffe4db),
-  chip-mauve-background-color-active: var(--a2-color-mauves-300, #ffd1c2),
+  chip-mauve-background-color-active: var(--a2-color-mauves-200, #ffe4db),
   chip-mauve-border-color: var(--a2-color-mauves-100, #fff4f0),
   chip-mauve-border-color-hover: var(--a2-color-mauves-200, #ffe4db),
   chip-mauve-border-color-active: var(--a2-color-mauves-300, #ffd1c2),
+  chip-mauve-foreground-color: var(--a2-color-mauves-900, #411d11),
+  chip-mauve-foreground-color-hover: var(--a2-color-mauves-900, #411d11),
+  chip-mauve-foreground-color-active: var(--a2-color-mauves-950, #200e08),
   chip-orange-background-color: var(--a2-color-orange-100, #ffddb7),
-  chip-orange-background-color-hover: var(--a2-color-orange-100, #ffddb7),
-  chip-orange-background-color-active: var(--a2-color-orange-100, #ffddb7),
+  chip-orange-background-color-hover: var(--a2-color-orange-200, #ffc07a),
+  chip-orange-background-color-active: var(--a2-color-orange-200, #ffc07a),
   chip-orange-border-color: var(--a2-color-orange-200, #ffc07a),
   chip-orange-border-color-hover: var(--a2-color-orange-300, #ffa037),
   chip-orange-border-color-active: var(--a2-color-orange-400, #e37700),
+  chip-orange-foreground-color: var(--a2-color-orange-900, #2e1900),
+  chip-orange-foreground-color-hover: var(--a2-color-orange-900, #2e1900),
+  chip-orange-foreground-color-active: var(--a2-color-orange-950, #140b00),
   chip-purple-background-color: var(--a2-color-purple-100, #e7e4f6),
-  chip-purple-background-color-hover: var(--a2-color-purple-100, #e7e4f6),
-  chip-purple-background-color-active: var(--a2-color-purple-100, #e7e4f6),
+  chip-purple-background-color-hover: var(--a2-color-purple-200, #c9c2eb),
+  chip-purple-background-color-active: var(--a2-color-purple-200, #c9c2eb),
   chip-purple-border-color: var(--a2-color-purple-200, #c9c2eb),
   chip-purple-border-color-hover: var(--a2-color-purple-300, #b1a7e2),
   chip-purple-border-color-active: var(--a2-color-purple-400, #9688d7),
+  chip-purple-foreground-color: var(--a2-color-purple-900, #191338),
+  chip-purple-foreground-color-hover: var(--a2-color-purple-900, #191338),
+  chip-purple-foreground-color-active: var(--a2-color-purple-950, #100c25),
   combobox-item-default-background-color: var(--a2-background-color-transparent-default, "rgba(0, 0, 0, 0)"),
   combobox-item-default-background-color-hover: #8b8b8b14,
   combobox-item-default-background-color-active: #8b8b8b29,
@@ -806,82 +845,121 @@ $dark: (
   chip-close-background-color-active: var(--a2-color-neutral-300, #a8a8a8),
   chip-default-background-color: var(--a2-color-neutral-800, #292929),
   chip-default-background-color-hover: var(--a2-color-neutral-700, #404040),
-  chip-default-background-color-active: var(--a2-color-neutral-500, #707070),
-  chip-default-border-color: var(--a2-color-neutral-700, #404040),
-  chip-default-border-color-hover: var(--a2-color-neutral-600, #545454),
-  chip-default-border-color-active: var(--a2-color-neutral-500, #707070),
+  chip-default-background-color-active: var(--a2-color-neutral-700, #404040),
+  chip-default-border-color: var(--a2-color-neutral-600, #545454),
+  chip-default-border-color-hover: var(--a2-color-neutral-500, #707070),
+  chip-default-border-color-active: var(--a2-color-neutral-400, #8b8b8b),
+  chip-default-foreground-color: var(--a2-color-neutral-30, #f6f6f6),
+  chip-default-foreground-color-hover: var(--a2-color-neutral-30, #f6f6f6),
+  chip-default-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-info-background-color: var(--a2-color-blue-900, #002047),
   chip-info-background-color-hover: var(--a2-color-blue-800, #003472),
-  chip-info-background-color-active: var(--a2-color-blue-700, #1d4ca3),
-  chip-info-border-color: var(--a2-color-blue-950, #000b19),
-  chip-info-border-color-hover: var(--a2-color-blue-900, #002047),
-  chip-info-border-color-active: var(--a2-color-blue-800, #003472),
+  chip-info-background-color-active: var(--a2-color-blue-800, #003472),
+  chip-info-border-color: var(--a2-color-blue-700, #1d4ca3),
+  chip-info-border-color-hover: var(--a2-color-blue-600, #0265dc),
+  chip-info-border-color-active: var(--a2-color-blue-500, #1a82ff),
+  chip-info-foreground-color: var(--a2-color-blue-10, #fafcff),
+  chip-info-foreground-color-hover: var(--a2-color-blue-10, #fafcff),
+  chip-info-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-success-background-color: var(--a2-color-green-900, #022c1c),
   chip-success-background-color-hover: var(--a2-color-green-800, #04482e),
-  chip-success-background-color-active: var(--a2-color-green-700, #05613e),
-  chip-success-border-color: var(--a2-color-green-950, #010f0a),
-  chip-success-border-color-hover: var(--a2-color-green-900, #022c1c),
-  chip-success-border-color-active: var(--a2-color-green-800, #04482e),
+  chip-success-background-color-active: var(--a2-color-green-800, #04482e),
+  chip-success-border-color: var(--a2-color-green-700, #05613e),
+  chip-success-border-color-hover: var(--a2-color-green-600, #077e50),
+  chip-success-border-color-active: var(--a2-color-green-500, #0aa86c),
+  chip-success-foreground-color: var(--a2-color-green-10, #f5fefb),
+  chip-success-foreground-color-hover: var(--a2-color-green-10, #f5fefb),
+  chip-success-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-warning-background-color: var(--a2-color-yellow-900, #382500),
   chip-warning-background-color-hover: var(--a2-color-yellow-800, #704b00),
-  chip-warning-background-color-active: var(--a2-color-yellow-700, #c98600),
-  chip-warning-border-color: var(--a2-color-yellow-950, #191100),
-  chip-warning-border-color-hover: var(--a2-color-yellow-900, #382500),
-  chip-warning-border-color-active: var(--a2-color-yellow-800, #704b00),
+  chip-warning-background-color-active: var(--a2-color-yellow-800, #704b00),
+  chip-warning-border-color: var(--a2-color-yellow-800, #704b00),
+  chip-warning-border-color-hover: var(--a2-color-yellow-700, #c98600),
+  chip-warning-border-color-active: var(--a2-color-yellow-600, #de9500),
+  chip-warning-foreground-color: var(--a2-color-yellow-10, #fffef8),
+  chip-warning-foreground-color-hover: var(--a2-color-yellow-10, #fffef8),
+  chip-warning-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-danger-background-color: var(--a2-color-red-900, #470b00),
   chip-danger-background-color-hover: var(--a2-color-red-800, #731100),
-  chip-danger-background-color-active: var(--a2-color-red-700, #a31900),
-  chip-danger-border-color: var(--a2-color-red-950, #0a0200),
-  chip-danger-border-color-hover: var(--a2-color-red-900, #470b00),
-  chip-danger-border-color-active: var(--a2-color-red-800, #731100),
+  chip-danger-background-color-active: var(--a2-color-red-800, #731100),
+  chip-danger-border-color: var(--a2-color-red-700, #a31900),
+  chip-danger-border-color-hover: var(--a2-color-red-600, #d62100),
+  chip-danger-border-color-active: var(--a2-color-red-500, #ff3914),
+  chip-danger-foreground-color: var(--a2-color-red-10, #fffbfa),
+  chip-danger-foreground-color-hover: var(--a2-color-red-10, #fffbfa),
+  chip-danger-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-in-progress-background-color: var(--a2-color-cyan-900, #032025),
   chip-in-progress-background-color-hover: var(--a2-color-cyan-800, #05424d),
-  chip-in-progress-background-color-active: var(--a2-color-cyan-700, #075563),
-  chip-in-progress-border-color: var(--a2-color-cyan-950, #011013),
-  chip-in-progress-border-color-hover: var(--a2-color-cyan-900, #032025),
-  chip-in-progress-border-color-active: var(--a2-color-cyan-800, #05424d),
+  chip-in-progress-background-color-active: var(--a2-color-cyan-800, #05424d),
+  chip-in-progress-border-color: var(--a2-color-cyan-700, #075563),
+  chip-in-progress-border-color-hover: var(--a2-color-cyan-600, #0a7a8e),
+  chip-in-progress-border-color-active: var(--a2-color-cyan-500, #0da2bd),
+  chip-in-progress-foreground-color: var(--a2-color-cyan-10, #f2fcfe),
+  chip-in-progress-foreground-color-hover: var(--a2-color-cyan-10, #f2fcfe),
+  chip-in-progress-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-table-entity-background-color: var(--a2-color-blue-grey-900, #192329),
   chip-table-entity-background-color-hover: var(--a2-color-blue-grey-800, #24333d),
-  chip-table-entity-background-color-active: var(--a2-color-blue-grey-700, #344856),
-  chip-table-entity-border-color: var(--a2-color-blue-grey-950, #090d10),
-  chip-table-entity-border-color-hover: var(--a2-color-blue-grey-900, #192329),
-  chip-table-entity-border-color-active: var(--a2-color-blue-grey-800, #24333d),
+  chip-table-entity-background-color-active: var(--a2-color-blue-grey-800, #24333d),
+  chip-table-entity-border-color: var(--a2-color-blue-grey-600, #445e71),
+  chip-table-entity-border-color-hover: var(--a2-color-blue-grey-500, #55768e),
+  chip-table-entity-border-color-active: var(--a2-color-blue-grey-400, #7899b0),
+  chip-table-entity-foreground-color: var(--a2-color-blue-grey-10, #f7f9fa),
+  chip-table-entity-foreground-color-hover: var(--a2-color-blue-grey-10, #f7f9fa),
+  chip-table-entity-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-brown-background-color: var(--a2-color-brown-900, #1e120b),
   chip-brown-background-color-hover: var(--a2-color-brown-800, #432918),
-  chip-brown-background-color-active: var(--a2-color-brown-700, #5e3922),
-  chip-brown-border-color: var(--a2-color-brown-950, #0c0704),
-  chip-brown-border-color-hover: var(--a2-color-brown-900, #1e120b),
-  chip-brown-border-color-active: var(--a2-color-brown-800, #432918),
+  chip-brown-background-color-active: var(--a2-color-brown-800, #432918),
+  chip-brown-border-color: var(--a2-color-brown-600, #74462a),
+  chip-brown-border-color-hover: var(--a2-color-brown-500, #a9663d),
+  chip-brown-border-color-active: var(--a2-color-brown-400, #c5855e),
+  chip-brown-foreground-color: var(--a2-color-brown-10, #fefcfb),
+  chip-brown-foreground-color-hover: var(--a2-color-brown-10, #fefcfb),
+  chip-brown-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-lime-background-color: var(--a2-color-lime-900, #111801),
   chip-lime-background-color-hover: var(--a2-color-lime-800, #2a3a03),
-  chip-lime-background-color-active: var(--a2-color-lime-700, #3a5007),
-  chip-lime-border-color: var(--a2-color-lime-950, #0a0f01),
-  chip-lime-border-color-hover: var(--a2-color-lime-900, #111801),
-  chip-lime-border-color-active: var(--a2-color-lime-800, #2a3a03),
+  chip-lime-background-color-active: var(--a2-color-lime-800, #2a3a03),
+  chip-lime-border-color: var(--a2-color-lime-700, #3a5007),
+  chip-lime-border-color-hover: var(--a2-color-lime-600, #56750b),
+  chip-lime-border-color-active: var(--a2-color-lime-500, #6b9013),
+  chip-lime-foreground-color: var(--a2-color-lime-10, #fdfdfc),
+  chip-lime-foreground-color-hover: var(--a2-color-lime-10, #fdfdfc),
+  chip-lime-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-magenta-background-color: var(--a2-color-magenta-900, #26081c),
   chip-magenta-background-color-hover: var(--a2-color-magenta-800, #591342),
-  chip-magenta-background-color-active: var(--a2-color-magenta-700, #831b60),
-  chip-magenta-border-color: var(--a2-color-magenta-950, #15040f),
-  chip-magenta-border-color-hover: var(--a2-color-magenta-900, #26081c),
-  chip-magenta-border-color-active: var(--a2-color-magenta-800, #591342),
+  chip-magenta-background-color-active: var(--a2-color-magenta-800, #591342),
+  chip-magenta-border-color: var(--a2-color-magenta-700, #831b60),
+  chip-magenta-border-color-hover: var(--a2-color-magenta-600, #be288d),
+  chip-magenta-border-color-active: var(--a2-color-magenta-500, #d741a6),
+  chip-magenta-foreground-color: var(--a2-color-magenta-10, #fefbfd),
+  chip-magenta-foreground-color-hover: var(--a2-color-magenta-10, #fefbfd),
+  chip-magenta-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-mauve-background-color: var(--a2-color-mauves-900, #411d11),
   chip-mauve-background-color-hover: var(--a2-color-mauves-800, #823a21),
-  chip-mauve-background-color-active: var(--a2-color-mauves-700, #d27151),
-  chip-mauve-border-color: var(--a2-color-mauves-950, #200e08),
-  chip-mauve-border-color-hover: var(--a2-color-mauves-900, #411d11),
-  chip-mauve-border-color-active: var(--a2-color-mauves-800, #823a21),
+  chip-mauve-background-color-active: var(--a2-color-mauves-800, #823a21),
+  chip-mauve-border-color: var(--a2-color-mauves-800, #823a21),
+  chip-mauve-border-color-hover: var(--a2-color-mauves-700, #d27151),
+  chip-mauve-border-color-active: var(--a2-color-mauves-600, #d88569),
+  chip-mauve-foreground-color: var(--a2-color-mauves-10, #fffbfa),
+  chip-mauve-foreground-color-hover: var(--a2-color-mauves-10, #fffbfa),
+  chip-mauve-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-orange-background-color: var(--a2-color-orange-900, #2e1900),
   chip-orange-background-color-hover: var(--a2-color-orange-800, #4d2800),
-  chip-orange-background-color-active: var(--a2-color-orange-700, #693700),
-  chip-orange-border-color: var(--a2-color-orange-950, #140b00),
-  chip-orange-border-color-hover: var(--a2-color-orange-900, #2e1900),
-  chip-orange-border-color-active: var(--a2-color-orange-800, #4d2800),
+  chip-orange-background-color-active: var(--a2-color-orange-800, #4d2800),
+  chip-orange-border-color: var(--a2-color-orange-700, #693700),
+  chip-orange-border-color-hover: var(--a2-color-orange-600, #964f00),
+  chip-orange-border-color-active: var(--a2-color-orange-500, #c16500),
+  chip-orange-foreground-color: var(--a2-color-orange-10, #fff8f1),
+  chip-orange-foreground-color-hover: var(--a2-color-orange-10, #fff8f1),
+  chip-orange-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   chip-purple-background-color: var(--a2-color-purple-900, #191338),
   chip-purple-background-color-hover: var(--a2-color-purple-800, #2e2267),
-  chip-purple-background-color-active: var(--a2-color-purple-700, #3f2f8e),
-  chip-purple-border-color: var(--a2-color-purple-950, #100c25),
-  chip-purple-border-color-hover: var(--a2-color-purple-900, #191338),
-  chip-purple-border-color-active: var(--a2-color-purple-800, #2e2267),
+  chip-purple-background-color-active: var(--a2-color-purple-800, #2e2267),
+  chip-purple-border-color: var(--a2-color-purple-700, #3f2f8e),
+  chip-purple-border-color-hover: var(--a2-color-purple-600, #5c47c2),
+  chip-purple-border-color-active: var(--a2-color-purple-500, #7766cc),
+  chip-purple-foreground-color: var(--a2-color-purple-10, #fcfbfe),
+  chip-purple-foreground-color-hover: var(--a2-color-purple-10, #fcfbfe),
+  chip-purple-foreground-color-active: var(--a2-color-neutral-0, #ffffff),
   combobox-item-default-background-color: var(--a2-background-color-transparent-default, "rgba(0, 0, 0, 0)"),
   combobox-item-default-background-color-hover: #ffffff14,
   combobox-item-default-background-color-active: #ffffff29,

package/dist/token/core/component.d.ts

@@ -204,78 +204,117 @@ export declare const ChipDefaultBackgroundColorActive: TokenObj;
 export declare const ChipDefaultBorderColor: TokenObj;
 export declare const ChipDefaultBorderColorHover: TokenObj;
 export declare const ChipDefaultBorderColorActive: TokenObj;
+export declare const ChipDefaultForegroundColor: TokenObj;
+export declare const ChipDefaultForegroundColorHover: TokenObj;
+export declare const ChipDefaultForegroundColorActive: TokenObj;
 export declare const ChipInfoBackgroundColor: TokenObj;
 export declare const ChipInfoBackgroundColorHover: TokenObj;
 export declare const ChipInfoBackgroundColorActive: TokenObj;
 export declare const ChipInfoBorderColor: TokenObj;
 export declare const ChipInfoBorderColorHover: TokenObj;
 export declare const ChipInfoBorderColorActive: TokenObj;
+export declare const ChipInfoForegroundColor: TokenObj;
+export declare const ChipInfoForegroundColorHover: TokenObj;
+export declare const ChipInfoForegroundColorActive: TokenObj;
 export declare const ChipSuccessBackgroundColor: TokenObj;
 export declare const ChipSuccessBackgroundColorHover: TokenObj;
 export declare const ChipSuccessBackgroundColorActive: TokenObj;
 export declare const ChipSuccessBorderColor: TokenObj;
 export declare const ChipSuccessBorderColorHover: TokenObj;
 export declare const ChipSuccessBorderColorActive: TokenObj;
+export declare const ChipSuccessForegroundColor: TokenObj;
+export declare const ChipSuccessForegroundColorHover: TokenObj;
+export declare const ChipSuccessForegroundColorActive: TokenObj;
 export declare const ChipWarningBackgroundColor: TokenObj;
 export declare const ChipWarningBackgroundColorHover: TokenObj;
 export declare const ChipWarningBackgroundColorActive: TokenObj;
 export declare const ChipWarningBorderColor: TokenObj;
 export declare const ChipWarningBorderColorHover: TokenObj;
 export declare const ChipWarningBorderColorActive: TokenObj;
+export declare const ChipWarningForegroundColor: TokenObj;
+export declare const ChipWarningForegroundColorHover: TokenObj;
+export declare const ChipWarningForegroundColorActive: TokenObj;
 export declare const ChipDangerBackgroundColor: TokenObj;
 export declare const ChipDangerBackgroundColorHover: TokenObj;
 export declare const ChipDangerBackgroundColorActive: TokenObj;
 export declare const ChipDangerBorderColor: TokenObj;
 export declare const ChipDangerBorderColorHover: TokenObj;
 export declare const ChipDangerBorderColorActive: TokenObj;
+export declare const ChipDangerForegroundColor: TokenObj;
+export declare const ChipDangerForegroundColorHover: TokenObj;
+export declare const ChipDangerForegroundColorActive: TokenObj;
 export declare const ChipInProgressBackgroundColor: TokenObj;
 export declare const ChipInProgressBackgroundColorHover: TokenObj;
 export declare const ChipInProgressBackgroundColorActive: TokenObj;
 export declare const ChipInProgressBorderColor: TokenObj;
 export declare const ChipInProgressBorderColorHover: TokenObj;
 export declare const ChipInProgressBorderColorActive: TokenObj;
+export declare const ChipInProgressForegroundColor: TokenObj;
+export declare const ChipInProgressForegroundColorHover: TokenObj;
+export declare const ChipInProgressForegroundColorActive: TokenObj;
 export declare const ChipTableEntityBackgroundColor: TokenObj;
 export declare const ChipTableEntityBackgroundColorHover: TokenObj;
 export declare const ChipTableEntityBackgroundColorActive: TokenObj;
 export declare const ChipTableEntityBorderColor: TokenObj;
 export declare const ChipTableEntityBorderColorHover: TokenObj;
 export declare const ChipTableEntityBorderColorActive: TokenObj;
+export declare const ChipTableEntityForegroundColor: TokenObj;
+export declare const ChipTableEntityForegroundColorHover: TokenObj;
+export declare const ChipTableEntityForegroundColorActive: TokenObj;
 export declare const ChipBrownBackgroundColor: TokenObj;
 export declare const ChipBrownBackgroundColorHover: TokenObj;
 export declare const ChipBrownBackgroundColorActive: TokenObj;
 export declare const ChipBrownBorderColor: TokenObj;
 export declare const ChipBrownBorderColorHover: TokenObj;
 export declare const ChipBrownBorderColorActive: TokenObj;
+export declare const ChipBrownForegroundColor: TokenObj;
+export declare const ChipBrownForegroundColorHover: TokenObj;
+export declare const ChipBrownForegroundColorActive: TokenObj;
 export declare const ChipLimeBackgroundColor: TokenObj;
 export declare const ChipLimeBackgroundColorHover: TokenObj;
 export declare const ChipLimeBackgroundColorActive: TokenObj;
 export declare const ChipLimeBorderColor: TokenObj;
 export declare const ChipLimeBorderColorHover: TokenObj;
 export declare const ChipLimeBorderColorActive: TokenObj;
+export declare const ChipLimeForegroundColor: TokenObj;
+export declare const ChipLimeForegroundColorHover: TokenObj;
+export declare const ChipLimeForegroundColorActive: TokenObj;
 export declare const ChipMagentaBackgroundColor: TokenObj;
 export declare const ChipMagentaBackgroundColorHover: TokenObj;
 export declare const ChipMagentaBackgroundColorActive: TokenObj;
 export declare const ChipMagentaBorderColor: TokenObj;
 export declare const ChipMagentaBorderColorHover: TokenObj;
 export declare const ChipMagentaBorderColorActive: TokenObj;
+export declare const ChipMagentaForegroundColor: TokenObj;
+export declare const ChipMagentaForegroundColorHover: TokenObj;
+export declare const ChipMagentaForegroundColorActive: TokenObj;
 export declare const ChipMauveBackgroundColor: TokenObj;
 export declare const ChipMauveBackgroundColorHover: TokenObj;
 export declare const ChipMauveBackgroundColorActive: TokenObj;
 export declare const ChipMauveBorderColor: TokenObj;
 export declare const ChipMauveBorderColorHover: TokenObj;
 export declare const ChipMauveBorderColorActive: TokenObj;
+export declare const ChipMauveForegroundColor: TokenObj;
+export declare const ChipMauveForegroundColorHover: TokenObj;
+export declare const ChipMauveForegroundColorActive: TokenObj;
 export declare const ChipOrangeBackgroundColor: TokenObj;
 export declare const ChipOrangeBackgroundColorHover: TokenObj;
 export declare const ChipOrangeBackgroundColorActive: TokenObj;
 export declare const ChipOrangeBorderColor: TokenObj;
 export declare const ChipOrangeBorderColorHover: TokenObj;
 export declare const ChipOrangeBorderColorActive: TokenObj;
+export declare const ChipOrangeForegroundColor: TokenObj;
+export declare const ChipOrangeForegroundColorHover: TokenObj;
+export declare const ChipOrangeForegroundColorActive: TokenObj;
 export declare const ChipPurpleBackgroundColor: TokenObj;
 export declare const ChipPurpleBackgroundColorHover: TokenObj;
 export declare const ChipPurpleBackgroundColorActive: TokenObj;
 export declare const ChipPurpleBorderColor: TokenObj;
 export declare const ChipPurpleBorderColorHover: TokenObj;
 export declare const ChipPurpleBorderColorActive: TokenObj;
+export declare const ChipPurpleForegroundColor: TokenObj;
+export declare const ChipPurpleForegroundColorHover: TokenObj;
+export declare const ChipPurpleForegroundColorActive: TokenObj;
 export declare const ComboboxItemDefaultBackgroundColor: TokenObj;
 export declare const ComboboxItemDefaultBackgroundColorHover: TokenObj;
 export declare const ComboboxItemDefaultBackgroundColorActive: TokenObj;