@coopdigital/styles 0.44.0 → 0.45.0

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);
   }
 }

package/src/form.scss

@@ -8,7 +8,7 @@
 
 .coop-field {
   --font-size: var(--text-size-18);
-  --field-border: var(--color-mid-dark-grey);
+  --field-border: var(--color-grey-700);
   --field-size: var(--spacing-32);
   --field-gap: var(--spacing-8);
   --field-hint-offset: -2px;
@@ -19,6 +19,10 @@
   gap: var(--field-gap);
 }
 
+.coop-field:has(input:checked) {
+  --field-border: var(--color-text-black);
+}
+
 .coop-field:has(.coop-field-element[data-size="sm"]),
 .coop-fieldset[data-size="sm"] .coop-field {
   --field-size: var(--spacing-24);
@@ -47,7 +51,7 @@
 
 .coop-field-error {
   display: block;
-  color: var(--color-offer-red);
+  color: var(--color-error);
 }
 
 .coop-field-hint {
@@ -74,7 +78,6 @@
 }
 
 /* Field variants */
-/* stylelint-disable no-descending-specificity */
 .coop-field.coop-field-inline {
   .coop-field-markers {
     padding-left: var(--spacing-12);
@@ -86,28 +89,25 @@
   }
 }
 
-.coop-field:has(input:checked) {
-  --field-border: var(--color-text-black);
-}
-
 .coop-fieldset-fields[data-boxed="true"] .coop-field,
 .coop-field[data-boxed="true"] {
-  --min-width: 160px;
-  --field-border: var(--color-mid-dark-grey);
-  --border-width: 2px;
+  --field-min-width: 160px;
+  --field-border: var(--color-grey-700);
+  --field-border-width: 2px;
 
   padding: 1rem;
   border-radius: var(--ui-border-radius-sm);
-  box-shadow: inset 0 0 0 var(--border-width) var(--field-border);
+  box-shadow: inset 0 0 0 var(--field-border-width) var(--field-border);
   transition: box-shadow 0.1s ease-out;
 
   &:has(input:checked),
   &:not(:has(:disabled)):hover {
     --field-border: var(--color-text-black);
-    --border-width: 4px;
+    --field-border-width: 4px;
   }
-
+  /* stylelint-disable-next-line no-descending-specificity */
   .coop-field-label,
+  /* stylelint-disable-next-line no-descending-specificity */
   .coop-field-label > span {
     width: 100%;
   }
@@ -115,6 +115,7 @@
 
 .coop-fieldset-fields[data-boxed="true"] .coop-field.coop-field-inline,
 .coop-field.coop-field-inline[data-boxed="true"] {
+  /* stylelint-disable-next-line no-descending-specificity */
   label > span::after {
     content: "";
 
@@ -160,13 +161,15 @@
 .coop-field:not(.coop-fieldset[data-error="true"] .coop-field, .coop-field[data-hide-error="true"]):has(:user-invalid),
 .coop-fieldset:not([data-hide-error="true"]):is([data-error="true"]) {
   padding-left: var(--spacing-16);
-  border-left: 4px solid var(--color-error-red);
+  border-left: 4px solid var(--color-error);
 }
-
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:not(.coop-field-inline):is([data-error="true"]),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:not(.coop-field-inline):has(:user-invalid),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset[data-error="true"] .coop-field:not(.coop-field-inline) {
-  --field-border: var(--color-error-red);
+  --field-border: var(--color-error);
 }
 
 // If the below behaviour is not desirable, and we want to keep labels black,
@@ -175,19 +178,22 @@
 // .coop-fieldset:disabled {
 //   .coop-checkbox-wrapper,
 //   .coop-radio-wrapper {
-//     color: var(--color-mid-grey);
+//     color: var(--color-grey-600);
 //   }
 // }
 
 /* Disabled states */
 
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-field:has(.coop-field-element:disabled),
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset:disabled,
+/* stylelint-disable-next-line no-descending-specificity */
 .coop-fieldset:disabled .coop-field,
 .coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) {
-  --field-border: var(--color-mid-light-grey);
-  --border-width: 2px;
-
+  --field-border: var(--color-grey-500);
+  --field-border-width: 2px;
+  /* stylelint-disable no-descending-specificity */
   input,
   select,
   textarea,
@@ -200,7 +206,8 @@
   .coop-field-label,
   .coop-field-error,
   .coop-field-hint {
-    color: var(--color-mid-grey);
+    color: var(--color-grey-600);
   }
+
+  /* stylelint-enable no-descending-specificity */
 }
-/* stylelint-enable no-descending-specificity */

package/src/{main.scss → foundations.scss}

@@ -3,4 +3,4 @@
 @use "./typography";
 @use "./layout";
 @use "./form";
-@use "./required-backgrounds";
+@use "./required-utilities";

package/src/required-utilities.scss

@@ -0,0 +1,36 @@
+.bg-tint-grey {
+  --bg-color: var(--color-tint-grey);
+
+  background-color: var(--color-tint-grey);
+}
+
+.bg-offer,
+.bg-red {
+  --bg-color: var(--color-offer);
+
+  background-color: var(--color-offer);
+}
+
+.bg-teal {
+  --bg-color: var(--color-teal);
+
+  background-color: var(--color-teal);
+}
+
+.bg-transparent {
+  --bg-color: transparent;
+
+  background-color: transparent;
+}
+
+.border-grey {
+  --border-color: var(--color-grey-500);
+
+  border-color: var(--color-grey-500);
+}
+
+.border-teal {
+  --border-color: var(--color-teal);
+
+  border-color: var(--color-teal);
+}

package/src/typography/misc.scss

@@ -5,11 +5,11 @@ hr {
 
   height: 0;
   margin: var(--spacing-16) 0;
-  border-color: var(--color-mid-grey);
+  border-color: var(--color-grey-600);
   border-style: solid;
   border-width: 0 0 1px 0;
 
-  color: var(--color-mid-grey);
+  color: var(--color-grey-600);
 
   @media (min-width: $mq-medium) {
     margin: var(--spacing-32) 0;

package/src/typography/text.scss

@@ -62,7 +62,7 @@ kbd {
 
   margin: 0 1px;
   padding: 2px 4px;
-  border: 1px solid var(--color-mid-light-grey);
+  border: 1px solid var(--color-grey-500);
   border-radius: 0.25rem;
 
   font-weight: 500;
@@ -80,20 +80,65 @@ small {
 
 /* Background aware colors */
 [class*="bg-dark"],
-[class*="bg-mid-dark"],
-.bg-offer-red,
+.bg-brand-blue,
 .bg-black,
 .bg-blue,
+.bg-blue-900,
+.bg-blue-700,
+.bg-blue-500,
+.bg-teal,
+.bg-teal-500,
+.bg-grey-900,
+.bg-grey-800,
+.bg-grey-700,
+.bg-grey-warm-900,
+.bg-grey-cool-900,
 .bg-green,
-.bg-coop-blue {
+.bg-green-500,
+.bg-success,
+.bg-red,
+.bg-red-500,
+.bg-error,
+.bg-offer,
+// shortcuts
+.bg-button-primary,
+.bg-button-primary2,
+.bg-purple,
+.bg-purple-500,
+.bg-footer {
   color: var(--color-white);
 }
 
 [class*="bg-light"],
 [class*="bg-tint"],
-[class*="bg-mid-light"],
-.bg-mid-grey,
+.bg-blue-100,
+// notifications
+.bg-red-100,
+.bg-error-light,
+.bg-green-100,
+.bg-success-light,
+.bg-yellow,
+.bg-yellow-500,
+.bg-yellow-100,
+.bg-alert,
+.bg-alert-light,
+// neutrals
+.bg-grey-600,
+.bg-grey-500,
+.bg-grey-400,
+.bg-grey-300,
+.bg-grey-200,
+.bg-grey-100,
+.bg-grey-cool-100,
+.bg-grey-cool-500,
+.bg-grey-warm-100,
+.bg-grey-warm-500,
 .bg-white,
+.bg-primary, // white
+.bg-secondary,
+.bg-membership,
+.bg-footer-light,
+.bg-neutral-warm,
 .bg-none {
   color: var(--color-text-default);
 }