@semanticus/semanticus-css 0.3.0

package/src/semantics/modules.css

@@ -0,0 +1,35 @@
+/**
+ * Semanticus CSS Semantics Modules
+ * Just the semantic component styles (no variables, no normalize)
+ * Used by the full version which imports variables/normalize separately
+ */
+
+@import "./_aria-busy.css";
+@import "./_article.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 "./_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";

package/src/sizes/slim.css

@@ -0,0 +1,12 @@
+/*
+  Semanticus CSS Size: Slim
+*/
+:root,
+:host {
+  --font-size: 1rem;
+  --spacing: 0.75rem;
+  --block-spacing-vertical: 1.2rem;
+  --block-spacing-horizontal: 1.2rem;
+  --form-element-spacing-vertical: 0.4rem;
+  --form-element-spacing-horizontal: 0.6rem;
+}

package/src/utilities/_variables.css

@@ -0,0 +1,244 @@
+/*!
+ * Adapted from Bootstrap v5.3.8 utilities (https://getbootstrap.com/)
+ * Copyright (c) 2011-2026 The Bootstrap Authors
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
+ */
+
+/* ==========================================================================
+   Theme-independent variables
+   ========================================================================== */
+
+:root,
+:host {
+  /* Gradient */
+  --gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
+
+  /* Borders & radii */
+  --border-style: solid;
+  --border-radius-sm: var(--border-radius);
+  --border-radius-lg: calc(var(--border-radius) * 2);
+  --border-radius-xl: calc(var(--border-radius) * 4);
+  --border-radius-xxl: calc(var(--border-radius) * 8);
+  --border-radius-pill: 50rem;
+
+  /* Border-width scale */
+  --border-width-1: var(--border-width);
+  --border-width-2: calc(var(--border-width) * 2);
+  --border-width-3: calc(var(--border-width) * 3);
+  --border-width-4: calc(var(--border-width) * 4);
+  --border-width-5: calc(var(--border-width) * 5);
+
+  /* Spacing scale */
+  --spacer-0: 0;
+  --spacer-1: calc(var(--spacing) * 0.25);
+  --spacer-2: calc(var(--spacing) * 0.5);
+  --spacer-3: var(--spacing);
+  --spacer-4: calc(var(--spacing) * 1.5);
+  --spacer-5: calc(var(--spacing) * 3);
+
+  /* Font-size scale */
+  --fs-1: calc(1.375rem + 1.5vw);
+  --fs-2: calc(1.325rem + 0.9vw);
+  --fs-3: calc(1.3rem + 0.6vw);
+  --fs-4: calc(1.275rem + 0.3vw);
+  --fs-5: 1.25rem;
+  --fs-6: 1rem;
+
+  /* Focus ring */
+  --focus-ring-width: var(--outline-width);
+  --focus-ring-opacity: 0.25;
+
+  /* Auto-switching mappings (resolved at computed-value time via Semanticus CSS) */
+  --emphasis-color: var(--color-contrast);
+  --secondary-color: var(--color-text-muted);
+  --border-color: var(--color-border-muted);
+  --box-shadow: var(--shadow-md);
+  --box-shadow-sm: var(--shadow-sm);
+  --box-shadow-lg: var(--shadow-lg);
+  --focus-ring-color: var(--color-primary-focus);
+
+  /* Status inverse colors (readable text on status-colored backgrounds) */
+  --color-success-inverse: #fff;
+  --color-info-inverse: #fff;
+  --color-warning-inverse: #000;
+  --color-danger-inverse: #fff;
+}
+
+/* ==========================================================================
+   Light theme (default)
+   ========================================================================== */
+
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  /* RGB channels */
+  --primary-rgb: 1, 114, 173;
+  --secondary-rgb: 93, 107, 137;
+  --contrast-rgb: 24, 28, 37;
+
+  /* Text emphasis (darker/hover shades in light) */
+  --primary-text-emphasis: #015887;
+  --secondary-text-emphasis: #48536b;
+  --success-text-emphasis: #20603b;
+  --info-text-emphasis: #025d5d;
+  --warning-text-emphasis: #694d00;
+  --danger-text-emphasis: #9b2318;
+  --contrast-text-emphasis: #495057;
+
+  /* Subtle backgrounds (low opacity) */
+  --primary-bg-subtle: rgba(1, 114, 173, 0.1);
+  --secondary-bg-subtle: rgba(93, 107, 137, 0.1);
+  --success-bg-subtle: rgba(43, 122, 76, 0.1);
+  --info-bg-subtle: rgba(4, 120, 120, 0.1);
+  --warning-bg-subtle: rgba(255, 191, 0, 0.1);
+  --danger-bg-subtle: rgba(197, 47, 33, 0.1);
+  --contrast-bg-subtle: #ced4da;
+
+  /* Subtle borders (medium opacity) */
+  --primary-border-subtle: rgba(1, 114, 173, 0.35);
+  --secondary-border-subtle: rgba(93, 107, 137, 0.35);
+  --success-border-subtle: rgba(43, 122, 76, 0.35);
+  --info-border-subtle: rgba(4, 120, 120, 0.35);
+  --warning-border-subtle: rgba(255, 191, 0, 0.35);
+  --danger-border-subtle: rgba(197, 47, 33, 0.35);
+  --contrast-border-subtle: #adb5bd;
+
+  /* Body & emphasis RGB */
+  --body-color-rgb: 55, 60, 68;
+  --body-bg-rgb: 255, 255, 255;
+  --emphasis-color-rgb: 24, 28, 37;
+
+  /* Secondary surfaces */
+  --secondary-bg-rgb: 233, 236, 239;
+
+  /* Link RGB */
+  --link-color-rgb: 1, 114, 173;
+  --link-hover-color-rgb: 1, 88, 135;
+
+  /* Link hover RGB (per-variant) */
+  --secondary-hover-color-rgb: 72, 83, 107;
+  --success-hover-color-rgb: 32, 96, 59;
+  --info-hover-color-rgb: 2, 93, 93;
+  --warning-hover-color-rgb: 232, 174, 1;
+  --danger-hover-color-rgb: 155, 35, 24;
+  --contrast-hover-color-rgb: 249, 250, 251;
+}
+
+/* ==========================================================================
+   Dark theme (system preference)
+   ========================================================================== */
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    /* RGB channels */
+    --primary-rgb: 1, 170, 255;
+    --secondary-rgb: 150, 158, 175;
+    --contrast-rgb: 248, 249, 250;
+
+    /* Text emphasis (lighter/hover shades in dark) */
+    --primary-text-emphasis: #79c0ff;
+    --secondary-text-emphasis: #b3b9c5;
+    --success-text-emphasis: #93deb5;
+    --info-text-emphasis: #25dddd;
+    --warning-text-emphasis: #e8ae01;
+    --danger-text-emphasis: #f5b7a8;
+    --contrast-text-emphasis: #f8f9fa;
+
+    /* Subtle backgrounds */
+    --primary-bg-subtle: rgba(1, 170, 255, 0.15);
+    --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
+    --success-bg-subtle: rgba(110, 213, 157, 0.15);
+    --info-bg-subtle: rgba(10, 194, 194, 0.15);
+    --warning-bg-subtle: rgba(255, 191, 0, 0.15);
+    --danger-bg-subtle: rgba(243, 143, 121, 0.15);
+    --contrast-bg-subtle: #2a3140;
+
+    /* Subtle borders */
+    --primary-border-subtle: rgba(1, 170, 255, 0.35);
+    --secondary-border-subtle: rgba(150, 158, 175, 0.35);
+    --success-border-subtle: rgba(110, 213, 157, 0.35);
+    --info-border-subtle: rgba(10, 194, 194, 0.35);
+    --warning-border-subtle: rgba(255, 191, 0, 0.35);
+    --danger-border-subtle: rgba(243, 143, 121, 0.35);
+    --contrast-border-subtle: #2a3140;
+
+    /* Body & emphasis RGB */
+    --body-color-rgb: 194, 199, 208;
+    --body-bg-rgb: 19, 23, 31;
+    --emphasis-color-rgb: 223, 227, 235;
+
+    /* Secondary surfaces */
+    --secondary-bg-rgb: 42, 49, 64;
+
+    /* Link RGB */
+    --link-color-rgb: 1, 170, 255;
+    --link-hover-color-rgb: 121, 192, 255;
+
+    /* Link hover RGB (per-variant) */
+    --secondary-hover-color-rgb: 179, 185, 197;
+    --success-hover-color-rgb: 147, 222, 181;
+    --info-hover-color-rgb: 37, 221, 221;
+    --warning-hover-color-rgb: 232, 174, 1;
+    --danger-hover-color-rgb: 245, 183, 168;
+    --contrast-hover-color-rgb: 255, 255, 255;
+  }
+}
+
+/* ==========================================================================
+   Dark theme (explicit)
+   ========================================================================== */
+
+[data-theme="dark"] {
+  /* RGB channels */
+  --primary-rgb: 1, 170, 255;
+  --secondary-rgb: 150, 158, 175;
+  --contrast-rgb: 248, 249, 250;
+
+  /* Text emphasis (lighter/hover shades in dark) */
+  --primary-text-emphasis: #79c0ff;
+  --secondary-text-emphasis: #b3b9c5;
+  --success-text-emphasis: #93deb5;
+  --info-text-emphasis: #25dddd;
+  --warning-text-emphasis: #e8ae01;
+  --danger-text-emphasis: #f5b7a8;
+  --contrast-text-emphasis: #f8f9fa;
+
+  /* Subtle backgrounds */
+  --primary-bg-subtle: rgba(1, 170, 255, 0.15);
+  --secondary-bg-subtle: rgba(150, 158, 175, 0.15);
+  --success-bg-subtle: rgba(110, 213, 157, 0.15);
+  --info-bg-subtle: rgba(10, 194, 194, 0.15);
+  --warning-bg-subtle: rgba(255, 191, 0, 0.15);
+  --danger-bg-subtle: rgba(243, 143, 121, 0.15);
+  --contrast-bg-subtle: #2a3140;
+
+  /* Subtle borders */
+  --primary-border-subtle: rgba(1, 170, 255, 0.35);
+  --secondary-border-subtle: rgba(150, 158, 175, 0.35);
+  --success-border-subtle: rgba(110, 213, 157, 0.35);
+  --info-border-subtle: rgba(10, 194, 194, 0.35);
+  --warning-border-subtle: rgba(255, 191, 0, 0.35);
+  --danger-border-subtle: rgba(243, 143, 121, 0.35);
+  --contrast-border-subtle: #2a3140;
+
+  /* Body & emphasis RGB */
+  --body-color-rgb: 194, 199, 208;
+  --body-bg-rgb: 19, 23, 31;
+  --emphasis-color-rgb: 223, 227, 235;
+
+  /* Secondary surfaces */
+  --secondary-bg-rgb: 42, 49, 64;
+
+  /* Link RGB */
+  --link-color-rgb: 1, 170, 255;
+  --link-hover-color-rgb: 121, 192, 255;
+
+  /* Link hover RGB (per-variant) */
+  --secondary-hover-color-rgb: 179, 185, 197;
+  --success-hover-color-rgb: 147, 222, 181;
+  --info-hover-color-rgb: 37, 221, 221;
+  --warning-hover-color-rgb: 232, 174, 1;
+  --danger-hover-color-rgb: 245, 183, 168;
+  --contrast-hover-color-rgb: 255, 255, 255;
+}

