@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/forms/_input-fields.scss

@@ -0,0 +1,326 @@
+@use "../../abstracts" as *;
+
+// Text fields.
+//
+// Anatomy is the HTML. .field (or .input-field) is the container. The
+// <label> after the control is the floating label. A leading <i> is the
+// leading icon. <small> is supporting text. .outlined / .border is the
+// outlined variant; the default is filled.
+//
+// Tokens follow https://m3.material.io/components/text-fields/specs
+//   filled     surface-variant well, 4dp top corners, 1dp/2dp bottom indicator
+//   outlined   1dp/2dp outline, 4dp corners
+//   height     56dp
+//   label      body-large rest, body-small floated
+//   input      body-large / on-surface
+//   supporting body-small / on-surface-variant
+//   icons      24dp, 12dp from the edge
+//
+// placeholder=" " (one space) lets the label float with CSS only.
+
+::placeholder {
+  color: var(--md-sys-color-on-surface-variant);
+}
+
+$_text-inputs: "input:not([type]):not(.browser-default), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=month]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.expressive-textarea";
+
+#{$_text-inputs} {
+  outline: none;
+  color: var(--md-sys-color-on-surface);
+  width: 100%;
+  height: 56px;
+  background-color: transparent;
+  @include typescale("body-large");
+  font-family: $font-stack;
+}
+
+.field,
+.input-field {
+  --md-comp-filled-text-field-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-filled-text-field-caret-color: var(--md-sys-color-primary);
+  --input-color: var(--md-comp-filled-text-field-caret-color);
+
+  position: relative;
+  clear: both;
+
+  input:not([type="range"]),
+  textarea {
+    box-sizing: border-box;
+    padding: 20px 16px 8px;
+    border: none;
+    border-radius: 4px 4px 0 0;
+    border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
+    background-color: var(--md-comp-filled-text-field-container-color);
+    caret-color: var(--input-color);
+
+    &:focus:not([readonly]) {
+      border-bottom-width: 2px;
+      border-bottom-color: var(--input-color);
+      padding-bottom: 7px;
+    }
+
+    &:disabled,
+    &[readonly="readonly"] {
+      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+      border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+      background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 4%, transparent);
+    }
+
+    &:focus:not([readonly]) + label,
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter) {
+      color: var(--input-color);
+    }
+
+    &:focus:not([readonly]) + label,
+    &:not([placeholder=" "]) + label,
+    &:not(:placeholder-shown) + label,
+    &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
+    &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
+    &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+      transform: scale(calc(12 / 16));
+      top: 8px;
+    }
+
+    &:disabled + label,
+    &[readonly="readonly"] + label {
+      color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    }
+
+    &.invalid ~ .supporting-text[data-error],
+    &[aria-invalid="true"] ~ .supporting-text[data-error],
+    &.invalid ~ small[data-error],
+    &[aria-invalid="true"] ~ small[data-error] {
+      > span { display: none; }
+    }
+
+    &.invalid,
+    &[aria-invalid="true"] {
+      border-bottom-color: var(--md-sys-color-error);
+      box-shadow: 0 1px 0 0 var(--md-sys-color-error);
+    }
+
+    &.invalid ~ .supporting-text::after,
+    &[aria-invalid="true"] ~ .supporting-text::after,
+    &.invalid ~ small::after,
+    &[aria-invalid="true"] ~ small::after {
+      content: attr(data-error);
+      color: var(--md-sys-color-error);
+    }
+
+    &.invalid ~ label,
+    &:focus.invalid ~ label,
+    &[aria-invalid="true"] ~ label {
+      color: var(--md-sys-color-error);
+    }
+  }
+
+  input::placeholder {
+    user-select: none;
+  }
+
+  > label,
+  > span:not(.supporting-text, .character-counter, .file-path) {
+    color: var(--md-sys-color-on-surface-variant);
+    user-select: none;
+    position: absolute;
+    left: 16px;
+    top: 16px;
+    cursor: text;
+    transform-origin: top left;
+    pointer-events: none;
+    @include typescale("body-large");
+    font-family: $font-stack;
+    transition: left 0.2s ease-out, top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out;
+  }
+
+  > small,
+  > .supporting-text {
+    display: block;
+    margin-top: 4px;
+    padding: 0 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+    font-family: $font-stack;
+  }
+
+  > .character-counter {
+    float: right;
+    margin-top: 4px;
+    padding: 0 16px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+    font-family: $font-stack;
+  }
+
+  > i:first-child:not(.suffix),
+  > .prefix {
+    position: absolute;
+    left: 12px;
+    top: 16px;
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    color: var(--md-sys-color-on-surface-variant);
+    user-select: none;
+    pointer-events: none;
+  }
+
+  > .suffix,
+  > i.suffix {
+    position: absolute;
+    right: 12px;
+    top: 16px;
+    display: flex;
+    align-items: center;
+    font-size: 24px;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    color: var(--md-sys-color-on-surface-variant);
+    user-select: none;
+  }
+
+  > i:first-child:not(.suffix) ~ input,
+  > i:first-child:not(.suffix) ~ textarea,
+  > .prefix ~ input,
+  > .prefix ~ textarea {
+    padding-left: 52px;
+  }
+
+  > .suffix ~ input,
+  > .suffix ~ textarea,
+  > i.suffix ~ input,
+  > i.suffix ~ textarea {
+    padding-right: 52px;
+  }
+
+  > i:first-child:not(.suffix) ~ label,
+  > i:first-child:not(.suffix) ~ span:not(.supporting-text, .character-counter),
+  > .prefix ~ label {
+    left: 52px;
+  }
+
+  &.outlined,
+  &.border {
+    > input,
+    > textarea {
+      padding-top: 8px;
+      padding-bottom: 8px;
+      background-color: transparent;
+      border: 1px solid var(--md-sys-color-outline);
+      border-radius: 4px;
+
+      &:focus:not([readonly]) {
+        border-width: 2px;
+        border-color: var(--input-color);
+        padding-top: 7px;
+        padding-bottom: 7px;
+      }
+
+      &:focus:not([readonly]) + label,
+      &:not([placeholder=" "]) + label,
+      &:not(:placeholder-shown) + label,
+      &:focus:not([readonly]) + span:not(.supporting-text, .character-counter),
+      &:not([placeholder=" "]) + span:not(.supporting-text, .character-counter),
+      &:not(:placeholder-shown) + span:not(.supporting-text, .character-counter) {
+        top: -8px;
+        left: 16px;
+        margin-left: -4px;
+        padding: 0 4px;
+        background-color: var(--md-sys-color-background);
+      }
+
+      &:disabled,
+      &[readonly="readonly"] {
+        border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 12%, transparent);
+        background-color: transparent;
+      }
+
+      &.invalid,
+      &[aria-invalid="true"] {
+        border-color: var(--md-sys-color-error);
+        box-shadow: none;
+      }
+    }
+  }
+}
+
+.inline {
+  display: inline-block;
+}
+
+.searchbar {
+  .prefix {
+    position: absolute;
+    padding-left: 1rem;
+    top: 0;
+    user-select: none;
+    display: flex;
+    align-self: center;
+  }
+
+  > input {
+    border-width: 0;
+    background-color: transparent;
+    padding-left: 3rem;
+  }
+}
+
+.searchbar.has-sidebar {
+  margin-left: 0;
+  @include bp-up("large") {
+    margin-left: 300px;
+  }
+}
+
+textarea {
+  width: 100%;
+  height: 3rem;
+  background-color: transparent;
+
+  &.expressive-textarea {
+    padding-top: 24px !important;
+    padding-bottom: 8px !important;
+    line-height: 24px;
+    overflow-y: hidden;
+    resize: none;
+    min-height: 56px;
+    box-sizing: border-box;
+  }
+}
+
+.autocomplete-content {
+  li {
+    .highlight { color: var(--md-sys-color-on-surface); }
+    img {
+      height: $dropdown-item-height - 10;
+      width: $dropdown-item-height - 10;
+      margin: 5px 15px;
+    }
+  }
+}
+
+.datepicker-date-input {
+  position: relative;
+  text-indent: -9999px;
+
+  &::after {
+    display: block;
+    position: absolute;
+    top: 1.1rem;
+    content: attr(data-date);
+    color: var(--input-color);
+    text-indent: 0;
+  }
+
+  &:focus-visible {
+    text-indent: 0;
+  }
+
+  &:focus-visible:after {
+    text-indent: -9999px;
+  }
+}

