@coopdigital/styles 0.46.0 → 0.47.0

package/src/breakpoints.scss

@@ -1,7 +1,7 @@
-$mq-xxsmall: 20em; // 320/16
-$mq-xsmall: 25.875em; // 414/16
-$mq-small: 37.5em; // 600/16
-$mq-medium: 48em; // 768/16
-$mq-large: 64em; // 1024/16
-$mq-xlarge: 82em; // 1312/16
-$mq-xxlarge: 96em; // 1536/16
+$mq-2xs: 20em; // 320/16
+$mq-xs: 25.875em; // 414/16
+$mq-sm: 37.5em; // 600/16
+$mq-md: 48em; // 768/16
+$mq-lg: 64em; // 1024/16
+$mq-xl: 82em; // 1312/16
+$mq-2xl: 96em; // 1536/16

package/src/components/Card.scss

@@ -17,7 +17,7 @@
   transition: box-shadow var(--ui-transition-hover);
 
   &[data-orientation="horizontal"] {
-    @media (min-width: $mq-medium) {
+    @media (min-width: $mq-md) {
       --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);
@@ -25,7 +25,7 @@
   }
 
   &[data-orientation="horizontal"][data-image-pos="right"] {
-    @media (min-width: $mq-medium) {
+    @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;
     }

package/src/components/Checkbox.scss

@@ -6,10 +6,10 @@ input[type="checkbox"] {
   display: inline;
   align-self: flex-start;
 
-  width: var(--field-size);
-  min-width: var(--field-size);
-  height: var(--field-size);
-  min-height: var(--field-size);
+  width: var(--form-field-size);
+  min-width: var(--form-field-size);
+  height: var(--form-field-size);
+  min-height: var(--form-field-size);
   margin: 0;
 
   appearance: none;
@@ -18,7 +18,7 @@ input[type="checkbox"] {
 }
 
 input[type="checkbox"] + div label {
-  min-height: var(--field-size);
+  min-height: var(--form-field-size);
 
   &::before {
     content: "";
@@ -29,11 +29,11 @@ input[type="checkbox"] + div label {
 
     display: block;
 
-    width: var(--field-size);
-    height: var(--field-size);
+    width: var(--form-field-size);
+    height: var(--form-field-size);
     padding: 4px;
     border: 2px solid;
-    border-color: var(--field-border);
+    border-color: var(--form-field-border);
     border-radius: var(--ui-border-radius-sm);
   }
 
@@ -41,14 +41,14 @@ input[type="checkbox"] + div label {
     content: "";
 
     position: absolute;
-    top: calc(var(--field-size) / 5);
+    top: calc(var(--form-field-size) / 5);
     left: 0;
     transform: scale(0.6) rotate(-45deg);
 
-    width: var(--field-size);
-    height: calc(var(--field-size) / 2);
+    width: var(--form-field-size);
+    height: calc(var(--form-field-size) / 2);
     border: solid;
-    border-width: 0 0 calc(var(--field-size) / 4) calc(var(--field-size) / 4);
+    border-width: 0 0 calc(var(--form-field-size) / 4) calc(var(--form-field-size) / 4);
     border-top-color: transparent;
 
     opacity: 0;
@@ -61,10 +61,10 @@ input[type="checkbox"]:checked + div label::after {
 }
 
 input[type="checkbox"]:indeterminate + div label::after {
-  top: calc(var(--field-size) / 4);
+  top: calc(var(--form-field-size) / 4);
   transform: scale(0.5);
 
-  height: calc(var(--field-size) / 2);
+  height: calc(var(--form-field-size) / 2);
   border: 0;
   border-radius: var(--ui-border-radius-sm);
 

package/src/components/DatePicker.scss

@@ -15,6 +15,10 @@
     padding-right: 0;
     padding-left: 1px;
   }
+
+  &[data-disabled="true"] .coop-datepicker-trigger {
+    cursor: not-allowed;
+  }
 }
 
 .coop-datepicker-trigger {
@@ -79,6 +83,7 @@
 
       width: 2.5rem;
       height: 2.5rem;
+      padding: 1px 6px; // as original but protects code from 3rd party reset code
       border: 0;
 
       appearance: none;
@@ -137,15 +142,16 @@
       pointer-events: none;
     }
 
-    @media (min-width: $mq-xsmall) {
+    @media (min-width: $mq-xs) {
       font-size: var(--text-size-18);
     }
   }
 
   /* Calendar grid */
 
-  .rdp-month_grid {
+  table.rdp-month_grid {
     border-spacing: 0 4px;
+    border-collapse: separate; // as original but protects code from 3rd party reset code
     grid-column: span 3 / span 3;
     margin-top: var(--spacing-16);
   }
@@ -167,11 +173,13 @@
 
     aspect-ratio: 1/1;
     width: 100%;
+    padding: 1px 6px; // as original but protects code from 3rd party reset code
     border: 0;
     border-radius: 100%;
 
     font-size: var(--text-size-16);
     font-weight: 500;
+    line-height: 1.1; // as original but protects code from 3rd party reset code
 
     appearance: none;
     background: white;

package/src/components/Flourish.scss

@@ -1,6 +1,6 @@
 .coop-flourish {
   position: absolute;
-  z-index: -1;
+  z-index: 0;
   top: calc(105% + 2px - 0.25em);
   right: 0;
 

package/src/components/Radio.scss

@@ -6,10 +6,10 @@ input[type="radio"] {
   display: inline;
   align-self: flex-start;
 
-  width: var(--field-size);
-  min-width: var(--field-size);
-  height: var(--field-size);
-  min-height: var(--field-size);
+  width: var(--form-field-size);
+  min-width: var(--form-field-size);
+  height: var(--form-field-size);
+  min-height: var(--form-field-size);
   margin: 0;
 
   appearance: none;
@@ -18,7 +18,7 @@ input[type="radio"] {
 }
 
 input[type="radio"] + div label {
-  min-height: var(--field-size);
+  min-height: var(--form-field-size);
 
   &::before {
     content: "";
@@ -29,11 +29,11 @@ input[type="radio"] + div label {
 
     display: block;
 
-    width: var(--field-size);
-    height: var(--field-size);
+    width: var(--form-field-size);
+    height: var(--form-field-size);
     padding: 4px;
     border: 2px solid;
-    border-color: var(--field-border);
+    border-color: var(--form-field-border);
     border-radius: 50%;
   }
 
@@ -41,11 +41,11 @@ input[type="radio"] + div label {
     content: "";
 
     position: absolute;
-    top: calc(var(--field-size) / 4);
-    left: calc(var(--field-size) / 4);
+    top: calc(var(--form-field-size) / 4);
+    left: calc(var(--form-field-size) / 4);
 
-    width: calc(var(--field-size) / 2);
-    height: calc(var(--field-size) / 2);
+    width: calc(var(--form-field-size) / 2);
+    height: calc(var(--form-field-size) / 2);
     border-radius: 50%;
 
     opacity: 0;

package/src/components/Select.scss

@@ -1,7 +1,7 @@
 .coop-select,
 select {
-  --padding: 0 var(--field-size) 0 calc(var(--field-size) / 2 - 4px);
-  --height: calc(var(--field-size) + var(--spacing-16));
+  --padding: 0 var(--form-field-size) 0 calc(var(--form-field-size) / 2 - 4px);
+  --height: calc(var(--form-field-size) + var(--spacing-16));
 
   cursor: pointer;
 
@@ -13,7 +13,7 @@ select {
   min-width: fit-content;
   min-height: var(--height);
   padding: var(--padding);
-  border-color: var(--field-border);
+  border-color: var(--form-field-border);
   border-style: solid;
   border-width: 2px;
   border-radius: var(--ui-border-radius-sm);
@@ -25,7 +25,7 @@ select {
   background: white;
   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%20strokeWidth%3D%222%22%20stroke%3D%22black%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%20%2F%3E%0A%3C%2Fsvg%3E");
   background-repeat: no-repeat;
-  background-position: calc(100% - calc(var(--field-size) / 2)) center;
+  background-position: calc(100% - calc(var(--form-field-size) / 2)) center;
   background-size: 16px;
   outline: 0;
 

package/src/components/Signpost.scss

@@ -104,7 +104,7 @@
     }
   }
 
-  @media (min-width: $mq-medium) {
+  @media (min-width: $mq-md) {
     --signpost-image-max-width: 100%;
     --signpost-image-border-radius: var(--ui-border-radius-lg) var(--ui-border-radius-lg) 0 0;
 

package/src/components/SkipNav.scss

@@ -45,7 +45,7 @@
       left: var(--offscreen-position);
     }
 
-    @media (min-width: $mq-medium) {
+    @media (min-width: $mq-md) {
       font-size: var(--text-size-20);
     }
   }

package/src/components/TextInput.scss

@@ -11,8 +11,8 @@ input[type="tel"],
   display: block;
 
   width: 100%;
-  min-height: var(--height);
-  padding: var(--padding);
+  min-height: var(--text-input-height);
+  padding: var(--text-input-padding);
   border-radius: var(--ui-border-radius-sm);
 
   line-height: 1;
@@ -41,7 +41,7 @@ input[type="tel"],
   display: flex;
   align-items: center;
 
-  padding: var(--padding);
+  padding: var(--text-input-padding);
   border-color: inherit;
   border-style: solid;
   border-width: 2px;
@@ -81,16 +81,16 @@ input[type="tel"],
 }
 
 .coop-text-input-wrapper {
-  --padding: 0 calc(var(--field-size) / 2 - 4px);
-  --height: calc(var(--field-size) + var(--spacing-16));
+  --text-input-padding: 0 calc(var(--form-field-size) / 2 - 4px);
+  --text-input-height: calc(var(--form-field-size) + var(--spacing-16));
 
   display: flex;
 
   width: 100%;
-  height: var(--height);
-  border-color: var(--field-border);
+  height: var(--text-input-height);
+  border-color: var(--form-field-border);
 
-  font-size: var(--font-size);
+  font-size: var(--form-font-size);
 
   &:has(:disabled) {
     border-color: var(--color-grey-500);

package/src/components/Textarea.scss

@@ -1,7 +1,7 @@
 .coop-textarea,
 textarea {
-  --textarea-padding: calc(var(--field-size) / 2 - 4px) calc(var(--field-size) / 2);
-  --textarea-height: calc(var(--field-size) + var(--spacing-16));
+  --textarea-padding: calc(var(--form-field-size) / 2 - 4px) calc(var(--form-field-size) / 2);
+  --textarea-height: calc(var(--form-field-size) + var(--spacing-16));
 
   position: relative;
 
@@ -11,10 +11,10 @@ textarea {
   min-height: var(--textarea-height);
   padding: var(--textarea-padding);
   border: 2px solid;
-  border-color: var(--field-border);
+  border-color: var(--form-field-border);
   border-radius: var(--ui-border-radius-sm);
 
-  font-size: var(--font-size); // [data-size="md"]
+  font-size: var(--form-font-size); // [data-size="md"]
   line-height: var(--type-line-height-default);
   color: var(--color-text-default);
 
@@ -50,6 +50,8 @@ textarea {
 }
 
 .coop-textarea-counter {
+  font-size: var(--text-size-14);
+
   &[data-error="true"] {
     font-weight: 500;
     color: var(--color-error);

package/src/form.scss

@@ -7,34 +7,34 @@
 /* Single fields */
 
 .coop-field {
-  --font-size: var(--text-size-18);
-  --field-border: var(--color-grey-700);
-  --field-size: var(--spacing-32);
-  --field-gap: var(--spacing-8);
-  --field-hint-offset: -2px;
+  --form-font-size: var(--text-size-18);
+  --form-field-border: var(--color-grey-700);
+  --form-field-size: var(--spacing-32);
+  --form-field-gap: var(--spacing-8);
+  --form-field-hint-offset: -2px;
 
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: var(--field-gap);
+  gap: var(--form-field-gap);
 }
 
 .coop-field:has(input:checked) {
-  --field-border: var(--color-text-black);
+  --form-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);
-  --font-size: var(--text-size-16);
-  --field-hint-offset: 0px;
+  --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="lg"]),
 .coop-fieldset[data-size="lg"] .coop-field {
-  --field-size: var(--spacing-40);
-  --font-size: var(--text-size-20);
-  --field-hint-offset: -4px;
+  --form-field-size: var(--spacing-40);
+  --form-font-size: var(--text-size-20);
+  --form-field-hint-offset: -4px;
 }
 
 .coop-field-control {
@@ -85,29 +85,27 @@
 
   .coop-field-label + .coop-field-hint,
   .coop-field-label + .coop-field-error {
-    margin-top: var(--field-hint-offset);
+    margin-top: var(--form-field-hint-offset);
   }
 }
 
 .coop-fieldset-fields[data-boxed="true"] .coop-field,
 .coop-field[data-boxed="true"] {
-  --field-min-width: 160px;
-  --field-border: var(--color-grey-700);
-  --field-border-width: 2px;
+  --form-field-border: var(--color-grey-700);
+  --form-field-border-width: 2px;
 
   padding: 1rem;
   border-radius: var(--ui-border-radius-sm);
-  box-shadow: inset 0 0 0 var(--field-border-width) var(--field-border);
+  box-shadow: inset 0 0 0 var(--form-field-border-width) var(--form-field-border);
   transition: box-shadow 0.1s ease-out;
 
   &:has(input:checked),
   &:not(:has(:disabled)):hover {
-    --field-border: var(--color-text-black);
-    --field-border-width: 4px;
+    --form-field-border: var(--color-text-black);
+    --form-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,7 +113,6 @@
 
 .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: "";
 
@@ -163,13 +160,11 @@
   padding-left: var(--spacing-16);
   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);
+  --form-field-border: var(--color-error);
 }
 
 // If the below behaviour is not desirable, and we want to keep labels black,
@@ -183,17 +178,13 @@
 // }
 
 /* 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-grey-500);
-  --field-border-width: 2px;
-  /* stylelint-disable no-descending-specificity */
+  --form-field-border: var(--color-grey-500);
+  --form-field-border-width: 2px;
+
   input,
   select,
   textarea,
@@ -208,6 +199,4 @@
   .coop-field-hint {
     color: var(--color-grey-600);
   }
-
-  /* stylelint-enable no-descending-specificity */
 }

package/src/layout.scss

@@ -8,17 +8,17 @@ $coop-wrap-default-width: 79rem;
   margin-right: auto;
   margin-left: auto;
 
-  @media (min-width: $mq-medium) {
+  @media (min-width: $mq-md) {
     width: calc(100% - 3rem);
   }
-  @media (min-width: $mq-xlarge) {
+  @media (min-width: $mq-xl) {
     width: calc(100% - 4rem);
   }
 }
 
 .padding-responsive {
   padding: 1rem;
-  @media (min-width: $mq-medium) {
+  @media (min-width: $mq-md) {
     padding: 2rem;
   }
 }