Feature/slotted styles

packages/library/components/inputter/src/styles.css

@@ -28,38 +28,27 @@
     border-style: solid;
     border-color: $INPUTTER_FIELD_BORDER_COLOR;
     border-radius: 0;
-    font-size: inherit;
-    font-family: inherit;
-
-    &::placeholder {
-      /* TODO: ability to style pseudo elements of slotted content */
-    }
-
-    &:focus {
-      /* TODO: ability to style pseudo classes of slotted content */
-    }
+    font-family: $INPUTTER_FIELD_FONT_FAMILY;
+    font-size: $INPUTTER_FIELD_FONT_SIZE;
   }
 
   & ::slotted(:is(
   input[type="checkbox"],
   input[type="radio"])) {
-    /* opacity: 0; /* NOTE: include this declaration if complex selectors slotted are included */
-    position: absolute; /* NOTE: keep this declaration if complex selectors slotted are included */
-    transform: scale(1.2308); /* NOTE: remove this if complex selectors slotted are included */
-    margin-block-start: 3px; /* NOTE: remove this if complex selectors slotted are included */
-    margin-inline-start: 2px; /* NOTE: remove this if complex selectors slotted are included */
+    opacity: 0;
+    position: absolute;
   }
 
   & .checkbox,
   & .radio {
     & ::slotted(label) {
-      cursor: pointer;
       position: relative;
       display: block;
       width: fit-content;
-      padding-inline-start: $INPUTTER_MULTIPLE_PADDING_INLINE;
+      padding-inline-start: 1em;
       margin-block-start: $INPUTTER_MULTIPLE_MARGIN_BLOCK;
       margin-block-end: $INPUTTER_MULTIPLE_MARGIN_BLOCK;
+      margin-inline-start: 0.5em;
     }
   }
 
@@ -133,7 +122,7 @@
     position: relative;
 
     & .input-mask,
-    & ::slotted(input) {
+    & ::slotted(input[type="text"]) { /* NOTE: including `[type="text"]` due to Safari not respecting specificity */
       width: calc((var(--maxlength)) * 1ch);
       font-family: $INPUTTER_MASK_FONT_FAMILY;
     }
@@ -158,6 +147,10 @@
       line-height: normal;
       text-align: start;
     }
+
+    & ::slotted(input[type="text"]) {
+      font-weight: $INPUTTER_MASK_FONT_WEIGHT;
+    }
   }
 
   & .validation {

packages/library/components/inputter/src/styles.slotted.css

@@ -13,5 +13,176 @@
         color: $INPUTTER_DISABLED_PLACEHOLDER_COLOR;
       }
     }
