@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/semantics/{_input.css → elements/_input.css}

@@ -1,6 +1,3 @@
-/**
- * Basics form elements
- */
 input,
 optgroup,
 select,
@@ -79,13 +76,12 @@ textarea {
 }
 
 input:not([type=checkbox], [type=radio], [type=range]) {
-  height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
 }
 
 fieldset {
   width: 100%;
-  margin: 0;
-  margin-bottom: var(--spacing);
+  margin: 0 ;
   padding: 0;
   border: 0;
 }
@@ -113,21 +109,21 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file]),
 select,
 textarea {
   appearance: none;
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
 }
 
 input,
 select,
 textarea {
-  --color-background: var(--form-bg);
-  --border-color: var(--form-border-color);
-  --color-text: var(--form-text-color);
-  --shadow-lg: none;
-  border: var(--border-width) solid var(--border-color);
-  border-radius: var(--border-radius);
+  --color-background: var(--input-fill);
+  --border-color: var(--input-border);
+  --color-text: var(--input-text);
+  --shadow: none;
+  border: var(--border-size) solid var(--border-color);
+  border-radius: var(--radius);
   outline: none;
   background-color: var(--color-background);
-  box-shadow: var(--shadow-lg);
+  box-shadow: var(--shadow);
   color: var(--color-text);
   font-weight: var(--font-weight);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
@@ -140,12 +136,12 @@ input:not([type=submit],
 [type=radio],
 [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --color-background: var(--form-active-bg);
+  --color-background: var(--input-fill-active);
 }
 
 input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
 :where(select, textarea):not([readonly]):is(:active, :focus) {
-  --border-color: var(--form-active-border);
+  --border-color: var(--input-border-focus);
 }
 
 input:not([type=submit],
@@ -155,7 +151,7 @@ input:not([type=submit],
 [type=file],
 [readonly]):focus,
 :where(select, textarea):not([readonly]):focus {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
 }
 
 input:not([type=submit], [type=button], [type=reset])[disabled],
@@ -163,7 +159,7 @@ select[disabled],
 textarea[disabled],
 label[aria-disabled=true],
 :where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
-  opacity: var(--form-disabled-opacity);
+  opacity: var(--input-opacity-disabled);
   pointer-events: none;
 }
 
@@ -179,10 +175,10 @@ label[aria-disabled=true] input[disabled] {
  [type=time],
  [type=week],
  [type=range])[aria-invalid]) {
-  padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-  padding-left: var(--form-element-spacing-horizontal);
-  padding-inline-start: var(--form-element-spacing-horizontal);
-  padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+  padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+  padding-left: var(--input-spacing-horizontal);
+  padding-inline-start: var(--input-spacing-horizontal);
+  padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
   background-position: center right 0.75rem;
   background-size: 1rem auto;
   background-repeat: no-repeat;
@@ -209,23 +205,23 @@ label[aria-disabled=true] input[disabled] {
 }
 
 :is(input, select, textarea)[aria-invalid=false] {
-  --border-color: var(--form-valid-border);
+  --border-color: var(--color-success-fill);
 }
 :is(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
-  --border-color: var(--form-valid-active-border);
+  --border-color: var(--color-success-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=false]:is(:active, :focus), select[aria-invalid=false]:is(:active, :focus), textarea[aria-invalid=false]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-valid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-success-fill);
 }
 
 :is(input, select, textarea)[aria-invalid=true] {
-  --border-color: var(--form-invalid-border);
+  --border-color: var(--color-danger-fill);
 }
 :is(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
-  --border-color: var(--form-invalid-active-border);
+  --border-color: var(--color-danger-fill-hover);
 }
 input:not([type=checkbox], [type=radio])[aria-invalid=true]:is(:active, :focus), select[aria-invalid=true]:is(:active, :focus), textarea[aria-invalid=true]:is(:active, :focus) {
-  --shadow-lg: 0 0 0 var(--outline-width) var(--form-invalid-focus);
+  --shadow: 0 0 0 var(--outline-size) var(--color-danger-fill);
 }
 
 :where([dir=rtl] :is(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false])) {
@@ -237,7 +233,7 @@ input::-webkit-input-placeholder,
 textarea::placeholder,
 textarea::-webkit-input-placeholder,
 select:invalid {
-  color: var(--form-placeholder-color);
+  color: var(--input-placeholder-text);
   opacity: 1;
 }
 
@@ -254,10 +250,10 @@ select {
   }
 
   &:not([multiple], [size]) {
-    padding-right: calc(var(--form-element-spacing-horizontal) + 1.5rem);
-    padding-left: var(--form-element-spacing-horizontal);
-    padding-inline-start: var(--form-element-spacing-horizontal);
-    padding-inline-end: calc(var(--form-element-spacing-horizontal) + 1.5rem);
+    padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
+    padding-left: var(--input-spacing-horizontal);
+    padding-inline-start: var(--input-spacing-horizontal);
+    padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
     background-image: var(--icon-chevron);
     background-position: center right 0.75rem;
     background-size: 1rem auto;
@@ -265,8 +261,8 @@ select {
   }
 
   &[multiple] option:checked {
-    background: var(--form-selected-bg);
-    color: var(--form-text-color);
+    background: var(--input-fill-selected);
+    color: var(--input-text);
   }
 }
 
@@ -280,7 +276,7 @@ textarea {
 }
 
 :where(textarea[aria-invalid]) {
-  --icon-height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
+  --icon-height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
   background-position: top right 0.75rem;
   background-size: 1rem var(--icon-height);
 }
@@ -294,11 +290,11 @@ textarea {
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: rgb(var(--color-success-rgb));
+  color: var(--color-success-text);
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: rgb(var(--color-danger-rgb));
+  color: var(--color-danger-text);
 }
 
 label > :where(input, select, textarea) {

package/src/semantics/elements/_ins.css

@@ -0,0 +1,4 @@
+ins {
+  color: var(--color-success-text);
+  text-decoration: none;
+}

package/src/semantics/elements/_links.css

@@ -0,0 +1,61 @@
+:where(a:not([role=button])),
+[role=link] {
+  --color-background: transparent;
+  --border-color: transparent;
+  --color-text: var(--color-primary-text);
+  --shadow: transparent;
+  outline: none;
+  padding: 0;
+  background-color: var(--color-background);
+  color: var(--color-text);
+  text-decoration: var(--a-decoration);
+  text-decoration-color: oklch(from var(--color-text) l c h / 0.3);
+  text-underline-offset: 0.125em;
+  transition: background-color var(--transition), color var(--transition), text-decoration-color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
+
+  &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
+    --color-background: transparent;
+    --border-color: transparent;
+    --color-text: var(--color-primary-text-hover);
+    --shadow: transparent;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.85);
+  }
+
+  &:is([aria-current]:not([aria-current=false])) {
+    font-weight: 500;
+    text-decoration-color: oklch(from var(--color-text) l c h / 0.6);
+  }
+
+  &:focus-visible {
+    box-shadow: 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
+  }
+}
+
+[role=link] {
+  cursor: pointer;
+
+  &button {
+    display: inline-flex;
+  }
+}
+
+a[role=button] {
+  display: inline-block;
+}
+
+aside {
+  nav {
+    a:not([role=button]), [role=link] {
+      display: block !important;
+      width: 100%;
+    }
+  }
+}
+
+nav {
+  a:not([role=button]), [role=link] {
+    &:not(:hover) {
+      --a-decoration: none;
+    }
+  }
+}

