@semanticus/semanticus-css 0.3.0

package/src/palettes/pumpkin.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Pumpkin
+  Overrides primary color variables for the pumpkin palette
+*/
+
+/* Light theme - Pumpkin */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(232, 120, 62, 0.25);
+  --color-primary: #9e3806;
+  --color-primary-bg: #f4a37d;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(158, 56, 6, 0.5);
+  --color-primary-hover: #7a2b05;
+  --color-primary-hover-bg: #f6b091;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(232, 120, 62, 0.5);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+/* Dark theme - Pumpkin */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(243, 153, 111, 0.1875);
+    --color-primary: #f3996f;
+    --color-primary-bg: #f4a37d;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(243, 153, 111, 0.5);
+    --color-primary-hover: #f5b7a8;
+    --color-primary-hover-bg: #f5b7a8;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(243, 153, 111, 0.375);
+    --color-primary-inverse: #000;
+    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(243, 153, 111, 0.1875);
+  --color-primary: #f3996f;
+  --color-primary-bg: #f4a37d;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(243, 153, 111, 0.5);
+  --color-primary-hover: #f5b7a8;
+  --color-primary-hover-bg: #f5b7a8;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(243, 153, 111, 0.375);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}

package/src/palettes/purple.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Purple
+  Overrides primary color variables for the purple palette
+*/
+
+/* Light theme - Purple */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(205, 104, 224, 0.25);
+  --color-primary: #9236a4;
+  --color-primary-bg: #9236a4;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(146, 54, 164, 0.5);
+  --color-primary-hover: #802e90;
+  --color-primary-hover-bg: #802e90;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(205, 104, 224, 0.5);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Dark theme - Purple */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(219, 144, 232, 0.1875);
+    --color-primary: #db90e8;
+    --color-primary-bg: #9236a4;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(219, 144, 232, 0.5);
+    --color-primary-hover: #e7b6ee;
+    --color-primary-hover-bg: #aa40bf;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(219, 144, 232, 0.375);
+    --color-primary-inverse: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(219, 144, 232, 0.1875);
+  --color-primary: #db90e8;
+  --color-primary-bg: #9236a4;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(219, 144, 232, 0.5);
+  --color-primary-hover: #e7b6ee;
+  --color-primary-hover-bg: #aa40bf;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(219, 144, 232, 0.375);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}

package/src/palettes/red.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Red
+  Overrides primary color variables for the red palette
+*/
+
+/* Light theme - Red */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(240, 96, 72, 0.25);
+  --color-primary: #c52f21;
+  --color-primary-bg: #c52f21;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(197, 47, 33, 0.5);
+  --color-primary-hover: #9b2318;
+  --color-primary-hover-bg: #af291d;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(240, 96, 72, 0.5);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Dark theme - Red */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(243, 143, 121, 0.1875);
+    --color-primary: #f38f79;
+    --color-primary-bg: #c52f21;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(243, 143, 121, 0.5);
+    --color-primary-hover: #f5b7a8;
+    --color-primary-hover-bg: #ee402e;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(243, 143, 121, 0.375);
+    --color-primary-inverse: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(243, 143, 121, 0.1875);
+  --color-primary: #f38f79;
+  --color-primary-bg: #c52f21;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(243, 143, 121, 0.5);
+  --color-primary-hover: #f5b7a8;
+  --color-primary-hover-bg: #ee402e;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(243, 143, 121, 0.375);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}

package/src/palettes/sand.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Sand
+  Overrides primary color variables for the sand palette
+*/
+
+/* Light theme - Sand */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(181, 157, 119, 0.25);
+  --color-primary: #6b5733;
+  --color-primary-bg: #e6d5b8;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(107, 87, 51, 0.5);
+  --color-primary-hover: #544229;
+  --color-primary-hover-bg: #ebdcc3;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(181, 157, 119, 0.5);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+/* Dark theme - Sand */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(201, 178, 140, 0.1875);
+    --color-primary: #c9b28c;
+    --color-primary-bg: #e6d5b8;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(201, 178, 140, 0.5);
+    --color-primary-hover: #dcc6a5;
+    --color-primary-hover-bg: #ebdcc3;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(201, 178, 140, 0.375);
+    --color-primary-inverse: #000;
+    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(201, 178, 140, 0.1875);
+  --color-primary: #c9b28c;
+  --color-primary-bg: #e6d5b8;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(201, 178, 140, 0.5);
+  --color-primary-hover: #dcc6a5;
+  --color-primary-hover-bg: #ebdcc3;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(201, 178, 140, 0.375);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}

