Skip to content

PIE Design Changelog

Jump to bottom
mollynye edited this page Apr 12, 2024 · 85 revisions

The format is based on Keep a Changelog and this project adheres to Semantic Versioning.

This CHANGELOG documents all the Core Design Token and Component updates that have been made to the PIE Design System language and are now represented in Figma.

V1.38.0

April 12 2024

Changed

  • [Foundations: Icons] Ting Ting ✅ WebEng ticket
    • Icons changed (large & small):
      Fullscreen: Fullscreen expand, Fullscreen exit
      Google Drive

V1.37.0

April 5 2024

No design changes

V1.37.0

March 28 2024

Happy easter!

Added

  • [Foundations: Spacing] Ting Ting
    Added a new 2px spacing token:

    • Global: $spacing-02
    • Alias: $spacing-a-small
      Figma

  • [Foundations: Icons] Ting Ting ✅ WebEng ticket

    • Icons - Payment method Default:
    • Assets - Payment method Card & Thumbnail:
      • debit-card-home, debit-card-home-filled, bimpli, bimpli-filled, braintree-paypal, braintree-paypal-filled, up, up-filled
        Google Drive

  • [Foundations: Icons] Molly ✅ WebEng ticket

  • [Foundations: Illustrations] Molly

  • [Components: Tab] Ting Ting

  • [Components: Spinner] Molly

    • Added a new Inverse light variant of the component.
      Figma

Changed

  • [Foundations: Radius] Ting Ting

    • Changed Radius global token names:
      • From $radius-02 to $radius-04
      • From $radius-03 to $radius-08
      • From $radius-04 to $radius-12
      • From $radius-05 to $radius-16
      • From $radius-06 to $radius-round
        Figma

  • [Foundations: Spacing] Ting Ting

    • Changed Spacing global token names:
      • From $spacing-01 to $spacing-04
      • From $spacing-02 to $spacing-08
      • From $spacing-03 to $spacing-12
      • From $spacing-04 to $spacing-16
      • From $spacing-05 to $spacing-24
      • From $spacing-06 to $spacing-32
      • From $spacing-07 to $spacing-40
      • From $spacing-08 to $spacing-56
      • From $spacing-09 to $spacing-64
      • From $spacing-10 to $spacing-80
        Figma

  • [Components: Button] Molly

    • Changed primary buttons (Sizes Large, Medium and Small Expressive) from $content-interactive-primary to $content-interactive-light
    • Updated Destructive loading button to new Inverse light variant of spinner
      Figma

  • [Components: Icon Button] Molly

    • Changed primary buttons (Sizes Large, Medium and Small Expressive) from $content-interactive-primary to $content-interactive-light
      Figma

V1.36.0

March 21 2024

Added

  • [Foundations: Colour (Global)] Jordi ✅ Implemented by Fidel 21.03 🙌 shimmer tokensother tokens

    • A new global colour token added $color-turmeric-60 which has a HEX value of #BF8B09.

  • [Foundations: Colour (Alias)] Jordi

    • A new alias colour token added $support-warning-inverse which uses the global token $color-yellow in the light theme, and $color-turmeric-60 in dark theme.
      Figma ✅

    • A new alias colour token added $skeleton-shimmer-01 which uses the global token $color-mozzarella-5 in the light theme, and $color-mozzarella-75 in the dark theme.
      Figma✅

    • A new alias colour token added $skeleton-shimmer-02 which uses the global token $color-mozzarella-5 in the light theme, and $color-mozzarella-70 in the dark theme.
      Figma ✅

    • A new alias colour token added $skeleton-shimmer-03 which uses the global token $color-mozzarella-10 in the light theme, and $color-mozzarella-80 in the dark theme.
      Figma ✅

    • A new alias colour token added $interactive-error which uses the global token $color-red in the light theme, and $color-red-40 in the dark theme.
      Figma ✅

  • [Components: Badge] Jordi ⬜️🛠️ Changes needed for Snacks only. Component name change / Design updates

    • Small and Medium sizes were added to the Brand variant to provide a complete set.
      Figma

Changed

  • [Foundations: Colour (Global)] Jordi ✅ Implemented by Fidel 21.03 🙌

    • The HEX code for $color-red-30 has been updated to #F68179.

  • [Foundations: Colour (Alias)] Jordi ✅ Implemented by Fidel 21.03 🙌

    • The global token that $dark-support-error (dark theme) uses has been updated to $color-red-40.
      Figma ✅

    • The global token that $support-error-inverse (light theme) uses has been updated to $color-red-40.
      Figma ✅

    • The global token that $color-dark-skeleton-02 (dark theme) uses has been updated to $color-mozzarella-75. ✅

  • [Components: Badge] Jordi ⬜️🛠️ Changes needed for Snacks only. Component name change / Design updates

    • The type size has been updated in the small sizes to $font-caption-strong
    • The type size has been updated in the medium sizes to $font-body-strong-l.
      Figma

  • [Components: Skeleton] Jordi ⬜️

    • The number of stars was updated from 6 to 5 to match the Rating component.
    • The names of the colour modifiers for all Skeleton components to Default Subtle Strong.
      Figma