package/src/sass/components/forms/_radio-buttons.scss

@@ -0,0 +1,190 @@
+@use "../../abstracts" as *;
+
+// Radio buttons.
+//
+// Anatomy is the HTML. A <label> wrapping <input type="radio"> is the
+// control. The label text is a sibling of the input — no extra class, no
+// required <span>. input + span still works (legacy / BeerCSS).
+//
+// Tokens follow https://m3.material.io/components/radio-button/specs
+//   icon           20dp ring, 2dp stroke, on-surface-variant
+//   selected       primary ring + 10dp primary inner (the M3 "gap")
+//   state layer    40dp, 8% hover / 10% focus
+//   touch target   48dp
+//   label          body-large / on-surface
+//   disabled       on-surface 38%
+//
+// .with-gap is a no-op: the selected state is always the ring + inner.
+
+label:has(> [type="radio"]),
+.radio {
+  --md-comp-radio-button-icon-size: 20px;
+  --md-comp-radio-button-state-layer-size: 40px;
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-large");
+  font-family: $font-stack;
+}
+
+nav:has(> label > [type="radio"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 24px;
+}
+
+nav > label:has(> [type="radio"]),
+nav > .radio {
+  display: inline-flex;
+}
+
+// Paint the radio on the input. A following span (legacy) hides this
+// control and draws the same anatomy. Nested :has() is invalid, so
+// do not write :has(:not(:has(+ span))).
+label:has(> [type="radio"]) > [type="radio"],
+.radio > [type="radio"] {
+  appearance: none;
+  flex: 0 0 var(--md-comp-radio-button-icon-size);
+  box-sizing: border-box;
+  width: var(--md-comp-radio-button-icon-size);
+  height: var(--md-comp-radio-button-icon-size);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  border-radius: 50%;
+  background-color: transparent;
+  cursor: pointer;
+  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+
+  &:checked {
+    border-color: var(--md-sys-color-primary);
+    background-image: radial-gradient(
+      circle at center,
+      var(--md-sys-color-primary) 0 5px,
+      transparent 5.5px
+    );
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  &:checked:hover {
+    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  &:focus-visible,
+  &.tabbed:focus {
+    box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    outline: none;
+  }
+
+  &:disabled {
+    border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    background-image: none;
+    box-shadow: none;
+    cursor: default;
+  }
+
+  &:disabled:checked {
+    background-image: radial-gradient(
+      circle at center,
+      color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent) 0 5px,
+      transparent 5.5px
+    );
+  }
+
+  &:has(+ span) {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}
+
+label:has(> [type="radio"]:disabled),
+.radio:has([type="radio"]:disabled) {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  cursor: default;
+}
+
+// Legacy / BeerCSS: input + span draws the same 20/10 anatomy.
+[type="radio"] + span {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding-left: 32px;
+  cursor: pointer;
+  user-select: none;
+}
+
+[type="radio"] + span::before,
+[type="radio"] + span::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  margin-top: -10px;
+  border-radius: 50%;
+}
+
+[type="radio"] + span::before {
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  transition: border-color .2s ease, box-shadow .2s ease;
+}
+
+[type="radio"] + span::after {
+  background-color: var(--md-sys-color-primary);
+  transform: scale(0);
+  transition: transform .2s ease;
+}
+
+[type="radio"]:checked + span::before {
+  border-color: var(--md-sys-color-primary);
+}
+
+[type="radio"]:checked + span::after {
+  transform: scale(0.5);
+}
+
+[type="radio"]:hover + span::before {
+  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+}
+
+[type="radio"]:checked:hover + span::before {
+  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+}
+
+[type="radio"]:focus-visible + span::before,
+[type="radio"].tabbed:focus + span::before {
+  box-shadow: 0 0 0 10px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+}
+
+[type="radio"]:disabled + span {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  cursor: default;
+}
+
+[type="radio"]:disabled + span::before {
+  border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  box-shadow: none;
+}
+
+[type="radio"]:disabled:checked + span::after {
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+}