package/src/palettes/slate.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Slate
+  Overrides primary color variables for the slate palette
+*/
+
+/* Light theme - Slate */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(130, 146, 170, 0.25);
+  --color-primary: #48536b;
+  --color-primary-bg: #48536b;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(72, 83, 107, 0.5);
+  --color-primary-hover: #383f54;
+  --color-primary-hover-bg: #383f54;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(130, 146, 170, 0.5);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Dark theme - Slate */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(159, 176, 200, 0.1875);
+    --color-primary: #9fb0c8;
+    --color-primary-bg: #48536b;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(159, 176, 200, 0.5);
+    --color-primary-hover: #bdcce0;
+    --color-primary-hover-bg: #525f7a;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(159, 176, 200, 0.375);
+    --color-primary-inverse: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(159, 176, 200, 0.1875);
+  --color-primary: #9fb0c8;
+  --color-primary-bg: #48536b;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(159, 176, 200, 0.5);
+  --color-primary-hover: #bdcce0;
+  --color-primary-hover-bg: #525f7a;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(159, 176, 200, 0.375);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}

package/src/palettes/violet.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Violet
+  Overrides primary color variables for the violet palette
+*/
+
+/* Light theme - Violet */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(167, 128, 212, 0.25);
+  --color-primary: #7540bf;
+  --color-primary-bg: #7540bf;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(117, 64, 191, 0.5);
+  --color-primary-hover: #6935b3;
+  --color-primary-hover-bg: #6935b3;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(167, 128, 212, 0.5);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Dark theme - Violet */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(189, 159, 223, 0.1875);
+    --color-primary: #bd9fdf;
+    --color-primary-bg: #7540bf;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(189, 159, 223, 0.5);
+    --color-primary-hover: #d3bfe8;
+    --color-primary-hover-bg: #8352c5;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(189, 159, 223, 0.375);
+    --color-primary-inverse: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(189, 159, 223, 0.1875);
+  --color-primary: #bd9fdf;
+  --color-primary-bg: #7540bf;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(189, 159, 223, 0.5);
+  --color-primary-hover: #d3bfe8;
+  --color-primary-hover-bg: #8352c5;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(189, 159, 223, 0.375);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}

package/src/palettes/yellow.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Yellow
+  Overrides primary color variables for the yellow palette
+*/
+
+/* Light theme - Yellow */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(209, 188, 0, 0.25);
+  --color-primary: #8a7a00;
+  --color-primary-bg: #fcf19c;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(138, 122, 0, 0.5);
+  --color-primary-hover: #6b5f00;
+  --color-primary-hover-bg: #fdf2b4;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(209, 188, 0, 0.5);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}
+
+/* Dark theme - Yellow */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(233, 212, 0, 0.1875);
+    --color-primary: #e9d400;
+    --color-primary-bg: #fcf19c;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(233, 212, 0, 0.5);
+    --color-primary-hover: #f7ec58;
+    --color-primary-hover-bg: #fcf4b6;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(233, 212, 0, 0.375);
+    --color-primary-inverse: #000;
+    --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(233, 212, 0, 0.1875);
+  --color-primary: #e9d400;
+  --color-primary-bg: #fcf19c;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(233, 212, 0, 0.5);
+  --color-primary-hover: #f7ec58;
+  --color-primary-hover-bg: #fcf4b6;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(233, 212, 0, 0.375);
+  --color-primary-inverse: #000;
+  --switch-thumb-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.25);
+}

package/src/palettes/zinc.css

