v5.0.0 Release #335

ashleynolan · 2021-08-23T12:22:36Z

v5.0.0

August 23, 2021

Main changes:

Colour and typography variables updated to use pie-design-tokens repo instead of fozzie-colour-palette.
When importing v5 fozzie, consuming applications only get included variables, functions and mixins (no classes). Component styles for buttons, form-fields etc are being deprecated as we move our components over to versionable packages, but can still be included via optional mixins applications that still need this as part of the transition.
Two optional variables can be used to include a base set of styles (similar to v4). These are $includeBaseFramework and $includeMinimalFramework. Check out the _templates.scss file to see what styles are included when these are set to true.

Changed

Eyeglass version bumped to v3.
Made all styles and components optional (wrapped in a mixin).
Lots of colour variables moved over as part of using the new pie-design-tokens repo instead of fozzie-colour-palette.
Updated type-map with new typography variables for font-size and line-height.

Removed

/settings/glyphs moved into badges, as it is the only place it is used.
/images as not used.
kickoff-grid dependency brought into fozzie, to remove external dependency (making it easier to change if needed).
$font-weight-bold was removed as it now comes straight from pie-design-tokens.

** Full list of changes (including all colour variable changes) can be found in beta release CHANGELOGs (see full CHANGELOG entries) **

UI Review Checks

This PR has been checked with regard to our brand guidelines
UI Documentation has been updated (more incoming shortly)

