Merge pull request #101 from davyd-akamai/updates

Introduce new `recommendation`, `accent`, and component tokens

Author: jaalah-akamai

dist/index.d.ts

@@ -244,6 +244,7 @@
   --token-alias-content-icon-warning: #edb016;
   --token-alias-content-icon-positive: #65ba75;
   --token-alias-content-icon-informative: #8da4ef;
+  --token-alias-content-icon-recommendation: #53b9ab;
   --token-alias-content-icon-primary-default: #ffffff; /* Default icon color */
   --token-alias-content-icon-primary-hover: #96cff0;
   --token-alias-content-icon-primary-active: #7dcdff;
@@ -256,6 +257,7 @@
   --token-alias-border-warning: #edb016;
   --token-alias-border-positive: #65ba75;
   --token-alias-border-informative: #8da4ef;
+  --token-alias-border-recommendation: #53b9ab;
   --token-alias-background-normal: #3d3d42; /* Default component background */
   --token-alias-background-neutral: #343438; /* Default page background */
   --token-alias-background-base: #ffffff; /* Tooltip background */
@@ -268,6 +270,7 @@
   --token-alias-background-warningsubtle: #515157;
   --token-alias-background-positivesubtle: #515157;
   --token-alias-background-informativesubtle: #515157;
+  --token-alias-background-recommendationsubtle: #515157;
   --token-alias-background-neutralsubtle: #515157;
   --token-alias-background-overlay: lch(13.8 2.09 286 / 0.84);
   --token-alias-action-base: #3d3d42;
@@ -279,6 +282,7 @@
   --token-alias-action-primary-disabled: #515157;
   --token-alias-action-secondary-hover: #515157;
   --token-alias-action-secondary-disabled: #515157;
+  --token-alias-action-tertiary-default: #83838c;
   --token-alias-action-tertiary-disabled: #515157;
   --token-alias-action-positive-default: #65ba75;
   --token-alias-action-positive-hover: #97cf9c;
@@ -302,6 +306,9 @@
   --token-alias-interaction-background-tertiary: #3d3d42;
   --token-alias-interaction-background-tertiary-hover: #96cff0; /* Hover color for an active calendar date */
   --token-alias-interaction-background-tertiary-active: #5bb3ea;
+  --token-alias-interaction-background-neutral: #343438;
+  --token-alias-interaction-background-neutral-hover: #3d3d42;
+  --token-alias-interaction-background-neutral-active: #3d3d42;
   --token-alias-interaction-background-disabled: #515157;
   --token-alias-elevation-s: 0 2px 8px 0 rgba(0,0,0,0.18); /* Default shadow for components, like notification banners, dropdowns, popups; */
   --token-alias-elevation-s-inverted: 0 -2px 8px 0 rgba(0,0,0,0.18); /* Inverted shadow for elements that appear above the component */
@@ -349,6 +356,8 @@
   --token-alias-accent-positive-secondary: lch(78.2 32.7 144 / 0.12);
   --token-alias-accent-important-primary: #d3b4ed;
   --token-alias-accent-important-secondary: lch(77.5 31.1 309 / 0.12);
+  --token-alias-accent-recommendation-primary: #8dcec3;
+  --token-alias-accent-recommendation-secondary: lch(78.2 23.3 184 / 0.12);
   --token-alias-accent-pink-primary: #ecadd4;
   --token-alias-accent-pink-secondary: lch(77.6 29.9 340 / 0.12);
   --token-alias-accent-violet-primary: #c4b8f3;
@@ -475,6 +484,24 @@
   --token-component-button-secondary-disabled-icon: #83838c;
   --token-component-button-secondary-loading-background: #3d3d42;
   --token-component-button-secondary-loading-border: #5bb3ea;
+  --token-component-button-tertiary-default-background: #3d3d42;
+  --token-component-button-tertiary-default-border: #83838c;
+  --token-component-button-tertiary-default-text: #ffffff;
+  --token-component-button-tertiary-default-icon: #ffffff;
+  --token-component-button-tertiary-hover-background: #515157;
+  --token-component-button-tertiary-hover-border: #96cff0;
+  --token-component-button-tertiary-hover-text: #ffffff;
+  --token-component-button-tertiary-hover-icon: #ffffff;
+  --token-component-button-tertiary-pressed-background: #3d3d42;
+  --token-component-button-tertiary-pressed-border: #83838c;
+  --token-component-button-tertiary-pressed-text: #ffffff;
+  --token-component-button-tertiary-pressed-icon: #ffffff;
+  --token-component-button-tertiary-disabled-background: #3d3d42;
+  --token-component-button-tertiary-disabled-border: #515157;
+  --token-component-button-tertiary-disabled-text: #83838c;
+  --token-component-button-tertiary-disabled-icon: #83838c;
+  --token-component-button-tertiary-loading-background: #3d3d42;
+  --token-component-button-tertiary-loading-border: #83838c;
   --token-component-button-link-default-text: #7dcdff;
   --token-component-button-link-default-icon: #7dcdff;
   --token-component-button-link-hover-text: #96cff0;
@@ -689,6 +716,10 @@
   --token-component-badge-important-subtle-text: #d3b4ed;
   --token-component-badge-important-accent-background: #d3b4ed;
   --token-component-badge-important-accent-text: #343438;
+  --token-component-badge-recommendation-subtle-background: lch(78.2 23.3 184 / 0.12);
+  --token-component-badge-recommendation-subtle-text: #8dcec3;
+  --token-component-badge-recommendation-accent-background: #8dcec3;
+  --token-component-badge-recommendation-accent-text: #343438;
   --token-component-badge-violet-subtle-background: lch(77.3 30.9 295 / 0.12);
   --token-component-badge-violet-subtle-text: #c4b8f3;
   --token-component-badge-violet-accent-background: #c4b8f3;