@@ -0,0 +1,56 @@
+/*
+  Semanticus CSS Palette: Zinc
+  Overrides primary color variables for the zinc palette
+*/
+
+/* Light theme - Zinc */
+[data-theme="light"],
+:root:not([data-theme="dark"]),
+:host(:not([data-theme="dark"])) {
+  --color-text-selection: rgba(127, 139, 158, 0.25);
+  --color-primary: #525f7a;
+  --color-primary-bg: #525f7a;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(82, 95, 122, 0.5);
+  --color-primary-hover: #424b61;
+  --color-primary-hover-bg: #424b61;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(127, 139, 158, 0.5);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}
+
+/* Dark theme - Zinc */
+@media only screen and (prefers-color-scheme: dark) {
+  :root:not([data-theme]),
+  :host(:not([data-theme])) {
+    --color-text-selection: rgba(155, 168, 189, 0.1875);
+    --color-primary: #9ba8bd;
+    --color-primary-bg: #525f7a;
+    --color-primary-border: var(--color-primary-bg);
+    --color-primary-underline: rgba(155, 168, 189, 0.5);
+    --color-primary-hover: #bac5d4;
+    --color-primary-hover-bg: #5d6b89;
+    --color-primary-hover-border: var(--color-primary-hover-bg);
+    --color-primary-hover-underline: var(--color-primary-hover);
+    --color-primary-focus: rgba(155, 168, 189, 0.375);
+    --color-primary-inverse: #fff;
+    --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+  }
+}
+
+[data-theme="dark"] {
+  --color-text-selection: rgba(155, 168, 189, 0.1875);
+  --color-primary: #9ba8bd;
+  --color-primary-bg: #525f7a;
+  --color-primary-border: var(--color-primary-bg);
+  --color-primary-underline: rgba(155, 168, 189, 0.5);
+  --color-primary-hover: #bac5d4;
+  --color-primary-hover-bg: #5d6b89;
+  --color-primary-hover-border: var(--color-primary-hover-bg);
+  --color-primary-hover-underline: var(--color-primary-hover);
+  --color-primary-focus: rgba(155, 168, 189, 0.375);
+  --color-primary-inverse: #fff;
+  --switch-thumb-shadow: 0 0 0 rgba(0, 0, 0, 0);
+}

package/src/semantics/_aria-busy.css

@@ -0,0 +1,34 @@
+/**
+ * Loading ([aria-busy=true])
+ */
+[aria-busy=true]:not(input, select, textarea, html, form) {
+  white-space: nowrap;
+
+  &::before {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    background-image: var(--icon-loading);
+    background-size: 1em auto;
+    background-repeat: no-repeat;
+    content: "";
+    vertical-align: -0.125em;
+  }
+
+  &:not(:empty)::before {
+    margin-inline-end: calc(var(--spacing) * 0.5);
+  }
+
+  &:empty {
+    text-align: center;
+  }
+}
+
+button[aria-busy=true],
+[type=submit][aria-busy=true],
+[type=button][aria-busy=true],
+[type=reset][aria-busy=true],
+[role=button][aria-busy=true],
+a[aria-busy=true] {
+  pointer-events: none;
+}

package/src/semantics/_article.css

@@ -0,0 +1,6 @@
+/**
+ * Article (<article>)
+ * Represents a self-contained composition that can stand alone
+ * and be independently distributed (blog post, widget, etc.)
+ * Styling is provided by the .card class
+ */

package/src/semantics/_body.css

@@ -0,0 +1,10 @@
+body {
+  width: 100%;
+  margin: 0;
+
+  & > header,
+  & > main,
+  & > footer {
+    padding-block: var(--block-spacing-vertical);
+  }
+}

package/src/semantics/_button.css

@@ -0,0 +1,106 @@
+/**
+ * Button
+ */
+button {
+  margin: 0;
+  overflow: visible;
+  font-family: inherit;
+  text-transform: none;
+}
+
+button,
+[type=submit],
+[type=reset],
+[type=button] {
+  -webkit-appearance: button;
+}
+
+button,
+[type=submit],
+[type=reset],
+[type=button],
+[type=file]::file-selector-button,
+[role=button] {
+  --color-background: var(--color-primary-bg);
+  --border-color: var(--color-primary-border);
+  --color-text: var(--color-primary-inverse);
+  --shadow-lg: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
+  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  border: var(--border-width) solid var(--border-color);
+  border-radius: var(--border-radius);
+  outline: none;
+  background-color: var(--color-background);
+  box-shadow: var(--shadow-lg);
+  color: var(--color-text);
+  font-weight: var(--font-weight);
+  font-size: 1rem;
+  line-height: var(--line-height);
+  text-align: center;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+}
+
+button:is([aria-current]:not([aria-current=false])), button:is(:hover, :active, :focus),
+[type=submit]:is([aria-current]:not([aria-current=false])),
+[type=submit]:is(:hover, :active, :focus),
+[type=reset]:is([aria-current]:not([aria-current=false])),
+[type=reset]:is(:hover, :active, :focus),
+[type=button]:is([aria-current]:not([aria-current=false])),
+[type=button]:is(:hover, :active, :focus),
+[type=file]::file-selector-button:is(:hover, :active, :focus),
+[role=button]:is([aria-current]:not([aria-current=false])),
+[role=button]:is(:hover, :active, :focus) {
+  --color-background: var(--color-primary-hover-bg);
+  --border-color: var(--color-primary-hover-border);
+  --shadow-lg: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
+  --color-text: var(--color-primary-inverse);
+}
+
+button:focus, button:is([aria-current]:not([aria-current=false])):focus,
+[type=submit]:focus,
+[type=submit]:is([aria-current]:not([aria-current=false])):focus,
+[type=reset]:focus,
+[type=reset]:is([aria-current]:not([aria-current=false])):focus,
+[type=button]:focus,
+[type=button]:is([aria-current]:not([aria-current=false])):focus,
+[type=file]::file-selector-button:focus,
+[role=button]:focus,
+[role=button]: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-primary-focus);
+}
+
+[type=submit],
+[type=reset],
+[type=button] {
+  margin-bottom: var(--spacing);
+}
+
+[type=reset],
+[type=file]::file-selector-button,
+[aria-label="Close"] {
+  --color-background: var(--color-secondary-bg);
+  --border-color: var(--color-secondary-border);
+  --color-text: var(--color-secondary-inverse);
+  cursor: pointer;
+}
+
+[type=reset]:is([aria-current]:not([aria-current=false]), :hover, :active, :focus),
+[type=file]::file-selector-button:is(:hover, :active, :focus) {
+  --color-background: var(--color-secondary-hover-bg);
+  --border-color: var(--color-secondary-hover-border);
+  --color-text: var(--color-secondary-inverse);
+}
+
+[type=reset]:focus,
+[type=reset]:is([aria-current]:not([aria-current=false])):focus,
+[type=file]::file-selector-button: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);
+}
+
+:is(button, [type=submit], [type=reset], [type=button], [role=button])[disabled],
+fieldset[disabled] :is(button, [type=submit], [type=button], [type=reset], [role=button]) {
+  opacity: 0.5;
+  pointer-events: none;
+}

package/src/semantics/_code.css

@@ -0,0 +1,50 @@
+/**
+ * Code
+ */
+pre,
+code,
+kbd,
+samp {
+  font-size: 0.875em;
+  font-family: var(--font-family);
+  border-radius: var(--border-radius);
+  background: var(--color-code-bg);
+  color: var(--color-code-text);
+  font-weight: var(--font-weight);
+  line-height: initial;
+}
+
+code,
+kbd,
+samp {
+  display: inline-block;
+  padding: 0.375rem;
+}
+
+pre {
+  -ms-overflow-style: scrollbar;
+  overflow: auto;
+  display: block;
+  margin-bottom: var(--spacing);
+  overflow-x: auto;
+
+  & code,
+  & samp {
+    font-size: inherit;
+    font-family: inherit;
+  }
+
+  & > code,
+  & > samp {
+    display: block;
+    padding: var(--spacing);
+    background: none;
+    line-height: var(--line-height);
+  }
+}
+
+kbd {
+  background-color: var(--color-kbd-bg);
+  color: var(--color-kbd-text);
+  vertical-align: baseline;
+}