@semanticus/semanticus-css 0.3.0

package/src/semantics/_role-tooltip.css

@@ -0,0 +1,138 @@
+/**
+ * Tooltip ([role="tooltip"])
+ */
+:has(> [role="tooltip"]) {
+  position: relative;
+  display: inline-block;
+  width: fit-content;
+}
+
+:not(a, button, input, [role=button])[aria-describedby] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+[role="tooltip"] {
+  display: block;
+  z-index: 99;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  padding: 0.25rem 0.5rem;
+  transform: translate(-50%, -0.25rem);
+  border-radius: var(--border-radius);
+  background: var(--tooltip-bg);
+  color: var(--tooltip-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  font-size: 0.875rem;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    border-top: 0.3rem solid var(--tooltip-bg);
+    border-right: 0.3rem solid transparent;
+    border-left: 0.3rem solid transparent;
+  }
+
+  &[data-placement="bottom"] {
+    top: 100%;
+    bottom: auto;
+    transform: translate(-50%, 0.25rem);
+
+    &::after {
+      top: auto;
+      bottom: 100%;
+      transform: translate(-50%, 0);
+      border-top: none;
+      border-bottom: 0.3rem solid var(--tooltip-bg);
+    }
+  }
+
+  &[data-placement="left"] {
+    top: 50%;
+    right: 100%;
+    bottom: auto;
+    left: auto;
+    transform: translate(-0.25rem, -50%);
+
+    &::after {
+      top: 50%;
+      left: 100%;
+      transform: translate(0, -50%);
+      border-top: 0.3rem solid transparent;
+      border-bottom: 0.3rem solid transparent;
+      border-left: 0.3rem solid var(--tooltip-bg);
+      border-right: none;
+    }
+  }
+
+  &[data-placement="right"] {
+    top: 50%;
+    left: 100%;
+    bottom: auto;
+    transform: translate(0.25rem, -50%);
+
+    &::after {
+      top: 50%;
+      right: 100%;
+      left: auto;
+      transform: translate(0, -50%);
+      border-top: 0.3rem solid transparent;
+      border-bottom: 0.3rem solid transparent;
+      border-right: 0.3rem solid var(--tooltip-bg);
+      border-left: none;
+    }
+  }
+}
+
+[aria-describedby]:hover + [role="tooltip"],
+[aria-describedby]:focus + [role="tooltip"] {
+  opacity: 1;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  [role="tooltip"] {
+    --tooltip-slide-to: translate(-50%, -0.25rem);
+    transform: translate(-50%, 0.75rem);
+    animation-duration: 0.2s;
+    animation-fill-mode: forwards;
+
+    &[data-placement="bottom"] {
+      --tooltip-slide-to: translate(-50%, 0.25rem);
+      transform: translate(-50%, -0.75rem);
+    }
+
+    &[data-placement="left"] {
+      --tooltip-slide-to: translate(-0.25rem, -50%);
+      transform: translate(0.75rem, -50%);
+    }
+
+    &[data-placement="right"] {
+      --tooltip-slide-to: translate(0.25rem, -50%);
+      transform: translate(-0.75rem, -50%);
+    }
+  }
+
+  [aria-describedby]:hover + [role="tooltip"],
+  [aria-describedby]:focus + [role="tooltip"] {
+    animation-name: tooltip-slide;
+  }
+}
+
+@keyframes tooltip-slide {
+  to {
+    transform: var(--tooltip-slide-to);
+    opacity: 1;
+  }
+}

package/src/semantics/_section.css

@@ -0,0 +1,6 @@
+/**
+ * Section
+ */
+section {
+  margin-bottom: var(--block-spacing-vertical);
+}

package/src/semantics/_table.css

@@ -0,0 +1,28 @@
+/**
+ * Table
+ */
+:where(table) {
+  width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-indent: 0;
+}
+
+th,
+td {
+  padding: calc(var(--spacing) / 2) var(--spacing);
+  border-bottom: var(--border-width) solid var(--table-border-color);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  text-align: left;
+  text-align: start;
+}
+
+tfoot {
+  & th,
+  & td {
+    border-top: var(--border-width) solid var(--table-border-color);
+    border-bottom: 0;
+  }
+}