@@ -1128,6 +1159,9 @@
   --token-component-notification-banner-error-background: #515157;
   --token-component-notification-banner-error-border: #eb9091;
   --token-component-notification-banner-error-status-icon: #eb9091;
+  --token-component-notification-banner-recommendation-background: #515157;
+  --token-component-notification-banner-recommendation-border: #53b9ab;
+  --token-component-notification-banner-recommendation-status-icon: #53b9ab;
   --token-component-notification-banner-secondary-background: #515157;
   --token-component-notification-banner-secondary-border: #a3a3ab;
   --token-component-notification-banner-secondary-status-icon: #a3a3ab;
@@ -1786,4 +1820,70 @@
   --token-component-filter-tag-clear-all-hover: #96cff0;
   --token-component-filter-tag-icon-defaul: #ffffff;
   --token-component-filter-tag-icon-hover: #96cff0;
+  --token-component-container-tab-border: #515157;
+  --token-component-container-tab-default-background: #343438;
+  --token-component-container-tab-default-label: #ffffff;
+  --token-component-container-tab-default-description: #a3a3ab;
+  --token-component-container-tab-hover-background: #3d3d42;
+  --token-component-container-tab-hover-label: #ffffff;
+  --token-component-container-tab-hover-description: #a3a3ab;
+  --token-component-container-tab-active-background: #3d3d42;
+  --token-component-container-tab-active-border: #5bb3ea;
+  --token-component-container-tab-active-label: #ffffff;
+  --token-component-container-tab-active-description: #a3a3ab;
+  --token-component-container-tab-disabled-background: #515157;
+  --token-component-container-tab-disabled-label: #83838c;
+  --token-component-container-tab-disabled-description: #83838c;
+  --token-component-container-tab-info-icon-default: #a3a3ab;
+  --token-component-container-tab-info-icon-hover: #96cff0;
+  --token-component-container-tab-info-icon-active: #7dcdff;
+  --token-component-kpi-widget-info-icon-default: #a3a3ab;
+  --token-component-kpi-widget-info-icon-hover: #96cff0;
+  --token-component-kpi-widget-info-icon-active: #7dcdff;
+  --token-component-kpi-widget-progress-positive-text: #00b050;
+  --token-component-kpi-widget-progress-positive-icon: #65ba75;
+  --token-component-kpi-widget-progress-positive-background: #515157;
+  --token-component-kpi-widget-progress-negative-text: #eb9091;
+  --token-component-kpi-widget-progress-negative-icon: #eb9091;
+  --token-component-kpi-widget-progress-negative-background: #515157;
+  --token-component-kpi-widget-chart-average-line: #a3a3ab;
+  --token-component-kpi-widget-chart-neutral-line: #696970;
+  --token-component-kpi-widget-chart-neutral-background: lch(44.6 4.09 286 / 0.2);
+  --token-component-kpi-widget-chart-negative-line: #d63c42;
+  --token-component-kpi-widget-chart-negative-background: lch(50.1 69.5 29.4 / 0.2);
+  --token-component-kpi-widget-chart-positive-line: #00b050;
+  --token-component-kpi-widget-chart-positive-background: lch(63 67 146 / 0.2);
+  --token-component-kpi-widget-chart-warning-line: #c25d05;
+  --token-component-kpi-widget-chart-warning-background: lch(51.7 70.9 57.2 / 0.2);
+  --token-component-kpi-widget-chart-info-line: #4067e5;
+  --token-component-kpi-widget-chart-info-background: lch(46.5 72.3 286 / 0.2);
+  --token-component-kpi-widget-chart-combined-line-primary: #4067e5;
+  --token-component-kpi-widget-chart-combined-background-primary: lch(46.5 72.3 286 / 0.2);
+  --token-component-kpi-widget-chart-combined-line-secondary: #fe9933;
+  --token-component-kpi-widget-chart-combined-background-seconday: lch(46.5 72.3 286 / 0.2);
+  --token-component-kpi-widget-neutral-background: #3d3d42;
+  --token-component-kpi-widget-neutral-border: #515157;
+  --token-component-kpi-widget-neutral-label: #ffffff;
+  --token-component-kpi-widget-neutral-kpi: #ffffff;
+  --token-component-kpi-widget-neutral-description: #a3a3ab;
+  --token-component-kpi-widget-positive-background: #3d3d42;
+  --token-component-kpi-widget-positive-border: #515157;
+  --token-component-kpi-widget-positive-label: #ffffff;
+  --token-component-kpi-widget-positive-kpi: #00b050;
+  --token-component-kpi-widget-positive-description: #a3a3ab;
+  --token-component-kpi-widget-negative-background: #3d3d42;
+  --token-component-kpi-widget-negative-border: #515157;
+  --token-component-kpi-widget-negative-label: #ffffff;
+  --token-component-kpi-widget-negative-kpi: #eb9091;
+  --token-component-kpi-widget-negative-description: #a3a3ab;
+  --token-component-kpi-widget-warning-background: #3d3d42;
+  --token-component-kpi-widget-warning-border: #515157;
+  --token-component-kpi-widget-warning-label: #ffffff;
+  --token-component-kpi-widget-warning-kpi: #c25d05;
+  --token-component-kpi-widget-warning-description: #a3a3ab;
+  --token-component-kpi-widget-info-background: #3d3d42;
+  --token-component-kpi-widget-info-border: #515157;
+  --token-component-kpi-widget-info-label: #ffffff;
+  --token-component-kpi-widget-info-kpi: #4067e5;
+  --token-component-kpi-widget-info-description: #a3a3ab;
 }