package/src/semantics/elements/_lists.css

@@ -0,0 +1,22 @@
+dl,
+ol,
+ul {
+  margin-top: 0;
+  margin-bottom: var(--typography-spacing-vertical);
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+}
+
+: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;
+}

package/src/semantics/elements/_main.css

@@ -0,0 +1,3 @@
+main {
+  width: 100%;
+}

package/src/semantics/elements/_mark.css

@@ -0,0 +1,6 @@
+mark {
+  padding: 0.125rem 0.25rem;
+  background-color: var(--color-warning-fill);
+  color: var(--color-warning-on-fill);
+  vertical-align: baseline;
+}

package/src/semantics/{_nav.css → elements/_nav.css}

@@ -1,12 +1,9 @@
-/**
- * Nav
- */
 nav {
   --typography-spacing-vertical: 0;
-  --typography-headings-top: 0;
+  --heading-gap-top: 0;
 
   display: flex;
-  gap: var(--spacing);
+  gap: calc(var(--nav-link-gap) * 1.5);
   align-items: center;
   justify-content: space-between;
   overflow: visible;
@@ -21,13 +18,13 @@ nav {
 
     & ul li {
       &:not(:first-child) {
-        margin-inline-start: calc(var(--nav-link-spacing-horizontal) * 2);
+        margin-inline-start: calc(var(--nav-link-gap) * 2);
       }
 
       &:not(:last-child)::after {
         display: inline-block;
         position: absolute;
-        width: calc(var(--nav-link-spacing-horizontal) * 4);
+        width: calc(var(--nav-link-gap) * 3);
         content: var(--nav-breadcrumb-divider);
         color: var(--color-text-muted);
         text-align: center;
@@ -47,7 +44,7 @@ nav {
   ul, ol {
     align-items: center;
     display: flex;
-    gap: var(--spacing);
+    gap: calc(var(--nav-link-gap) * 1.5);
     list-style: none;
     margin-bottom: 0 !important;
     padding: 0;

package/src/semantics/elements/_p.css

@@ -0,0 +1,11 @@
+p {
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

package/src/semantics/{_progress.css → elements/_progress.css}

@@ -1,6 +1,3 @@
-/**
- * Progress
- */
 progress {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -11,14 +8,14 @@ progress {
   margin-bottom: calc(var(--spacing) * 0.5);
   overflow: hidden;
   border: 0;
-  border-radius: var(--border-radius);
-  background-color: var(--progress-bg);
+  border-radius: var(--radius);
+  background-color: var(--progress-track-fill);
   color: var(--progress-fill);
   vertical-align: baseline;
-  accent-color: rgb(var(--color-primary-rgb));
+  accent-color: var(--color-primary-fill);
 
   &::-webkit-progress-bar {
-    border-radius: var(--border-radius);
+    border-radius: var(--radius);
     background: none;
   }
 
@@ -34,7 +31,7 @@ progress {
 
 @media (prefers-reduced-motion: no-preference) {
   progress:indeterminate {
-    background: var(--progress-bg) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-bg) 30%) top left/150% 150% no-repeat;
+    background: var(--progress-track-fill) linear-gradient(to right, var(--progress-fill) 30%, var(--progress-track-fill) 30%) top left/150% 150% no-repeat;
     animation: progress-indeterminate 1s linear infinite;
 
     &[value]::-webkit-progress-value {

package/src/semantics/elements/_section.css

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

package/src/semantics/elements/_small.css

@@ -0,0 +1,3 @@
+small {
+  font-size: var(--font-size);
+}

package/src/semantics/elements/_strong.css

@@ -0,0 +1,4 @@
+b,
+strong {
+  font-weight: bolder;
+}

package/src/semantics/elements/_sub.css

@@ -0,0 +1,7 @@
+sub {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+  bottom: -0.25em;
+}

package/src/semantics/elements/_sup.css

@@ -0,0 +1,7 @@
+sup {
+  position: relative;
+  font-size: 0.75em;
+  line-height: 0;
+  vertical-align: baseline;
+  top: -0.5em;
+}

package/src/semantics/{_table.css → elements/_table.css}

@@ -1,17 +1,20 @@
-/**
- * Table
- */
-:where(table) {
-  width: 100%;
+table {
   border-collapse: collapse;
+  border-color: currentcolor; /* modern-normalize */
   border-spacing: 0;
+  color: var(--color-text);
+  font-style: normal;
+  font-weight: var(--font-weight);
+  margin-bottom: var(--typography-spacing-vertical);
+  margin-top: 0;
   text-indent: 0;
+  width: 100%;
 }
 
 th,
 td {
   padding: calc(var(--spacing) / 2) var(--spacing);
-  border-bottom: var(--border-width) solid var(--table-border-color);
+  border-bottom: var(--border-size) solid var(--color-border);
   background-color: var(--color-background);
   color: var(--color-text);
   font-weight: var(--font-weight);
@@ -22,7 +25,7 @@ td {
 tfoot {
   & th,
   & td {
-    border-top: var(--border-width) solid var(--table-border-color);
+    border-top: var(--border-size) solid var(--color-border);
     border-bottom: 0;
   }
 }

package/src/semantics/{_type-checkbox-radio.css → elements/_type-checkbox-radio.css}

@@ -1,6 +1,3 @@
-/**
- * Checkboxes, Radios and Switches
- */
 label:has([type=checkbox], [type=radio]) {
   width: fit-content;
   cursor: pointer;
@@ -15,7 +12,7 @@ label:has([type=checkbox], [type=radio]) {
   height: 1.25em;
   margin-top: -0.125em;
   margin-inline-end: 0.5em;
-  border-width: var(--border-width);
+  border-width: var(--border-size);
   vertical-align: middle;
   cursor: pointer;
 
@@ -24,8 +21,8 @@ label:has([type=checkbox], [type=radio]) {
   }
 
   &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-bg);
-    --border-color: var(--color-primary-border);
+    --color-background: var(--color-primary-fill);
+    --border-color: var(--color-primary-fill);
     background-image: var(--icon-checkbox);
     background-position: center;
     background-size: 0.75em auto;
@@ -45,8 +42,8 @@ label:has([type=checkbox], [type=radio]) {
 
 [type=checkbox] {
   &:indeterminate {
-    --color-background: var(--color-primary-bg);
-    --border-color: var(--color-primary-border);
+    --color-background: var(--color-primary-fill);
+    --border-color: var(--color-primary-fill);
     background-image: var(--icon-minus);
     background-position: center;
     background-size: 0.75em auto;
@@ -58,24 +55,24 @@ label:has([type=checkbox], [type=radio]) {
   border-radius: 50%;
 
   &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-inverse);
+    --color-background: var(--color-primary-on-fill);
     border-width: 0.35em;
     background-image: none;
   }
 }
 
 [type=checkbox][role=switch] {
-  --color-background: var(--switch-bg);
-  --color-text: var(--switch-thumb-color);
+  --color-background: var(--switch-fill);
+  --color-text: var(--switch-thumb-fill);
   width: 2.25em;
   height: 1.25em;
-  border: var(--border-width) solid var(--border-color);
+  border: var(--border-size) 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);
+    --border-color: var(--switch-fill);
   }
 
   &:before {
@@ -84,19 +81,19 @@ label:has([type=checkbox], [type=radio]) {
     height: 100%;
     border-radius: 50%;
     background-color: var(--color-text);
-    box-shadow: var(--switch-thumb-shadow);
+    box-shadow: var(--switch-thumb-glow);
     content: "";
     transition: margin 0.1s ease-in-out;
   }
 
   &:focus {
-    --color-background: var(--switch-bg);
-    --border-color: var(--switch-bg);
+    --color-background: var(--switch-fill);
+    --border-color: var(--switch-fill);
   }
 
   &:checked {
-    --color-background: var(--switch-checked-bg);
-    --border-color: var(--switch-checked-bg);
+    --color-background: var(--switch-fill-checked);
+    --border-color: var(--switch-fill-checked);
     background-image: none;
 
     &::before {
@@ -113,13 +110,13 @@ label:has([type=checkbox], [type=radio]) {
 [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);
+  --color-background: var(--color-success-fill);
 }
 [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);
+  --color-background: var(--color-danger-fill);
 }
 
 [type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
@@ -129,7 +126,7 @@ label:has([type=checkbox], [type=radio]) {
 [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);
+  --border-color: var(--color-success-fill);
 }
 [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],
@@ -138,5 +135,5 @@ label:has([type=checkbox], [type=radio]) {
 [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);
+  --border-color: var(--color-danger-fill);
 }

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

@@ -1,6 +1,3 @@
-/**
- * Input type color
- */
 [type=color] {
   &::-webkit-color-swatch-wrapper {
     padding: 0;
@@ -12,11 +9,11 @@
 
   &::-webkit-color-swatch {
     border: 0;
-    border-radius: calc(var(--border-radius) * 0.5);
+    border-radius: calc(var(--radius) * 0.5);
   }
 
   &::-moz-color-swatch {
     border: 0;
-    border-radius: calc(var(--border-radius) * 0.5);
+    border-radius: calc(var(--radius) * 0.5);
   }
 }

package/src/semantics/{_type-date.css → elements/_type-date.css}

@@ -1,6 +1,3 @@
-/**
- * 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;
@@ -31,7 +28,7 @@
   [type=month],
   [type=time],
   [type=week] {
-    padding-right: var(--form-element-spacing-horizontal);
+    padding-right: var(--input-spacing-horizontal);
     background-image: none;
   }
 }

package/src/semantics/elements/_type-file.css

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