@semanticus/semanticus-css 0.3.0

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

@@ -0,0 +1,7 @@
+.font-family {
+  font-family: var(--font-family) !important;
+}
+
+.font-monospace {
+  font-family: var(--font-family-monospace) !important;
+}

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

@@ -0,0 +1,38 @@
+.fs-1 {
+  font-size: var(--fs-1) !important;
+}
+
+.fs-2 {
+  font-size: var(--fs-2) !important;
+}
+
+.fs-3 {
+  font-size: var(--fs-3) !important;
+}
+
+.fs-4 {
+  font-size: var(--fs-4) !important;
+}
+
+.fs-5 {
+  font-size: var(--fs-5) !important;
+}
+
+.fs-6 {
+  font-size: var(--fs-6) !important;
+}
+
+@media (min-width: 1200px) {
+  .fs-1 {
+    font-size: 2.5rem !important;
+  }
+  .fs-2 {
+    font-size: 2rem !important;
+  }
+  .fs-3 {
+    font-size: 1.75rem !important;
+  }
+  .fs-4 {
+    font-size: 1.5rem !important;
+  }
+}

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

@@ -0,0 +1,51 @@
+.fst-italic {
+  font-style: italic !important;
+}
+
+.fst-normal {
+  font-style: normal !important;
+}
+
+.fw-lighter {
+  font-weight: lighter !important;
+}
+
+.fw-light {
+  font-weight: 300 !important;
+}
+
+.fw-normal {
+  font-weight: 400 !important;
+}
+
+.fw-medium {
+  font-weight: 500 !important;
+}
+
+.fw-semibold {
+  font-weight: 600 !important;
+}
+
+.fw-bold {
+  font-weight: 700 !important;
+}
+
+.fw-bolder {
+  font-weight: bolder !important;
+}
+
+.lh-1 {
+  line-height: 1 !important;
+}
+
+.lh-sm {
+  line-height: 1.25 !important;
+}
+
+.lh-base {
+  line-height: 1.5 !important;
+}
+
+.lh-lg {
+  line-height: 2 !important;
+}

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