…ns (#316) * v5.0.0-beta.0 – Initial v5 work to move all styles into optional mixins * v5.0.0-beta.0 – Fixing initial changes after testing importing the legacy styles

* Add optional loading indicator component * Prevent Prettier ruining files * Added line breaks back to file after format * Added change to changelog

…e equivalents (#323)

* v5.0.0-beta.6 - more color vars transitioned + o-link styles changes * v5.0.0-beta.6 - code style Co-authored-by: Maryia Radchuk <maryia.radchuk@just-eat.com>

…e vars to pie-design-tokens (#327) Co-authored-by: Maryia Radchuk <maryia.radchuk@just-eat.com>

…tomise the colours of the spinner. (#328) * v5.0.0 - Extending the loadingIndicator mixin to specify colours. * v5.0.0-beta.8 - Adding mixin to be able to customise the colours of the spinner of the loading indicator. Co-authored-by: Sacha Zvetelman <sacha.zvetelman@justeattakeaway.com>

…329)

DamianMullins

Looks good to me, and haven't noticed any issues whilst using the beta version on menu.

One thing to mention, to future-proof us a little, could we consider removing the $spacing variables x0.5 & x1.5 as they aren't using valid syntax in dart-sass (we're using the deprecated node-sass npm package currently)? Where people are using those variables they can replace it with something like spacing() * 0.5 if they need to use the fraction values?

If not in v5 possibly in v6?

ashleynolan · 2021-08-23T13:25:51Z

@DamianMullins Yeh – funnily enough, I think we hit this when trying to upgrade one of our dependencies in the component repo, so I think that'll happen pretty shortly 👍

dandel10n

When I updated fozzie to use pie design tokens I didn't use aliases as much as I could so all my comments here are to fix this. This will be fixed in the next PR so doesn't block this one.

dandel10n · 2021-08-23T13:10:07Z

src/scss/base/_typography.scss

-    border-radius: 3px;
-}
+    mark {
+        background: $color-yellow-10;


Suggested change

background: $color-yellow-10;

background: $color-support-warning-02;

dandel10n · 2021-08-23T13:22:49Z

src/scss/components/_breadcrumbs.scss

+    $breadcrumb-text-color                   : $color-grey-50;
+    $breadcrumb-text-weight                  : $font-weight-bold;
+    $breadcrumb-link-color                   : $color-grey;
+    $breadcrumb-link-color--hover            : $color-grey-50;
+    $breadcrumb-icon-fillColor               : $color-black;
+    $breadcrumb--compact-background          : rgba($color-black, 0.2);
+
+    $breadcrumb--transparent-text-color      : $color-white;
+    $breadcrumb--transparent-icon-fillColor  : $color-white;
+    $breadcrumb--transparent-link-color      : $color-white;
+
+    $breadcrumb--pill-text-color             : $color-white;
+    $breadcrumb--pill-link-color--hover      : $color-white;


Suggested change

$breadcrumb-text-color : $color-grey-50;

$breadcrumb-text-weight : $font-weight-bold;

$breadcrumb-link-color : $color-grey;

$breadcrumb-link-color--hover : $color-grey-50;

$breadcrumb-icon-fillColor : $color-black;

$breadcrumb--compact-background : rgba($color-black, 0.2);

$breadcrumb--transparent-text-color : $color-white;

$breadcrumb--transparent-icon-fillColor : $color-white;

$breadcrumb--transparent-link-color : $color-white;

$breadcrumb--pill-text-color : $color-white;

$breadcrumb--pill-link-color--hover : $color-white;

$breadcrumb-text-color : $color-content-subdued;

$breadcrumb-text-weight : $font-weight-bold;

$breadcrumb-link-color : $color-content-interactive-tertiary;

$breadcrumb-link-color--hover : darken($color-content-interactive-tertiary, $color-hover-01);

$breadcrumb-icon-fillColor : $color-content-subdued;

$breadcrumb--compact-background : $color-overlay;

$breadcrumb--transparent-text-color : $color-content-link-light;

$breadcrumb--transparent-icon-fillColor : $color-content-link-light;

$breadcrumb--transparent-link-color : $color-content-link-light;

$breadcrumb--pill-text-color : $color-content-link-inverse;

$breadcrumb--pill-link-color--hover : $color-content-link-inverse;

dandel10n · 2021-08-23T13:27:05Z

src/scss/components/_breadcrumbs.scss

+    */
+
+    .c-breadcrumb--pill {
+        background-color: rgba($color-black, 0.5);


Suggested change

background-color: rgba($color-black, 0.5);

background-color: $color-overlay;

dandel10n · 2021-08-23T13:32:12Z

src/scss/components/_cards.scss

+    $card-bgColor--active                           : $color-white;
+    $card-bgColor--disabled                         : $color-grey-20;


Suggested change

$card-bgColor--active : $color-white;

$card-bgColor--disabled : $color-grey-20;

$card-bgColor--active : $color-container-default;

$card-bgColor--disabled : $color-disabled-01;

dandel10n · 2021-08-23T13:32:54Z

src/scss/components/_cards.scss

+    $card-borderColor                               : $color-border-strong;
+    $card-section-margin                            : spacing(x4);
+    $card-section-margin--large                     : spacing(x8);
+    $card-section-highlight-backgroundColor         : $color-orange-10;


Suggested change

$card-section-highlight-backgroundColor : $color-orange-10;

$card-section-highlight-backgroundColor : $color-support-brand-02;

dandel10n · 2021-08-23T14:57:51Z

src/scss/objects/_links.scss

-    &:hover, &:focus {
-        color: $color-link-hover;
+        &:active {
+            color: darken($color-content-link, $color-active-02);


Suggested change

color: darken($color-content-link, $color-active-02);

color: darken($color-content-link, $color-active-01);

dandel10n · 2021-08-23T14:58:15Z

src/scss/objects/_lists.scss


-$list-bullet-color: $orange;
+    $list-bullet-color: $color-orange;


Suggested change

$list-bullet-color: $color-orange;

$list-bullet-color: $color-dark-content-brand;

dandel10n · 2021-08-23T14:59:19Z

src/scss/objects/_tables.scss

+    $table-bgColor--accent        : $color-grey-10 !global; // Background color used for `.table-striped`.
+    $table-border--color          : $color-grey-10 !global; // Border color for table and cell borders.


Suggested change

$table-bgColor--accent : $color-grey-10 !global; // Background color used for `.table-striped`.

$table-border--color : $color-grey-10 !global; // Border color for table and cell borders.

$table-bgColor--accent : $color-background-default !global; // Background color used for `.table-striped`.

$table-border--color : $color-background-default !global; // Border color for table and cell borders.

dandel10n · 2021-08-23T15:00:06Z

src/scss/objects/_tables.scss

+    $table-bgColor--accent        : $color-grey-10 !global; // Background color used for `.table-striped`.
+    $table-border--color          : $color-grey-10 !global; // Border color for table and cell borders.
+    $table-border--width          : 2px !global; // Border width for table border.
+    $table-innerBorder--color     : $color-grey-40 !global;


Suggested change

$table-innerBorder--color : $color-grey-40 !global;

$table-innerBorder--color : $color-border-strong !global;

dandel10n · 2021-08-23T15:01:10Z

src/scss/trumps/_utilities.scss

-    @include bordered();
-}
+    .u-lightenBg {
+        background-color: $color-white;


Suggested change

background-color: $color-white;

background-color: $color-container-default;

ashleynolan and others added 12 commits August 23, 2021 13:01

v5.0.0-beta.0 – Initial v5 work to move all styles into optional mixi…

3600c42

…ns (#316) * v5.0.0-beta.0 – Initial v5 work to move all styles into optional mixins * v5.0.0-beta.0 – Fixing initial changes after testing importing the legacy styles

v5.0.0-beta.1 - Updating eyeglass version (#318)

cf24b13

v5.0.0-beta.2 - Updating dependencies (#319)

9ede8d8

v5.0.0-beta.3 - Add loading indicator component (#322)

61070cb

* Add optional loading indicator component * Prevent Prettier ruining files * Added line breaks back to file after format * Added change to changelog

v5.0.0-beta.4 – Updating colours to use new pie-design-tokens variabl…

087b496

…e equivalents (#323)

v5.0.0-beta.5 - Import typography design tokens into Fozzie (#324)

2ad0c46

v5.0.0-beta.5 - Version bump

b7409f9

v5.0.0-beta.6 - more color vars transition + link styles changes (#326)

5c98a2d

* v5.0.0-beta.6 - more color vars transitioned + o-link styles changes * v5.0.0-beta.6 - code style Co-authored-by: Maryia Radchuk <maryia.radchuk@just-eat.com>

v5.0.0-beta.7 - more color vars transitioned from fozzie-color-pallet…

fccc8c3

…e vars to pie-design-tokens (#327) Co-authored-by: Maryia Radchuk <maryia.radchuk@just-eat.com>

v5.0.0-beta.9 - aliases instead of global vars + missed vars update (#…

24d9d44

…329)

v5.0.0-beta.10 - pie-design-token package update (#332)

3818849

ashleynolan requested review from a team as code owners August 23, 2021 12:22

v5.0.0 – Release v5

7e1caf6

ashleynolan force-pushed the v5.0.0 branch from c235c53 to 7e1caf6 Compare August 23, 2021 12:44

DamianMullins approved these changes Aug 23, 2021

View reviewed changes

kevinrodrigues approved these changes Aug 23, 2021

View reviewed changes

dandel10n approved these changes Aug 23, 2021

View reviewed changes

ashleynolan merged commit c94a8ee into master Aug 23, 2021

dandel10n deleted the v5.0.0 branch August 24, 2021 08:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

v5.0.0 Release #335

v5.0.0 Release #335

ashleynolan commented Aug 23, 2021

DamianMullins left a comment •

edited

Loading

ashleynolan commented Aug 23, 2021

dandel10n left a comment

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

dandel10n Aug 23, 2021

	background: $color-yellow-10;
	background: $color-support-warning-02;

	background-color: rgba($color-black, 0.5);
	background-color: $color-overlay;

		$card-bgColor--active : $color-white;
		$card-bgColor--disabled : $color-grey-20;

	$card-section-highlight-backgroundColor : $color-orange-10;
	$card-section-highlight-backgroundColor : $color-support-brand-02;

	color: darken($color-content-link, $color-active-02);
	color: darken($color-content-link, $color-active-01);


		$list-bullet-color: $orange;
		$list-bullet-color: $color-orange;

	$list-bullet-color: $color-orange;
	$list-bullet-color: $color-dark-content-brand;

		$table-bgColor--accent : $color-grey-10 !global; // Background color used for `.table-striped`.
		$table-border--color : $color-grey-10 !global; // Border color for table and cell borders.

	$table-innerBorder--color : $color-grey-40 !global;
	$table-innerBorder--color : $color-border-strong !global;

	background-color: $color-white;
	background-color: $color-container-default;

v5.0.0 Release #335

v5.0.0 Release #335

Conversation

ashleynolan commented Aug 23, 2021

v5.0.0

Main changes:

Changed

Removed

UI Review Checks

DamianMullins left a comment • edited Loading

Choose a reason for hiding this comment

ashleynolan commented Aug 23, 2021

dandel10n left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

DamianMullins left a comment •

edited

Loading