V1.35.0

March 15 2024

Added

  • [Foundations: Iconography] Ting Ting ⬜️🛠️ WebEng ticket
    • Pay: budget-add, wallet-add, pin-code
    • Travel & Transport: dashboard-filled
      Google Drive

V1.34.0

March 08 2024

No design changes

V1.34.0

March 04 2024

Added

  • [Components: List Item] Jordi ⬜️ JIRA ticket:
    • Added our Tag component as a trailing content option for the List Item.

V1.33.0

February 23 2024

Added

  • [Foundations: Iconography] Ting Ting ⬜️🛠️ WebEng ticket

    • Location: map, map-large 🛠️
    • Misc: qr-code, qr-code-large ✅ WebEng ticket
    • Pay: instant-bank-filled, instant-bank-filled-large 🛠️
    • Restaurant: grouped-order, grouped-order-large 🛠️
      Google Drive

  • [Foundations: Colour] Jordi ✅ Implemented by Ilia 12.03 🙌

    • Added a new colour token: $support-neutral-persistent Jira ticket:
    • Added a new colour token: $support-error-inverse Jira ticket:
      Figma

Changed

  • [Foundations: Colour] Jordi ✅ Implemented by Ilia 12.03 🙌

  • [Web components: Text input] Ting Ting 🚫 No action needed from engineering, this feature if needed is handled by pillar engineers.

Removed

  • [Foundations: Typography] Rachel ⬜️🛠️ in progress. Ilia implemented the changes in tokens package. Web team still removing any occurrences in web packages.
    • Two tokens are being deprecated, one global and one alias. The global token is $font-size-19, and the alias is $font-interactive-m. Both are being removed as there are similar alternatives, and to avoid similarity. Any instances of $font-interactive-m should be replaced with $font-interactive-l.

V1.32.0

February 15 2024

Added

  • [Foundations: Illustrations] Ting Ting 🚫 We currently don't have any technical distribution for illustrations, for now there is no task to follow up from engineering.
    • Large (Light & Dark): Documents, Group-ordering, Not-on-menu, Order-cancelled, Restaurant-business, You-are-next
    • Small: Budget, Burger, Cancellation, Credit-card-1, Credit-card-2 Credit-card-cvv-3, Credit-card-cvv-4, Currency-dollar, Currency-euro, Currency-lev, Currency-pound, Event-allowance, Food-rating, Grocery, Help, Pencil, Camera, Jet-open-sauce, Mobile-pay, Not-on-menu, Orderpad, Performance-rating, Restaurant, Schedule
      Google Drive

V1.31.0

February 9 2024

Changed

  • [Web components: Button (V0.1.1)] Rachel ✅

    • Two overflow solutions have been defined to cover edge cases where the label doesn't fit within the available width of the button. When a singular word overflows, the label will be truncated retaining the standard right padding. If a phrase / multiple words overflows, the label will wrap onto a new line, increasing the height with no max height.
      Documentation

  • [Components: Bottom Sheet (V.0.1.0)] Jordi ⬜️

    • Added a new 'Large illustration' prop for the component header at a size 180px x 180px.
      Figma | Documentation

  • [Foundations: Icon] Ting Ting 🚫 We currently only support payment svgs and not cards. If cards are needed from company engineers let us know to make it a priority.

    • Payment method assets: Container changed from dark to brand colour in fill variations Card & Thumbnail: account-credit-filled, cash-filled, credit-card-filled, jetpay-filled, voucher-filled, wallet-filled, instant-bank-filled
    • Icon colour change from brand to dark in non-filled variations Card & Thumbnail: jetpay, voucher
      Google Drive

V1.30.0

February 2 2024

Changed

  • [Web components: Tag (V0.1.1)] ✅

    • Changed label token for Strong-Blue, Strong-Green to "content-inverse"
    • Changed icon token for Strong-red to "content-light"
      Figma - Light theme | Documentation

  • [Components: Fab (V.0.1.0)] 🚫 None of our web libraries have FAB as a component. No action needed from engineering.

V1.29.0

January 26 2024

Added

  • [Foundations: Iconography] ✅ icons ticket payment icons thicket
    • Functionality: Restricted-filled
    • Pay: Coins
    • Currency: Conversion-rate-filled
    • Payment method: bank-of-ireland-uk, bank-of-scotland, barclays, danske-bank, first-direct, halifax, hsbc, lloyds, monzo, nationwide, natwest, revolut, royal-bank-of-scotland, santander, tesco-bank, tsb, ulster-bank, starling
      Google drive

V1.28.0

January 19 2024