package/src/utilities/borders/_border-radius.css

@@ -0,0 +1,216 @@
+.rounded {
+  border-radius: var(--border-radius) !important;
+}
+
+.rounded-0 {
+  border-radius: 0 !important;
+}
+
+.rounded-1 {
+  border-radius: var(--border-radius-sm) !important;
+}
+
+.rounded-2 {
+  border-radius: var(--border-radius) !important;
+}
+
+.rounded-3 {
+  border-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-4 {
+  border-radius: var(--border-radius-xl) !important;
+}
+
+.rounded-5 {
+  border-radius: var(--border-radius-xxl) !important;
+}
+
+.rounded-circle {
+  border-radius: 50% !important;
+}
+
+.rounded-pill {
+  border-radius: var(--border-radius-pill) !important;
+}
+
+.rounded-top {
+  border-top-left-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--border-radius) !important;
+}
+
+.rounded-top-0 {
+  border-top-left-radius: 0 !important;
+  border-top-right-radius: 0 !important;
+}
+
+.rounded-top-1 {
+  border-top-left-radius: var(--border-radius-sm) !important;
+  border-top-right-radius: var(--border-radius-sm) !important;
+}
+
+.rounded-top-2 {
+  border-top-left-radius: var(--border-radius) !important;
+  border-top-right-radius: var(--border-radius) !important;
+}
+
+.rounded-top-3 {
+  border-top-left-radius: var(--border-radius-lg) !important;
+  border-top-right-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-top-4 {
+  border-top-left-radius: var(--border-radius-xl) !important;
+  border-top-right-radius: var(--border-radius-xl) !important;
+}
+
+.rounded-top-5 {
+  border-top-left-radius: var(--border-radius-xxl) !important;
+  border-top-right-radius: var(--border-radius-xxl) !important;
+}
+
+.rounded-top-circle {
+  border-top-left-radius: 50% !important;
+  border-top-right-radius: 50% !important;
+}
+
+.rounded-top-pill {
+  border-top-left-radius: var(--border-radius-pill) !important;
+  border-top-right-radius: var(--border-radius-pill) !important;
+}
+
+.rounded-end {
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.rounded-end-0 {
+  border-top-right-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.rounded-end-1 {
+  border-top-right-radius: var(--border-radius-sm) !important;
+  border-bottom-right-radius: var(--border-radius-sm) !important;
+}
+
+.rounded-end-2 {
+  border-top-right-radius: var(--border-radius) !important;
+  border-bottom-right-radius: var(--border-radius) !important;
+}
+
+.rounded-end-3 {
+  border-top-right-radius: var(--border-radius-lg) !important;
+  border-bottom-right-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-end-4 {
+  border-top-right-radius: var(--border-radius-xl) !important;
+  border-bottom-right-radius: var(--border-radius-xl) !important;
+}
+
+.rounded-end-5 {
+  border-top-right-radius: var(--border-radius-xxl) !important;
+  border-bottom-right-radius: var(--border-radius-xxl) !important;
+}
+
+.rounded-end-circle {
+  border-top-right-radius: 50% !important;
+  border-bottom-right-radius: 50% !important;
+}
+
+.rounded-end-pill {
+  border-top-right-radius: var(--border-radius-pill) !important;
+  border-bottom-right-radius: var(--border-radius-pill) !important;
+}
+
+.rounded-bottom {
+  border-bottom-right-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--border-radius) !important;
+}
+
+.rounded-bottom-0 {
+  border-bottom-right-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.rounded-bottom-1 {
+  border-bottom-right-radius: var(--border-radius-sm) !important;
+  border-bottom-left-radius: var(--border-radius-sm) !important;
+}
+
+.rounded-bottom-2 {
+  border-bottom-right-radius: var(--border-radius) !important;
+  border-bottom-left-radius: var(--border-radius) !important;
+}
+
+.rounded-bottom-3 {
+  border-bottom-right-radius: var(--border-radius-lg) !important;
+  border-bottom-left-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-bottom-4 {
+  border-bottom-right-radius: var(--border-radius-xl) !important;
+  border-bottom-left-radius: var(--border-radius-xl) !important;
+}
+
+.rounded-bottom-5 {
+  border-bottom-right-radius: var(--border-radius-xxl) !important;
+  border-bottom-left-radius: var(--border-radius-xxl) !important;
+}
+
+.rounded-bottom-circle {
+  border-bottom-right-radius: 50% !important;
+  border-bottom-left-radius: 50% !important;
+}
+
+.rounded-bottom-pill {
+  border-bottom-right-radius: var(--border-radius-pill) !important;
+  border-bottom-left-radius: var(--border-radius-pill) !important;
+}
+
+.rounded-start {
+  border-bottom-left-radius: var(--border-radius) !important;
+  border-top-left-radius: var(--border-radius) !important;
+}
+
+.rounded-start-0 {
+  border-bottom-left-radius: 0 !important;
+  border-top-left-radius: 0 !important;
+}
+
+.rounded-start-1 {
+  border-bottom-left-radius: var(--border-radius-sm) !important;
+  border-top-left-radius: var(--border-radius-sm) !important;
+}
+
+.rounded-start-2 {
+  border-bottom-left-radius: var(--border-radius) !important;
+  border-top-left-radius: var(--border-radius) !important;
+}
+
+.rounded-start-3 {
+  border-bottom-left-radius: var(--border-radius-lg) !important;
+  border-top-left-radius: var(--border-radius-lg) !important;
+}
+
+.rounded-start-4 {
+  border-bottom-left-radius: var(--border-radius-xl) !important;
+  border-top-left-radius: var(--border-radius-xl) !important;
+}
+
+.rounded-start-5 {
+  border-bottom-left-radius: var(--border-radius-xxl) !important;
+  border-top-left-radius: var(--border-radius-xxl) !important;
+}
+
+.rounded-start-circle {
+  border-bottom-left-radius: 50% !important;
+  border-top-left-radius: 50% !important;
+}
+
+.rounded-start-pill {
+  border-bottom-left-radius: var(--border-radius-pill) !important;
+  border-top-left-radius: var(--border-radius-pill) !important;
+}
+

package/src/utilities/borders/_border-style.css

@@ -0,0 +1,39 @@
+.border {
+  border: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.border-0 {
+  border: 0 !important;
+}
+
+.border-top {
+  border-top: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.border-top-0 {
+  border-top: 0 !important;
+}
+
+.border-end {
+  border-right: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.border-end-0 {
+  border-right: 0 !important;
+}
+
+.border-bottom {
+  border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.border-bottom-0 {
+  border-bottom: 0 !important;
+}
+
+.border-start {
+  border-left: var(--border-width) var(--border-style) var(--border-color) !important;
+}
+
+.border-start-0 {
+  border-left: 0 !important;
+}

package/src/utilities/borders/_border-width.css

@@ -0,0 +1,39 @@
+.border-1 {
+  border-width: var(--border-width-1) !important;
+}
+
+.border-2 {
+  border-width: var(--border-width-2) !important;
+}
+
+.border-3 {
+  border-width: var(--border-width-3) !important;
+}
+
+.border-4 {
+  border-width: var(--border-width-4) !important;
+}
+
+.border-5 {
+  border-width: var(--border-width-5) !important;
+}
+
+.border-opacity-10 {
+  --border-opacity: 0.1;
+}
+
+.border-opacity-25 {
+  --border-opacity: 0.25;
+}
+
+.border-opacity-50 {
+  --border-opacity: 0.5;
+}
+
+.border-opacity-75 {
+  --border-opacity: 0.75;
+}
+
+.border-opacity-100 {
+  --border-opacity: 1;
+}