@coopdigital/styles 0.4.0 → 0.5.0

package/README.md

@@ -4,8 +4,6 @@
 <br />
 </nav>
 
-
-
 # Experience Kit for Styles
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
@@ -18,8 +16,6 @@
 <img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Fstyles?color=819C00">
 [![All Contributors][all_contributors_badge]](#contributors)
 
-
-
 ## Getting started
 
 Install the package from NPM:
@@ -33,11 +29,6 @@ Import styles in the format that you need:
 @use "@coopdigital/styles/components/Button.scss"
 ```
 
-## Developing
-
-Refer to the [root README](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/README.md) for general development setup and usage instructions (lint, formatting, etc).
-
-
 ## Package Scripts
 
 The following scripts should be run inside the styles package folder.
@@ -49,10 +40,6 @@ The following scripts should be run inside the styles package folder.
 | `npm run test:coverage` | To run vitest test coverage |
 | `npm run build` | To run build script |
 
-
-
-
-
 ## Contributors ✨
 
 Thanks goes to these wonderful people:
@@ -71,12 +58,12 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
 <div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
 <small>Catia Costa</small>
-<div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="#code-catia.costa1" title="Code">💻</a> <a href="#doc-catia.costa1" title="Documentation">📖</a> <a href="#test-catia.costa1" title="Tests">⚠️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
 <div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
 <small>Chris Latimer</small>
-<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a></div>
+<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#code-chris.latimer" title="Code">💻</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
 <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -91,7 +78,7 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
 <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
 <small>Emalin Matthews</small>
-<div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="#code-emalin.matthews" title="Code">💻</a> <a href="#doc-emalin.matthews" title="Documentation">📖</a> <a href="#test-emalin.matthews" title="Tests">⚠️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
 <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -103,7 +90,7 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
 <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
 <small>Kamini Pagare</small>
-<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="#code-kamini.pagare" title="Code">💻</a> <a href="#doc-kamini.pagare" title="Documentation">📖</a> <a href="#test-kamini.pagare" title="Tests">⚠️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="">
 <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
@@ -123,12 +110,12 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
 <div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
 <small>Omid Kashan</small>
-<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="#code-omid.kashan" title="Code">💻</a> <a href="#doc-omid.kashan" title="Documentation">📖</a> <a href="#test-omid.kashan" title="Tests">⚠️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
 <div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
 <small>Sam Harden</small>
-<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="#code-sam.harden" title="Code">💻</a> <a href="#doc-sam.harden" title="Documentation">📖</a> <a href="#test-sam.harden" title="Tests">⚠️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="">
 <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
@@ -140,7 +127,7 @@ Thanks goes to these wonderful people:
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
 <div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
 <small>Theo Kouzelis</small>
-<div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+<div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="#code-theodore.kouzelis" title="Code">💻</a> <a href="#doc-theodore.kouzelis" title="Documentation">📖</a> <a href="#test-theodore.kouzelis" title="Tests">⚠️</a></div>
 </a></td>
     </tr>
 </tbody></table>
@@ -151,9 +138,4 @@ Thanks goes to these wonderful people:
 
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
-This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Check out the [contributing guidelines](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/CONTRIBUTING.md) to add new people. Contributions of any kind welcome! 
-
-
-## Troubleshooting
-
-This is still a work in progress, we appreciate feedback. If you have any issues, please get in touch via [tech query channel on slack](https://co-opdigital.slack.com/archives/C0167V69R8W).
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. 

package/dist/components/Pill.css

@@ -0,0 +1,70 @@
+.coop-pill {
+  --type-size-badge: var(--type-size-10);
+  --type-size-pill: var(--type-size-16);
+  display: inline-block;
+  background-color: var(--color-blue-light-10);
+  border-radius: var(--ui-border-radius-xl);
+  padding: var(--spacing-12) var(--spacing-20);
+  font-size: var(--type-size-pill);
+  color: var(--color-text);
+  text-decoration: none;
+}
+.coop-pill[data-badge] {
+  position: relative;
+}
+.coop-pill[data-badge]::after {
+  content: attr(data-badge);
+  position: absolute;
+  top: 0;
+  right: var(--spacing-12);
+  font-size: var(--type-size-badge);
+  font-weight: 600;
+  border-radius: var(--ui-border-radius-m);
+  padding: var(--spacing-2) var(--spacing-6);
+  color: var(--color-white);
+  line-height: var(--type-line-height);
+  transform: translateY(-50%);
+  text-transform: uppercase;
+}
+.coop-pill[data-badge-color=green]::after {
+  background-color: var(--color-dark-green);
+}
+.coop-pill[data-badge-color=orange]::after {
+  background-color: var(--color-dark-orange);
+}
+.coop-pill[data-badge-color=pink]::after {
+  background-color: var(--color-dark-pink);
+}
+.coop-pill[data-badge-color=red]::after {
+  background-color: var(--color-red-dark-4);
+}
+.coop-pill[data-pill-color=blue] {
+  background-color: var(--color-blue-light-10);
+}
+.coop-pill[data-pill-color=pink] {
+  background-color: var(--color-alt-light-pink);
+}
+.coop-pill[data-size=sm] {
+  --type-size-pill: var(--type-size-14);
+}
+.coop-pill[data-size=lg] {
+  --type-size-pill: var(--type-size-18);
+  --type-size-badge: var(--type-size-12);
+}
+.coop-pill[data-size=xl] {
+  --type-size-pill: var(--type-size-20);
+  --type-size-badge: var(--type-size-12);
+  padding: var(--spacing-14) var(--spacing-24);
+}
+
+a.coop-pill:focus, a.coop-pill:hover {
+  text-decoration: underline;
+  color: var(--color-text);
+}
+
+.coop-pill-group {
+  margin-bottom: var(--spacing-32);
+}
+.coop-pill-group .coop-pill {
+  margin-right: var(--spacing-16);
+}

package/dist/main.css

@@ -60,14 +60,17 @@
   /* Alternative colours */
   --color-alt-light-blue: #99e0f5;
   --color-alt-light-pink: #ffdbdb;
+  --color-blue-light-10: #eef3fc;
 }
 
 :root {
   --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
-  --ui-border-radius: 4px;
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;
+  --ui-border-radius: 4px;
+  --ui-border-radius-m: 8px;
+  --ui-border-radius-xl: 20px;
 }
 
 :root {
@@ -76,9 +79,14 @@
   --spacing-48: 3rem;
   --spacing-32: 2rem;
   --spacing-24: 1.5rem;
+  --spacing-20: 1.25rem;
+  --spacing-18: 1.125rem;
   --spacing-16: 1rem;
+  --spacing-14: 0.875rem;
   --spacing-12: 0.75rem;
+  --spacing-10: 0.625rem;
   --spacing-8: 0.5rem;
+  --spacing-6: 0.375rem;
   --spacing-4: 0.25rem;
   --spacing-2: 0.125rem;
 }
@@ -87,6 +95,7 @@
   --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
   /* Typography Sizes */
+  --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
   --type-size-14: 0.875rem;
   --type-size-16: 1rem;
@@ -197,10 +206,6 @@ picture {
   display: block;
 }
 
-textarea:not([rows]) {
-  min-height: 10rem;
-}
-
 :target {
   scroll-margin-block: 5ex;
 }
@@ -233,6 +238,7 @@ a,
 .coop-link {
   color: var(--color-link);
   text-decoration: underline;
+  text-underline-offset: 2px;
 }
 a:hover,
 .coop-link:hover {
@@ -273,33 +279,22 @@ button.coop-link {
   color: currentcolor;
 }
 
-p + *,
-ul + *,
-ol + * {
-  padding-top: var(--spacing-16);
+p,
+ul,
+ol {
+  margin-bottom: var(--spacing-16);
 }
 @media (min-width: 48em) {
-  p + *,
-  ul + *,
-  ol + * {
-    padding-top: var(--spacing-32);
+  p,
+  ul,
+  ol {
+    margin-bottom: var(--spacing-24);
   }
 }
 
-p {
-  margin-bottom: var(--spacing-16);
-}
-
 ul,
 ol {
   padding-left: var(--spacing-24);
-  /*
-  margin-bottom: var(--spacing-8);
-
-  @media (min-width: $mq-medium) {
-    margin-bottom: var(--spacing-16);
-  }
-    */
 }
 
 h1.coop-t-mega {

package/dist/reset.css

@@ -85,10 +85,6 @@ picture {
   display: block;
 }
 
-textarea:not([rows]) {
-  min-height: 10rem;
-}
-
 :target {
   scroll-margin-block: 5ex;
 }

package/dist/typography.css

@@ -27,6 +27,7 @@ a,
 .coop-link {
   color: var(--color-link);
   text-decoration: underline;
+  text-underline-offset: 2px;
 }
 a:hover,
 .coop-link:hover {
@@ -67,33 +68,22 @@ button.coop-link {
   color: currentcolor;
 }
 
-p + *,
-ul + *,
-ol + * {
-  padding-top: var(--spacing-16);
+p,
+ul,
+ol {
+  margin-bottom: var(--spacing-16);
 }
 @media (min-width: 48em) {
-  p + *,
-  ul + *,
-  ol + * {
-    padding-top: var(--spacing-32);
+  p,
+  ul,
+  ol {
+    margin-bottom: var(--spacing-24);
   }
 }
 
-p {
-  margin-bottom: var(--spacing-16);
-}
-
 ul,
 ol {
   padding-left: var(--spacing-24);
-  /*
-  margin-bottom: var(--spacing-8);
-
-  @media (min-width: $mq-medium) {
-    margin-bottom: var(--spacing-16);
-  }
-    */
 }
 
 h1.coop-t-mega {

package/dist/vars.css

@@ -59,14 +59,17 @@
   /* Alternative colours */
   --color-alt-light-blue: #99e0f5;
   --color-alt-light-pink: #ffdbdb;
+  --color-blue-light-10: #eef3fc;
 }
 
 :root {
   --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
-  --ui-border-radius: 4px;
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;
+  --ui-border-radius: 4px;
+  --ui-border-radius-m: 8px;
+  --ui-border-radius-xl: 20px;
 }
 
 :root {
@@ -75,9 +78,14 @@
   --spacing-48: 3rem;
   --spacing-32: 2rem;
   --spacing-24: 1.5rem;
+  --spacing-20: 1.25rem;
+  --spacing-18: 1.125rem;
   --spacing-16: 1rem;
+  --spacing-14: 0.875rem;
   --spacing-12: 0.75rem;
+  --spacing-10: 0.625rem;
   --spacing-8: 0.5rem;
+  --spacing-6: 0.375rem;
   --spacing-4: 0.25rem;
   --spacing-2: 0.125rem;
 }
@@ -86,6 +94,7 @@
   --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
   /* Typography Sizes */
+  --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
   --type-size-14: 0.875rem;
   --type-size-16: 1rem;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,5 +22,5 @@
     "glob": "^11.0.1",
     "sass-embedded": "^1.85.0"
   },
-  "gitHead": "500daac771417639d21d083af67e4570ad1da09b"
+  "gitHead": "ccedccf7209f30e95b5312052836bbd745410d0c"
 }

package/src/components/Pill.scss

@@ -0,0 +1,87 @@
+.coop-pill {
+  --type-size-badge: var(--type-size-10);
+  --type-size-pill: var(--type-size-16);
+
+  display: inline-block;
+  background-color: var(--color-blue-light-10);
+  border-radius: var(--ui-border-radius-xl);
+  padding: var(--spacing-12) var(--spacing-20);
+  font-size: var(--type-size-pill); // [data-pill-size="md"]
+  color: var(--color-text);
+  text-decoration: none;
+
+  &[data-badge] {
+    position: relative;
+
+    &::after {
+      content: attr(data-badge);
+      position: absolute;
+      top: 0;
+      right: var(--spacing-12);
+      font-size: var(--type-size-badge);
+      font-weight: 600;
+      border-radius: var(--ui-border-radius-m);
+      padding: var(--spacing-2) var(--spacing-6);
+      color: var(--color-white);
+      line-height: var(--type-line-height);
+      transform: translateY(-50%);
+      text-transform: uppercase;
+    }
+  }
+
+  $badge-colors: (
+    "green": var(--color-dark-green),
+    "orange": var(--color-dark-orange),
+    "pink": var(--color-dark-pink),
+    "red": var(--color-red-dark-4),
+  );
+
+  @each $key, $badge-color in $badge-colors {
+    &[data-badge-color="#{$key}"]::after {
+      background-color: $badge-color;
+    }
+  }
+
+  $pill-colors: (
+    "blue": var(--color-blue-light-10),
+    "pink": var(--color-alt-light-pink),
+  );
+
+  @each $key, $pill-color in $pill-colors {
+    &[data-pill-color="#{$key}"] {
+      background-color: $pill-color;
+    }
+  }
+
+  &[data-size="sm"] {
+    --type-size-pill: var(--type-size-14);
+  }
+
+  &[data-size="lg"] {
+    --type-size-pill: var(--type-size-18);
+    --type-size-badge: var(--type-size-12);
+  }
+
+  &[data-size="xl"] {
+    --type-size-pill: var(--type-size-20);
+    --type-size-badge: var(--type-size-12);
+
+    padding: var(--spacing-14) var(--spacing-24);
+  }
+}
+
+a.coop-pill {
+  &:focus,
+  &:hover {
+    text-decoration: underline;
+    color: var(--color-text);
+  }
+}
+
+.coop-pill-group {
+  margin-bottom: var(--spacing-32);
+
+  .coop-pill {
+    margin-right: var(--spacing-16);
+  }
+}

package/src/reset.scss

@@ -85,10 +85,6 @@ picture {
   display: block;
 }
 
-textarea:not([rows]) {
-  min-height: 10rem;
-}
-
 :target {
   scroll-margin-block: 5ex;
 }

package/src/typography/_links.scss

@@ -2,6 +2,7 @@ a,
 .coop-link {
   color: var(--color-link);
   text-decoration: underline;
+  text-underline-offset: 2px;
 
   &:hover {
     color: var(--color-link-hover);

package/src/typography/_text.scss

@@ -1,30 +1,18 @@
 @use "../breakpoints.scss" as *;
 
-p + *,
-ul + *,
-ol + * {
-  padding-top: var(--spacing-16);
+p,
+ul,
+ol {
+  margin-bottom: var(--spacing-16);
 
   @media (min-width: $mq-medium) {
-    padding-top: var(--spacing-32);
+    margin-bottom: var(--spacing-24);
   }
 }
 
-p {
-  margin-bottom: var(--spacing-16);
-}
-
 ul,
 ol {
   padding-left: var(--spacing-24);
-
-  /*
-  margin-bottom: var(--spacing-8);
-
-  @media (min-width: $mq-medium) {
-    margin-bottom: var(--spacing-16);
-  }
-    */
 }
 
 h1.coop-t-mega {

package/src/vars/_colours.scss

@@ -68,4 +68,6 @@
   /* Alternative colours */
   --color-alt-light-blue: #99e0f5;
   --color-alt-light-pink: #ffdbdb;
+
+  --color-blue-light-10: #eef3fc;
 }

package/src/vars/_spacing.scss

@@ -4,9 +4,14 @@
   --spacing-48: 3rem;
   --spacing-32: 2rem;
   --spacing-24: 1.5rem;
+  --spacing-20: 1.25rem;
+  --spacing-18: 1.125rem;
   --spacing-16: 1rem;
+  --spacing-14: 0.875rem;
   --spacing-12: 0.75rem;
+  --spacing-10: 0.625rem;
   --spacing-8: 0.5rem;
+  --spacing-6: 0.375rem;
   --spacing-4: 0.25rem;
   --spacing-2: 0.125rem;
 }

package/src/vars/_typography.scss

@@ -3,6 +3,7 @@
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
 
   /* Typography Sizes */
+  --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
   --type-size-14: 0.875rem;
   --type-size-16: 1rem;

package/src/vars/_ui.scss

@@ -1,7 +1,10 @@
 :root {
   --ui-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   --ui-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 35%);
-  --ui-border-radius: 4px;
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;
+
+  --ui-border-radius: 4px;
+  --ui-border-radius-m: 8px;
+  --ui-border-radius-xl: 20px;
 }