@coopdigital/styles 0.5.6 → 0.5.8

package/README.md

@@ -7,7 +7,7 @@
 # Experience Kit for Styles
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[all_contributors_badge]: https://img.shields.io/badge/all_contributors-16-C08A00.svg '' 
+[all_contributors_badge]: https://img.shields.io/badge/all_contributors-17-C08A00.svg '' 
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 <a href="https://www.npmjs.com/package/@coopdigital/styles"><img src="https://img.shields.io/npm/v/%40coopdigital%2Fstyles?color=E85A00" alt="npm version" /></a>
@@ -113,19 +113,24 @@ Thanks goes to these wonderful people:
 <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="#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/phil.wolstenholme">
+<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25900363/avatar.png" width="200px;" alt=""/></div>
+<small>Phil Wolstenholme</small>
+<div><a href="#a11y-phil.wolstenholme" title="Accessibility">️️️️♿️</a></div>
 </a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/romain.chen">
 <div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
 <small>Romain Chen</small>
 <div><a href="#design-romain.chen" title="Design">🎨</a></div>
 </a></td>
+    </tr><br />
+    <tr>
       <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="#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>
-    </tr><br />
-    <tr>
       <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>
 <small>Shweta Jaju</small>

package/dist/components/AlertBanner.css

@@ -15,7 +15,7 @@
   color: var(--text-color);
   background-color: var(--bg-color);
 }
-.coop-alert-banner--inner h3,
+.coop-alert-banner--inner h2,
 .coop-alert-banner--inner p {
   margin: 0 0 var(--spacing-8) 0;
 }
@@ -26,7 +26,7 @@
   color: inherit;
   text-decoration: none;
 }
-.coop-alert-banner--inner h3 {
+.coop-alert-banner--inner h2 {
   font-size: var(--type-size-22);
   font-weight: 500;
 }

package/dist/components/EditorialCard.css

@@ -0,0 +1,69 @@
+.coop-editorial-card {
+  --flex-direction: column;
+  --image-max-width: 100%;
+  --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
+  display: flex;
+  position: relative;
+  flex-direction: var(--flex-direction);
+  border-radius: var(--ui-border-radius-m);
+  box-shadow: var(--ui-shadow);
+  transition: box-shadow var(--ui-transition-hover);
+}
+@media (min-width: 48em) {
+  .coop-editorial-card[data-layout=horizontal] {
+    --flex-direction: row;
+    --image-max-width: calc(100% / 3);
+    --image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
+  }
+}
+.coop-editorial-card:hover, .coop-editorial-card:focus {
+  box-shadow: var(--ui-shadow-hover);
+}
+.coop-editorial-card h2,
+.coop-editorial-card h3,
+.coop-editorial-card h4,
+.coop-editorial-card h5,
+.coop-editorial-card h6 {
+  margin: 0;
+  font-size: var(--type-size-20);
+  font-weight: var(--type-weight-demibold);
+}
+.coop-editorial-card picture {
+  overflow: hidden;
+  max-width: var(--image-max-width);
+  margin: 0;
+  border-radius: var(--image-border-radius);
+}
+.coop-editorial-card img {
+  width: 100%;
+  height: 100%;
+}
+.coop-editorial-card p {
+  margin: 0;
+}
+.coop-editorial-card a {
+  color: inherit;
+  text-decoration: none;
+  outline: 0;
+}
+.coop-editorial-card a::before {
+  content: "";
+  position: absolute;
+  inset: 0 0 0 0;
+  border-radius: var(--ui-border-radius-m);
+}
+.coop-editorial-card a:focus-within::before {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 3px;
+}
+.coop-editorial-card a:hover h3, .coop-editorial-card a:focus h3 {
+  text-decoration: underline;
+}
+.coop-editorial-card--content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-12);
+  padding: var(--spacing-20);
+  border-radius: var(--ui-border-radius-m);
+  background: var(--color-white);
+}

package/dist/main.css

@@ -110,7 +110,7 @@
 
 :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-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;
   --ui-border-radius: 4px;
