@semanticus/semanticus-css 0.7.0 → 0.9.0

package/src/semantics/elements/_footer.css

@@ -0,0 +1,13 @@
+/**
+ * Footer
+ */
+footer {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-top: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_header.css

@@ -0,0 +1,13 @@
+/**
+ * Header
+ */
+header {
+  width: 100%;
+  padding-block: var(--spacing);
+  margin-bottom: var(--spacing);
+
+  & > * {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+  }
+}

package/src/semantics/elements/_headings.css

@@ -0,0 +1,34 @@
+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);
+}
+
+/* Headings - progressive lightness using color-mix */
+h1 { --color-text: var(--color-heading-base); }
+h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
+h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
+h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
+h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
+h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
+
+/* Dark mode headings - base is lightest, mix in black for lower levels */
+[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
+[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
+[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
+[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
+[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
+[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
+
+: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);
+}

package/src/semantics/elements/_hgroup.css

@@ -0,0 +1,14 @@
+hgroup {
+  margin-bottom: var(--typography-spacing-vertical);
+
+  & > * {
+    margin-top: 0;
+    margin-bottom: 0;
+
+    &:not(:first-child):last-child {
+      color: color-mix(in srgb, var(--color-text), rgb(128, 128, 128) 70%);
+      --font-weight: unset;
+      font-size: 1rem;
+    }
+  }
+}

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

@@ -1,5 +1,5 @@
 /**
- * Misc
+ * Horizontal Rule
  */
 hr {
   height: 0;

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

@@ -84,8 +84,7 @@ input:not([type=checkbox], [type=radio], [type=range]) {
 
 fieldset {
   width: 100%;
-  margin: 0;
-  margin-bottom: var(--spacing);
+  margin: 0 ;
   padding: 0;
   border: 0;
 }
@@ -294,11 +293,11 @@ textarea {
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: rgb(var(--success-rgb));
+  color: rgb(var(--color-success-rgb));
 }
 
 :where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: rgb(var(--danger-rgb));
+  color: rgb(var(--color-danger-rgb));
 }
 
 label > :where(input, select, textarea) {

package/src/semantics/elements/_ins.css

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

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

@@ -3,20 +3,27 @@
  */
 :where(a:not([role=button])),
 [role=link] {
-  --color-text: var(--color-primary);
   --color-background: transparent;
+  --border-color: transparent;
+  --color-text: rgb(var(--color-primary-rgb));
+  --shadow-lg: transparent;
   --underline: var(--color-primary-underline);
   outline: none;
+  padding: 0;
   background-color: var(--color-background);
   color: var(--color-text);
   text-decoration: var(--text-decoration);
   text-decoration-color: var(--underline);
   text-underline-offset: 0.125em;
   transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
-}
 
-:where(a:not([role=button])),
-[role=link] {
+  &:is(:hover, :active, :focus) {
+    --color-background: transparent;
+    --border-color: transparent;
+    --color-text: rgb(var(--color-primary-rgb));
+    --shadow-lg: transparent;
+  }
+
   &:is([aria-current]:not([aria-current=false]), :hover, :active, :focus) {
     --color-text: var(--color-primary-hover);
     --underline: var(--color-primary-hover-underline);

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,7 @@
+/**
+ * Main fills up the available width, and has a height defined by its content.
+ * Stacks its children vertically.
+ */
+main {
+  width: 100%;
+}

package/src/semantics/elements/_mark.css

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

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

@@ -6,7 +6,7 @@ nav {
   --typography-headings-top: 0;
 
   display: flex;
-  gap: var(--spacing);
+  gap: calc(var(--nav-link-spacing) * 1.5);
   align-items: center;
   justify-content: space-between;
   overflow: visible;
@@ -21,13 +21,13 @@ nav {
 
     & ul li {
       &:not(:first-child) {
-        margin-inline-start: calc(var(--nav-link-spacing-horizontal) * 2);
+        margin-inline-start: calc(var(--nav-link-spacing) * 2);
       }
 
       &:not(:last-child)::after {
         display: inline-block;
         position: absolute;
-        width: calc(var(--nav-link-spacing-horizontal) * 4);
+        width: calc(var(--nav-link-spacing) * 3);
         content: var(--nav-breadcrumb-divider);
         color: var(--color-text-muted);
         text-align: center;
@@ -47,7 +47,7 @@ nav {
   ul, ol {
     align-items: center;
     display: flex;
-    gap: var(--spacing);
+    gap: calc(var(--nav-link-spacing) * 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}

@@ -15,7 +15,7 @@ progress {
   background-color: var(--progress-bg);
   color: var(--progress-fill);
   vertical-align: baseline;
-  accent-color: var(--color-primary);
+  accent-color: rgb(var(--color-primary-rgb));
 
   &::-webkit-progress-bar {
     border-radius: var(--border-radius);

package/src/semantics/elements/_section.css

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

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,11 +1,16 @@
 /**
  * Table
  */
-:where(table) {
-  width: 100%;
+table {
   border-collapse: collapse;
   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,

package/src/semantics/index.css

@@ -1,7 +1,12 @@
-/**
- * Semanticus CSS Semantics
- * Variables + Normalize + Semantic HTML components
- * Perfect for semantic-first development without utility classes
+/*!
+ * Semanticus CSS Semantics Bundle v0.8.0 (https://semanticus.design/)
+ *
+ * Semantic-first HTML styling (no variants or utility classes)
+ *
+ * Adapted from Pico CSS (https://picocss.com)
+ * Original work: Copyright (c) 2019-2024 Pico CSS
+ * Modifications: Copyright (c) 2026 Joao Goncalves
+ * Licensed under MIT (https://github.com/semanticus/semanticus-css/blob/main/LICENSE)
  */
 
 /* Variables */

package/src/semantics/modules.css

@@ -3,36 +3,51 @@
  * Just the semantic component styles (no variables, no normalize)
  * Used by the full version which imports variables/normalize separately
  */
+@import "./_misc.css";
 
-@import "./_aria-busy.css";
-@import "./_article.css";
-@import "./_aside.css";
-@import "./_body.css";
-@import "./_button.css";
-@import "./_code.css";
-@import "./_details.css";
-@import "./_dialog.css";
-@import "./_document.css";
-@import "./_embedded.css";
-@import "./_figure.css";
-@import "./_footer.css";
-@import "./_header.css";
-@import "./_hidden.css";
-@import "./_hr.css";
-@import "./_input.css";
-@import "./_links.css";
-@import "./_main.css";
-@import "./_nav.css";
-@import "./_progress.css";
-@import "./_role-group-search.css";
-@import "./_role-toolbar.css";
-@import "./_role-tooltip.css";
-@import "./_section.css";
-@import "./_table.css";
-@import "./_type-checkbox-radio.css";
-@import "./_type-color.css";
-@import "./_type-date.css";
-@import "./_type-file.css";
-@import "./_type-range.css";
-@import "./_type-search.css";
-@import "./_typography.css";
+@import "./attributes/_aria-busy.css";
+@import "./attributes/_hidden.css";
+@import "./attributes/_popover.css";
+@import "./attributes/_role-group-search.css";
+@import "./attributes/_role-toolbar.css";
+@import "./attributes/_role-tooltip.css";
+
+@import "./elements/_abbr.css";
+@import "./elements/_address.css";
+@import "./elements/_article.css";
+@import "./elements/_aside.css";
+@import "./elements/_blockquote.css";
+@import "./elements/_body.css";
+@import "./elements/_button.css";
+@import "./elements/_code.css";
+@import "./elements/_del.css";
+@import "./elements/_details.css";
+@import "./elements/_dialog.css";
+@import "./elements/_document.css";
+@import "./elements/_embedded.css";
+@import "./elements/_figure.css";
+@import "./elements/_footer.css";
+@import "./elements/_header.css";
+@import "./elements/_headings.css";
+@import "./elements/_hgroup.css";
+@import "./elements/_hr.css";
+@import "./elements/_input.css";
+@import "./elements/_ins.css";
+@import "./elements/_links.css";
+@import "./elements/_lists.css";
+@import "./elements/_main.css";
+@import "./elements/_mark.css";
+@import "./elements/_nav.css";
+@import "./elements/_p.css";
+@import "./elements/_progress.css";
+@import "./elements/_section.css";
+@import "./elements/_strong.css";
+@import "./elements/_sub.css";
+@import "./elements/_sup.css";
+@import "./elements/_table.css";
+@import "./elements/_type-checkbox-radio.css";
+@import "./elements/_type-color.css";
+@import "./elements/_type-date.css";
+@import "./elements/_type-file.css";
+@import "./elements/_type-range.css";
+@import "./elements/_type-search.css";

package/src/sizes/pico.css

@@ -0,0 +1,100 @@
+/* Shared variables */
+@import '../variables/_breakpoints.css';
+
+:root,
+:host {
+  /* Font Families */
+  --font-family-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-family-sans-serif: system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, Helvetica, Arial, "Helvetica Neue", sans-serif, var(--font-family-emoji);
+  --font-family-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace, var(--font-family-emoji);
+  --font-family: var(--font-family-sans-serif);
+
+  /* Typography – base defaults inherited by all elements */
+  --line-height: 1.5;
+  --font-weight: 400;
+  --font-size: 100%; /* Root font-size; overridden per breakpoint below and per element in §6 */
+  --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 */
+  --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));
+  --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 */
+
+  /* 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 */
+
+  /* Navigation – spacing and breadcrumb configuration */
+  --nav-link-spacing: calc(var(--spacing) * 0.5); /* padding inside nav links */
+  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
+
+  --sidebar-width: 25%; /* Sidebar width */
+}
+
+/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
+@media (--breakpoint-sm) {
+  :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);
+  }
+}
+
+@media (--breakpoint-md) {
+  :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);
+  }
+}
+
+@media (--breakpoint-lg) {
+  :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);
+  }
+}
+
+@media (--breakpoint-xl) {
+  :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);
+  }
+}
+
+@media (--breakpoint-xxl) {
+  :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);
+  }
+}