@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/semantics/elements/{_document.css → _root.css}

@@ -1,9 +1,13 @@
+/* modern-normalize */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
 
-
-:where(:root),
-:where(:host) {
-  background-color: var(--color-background);
-  color: var(--color-text);
+:where(:root, :host) {
+  background-color: var(--background-color);
+  color: var(--typography-color);
   font-weight: var(--font-weight);
   font-size: var(--font-size);
   line-height: var(--line-height);
@@ -14,11 +18,10 @@
   tab-size: 4;
 }
 
-/* modern-normalize */
-*, ::before, ::after {
-  box-sizing: border-box;
+::selection {
+  background-color: var(--selection-background-color);
 }
 
 html {
-  -webkit-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%;
 }

package/src/semantics/elements/_section.css

@@ -1,4 +1,3 @@
 section {
-  width: 100%;
   margin-bottom: var(--spacing);
 }

package/src/semantics/elements/_small.css

@@ -1,3 +1,30 @@
 small {
+  --font-size: var(--small-font-size);
+
   font-size: var(--font-size);
+
+  :where(input, select, textarea, fieldset) + & {
+    display: block;
+    width: 100%;
+    margin-bottom: var(--spacing);
+    color: var(--color-muted);
+  }
+
+  :where(
+      input:not([type="checkbox"], [type="radio"], [role="switch"]),
+      select,
+      textarea,
+      fieldset
+    )
+    + & {
+    margin-top: calc(var(--spacing) * -0.75);
+  }
+
+  :where(input, select, textarea, fieldset)[aria-invalid="false"] + & {
+    color: var(--success-color);
+  }
+
+  :where(input, select, textarea, fieldset)[aria-invalid="true"] + & {
+    color: var(--danger-color);
+  }
 }

package/src/semantics/elements/_table.css

@@ -2,10 +2,10 @@ table {
   border-collapse: collapse;
   border-color: currentcolor; /* modern-normalize */
   border-spacing: 0;
-  color: var(--color-text);
+  color: var(--typography-color);
   font-style: normal;
   font-weight: var(--font-weight);
-  margin-bottom: var(--typography-spacing-vertical);
+  margin-bottom: var(--typography-margin-block);
   margin-top: 0;
   text-indent: 0;
   width: 100%;
@@ -14,18 +14,32 @@ table {
 th,
 td {
   padding: calc(var(--spacing) / 2) var(--spacing);
-  border-bottom: var(--border-size) solid var(--color-border);
-  background-color: var(--color-background);
-  color: var(--color-text);
+  border-bottom: var(--border-width) solid var(--border-color);
+  background-color: var(--background-color);
+  color: var(--typography-color);
   font-weight: var(--font-weight);
   text-align: left;
   text-align: start;
 }
 
+thead {
+  & th,
+  & td {
+    --font-weight: var(--table-header-font-weight);
+    --border-width: var(--table-header-border-width);
+  }
+}
+
 tfoot {
   & th,
   & td {
-    border-top: var(--border-size) solid var(--color-border);
+    --font-weight: var(--table-header-font-weight);
+    --border-width: var(--table-header-border-width);
+  }
+
+  & th,
+  & td {
+    border-top: var(--border-width) solid var(--border-color);
     border-bottom: 0;
   }
 }

package/src/semantics/elements/inputs/_checkbox-radio.css

@@ -0,0 +1,30 @@
+/* See ./_common.css for shared styles */
+
+[type="checkbox"],
+[type="radio"] {
+  --_inputs-border-width: var(--input-checkbox-border-width);
+
+  padding: 0;
+  appearance: none;
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: -0.125em;
+  margin-inline-end: 0.5em;
+  vertical-align: middle;
+  cursor: pointer;
+  accent-color: var(--_inputs-accent-color);
+
+  &:is(:checked, :checked:active, :checked:focus) {
+    --_inputs-border-color: var(--_inputs-accent-color);
+  }
+
+  & ~ label {
+    display: inline-block;
+    margin-bottom: 0;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      margin-inline-end: 1em;
+    }
+  }
+}

package/src/semantics/elements/inputs/_checkbox.css

@@ -0,0 +1,19 @@
+/* See ./_common.css for shared styles */
+
+[type="checkbox"] {
+  &:is(:checked, :checked:active, :checked:focus) {
+    --_inputs-background-color: var(--_inputs-accent-color);
+
+    background-image: var(--icon-checkbox);
+    background-position: center;
+    background-size: 0.75em auto;
+    background-repeat: no-repeat;
+  }
+
+  &:indeterminate {
+    background-image: var(--icon-minus);
+    background-position: center;
+    background-size: 0.75em auto;
+    background-repeat: no-repeat;
+  }
+}

package/src/semantics/elements/{_type-color.css → inputs/_color.css}

@@ -1,4 +1,6 @@
-[type=color] {
+/* See ./_common.css for shared styles */
+
+[type="color"] {
   &::-webkit-color-swatch-wrapper {
     padding: 0;
   }
@@ -9,11 +11,11 @@
 
   &::-webkit-color-swatch {
     border: 0;
-    border-radius: calc(var(--radius) * 0.5);
+    border-radius: calc(var(--_inputs-border-radius) * 0.5);
   }
 
   &::-moz-color-swatch {
     border: 0;
-    border-radius: calc(var(--radius) * 0.5);
+    border-radius: calc(var(--_inputs-border-radius) * 0.5);
   }
 }

package/src/semantics/elements/inputs/_common.css

@@ -0,0 +1,87 @@
+input,
+optgroup,
+select,
+textarea {
+  margin: 0;
+  font-size: 1rem;
+  line-height: var(--line-height);
+  font-family: inherit;
+  letter-spacing: inherit;
+}
+
+:where(input, select, textarea) {
+  --_inputs-color: var(--inputs-color);
+  --_inputs-background-color: var(--inputs-background-color);
+  --_inputs-border-color: var(--inputs-border-color);
+  --_inputs-accent-color: var(--inputs-accent-color);
+  --_inputs-accent-color-muted: var(--inputs-accent-color-muted);
+  --_inputs-border-width: var(--border-width);
+  --_inputs-border-radius: var(--border-radius);
+  --_inputs-outline-color: var(--primary-outline-color);
+
+  /* Non button inputs */
+  &:not([type="button"], [type="submit"], [type="reset"], [type="file"]) {
+    padding: var(--inputs-padding-block) var(--inputs-padding-inline);
+    border: var(--_inputs-border-width) solid var(--_inputs-border-color);
+    border-radius: var(--_inputs-border-radius);
+    background-color: var(--_inputs-background-color);
+    color: var(--_inputs-color);
+    font-weight: var(--font-weight);
+    transition:
+      background-color var(--transition),
+      border-color var(--transition),
+      color var(--transition);
+
+    &:is(:active, :focus, :focus-visible) {
+      --_inputs-background-color: var(--inputs-background-color-focus);
+
+      outline-offset: 0;
+      outline: var(--outline-width) solid var(--_inputs-outline-color);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--_inputs-outline-color);
+    }
+  }
+
+  &[aria-invalid="false"] {
+    --_inputs-border-color: var(--success-background-color);
+    --_inputs-accent-color: var(--success-background-color);
+    --_inputs-outline-color: var(--success-outline-color);
+  }
+
+  &[aria-invalid="true"] {
+    --_inputs-border-color: var(--danger-background-color);
+    --_inputs-accent-color: var(--danger-background-color);
+    --_inputs-outline-color: var(--danger-outline-color);
+  }
+
+  &:not([type="checkbox"], [type="radio"]) {
+    width: 100%;
+    margin-bottom: var(--spacing);
+  }
+
+  label > & {
+    margin-top: calc(var(--spacing) * 0.25);
+  }
+
+  &::placeholder {
+    color: var(--inputs-placeholder-color);
+  }
+}
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+::-webkit-file-upload-button {
+  appearance: auto;
+  font: inherit;
+}
+
+::-moz-focus-inner {
+  padding: 0;
+  border-style: none;
+}
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}

package/src/semantics/elements/inputs/_date.css

@@ -0,0 +1,53 @@
+/* See ./_common.css for shared styles */
+
+[type="date"],
+[type="datetime-local"],
+[type="month"],
+[type="time"],
+[type="week"] {
+  background-image: var(--icon-date);
+  background-position: center right var(--icons-background-position-gap);
+  background-size: var(--icons-width) auto;
+  background-repeat: no-repeat;
+  padding-right: calc(
+    var(--icons-width) + var(--icons-background-position-gap)
+  );
+
+  &::-webkit-calendar-picker-indicator {
+    width: var(--icons-width);
+    margin-right: calc(
+      (var(--icons-width) + (var(--_inputs-border-width) * 2)) * -1
+    );
+    margin-left: var(--icons-background-position-gap);
+
+    /* Attempt at hidding the native icon, without hiding the outline in the process */
+    background: transparent;
+    color: transparent;
+
+    &:is(:active, :focus) {
+      outline: var(--outline-width) solid var(--_inputs-outline-color);
+      outline-offset: 2px;
+      border-radius: var(--_inputs-border-radius);
+    }
+  }
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    text-align: right;
+  }
+}
+
+[type="time"] {
+  background-image: var(--icon-time);
+}
+
+@-moz-document url-prefix() {
+  [type="date"],
+  [type="datetime-local"],
+  [type="month"],
+  [type="time"],
+  [type="week"] {
+    padding-right: var(--inputs-padding-inline);
+    background-image: none;
+  }
+}

package/src/semantics/elements/inputs/_file.css

@@ -0,0 +1,35 @@
+/* See ./_common.css for shared styles */
+
+[type="file"] {
+  margin-left: calc(var(--focus-ring-width) * -1);
+  padding: calc(var(--inputs-padding-block) * 0.5) 0;
+  padding-left: var(--outline-width);
+  border: 0;
+  border-radius: 0;
+  background: none;
+
+  &:is(:active, :focus, :focus-visible) {
+    outline: none; /* We are outlining the file-selector-button instead */
+    box-shadow: none;
+
+    &::file-selector-button {
+      outline: var(--outline-width) solid var(--_buttons-outline-color);
+      box-shadow: 0 0 0 var(--focus-ring-width) var(--_buttons-outline-color);
+    }
+  }
+
+  &::file-selector-button {
+    margin-left: var(--focus-ring-width);
+    margin-right: calc(var(--spacing) / 2);
+    padding: calc(var(--inputs-padding-block) * 0.5)
+      var(--inputs-padding-inline);
+  }
+
+  &[aria-invalid="false"] {
+    color: var(--success-color);
+  }
+
+  &[aria-invalid="true"] {
+    color: var(--danger-color);
+  }
+}

package/src/semantics/elements/inputs/_input.css

@@ -0,0 +1,47 @@
+/* See ./_common.css for shared styles */
+
+input {
+  overflow: visible;
+
+  &:not([type="checkbox"], [type="radio"], [type="range"]) {
+    height: calc(
+      1rem * var(--line-height) + var(--inputs-padding-block) * 2 +
+        var(--_inputs-border-width) * 2
+    );
+  }
+
+  &:not(
+    [type="checkbox"],
+    [type="radio"],
+    [type="range"],
+    [type="date"],
+    [type="datetime-local"],
+    [type="month"],
+    [type="time"],
+    [type="week"],
+    [type="search"]
+  ) {
+    &[aria-invalid] {
+      background-position: center right var(--icons-background-position-gap);
+      background-repeat: no-repeat;
+      background-size: var(--icons-width) auto;
+      padding-inline-end: calc(
+        var(--inputs-padding-inline) + var(--icons-width) +
+          var(--icons-background-position-gap)
+      );
+
+      &[aria-invalid="false"] {
+        background-image: var(--icon-valid);
+      }
+
+      &[aria-invalid="true"] {
+        background-image: var(--icon-invalid);
+      }
+    }
+
+    &[dir="rtl"],
+    [dir="rtl"] & {
+      background-position: center left var(--icons-background-position-gap);
+    }
+  }
+}

package/src/semantics/elements/inputs/_radio.css

@@ -0,0 +1,11 @@
+/* See ./_common.css and ./_checkbox-radio.css for shared styles */
+
+[type="radio"] {
+  --_inputs-border-radius: 50%;
+
+  &:is(:checked, :checked:active, :checked:focus) {
+    --_inputs-background-color: var(--input-radio-background-color);
+
+    border-width: 0.35em;
+  }
+}

package/src/semantics/elements/inputs/_range.css

@@ -0,0 +1,69 @@
+/* See ./_common.css for shared styles */
+
+[type="range"] {
+  --_input-range-thumb-size: var(--input-range-thumb-size);
+  --_input-range-thumb-background-color: var(--_inputs-accent-color);
+  --_input-range-thumb-border-color: var(--input-range-thumb-border-color);
+  --_input-range-thumb-border-width: var(--input-range-thumb-border-width);
+  --_input-range-thumb-margin-top: var(--input-range-thumb-margin-top);
+  --_input-range-track-height: var(--input-range-track-height);
+  --_input-range-track-background-color: var(
+    --input-range-track-background-color
+  );
+
+  accent-color: var(--_inputs-accent-color);
+  appearance: none;
+  width: 100%;
+  height: var(--_input-range-thumb-size);
+  background: none;
+  padding: 0;
+  border-width: 0;
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: var(--_input-range-track-height);
+    border-radius: var(--_inputs-border-radius);
+    background-color: var(--_input-range-track-background-color);
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: var(--_input-range-track-height);
+    border-radius: var(--_inputs-border-radius);
+    background-color: var(--_input-range-track-background-color);
+  }
+
+  &::-moz-range-thumb,
+  &::-webkit-slider-thumb {
+    appearance: none;
+    width: var(--_input-range-thumb-size);
+    height: var(--_input-range-thumb-size);
+    margin-top: var(--_input-range-thumb-margin-top);
+    border: var(--_input-range-thumb-border-width) solid
+      var(--_input-range-thumb-border-color);
+    border-radius: 50%;
+    background-color: var(--_input-range-thumb-background-color);
+    cursor: pointer;
+    transition: transform var(--transition);
+  }
+
+  &:is(:active, :focus, :focus-visible) {
+    --_input-range-thumb-border-color: var(--_inputs-outline-color);
+
+    outline: none !important; /* We are outlining the file-selector-button instead */
+    box-shadow: none !important;
+
+    &::-moz-range-thumb,
+    &::-webkit-slider-thumb {
+      outline: var(--outline-width) solid var(--_inputs-outline-color);
+      outline-offset: calc((var(--focus-ring-width) * -1));
+    }
+  }
+
+  &:active {
+    &::-moz-range-thumb,
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+  }
+}