@@ -0,0 +1,141 @@
+.text-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.align-baseline {
+  vertical-align: baseline !important;
+}
+
+.align-top {
+  vertical-align: top !important;
+}
+
+.align-middle {
+  vertical-align: middle !important;
+}
+
+.align-bottom {
+  vertical-align: bottom !important;
+}
+
+.align-text-bottom {
+  vertical-align: text-bottom !important;
+}
+
+.align-text-top {
+  vertical-align: text-top !important;
+}
+
+.text-start {
+  text-align: left !important;
+}
+
+.text-end {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.text-decoration-none {
+  text-decoration: none !important;
+}
+
+.text-decoration-underline {
+  text-decoration: underline !important;
+}
+
+.text-decoration-line-through {
+  text-decoration: line-through !important;
+}
+
+.text-lowercase {
+  text-transform: lowercase !important;
+}
+
+.text-uppercase {
+  text-transform: uppercase !important;
+}
+
+.text-capitalize {
+  text-transform: capitalize !important;
+}
+
+.text-wrap {
+  white-space: normal !important;
+}
+
+.text-nowrap {
+  white-space: nowrap !important;
+}
+
+/* rtl:begin:remove */
+.text-break {
+  word-wrap: break-word !important;
+}
+
+/* rtl:end:remove */
+
+@media (min-width: 576px) {
+  .text-sm-start {
+    text-align: left !important;
+  }
+  .text-sm-end {
+    text-align: right !important;
+  }
+  .text-sm-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 768px) {
+  .text-md-start {
+    text-align: left !important;
+  }
+  .text-md-end {
+    text-align: right !important;
+  }
+  .text-md-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 992px) {
+  .text-lg-start {
+    text-align: left !important;
+  }
+  .text-lg-end {
+    text-align: right !important;
+  }
+  .text-lg-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1200px) {
+  .text-xl-start {
+    text-align: left !important;
+  }
+  .text-xl-end {
+    text-align: right !important;
+  }
+  .text-xl-center {
+    text-align: center !important;
+  }
+}
+
+@media (min-width: 1400px) {
+  .text-xxl-start {
+    text-align: left !important;
+  }
+  .text-xxl-end {
+    text-align: right !important;
+  }
+  .text-xxl-center {
+    text-align: center !important;
+  }
+}
+

package/src/variants/_card.css

@@ -0,0 +1,41 @@
+/**
+ * Card (.card)
+ * A container component for grouped content with visual card styling
+ * Can be applied to any element (article, div, section, etc.)
+ */
+.card {
+  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 {
+    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/_container.css

@@ -0,0 +1,36 @@
+/**
+ * Container
+ * Responsive width container with horizontal padding
+ */
+.container,
+.container-fluid {
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+  padding-right: var(--spacing);
+  padding-left: var(--spacing);
+}
+
+.container {
+  @media (min-width: 576px) {
+    max-width: 510px;
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 700px;
+  }
+
+  @media (min-width: 1024px) {
+    max-width: 950px;
+  }
+
+  @media (min-width: 1280px) {
+    max-width: 1200px;
+  }
+
+  @media (min-width: 1536px) {
+    max-width: 1450px;
+  }
+}

package/src/variants/_contrast.css

@@ -0,0 +1,50 @@
+/**
+ * Contrast variant
+ * Used on links, buttons, and accordion elements
+ */
+
+/* Links */
+:where(a:not([role="button"])),
+[role="link"] {
+  &.contrast {
+    --color-text: var(--color-contrast);
+    --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);
+    }
+  }
+}
+
+/* Buttons */
+:is(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([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);
+    }
+
+    &:focus,
+    &: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

@@ -0,0 +1,58 @@
+/**
+ * Ghost variant
+ * Transparent background with colored text/border
+ * Used on buttons and accordion elements
+ */
+
+/* Buttons */
+:is(button, [type="submit"], [type="button"], [role="button"]) {
+  &.ghost {
+    --color-background: transparent;
+    --color-text: var(--color-primary);
+    --border-color: var(--color-primary);
+
+    &: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);
+    }
+
+    &.secondary {
+      --color-text: var(--color-secondary);
+      --border-color: var(--color-secondary);
+
+      &:is([aria-current]:not([aria-current="false"]), :hover, :active, :focus) {
+        --color-text: var(--color-secondary-hover);
+        --border-color: var(--color-secondary-hover);
+      }
+    }
+
+    &.contrast {
+      --color-text: var(--color-contrast);
+      --border-color: var(--color-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: var(--color-secondary);
+  --border-color: var(--color-secondary);
+
+  &: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/_secondary.css

@@ -0,0 +1,38 @@
+/**
+ * Secondary variant
+ * Used on links, buttons, and form elements
+ */
+
+/* Links */
+:where(a:not([role="button"])),
+[role="link"] {
+  &.secondary {
+    --color-text: var(--color-secondary);
+    --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);
+    }
+  }
+}
+
+/* Buttons */
+:is(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);
+
+  cursor: pointer;
+}
+
+: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/_striped.css

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

package/src/variants/index.css

@@ -0,0 +1,6 @@
+/**
+ * Semanticus CSS Variants
+ * Class-based variant styles that extend semantic
+ */
+
+@import "./modules.css";

package/src/variants/modules.css

@@ -0,0 +1,12 @@
+/**
+ * Semanticus CSS Variants
+ * Class-based variant styles that extend semantic elements
+ * Used by the full version which imports global variables, normalize, and semantics separately
+ */
+
+@import "./_card.css";
+@import "./_container.css";
+@import "./_secondary.css";
+@import "./_contrast.css";
+@import "./_ghost.css";
+@import "./_striped.css";