@coopdigital/styles 0.16.6 → 0.18.0

package/src/components/Button.scss

@@ -2,75 +2,49 @@
 @use "../breakpoints.scss" as *;
 @use "../keyframes/spinner";
 
-$button-variants: (
+$variants: (
   "blue": (
     bg-color: var(--color-blue),
     text-color: var(--color-white),
-    bg-color-hover: var(--color-blue-hover),
-    bg-color-active: var(--color-blue-active),
   ),
   "white": (
     bg-color: var(--color-white),
     text-color: var(--color-black),
-    bg-color-hover: var(--color-white-hover),
-    bg-color-active: var(--color-white-active),
   ),
   "grey": (
     bg-color: var(--color-grey),
     text-color: var(--color-black),
-    bg-color-hover: var(--color-grey-hover),
-    bg-color-active: var(--color-grey-active),
   ),
   "green-ghost": (
     bg-color: transparent,
     text-color: var(--color-green),
-    text-color-hover: var(--color-green-hover),
-    bg-color-hover: transparent,
-    bg-color-active: transparent,
-    shadow: inset 0 0 0 2px var(--color-green),
-    shadow-hover: inset 0 0 0 2px var(--color-green-hover),
+    border: 2px solid var(--color-green),
   ),
   "blue-ghost": (
     bg-color: transparent,
     text-color: var(--color-blue),
-    text-color-hover: var(--color-blue-hover),
-    bg-color-hover: transparent,
-    bg-color-active: transparent,
-    shadow: inset 0 0 0 2px var(--color-blue),
-    shadow-hover: inset 0 0 0 2px var(--color-blue-hover),
+    border: 2px solid var(--color-blue),
   ),
   "white-ghost": (
     bg-color: transparent,
     text-color: var(--color-white),
-    text-color-hover: var(--color-white-hover),
-    bg-color-hover: transparent,
-    bg-color-active: transparent,
-    shadow: inset 0 0 0 2px var(--color-white),
-    shadow-hover: inset 0 0 0 2px var(--color-white-hover),
+    border: 2px solid var(--color-white),
   ),
   "grey-ghost": (
     bg-color: transparent,
     text-color: var(--color-grey),
-    text-color-hover: var(--color-grey-hover),
-    bg-color-hover: transparent,
-    bg-color-active: transparent,
-    shadow: inset 0 0 0 2px var(--color-grey),
-    shadow-hover: inset 0 0 0 2px var(--color-grey-hover),
+    border: 2px solid var(--color-grey),
   ),
 );
 
 .coop-button {
   --bg-color: var(--color-green);
-  --bg-color-hover: var(--color-green-hover);
-  --bg-color-active: var(--color-green-active);
-  --shadow: 0;
-  --shadow-hover: 0;
   --text-color: var(--color-white);
-  --text-color-hover: var(--color-white);
-  --padding-x: var(--spacing-20);
+  --font-size: var(--type-size-16);
+  --border: 0;
+  --padding-x: var(--spacing-32);
   --padding-y: var(--spacing-12);
-  --type-size: var(--type-size-16);
-  --min-height: var(--spacing-48);
+  --height: var(--spacing-48);
 
   cursor: pointer;
 
@@ -80,13 +54,13 @@ $button-variants: (
   justify-content: center;
 
   width: max-content;
-  height: var(--min-height);
-  margin-bottom: var(--spacing-8);
+  height: var(--height);
+  min-height: var(--height);
   padding: var(--padding-y) var(--padding-x);
-  border: 0;
+  border: var(--border);
   border-radius: var(--ui-border-radius-m);
 
-  font-size: var(--type-size);
+  font-size: var(--font-size);
   font-weight: 500;
   line-height: var(--type-line-height-default);
   color: var(--text-color);
@@ -96,43 +70,51 @@ $button-variants: (
 
   background: var(--bg-color);
   outline: none;
-  box-shadow: var(--shadow);
 
   transition: 0.15s ease-in-out;
   transition-property: background-color, color, text-decoration-color;
 
   /* SIZES */
   &[data-size="sm"] {
-    --padding-y: var(--spacing-8);
     --padding-x: var(--spacing-24);
-    --min-height: var(--spacing-40);
+    --height: var(--spacing-40);
   }
 
   &[data-size="lg"] {
-    --type-size: var(--type-size-18);
-    --min-height: var(--spacing-52);
+    --height: var(--spacing-56);
+    --font-size: var(--type-size-18);
   }
 
-  &[data-size="xl"] {
-    --type-size: var(--type-size-20);
-    --min-height: var(--spacing-54);
+  // &[data-size="xl"] {
+  //   --min-height: var(--spacing-60);
+  // }
+
+  &:is(a) {
+    text-decoration: none;
   }
 
-  &:focus {
+  &:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: 3px;
-    transition: none;
   }
 
-  &:not([data-loading]):active {
-    background: var(--bg-color-active);
+  &[aria-disabled],
+  &:disabled {
+    --bg-color: var(--color-mid-grey);
+    --text-color: var(--color-white);
+    --border: 0;
+
+    cursor: not-allowed;
+    outline: 0;
   }
 
-  &:not([data-loading], [aria-disabled]):hover {
-    color: var(--text-color-hover);
-    text-decoration-color: var(--text-color-hover);
-    background: var(--bg-color-hover);
-    box-shadow: var(--shadow-hover);
+  &:not([data-loading], [aria-disabled], :disabled):hover {
+    text-decoration-color: var(--text-color);
+    background-color: hsl(from var(--bg-color) h s calc(l - 5));
+  }
+
+  &:not([data-loading], [aria-disabled], :disabled):active {
+    background-color: hsl(from var(--bg-color) h s calc(l - 10));
   }
 
   /* FULL WIDTH */
@@ -145,7 +127,7 @@ $button-variants: (
     cursor: wait;
     position: relative;
 
-    svg {
+    svg[data-icon="loading"] {
       animation: spin 1.25s linear infinite;
     }
   }
@@ -154,48 +136,21 @@ $button-variants: (
     pointer-events: none;
   }
 
-  &[aria-disabled] {
-    --bg-color: var(--color-mid-grey);
-    --bg-color-active: var(--color-mid-grey);
-    --bg-color-hover: var(--color-mid-grey);
-    --text-color: var(--color-white);
-
-    cursor: auto;
-    outline: 0;
-
-    &[data-variant*="ghost"] {
-      --bg-color: transparent;
-      --bg-color-active: transparent;
-      --bg-color-hover: transparent;
-      --text-color: var(--color-mid-grey);
-      --shadow: inset 0 0 0 2px var(--color-mid-grey);
-    }
-  }
-
   /* MEDIA QUERIES */
 
-  @media (min-width: $mq-medium) {
-    --padding-x: var(--spacing-40);
-  }
+  // @media (min-width: $mq-medium) {
+  //   --padding-x: var(--spacing-40);
+  // }
 
   /* VARIANTS */
 
-  @each $variant, $colors in $button-variants {
-    &[data-variant="#{$variant}"]:not([aria-disabled]) {
+  @each $variant, $colors in $variants {
+    &[data-variant="#{$variant}"]:not([aria-disabled], &:disabled) {
       --bg-color: #{map.get($colors, "bg-color")};
-      --bg-color-hover: #{map.get($colors, "bg-color-hover")};
-      --bg-color-active: #{map.get($colors, "bg-color-active")};
       --text-color: #{map.get($colors, "text-color")};
 
-      @if map.has-key($colors, "text-color-hover") {
-        --text-color-hover: #{map.get($colors, "text-color-hover")};
-      } @else {
-        --text-color-hover: #{map.get($colors, "text-color")};
-      }
-
-      @if map.has-key($colors, "shadow") {
-        --shadow: #{map.get($colors, "shadow")};
-        --shadow-hover: #{map.get($colors, "shadow-hover")};
+      @if map.has-key($colors, "border") {
+        --border: #{map.get($colors, "border")};
       }
     }
   }

package/src/components/Card.scss

@@ -74,13 +74,13 @@
       border-radius: var(--ui-border-radius-m);
     }
 
-    &:focus-within::before {
+    &:focus-visible::before {
       outline: 2px solid var(--color-focus);
       outline-offset: 3px;
     }
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       .coop-card--heading {
         text-decoration: underline;
       }
@@ -141,7 +141,7 @@
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--ui-shadow-hover);
 
     .coop-card--icon {

package/src/components/Pill.scss

@@ -1,15 +1,19 @@
 .coop-pill {
-  --type-size-badge: var(--type-size-10);
-  --type-size-pill: var(--type-size-16);
+  --font-size-badge: var(--type-size-10);
+  --font-size: var(--type-size-16);
+  --height: var(--spacing-48);
 
   position: relative;
 
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
 
-  padding: var(--spacing-12) var(--spacing-20);
+  height: var(--height);
+  min-height: var(--height);
+  padding: 0 var(--spacing-20);
   border-radius: var(--ui-border-radius-xl);
 
-  font-size: var(--type-size-pill); // [data-pill-size="md"]
+  font-size: var(--font-size); // [data-pill-size="md"]
   line-height: var(--type-line-height-default);
   color: var(--color-text-default);
   text-decoration: none;
@@ -23,7 +27,7 @@
     padding: var(--spacing-2) var(--spacing-6);
     border-radius: var(--ui-border-radius-m);
 
-    font-size: var(--type-size-badge);
+    font-size: var(--font-size-badge);
     font-weight: 600;
     line-height: var(--type-line-height);
     color: var(--color-white);
@@ -31,19 +35,16 @@
   }
 
   &[data-size="sm"] {
-    --type-size-pill: var(--type-size-14);
+    --height: var(--spacing-40);
+    --font-size: 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);
+    --height: var(--spacing-56);
+    --font-size: var(--type-size-18);
+    --font-size-badge: var(--type-size-12);
 
-    padding: var(--spacing-14) var(--spacing-24);
+    padding: 0 var(--spacing-24);
   }
 
   /* GROUP RULES */
@@ -54,7 +55,7 @@
 }
 
 a.coop-pill {
-  &:focus,
+  &:focus-visible,
   &:hover {
     text-decoration: underline;
   }

package/src/components/SearchBox.scss

@@ -1,12 +1,13 @@
 @use "../breakpoints.scss" as *;
 
 .coop-search-box {
-  $ghost-variants: ("green", "blue", "white", "grey");
+  $ghost-variants: ("green", "blue");
 
   --padding-x: var(--spacing-16);
   --padding-y: var(--spacing-12);
-  --type-size: var(--type-size-16);
+  --font-size: var(--type-size-16);
   --border-color: var(--color-grey-neutral-cool);
+  --height: var(--spacing-48);
 
   display: flex;
   flex-direction: column;
@@ -14,7 +15,7 @@
 
   width: 100%;
 
-  font-size: var(--type-size);
+  font-size: var(--font-size);
 
   label {
     display: block;
@@ -30,7 +31,7 @@
 
     /* STATUS */
 
-    &:has(input:focus) {
+    &:has(input:focus-visible) {
       border-radius: var(--ui-border-radius-m);
       outline: 2px solid var(--color-focus);
       outline-offset: 3px;
@@ -43,11 +44,6 @@
     padding-right: 1rem;
     padding-left: 1rem;
     border-radius: 0 var(--ui-border-radius-m) var(--ui-border-radius-m) 0;
-
-    .coop-icon {
-      width: 1em;
-      height: 1em;
-    }
   }
 
   /* SIZES */
@@ -55,21 +51,19 @@
   &[data-size="sm"] {
     --padding-y: var(--spacing-8);
     --padding-x: var(--spacing-12);
+    --height: var(--spacing-40);
   }
 
   &[data-size="lg"] {
-    --type-size: var(--type-size-18);
-  }
-
-  &[data-size="xl"] {
-    --type-size: var(--type-size-20);
-
-    min-height: 3.5rem;
+    --height: var(--spacing-56);
+    --font-size: var(--type-size-18);
   }
 
   input {
     width: 100%;
     min-width: 80px;
+    height: var(--height);
+    min-height: var(--height);
     padding: var(--padding-y) var(--padding-x);
     border: 2px solid var(--border-color);
     border-right: 0;
@@ -77,7 +71,7 @@
 
     outline: 0;
 
-    &:focus {
+    &:focus-visible {
       border-color: var(--color-mid-grey);
     }
   }
@@ -88,17 +82,11 @@
       border-radius: var(--ui-border-radius-m);
     }
 
-    input {
+    input,
+    button,
+    button:hover {
       border: 0;
     }
-
-    button {
-      box-shadow: unset;
-
-      &:hover {
-        box-shadow: unset;
-      }
-    }
   }
 
   &[data-variant="white"] {

package/src/components/Signpost.scss

@@ -10,6 +10,7 @@
   display: flex;
   flex-direction: var(--flex-direction);
   align-items: center;
+
   border-radius: var(--ui-border-radius-m);
 
   box-shadow: var(--ui-shadow);
@@ -24,10 +25,11 @@
 
   picture {
     overflow: hidden;
+    align-self: stretch;
+
     max-width: var(--image-max-width);
     margin: 0;
     border-radius: var(--image-border-radius);
-    align-self: stretch;
   }
 
   img {
@@ -56,13 +58,13 @@
       border-radius: var(--ui-border-radius-m);
     }
 
-    &:focus-within::before {
+    &:focus-visible::before {
       outline: 2px solid var(--color-focus);
       outline-offset: 3px;
     }
 
     &:hover,
-    &:focus {
+    &:focus-visible {
       .coop-signpost--heading {
         text-decoration: underline;
       }
@@ -88,13 +90,13 @@
     min-width: 1rem;
 
     svg {
-      transition: transform 0.2s ease-out;
       height: 1rem;
+      transition: transform 0.2s ease-out;
     }
   }
 
   &:hover,
-  &:focus {
+  &:focus-visible {
     box-shadow: var(--ui-shadow-hover);
 
     .coop-signpost--icon svg {

package/src/components/Tag.scss

@@ -12,8 +12,8 @@
 }
 
 a.coop-tag {
-  &:focus,
-  &:hover {
+  &:hover,
+  &:focus-visible {
     text-decoration: underline;
   }
 }

package/src/layout.scss

@@ -0,0 +1,15 @@
+@use "breakpoints" as *;
+
+.coop-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1rem;
+
+  @media (min-width: $mq-small) {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+  @media (min-width: $mq-medium) {
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    gap: 2rem;
+  }
+}

package/src/main.scss

@@ -1,3 +1,4 @@
 @use "./vars";
 @use "./reset";
 @use "./typography";
+@use "./layout";

package/src/reset.scss

@@ -10,7 +10,7 @@ html {
 
 html,
 body {
-  font-family: "Avenir Next", sans-serif;
+  font-family: var(--font-family);
   font-size: var(--type-size-default);
   color: var(--color-text-default);
 }

package/src/typography/_links.scss

@@ -7,7 +7,7 @@
   }
 
   &:active,
-  &:focus {
+  &:focus-visible {
     outline: 2px solid var(--color-focus);
     outline-offset: 3px;
     transition: none;

package/src/utilities/display.scss

@@ -0,0 +1,7 @@
+$display-options: (flex, block, inline, inline-flex, inline-block, grid, hidden);
+
+@each $display in $display-options {
+  .#{$display} {
+    display: if($display == "hidden", none, $display);
+  }
+}