package/src/semantics/elements/inputs/_search.css

@@ -0,0 +1,48 @@
+/* See ./_common.css for shared styles */
+
+input[type="search"] {
+  --_inputs-border-radius: var(--input-search-border-radius);
+
+  appearance: none;
+
+  &::-webkit-search-decoration {
+    appearance: none;
+  }
+
+  background-image: var(--icon-search);
+  background-position: left var(--icons-background-position-gap) center;
+  background-repeat: no-repeat;
+  background-size: var(--icons-width) auto;
+  padding-inline-start: calc(
+    var(--inputs-padding-inline) + var(--icons-width) +
+      var(--icons-background-position-gap)
+  );
+
+  &[aria-invalid] {
+    padding-inline-end: calc(
+      var(--inputs-padding-inline) + var(--icons-width) +
+        var(--icons-background-position-gap)
+    );
+    background-position:
+      left var(--icons-background-position-gap) center,
+      right var(--icons-background-position-gap) center;
+  }
+
+  &[aria-invalid="false"] {
+    background-image: var(--icon-search), var(--icon-valid);
+  }
+
+  &[aria-invalid="true"] {
+    background-image: var(--icon-search), var(--icon-invalid);
+  }
+
+  [dir="rtl"] & {
+    background-position: right var(--icons-background-position-gap) center;
+
+    &[aria-invalid] {
+      background-position:
+        right var(--icons-background-position-gap) center,
+        left var(--icons-background-position-gap) center;
+    }
+  }
+}

