@semanticus/semanticus-css 0.3.1 → 0.5.1

package/src/utilities/index.css

@@ -4,8 +4,8 @@
  * Perfect for utility-first development without semantic components
  */
 
-/* Global variables */
-@import '../_variables.css';
+/* Variables */
+@import './_variables.css';
 
 /* Normalize */
 @import '../_normalize.css';

package/src/utilities/layout/_flexbox.css

@@ -184,7 +184,7 @@
   order: 6 !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .flex-sm-fill {
     flex: 1 1 auto !important;
   }
@@ -316,7 +316,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .flex-md-fill {
     flex: 1 1 auto !important;
   }
@@ -448,7 +448,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .flex-lg-fill {
     flex: 1 1 auto !important;
   }
@@ -580,7 +580,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .flex-xl-fill {
     flex: 1 1 auto !important;
   }
@@ -712,7 +712,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .flex-xxl-fill {
     flex: 1 1 auto !important;
   }

package/src/utilities/layout/_grid.css

@@ -8,7 +8,7 @@
   display: grid;
   grid-template-columns: 1fr;
 
-  @media (min-width: 425px) {
+  @media (--breakpoint-sm) {
     grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
   }
 

package/src/utilities/media/_object-fit.css

@@ -23,7 +23,7 @@
   object-fit: none !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .object-fit-sm-contain {
     -o-object-fit: contain !important;
     object-fit: contain !important;
@@ -46,7 +46,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .object-fit-md-contain {
     -o-object-fit: contain !important;
     object-fit: contain !important;
@@ -69,7 +69,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .object-fit-lg-contain {
     -o-object-fit: contain !important;
     object-fit: contain !important;
@@ -92,7 +92,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .object-fit-xl-contain {
     -o-object-fit: contain !important;
     object-fit: contain !important;
@@ -115,7 +115,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .object-fit-xxl-contain {
     -o-object-fit: contain !important;
     object-fit: contain !important;

package/src/utilities/positioning/_floats.css

@@ -10,7 +10,7 @@
   float: none !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .float-sm-start {
     float: left !important;
   }
@@ -22,7 +22,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .float-md-start {
     float: left !important;
   }
@@ -34,7 +34,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .float-lg-start {
     float: left !important;
   }
@@ -46,7 +46,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .float-xl-start {
     float: left !important;
   }
@@ -58,7 +58,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .float-xxl-start {
     float: left !important;
   }

package/src/utilities/positioning/_position.css

@@ -26,7 +26,7 @@
   z-index: 1020;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .sticky-sm-top {
     position: sticky;
     top: 0;
@@ -38,7 +38,7 @@
     z-index: 1020;
   }
 }
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .sticky-md-top {
     position: sticky;
     top: 0;
@@ -50,7 +50,7 @@
     z-index: 1020;
   }
 }
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .sticky-lg-top {
     position: sticky;
     top: 0;
@@ -62,7 +62,7 @@
     z-index: 1020;
   }
 }
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .sticky-xl-top {
     position: sticky;
     top: 0;
@@ -74,7 +74,7 @@
     z-index: 1020;
   }
 }
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .sticky-xxl-top {
     position: sticky;
     top: 0;

package/src/utilities/sizing/_height.css

@@ -29,3 +29,7 @@
 .min-vh-100 {
   min-height: 100vh !important;
 }
+
+.min-svh-100 {
+  min-height: 100svh !important;
+}

package/src/utilities/sizing/_width.css

@@ -2,10 +2,18 @@
   width: 25% !important;
 }
 
+.w-40 {
+  width: 40% !important;
+}
+
 .w-50 {
   width: 50% !important;
 }
 
+.w-60 {
+  width: 60% !important;
+}
+
 .w-75 {
   width: 75% !important;
 }

package/src/utilities/spacing/_gap.css

@@ -76,7 +76,7 @@
   column-gap: var(--spacer-5) !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .gap-sm-0 {
     gap: 0 !important;
   }
@@ -139,7 +139,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .gap-md-0 {
     gap: 0 !important;
   }
@@ -202,7 +202,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .gap-lg-0 {
     gap: 0 !important;
   }
@@ -265,7 +265,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .gap-xl-0 {
     gap: 0 !important;
   }
@@ -328,7 +328,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .gap-xxl-0 {
     gap: 0 !important;
   }

package/src/utilities/spacing/_margin.css

@@ -208,7 +208,7 @@
   margin-left: auto !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .m-sm-0 {
     margin: 0 !important;
   }
@@ -372,7 +372,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .m-md-0 {
     margin: 0 !important;
   }
@@ -536,7 +536,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .m-lg-0 {
     margin: 0 !important;
   }
@@ -700,7 +700,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .m-xl-0 {
     margin: 0 !important;
   }
@@ -864,7 +864,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .m-xxl-0 {
     margin: 0 !important;
   }

package/src/utilities/spacing/_padding.css

@@ -178,7 +178,7 @@
   padding-left: var(--spacer-5) !important;
 }
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .p-sm-0 {
     padding: 0 !important;
   }
@@ -319,7 +319,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .p-md-0 {
     padding: 0 !important;
   }
@@ -460,7 +460,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .p-lg-0 {
     padding: 0 !important;
   }
@@ -601,7 +601,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .p-xl-0 {
     padding: 0 !important;
   }
@@ -742,7 +742,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .p-xxl-0 {
     padding: 0 !important;
   }

package/src/utilities/typography/_font-sizes.css

@@ -22,7 +22,7 @@
   font-size: var(--fs-6) !important;
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .fs-1 {
     font-size: 2.5rem !important;
   }

package/src/utilities/typography/_text-alignment.css

@@ -79,7 +79,7 @@
 
 /* rtl:end:remove */
 
-@media (min-width: 576px) {
+@media (--breakpoint-sm) {
   .text-sm-start {
     text-align: left !important;
   }
@@ -91,7 +91,7 @@
   }
 }
 
-@media (min-width: 768px) {
+@media (--breakpoint-md) {
   .text-md-start {
     text-align: left !important;
   }
@@ -103,7 +103,7 @@
   }
 }
 
-@media (min-width: 992px) {
+@media (--breakpoint-lg) {
   .text-lg-start {
     text-align: left !important;
   }
@@ -115,7 +115,7 @@
   }
 }
 
-@media (min-width: 1200px) {
+@media (--breakpoint-xl) {
   .text-xl-start {
     text-align: left !important;
   }
@@ -127,7 +127,7 @@
   }
 }
 
-@media (min-width: 1400px) {
+@media (--breakpoint-xxl) {
   .text-xxl-start {
     text-align: left !important;
   }

package/src/{_variables.css → variables/_all.css}

@@ -10,112 +10,10 @@
 
 */
 
-/* ==========================================================================
-   1. Base Tokens
-   ========================================================================== */
-
-:root {
-  --transparent: transparent;
-}
-
-/* ==========================================================================
-   2. Typography & Layout Variables (from Pico Theme)
-   ========================================================================== */
-
-: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 */
-  --spacing: 1rem;
-  --typography-spacing-vertical: 1rem; /* Vertical margin below typographic elements (p, lists, etc.) */
-  --block-spacing-vertical: var(--spacing); /* Vertical padding inside block-level components (cards, modals, etc.) */
-  --block-spacing-horizontal: var(--spacing); /* Horizontal padding inside block-level components */
-  --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 */
-
-  /* Modal – backdrop overlay settings */
-  --modal-overlay-backdrop-filter: blur(0.375rem); /* Applies a blur behind the modal overlay */
-
-  /* Navigation – spacing and breadcrumb configuration */
-  --nav-element-spacing-vertical: 1rem; /* Vertical padding for nav container items */
-  --nav-element-spacing-horizontal: 0.5rem; /* Horizontal padding for nav container items */
-  --nav-link-spacing-vertical: 0.5rem; /* Vertical padding inside nav links */
-  --nav-link-spacing-horizontal: 0.5rem; /* Horizontal padding inside nav links */
-  --nav-breadcrumb-divider: ">"; /* Character displayed between breadcrumb items */
-
-  /* Icons – inline SVG data-URIs used by form elements and UI components */
-  --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); /* Checkmark for checked checkboxes */
-  --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); /* Minus icon for indeterminate checkboxes */
-  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); /* Dropdown arrow for <select> elements */
-  --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); /* Calendar icon for date inputs */
-  --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); /* Clock icon for time inputs */
-  --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); /* Magnifying glass for search inputs */
-  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(136, 145, 164)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E"); /* X icon for close/dismiss actions (e.g. modal close button) */
-  --icon-loading: url("data:image/svg+xml,%3Csvg fill='none' height='24' width='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E g %7B animation: rotate 2s linear infinite; transform-origin: center center; %7D circle %7B stroke-dasharray: 75,100; stroke-dashoffset: -5; animation: dash 1.5s ease-in-out infinite; stroke-linecap: round; %7D @keyframes rotate %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D @keyframes dash %7B 0%25 %7B stroke-dasharray: 1,100; stroke-dashoffset: 0; %7D 50%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -17.5; %7D 100%25 %7B stroke-dasharray: 44.5,100; stroke-dashoffset: -62; %7D %7D %3C/style%3E%3Cg%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='rgb(136, 145, 164)' stroke-width='4' /%3E%3C/g%3E%3C/svg%3E"); /* Animated spinner for [aria-busy="true"] elements */
-}
-
-/* Responsive Font Sizes – progressively increase root font-size at wider viewports */
-@media (min-width: 576px) {
-  :root,
-  :host {
-    --font-size: 106.25%;
-  }
-}
-
-@media (min-width: 768px) {
-  :root,
-  :host {
-    --font-size: 112.5%;
-  }
-}
-
-@media (min-width: 1024px) {
-  :root,
-  :host {
-    --font-size: 118.75%;
-  }
-}
-
-@media (min-width: 1280px) {
-  :root,
-  :host {
-    --font-size: 125%;
-  }
-}
-
-@media (min-width: 1536px) {
-  :root,
-  :host {
-    --font-size: 131.25%;
-  }
-}
+@import './_shared.css';
 
 /* ==========================================================================
-   3. Semantic Colors - Light Theme (Default)
+   Semantic Colors - Light Theme (Default)
    ==========================================================================
 
    Color variable naming convention used throughout sections 3–5:
@@ -320,7 +218,7 @@
 }
 
 /* ==========================================================================
-   4. Semantic Colors - Dark Theme (System Preference)
+   Semantic Colors - Dark Theme (System Preference)
    ==========================================================================
 
    Applied when the user's OS is set to dark mode AND no explicit
@@ -504,7 +402,7 @@
 }
 
 /* ==========================================================================
-   5. Semantic Colors - Dark Theme (Explicit)
+   Semantic Colors - Dark Theme (Explicit)
    ==========================================================================
 
    Applied when data-theme="dark" is set on the root element,
@@ -678,7 +576,7 @@
 }
 
 /* ==========================================================================
-   6. Scoped Element Variables (from Pico Theme)
+   Scoped Element Variables (from Pico Theme)
    ==========================================================================
 
    These selectors override the global :root variables on a per-element
@@ -713,37 +611,37 @@ h6 {
 h1 {
   --font-size: 2rem;
   --line-height: 1.125;
-  --typography-spacing-top: 3rem; /* Extra top margin to separate from previous content */
+  --typography-headings-top: 3rem; /* Extra top margin to separate from previous content */
 }
 
 h2 {
   --font-size: 1.75rem;
   --line-height: 1.15;
-  --typography-spacing-top: 2.625rem;
+  --typography-headings-top: 2.625rem;
 }
 
 h3 {
   --font-size: 1.5rem;
   --line-height: 1.175;
-  --typography-spacing-top: 2.25rem;
+  --typography-headings-top: 2.25rem;
 }
 
 h4 {
   --font-size: 1.25rem;
   --line-height: 1.2;
-  --typography-spacing-top: 1.874rem;
+  --typography-headings-top: 1.874rem;
 }
 
 h5 {
   --font-size: 1.125rem;
   --line-height: 1.225;
-  --typography-spacing-top: 1.6875rem;
+  --typography-headings-top: 1.6875rem;
 }
 
 h6 {
   --font-size: 1rem;
   --line-height: 1.25;
-  --typography-spacing-top: 1.5rem;
+  --typography-headings-top: 1.5rem;
 }
 
 /* Table head/foot cells get a bolder weight and a thicker bottom border */