Skip to content

Commit

Permalink
Fix for elevation, alias border-radius token, launch button tokens (#61)
Browse files Browse the repository at this point in the history 
* fix: expand composite objects and convert rem to px (#55)

Co-authored-by: Davyd Melkon <131438868+davyd-akamai@users.noreply.github.com>
Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>

* Shadow blur value fix

* Launch button tokens
Default border raduis alias token

* Launch split menu button tokens

* New "rangeHover" and "activeDateHover" interaction tokens, calendar tokens structure update

* New global gradient token and new component tokens for the Appbar and Progress Bar components that use gradients

* Add descriptions

* Remove extensions from linear gradient

* Update branch with latest and fix border radius and linear gradient

* Numeric spinner text color property fix

* Horizontal stepper structure update
Error tag new background token

* New tokens for KPI bar: background token, disabled state for KPIs
New alias accent disabled token

* Update BorderRadius to Radius

* Update BorderRadius to Radius

---------

Co-authored-by: Jaalah Ramos <125309814+jaalah-akamai@users.noreply.github.com>
Co-authored-by: Jaalah Ramos <jaalah.ramos@gmail.com>
  • Loading branch information
@davyd-akamai @jaalah-akamai @jaalah
3 people authored Sep 13, 2024
1 parent 3e4234b commit b5b17cb
Show file tree
Hide file tree
Showing 39 changed files with 14,154 additions and 6,522 deletions.
Binary file modified .yarn/install-state.gz
View file
Binary file not shown.
317 changes: 292 additions & 25 deletions dist/index.d.ts
View file

Large diffs are not rendered by default.

315 changes: 290 additions & 25 deletions dist/index.js
View file

Large diffs are not rendered by default.

309 changes: 288 additions & 21 deletions dist/themes/dark/index.d.ts
View file

Large diffs are not rendered by default.

307 changes: 286 additions & 21 deletions dist/themes/dark/index.js
View file

Large diffs are not rendered by default.

90 changes: 83 additions & 7 deletions dist/themes/dark/tokens.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -181,6 +181,7 @@
--token-global-color-brown-80: #8c795d;
--token-global-color-brown-90: #776750;
--token-global-color-brown-100: #3b352b;
--token-global-color-gradient-default: linear-gradient(270deg, #00b050 0%, #12a594 51%, #009cde 100%); /* Default gradient */
--token-global-spacing-0: 0rem;
--token-global-spacing-10: 0.125rem; /* 2px */
--token-global-spacing-20: 0.25rem; /* 4px */
Expand Down Expand Up @@ -287,6 +288,8 @@
--token-alias-interaction-background-accent: #5bb3ea;
--token-alias-interaction-background-active: #5bb3ea;
--token-alias-interaction-background-disabled: #515157;
--token-alias-interaction-background-range-hover: #696970; /* Hover color for a calendar date range */
--token-alias-interaction-background-active-date-hover: #96cff0; /* Hover color for an active calendar date */
--token-alias-elevation-s: 0 2px 6px 0 rgba(0,0,0,0.18); /* Default shadow for components, like notification banners, dropdowns, popups; */
--token-alias-elevation-s-inverted: 0 -2px 6px 0 rgba(0,0,0,0.18); /* Inverted shadow for elements that appear above the component */
--token-alias-elevation-l: 0 16px 32px 0 rgba(0,0,0,0.18), 0 4px 8px 0 rgba(0,0,0,0.08); /* Shadow for modals */
Expand Down Expand Up @@ -316,6 +319,7 @@
--token-alias-typography-label-regular-xs: 400 0.75rem/1rem 'Nunito Sans'; /* Optional text, small dropdown item */
--token-alias-typography-label-regular-placeholder: 400 0.875rem/1rem 'Nunito Sans';
--token-alias-typography-code: 400 0.813rem/1.25rem 'Fira Code'; /* Code samples */
--token-alias-accent-disabled: #696970;
--token-alias-accent-info-primary: #aec0f5;
--token-alias-accent-info-secondary: lch(77.7 28.7 275 / 0.12);
--token-alias-accent-neutral-primary: #c2c2ca;
Expand Down Expand Up @@ -422,6 +426,7 @@
--token-alias-chart-status-negative: #d63c42;
--token-alias-chart-status-warning: #fecb34;
--token-alias-chart-status-positive: #00b050;
--token-alias-radius-default: 0rem; /* Default border radius value */
--token-component-button-primary-default-background: #5bb3ea;
--token-component-button-primary-default-text: #343438;
--token-component-button-primary-default-icon: #343438;
Expand Down Expand Up @@ -461,6 +466,19 @@
--token-component-button-link-pressed-icon: #5bb3ea;
--token-component-button-link-disabled-text: #83838c;
--token-component-button-link-disabled-icon: #83838c;
--token-component-button-launch-default-background: #232326; /* This component token is considered unstable and in development. */
--token-component-button-launch-default-text: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-default-icon: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-hover-background: #343438; /* This component token is considered unstable and in development. */
--token-component-button-launch-hover-text: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-hover-icon: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-pressed-background: #232326; /* This component token is considered unstable and in development. */
--token-component-button-launch-pressed-text: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-pressed-icon: #ffffff; /* This component token is considered unstable and in development. */
--token-component-button-launch-disabled-background: #e5e5ea; /* This component token is considered unstable and in development. */
--token-component-button-launch-disabled-text: #a3a3ab; /* This component token is considered unstable and in development. */
--token-component-button-launch-disabled-icon: #a3a3ab; /* This component token is considered unstable and in development. */
--token-component-button-launch-loading-background: #232326; /* This component token is considered unstable and in development. */
--token-component-container-background: #3d3d42;
--token-component-container-border: #515157;
--token-component-table-header-filled-background: #343438;
Expand Down Expand Up @@ -575,10 +593,37 @@
--token-component-split-menu-button-secondary-loading-background: #3d3d42;
--token-component-split-menu-button-secondary-loading-border: #5bb3ea;
--token-component-split-menu-button-secondary-loading-icon: #5bb3ea;
--token-component-split-menu-button-launch-default-background: #232326;
--token-component-split-menu-button-launch-default-border: #3d3d42;
--token-component-split-menu-button-launch-default-text: #ffffff;
--token-component-split-menu-button-launch-default-icon: #ffffff;
--token-component-split-menu-button-launch-hover-left-background-left: #343438;
--token-component-split-menu-button-launch-hover-left-background-right: #232326;
--token-component-split-menu-button-launch-hover-left-border: #3d3d42;
--token-component-split-menu-button-launch-hover-left-text: #ffffff;
--token-component-split-menu-button-launch-hover-left-icon: #ffffff;
--token-component-split-menu-button-launch-hover-right-background-left: #232326;
--token-component-split-menu-button-launch-hover-right-background-right: #343438;
--token-component-split-menu-button-launch-hover-right-border: #3d3d42;
--token-component-split-menu-button-launch-hover-right-text: #ffffff;
--token-component-split-menu-button-launch-hover-right-icon: #ffffff;
--token-component-split-menu-button-launch-active-background: #232326;
--token-component-split-menu-button-launch-active-border: #3d3d42;
--token-component-split-menu-button-launch-active-text: #ffffff;
--token-component-split-menu-button-launch-active-icon: #ffffff;
--token-component-split-menu-button-launch-disabled-background: #e5e5ea;
--token-component-split-menu-button-launch-disabled-border: #3d3d42;
--token-component-split-menu-button-launch-disabled-text: #a3a3ab;
--token-component-split-menu-button-launch-disabled-icon: #a3a3ab;
--token-component-split-menu-button-launch-loading-background-left: #232326;
--token-component-split-menu-button-launch-loading-background-right: #232326;
--token-component-split-menu-button-launch-loading-border: #3d3d42;
--token-component-split-menu-button-launch-loading-icon: #ffffff;
--token-component-appbar-background: #343438;
--token-component-appbar-border: #515157;
--token-component-appbar-text: #ffffff;
--token-component-appbar-icon: #ffffff;
--token-component-appbar-top-gradient: linear-gradient(270deg, #00b050 0%, #12a594 51%, #009cde 100%);
--token-component-badge-informative-background: lch(77.7 28.7 275 / 0.12);
--token-component-badge-informative-text: #aec0f5;
--token-component-badge-neutral-background: lch(78.6 4.18 286 / 0.12);
Expand Down Expand Up @@ -666,9 +711,13 @@
--token-component-calendar-text-default: #ffffff;
--token-component-calendar-text-disabled: #83838c;
--token-component-calendar-selected-item-text: #343438;
--token-component-calendar-selected-item-background: #5bb3ea;
--token-component-calendar-selected-item-background-default: #5bb3ea;
--token-component-calendar-selected-item-background-hover: #96cff0;
--token-component-calendar-hover-item-background: #515157;
--token-component-calendar-hover-item-text: #ffffff;
--token-component-calendar-date-range-text: #ffffff;
--token-component-calendar-date-range-background-default: #515157;
--token-component-calendar-date-range-background-hover: #696970;
--token-component-calendar-preset-area-background: #343438;
--token-component-calendar-preset-area-hover-period-background: #3d3d42;
--token-component-calendar-preset-area-active-period-background: #5bb3ea;
Expand Down Expand Up @@ -884,6 +933,7 @@
--token-component-inline-edit-accept-icon-disabled: #83838c;
--token-component-kpi-bar-text: #ffffff;
--token-component-kpi-bar-border: #515157;
--token-component-kpi-bar-background: #3d3d42;
--token-component-kpi-bar-icon-default: #ffffff;
--token-component-kpi-bar-icon-hover: #96cff0;
--token-component-kpi-bar-icon-active: #5bb3ea;
Expand All @@ -898,6 +948,10 @@
--token-component-kpi-bar-item-neutral-active-text: #ffffff;
--token-component-kpi-bar-item-neutral-active-border: #c2c2ca;
--token-component-kpi-bar-item-neutral-active-icon: #c2c2ca;
--token-component-kpi-bar-item-neutral-disabled-label: #696970;
--token-component-kpi-bar-item-neutral-disabled-text: #83838c;
--token-component-kpi-bar-item-neutral-disabled-border: #696970;
--token-component-kpi-bar-item-neutral-disabled-icon: #83838c;
--token-component-kpi-bar-item-green-default-label: #97cf9c;
--token-component-kpi-bar-item-green-default-text: #a3a3ab;
--token-component-kpi-bar-item-green-hover-label: #97cf9c;
Expand All @@ -906,6 +960,9 @@
--token-component-kpi-bar-item-green-active-label: #97cf9c;
--token-component-kpi-bar-item-green-active-text: #ffffff;
--token-component-kpi-bar-item-green-active-border: #97cf9c;
--token-component-kpi-bar-item-green-disabled-label: #696970;
--token-component-kpi-bar-item-green-disabled-text: #83838c;
--token-component-kpi-bar-item-green-disabled-border: #696970;
--token-component-kpi-bar-item-orange-default-label: #f2b67b;
--token-component-kpi-bar-item-orange-default-text: #a3a3ab;
--token-component-kpi-bar-item-orange-hover-label: #f2b67b;
Expand All @@ -914,6 +971,9 @@
--token-component-kpi-bar-item-orange-active-label: #f2b67b;
--token-component-kpi-bar-item-orange-active-text: #ffffff;
--token-component-kpi-bar-item-orange-active-border: #f2b67b;
--token-component-kpi-bar-item-orange-disabled-label: #696970;
--token-component-kpi-bar-item-orange-disabled-text: #83838c;
--token-component-kpi-bar-item-orange-disabled-border: #696970;
--token-component-kpi-bar-item-purple-default-label: #d3b4ed;
--token-component-kpi-bar-item-purple-default-text: #a3a3ab;
--token-component-kpi-bar-item-purple-hover-label: #d3b4ed;
Expand All @@ -922,6 +982,9 @@
--token-component-kpi-bar-item-purple-active-label: #d3b4ed;
--token-component-kpi-bar-item-purple-active-text: #ffffff;
--token-component-kpi-bar-item-purple-active-border: #d3b4ed;
--token-component-kpi-bar-item-purple-disabled-label: #696970;
--token-component-kpi-bar-item-purple-disabled-text: #83838c;
--token-component-kpi-bar-item-purple-disabled-border: #696970;
--token-component-kpi-bar-item-red-default-label: #f3aeaf;
--token-component-kpi-bar-item-red-default-text: #a3a3ab;
--token-component-kpi-bar-item-red-hover-label: #f3aeaf;
Expand All @@ -930,6 +993,9 @@
--token-component-kpi-bar-item-red-active-label: #f3aeaf;
--token-component-kpi-bar-item-red-active-text: #ffffff;
--token-component-kpi-bar-item-red-active-border: #f3aeaf;
--token-component-kpi-bar-item-red-disabled-label: #696970;
--token-component-kpi-bar-item-red-disabled-text: #83838c;
--token-component-kpi-bar-item-red-disabled-border: #696970;
--token-component-kpi-bar-item-ultramarine-default-label: #aec0f5;
--token-component-kpi-bar-item-ultramarine-default-text: #a3a3ab;
--token-component-kpi-bar-item-ultramarine-hover-label: #aec0f5;
Expand All @@ -938,6 +1004,9 @@
--token-component-kpi-bar-item-ultramarine-active-label: #aec0f5;
--token-component-kpi-bar-item-ultramarine-active-text: #ffffff;
--token-component-kpi-bar-item-ultramarine-active-border: #aec0f5;
--token-component-kpi-bar-item-ultramarine-disabled-label: #696970;
--token-component-kpi-bar-item-ultramarine-disabled-text: #83838c;
--token-component-kpi-bar-item-ultramarine-disabled-border: #696970;
--token-component-kpi-bar-item-pink-default-label: #ecadd4;
--token-component-kpi-bar-item-pink-default-text: #a3a3ab;
--token-component-kpi-bar-item-pink-hover-label: #ecadd4;
Expand All @@ -946,6 +1015,9 @@
--token-component-kpi-bar-item-pink-active-label: #ecadd4;
--token-component-kpi-bar-item-pink-active-text: #ffffff;
--token-component-kpi-bar-item-pink-active-border: #ecadd4;
--token-component-kpi-bar-item-pink-disabled-label: #696970;
--token-component-kpi-bar-item-pink-disabled-text: #83838c;
--token-component-kpi-bar-item-pink-disabled-border: #696970;
--token-component-label-text: #ffffff;
--token-component-label-icon: #ffffff;
--token-component-label-info-icon: #a3a3ab;
Expand Down Expand Up @@ -1028,14 +1100,15 @@
--token-component-progress-bar-status-line-default: #515157;
--token-component-progress-bar-status-line-success: #00b050;
--token-component-progress-bar-status-line-error: #d63c42;
--token-component-progress-bar-status-line-in-progress: linear-gradient(270deg, #00b050 0%, #12a594 51%, #009cde 100%);
--token-component-numeric-spinner-default-background: #343438;
--token-component-numeric-spinner-default-border: #696970;
--token-component-numeric-spinner-default-text: #a3a3ab;
--token-component-numeric-spinner-default-icon: #ffffff;
--token-component-numeric-spinner-default-hint-text: #a3a3ab;
--token-component-numeric-spinner-hover-background: #343438;
--token-component-numeric-spinner-hover-border: #c2c2ca;
--token-component-numeric-spinner-hover-text: #a3a3ab;
--token-component-numeric-spinner-hover-text: #ffffff;
--token-component-numeric-spinner-hover-icon: #ffffff;
--token-component-numeric-spinner-hover-hint-text: #a3a3ab;
--token-component-numeric-spinner-filled-background: #343438;
Expand All @@ -1058,7 +1131,7 @@
--token-component-numeric-spinner-error-hint-text: #eb9091;
--token-component-numeric-spinner-focus-background: #343438;
--token-component-numeric-spinner-focus-border: #5bb3ea;
--token-component-numeric-spinner-focus-text: #a3a3ab;
--token-component-numeric-spinner-focus-text: #ffffff;
--token-component-numeric-spinner-focus-icon: #ffffff;
--token-component-numeric-spinner-focus-hint-text: #a3a3ab;
--token-component-radio-button-inactive-default-background: #3d3d42;
Expand Down Expand Up @@ -1281,7 +1354,7 @@
--token-component-tag-focus-icon-default: #ffffff;
--token-component-tag-focus-icon-hover: #96cff0;
--token-component-tag-focus-icon-active: #5bb3ea;
--token-component-tag-error-background: #343438;
--token-component-tag-error-background: #515157;
--token-component-tag-error-border: #eb9091;
--token-component-tag-error-text: #ffffff;
--token-component-tag-error-icon-default: #ffffff;
Expand Down Expand Up @@ -1509,10 +1582,13 @@
--token-component-widget-upload-disabled-icon: #83838c;
--token-component-widget-upload-disabled-text: #83838c;
--token-component-stepper-horizontal-line: #515157;
--token-component-stepper-horizontal-past-item-circle-background: #3d3d42;
--token-component-stepper-horizontal-past-item-circle-border: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-text: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-icon: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-background-default: #3d3d42;
--token-component-stepper-horizontal-past-item-circle-background-hover: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-icon-default: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-icon-hover: #ffffff;
--token-component-stepper-horizontal-past-item-circle-text-default: #5bb3ea;
--token-component-stepper-horizontal-past-item-circle-text-hover: #ffffff;
--token-component-stepper-horizontal-past-item-text-default: #ffffff;
--token-component-stepper-horizontal-past-item-text-hover: #5bb3ea;
--token-component-stepper-horizontal-current-item-circle-background: #5bb3ea;
Expand Down
Loading

0 comments on commit b5b17cb

Please sign in to comment.