@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/variables/_icons.css

@@ -1,43 +0,0 @@
-/* ==========================================================================
-   Theme-Aware Icon Variables
-   ==========================================================================
-
-   Validation icons that change color based on the current theme.
-   These are defined separately from base icons because they use
-   theme-specific colors (success/danger) for stroke values.
-
-   Base icons (checkbox, chevron, date, time, search, close, loading)
-   are defined in _layout.css as they use consistent colors across themes.
-   ========================================================================== */
-
-/* ==========================================================================
-   Light Theme Validation Icons
-   ========================================================================== */
-
-[data-theme="light"],
-:root:not([data-theme="dark"]),
-:host(:not([data-theme="dark"])) {
-  --icon-valid: 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(43, 122, 76)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-invalid: 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(197, 47, 33)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-}
-
-/* ==========================================================================
-   Dark Theme Validation Icons (System Preference)
-   ========================================================================== */
-
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]),
-  :host(:not([data-theme])) {
-    --icon-valid: 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(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-    --icon-invalid: 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(243, 143, 121)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-  }
-}
-
-/* ==========================================================================
-   Dark Theme Validation Icons (Explicit)
-   ========================================================================== */
-
-[data-theme="dark"] {
-  --icon-valid: 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(110, 213, 157)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
-  --icon-invalid: 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(243, 143, 121)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
-}

package/src/variables/_layout.css

@@ -1,128 +0,0 @@
-/* ==========================================================================
-   Layout & Typography Variables
-   ==========================================================================
-
-   Global sizing, spacing, and typography variables. These define the
-   foundational rhythm of the design system.
-
-   Includes:
-   - Font families and typography scale
-   - Spacing units and component padding
-   - Border radius and border widths
-   - Responsive typography adjustments
-   ========================================================================== */
-
-: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 */
-  --line-height: 1.5;
-  --font-weight: 400;
-  --font-size: 97%;
-  --text-underline-offset: 0.1rem;
-
-  /* Font Size Scale - semantic heading sizes (h1-h6) */
-  --fs-1: 2rem;
-  --fs-2: 1.75rem;
-  --fs-3: 1.5rem;
-  --fs-4: 1.25rem;
-  --fs-5: 1.125rem;
-  --fs-6: 1rem;
-
-  /* Borders & Effects */
-  --border-radius: 0.25rem;
-  --border-width: 0.0625rem;
-  --outline-width: 0.125rem;
-  --transition: 0.2s ease-in-out;
-
-  /* Spacing - shared base unit */
-  --spacing: 0.75rem;
-  --responsive-multiplier: 1;
-  --typography-spacing-vertical: 1rem;
-  --block-spacing-vertical: 1.2rem;
-  --block-spacing-horizontal: 1.2rem;
-  --grid-column-gap: var(--spacing);
-  --grid-row-gap: var(--spacing);
-  --form-element-spacing-vertical: 0.5rem;
-  --form-element-spacing-horizontal: 0.7rem;
-
-  /* Group Shadows */
-  --group-shadow: 0 0 0 rgba(0, 0, 0, 0);
-  --group-shadow-focus-with-button: 0 0 0 var(--outline-width) var(--color-primary-focus);
-  --group-shadow-focus-with-input: 0 0 0 0.0625rem var(--form-border-color);
-
-  /* Modal */
-  --modal-overlay-backdrop-filter: blur(0.375rem);
-
-  /* Navigation */
-  --nav-link-spacing-vertical: 0.5rem;
-  --nav-link-spacing-horizontal: 0.5rem;
-  --nav-breadcrumb-divider: ">";
-
-  /* Sidebar */
-  --sidebar-width: 25%;
-
-  /* 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");
-  --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");
-  --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");
-  --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");
-  --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");
-  --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");
-  --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");
-  --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");
-}
-
-/* ==========================================================================
-   Responsive Typography & Layout Adjustments
-   ========================================================================== */
-
-@media (--breakpoint-sm) {
-  :root,
-  :host {
-    --font-size: 98%;
-    --sidebar-width: max(25%, 150px);
-    --responsive-multiplier: 1.25;
-  }
-}
-
-@media (--breakpoint-md) {
-  :root,
-  :host {
-    --font-size: 99%;
-    --sidebar-width: max(22%, 180px);
-    --responsive-multiplier: 1.5;
-  }
-}
-
-@media (--breakpoint-lg) {
-  :root,
-  :host {
-    --font-size: 100%;
-    --sidebar-width: max(20%, 200px);
-    --responsive-multiplier: 1.75;
-  }
-}
-
-@media (--breakpoint-xl) {
-  :root,
-  :host {
-    --font-size: 101%;
-    --sidebar-width: max(18%, 220px);
-    --responsive-multiplier: 1.85;
-  }
-}
-
-@media (--breakpoint-xxl) {
-  :root,
-  :host {
-    --font-size: 102%;
-    --sidebar-width: clamp(240px, 16%, 300px);
-    --responsive-multiplier: 2;
-  }
-}