@@ -139,6 +139,10 @@
 :root {
   --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
+  /* Weights */
+  --type-weight-default: normal;
+  --type-weight-medium: 500;
+  --type-weight-demibold: 600;
   /* Typography Sizes */
   --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
@@ -158,6 +162,7 @@
   --type-size-56: 3.5rem;
   --type-size-64: 4rem;
   --type-size-82: 5.125rem;
+  --type-size-default: var(--type-size-16);
   /* Typography Line Height */
   --type-line-height-default: 1.5;
   --type-line-height-tight: 1.25;
@@ -233,13 +238,6 @@ label {
   line-height: 1.1;
 }
 
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
@@ -249,6 +247,18 @@ picture {
   display: block;
   max-width: 100%;
 }
+img[data-crop],
+picture[data-crop] {
+  object-fit: cover;
+}
+img[data-crop=square],
+picture[data-crop=square] {
+  aspect-ratio: 1/1;
+}
+img[data-crop=wide],
+picture[data-crop=wide] {
+  aspect-ratio: 16/9;
+}
 
 :target {
   scroll-margin-block: 5ex;

package/dist/reset.css

@@ -67,13 +67,6 @@ label {
   line-height: 1.1;
 }
 
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
@@ -83,6 +76,18 @@ picture {
   display: block;
   max-width: 100%;
 }
+img[data-crop],
+picture[data-crop] {
+  object-fit: cover;
+}
+img[data-crop=square],
+picture[data-crop=square] {
+  aspect-ratio: 1/1;
+}
+img[data-crop=wide],
+picture[data-crop=wide] {
+  aspect-ratio: 16/9;
+}
 
 :target {
   scroll-margin-block: 5ex;

package/dist/vars.css

@@ -109,7 +109,7 @@
 
 :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-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;
   --ui-border-radius: 4px;
@@ -138,6 +138,10 @@
 :root {
   --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
+  /* Weights */
+  --type-weight-default: normal;
+  --type-weight-medium: 500;
+  --type-weight-demibold: 600;
   /* Typography Sizes */
   --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
@@ -157,6 +161,7 @@
   --type-size-56: 3.5rem;
   --type-size-64: 4rem;
   --type-size-82: 5.125rem;
+  --type-size-default: var(--type-size-16);
   /* Typography Line Height */
   --type-line-height-default: 1.5;
   --type-line-height-tight: 1.25;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/styles",
   "type": "module",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -29,7 +29,7 @@
   "description": "",
   "devDependencies": {
     "glob": "^11.0.1",
-    "sass-embedded": "^1.85.1"
+    "sass-embedded": "^1.86.0"
   },
-  "gitHead": "a275fea237a8e1f918e9fd4bd0f18ba114e7ab34"
+  "gitHead": "60cbbc73c648be7d728d36a700bcf2761579548f"
 }

package/src/components/AlertBanner.scss

@@ -18,7 +18,7 @@
     color: var(--text-color);
     background-color: var(--bg-color);
 
-    h3,
+    h2,
     p {
       margin: 0 0 var(--spacing-8) 0;
     }
@@ -32,7 +32,7 @@
       }
     }
 
-    h3 {
+    h2 {
       font-size: var(--type-size-22);
       font-weight: 500;
     }

package/src/components/EditorialCard.scss

@@ -0,0 +1,91 @@
+@use "../breakpoints.scss" as *;
+
+.coop-editorial-card {
+  --flex-direction: column;
+  --image-max-width: 100%;
+  --image-border-radius: var(--ui-border-radius-m) var(--ui-border-radius-m) 0 0;
+
+  display: flex;
+  position: relative;
+  flex-direction: var(--flex-direction);
+  border-radius: var(--ui-border-radius-m);
+  box-shadow: var(--ui-shadow);
+  transition: box-shadow var(--ui-transition-hover);
+
+  &[data-layout="horizontal"] {
+    @media (min-width: $mq-medium) {
+      --flex-direction: row;
+      --image-max-width: calc(100% / 3);
+      --image-border-radius: var(--ui-border-radius-m) 0 0 var(--ui-border-radius-m);
+    }
+  }
+
+  &:hover,
+  &:focus {
+    box-shadow: var(--ui-shadow-hover);
+  }
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 0;
+    font-size: var(--type-size-20);
+    font-weight: var(--type-weight-demibold);
+  }
+
+  picture {
+    overflow: hidden;
+    max-width: var(--image-max-width);
+    margin: 0;
+    border-radius: var(--image-border-radius);
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: none;
+    outline: 0;
+
+    &::before {
+      content: "";
+
+      position: absolute;
+      inset: 0 0 0 0;
+
+      border-radius: var(--ui-border-radius-m);
+    }
+
+    &:focus-within::before {
+      outline: 2px solid var(--color-focus-ring);
+      outline-offset: 3px;
+    }
+
+    &:hover,
+    &:focus {
+      h3 {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &--content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-12);
+
+    padding: var(--spacing-20);
+    border-radius: var(--ui-border-radius-m);
+
+    background: var(--color-white);
+  }
+}

package/src/reset.scss

@@ -68,13 +68,6 @@ label {
   line-height: 1.1;
 }
 
-h1,
-h2,
-h3,
-h4 {
-  text-wrap: balance;
-}
-
 a:not([class]) {
   text-decoration-skip-ink: auto;
 }
@@ -83,6 +76,18 @@ img,
 picture {
   display: block;
   max-width: 100%;
+
+  &[data-crop] {
+    object-fit: cover;
+  }
+
+  &[data-crop="square"] {
+    aspect-ratio: 1 / 1;
+  }
+
+  &[data-crop="wide"] {
+    aspect-ratio: 16 / 9;
+  }
 }
 
 :target {

package/src/vars/_typography.scss

@@ -2,6 +2,11 @@
   --font-family: "Avenir-Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
   --font-family-headline: "Co-opHeadline", "Impact", Helvetica, Arial, sans-serif;
 
+  /* Weights */
+  --type-weight-default: normal;
+  --type-weight-medium: 500;
+  --type-weight-demibold: 600;
+
   /* Typography Sizes */
   --type-size-10: 0.625rem;
   --type-size-12: 0.75rem;
@@ -26,6 +31,8 @@
 
   --type-size-82: 5.125rem;
 
+  --type-size-default: var(--type-size-16);
+
   /* Typography Line Height */
   --type-line-height-default: 1.5;
   --type-line-height-tight: 1.25;

package/src/vars/_ui.scss

@@ -1,6 +1,6 @@
 :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-shadow-hover: 0 2px 4px 0 rgb(0 0 0 / 25%);
   --ui-transition-hover: 0.1s ease-out;
   --ui-transition-hover-property: background-color, color;