Added

  • [Foundations: Colour] ✅ engineering ticket
    • New $color-border-selected-brand token added for teams that require more contrast for selected borders.
    • Light theme: $color-border-selected-brand = $color-orange-30.
    • Dark theme: $color-dark-border-selected-brand = $color-orange-30.
      Figma

V1.27.0

January 12 2024

Changed

  • [Components: Button - Third party] ✅
    • The border color of Google buttons has changed from (#DADCE0) to (#747775) to match the google guidelines.
    • The hover state has changed to (#303030) with 8% opacity.
    • They don't provide active state for this button but to replicate something similar, a layer with Google's hover state color (#303030) with 16% opacity is added.
      Figma

Note: At the time we don't support third party buttons in web components, and Consumer Web is not using our Snacks implementation for the Google button as Google provides their own button implementation.

V1.26.0

January 5 2024

  • No design changes

Happy 2024!

V1.26.0

December 21 2023

  • No design changes

Happy (almost) Christmas!

V1.26.0

December 15 2023

  • No design changes

V1.26.0

December 08 2023

Added

  • [Foundations: Illustrations] 🚫 We currently don't have any technical distribution for illustrations, for now there is no task to follow up from engineering.
    Illustrations added:

V1.25.0

November 30 2023

Added

  • [Web components: Chips (V0.1.0)]
    Component audit complete. Changes from the original design include an optional leading tick icon to the selected state.
    Figma

Changes

  • [Web components: Icon button (V0.2.0)]
    XSmall icon size updated to 20x20px to create more of a scale within the icon buttons.
    Figma

  • [Components: Icon button]
    XSmall icon size updated to 20x20px to create more of a scale within the icon buttons.
    Figma - Light theme | Figma - Dark theme

  • [Components: Segmented control]
    The selected container's background and text colours have been updated due to an issue in the dark theme. The container colour has been updated to $content-background-interactive-inverse, and the text colour updated to $content-interactive-inverse.
    Figma - Light theme | Figma - Dark theme

V1.24.0

November 20 2023

Added

  • [Foundations: Illustrations]
    Large Light & Dark
    - Documents, group ordering, Not-on-menu- Order-cancelled, Restaurant-business, You-are-next.
    Small
    - Budget, Burger, Cancellation, Credit-card, Credit-card-cvv, Currency-dollar, Currency-euro, Currency-lev, Currency-pound, Event-allowance, Food-rating, Grocery, Help, Items-with-descriptions, Items-with-photos, Jet-open-sauce, Mobile-pay, Not-on-menu, Orderpad, Performance-rating, Recurring-allowance, Restaurant, Rolling-allowance, Schedule.
    Figma | Google drive

  • [Components: Text input]
    - Card variant added to support card payment fields.
    Figma - Light theme | Figma - Dark theme

  • [Web components: Tag (V0.1.0)]
    - Component audit complete and changes / additions made.
    A strong blue variant was added, and the naming convention was updated to 'Blue'. Horizontal padding on large sizes increased.
    Figma

Changed

V1.23.0

November 03 2023

Added

Changed

  • [Foundations: Icons]
    - Bag & bag-filled icons re-drawn to be clearer
    Figma | Google Drive

V1.22.0

October 20 2023

Added

Changed

Removed

V1.21.0

October 6 2023

Added

  • [Foundations: Icons]
    - Icons added:
    People: "baby&kid"
    Misc: "pacifier"
    Figma | Google Drive

Changed

V1.20.0

September 22 2023

Added

  • [Foundations: Elevation]
    - Added two elevation global tokens: $elevation-11 & $elevation-12.

  • [Foundations: Elevation]
    - Added $elevation-card to our foundations.
    Figma - Light theme | Figma - Dark theme

  • [Foundations: Icons]
    - Added a new 10bis icon to payment methods.
    Figma | Google Drive

Changed

V1.19.0

September 8 2023

Changed

  • [Foundations: Color]
    - Alias token $color-overlay's global value has been updated to $color-black @55% due to an raised accessibility issue.
    Figma - Light theme | Figma - Dark theme

  • [Foundations: Icons]
    - Tick-circle and tick-circle-filled icons have been updated to a different appearance at both small and large sizes.
    Google drive

  • [Components: Date picker]
    - The visual look of the 'current date' has been updated to use a 2px stroke inside the container instead of a fill to ensure it has enough contrast against the background when a user selects a date range.
    Figma - Light theme | Figma - Dark theme

V1.18.0

August 25 2023

Added

Changed

  • [WEB Components: Button]
    - Primary 'Small - Productive' and 'XSmall' hover token updated to $hover-02
    - Primary 'Small - Productive' and 'XSmall' active token updated to $active-02
    - Destructive button text and icons changed from $content-interactive-primary to $content-interactive-light
    Figma | Figma - Documentation

  • [Components: Badge]
    - Primary badge container changed from $container-dark to $container-inverse.
    Figma - Light theme | Figma - Dark theme | Figma - Documentation

  • [Foundations: Icons]
    - Unnoticeable path changes made to icons in file to see if a bug is fixed in code (stampcard-10, stampcard-10-large, stampcard-10-filled, stampcard-10-filled-large, ribbon-success-large, eggs, eggs-large)
    Google Drive

  • [Patterns: Cookie Banner]
    - Modal button 'save' is now sticky due to concerns about users missing this.
    Figma - Light theme | Figma - Dark theme | Figma - Documentation

  • [Foundations: Icons]
    - Account credit Card and Thumbnail icons updated with new account-credit icon.
    Figma | Google Drive

V1.17.0

August 11 2023

Added

  • [Foundations: Icons]
    - Added third party payment icons (abn-amro, affirm, ali-pay, amazon, amex, bancontact, bitcoin-cash, bit-pay, citadele, diners-club, discover, elo, etherium, forbrugsforeningen, ing, interac, jcb, light-coin, maestro, mastercard, payoneer, paysafe, qiwi, sepa, shoppay, skrill, stripe, union-pay, verifone, visa, web-money, we-chat, yandex)
    Figma | Google Drive

  • [Foundations: Icons]
    - Added set of 54 third party payment 'Card' icons in filled and non-filled variants: (abn-amro, account-credit, affirm, ali-pay, amazon, amex, apple-pay, bancontact, bitcoin, bitcoin-cash, bit-pay, cash, citadele, credit-card, diners-club, discover, eps, elo, etherium, forbrugsforeningen, giro-pay, google-pay, ing, i-deal, interac, jcb, jet-pay, klarna, light-coin, maestro, mastercard, mobile-pay, pay-u, payoneer, pay-pal, paysafe, post-finance, qiwi, sepa, shop-pay, skrill, sodexo, sofort, stripe, twint, union-pay, vvv, verifone, visa, voucher, wallet, web-money, we-chat, yandex)
    Figma | Google Drive

  • [Foundations: Icons]
    - Added set of 54 third party payment 'Thumbnail icons in filled and non-filled variants: (abn-amro, account-credit, affirm, ali-pay, amazon, amex, apple-pay, bancontact, bitcoin, bitcoin-cash, bit-pay, cash, citadele, credit-card, diners-club, discover, eps, elo, etherium, forbrugsforeningen, giro-pay, google-pay, ing, i-deal, interac, jcb, jet-pay, klarna, light-coin, maestro, mastercard, mobile-pay, pay-u, payoneer, pay-pal, paysafe, post-finance, qiwi, sepa, shop-pay, skrill, sodexo, sofort, stripe, twint, union-pay, vvv, verifone, visa, voucher, wallet, web-money, we-chat, yandex)
    Figma | Google Drive

  • [Foundations: Icons]
    - New alternative icons added in Default and Large sizes (pet-supplies-alt, pharmacy-alt)
    Figma | Google Drive

  • [Foundations: Illustrations]
    - Illustrations added in both light and dark tint background variants (cookie-consent-large, goodbye-large).
    Figma | Google Drive

Changed

  • [Foundations: Icons]
    - Both default and large icons updated to look more balanced next to other social icons (google-static).
    Figma | Google Drive

  • [Foundations: Illustrations]
    - Illustration updated to a version with different colours that are more on brand (stampcards-large).
    Figma | Google Drive

  • [WEB Components: Button]
    - Ghost Inverse Loading background updated to the correct token $inverse-active-02.
    - Decision to remove the dual icon prop due to complications surrounding scalability.
    Figma | Documentation

v1.16.0

July 28 2023

Added

  • [WEB Components: Divider]
    - Audit finalised and component enhanced, vertical and horizontal dividers merged together.
    Figma

  • [WEB Components: Link]
    - Audit finished and no changes made from the existing link component.
    Figma

Changed

v1.15.0

July 14 2023

Changed

  • [Foundations: Icons] - Icon updated to a different look. (cash-filled)
    Figma | Google Drive

  • [Patterns: Cookie Banner]
    Default variation
    - 'Accept all' Button updated to Primary and Small - Expressive.
    - 'Reject all' Button updated to custom Outline and Small - Expressive.
    - 'Manage preferences' Button updated to Standalone Link.
    Legal compliance
    - Secondary variation added with 'Reject all' Button as Primary Small - Expressive.
    Figma

v1.14.0

June 30 2023

Added

  • [Foundations: Color]
    - New $brand-02-subtle token (Global token used: $color-cupcake-10).
    - New $brand-03-subtle token (Global token used: $color-berry-10).
    - New $brand-04-subtle token (Global token used: $color-turmeric-05).
    - New $brand-05-subtle token (Global token used: $color-aubergine-10).
    - New $brand-06-subtle token (Global token used: $color-tomato-5).
    Figma - Light theme | Figma - Dark theme

  • [Foundations: Icons]
    - New icons added to the library for both default and large sizes.
    (Dietary: lupin, soybeans, fish, celery, sesame-seeds, crustaceans, sulphites)
    (Restaurant: prepare-bag, management, collect)
    (Misc: gifts, shops, fresh-foods, bakery, beauty, toys-games, diy, stationary, books, clothing, cleaning, electronic-accessories)
    (Functionality: image-flip-horizontal, image-flip-vertical)
    Figma | Google Drive

  • [Foundations: Illustrations]
    - New illustrations added to the library. (bakery, breakfast, burger, burrito, chicken, cold-drinks, convenience, curry-rice, fish-chips, generic, generic-sweet, groceries, hot-drinks, ice-cream, kebab, noodles, pizza, salad, sub-sandwich, sushi)
    Figma | Google Drive

  • [Component: Avatar]
    - New component with two variants, Initials and User Icon.
    Figma - Light theme | Figma - Dark theme

Changed

  • [Foundations: Icons] - Icon updated to a different look. (cash)
    Figma | Google Drive

v1.13.0

June 16 2023

Added

Changed

  • [Component: Modal]
    Wide & Narrow
    - Back Button functionality added to allow for multi-step Modals.
    - Close Button spacing has been reduced.
    - 4px spacing added between body content and footer to account for focus states.
    Narrow
    - Decreased header height to 56px.
    - Icon Buttons changed from Medium to Small size.
    Figma - Light theme

  • [Component: Button] - Both leading and trailing icons are now allowed simultaneously due to new requirements.
    Figma - Light theme

  • [Component: Icon Button] - Ghost Tertiary name changed to Ghost Secondary to create more consistent naming conventions.
    Figma - Light theme

v1.12.0

May 19, 2023

Changed

  • [Component: Segmented Control] - Selected disabled segment background updated to $interactive-light
    - Now allow individual segments to be disabled
    Figma - Light theme | Figma - Dark theme
  • [Component: Dropdown] - Changed the components name from 'Dropdown' to 'Select Input'.
    Figma - Light theme | Figma - Dark theme
  • [Foundations: Illustrations] - Two illustrations have been updated and need replacing (Stampcard - Large, and Stampcard - Small) to order to be more in line with the stampcard initiative.
    Google Drive

v1.11.0

May 9, 2023

Added

  • [Component: Badge] - New component added as a visual indicator used to display a numerical value. Available in Brand, Primary, Secondary, and Inverse; as well as sizes, Small, Medium, Large, and XLarge.
    Figma - Light theme | Figma - Dark theme

v1.10.0

April 21, 2023

Added

  • [Token: Colour] - $focus-outer has been added to partly replace $focus-01 as the focus state is updated to a dual-coloured instead of a single colour.
    Figma - Light theme | Figma - Dark theme
  • [Token: Colour] - $focus-inner has been added to partly replace $focus-01 as the focus state is updated to a dual-coloured instead of a single colour.
    Figma - Light theme | Figma - Dark theme
  • [Foundations: Icons] - New icons added to the library for both default and large sizes (eggs, milk, gluten, mustard, molluscs, nuts, bookmark, and bookmark-filled)
    Google Drive - SVG | Google Drive - PNG
  • [Foundations: Illustrations] - New illustrations added to the library (Orderpad Tutorials Intro Large, Orderpad Tutorials Setup Large, Orderpad Tutorials Process Large, Orderpad Tutorials Adjustments Large, Orderpad Tutorials Business Adjustments Large, Stampcards Large, Stampards Small, Menu Small, Logo Add Small, Compulsory Fields Small, Commision Small, Goodbye Large, Order read to cook Large, DOB Large).
    Google Drive
  • [Component: Accordion] - New variant which includes both an icon and secondary text has been added for Partner pillar.
    Figma - Light theme | Figma - Dark theme
  • [Component: Drag and Drop] - New component that allows users to upload via browsing or dragging in a file.
    Figma - Light theme | Figma - Dark theme
  • [Component - Pagination] - New dropdown variation was added allowing users to see all pages available within a dropdown.
    Figma - Light theme | Figma - Dark theme
  • [Component: Tags] - Disabled variations of all tag types have been added to account for use across the Customer pillar.
    Figma - Light theme | Figma - Dark theme
  • [Pattern: Cookie Banner] - Global pattern for Cookie Banner added including the Banner itself and a preferences Modal.
    Figma

Changed

  • [Token: Colour - High Contrast] – The global token assigned to $support-brand-01 has been updated from $colour-white (Light theme), and $colour-black (Dark theme) to $colour-orange-30 across both Light and Dark theme to increase contrast on containers.
    Figma - Light theme | Figma - Dark theme
  • [Component: Accordion] - Wide variation icon sizes updated from 28px to 24px to align to other core components.
    - Wide variation had 2px top padding added to both placeholder and chevron icons to ensure alignment with the primary text.
    - Wide & narrow (low emphasis) with primary text only variants had top and bottom padding updated to 16px (without divider) and 16px top, 15px bottom (with divider) to align to all other Accordions.
    Figma - Light theme | Figma - Dark theme
  • [Component: Button] - The Small Button's typography token was changed from $interactive-medium to $interactive-large due to looking to depreacte $interactive-medium in the future.
    - The naming convention of Small Button was also updated to Small Button - Interactive; and Small Button - 16 was updated to Small Button - Productive
    Figma - Light theme | Figma - Dark theme
  • [Component: Pagination] - Narrow design for the default type has been updated to match the dropdown type, allowing for better use of space and useability on small screens.
    Figma - Light theme | Figma - Dark theme
  • [Component: Star Rating] - The number of stars has been updated from 6 to 5.
    Figma - Light theme | Figma - Dark theme

Removed

  • [Token: Colour] - $focus-01 has been removed in order to be replaced by new focus tokens $focus-outer and $focus-inner.

v1.9.0

December 2, 2022

Added

  • [Tokens: Colour] – $content-interactive-subdued has been added, which is a new interactive token to support a new design challenge for the Customer pillar. Figma link

Changed

  • [Tokens: Colour] – Our global token $colour-orange has changed from #FB6100 to #F36805, updating our $interactive-brand token and it is now visible across all our products. Figma link
  • [Tokens: Colour] – We’ve updated the $container-dark token so it stays dark when switching to our Dark Theme. Figma link

v1.8.0

November 16, 2022

Added

  • [Tokens: Colour] – We’ve added two High Contrast themes (Light & Dark). These include colour token mappings which ensure most of our components and patterns become AAA compliant. They are purely for mapping purposes and have not been integrated as Libraries in Figma. Figma links: HC Light & HC Dark
  • [Foundations: Icons] – New small scale illustrations added to the illustration library - signed off and ready to use! These can be used in places that have less space to work with. Figma link

Changed

  • [Component: Thumbnail] – Component created to support changes of the restaurant logo (2px padding) and images. Figma link

v1.7.0

November 4, 2022

Changed

  • [Foundations: Icons] – Icons that could be identified by multiple naming options can now be searched through multiple terms in Figma. Key words have been added as tags to certain icons to make them as searchable as possible. Figma link
  • [Component: Tags] – A new strong variation has been added to highlight offers inline with the new Lightening designs. Figma link

v1.6.0

October 21, 2022

Changed

  • [Foundations: Icons] – The icons have been renamed with a new naming convention, following the format of ‘user-circle-large’. Lower case, dashes to separate and the small set noted as default. The file has also been reorganised for easier navigation. Figma link
  • [Component: Data Table] – Replaced the placeholder icon used in the 'icon+string' cell, which was using the instance of the icon from our Icons 1.0 library instead of the Icons 2.0 library. Figma link

Added

  • [Foundations: Icons] – New icons including Pet Supplies, Pharmacy, and High Contrast theme. We’ve also updated the social icons and the T&Cs icon and added a small version of our Hi Vis jacket icon. Figma link

v1.5.0

October 10, 2022

Changed

  • [Component: Breadcrumb] – We’ve updated our Breadcrumb component adding a new variant called ‘Overflow’. Use this when there are too many links to fit within the screen or container. Figma link
  • [Component: Logo] – We’ve added a version of the logo component which only features the icon. Figma link

v1.4.0

September 23, 2022

Added

  • [Icons] – More icons have been added to the library, including filled versions of our voucher and skip circle icons, android icon, various icons relating to policy and documents, orderpad tutorial and a flowers icon. Figma link

Changed

  • [Component: Button] – We’ve added a new Small-16px variant to our global button component. This is so that pillars that use a lot of small text in certain areas of their product (such as areas with a lot of forms) can use buttons that fit in proportionately with the other elements in the UI. Figma link
  • [Component: Data Visualisation] – The Data Visualization component has now been updated with the new design to align with PIE 2.0. The only difference for Skip is the colour tokens used. Figma link
  • [Component: Logo] – The Pyszne logo variation has been added. Figma link

v1.3.0

September 9, 2022

Added

  • [Tokens] – Added a new Alias Colour Token called $skeleton-03. This has been added to solve a visibility problem for the Skeleton component, which was invisible in certain backgrounds. Figma link

Changed

  • [Tokens] – We’ve modified the Global Tokens assigned to our $skeleton Alias Tokens. Figma link
    • $skeleton-01 uses $color-mozzarella-10
    • $skeleton-02 uses $color-mozzarella-20
    • $skeleton-03 uses $color-white
  • [Component: Skeleton] – v1 of the Skeleton component has been deprecated, with v2 making them easier to use Figma link

v1.2.0

August 26, 2022

Added

  • [Icons] – We’ve recently added a batch of new icons to the 2.0 icon library. These include Grocery, Convenience and Food tracking. Figma link

Changed

  • [Component: Popover] – Spacing updated to 8px for all variants, with 16px on top for variants with title for consistency & to create space for focus ring. Figma link

v1.1.0

August 12, 2022

Changed

  • [Tokens: Type] – We’ve updated the naming convention for paragraph spacing tokens to provide more clarity. Figma link
    • $paragraph-01 → $paragraph-spacing-01
    • $paragraph-02 → $paragraph-spacing-02
    • $paragraph-03 → $paragraph-spacing-03
  • [Component: Popover] – Spacing updated to allow enough room for the internal List Item’s focus ring to be displayed. (4px all around (no title), 16px for top with title). Figma link
  • [Component: Accordion] – Updated expanded content spacing to 4px top, 16px below. This was updated to create alignment across different instances of the Accordion being used. Figma link
  • [Component: Data Visualisation] – We've updated the visual look, some of its functionalities and incorporated a new Horizontal Bar Chart variation. Figma link

Added

  • [Component: Carousel Indicator] – Allows the user to navigate through a set of related content within a Carousel. Figma link
  • [Component: StampCard Logos] – We've added new StampCard logos to our global library in both horizontal and vertical variants. Figma link

v1.0.0

August 12, 2022

  • Added Changelog, with versions for previous entries added from design updates doc. Releasing as v1.0.0 so that we can track updates to our tokens and component libraries against design version releases.

v0.10.0

July 29, 2022

Added

  • [Tokens: Colour] – We’ve updated the palettes used for all grey swatches in our products. We’ve divided these into two different palettes called Mozzarella and Charcoal (which are consistent with our brand colours). These are non-breaking changes, as only Global Tokens have been updated, which means the Alias Tokens you use in Figma remain the same with updated HEX values. Figma link
  • [Tokens: Type] – We’ve added a new Global Type Token font-size-19 to account for the 19px font size variation. Figma link

Changed

  • [Tokens: Type] – We’ve updated the naming convention used for our Global Type Tokens, which now use numbers rather than letters to indicate the sizes available (for example, font-size-a has now become font-size-12). Figma link
  • [Tokens: Type] – The $interactive-M Type Alias token now uses the new $font-size-19 Global Type token. Figma link
  • [Component: Modal] – 4px added underneath the heading section to ensure enough space when an interactive component is placed first with the body section. Figma link

Removed

  • [Tokens: Colour] – We’ve deprecated our Grey palette in favour of the new Mozzarella & Charcoal palettes. These are non-breaking changes, as only Global Tokens have been updated, which means the Alias Tokens you use in Figma remain the same with updated HEX values.

v0.9.0

July 15, 2022

Added

  • [Tokens] – Updated the drop shadow colour to use $colour-black. This helps make the shadows more visible on our Inverse backgrounds and Dark Theme backgrounds. Figma link

Changed

  • [Icons] – The two existing Liferando logos have been combined into a single identity logo. Figma link
  • [Component: Chip] – The outline variation’s selected state has been reverted to match the default variation’s selected state. A new ghost variation has also been added. Figma link
  • [Component: Banner] – ‘Neutral’ and ‘Neutral - Alternative’ variations are now available without a supporting icon, if one isn’t required. Figma link
  • [Component: Notification] – ‘Neutral’ and ‘Neutral - Alternative’ variations are now available without a supporting icon, if one isn’t required. Figma link
  • [Component: Modal] – Sticky header & footer visuals updated. Narrow left & right padding reduced to 16px. Figma link

v0.8.0

June 17, 2022

Added

  • [Tokens] – New $disabled-01-inverse token to apply disabled state to inverse UI components. Figma link

Changed

  • [Component: Pagination] – New narrow compact variation with simpler pagination controls specifically for small screens. Figma link
  • [Component: Card] – New disabled state has been added to all Card variations to fulfil the requirement. Figma link

v0.7.0

June 6, 2022

Added

  • [Component: List item - interactive] – Interactive variation of the List Item component. The List Item - Interactive allows users to interact with the entire component through interactive states, and a selected state is also available. Figma link
  • [Component: Stepper] – Enables users to increase or decrease the numeric value. Available in an additional ‘high emphasis’ version for use-cases that require the value to be more prominent. Figma link

Changed

  • [Component: Dropdown] – Icon was updated from a caret to a chevron and the icon size updated to 20px. Figma link
  • [Component: Button List item] – Thumbnail size updated to 40px and a 8px corner radius added. Figma link
  • [Component: Input Stepper] – Moved location from within Text Input to Stepper. Enables users to enter numeric values and controls for increasing or decreasing the value. Figma link
  • [Component: Input Stepper - Form] – Moved location from within Text Input to Stepper. Enables users to enter numeric values and controls for increasing or decreasing the value within a form setting. Figma link
  • [Component: Button] – Labels in our primary instances of the button now use the $content-interactive-primary colour token. Figma link

v0.6.0

May 20, 2022

Added

  • [Component: Show more/less] – Used to hide or reveal content, via either the block; sits underneath content, or inline variant. Figma link

Changed

  • [Component: Breadcrumb] – All links updated to utilise the Link component. Wide variant’s icon decreased in size to 12px. Narrow styling changed from icon button to Link with leading icon. Figma link
  • [Component: Accordion] – All interactive states added. Figma link
  • [Component: Data Table] – Strong column header variant added for pages that require more visual interest. Note, only one style of column header can be used per page. Figma link

Removed

  • [Component: Bottom Sheet] – The second phase of Bottom Sheet deprecation has been implemented - a pattern has been overlaid to visually point out the Bottom Sheets that have been deprecated. Figma link

v0.5.0

May 6, 2022

Changed

  • [Component: Bottom Sheet] – Deprecating the original Bottom Sheet component, and replacing it with the new proposal. Figma link
  • [Component: Button - Third Party] – Disabled and loading states have been added into the component. Figma link
  • [Component: Button - Small button variant] – Added a new variant for our Small buttons which use our Interactive Orange colour. Figma link
  • [Component: Chip] – Outline variant’s selected state has been updated to create hierarchy between the outline & default variants - as previously both selected states matched. Figma link
  • [Component: Progress Bar] – Addition of Label Details and Assistive Tex for both the default and indeterminate variants. Figma link
  • [Component: Banner] – 2.0 icons added (2.0 theme) and nested icon button. New alternative neutral and compact variants added. Figma link
  • [Component: Notification] – 2.0 icons added (2.0 theme) and nested icon button. New alternative neutral and compact variants added. Figma link
  • [Component: Modal] – Narrow versions of the Modal component now use our redefined small Buttons (which use interactive orange). Figma link

Removed

  • [Component: Spinner] – The tertiary colour variant of spinner is no longer required in PIE 2.0 due to its similarity to the secondary variant. Figma link

v0.4.0

April 22, 2022

Added

  • [Tokens] – Addition of four new alias colour tokens ($hover-01-dark, $active-01-dark, $hover-02-light, $active-02-light). All tokens retain their original colour when converted to dark theme, unlike the original hover and active tokens which invert. Figma link
  • [Tokens] – Added two new Global Tokens for system purples ($color-system-purple & $color-system-purple-10), used for visited links. Figma link
  • [Component: Button - Third Party] – New Button variant which allows for third-party logins - Apple, Google, Facebook & Microsoft. Figma link

Changed

  • [Component: Radio & Checkbox] – Addition of selected error states. Figma link
  • [Component: Link] – Updated and re-defined links, adding new inline and standalone variants. Written new documentation. Figma link
  • [Component: Textarea] – Addition of a Web-specific variant with a user-controlled resize behaviour. Figma link
  • [Component: Toggle] – Addition of a Web-specific variant with check icon on selected states to provide additional visual confirmation. Figma link

v0.3.0

April 8, 2022

Changed

  • [Component: Assistive Text] – Icon updated to utilise the outline style along with the addition of documentation. Figma link
  • [Component: Dropdown] – Updated to include all states for Dropdown types with placeholder text as well as user selections, along with the addition of documentation. Figma link
  • [Component: Form Label] – New documentation to support the Form Label component. Figma link
  • [Component: Text Input] – Updated to include all states for Text Input types with placeholder text as well as user selections, along with the addition of documentation. Figma link

v0.2.0

March 25, 2022

Added

  • [Tokens] – Addition of a hover state for the ‘Heading S’ typography tokens to allow for an underline hover state. Figma link

Changed

  • [Component: Text input & Text area] – Updated the elements sitting outside of the form container within the disabled state to pass accessibility rather than utilising the disabled token Figma link
  • [Component: Popover] – The Popover component now has new variants for its popover item elements. These include a toggle for the selected/unselected state, as well as hover, active, focus and disabled variants. Documentation has been updated to reflect these changes. Figma link

v0.1.0

March 11, 2022

Added

  • Dark theme added to PIE Foundations, including dark mode design tokens. Figma link
  • [Tokens] – Interactive Medium Type token added, and now used on small buttons. Figma link
  • [Component: Data Table] – New component that allows sets of data across rows and columns. Available in three variants and many customisable options. Figma link
  • [Component: Button] – New variant of Primary S button added in product orange (Small-Alt). For specific use cases where an orange small button is needed. To make this button accessible we have added a new type token interactive-medium and applied this to both S buttons. Figma link

Changed

  • [Component: Tag] – Neutral-subtle container was updated from $container-subtle to $container-strong to solve a background conflict in Customer: Pre-order. Figma link

Logo

General Information

Web Component Integration Guides

Web Component Usage

Contribution and Development

Clone this wiki locally