@coopdigital/styles 1.11.0 → 1.12.0

package/src/components/Card.scss

@@ -1,15 +1,13 @@
 @use "../breakpoints.scss" as *;
 
 @mixin card-vertical {
-  --card-direction: column;
-  --card-image-max-width: 100%;
   --card-image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
+  --card-template: "image" auto "content" 1fr;
 }
 
 @mixin card-horizontal {
-  --card-direction: row;
-  --card-image-max-width: calc(100% / 3);
   --card-image-border-radius: var(--ui-border-radius-lg) 0 0 var(--ui-border-radius-lg);
+  --card-template: "image content" / 4fr 8fr;
 }
 
 .coop-card {
@@ -17,8 +15,8 @@
 
   position: relative;
 
-  display: flex;
-  flex-direction: var(--card-direction);
+  display: grid;
+  grid-template: var(--card-template);
 
   border-radius: var(--ui-border-radius-lg);
 
@@ -32,14 +30,14 @@
     @include card-horizontal;
 
     &:has(img[data-align="right"]):not([data-adaptive]) {
-      --card-direction: row-reverse;
       --card-image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
+      --card-template: "content image" / 8fr 4fr;
     }
 
-    &:has(img[data-align="left"])[data-adaptive] {
+    &:has(img[data-align="right"])[data-adaptive] {
       @media (min-width: $mq-md) {
-        --card-direction: row-reverse;
         --card-image-border-radius: 0 var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0;
+        --card-template: "content image" / 8fr 4fr;
       }
     }
 
@@ -58,9 +56,13 @@
     }
   }
 
