@semanticus/semanticus-css 2.2.0 → 3.1.0

package/dist/semanticus.palette.amber.css

@@ -1 +1 @@
-:root,:host{--color-amber-550:#876400;--color-amber-350:#c79400;--color-amber-200:#ffbf00;--color-primary-text:light-dark(var(--color-amber-550),var(--color-amber-350));--color-primary-fill:var(--color-amber-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-amber-550:#876400;--_color-amber-350:#c79400;--_color-amber-200:#ffbf00;--primary-color:light-dark(var(--_color-amber-550),var(--_color-amber-350));--primary-background-color:var(--_color-amber-200)}

package/dist/semanticus.palette.azure.css

@@ -1 +1 @@
-:root,:host{--color-azure-550:#0172ad;--color-azure-350:#01aaff;--color-primary-text:light-dark(var(--color-azure-550),var(--color-azure-350));--color-primary-fill:var(--color-azure-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-azure-550:#0172ad;--_color-azure-350:#01aaff;--primary-color:light-dark(var(--_color-azure-550),var(--_color-azure-350));--primary-background-color:var(--_color-azure-550)}

package/dist/semanticus.palette.blue.css

@@ -1 +1 @@
-:root,:host{--color-blue-550:#2060df;--color-blue-350:#8999f9;--color-primary-text:light-dark(var(--color-blue-550),var(--color-blue-350));--color-primary-fill:var(--color-blue-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-blue-550:#2060df;--_color-blue-350:#8999f9;--primary-color:light-dark(var(--_color-blue-550),var(--_color-blue-350));--primary-background-color:var(--_color-blue-550)}

package/dist/semanticus.palette.cyan.css

@@ -1 +1 @@
-:root,:host{--color-cyan-550:#047878;--color-cyan-350:#0ab1b1;--color-primary-text:light-dark(var(--color-cyan-550),var(--color-cyan-350));--color-primary-fill:var(--color-cyan-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-cyan-550:#047878;--_color-cyan-350:#0ab1b1;--primary-color:light-dark(var(--_color-cyan-550),var(--_color-cyan-350));--primary-background-color:var(--_color-cyan-550)}

package/dist/semanticus.palette.fuchsia.css

@@ -1 +1 @@
-:root,:host{--color-fuchsia-550:#c1208b;--color-fuchsia-350:#f869bf;--color-primary-text:light-dark(var(--color-fuchsia-550),var(--color-fuchsia-350));--color-primary-fill:var(--color-fuchsia-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-fuchsia-550:#c1208b;--_color-fuchsia-350:#f869bf;--primary-color:light-dark(var(--_color-fuchsia-550),var(--_color-fuchsia-350));--primary-background-color:var(--_color-fuchsia-550)}

package/dist/semanticus.palette.green.css

@@ -1 +1 @@
-:root,:host{--color-green-550:#33790f;--color-green-350:#4eb31b;--color-primary-text:light-dark(var(--color-green-550),var(--color-green-350));--color-primary-fill:var(--color-green-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-green-550:#33790f;--_color-green-350:#4eb31b;--primary-color:light-dark(var(--_color-green-550),var(--_color-green-350));--primary-background-color:var(--_color-green-550)}

package/dist/semanticus.palette.grey.css

@@ -1 +1 @@
-:root,:host{--color-grey-550:#6a6a6a;--color-grey-350:#9e9e9e;--color-grey-300:#ababab;--color-primary-text:light-dark(var(--color-grey-550),var(--color-grey-350));--color-primary-fill:var(--color-grey-300);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-grey-550:#6a6a6a;--_color-grey-350:#9e9e9e;--_color-grey-300:#ababab;--primary-color:light-dark(var(--_color-grey-550),var(--_color-grey-350));--primary-background-color:var(--_color-grey-300)}

package/dist/semanticus.palette.indigo.css

@@ -1 +1 @@
-:root,:host{--color-indigo-600:#524ed2;--color-indigo-550:#655cd6;--color-indigo-350:#a294e5;--color-primary-text:light-dark(var(--color-indigo-550),var(--color-indigo-350));--color-primary-fill:var(--color-indigo-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-indigo-600:#524ed2;--_color-indigo-550:#655cd6;--_color-indigo-350:#a294e5;--primary-color:light-dark(var(--_color-indigo-550),var(--_color-indigo-350));--primary-background-color:var(--_color-indigo-600)}

package/dist/semanticus.palette.jade.css

@@ -1 +1 @@
-:root,:host{--color-jade-550:#007a50;--color-jade-350:#00b478;--color-primary-text:light-dark(var(--color-jade-550),var(--color-jade-350));--color-primary-fill:var(--color-jade-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-jade-550:#007a50;--_color-jade-350:#00b478;--primary-color:light-dark(var(--_color-jade-550),var(--_color-jade-350));--primary-background-color:var(--_color-jade-550)}

package/dist/semanticus.palette.lime.css

@@ -1 +1 @@
-:root,:host{--color-lime-550:#577400;--color-lime-350:#82ab00;--color-lime-200:#a5d601;--color-primary-text:light-dark(var(--color-lime-550),var(--color-lime-350));--color-primary-fill:var(--color-lime-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-lime-550:#577400;--_color-lime-350:#82ab00;--_color-lime-200:#a5d601;--primary-color:light-dark(var(--_color-lime-550),var(--_color-lime-350));--primary-background-color:var(--_color-lime-200)}

package/dist/semanticus.palette.orange.css

@@ -1 +1 @@
-:root,:host{--color-orange-550:#bd3c13;--color-orange-500:#d24317;--color-orange-350:#f56b3d;--color-primary-text:light-dark(var(--color-orange-550),var(--color-orange-350));--color-primary-fill:var(--color-orange-500);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-orange-550:#bd3c13;--_color-orange-500:#d24317;--_color-orange-350:#f56b3d;--primary-color:light-dark(var(--_color-orange-550),var(--_color-orange-350));--primary-background-color:var(--_color-orange-500)}

package/dist/semanticus.palette.pink.css

@@ -1 +1 @@
-:root,:host{--color-pink-550:#c72259;--color-pink-500:#d92662;--color-pink-350:#f7708e;--color-primary-text:light-dark(var(--color-pink-550),var(--color-pink-350));--color-primary-fill:var(--color-pink-500);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-pink-550:#c72259;--_color-pink-500:#d92662;--_color-pink-350:#f7708e;--primary-color:light-dark(var(--_color-pink-550),var(--_color-pink-350));--primary-background-color:var(--_color-pink-500)}

package/dist/semanticus.palette.pumpkin.css

@@ -1 +1 @@
-:root,:host{--color-pumpkin-550:#9c5900;--color-pumpkin-350:#e48500;--color-pumpkin-300:#ff9500;--color-primary-text:light-dark(var(--color-pumpkin-550),var(--color-pumpkin-350));--color-primary-fill:var(--color-pumpkin-300);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-pumpkin-550:#9c5900;--_color-pumpkin-350:#e48500;--_color-pumpkin-300:#ff9500;--primary-color:light-dark(var(--_color-pumpkin-550),var(--_color-pumpkin-350));--primary-background-color:var(--_color-pumpkin-300)}

package/dist/semanticus.palette.purple.css

@@ -1 +1 @@
-:root,:host{--color-purple-600:#9236a4;--color-purple-550:#aa40bf;--color-purple-350:#d47de4;--color-primary-text:light-dark(var(--color-purple-550),var(--color-purple-350));--color-primary-fill:var(--color-purple-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-purple-600:#9236a4;--_color-purple-550:#aa40bf;--_color-purple-350:#d47de4;--primary-color:light-dark(var(--_color-purple-550),var(--_color-purple-350));--primary-background-color:var(--_color-purple-600)}

package/dist/semanticus.palette.red.css

@@ -1 +1 @@
-:root,:host{--color-red-550:#c52f21;--color-red-350:#f17961;--color-primary-text:light-dark(var(--color-red-550),var(--color-red-350));--color-primary-fill:var(--color-red-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-red-550:#c52f21;--_color-red-350:#f17961;--primary-color:light-dark(var(--_color-red-550),var(--_color-red-350));--primary-background-color:var(--_color-red-550)}

package/dist/semanticus.palette.sand.css

@@ -1 +1 @@
-:root,:host{--color-sand-550:#6e6a60;--color-sand-350:#a39e8f;--color-sand-200:#ccc6b4;--color-primary-text:light-dark(var(--color-sand-550),var(--color-sand-350));--color-primary-fill:var(--color-sand-200);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-sand-550:#6e6a60;--_color-sand-350:#a39e8f;--_color-sand-200:#ccc6b4;--primary-color:light-dark(var(--_color-sand-550),var(--_color-sand-350));--primary-background-color:var(--_color-sand-200)}

package/dist/semanticus.palette.slate.css

@@ -1 +1 @@
-:root,:host{--color-slate-600:#525f7a;--color-slate-550:#5d6b89;--color-slate-350:#909ebe;--color-primary-text:light-dark(var(--color-slate-550),var(--color-slate-350));--color-primary-fill:var(--color-slate-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-slate-600:#525f7a;--_color-slate-550:#5d6b89;--_color-slate-350:#909ebe;--primary-color:light-dark(var(--_color-slate-550),var(--_color-slate-350));--primary-background-color:var(--_color-slate-600)}

package/dist/semanticus.palette.violet.css

@@ -1 +1 @@
-:root,:host{--color-violet-600:#7540bf;--color-violet-550:#8352c5;--color-violet-350:#b290d9;--color-primary-text:light-dark(var(--color-violet-550),var(--color-violet-350));--color-primary-fill:var(--color-violet-600);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-violet-600:#7540bf;--_color-violet-550:#8352c5;--_color-violet-350:#b290d9;--primary-color:light-dark(var(--_color-violet-550),var(--_color-violet-350));--primary-background-color:var(--_color-violet-600)}

package/dist/semanticus.palette.yellow.css

@@ -1 +1 @@
-:root,:host{--color-yellow-550:#756b00;--color-yellow-350:#ad9f00;--color-yellow-100:#f2df0d;--color-primary-text:light-dark(var(--color-yellow-550),var(--color-yellow-350));--color-primary-fill:var(--color-yellow-100);--color-primary-on-fill:black;--switch-thumb-glow:light-dark(0 0 .5rem oklch(0% 0 0/.25),0 0 .5rem oklch(0% 0 0/.25))}
+:root,:host{--_color-yellow-550:#756b00;--_color-yellow-350:#ad9f00;--_color-yellow-100:#f2df0d;--primary-color:light-dark(var(--_color-yellow-550),var(--_color-yellow-350));--primary-background-color:var(--_color-yellow-100)}

package/dist/semanticus.palette.zinc.css

@@ -1 +1 @@
-:root,:host{--color-zinc-550:#646b79;--color-zinc-350:#969eaf;--color-primary-text:light-dark(var(--color-zinc-550),var(--color-zinc-350));--color-primary-fill:var(--color-zinc-550);--color-primary-on-fill:white;--switch-thumb-glow:light-dark(0 0 0 oklch(0% 0 0/0),0 0 0 oklch(0% 0 0/0))}
+:root,:host{--_color-zinc-550:#646b79;--_color-zinc-350:#969eaf;--primary-color:light-dark(var(--_color-zinc-550),var(--_color-zinc-350));--primary-background-color:var(--_color-zinc-550)}

package/dist/semanticus.size.pico.css

@@ -1 +1 @@
-:root{--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);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--radius:.25rem;--border-size:.0625rem;--outline-size:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--spacing:var(--base-spacing);--typography-spacing-vertical:1rem;--input-spacing-vertical:.75rem;--input-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-button:0 0 0 var(--outline-size) var(--color-primary-focus-ring);--group-shadow-focus-input:0 0 0 .0625rem var(--input-border);--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}:host{--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);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--radius:.25rem;--border-size:.0625rem;--outline-size:.125rem;--transition:.2s ease-in-out;--base-spacing:1rem;--spacing:var(--base-spacing);--typography-spacing-vertical:1rem;--input-spacing-vertical:.75rem;--input-spacing-horizontal:1rem;--group-shadow:0 0 0 transparent;--group-shadow-focus-button:0 0 0 var(--outline-size) var(--color-primary-focus-ring);--group-shadow-focus-input:0 0 0 .0625rem var(--input-border);--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-size:max(25%, 150px);--spacing:calc(var(--base-spacing) * 1.25)}:host{--font-size:106.25%;--sidebar-size:max(25%, 150px);--spacing:calc(var(--base-spacing) * 1.25)}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-size:max(22%, 180px);--spacing:calc(var(--base-spacing) * 1.5)}:host{--font-size:112.5%;--sidebar-size:max(22%, 180px);--spacing:calc(var(--base-spacing) * 1.5)}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-size:max(20%, 200px);--spacing:calc(var(--base-spacing) * 1.75)}:host{--font-size:118.75%;--sidebar-size:max(20%, 200px);--spacing:calc(var(--base-spacing) * 1.75)}}@media (width>=1280px){:root{--font-size:125%;--sidebar-size:max(18%, 220px);--spacing:calc(var(--base-spacing) * 2)}:host{--font-size:125%;--sidebar-size:max(18%, 220px);--spacing:calc(var(--base-spacing) * 2)}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--spacing:calc(var(--base-spacing) * 2.25)}:host{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--spacing:calc(var(--base-spacing) * 2.25)}}
+:root{--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);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--border-radius:.25rem;--border-width:.0625rem;--outline-width:1px;--focus-ring-width:.125rem;--transition:.2s ease-in-out;--_spacing-scale:1;--spacing:calc(1rem * var(--_spacing-scale));--typography-margin-block:1rem;--inputs-padding-block:.75rem;--inputs-padding-inline:1rem;--group-buttons-padding-inline:1rem;--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}:host{--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);--line-height:1.5;--font-weight:400;--font-size:100%;--text-underline-offset:.1rem;--border-radius:.25rem;--border-width:.0625rem;--outline-width:1px;--focus-ring-width:.125rem;--transition:.2s ease-in-out;--_spacing-scale:1;--spacing:calc(1rem * var(--_spacing-scale));--typography-margin-block:1rem;--inputs-padding-block:.75rem;--inputs-padding-inline:1rem;--group-buttons-padding-inline:1rem;--nav-link-gap:calc(var(--spacing) * .5);--nav-breadcrumb-divider:">";--sidebar-size:25%}@media (width>=576px){:root{--font-size:106.25%;--sidebar-size:max(25%, 150px);--_spacing-scale:1.25}:host{--font-size:106.25%;--sidebar-size:max(25%, 150px);--_spacing-scale:1.25}}@media (width>=768px){:root{--font-size:112.5%;--sidebar-size:max(22%, 180px);--_spacing-scale:1.5}:host{--font-size:112.5%;--sidebar-size:max(22%, 180px);--_spacing-scale:1.5}}@media (width>=1024px){:root{--font-size:118.75%;--sidebar-size:max(20%, 200px);--_spacing-scale:1.75}:host{--font-size:118.75%;--sidebar-size:max(20%, 200px);--_spacing-scale:1.75}}@media (width>=1280px){:root{--font-size:125%;--sidebar-size:max(18%, 220px);--_spacing-scale:2}:host{--font-size:125%;--sidebar-size:max(18%, 220px);--_spacing-scale:2}}@media (width>=1536px){:root{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--_spacing-scale:2.25}:host{--font-size:131.25%;--sidebar-size:clamp(240px, 16%, 300px);--_spacing-scale:2.25}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semanticus/semanticus-css",
-  "version": "2.2.0",
+  "version": "3.1.0",
   "description": "lightweight CSS framework that prioritizes semantic HTML and ARIA-focused accessibility, with a small set of atomic utilities",
   "author": "Joao Goncalves",
   "style": "./dist/semanticus.css",

package/src/components/_card.css

@@ -1,20 +1,29 @@
 .card {
-  --color-background: var(--dialog-fill);
-  --border-color: var(--dialog-border);
-
-  padding-block: var(--spacing);
-  padding-inline: var(--spacing);
-  margin-bottom: var(--spacing);
-  border-radius: var(--radius);
-  border: var(--border-size) solid var(--border-color);
-  background: var(--color-background);
+  --_card-color: var(--card-color);
+  --_card-background-color: var(--card-background-color);
+  --_card-spacing: var(--card-spacing);
+  --_card-border-color: var(--card-border-color);
+  --_card-border-width: var(--card-border-width);
+  --_card-border-radius: var(--card-border-radius);
+  --_card-marginals-background-color: var(--card-marginals-background-color);
+  --_card-marginals-border-color: var(--card-marginals-border-color);
+  --typography-color: var(--_card-color);
+  --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
+
+  color: var(--_card-color);
+  padding-block: var(--_card-spacing);
+  padding-inline: var(--_card-spacing);
+  margin-bottom: var(--_card-spacing);
+  border-radius: var(--_card-border-radius);
+  border: var(--_card-border-width) solid var(--_card-border-color);
+  background: var(--_card-background-color);
 
   > header,
   > footer {
     width: auto;
-    margin-inline: calc(var(--spacing) * -1);
-    padding-inline: var(--spacing);
-    background-color: var(--dialog-section-fill);
+    margin-inline: calc(var(--_card-spacing) * -1);
+    padding-inline: var(--_card-spacing);
+    background-color: var(--_card-marginals-background-color);
     display: flex;
     gap: calc(var(--nav-link-gap) * 1.5);
     align-items: center;
@@ -22,19 +31,21 @@
 
   /* Header styling */
   > header {
-    margin-top: calc(var(--spacing) * -1);
-    border-bottom: var(--border-size) solid var(--dialog-section-border);
-    border-top-right-radius: var(--radius);
-    border-top-left-radius: var(--radius);
+    margin-top: calc(var(--_card-spacing) * -1);
+    border-bottom: var(--_card-border-width) solid
+      var(--_card-marginals-border-color);
+    border-top-right-radius: var(--_card-border-radius);
+    border-top-left-radius: var(--_card-border-radius);
     justify-content: space-between;
   }
 
   /* Footer styling */
   > footer {
-    margin-bottom: calc(var(--spacing) * -1);
-    border-top: var(--border-size) solid var(--dialog-section-border);
-    border-bottom-right-radius: var(--radius);
-    border-bottom-left-radius: var(--radius);
+    margin-bottom: calc(var(--_card-spacing) * -1);
+    border-top: var(--_card-border-width) solid
+      var(--_card-marginals-border-color);
+    border-bottom-right-radius: var(--_card-border-radius);
+    border-bottom-left-radius: var(--_card-border-radius);
     justify-content: end;
   }
 
@@ -44,37 +55,33 @@
 
   &:is(ul, [role="list"], [role="group"]) {
     padding: 0;
-    border: none;
 
     > * {
-      --color-background: transparent;
-      --card-item-fill: var(--color-background);
-      --border-color: color-mix(
-        in srgb,
-        light-dark(var(--color-slate-900), var(--color-zinc-350)),
-        transparent 90%
-      );
-
-      background: var(--card-item-fill);
-      color: var(--color-text);
+      background: var(--_card-background-color);
+      color: var(--_card-color);
       margin: 0;
-      padding: var(--spacing);
+      padding: var(--_card-spacing);
       border-radius: 0;
-      border: var(--border-size) solid var(--border-color);
+      border: var(--_card-border-width) solid
+        var(--_card-marginals-border-color);
 
       &:first-child {
-        border-top-left-radius: var(--radius);
+        border-top-left-radius: var(--_card-border-radius);
       }
 
       &:last-child {
-        border-bottom-right-radius: var(--radius);
+        border-bottom-right-radius: var(--_card-border-radius);
+      }
+
+      > :last-child {
+        margin-bottom: 0;
       }
 
       &:is([aria-current]:not([aria-current="false"])) {
-        --card-item-fill: color-mix(
+        background: color-mix(
           in srgb,
-          var(--color-background),
-          var(--color-hover-effect) 15%
+          var(--_card-background-color),
+          var(--color-hover-shade) 15%
         );
       }
     }
@@ -85,31 +92,33 @@
     flex-direction: column;
 
     > * {
-      border-top: none;
       list-style: none;
+      border-top: none;
+      border-inline: none;
 
       &:first-child {
-        border-top: var(--border-size) solid var(--border-color);
-        border-top-right-radius: var(--radius);
+        border-top-right-radius: var(--_card-border-radius);
       }
 
       &:last-child {
-        border-bottom-left-radius: var(--radius);
+        border-bottom-left-radius: var(--_card-border-radius);
+        border-bottom: none;
       }
     }
   }
 
   &[role="group"] {
     > * {
-      border-left: none;
+      border-right: none;
+      border-block: none;
 
       &:first-child {
-        border-left: var(--border-size) solid var(--border-color);
-        border-bottom-left-radius: var(--radius);
+        border-left: none;
+        border-bottom-left-radius: var(--_card-border-radius);
       }
 
       &:last-child {
-        border-top-right-radius: var(--radius);
+        border-top-right-radius: var(--_card-border-radius);
       }
     }
   }

package/src/components/_icons.css

@@ -2,8 +2,8 @@
 [class^="icon-"],
 [class*=" icon-"] {
   display: inline-block;
-  min-width: 1em;
-  min-height: 1em;
+  min-width: var(--icons-width);
+  min-height: var(--icons-width);
   margin: 0;
   padding: 0;
   border: none;

package/src/components/_pane.css

@@ -1,15 +1,22 @@
 .pane {
-  --color-background: light-dark(
-    color-mix(in srgb, var(--color-slate-50), white 25%),
-    color-mix(in srgb, var(--color-slate-50), black 75%)
-  );
+  --_pane-color: var(--pane-color);
+  --_pane-background-color: var(--pane-background-color);
+  --_pane-spacing: var(--pane-spacing);
+  --_pane-border-color: var(--pane-border-color);
+  --_pane-border-width: var(--pane-border-width);
+  --typography-color: var(--_pane-color);
+  --color-muted: color-mix(in srgb, var(--typography-color), transparent 40%);
 
-  color: var(--color-text);
-  padding: var(--spacing);
-  margin-bottom: var(--spacing);
-  background: var(--color-background);
+  background: var(--_pane-background-color);
+  border: var(--_pane-border-width) solid var(--_pane-border-color);
+  color: var(--_pane-color);
+  padding: var(--_pane-spacing);
 
   > :last-child {
     margin-bottom: 0 !important;
   }
+
+  &:is(.content-grid, .full-width) {
+    padding-inline: 0;
+  }
 }

package/src/components/_sidebar.css

@@ -14,13 +14,13 @@ aside.sidebar {
     transform 0.2s ease-in-out;
 
   &:popover-open {
-    margin: 0 !important;
+    margin: 0;
     display: flex !important;
-    width: 60% !important;
-    box-shadow: var(--shadow);
-    background-color: var(--color-background) !important;
+    width: 100%;
+    box-shadow: var(--menu-box-shadow);
+    background-color: var(--background-color);
     left: 0;
-    right: unset;
+    bottom: 0;
 
     &[data-placement="right"] {
       left: unset;
@@ -30,7 +30,7 @@ aside.sidebar {
 
   &::backdrop {
     backdrop-filter: blur(0.375rem);
-    background-color: var(--dialog-overlay);
+    background-color: var(--backdrop-background-color);
     transition:
       backdrop-filter 0.2s ease-in-out,
       background-color 0.2s ease-in-out;

package/src/components/_variables.css

@@ -0,0 +1,28 @@
+:root,
+:host {
+  /* --- Alert Default Styling --- */
+  --alert-color: var(--color);
+  --alert-background-color: var(--background-color);
+  --alert-spacing: var(--spacing);
+  --alert-border-color: var(--border-color);
+  --alert-border-width: var(--border-width);
+  --alert-border-accent-width: var(--alert-border-width);
+  --alert-border-radius: var(--border-radius);
+
+  /* --- Card Default Styling --- */
+  --card-color: var(--color);
+  --card-background-color: var(--background-color);
+  --card-spacing: var(--spacing);
+  --card-border-color: var(--border-color);
+  --card-border-width: var(--border-width);
+  --card-border-radius: var(--border-radius);
+  --card-marginals-background-color: var(--dialog-marginals-background-color);
+  --card-marginals-border-color: var(--dialog-marginals-border-color);
+
+  /* --- Pane Default Styling --- */
+  --pane-color: var(--color);
+  --pane-background-color: var(--background-color);
+  --pane-spacing: var(--spacing);
+  --pane-border-color: var(--background-color);
+  --pane-border-width: 0;
+}

package/src/components/modules.css

@@ -1,3 +1,5 @@
+@import "./_variables.css";
+
 @import "./_auto-grid.css";
 @import "./_card.css";
 @import "./_container.css";

package/src/index.css

@@ -1,5 +1,5 @@
 /*!
- * Semanticus CSS v2.2.0 (https://semanticus.design/)
+ * Semanticus CSS v3.1.0 (https://semanticus.design/)
  *
  * A ARIA-centric, semantic HTML — enhanced with components and variants and utilities
  *

package/src/palettes/amber.css

@@ -1,31 +1,27 @@
 :root,
 :host {
-  /* --color-amber-950: #161003; */
-  /* --color-amber-900: #231a03; */
-  /* --color-amber-850: #312302; */
-  /* --color-amber-800: #3f2d00; */
-  /* --color-amber-750: #4d3700; */
-  /* --color-amber-700: #5b4200; */
-  /* --color-amber-650: #694d00; */
-  /* --color-amber-600: #785800; */
-  --color-amber-550: #876400;
-  /* --color-amber-500: #977000; */
-  /* --color-amber-450: #a77c00; */
-  /* --color-amber-400: #b78800; */
-  --color-amber-350: #c79400;
-  /* --color-amber-300: #d8a100; */
-  /* --color-amber-250: #e8ae01; */
-  --color-amber-200: #ffbf00;
-  /* --color-amber-150: #fecc63; */
-  /* --color-amber-100: #fddea6; */
-  /* --color-amber-50: #fcefd9; */
-  /* --color-amber: var(--color-amber-550); */
+  /* --_color-amber-950: #161003; */
+  /* --_color-amber-900: #231a03; */
+  /* --_color-amber-850: #312302; */
+  /* --_color-amber-800: #3f2d00; */
+  /* --_color-amber-750: #4d3700; */
+  /* --_color-amber-700: #5b4200; */
+  /* --_color-amber-650: #694d00; */
+  /* --_color-amber-600: #785800; */
+  --_color-amber-550: #876400;
+  /* --_color-amber-500: #977000; */
+  /* --_color-amber-450: #a77c00; */
+  /* --_color-amber-400: #b78800; */
+  --_color-amber-350: #c79400;
+  /* --_color-amber-300: #d8a100; */
+  /* --_color-amber-250: #e8ae01; */
+  --_color-amber-200: #ffbf00;
+  /* --_color-amber-150: #fecc63; */
+  /* --_color-amber-100: #fddea6; */
+  /* --_color-amber-50: #fcefd9; */
+  /* --color-amber: var(--_color-amber-550); */
 
   /* System tokens */
-  --color-primary-text: light-dark(var(--color-amber-550), var(--color-amber-350));
-  --color-primary-fill: var(--color-amber-200);
-  --color-primary-on-fill: black;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0.5rem oklch(0% 0 0deg / 0.25), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
+  --primary-color: light-dark(var(--_color-amber-550), var(--_color-amber-350));
+  --primary-background-color: var(--_color-amber-200);
 }

package/src/palettes/azure.css

@@ -1,31 +1,27 @@
 :root,
 :host {
-  /* --color-azure-950: #04121d; */
-  /* --color-azure-900: #061e2f; */
-  /* --color-azure-850: #052940; */
-  /* --color-azure-800: #033452; */
-  /* --color-azure-750: #014063; */
-  /* --color-azure-700: #014c75; */
-  /* --color-azure-650: #015887; */
-  /* --color-azure-600: #02659a; */
-  --color-azure-550: #0172ad;
-  /* --color-azure-500: #017fc0; */
-  /* --color-azure-450: #018cd4; */
-  /* --color-azure-400: #029ae8; */
-  --color-azure-350: #01aaff;
-  /* --color-azure-300: #51b4ff; */
-  /* --color-azure-250: #79c0ff; */
-  /* --color-azure-200: #9bccfd; */
-  /* --color-azure-150: #b7d9fc; */
-  /* --color-azure-100: #d1e5fb; */
-  /* --color-azure-50: #e9f2fc; */
-  /* --color-azure: var(--color-azure-550); */
+  /* --_color-azure-950: #04121d; */
+  /* --_color-azure-900: #061e2f; */
+  /* --_color-azure-850: #052940; */
+  /* --_color-azure-800: #033452; */
+  /* --_color-azure-750: #014063; */
+  /* --_color-azure-700: #014c75; */
+  /* --_color-azure-650: #015887; */
+  /* --_color-azure-600: #02659a; */
+  --_color-azure-550: #0172ad;
+  /* --_color-azure-500: #017fc0; */
+  /* --_color-azure-450: #018cd4; */
+  /* --_color-azure-400: #029ae8; */
+  --_color-azure-350: #01aaff;
+  /* --_color-azure-300: #51b4ff; */
+  /* --_color-azure-250: #79c0ff; */
+  /* --_color-azure-200: #9bccfd; */
+  /* --_color-azure-150: #b7d9fc; */
+  /* --_color-azure-100: #d1e5fb; */
+  /* --_color-azure-50: #e9f2fc; */
+  /* --color-azure: var(--_color-azure-550); */
 
   /* System tokens */
-  --color-primary-text: light-dark(var(--color-azure-550), var(--color-azure-350));
-  --color-primary-fill: var(--color-azure-550);
-  --color-primary-on-fill: white;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0.5rem oklch(0% 0 0deg / 0.25));
+  --primary-color: light-dark(var(--_color-azure-550), var(--_color-azure-350));
+  --primary-background-color: var(--_color-azure-550);
 }

package/src/palettes/blue.css

@@ -1,31 +1,27 @@
 :root,
 :host {
-  /* --color-blue-950: #080f2d; */
-  /* --color-blue-900: #0c1a41; */
-  /* --color-blue-850: #0e2358; */
-  /* --color-blue-800: #0f2d70; */
-  /* --color-blue-750: #0f3888; */
-  /* --color-blue-700: #1343a0; */
-  /* --color-blue-650: #184eb8; */
-  /* --color-blue-600: #1d59d0; */
-  --color-blue-550: #2060df;
-  /* --color-blue-500: #3c71f7; */
-  /* --color-blue-450: #5c7ef8; */
-  /* --color-blue-400: #748bf8; */
-  --color-blue-350: #8999f9;
-  /* --color-blue-300: #9ca7fa; */
-  /* --color-blue-250: #aeb5fb; */
-  /* --color-blue-200: #bfc3fa; */
-  /* --color-blue-150: #d0d2fa; */
-  /* --color-blue-100: #e0e1fa; */
-  /* --color-blue-50: #f0f0fb; */
-  /* --color-blue: var(--color-blue-550); */
+  /* --_color-blue-950: #080f2d; */
+  /* --_color-blue-900: #0c1a41; */
+  /* --_color-blue-850: #0e2358; */
+  /* --_color-blue-800: #0f2d70; */
+  /* --_color-blue-750: #0f3888; */
+  /* --_color-blue-700: #1343a0; */
+  /* --_color-blue-650: #184eb8; */
+  /* --_color-blue-600: #1d59d0; */
+  --_color-blue-550: #2060df;
+  /* --_color-blue-500: #3c71f7; */
+  /* --_color-blue-450: #5c7ef8; */
+  /* --_color-blue-400: #748bf8; */
+  --_color-blue-350: #8999f9;
+  /* --_color-blue-300: #9ca7fa; */
+  /* --_color-blue-250: #aeb5fb; */
+  /* --_color-blue-200: #bfc3fa; */
+  /* --_color-blue-150: #d0d2fa; */
+  /* --_color-blue-100: #e0e1fa; */
+  /* --_color-blue-50: #f0f0fb; */
+  /* --color-blue: var(--_color-blue-550); */
 
   /* System tokens */
-  --color-primary-text: light-dark(var(--color-blue-550), var(--color-blue-350));
-  --color-primary-fill: var(--color-blue-550);
-  --color-primary-on-fill: white;
-
-  /* Component tokens */
-  --switch-thumb-glow: light-dark(0 0 0 oklch(0% 0 0deg / 0), 0 0 0 oklch(0% 0 0deg / 0));
+  --primary-color: light-dark(var(--_color-blue-550), var(--_color-blue-350));
+  --primary-background-color: var(--_color-blue-550);
 }