package/src/semantics/_type-checkbox-radio.css

@@ -0,0 +1,142 @@
+/**
+ * Checkboxes, Radios and Switches
+ */
+label:has([type=checkbox], [type=radio]) {
+  width: fit-content;
+  cursor: pointer;
+}
+
+[type=checkbox],
+[type=radio] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 1.25em;
+  height: 1.25em;
+  margin-top: -0.125em;
+  margin-inline-end: 0.5em;
+  border-width: var(--border-width);
+  vertical-align: middle;
+  cursor: pointer;
+
+  &::-ms-check {
+    display: none;
+  }
+
+  &:checked, &:checked:active, &:checked:focus {
+    --color-background: var(--color-primary-bg);
+    --border-color: var(--color-primary-border);
+    background-image: var(--icon-checkbox);
+    background-position: center;
+    background-size: 0.75em auto;
+    background-repeat: no-repeat;
+  }
+
+  & ~ label {
+    display: inline-block;
+    margin-bottom: 0;
+    cursor: pointer;
+
+    &:not(:last-of-type) {
+      margin-inline-end: 1em;
+    }
+  }
+}
+
+[type=checkbox] {
+  &:indeterminate {
+    --color-background: var(--color-primary-bg);
+    --border-color: var(--color-primary-border);
+    background-image: var(--icon-minus);
+    background-position: center;
+    background-size: 0.75em auto;
+    background-repeat: no-repeat;
+  }
+}
+
+[type=radio] {
+  border-radius: 50%;
+
+  &:checked, &:checked:active, &:checked:focus {
+    --color-background: var(--color-primary-inverse);
+    border-width: 0.35em;
+    background-image: none;
+  }
+}
+
+[type=checkbox][role=switch] {
+  --color-background: var(--switch-bg);
+  --color-text: var(--switch-thumb-color);
+  width: 2.25em;
+  height: 1.25em;
+  border: var(--border-width) solid var(--border-color);
+  border-radius: 1.25em;
+  background-color: var(--color-background);
+  line-height: 1.25em;
+
+  &:not([aria-invalid]) {
+    --border-color: var(--switch-bg);
+  }
+
+  &:before {
+    display: block;
+    aspect-ratio: 1;
+    height: 100%;
+    border-radius: 50%;
+    background-color: var(--color-text);
+    box-shadow: var(--switch-thumb-shadow);
+    content: "";
+    transition: margin 0.1s ease-in-out;
+  }
+
+  &:focus {
+    --color-background: var(--switch-bg);
+    --border-color: var(--switch-bg);
+  }
+
+  &:checked {
+    --color-background: var(--switch-checked-bg);
+    --border-color: var(--switch-checked-bg);
+    background-image: none;
+
+    &::before {
+      margin-inline-start: calc(2.25em - 1.25em);
+    }
+  }
+
+  &[disabled] {
+    --color-background: var(--border-color);
+  }
+}
+
+[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
+[type=checkbox][role=switch][aria-invalid=false]:checked,
+[type=checkbox][role=switch][aria-invalid=false]:checked:active,
+[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
+  --color-background: var(--form-valid-border);
+}
+[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
+[type=checkbox][role=switch]:checked[aria-invalid=true],
+[type=checkbox][role=switch]:checked:active[aria-invalid=true],
+[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
+  --color-background: var(--form-invalid-border);
+}
+
+[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
+[type=radio][aria-invalid=false]:checked,
+[type=radio][aria-invalid=false]:checked:active,
+[type=radio][aria-invalid=false]:checked:focus,
+[type=checkbox][role=switch][aria-invalid=false]:checked,
+[type=checkbox][role=switch][aria-invalid=false]:checked:active,
+[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
+  --border-color: var(--form-valid-border);
+}
+[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
+[type=radio]:checked[aria-invalid=true],
+[type=radio]:checked:active[aria-invalid=true],
+[type=radio]:checked:focus[aria-invalid=true],
+[type=checkbox][role=switch]:checked[aria-invalid=true],
+[type=checkbox][role=switch]:checked:active[aria-invalid=true],
+[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
+  --border-color: var(--form-invalid-border);
+}

package/src/semantics/_type-color.css

@@ -0,0 +1,22 @@
+/**
+ * Input type color
+ */
+[type=color] {
+  &::-webkit-color-swatch-wrapper {
+    padding: 0;
+  }
+
+  &::-moz-focus-inner {
+    padding: 0;
+  }
+
+  &::-webkit-color-swatch {
+    border: 0;
+    border-radius: calc(var(--border-radius) * 0.5);
+  }
+
+  &::-moz-color-swatch {
+    border: 0;
+    border-radius: calc(var(--border-radius) * 0.5);
+  }
+}

package/src/semantics/_type-date.css

@@ -0,0 +1,40 @@
+/**
+ * Input type datetime
+ */
+:where(input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week])) {
+  --icon-position: 0.75rem;
+  --icon-width: 1rem;
+  padding-right: calc(var(--icon-width) + var(--icon-position));
+  background-image: var(--icon-date);
+  background-position: center right var(--icon-position);
+  background-size: var(--icon-width) auto;
+  background-repeat: no-repeat;
+}
+:where(input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time]) {
+  background-image: var(--icon-time);
+}
+
+[type=date]::-webkit-calendar-picker-indicator,
+[type=datetime-local]::-webkit-calendar-picker-indicator,
+[type=month]::-webkit-calendar-picker-indicator,
+[type=time]::-webkit-calendar-picker-indicator,
+[type=week]::-webkit-calendar-picker-indicator {
+  width: var(--icon-width);
+  margin-right: calc(var(--icon-width) * -1);
+  margin-left: var(--icon-position);
+  opacity: 0;
+}
+
+@-moz-document url-prefix() {
+  [type=date],
+  [type=datetime-local],
+  [type=month],
+  [type=time],
+  [type=week] {
+    padding-right: var(--form-element-spacing-horizontal);
+    background-image: none;
+  }
+}
+[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
+  text-align: right;
+}

package/src/semantics/_type-file.css

@@ -0,0 +1,26 @@
+/**
+ * Input type file
+ */
+[type=file] {
+  --color-text: var(--color-text-muted);
+  margin-left: calc(var(--outline-width) * -1);
+  padding: calc(var(--form-element-spacing-vertical) * 0.5) 0;
+  padding-left: var(--outline-width);
+  border: 0;
+  border-radius: 0;
+  background: none;
+
+  &::file-selector-button {
+    margin-right: calc(var(--spacing) / 2);
+    padding: calc(var(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+  }
+
+  &:is(:hover, :active, :focus)::file-selector-button {
+    --color-background: var(--color-secondary-hover-bg);
+    --border-color: var(--color-secondary-hover-border);
+  }
+
+  &:focus::file-selector-button {
+    --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
+  }
+}

package/src/semantics/_type-range.css

@@ -0,0 +1,90 @@
+/**
+ * Input type range
+ */
+[type=range] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 1.25rem;
+  background: none;
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 0.375rem;
+    border-radius: var(--border-radius);
+    background-color: var(--range-border-color);
+    transition: background-color var(--transition), box-shadow var(--transition);
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: 0.375rem;
+    border-radius: var(--border-radius);
+    background-color: var(--range-border-color);
+    transition: background-color var(--transition), box-shadow var(--transition);
+  }
+
+  &::-ms-track {
+    width: 100%;
+    height: 0.375rem;
+    border-radius: var(--border-radius);
+    background-color: var(--range-border-color);
+    transition: background-color var(--transition), box-shadow var(--transition);
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.4375rem;
+    border: 2px solid var(--range-thumb-border);
+    border-radius: 50%;
+    background-color: var(--range-thumb-color);
+    cursor: pointer;
+    transition: background-color var(--transition), transform var(--transition);
+  }
+
+  &::-moz-range-thumb {
+    -webkit-appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.4375rem;
+    border: 2px solid var(--range-thumb-border);
+    border-radius: 50%;
+    background-color: var(--range-thumb-color);
+    cursor: pointer;
+    transition: background-color var(--transition), transform var(--transition);
+  }
+
+  &::-ms-thumb {
+    -webkit-appearance: none;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-top: -0.4375rem;
+    border: 2px solid var(--range-thumb-border);
+    border-radius: 50%;
+    background-color: var(--range-thumb-color);
+    cursor: pointer;
+    transition: background-color var(--transition), transform var(--transition);
+  }
+
+  &:active, &:focus-within {
+    --range-border-color: var(--range-active-border);
+    --range-thumb-color: var(--range-thumb-active);
+  }
+
+  &:active {
+    &::-webkit-slider-thumb {
+      transform: scale(1.25);
+    }
+
+    &::-moz-range-thumb {
+      transform: scale(1.25);
+    }
+
+    &::-ms-thumb {
+      transform: scale(1.25);
+    }
+  }
+}

package/src/semantics/_type-search.css

@@ -0,0 +1,34 @@
+/**
+ * Input type search
+ *
+ */
+input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
+  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+  background-image: var(--icon-search);
+  background-position: left calc(var(--form-element-spacing-horizontal) + 0.125rem) center;
+  background-size: 1rem auto;
+  background-repeat: no-repeat;
+
+  &[aria-invalid] {
+    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
+    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
+    background-position: left calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) 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] input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
+  background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center;
+
+  &[aria-invalid] {
+    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
+    background-position: right calc(var(--form-element-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--form-element-spacing-horizontal) * 0 + 0.75rem) center;
+  }
+}