package/src/semantics/elements/inputs/_select.css

@@ -0,0 +1,32 @@
+/* See ./_common.css for shared styles */
+
+select {
+  text-transform: none;
+  appearance: none;
+
+  &:not([multiple], [size]) {
+    background-image: var(--icon-chevron);
+    background-position: center right var(--icons-background-position-gap);
+    background-repeat: no-repeat;
+    background-size: var(--icons-width) auto;
+    padding-inline-end: calc(
+      var(--inputs-padding-inline) + var(--icons-width) +
+        var(--icons-background-position-gap)
+    );
+  }
+
+  &[multiple] option:checked {
+    background: var(--inputs-border-color);
+    color: var(--inputs-color);
+  }
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    background-position: center left var(--icons-background-position-gap);
+  }
+
+  &:invalid {
+    color: var(--inputs-placeholder-color);
+    opacity: 1;
+  }
+}

package/src/semantics/elements/inputs/_switch.css

@@ -0,0 +1,46 @@
+/* See ./_common.css for shared styles */
+
+[type="checkbox"][role="switch"] {
+  --_inputs-border-width: var(--input-switch-border-width);
+  --_inputs-background-color: var(--_inputs-accent-color-muted);
+  --_input-switch-thumb-background-color: var(
+    --input-switch-thumb-background-color
+  );
+  --_inputs-border-radius: var(--input-switch-border-radius);
+
+  width: 2.25em;
+  height: 1.25em;
+  line-height: 1.25em;
+
+  &:before {
+    display: block;
+    aspect-ratio: 1;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--_input-switch-thumb-background-color);
+    content: "";
+    transition: margin 0.1s ease-in-out;
+  }
+
+  &:not(:checked) {
+    &:not([aria-invalid]) {
+      --_inputs-border-color: var(--_inputs-accent-color-muted);
+    }
+
+    &:focus {
+      --_inputs-background-color: var(--_inputs-accent-color-muted);
+    }
+  }
+
+  &:checked {
+    background-image: none;
+
+    &::before {
+      margin-inline-start: calc(2.25em - 1.25em);
+    }
+  }
+
+  &[disabled] {
+    --_inputs-background-color: var(--_inputs-border-color);
+  }
+}

package/src/semantics/elements/inputs/_textarea.css

@@ -0,0 +1,30 @@
+/* See ./_common.css for shared styles */
+
+textarea {
+  overflow: auto;
+  display: block;
+  resize: vertical;
+
+  &[aria-invalid] {
+    background-position: top right var(--icons-background-position-gap);
+    background-repeat: no-repeat;
+    background-size: var(--icons-width)
+      calc(
+        var(--icons-width) * var(--line-height) +
+          var(--inputs-padding-block) * 2 + var(--_inputs-border-width) * 2
+      );
+
+    &[aria-invalid="false"] {
+      background-image: var(--icon-valid);
+    }
+
+    &[aria-invalid="true"] {
+      background-image: var(--icon-invalid);
+    }
+  }
+
+  &[dir="rtl"],
+  [dir="rtl"] & {
+    background-position: top left var(--icons-background-position-gap);
+  }
+}