@semanticus/semanticus-css 2.2.0 → 3.0.0

package/src/sizes/pico.css

@@ -1,12 +1,17 @@
 /* Shared variables */
-@import '../variables/_breakpoints.css';
+@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-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 */
@@ -16,24 +21,20 @@
   --text-underline-offset: 0.1rem;
 
   /* Borders & Effects – global defaults for border-radius, border-width, outline, and transition */
-  --radius: 0.25rem;
-  --border-size: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
-  --outline-size: 0.125rem; /* 2px – focus-ring width */
+  --border-radius: 0.25rem;
+  --border-width: 0.0625rem; /* 1px – base border width used by forms, tables, etc. */
+  --outline-width: 1px;
+  --focus-ring-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;
-  --spacing: var(--base-spacing);
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --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 */
+  --_spacing-scale: 1;
+  --spacing: calc(1rem * var(--_spacing-scale));
+  --typography-margin-block: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
+  --inputs-padding-block: 0.75rem; /* Vertical padding inside form inputs, selects, and textareas */
+  --inputs-padding-inline: 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-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 */
+  --group-buttons-padding-inline: 1rem;
   --nav-link-gap: calc(var(--spacing) * 0.5); /* padding inside nav links */
   --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
 
@@ -46,7 +47,7 @@
   :host {
     --font-size: 106.25%;
     --sidebar-size: max(25%, 150px);
-    --spacing: calc(var(--base-spacing) * 1.25);
+    --_spacing-scale: 1.25;
   }
 }
 
@@ -55,7 +56,7 @@
   :host {
     --font-size: 112.5%;
     --sidebar-size: max(22%, 180px);
-    --spacing: calc(var(--base-spacing) * 1.5);
+    --_spacing-scale: 1.5;
   }
 }
 
@@ -64,7 +65,7 @@
   :host {
     --font-size: 118.75%;
     --sidebar-size: max(20%, 200px);
-    --spacing: calc(var(--base-spacing) * 1.75);
+    --_spacing-scale: 1.75;
   }
 }
 
@@ -73,7 +74,7 @@
   :host {
     --font-size: 125%;
     --sidebar-size: max(18%, 220px);
-    --spacing: calc(var(--base-spacing) * 2);
+    --_spacing-scale: 2;
   }
 }
 
@@ -82,6 +83,6 @@
   :host {
     --font-size: 131.25%;
     --sidebar-size: clamp(240px, 16%, 300px);
-    --spacing: calc(var(--base-spacing) * 2.25);
+    --_spacing-scale: 2.25;
   }
 }