@semanticus/semanticus-css 0.9.0 → 1.0.0

package/src/semantics/elements/_nav.css

@@ -1,12 +1,9 @@
-/**
- * Nav
- */
 nav {
   --typography-spacing-vertical: 0;
-  --typography-headings-top: 0;
+  --heading-gap-top: 0;
 
   display: flex;
-  gap: calc(var(--nav-link-spacing) * 1.5);
+  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) * 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) * 3);
+        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: calc(var(--nav-link-spacing) * 1.5);
+    gap: calc(var(--nav-link-gap) * 1.5);
     list-style: none;
     margin-bottom: 0 !important;
     padding: 0;

package/src/semantics/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

@@ -1,6 +1,3 @@
-/**
- * Section
- */
 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/_table.css

@@ -1,8 +1,6 @@
-/**
- * Table
- */
 table {
   border-collapse: collapse;
+  border-color: currentcolor; /* modern-normalize */
   border-spacing: 0;
   color: var(--color-text);
   font-style: normal;
@@ -16,7 +14,7 @@ table {
 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);
@@ -27,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/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/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/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

@@ -1,26 +1,23 @@
-/**
- * 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);
+  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(--form-element-spacing-vertical) * 0.5) var(--form-element-spacing-horizontal);
+    padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
   }
 
   &:is(:hover, :active, :focus)::file-selector-button {
-    --color-background: var(--color-secondary-hover-bg);
-    --border-color: var(--color-secondary-hover-border);
+    --color-background: var(--color-secondary-fill-hover);
+    --border-color: var(--color-secondary-fill-hover);
   }
 
   &: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);
+    --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
   }
 }

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

@@ -1,6 +1,3 @@
-/**
- * Input type range
- */
 [type=range] {
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -12,24 +9,24 @@
   &::-webkit-slider-runnable-track {
     width: 100%;
     height: 0.375rem;
-    border-radius: var(--border-radius);
-    background-color: var(--range-border-color);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     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);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     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);
+    border-radius: var(--radius);
+    background-color: var(--range-track-border);
     transition: background-color var(--transition), box-shadow var(--transition);
   }
 
@@ -40,7 +37,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -52,7 +49,7 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     cursor: pointer;
     transition: background-color var(--transition), transform var(--transition);
   }
@@ -64,14 +61,14 @@
     margin-top: -0.4375rem;
     border: 2px solid var(--range-thumb-border);
     border-radius: 50%;
-    background-color: var(--range-thumb-color);
+    background-color: var(--range-thumb-fill);
     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);