+  &:not([class*="bg"]) {
+    background: var(--color-white);
+  }
+
   picture {
     overflow: hidden;
-    max-width: var(--card-image-max-width);
+    grid-area: image;
     margin: 0;
     border-radius: var(--card-image-border-radius);
 
@@ -85,7 +87,7 @@
 
   &--link:is(a) {
     color: inherit;
-    text-decoration: none;
+    text-decoration: inherit;
     outline: 0;
 
     &::before {
@@ -110,25 +112,14 @@
 
   &--content {
     display: flex;
+    grid-area: content;
     flex-direction: column;
     gap: var(--spacing-8);
-    // align-self: center;
 
     padding: var(--spacing-24);
   }
 
-  &--inner {
-    display: flex;
-    flex-grow: 1;
-    gap: var(--spacing-12);
-    align-items: flex-start;
-    justify-content: space-between;
-
-    width: 100%;
-    border-radius: var(--ui-border-radius-lg);
-  }
-
-  &--inner:is(a) {
+  &--content:is(a) {
     color: inherit;
     text-decoration: inherit;
   }
@@ -137,6 +128,7 @@
     pointer-events: none;
 
     display: flex;
+    grid-area: content;
     align-self: center;
     justify-content: flex-end;
 
@@ -187,8 +179,12 @@
     }
   }
 
-  &:hover,
-  &:focus-visible {
+  &:has(.coop-card--icon) &--content {
+    width: calc(100% - 2rem);
+  }
+
+  &:has(a):hover,
+  &:has(a):focus-visible {
     box-shadow: var(--ui-shadow-hover);
 
     .coop-card--icon {

package/src/components/Checkbox.scss

@@ -17,15 +17,15 @@ input[type="checkbox"] {
   outline: 0;
 }
 
-input[type="checkbox"] + div label {
+input[type="checkbox"] + label {
   min-height: var(--form-field-size);
 
   &::before {
     content: "";
 
     position: absolute;
-    top: 0;
-    left: 0;
+    top: var(--form-field-padding-y, 0);
+    left: var(--form-field-padding-x, 0);
 
     display: block;
 
@@ -41,11 +41,11 @@ input[type="checkbox"] + div label {
     content: "";
 
     position: absolute;
-    top: calc(var(--form-field-size) / 5);
-    left: 0;
+    top: calc(var(--form-field-padding-y) + var(--form-field-size) / 5);
+    left: var(--form-field-padding-x);
     transform: scale(0.6) rotate(-45deg);
 
-    width: var(--form-field-size);
+    width: calc(var(--form-field-size));
     height: calc(var(--form-field-size) / 2);
     border: solid;
     border-width: 0 0 calc(var(--form-field-size) / 4) calc(var(--form-field-size) / 4);
@@ -55,12 +55,12 @@ input[type="checkbox"] + div label {
   }
 }
 
-input[type="checkbox"]:checked + div label::after {
+input[type="checkbox"]:checked + label::after {
   opacity: 1;
   animation: coop-checkbox-pop 0.2s ease-out forwards;
 }
 
-input[type="checkbox"]:indeterminate + div label::after {
+input[type="checkbox"]:indeterminate + label::after {
   top: calc(var(--form-field-size) / 4);
   transform: scale(0.5);
 
@@ -72,11 +72,11 @@ input[type="checkbox"]:indeterminate + div label::after {
   background: var(--color-grey-600);
 }
 
-input[type="checkbox"]:not(:disabled) + div label {
+input[type="checkbox"]:not(:disabled) + label {
   cursor: pointer;
 }
 
-input[type="checkbox"]:focus + div label::before {
+input[type="checkbox"]:focus + label::before {
   outline: 2px solid var(--color-focus);
   outline-offset: 3px;
 }

package/src/components/DatePicker.scss

@@ -156,6 +156,12 @@
     margin-top: var(--spacing-16);
   }
 
+  table.rdp-month_grid td,
+  table.rdp-month_grid th {
+    border: 0;
+    text-align: center;
+  }
+
   .rdp-day {
     width: calc(var(--radix-popper-available-width) / 7);
     padding: 0;

package/src/components/Radio.scss

@@ -17,15 +17,15 @@ input[type="radio"] {
   outline: 0;
 }
 
-input[type="radio"] + div label {
+input[type="radio"] + label {
   min-height: var(--form-field-size);
 
   &::before {
     content: "";
 
     position: absolute;
-    top: 0;
-    left: 0;
+    top: var(--form-field-padding-y, 0);
+    left: var(--form-field-padding-x, 0);
 
     display: block;
 
@@ -41,8 +41,9 @@ input[type="radio"] + div label {
     content: "";
 
     position: absolute;
-    top: calc(var(--form-field-size) / 4);
-    left: calc(var(--form-field-size) / 4);
+    top: calc(var(--form-field-padding-y) + var(--form-field-size) / 4);
+    left: calc(var(--form-field-padding-x) + var(--form-field-size) / 4);
+    // left: 8px;
 
     width: calc(var(--form-field-size) / 2);
     height: calc(var(--form-field-size) / 2);
@@ -53,16 +54,16 @@ input[type="radio"] + div label {
   }
 }
 
-input[type="radio"]:checked + div label::after {
+input[type="radio"]:checked + label::after {
   opacity: 1;
   animation: coop-radio-pop 0.2s ease-out forwards;
 }
 
-input[type="radio"]:not(:disabled) + div label {
+input[type="radio"]:not(:disabled) + label {
   cursor: pointer;
 }
 
-input[type="radio"]:focus + div label::before {
+input[type="radio"]:focus + label::before {
   outline: 2px solid var(--color-focus);
   outline-offset: 3px;
 }

package/src/components/Searchbox.scss

@@ -1,8 +1,6 @@
 @use "../breakpoints.scss" as *;
 
 .coop-searchbox {
-  $ghost-variants: ("green", "blue");
-
   display: flex;
   flex-direction: column;
   gap: 0.5rem;
@@ -46,7 +44,7 @@
     }
   }
 
-  .coop-text-input-wrapper input {
+  input {
     border-color: var(--border-color, var(--color-grey-500));
     border-style: solid;
     border-width: 2px;
@@ -58,8 +56,10 @@
     width: 100%;
   }
 
-  .coop-text-input-wrapper:has(input:focus-visible) {
-    border-radius: var(--ui-border-radius-lg);
+  input:focus-visible {
+    border-color: var(--border-color);
+    // border-radius: var(--ui-border-radius-lg);
+    border-radius: var(--ui-border-radius-md) 0 0 var(--ui-border-radius-md);
     outline: 0;
   }
 
@@ -70,7 +70,8 @@
       border-width: 2px;
     }
 
-    .coop-text-input-wrapper input {
+    input,
+    input:focus-visible {
       border: 0;
     }
 

package/src/components/TextInput.scss

@@ -1,12 +1,19 @@
 input,
 .coop-text-input {
+  --text-input-padding: 0 calc(var(--form-field-size) / 2 - 4px);
+  --text-input-height: calc(var(--form-field-size) + var(--spacing-16));
+
   position: relative;
 
   display: block;
 
   width: 100%;
+  border-color: var(--form-field-border);
+  border-style: solid;
+  border-width: 2px;
   border-radius: var(--ui-border-radius-sm);
 
+  font-size: var(--form-font-size);
   line-height: 1;
   color: var(--color-text-default);
 
@@ -25,6 +32,15 @@ input,
   &:disabled {
     background: var(--color-grey-300);
   }
+
+  &:focus-visible {
+    border-color: var(--color-black);
+    border-radius: var(--ui-border-radius-sm);
+
+    background: var(--color-white);
+    outline: 2px solid var(--color-focus);
+    outline-offset: 3px;
+  }
 }
 
 input:not([type="checkbox"], [type="radio"]) {
@@ -32,24 +48,15 @@ input:not([type="checkbox"], [type="radio"]) {
   padding: var(--text-input-padding);
 }
 
-.coop-text-input,
 .coop-text-input--prefix,
 .coop-text-input--suffix {
-  display: flex;
-  align-items: center;
+  justify-content: center;
 
-  padding: var(--text-input-padding);
-  border-color: inherit;
   border-style: solid;
   border-width: 2px;
 
-  transition: border-color 0.1s ease-out;
-}
-
-.coop-text-input--prefix,
-.coop-text-input--suffix {
-  justify-content: center;
   white-space: nowrap;
+
   background-color: var(--color-tint-brown);
 
   &[data-inline] {
@@ -57,26 +64,6 @@ input:not([type="checkbox"], [type="radio"]) {
   }
 }
 
-.coop-text-input--prefix {
-  border-top-left-radius: var(--ui-border-radius-sm);
-  border-bottom-left-radius: var(--ui-border-radius-sm);
-
-  &[data-inline] {
-    padding-right: 0;
-    border-right: 0;
-  }
-}
-
-.coop-text-input--suffix {
-  border-top-right-radius: var(--ui-border-radius-sm);
-  border-bottom-right-radius: var(--ui-border-radius-sm);
-
-  &[data-inline] {
-    padding-left: 0;
-    border-left: 0;
-  }
-}
-
 .coop-text-input-wrapper {
   --text-input-padding: 0 calc(var(--form-field-size) / 2 - 4px);
   --text-input-height: calc(var(--form-field-size) + var(--spacing-16));
@@ -114,6 +101,10 @@ input:not([type="checkbox"], [type="radio"]) {
     outline-offset: 3px;
 
     transition: none;
+
+    input {
+      outline: 0;
+    }
   }
 
   &:has(.coop-text-input--prefix) .coop-text-input {
@@ -127,4 +118,36 @@ input:not([type="checkbox"], [type="radio"]) {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+
+  .coop-text-input,
+  .coop-text-input--prefix,
+  .coop-text-input--suffix {
+    display: flex;
+    align-items: center;
+
+    padding: var(--text-input-padding);
+    border-color: inherit;
+
+    transition: border-color 0.1s ease-out;
+  }
+
+  .coop-text-input--prefix {
+    border-top-left-radius: var(--ui-border-radius-sm);
+    border-bottom-left-radius: var(--ui-border-radius-sm);
+
+    &[data-inline] {
+      padding-right: 0;
+      border-right: 0;
+    }
+  }
+
+  .coop-text-input--suffix {
+    border-top-right-radius: var(--ui-border-radius-sm);
+    border-bottom-right-radius: var(--ui-border-radius-sm);
+
+    &[data-inline] {
+      padding-left: 0;
+      border-left: 0;
+    }
+  }
 }

package/src/form.scss

@@ -5,6 +5,10 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-32);
+
+  :where(h1, h2, h3, h4, h5, h6) {
+    margin-bottom: 0;
+  }
 }
 
 /* Single fields */
@@ -15,6 +19,8 @@
   --form-field-size: var(--spacing-32);
   --form-field-gap: var(--spacing-8);
   --form-field-hint-offset: -2px;
+  --form-field-padding-x: 0px;
+  --form-field-padding-y: 0px;
 
   position: relative;
   display: flex;
@@ -22,7 +28,7 @@
   gap: var(--form-field-gap);
 }
 
-.coop-field-element {
+:is(input, select, textarea) {
   scroll-margin-top: 6.25rem;
 }
 
@@ -31,7 +37,7 @@
 }
 
 @media (min-width: $mq-md) {
-  .coop-field:has(.coop-field-element:not([data-size])),
+  .coop-field:has(:is(input, select, textarea):not([data-size])),
   .coop-fieldset:not([data-size]) .coop-field {
     --form-field-size: var(--spacing-40);
     --form-font-size: var(--text-size-20);
@@ -39,39 +45,27 @@
   }
 }
 
-.coop-field:has(.coop-field-element[data-size="sm"]),
+.coop-field:has(:is(input, select, textarea)[data-size="sm"]),
 .coop-fieldset[data-size="sm"] .coop-field {
   --form-field-size: var(--spacing-24);
   --form-font-size: var(--text-size-16);
   --form-field-hint-offset: 0px;
 }
 
-.coop-field:has(.coop-field-element[data-size="md"]),
+.coop-field:has(:is(input, select, textarea)[data-size="md"]),
 .coop-fieldset[data-size="md"] .coop-field {
   --form-field-size: var(--spacing-32);
   --form-font-size: var(--text-size-18);
   --form-field-hint-offset: -2px;
 }
 
-.coop-field:has(.coop-field-element[data-size="lg"]),
+.coop-field:has(:is(input, select, textarea)[data-size="lg"]),
 .coop-fieldset[data-size="lg"] .coop-field {
   --form-field-size: var(--spacing-40);
   --form-font-size: var(--text-size-20);
   --form-field-hint-offset: -4px;
 }
 
-.coop-field-control {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-
-.coop-field-markers {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-}
-
 .coop-field-error {
   display: block;
   color: var(--color-error);
@@ -82,6 +76,11 @@
   color: var(--color-text-alt);
 }
 
+.coop-field-hint,
+.coop-field-error {
+  margin-top: -8px;
+}
+
 .coop-field-label {
   display: flex;
   align-items: center;
@@ -102,13 +101,27 @@
 
 /* Field variants */
 .coop-field.coop-field-inline {
-  .coop-field-markers {
-    padding-left: var(--spacing-12);
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--spacing-6) var(--spacing-12);
+  align-items: center;
+
+  > *:not(input) {
+    grid-column: 2;
+  }
+
+  input {
+    grid-column: 1;
+    margin-top: 0;
+  }
+
+  .coop-field-label {
+    margin-bottom: 0;
   }
 
   .coop-field-label + .coop-field-hint,
   .coop-field-label + .coop-field-error {
-    margin-top: var(--form-field-hint-offset);
+    margin-bottom: 0;
   }
 }
 
@@ -117,7 +130,10 @@
   --form-field-border: var(--color-grey-700);
   --form-field-border-width: 2px;
 
-  padding: 1rem;
+  --form-field-padding-x: var(--spacing-16);
+  --form-field-padding-y: var(--spacing-16);
+
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
   border-radius: var(--ui-border-radius-sm);
   box-shadow: inset 0 0 0 var(--form-field-border-width) var(--form-field-border);
   transition: box-shadow 0.1s ease-out;
@@ -151,8 +167,11 @@
 /* Fieldsets */
 
 .coop-fieldset {
+  --form-field-gap: var(--spacing-8);
+
   display: flex;
   flex-direction: column;
+  gap: var(--form-field-gap);
 
   width: 100%;
   margin: 0;
@@ -164,14 +183,12 @@
   display: flex;
   flex-direction: column;
   gap: var(--spacing-8) var(--spacing-32);
-
-  &:not(:first-child) {
-    margin-top: var(--spacing-8);
-  }
 }
 
 .coop-fieldset-fields[data-orientation="horizontal"] {
-  flex-flow: row wrap;
+  @media (min-width: $mq-sm) {
+    flex-flow: row wrap;
+  }
 }
 
 /* Error states */
@@ -180,6 +197,8 @@
 .coop-field:not(.coop-fieldset[data-error="true"] .coop-field, .coop-field[data-hide-error="true"]):is([data-error="true"]),
 .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"]) {
+  --form-field-padding-x:var(--spacing-16);
+
   padding-left: var(--spacing-16);
   border-left: 4px solid var(--color-error);
 }
@@ -201,10 +220,10 @@
 // }
 
 /* Disabled states */
-.coop-field:has(.coop-field-element:disabled),
+.coop-field:has(:is(input, select, textarea):disabled),
 .coop-fieldset:disabled,
 .coop-fieldset:disabled .coop-field,
-.coop-fieldset-fields[data-boxed] .coop-field:has(.coop-field-element:disabled) {
+.coop-fieldset-fields[data-boxed] .coop-field:has(:is(input, select, textarea):disabled) {
   --form-field-border: var(--color-grey-500);
   --form-field-border-width: 2px;
 
@@ -236,6 +255,10 @@
     outline-offset: 3px;
   }
 
+  &--heading {
+    margin-bottom: var(--spacing-8);
+  }
+
   &--errors {
     padding-top: var(--spacing-12);
     color: var(--color-error);

package/src/reset.scss

@@ -449,14 +449,19 @@ p {
 }
 
 ul,
-ol,
-dd {
-  margin-inline-start: var(--spacing-24);
+ol {
+  margin-left: var(--spacing-32);
   padding: 0;
 }
 
+dd {
+  margin-bottom: var(--spacing-16);
+  margin-left: var(--spacing-12);
+}
+
 dt {
-  font-weight: 500;
+  margin-bottom: var(--spacing-4);
+  font-weight: 600;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/src/typography/headings.scss

@@ -1,16 +1,6 @@
 @use "../breakpoints.scss" as *;
 
 /* Common */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-strong {
-  font-weight: 600;
-}
-
 h1,
 h2,
 h3,
@@ -19,6 +9,7 @@ h5,
 h6 {
   margin-top: 0;
   margin-bottom: var(--spacing-8);
+  font-weight: 600;
 }
 
 /* Using Avenir */

package/src/typography/links.scss

@@ -8,7 +8,7 @@ a,
   }
 }
 
-a:not([class*="bg"]),
+a:where(:not([class*="bg"])),
 :is(.coop-link) {
   color: var(--color-text-link);
   text-decoration: underline;