package/src/variants/_card.css

@@ -1,45 +0,0 @@
-/**
- * Card (.card)
- * A container component for grouped content with visual card styling
- * Can be applied to any element (article, div, section, etc.)
- */
-.card {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  margin-bottom: var(--block-spacing-vertical);
-  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-  border-radius: var(--border-radius);
-  background: var(--card-bg);
-  box-shadow: var(--card-shadow);
-
-  & > header,
-  & > footer {
-    width: calc(100% + var(--block-spacing-horizontal) * 2);
-    margin-right: calc(var(--block-spacing-horizontal) * -1);
-    margin-left: calc(var(--block-spacing-horizontal) * -1);
-    padding: calc(var(--block-spacing-vertical) * 0.66) var(--block-spacing-horizontal);
-    background-color: var(--card-section-bg);
-  }
-
-  & > header {
-    margin-top: calc(var(--block-spacing-vertical) * -1);
-    margin-bottom: var(--block-spacing-vertical);
-    border-bottom: var(--border-width) solid var(--card-border);
-    border-top-right-radius: var(--border-radius);
-    border-top-left-radius: var(--border-radius);
-  }
-
-  & > footer {
-    margin-top: var(--block-spacing-vertical);
-    margin-bottom: calc(var(--block-spacing-vertical) * -1);
-    border-top: var(--border-width) solid var(--card-border);
-    border-bottom-right-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-  }
-
-  & > header > :last-child,
-  & > footer > :last-child {
-    margin-bottom: 0;
-  }
-}

package/src/variants/_contained.css

@@ -1,43 +0,0 @@
-/**
- * Contained
- * Applies container constraints (max-width and horizontal margins) to all direct children
- * instead of the container itself
- */
-.contained,
-.contained-fluid {
-  width: 100%;
-
-  & > * {
-    margin-right: auto;
-    margin-left: auto;
-    padding-right: var(--spacing);
-    padding-left: var(--spacing);
-    width: 100%;
-  }
-}
-
-.contained {
-  & > * {
-    @media (--breakpoint-sm) {
-      max-width: 510px;
-      padding-right: 0;
-      padding-left: 0;
-    }
-
-    @media (--breakpoint-md) {
-      max-width: 700px;
-    }
-
-    @media (--breakpoint-lg) {
-      max-width: 950px;
-    }
-
-    @media (--breakpoint-xl) {
-      max-width: 1200px;
-    }
-
-    @media (--breakpoint-xxl) {
-      max-width: 1450px;
-    }
-  }
-}

package/src/variants/_contrast.css

@@ -1,47 +0,0 @@
-/**
- * Contrast variant
- * Used on links, buttons, and accordion elements
- */
-
-/* Links */
-:where(a:not([role="button"])),
-[role="link"] {
-  &.contrast {
-    --color-text: rgb(var(--color-contrast-rgb));
-    --underline: var(--color-contrast-underline);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: var(--color-contrast-hover);
-      --underline: var(--color-contrast-hover-underline);
-    }
-  }
-}
-
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).contrast {
-  --color-background: var(--color-contrast-bg);
-  --border-color: var(--color-contrast-border);
-  --color-text: var(--color-contrast-inverse);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-contrast-hover-bg);
-  --border-color: var(--color-contrast-hover-border);
-  --color-text: var(--color-contrast-inverse);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).contrast:is([aria-current]:not([aria-current="false"])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-contrast-focus);
-}
-
-/* Accordion chevron dark mode override */
-@media only screen and (prefers-color-scheme: dark) {
-  :root:not([data-theme]) details summary[role="button"].contrast::after,
-  :host(:not([data-theme])) details summary[role="button"].contrast::after {
-    filter: brightness(0);
-  }
-}
-
-[data-theme="dark"] details summary[role="button"].contrast::after {
-  filter: brightness(0);
-}