+    --range-track-border: var(--range-track-border-active);
+    --range-thumb-fill: var(--range-thumb-fill-active);
   }
 
   &:active {

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

@@ -1,18 +1,14 @@
-/**
- * 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);
+  padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
   background-image: var(--icon-search);
-  background-position: left calc(var(--form-element-spacing-horizontal) + 0.125rem) center;
+  background-position: left calc(var(--input-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);
+    padding-inline-start: calc(var(--input-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;
+    background-position: left calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
   }
 
   &[aria-invalid=false] {
@@ -25,10 +21,10 @@ input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search]
 }
 
 [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;
+  background-position: right calc(var(--input-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;
+    background-position: right calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
   }
 }

package/src/semantics/index.css

@@ -3,8 +3,8 @@
  *
  * Semantic-first HTML styling (no variants or utility classes)
  *
- * Adapted from Pico CSS (https://picocss.com)
- * Original work: Copyright (c) 2019-2024 Pico CSS
+ * Original works: see https://github.com/semanticus/semanticus-css/blob/main/NOTICE for copyright and license details
+ *
  * Modifications: Copyright (c) 2026 Joao Goncalves
  * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
  */
@@ -12,8 +12,5 @@
 /* Variables */
 @import '../variables/_all.css';
 
-/* Normalize */
-@import '../_normalize.css';
-
 /* Semantic Components */
 @import "./modules.css";

package/src/semantics/modules.css

@@ -1,10 +1,3 @@
-/**
- * Semanticus CSS Semantics Modules
- * Just the semantic component styles (no variables, no normalize)
- * Used by the full version which imports variables/normalize separately
- */
-@import "./_misc.css";
-
 @import "./attributes/_aria-busy.css";
 @import "./attributes/_hidden.css";
 @import "./attributes/_popover.css";
@@ -41,6 +34,7 @@
 @import "./elements/_p.css";
 @import "./elements/_progress.css";
 @import "./elements/_section.css";
+@import "./elements/_small.css";
 @import "./elements/_strong.css";
 @import "./elements/_sub.css";
 @import "./elements/_sup.css";

package/src/sizes/pico.css

@@ -16,31 +16,28 @@
   --text-underline-offset: 0.1rem;
 
   /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-width: 0.125rem; /* 2px – focus-ring width */
+  --radius: 0.25rem;
+  --border-size: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
+  --outline-size: 0.125rem; /* 2px – focus-ring width */
   --transition: 0.2s ease-in-out; /* Default transition timing for interactive state changes */
 
   /* Spacing – shared base unit used for padding, margins, and gaps throughout the layout */
   --base-spacing: 1rem;
-  --responsive-multiplier: 1;
-  --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
+  --spacing: var(--base-spacing);
   --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --grid-column-gap: var(--spacing); /* Column gap in CSS Grid layouts */
-  --grid-row-gap: var(--spacing); /* Row gap in CSS Grid layouts */
-  --form-element-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
-  --form-element-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
+  --input-spacing-vertical: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
+  --input-spacing-horizontal: 1rem; /* Horizontal padding inside form inputs, selects, and textareas */
 
   /* Shadows – used by [role="group"] and [role="search"] button/input combos */
   --group-shadow: 0 0 0 rgba(0, 0, 0, 0); /* Default (no shadow) */
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus); /* Focus ring when a button inside the group is focused */
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color); /* Focus ring when an input inside the group is focused */
+  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-primary-focus-ring); /* Focus ring when a button inside the group is focused */
+  --group-shadow-focus-input: 0 0 0 0.0625rem var(--input-border); /* Focus ring when an input inside the group is focused */
 
   /* Navigation – spacing and breadcrumb configuration */
-  --nav-link-spacing: calc(var(--spacing) * 0.5); /* padding inside nav links */
+  --nav-link-gap: calc(var(--spacing) * 0.5); /* padding inside nav links */
   --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
 
-  --sidebar-width: 25%; /* Sidebar width */
+  --sidebar-size: 25%; /* Sidebar width */
 }
 
 /* Responsive Font Sizes – progressively increase root font-size at wider viewports */
@@ -48,10 +45,8 @@
   :root,
   :host {
     --font-size: 106.25%;
-    --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(25%, 150px);
+    --spacing: calc(var(--base-spacing) * 1.25);
   }
 }
 
@@ -59,10 +54,8 @@
   :root,
   :host {
     --font-size: 112.5%;
-    --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(22%, 180px);
+    --spacing: calc(var(--base-spacing) * 1.5);
   }
 }
 
@@ -70,10 +63,8 @@
   :root,
   :host {
     --font-size: 118.75%;
-    --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(20%, 200px);
+    --spacing: calc(var(--base-spacing) * 1.75);
   }
 }
 
@@ -81,10 +72,8 @@
   :root,
   :host {
     --font-size: 125%;
-    --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 2;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: max(18%, 220px);
+    --spacing: calc(var(--base-spacing) * 2);
   }
 }
 
@@ -92,9 +81,7 @@
   :root,
   :host {
     --font-size: 131.25%;
-    --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2.25;
-    --spacing: calc(var(--base-spacing) * var(--responsive-multiplier));
-    --nav-link-spacing: calc(var(--spacing) * 0.5);
+    --sidebar-size: clamp(240px, 16%, 300px);
+    --spacing: calc(var(--base-spacing) * 2.25);
   }
 }