v10.0.0 - upgrade design tokens to version 2.0.0 (#397)

* basic integration test * split test file into sections * update design tokens * add changelog link for design tokens
justeat · Sep 2, 2022 · c6b886d · c6b886d
1 parent 41827e1
commit c6b886d
Show file tree

Hide file tree

Showing 15 changed files with 41 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,15 @@ Future Todo List
 - Update to use latest v2 PIE design tokens
 
 
+v10.0.0
+------------------------------
+*September 1, 2022*
+
+### Changed
+- **Breaking** Upgraded `@justeat/pie-design-tokens` to `v2.0.0`. [Link to changelog](https://github.com/justeat/pie-design-tokens/blob/master/CHANGELOG.md#v200)
+- **Breaking** Replaced `$color-grey` variants with new aliases
+
+
 v9.3.3
 ------------------------------
 *September 1, 2022*

diff --git a/package.json b/package.json
@@ -2,7 +2,7 @@
   "name": "@justeat/fozzie",
   "title": "Fozzie – Just Eat UI Web Framework",
   "description": "UI Web Framework for the Just Eat Global Platform",
-  "version": "9.3.3",
+  "version": "10.0.0",
   "main": "dist/js/index.js",
   "files": [
     "dist/js",
@@ -33,7 +33,7 @@
     "node": "^14 || ^16"
   },
   "dependencies": {
-    "@justeat/pie-design-tokens": "1.6.0",
+    "@justeat/pie-design-tokens": "2.0.0",
     "include-media": "eduardoboucas/include-media#2.0-release"
   },
   "devDependencies": {

diff --git a/src/scss/components/optional/_cookie-warning.scss b/src/scss/components/optional/_cookie-warning.scss
@@ -15,7 +15,7 @@
     * TBC
     */
     .c-cookieWarning {
-        background-color: dt.$color-grey;
+        background-color: dt.$color-content-interactive-tertiary;
         position: fixed;
         bottom: 0;
         width: 100%;
@@ -50,7 +50,7 @@
         &:hover,
         &:active,
         &:focus {
-            background-color: dt.$color-grey-40;
+            background-color: dt.$color-border-strong;
             cursor: pointer;
         }
     }

diff --git a/src/scss/components/optional/_cuisines-widget.scss b/src/scss/components/optional/_cuisines-widget.scss
@@ -15,7 +15,7 @@
     *
     */
 
-    $cuisinesWidget-defaultBackground: dt.$color-grey-20;
+    $cuisinesWidget-defaultBackground: dt.$color-background-subtle;
     $cuisinesWidget-gradient: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
 
     @include media-context(('narrow-mid': 570px, 'mid-wide': 1240px)) {

diff --git a/src/scss/components/optional/_fullscreen-pop-over.scss b/src/scss/components/optional/_fullscreen-pop-over.scss
@@ -18,10 +18,10 @@
     * TBC
     */
 
-    $fullScreenPopOver-background        : dt.$color-grey-10;
+    $fullScreenPopOver-background        : dt.$color-background-default;
     $fullScreenPopOver-action-background : dt.$color-white;
     $fullScreenPopOver-padding           : spacing.spacing(d);
-    $fullScreenPopOver-border-color      : dt.$color-grey-30;
+    $fullScreenPopOver-border-color      : dt.$color-border-default;
     $fullScreenPopOver-shadow-color      : rgba(dt.$color-black, 0.12);
 
     .c-fullScreenPopOver {

diff --git a/src/scss/components/optional/_listings-skeleton.scss b/src/scss/components/optional/_listings-skeleton.scss
@@ -175,7 +175,7 @@
 
 @mixin anim() {
   border-radius: 2px;
-  background: linear-gradient(-45deg, dt.$color-grey-10, dt.$color-grey-10, dt.$color-grey-20, dt.$color-grey-10, dt.$color-grey-10);
+  background: linear-gradient(-45deg, dt.$color-background-default, dt.$color-background-default, dt.$color-background-subtle, dt.$color-background-default, dt.$color-background-default);
   background-size: 2000px 600%;
   animation: skeletonGradient 2s ease infinite;
   animation-fill-mode: forwards;

diff --git a/src/scss/components/optional/_listings.scss b/src/scss/components/optional/_listings.scss
@@ -38,7 +38,7 @@
     $listing-border-radius          : dt.$radius-rounded-c;
     $listing-promoIcon-color        : dt.$color-content-brand;
 
-    $listing--subsequent-bg         : dt.$color-grey-20;
+    $listing--subsequent-bg         : dt.$color-background-subtle;
     $listing--inactive-bg           : rgba($listing-bg, 0.5);
 
     .c-listing {
@@ -134,7 +134,7 @@
                 }
 
                 &:not(.c-listing-item-header--noImage) {
-                    background: dt.$color-grey-20;
+                    background: dt.$color-background-subtle;
                 }
             }
 

diff --git a/src/scss/components/optional/_menu.scss b/src/scss/components/optional/_menu.scss
@@ -23,7 +23,7 @@
     $menu-headerHeight                      : 57px;
     $menu-fontSize                          : body-l;
     $menu-border-color                      : dt.$color-border-strong;
-    $menu-border-color--active              : dt.$color-grey-50;
+    $menu-border-color--active              : dt.$color-border-inverse;
     $menu-border-width                      : 1px;
     $menu-border-width--active              : 2px;
     $menu-link-color                        : dt.$color-content-default;

diff --git a/src/scss/components/optional/_order-card.scss b/src/scss/components/optional/_order-card.scss
@@ -44,7 +44,7 @@
         &:focus {
             box-shadow: $previousOrder-hoverBoxShadow;
             text-decoration: none;
-            color: dt.$color-grey-40;
+            color: dt.$color-support-neutral;
         }
     }
 
@@ -127,7 +127,7 @@
         text-align: center;
         margin-top: spacing.spacing();
         padding: 2px spacing.spacing(c) spacing.spacing(c);
-        border-top: 1px solid dt.$color-grey-10;
+        border-top: 1px solid dt.$color-border-subtle;
     }
 
     .c-orderCard-title {
@@ -141,7 +141,7 @@
     .c-orderCard-date {
         margin-top: 0;
         margin-bottom: spacing.spacing();
-        color: dt.$color-grey-40;
+        color: dt.$color-support-neutral;
         display: block;
     }
 
@@ -165,7 +165,7 @@
 
     .c-orderCard-content {
         padding: spacing.spacing() spacing.spacing(d) 0;
-        color: dt.$color-grey;
+        color: dt.$color-content-interactive-tertiary;
         flex: 1 0 auto;
         display: flex;
         flex-direction: column;
@@ -181,7 +181,7 @@
     }
 
     .c-orderCard-cuisines {
-        color: dt.$color-grey-40;
+        color: dt.$color-support-neutral;
         margin-top: 0;
         text-transform: capitalize;
         @include type.font-size(body-l, false);

diff --git a/src/scss/components/optional/_toast.scss b/src/scss/components/optional/_toast.scss
@@ -18,7 +18,7 @@
 
     $toast-radius                           : dt.$radius-rounded-c;
     $toast-textColor                        : dt.$color-content-light;
-    $toast-bgColor--default                 : dt.$color-grey;
+    $toast-bgColor--default                 : dt.$color-content-interactive-tertiary;
     $toast-bgColor--alert                   : dt.$color-orange-55;
     $toast-animation-duration               : 0.5s;
     $toast-height                           : 95px;

diff --git a/src/scss/objects/_form-controls.scss b/src/scss/objects/_form-controls.scss
@@ -100,7 +100,7 @@
             display: inline-block;
             width: $formControl-width;
             height: $formControl-height;
-            border: $formControl-border-width solid dt.$color-grey-30;
+            border: $formControl-border-width solid dt.$color-border-default;
             background-color: $formControl-bgColor;
             vertical-align: middle;
             margin-left: $formControl-margin-left;
@@ -233,7 +233,7 @@
             &:before {
                 content: '';
                 background-color: $formControl-color;
-                border: 3px solid dt.$color-grey-20;
+                border: 3px solid dt.$color-border-subtle;
                 border-radius: 50%;
                 width: $formControl-width - 2;
                 height: $formControl-height - 2;

diff --git a/src/scss/objects/_form-toggle.scss b/src/scss/objects/_form-toggle.scss
@@ -4,18 +4,18 @@
 @use 'sass:math';
 
 $formToggle-padding                 : spacing.spacing() !default;
-$formToggle-border-color            : dt.$color-grey-30;
-$formToggle-border-color--interact  : dt.$color-grey-40;
+$formToggle-border-color            : dt.$color-border-default;
+$formToggle-border-color--interact  : dt.$color-border-strong;
 $formToggle-border-color--checked   : dt.$color-green;
 $formToggle-border-width            : 1px;
 $formToggle-border-radius           : dt.$radius-rounded-e;
 $formToggle-icon-background         : dt.$color-green;
-$formToggle-icon-background--hover  : dt.$color-grey-30;
+$formToggle-icon-background--hover  : dt.$color-support-neutral;
 $formToggle-background              : dt.$color-white;
 $formToggle-large-size              : 48px;
 $formToggle-button-color            : dt.$color-blue;
 $formToggle-button-background       : dt.$color-blue-10;
-$formToggle-text--disabled          : dt.$color-grey-30;
+$formToggle-text--disabled          : dt.$color-disabled-01;
 $formToggle-text--checked           : dt.$color-green;
 
 @mixin formToggle() {

diff --git a/src/scss/objects/_tables.scss b/src/scss/objects/_tables.scss
@@ -24,11 +24,11 @@
   * Define associated Table variables
   */
   $table-bgColor                : dt.$color-container-default !global; // Default background color used for all tables.
-  $table-bgColor--accent        : dt.$color-grey-10 !global; // Background color used for `.table-striped`.
-  $table-border--color          : dt.$color-grey-10 !global; // Border color for table and cell borders.
+  $table-bgColor--accent        : dt.$color-background-default !global; // Background color used for `.table-striped`.
+  $table-border--color          : dt.$color-border-subtle !global; // Border color for table and cell borders.
   $table-border--width          : 2px !global; // Border width for table border.
-  $table-innerBorder--color     : dt.$color-grey-40 !global;
-  $table-verticalBorder--color  : dt.$color-grey-50 !global;
+  $table-innerBorder--color     : dt.$color-border-strong !global;
+  $table-verticalBorder--color  : dt.$color-border-inverse !global;
 
 
   /**

diff --git a/src/scss/trumps/_utilities.scss b/src/scss/trumps/_utilities.scss
@@ -442,7 +442,7 @@
 
         @include media('<mid') {
             &:after {
-                background-color: dt.$color-grey-20;
+                background-color: dt.$color-background-subtle;
                 border: 0;
                 box-shadow: dt.$elevation-01;
                 content: '';

diff --git a/yarn.lock b/yarn.lock
@@ -1280,10 +1280,10 @@
   dependencies:
     "@justeat/dom-buddy" "2.4.3"
 
-"@justeat/pie-design-tokens@1.6.0":
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/@justeat/pie-design-tokens/-/pie-design-tokens-1.6.0.tgz#8cde740cf7681927dc321946985e731ccf3401b1"
-  integrity sha512-oXwvSQXrQIH9jlEwq7Su6ZLBQyp8m8vV276Iu0PjncpxsndPs0D+GKHvw/jVQ57ZCQPhBafQEaRCvawHWwg2yA==
+"@justeat/pie-design-tokens@2.0.0":
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/@justeat/pie-design-tokens/-/pie-design-tokens-2.0.0.tgz#f2321eb4a28eb2688b3cd589850035c24074ea59"
+  integrity sha512-hshuretx+y9qUb31bea1cb3P2e0dS6gZJmYUzjV1Aiq0TxhyayMt7jSuGLtm3L9TVUPay4q7o3+sk8TZ/MaBQg==
   dependencies:
     jsonc-parser "2.2.0"
     lodash.merge "4.6.2"