@coopdigital/styles 0.43.0 → 0.45.0

package/src/components/Button.scss

@@ -1,49 +1,14 @@
-@use "sass:map";
 @use "../breakpoints.scss" as *;
 @use "../keyframes/spinner";
 
-$variants: (
-  "blue": (
-    bg-color: var(--color-blue),
-    text-color: var(--color-white),
-  ),
-  "white": (
-    bg-color: var(--color-white),
-    text-color: var(--color-black),
-  ),
-  "grey": (
-    bg-color: var(--color-grey),
-    text-color: var(--color-black),
-  ),
-  "green-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-green),
-    border: 2px solid var(--color-green),
-  ),
-  "blue-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-blue),
-    border: 2px solid var(--color-blue),
-  ),
-  "white-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-white),
-    border: 2px solid var(--color-white),
-  ),
-  "grey-ghost": (
-    bg-color: transparent,
-    text-color: var(--color-grey),
-    border: 2px solid var(--color-grey),
-  ),
-);
-
 .coop-button {
-  --bg-color: var(--color-green);
-  --text-color: var(--color-white);
-  --font-size: var(--text-size-18);
-  --border: 0;
-  --padding: 0 var(--spacing-24);
-  --height: var(--spacing-48);
+  --button-font-size: var(--text-size-18);
+  --button-border-color: var(--border-color, transparent);
+  --button-padding-y: 0;
+  --button-padding-x: var(--spacing-24);
+  --button-padding: var(--button-padding-y) var(--button-padding-x);
+  --button-height: var(--spacing-48);
+  --button-bg-color: var(--bg-color, var(--color-teal));
 
   cursor: pointer;
 
@@ -53,44 +18,37 @@ $variants: (
   justify-content: center;
 
   width: max-content;
-  height: var(--height);
-  min-height: var(--height);
-  padding: var(--padding);
-  border: var(--border);
+  height: var(--button-height);
+  min-height: var(--button-height);
+  padding: var(--button-padding);
+  border-style: solid;
+  border-width: 0;
   border-radius: var(--ui-border-radius-lg);
 
-  font-size: var(--font-size);
+  font-size: var(--button-font-size);
   font-weight: 500;
   line-height: var(--type-line-height-default);
-  color: var(--text-color);
   text-align: center;
-  text-decoration: underline;
-  text-decoration-color: transparent;
 
-  background: var(--bg-color);
+  background: var(--button-bg-color);
 
   transition: 0.1s ease-out;
-  transition-property: background-color, color, text-decoration-color;
+  transition-property: background-color, color, border-color;
 
   /* SIZES */
   &[data-size="sm"] {
-    --padding: 0 var(--spacing-16);
-    --height: var(--spacing-40);
-    --font-size: var(--text-size-16);
+    --button-padding-x: var(--spacing-16);
+    --button-height: var(--spacing-40);
+    --button-font-size: var(--text-size-16);
   }
 
   &[data-size="lg"] {
-    --padding: 0 var(--spacing-32);
-    --height: var(--spacing-56);
-    --font-size: var(--text-size-20);
+    --button-padding-x: var(--spacing-32);
+    --button-height: var(--spacing-56);
+    --button-font-size: var(--text-size-20);
   }
 
-  // &[data-size="xl"] {
-  //   --min-height: var(--spacing-60);
-  // }
-
   &:is(a) {
-    color: var(--text-color);
     text-decoration-color: transparent;
   }
 
@@ -99,24 +57,13 @@ $variants: (
     outline-offset: 3px;
   }
 
-  &[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], :disabled):hover {
-    color: var(--text-color);
-    text-decoration-color: var(--text-color);
-    background-color: hsl(from var(--bg-color) h s calc(l - 5));
+    text-decoration: solid underline currentColor;
+    background-color: hsl(from var(--button-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));
+    background-color: hsl(from var(--button-bg-color) h s calc(l - 10));
   }
 
   /* FULL WIDTH */
@@ -134,26 +81,29 @@ $variants: (
     }
   }
 