package/src/semantics/_typography.css

@@ -0,0 +1,137 @@
+/**
+ * Typography
+ */
+b,
+strong {
+  font-weight: bolder;
+}
+
+sub,
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+address,
+blockquote,
+dl,
+ol,
+p,
+pre,
+table,
+ul {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  font-size: var(--font-size);
+  line-height: var(--line-height);
+  font-family: var(--font-family);
+}
+
+h1 { --color-text: var(--color-h1); }
+h2 { --color-text: var(--color-h2); }
+h3 { --color-text: var(--color-h3); }
+h4 { --color-text: var(--color-h4); }
+h5 { --color-text: var(--color-h5); }
+h6 { --color-text: var(--color-h6); }
+
+:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--typography-spacing-top);
+}
+
+p {
+  margin-bottom: var(--typography-spacing-vertical);
+}
+
+hgroup {
+  margin-bottom: var(--typography-spacing-vertical);
+
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:not(:first-child):last-child {
+      --color-text: var(--color-text-muted);
+      --font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+}
+
+:where(ol, ul) li {
+  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
+}
+
+:where(dl, ol, ul) :where(dl, ol, ul) {
+  margin: 0;
+  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
+}
+
+ul li {
+  list-style: square;
+}
+
+mark {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--color-mark-bg);
+  color: var(--color-mark-text);
+  vertical-align: baseline;
+}
+
+blockquote {
+  display: block;
+  margin: var(--typography-spacing-vertical) 0;
+  padding: var(--spacing);
+  border-right: none;
+  border-left: 0.25rem solid var(--blockquote-border-color);
+  border-inline-start: 0.25rem solid var(--blockquote-border-color);
+  border-inline-end: none;
+
+  & footer {
+    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
+    color: var(--blockquote-footer-color);
+  }
+}
+
+abbr[title] {
+  border-bottom: 1px dotted;
+  text-decoration: none;
+  cursor: help;
+}
+
+ins {
+  color: rgb(var(--success-rgb));
+  text-decoration: none;
+}
+
+del {
+  color: rgb(var(--danger-rgb));
+}
+
+::selection {
+  background-color: var(--color-text-selection);
+}

package/src/semantics/index.css

@@ -0,0 +1,14 @@
+/**
+ * Semanticus CSS Semantics
+ * Variables + Normalize + Semantic HTML components
+ * Perfect for semantic-first development without utility classes
+ */
+
+/* Variables */
+@import '../_variables.css';
+
+/* Normalize */
+@import '../_normalize.css';
+
+/* Semantic Components */
+@import "./modules.css";