package/src/variants/_ghost.css

@@ -1,61 +0,0 @@
-/**
- * Ghost variant
- * Transparent background with colored text/border
- * Used on buttons and accordion elements
- */
-
-.ghost {
-  --color-background: transparent;
-
-  background-color: var(--color-background) !important;
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost {
-  --color-background: transparent;
-  --color-text: rgb(var(--color-primary-rgb));
-  --border-color: rgb(var(--color-primary-rgb));
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: transparent;
-  --color-text: var(--color-primary-hover);
-  --border-color: var(--color-primary-hover);
-}
-
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.secondary {
-  --color-text: rgb(var(--color-secondary-rgb));
-  --border-color: rgb(var(--color-secondary-rgb));
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost.secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-text: var(--color-secondary-hover);
-  --border-color: var(--color-secondary-hover);
-}
-
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).ghost.contrast {
-  --color-text: rgb(var(--color-contrast-rgb));
-  --border-color: rgb(var(--color-contrast-rgb));
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).ghost.contrast:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-text: var(--color-contrast-hover);
-  --border-color: var(--color-contrast-hover);
-}
-
-/* Reset buttons */
-[type="reset"].ghost {
-  --color-background: transparent;
-  --color-text: rgb(var(--color-secondary-rgb));
-  --border-color: rgb(var(--color-secondary-rgb));
-
-  &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-    --color-text: var(--color-secondary-hover);
-    --border-color: var(--color-secondary-hover);
-  }
-}
-
-/* Accordion - ghost buttons have transparent backgrounds with colored text,
-   so the chevron should remain dark to match the text color */
-details summary[role="button"].ghost::after {
-  filter: none;
-}

package/src/variants/_panel.css

@@ -1,18 +0,0 @@
-/**
- * Panel akin to a flat card.
- */
-.panel {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  --color-background: var(--card-bg);
-  --border-color: var(--card-border);
-  --color-text: var(--color-text);
-
-  background-color: var(--color-background);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  color: var(--color-text);
-  margin-bottom: var(--block-spacing-vertical);
-  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-}

package/src/variants/_secondary.css

@@ -1,35 +0,0 @@
-/**
- * Secondary variant
- * Used on links, buttons, and form elements
- */
-
-/* Links */
-:where(a:not([role="button"])),
-[role="link"] {
-  &.secondary {
-    --color-text: rgb(var(--color-secondary-rgb));
-    --underline: var(--color-secondary-underline);
-
-    &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-      --color-text: var(--color-secondary-hover);
-      --underline: var(--color-secondary-hover-underline);
-    }
-  }
-}
-
-:is(.panel, button, [type="submit"], [type="button"], [role="button"]).secondary {
-  --color-background: var(--color-secondary-bg);
-  --border-color: var(--color-secondary-border);
-  --color-text: var(--color-secondary-inverse);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
-  --color-background: var(--color-secondary-hover-bg);
-  --border-color: var(--color-secondary-hover-border);
-  --color-text: var(--color-secondary-inverse);
-}
-
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:focus,
-:is(button, [type="submit"], [type="button"], [role="button"]).secondary:is([aria-current]:not([aria-current="false"])):focus {
-  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-width) var(--color-secondary-focus);
-}

package/src/variants/_sidebar.css

@@ -1,11 +0,0 @@
-aside {
-  &.sidebar {
-    z-index: 1020;
-    position: sticky;
-    top: 0;
-    max-height: 100svh;
-    align-self: stretch;
-    display: flex;
-    flex-direction: column;
-  }
-}

package/src/variants/_striped.css

@@ -1,10 +0,0 @@
-/**
- * Striped variant
- * Alternating row background colors for tables
- */
-table.striped tbody tr:nth-child(odd) {
-  & th,
-  & td {
-    background-color: var(--table-row-stripe-bg);
-  }
-}