-  > * {
-    pointer-events: none;
+  &[data-variant="ghost"] {
+    --button-bg-color: transparent;
+    --button-border-color: var(--border-color, var(--color-teal));
+    --button-padding: var(--button-padding-y) calc(var(--button-padding-x) - 2px);
+
+    border-color: var(--button-border-color);
+    border-width: 2px;
+    color: var(--button-border-color);
   }
 
-  /* MEDIA QUERIES */
+  &[aria-disabled],
+  &:disabled {
+    cursor: not-allowed;
 
-  // @media (min-width: $mq-medium) {
-  //   --padding-x: var(--spacing-40);
-  // }
+    border: 0;
 
-  /* VARIANTS */
+    color: var(--color-white);
 
-  @each $variant, $colors in $variants {
-    &[data-variant="#{$variant}"]:not([aria-disabled], &:disabled) {
-      --bg-color: #{map.get($colors, "bg-color")};
-      --text-color: #{map.get($colors, "text-color")};
+    background: var(--color-grey-600);
+    outline: 0;
+  }
 
-      @if map.has-key($colors, "border") {
-        --border: #{map.get($colors, "border")};
-      }
-    }
+  > * {
+    pointer-events: none;
   }
 }

package/src/components/Card.scss

@@ -2,10 +2,8 @@
 
 .coop-card {
   --card-direction: column;
-  --image-max-width: 100%;
-  --image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
-  --label-bg: none;
-  --card-bg: var(--color-white);
+  --card-image-max-width: 100%;
+  --card-image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
 
   position: relative;
 
@@ -14,7 +12,6 @@
 
   border-radius: var(--ui-border-radius-lg);
 
-  background: var(--card-bg);
   box-shadow: var(--ui-shadow);
 
   transition: box-shadow var(--ui-transition-hover);
@@ -22,23 +19,23 @@
   &[data-orientation="horizontal"] {
     @media (min-width: $mq-medium) {
       --card-direction: row;
-      --image-max-width: calc(100% / 3);
-      --image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
+      --card-image-max-width: calc(100% / 3);
+      --card-image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
     }
   }
 
   &[data-orientation="horizontal"][data-image-pos="right"] {
     @media (min-width: $mq-medium) {
       --card-direction: row-reverse;
-      --image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
+      --card-image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
     }
   }
 
   picture {
     overflow: hidden;
-    max-width: var(--image-max-width);
+    max-width: var(--card-image-max-width);
     margin: 0;
-    border-radius: var(--image-border-radius);
+    border-radius: var(--card-image-border-radius);
 
     img {
       width: 100%;

package/src/components/Checkbox.scss

@@ -69,7 +69,7 @@ input[type="checkbox"]:indeterminate + div label::after {
   border-radius: var(--ui-border-radius-sm);
 
   opacity: 1;
-  background: var(--color-mid-grey);
+  background: var(--color-grey-600);
 }
 
 input[type="checkbox"]:not(:disabled) + div label {

package/src/components/DatePicker.scss

@@ -132,7 +132,7 @@
   }
 
   .rdp-day.rdp-outside button {
-    color: var(--color-mid-dark-grey);
+    color: var(--color-grey-700);
     background: none;
   }
 
@@ -177,7 +177,7 @@
 
   .rdp-day.rdp-disabled button {
     cursor: not-allowed;
-    color: var(--color-mid-light-grey);
+    color: var(--color-grey-500);
   }
 
   .rdp-day.rdp-range_middle.rdp-selected {

package/src/components/Expandable.scss

@@ -1,9 +1,15 @@
 .coop-expandable {
+  --expandable-bg-color: var(--bg-color, var(--color-tint-grey));
+
   display: inline-block;
+
   padding: var(--spacing-10) var(--spacing-16);
   border-radius: var(--ui-border-radius-lg);
+
   font-size: var(--text-size-18);
 
+  background-color: var(--expandable-bg-color);
+
   & > summary {
     cursor: pointer;
 
@@ -23,7 +29,7 @@
   }
 
   &[open] {
-    box-shadow: 0 0 0 var(--spacing-6) var(--bg);
+    box-shadow: 0 0 0 var(--spacing-6) var(--expandable-bg-color);
 
     .coop-expandable--icon {
       transform: rotate(180deg);

package/src/components/Pill.scss

@@ -1,7 +1,7 @@
 .coop-pill {
-  --font-size-badge: var(--text-size-10);
-  --font-size: var(--text-size-16);
-  --height: var(--spacing-48);
+  --pill-font-size-badge: var(--text-size-10);
+  --pill-font-size: var(--text-size-16);
+  --pill-height: var(--spacing-48);
 
   position: relative;
 
@@ -9,12 +9,12 @@
   gap: 0.5rem;
   align-items: center;
 
-  height: var(--height);
-  min-height: var(--height);
+  height: var(--pill-height);
+  min-height: var(--pill-height);
   padding: 0 var(--spacing-20);
   border-radius: var(--ui-border-radius-3xl);
 
-  font-size: var(--font-size); // [data-pill-size="md"]
+  font-size: var(--pill-font-size); // [data-pill-size="md"]
   line-height: var(--type-line-height-default);
   text-decoration: none;
   white-space: nowrap;
@@ -28,21 +28,21 @@
     padding: var(--spacing-2) var(--spacing-6);
     border-radius: var(--ui-border-radius-lg);
 
-    font-size: var(--font-size-badge);
+    font-size: var(--pill-font-size-badge);
     font-weight: 600;
     line-height: var(--type-line-height);
     text-transform: uppercase;
   }
 
   &[data-size="sm"] {
-    --height: var(--spacing-40);
-    --font-size: var(--text-size-14);
+    --pill-height: var(--spacing-40);
+    --pill-font-size: var(--text-size-14);
   }
 
   &[data-size="lg"] {
-    --height: var(--spacing-56);
-    --font-size: var(--text-size-18);
-    --font-size-badge: var(--text-size-12);
+    --pill-height: var(--spacing-56);
+    --pill-font-size: var(--text-size-18);
+    --pill-font-size-badge: var(--text-size-12);
 
     padding: 0 var(--spacing-24);
   }

package/src/components/Searchbox.scss

@@ -3,81 +3,77 @@
 .coop-searchbox {
   $ghost-variants: ("green", "blue");
 
-  --border-color: var(--color-grey-neutral-cool);
-
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
+
   width: 100%;
+  border-width: 0;
 
   &--inner {
     display: inline-flex;
-    align-items: stretch;
+    align-items: flex-end;
+
     width: 100%;
+    border-radius: var(--ui-border-radius-lg);
+
+    background-color: var(--color-white);
 
     /* STATUS */
 
     &:has(input:focus-visible) {
-      border-radius: var(--ui-border-radius-lg);
+      border-radius: var(--ui-border-radius-md);
       outline: 2px solid var(--color-focus);
       outline-offset: 3px;
       transition: none;
     }
-
-    &:has(input:focus-visible) .coop-text-input-wrapper {
-      outline: 0;
-    }
   }
 
   button {
-    --padding: 0 var(--spacing-16);
+    --button-padding: 0 var(--spacing-16);
 
     position: relative;
     border-radius: 0 var(--ui-border-radius-md) var(--ui-border-radius-md) 0;
 
     &[data-size="lg"] {
-      --padding: 0 var(--spacing-24);
-    }
-  }
-
-  &[data-variant*="ghost"] {
-    .coop-searchbox--inner {
-      border: 2px solid var(--border-color);
-      border-radius: var(--ui-border-radius-md);
-    }
-
-    input,
-    button,
-    button:hover {
-      border: 0;
+      --button-padding: 0 var(--spacing-24);
     }
   }
 
-  &[data-variant="white"],
-  &[data-variant="grey"] {
-    input {
-      border: 0;
-    }
+  .coop-text-input-wrapper input {
+    border-color: var(--border-color, var(--color-grey-500));
+    border-style: solid;
+    border-width: 2px;
+    border-right: 0;
+    border-radius: var(--ui-border-radius-md) 0 0 var(--ui-border-radius-md);
   }
 
   .coop-field {
     width: 100%;
   }
 
-  .coop-text-input-wrapper input {
-    border-color: var(--border-color);
-    border-right: 0;
-    border-radius: var(--ui-border-radius-md) 0 0 var(--ui-border-radius-md);
+  .coop-text-input-wrapper:has(input:focus-visible) {
+    border-radius: var(--ui-border-radius-lg);
+    outline: 0;
+  }
 
-    &:focus-visible {
-      border-color: var(--color-mid-grey);
-      outline: 0;
+  &[data-variant="ghost"] {
+    .coop-searchbox--inner {
+      border-color: var(--border-color, var(--color-teal));
+      border-style: solid;
+      border-width: 2px;
     }
-  }
 
-  @each $variant in $ghost-variants {
-    &[data-variant="#{$variant}-ghost"] {
-      --border-color: var(--color-#{$variant});
+    .coop-text-input-wrapper input {
+      border: 0;
+    }
+
+    .coop-button {
+      --button-bg-color: transparent;
+
+      border: 0;
+      color: var(--border-color, var(--color-white));
+      background: transparent;
     }
   }
 }

package/src/components/Select.scss

@@ -40,8 +40,8 @@ select {
   }
 
   &:disabled {
-    color: var(--color-mid-dark-grey);
-    background-color: var(--color-light-grey);
+    color: var(--color-grey-700);
+    background-color: var(--color-grey-300);
     background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%0A%20%20%3Cpath%20d%3D%22M31%2C9a1%2C1%2C0%2C0%2C0-.29-.71%2C1%2C1%2C0%2C0%2C0-1.42%2C0L16%2C21.59%2C2.71%2C8.3a1%2C1%2C0%2C0%2C0-1.42%2C0%2C1%2C1%2C0%2C0%2C0%2C0%2C1.41l14%2C14a1%2C1%2C0%2C0%2C0%2C1.41%2C0l14-14A1%2C1%2C0%2C0%2C0%2C31%2C9Z%22%0A%20%20%20%20%20%20%20%20fill%3D%22red%22%20stroke%3D%22%23c4c4c4%22%20stroke-width%3D%222%22%2F%3E%0A%3C%2Fsvg%3E");
   }
 

package/src/components/Signpost.scss

@@ -1,14 +1,14 @@
 @use "../breakpoints.scss" as *;
 
 .coop-signpost {
-  --image-max-width: calc(100% / 3);
-  --flex-direction: row;
-  --image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
+  --signpost-image-max-width: calc(100% / 3);
+  --signpost-direction: row;
+  --signpost-image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
 
   position: relative;
 
   display: flex;
-  flex-direction: var(--flex-direction);
+  flex-direction: var(--signpost-direction);
   align-items: center;
 
   border-radius: var(--ui-border-radius-lg);
@@ -27,9 +27,9 @@
     overflow: hidden;
     align-self: stretch;
 
-    max-width: var(--image-max-width);
+    max-width: var(--signpost-image-max-width);
     margin: 0;
-    border-radius: var(--image-border-radius);
+    border-radius: var(--signpost-image-border-radius);
   }
 
   img {
@@ -105,11 +105,11 @@
   }
 
   @media (min-width: $mq-medium) {
-    --image-max-width: 100%;
-    --image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
+    --signpost-image-max-width: 100%;
+    --signpost-image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
 
     &:has(picture) {
-      --flex-direction: column;
+      --signpost-direction: column;
     }
   }
 }

package/src/components/SkipNav.scss

@@ -26,7 +26,7 @@
     color: var(--color-black);
     white-space: nowrap;
 
-    background: var(--color-yellow-mid-5);
+    background: var(--color-yellow-500);
 
     &:hover {
       color: var(--color-black);

package/src/components/Tag.scss

@@ -1,11 +1,11 @@
 .coop-tag {
-  --padding: var(--spacing-4) var(--spacing-16);
+  --tag-padding: var(--spacing-4) var(--spacing-16);
 
   display: inline-flex;
   gap: 0.5rem;
   align-items: center;
 
-  padding: var(--padding);
+  padding: var(--tag-padding);
   border-radius: var(--ui-border-radius-full);
 
   font-size: var(--text-size-16);
@@ -15,7 +15,7 @@
   white-space: nowrap;
 
   &[data-size="sm"] {
-    --padding: 0 var(--spacing-12);
+    --tag-padding: 0 var(--spacing-12);
   }
 }
 

package/src/components/TextInput.scss

@@ -31,7 +31,7 @@ input[type="tel"],
   }
 
   &:disabled {
-    background: var(--color-light-grey);
+    background: var(--color-grey-300);
   }
 }
 
@@ -75,19 +75,19 @@ input[type="tel"],
     border-style: solid;
     border-width: 2px;
 
-    transition: border-color 0.2s ease-out;
+    transition: border-color 0.1s ease-out;
   }
 
   &:has(:disabled) {
-    border-color: var(--color-mid-light-grey);
+    border-color: var(--color-grey-500);
     border-width: 0;
     outline: 0;
   }
 
   &:has(:disabled) .coop-text-input--prefix,
   &:has(:disabled) .coop-text-input--suffix {
-    color: var(--color-mid-grey);
-    background: var(--color-light-grey);
+    color: var(--color-grey-600);
+    background: var(--color-grey-300);
   }
 
   &:has(input:focus-visible) {

package/src/components/Textarea.scss

@@ -1,15 +1,15 @@
 .coop-textarea,
 textarea {
-  --padding: calc(var(--field-size) / 2 - 4px) calc(var(--field-size) / 2);
-  --height: calc(var(--field-size) + var(--spacing-16));
+  --textarea-padding: calc(var(--field-size) / 2 - 4px) calc(var(--field-size) / 2);
+  --textarea-height: calc(var(--field-size) + var(--spacing-16));
 
   position: relative;
 
   display: block;
 
   width: 100%;
-  min-height: var(--height);
-  padding: var(--padding);
+  min-height: var(--textarea-height);
+  padding: var(--textarea-padding);
   border: 2px solid;
   border-color: var(--field-border);
   border-radius: var(--ui-border-radius-sm);
@@ -44,14 +44,14 @@ textarea {
 
   &:disabled {
     resize: none;
-    border-color: var(--color-mid-light-grey);
-    background: var(--color-light-grey);
+    border-color: var(--color-grey-500);
+    background: var(--color-grey-300);
   }
 }
 
 .coop-textarea-counter {
   &[data-error="true"] {
     font-weight: 500;
-    color: var(--color-error-red);
+    color: var(--color-error);
   }
 }