+
+    &::placeholder {
+      color: $INPUTTER_PLACEHOLDER_COLOR;
+      opacity: 1; /* NOTE: This overrides the Firefox user agent style of `opacity: 0.54;` */
+    }
+
+    &:focus,
+    &:hover {
+      border-color: $INPUTTER_HOVER_COLOR;
+      color: $INPUTTER_HOVER_COLOR;
+    }
+
+    &:focus-visible {
+      outline-offset: 0;
+      outline-color: $INPUTTER_FOCUS_COLOR;
+      outline-style: solid;
+      outline-width: 3px;
+    }
+
+    &:focus:not(:focus-visible) {
+      /*
+        https://matthiasott.com/notes/focus-visible-is-here and
+        https://www.tpgi.com/focus-visible-and-backwards-compatibility/
+        NOTE: an input field that expects keyboard interaction will show the focus.
+        https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo
+      */
+      outline-style: none;
+    }
+  }
+
+  & input[type="radio"],
+  & input[type="checkbox"] {
+    & + label {
+      &::before,
+      &::after {
+        position: absolute;
+        content: "";
+        top: 45%; /* use 47% to vertically align the marker to the center of the x-height */
+        left: 0;
+        transform: translate(-50%, -50%);
+        width: 0.75em;
+        height: 0.75em;
+        border-style: solid;
+      }
+
+      &::before { /* `::before` is the outermost piece */
+        border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+        border-width: 2px;
+        background-color: $INPUTTER_MULTIPLE_BACKGROUND_COLOR;
+      }
+
+      &::after { /* `::after` is the innermost piece */
+        border-color: $INPUTTER_MULTIPLE_BORDER_COLOR;
+        border-width: 2px;
+        opacity: 0;
+      }
+    }
+
+    &:hover {
+      & + label {
+        &::before {
+          border-color: $INPUTTER_HOVER_COLOR;
+        }
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::after {
+          opacity: 1;
+        }
+      }
+    }
+
+    &:focus-visible {
+      & + label {
+        &::before {
+          outline-offset: 0;
+          outline-color: $INPUTTER_FOCUS_COLOR;
+          outline-style: solid;
+          outline-width: 3px;
+        }
+      }
+    }
+
+    &[disabled] {
+      & + label {
+        pointer-events: none;
+        color: $INPUTTER_DISABLED_COLOR;
+
+        &::before,
+        &::after {
+          background-color: $INPUTTER_DISABLED_BACKGROUND_COLOR;
+          border-color: $INPUTTER_DISABLED_BORDER_COLOR;
+        }
+      }
+    }
+  }
+
+  /* stylelint-disable no-descending-specificity */
+  & input[type="radio"] {
+    & + label {
+      &::before,
+      &::after {
+        border-radius: 50%;
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::after {
+          border-width: 0.25em;
+          width: 0;
+          height: 0;
+        }
+      }
+    }
+  }
+
+  & input[type="checkbox"] {
+    & + label {
+      &::before {
+        border-radius: 3px;
+      }
+    }
+
+    &:checked {
+      & + label {
+        &::after {
+          border-top: unset;
+          border-right-style: solid;
+          border-right-width: 2px;
+          border-bottom-style: solid;
+          border-bottom-width: 2px;
+          border-left: unset;
+          border-radius: unset;
+          width: 0.25em;
+          height: 0.5em;
+          transform: translate(-50%, -60%) rotate(45deg);
+        }
+      }
+    }
+  }
+
+  & input[type="date"] {
+    &::-webkit-datetime-edit,
+    &::-webkit-datetime-edit-fields-wrapper,
+    &::-webkit-datetime-edit-day-field,
+    &::-webkit-datetime-edit-month-field,
+    &::-webkit-datetime-edit-year-field {
+      padding-block-start: 0; /* NOTE: these pseudo elements have padding applied by the user agent */
+      padding-block-end: 0;
+    }
+
+    &::-webkit-calendar-picker-indicator {
+      opacity: 0; /* NOTE: icon defined: `$INPUTTER_TYPE_DATE` `display: none` removes the clickable element Chrome */
+      margin-inline-start: 0; /* NOTE: margin and position styles, increase the clickable area of this element Chrome */
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      height: auto;
+      width: 2rem;
+    }
+  }
+
+  & input[type="search"] {
+    &::-webkit-search-cancel-button {
+      display: none; /* NOTE: we may choose not to do this as it removes the cancel `x` on hover in Chrome */
+    }
   }
+  /* stylelint-enable no-descending-specificity */
 }

packages/library/components/inputter/src/token.json

@@ -14,6 +14,14 @@
           "value": "{ theme.color.base.background.value }"
         }
       },
+      "font": {
+        "family": {
+          "value": "{ theme.font.family.default }"
+        },
+        "size": {
+          "value": "{ theme.font.size.default }"
+        }
+      },
       "padding": {
         "block": {
           "value": "{ theme.spacer.sm.value }"
@@ -57,9 +65,12 @@
       }
     },
     "multiple": {
-      "icon": {
-        "size": {
-          "value": "{ theme.size.sm.value }"
+      "color": {
+        "value": "{ inputter.field.color.value }"
+      },
+      "background": {
+        "color": {
+          "value": "{ inputter.field.background.color.value }"
         }
       },
       "padding": {
@@ -71,6 +82,16 @@
         "block": {
           "value": "{ inputter.field.margin.block.value }"
         }
+      },
+      "border": {
+        "color": {
+          "value": "{ inputter.field.color.value }"
+        }
+      },
+      "icon": {
+        "size": {
+          "value": "{ theme.size.sm.value }"
+        }
       }
     },
     "label": {
@@ -90,6 +111,9 @@
       "font": {
         "family": {
           "value": "{ theme.font.family.mask.value }"
+        },
+        "weight": {
+          "value": "{ theme.font.weight.mask.value }"
         }
       }
     },
@@ -124,6 +148,11 @@
             "amount": 1
           }]
         }
+      },
+      "placeholder": {
+        "color": {
+          "value": "{ inputter.disabled.color.value }"
+        }
       }
     },
     "validation": {

packages/library/tokens/theme/font.json

@@ -45,10 +45,13 @@
         "label": {
           "value": "{ theme.font.weight.heading.value }"
         },
+        "mask": {
+          "value": "{ theme.font.weight.heading.value }"
+        },
         "heading": {
           "value": "600"
         }
       }
     }
   }
-}
+}