@semanticus/semanticus-css 0.8.0 → 1.0.0

package/src/semantics/_typography.css

@@ -1,146 +0,0 @@
-/**
- * Typography
- */
-b,
-strong {
-  font-weight: bolder;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 0.75em;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-address,
-blockquote,
-dl,
-ol,
-p,
-pre,
-table,
-ul {
-  margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
-  font-style: normal;
-  font-weight: var(--font-weight);
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: var(--typography-spacing-vertical);
-  color: var(--color-text);
-  font-weight: var(--font-weight);
-  font-size: var(--font-size);
-  line-height: var(--line-height);
-  font-family: var(--font-family);
-}
-
-/* Headings - progressive lightness using color-mix */
-h1 { --color-text: var(--color-heading-base); }
-h2 { --color-text: color-mix(in srgb, var(--color-heading-base), white 12%); }
-h3 { --color-text: color-mix(in srgb, var(--color-heading-base), white 22%); }
-h4 { --color-text: color-mix(in srgb, var(--color-heading-base), white 32%); }
-h5 { --color-text: color-mix(in srgb, var(--color-heading-base), white 45%); }
-h6 { --color-text: color-mix(in srgb, var(--color-heading-base), white 55%); }
-
-/* Dark mode headings - base is lightest, mix in black for lower levels */
-[data-theme="dark"] h1 { --color-text: var(--color-heading-base); }
-[data-theme="dark"] h2 { --color-text: color-mix(in srgb, var(--color-heading-base), black 8%); }
-[data-theme="dark"] h3 { --color-text: color-mix(in srgb, var(--color-heading-base), black 18%); }
-[data-theme="dark"] h4 { --color-text: color-mix(in srgb, var(--color-heading-base), black 28%); }
-[data-theme="dark"] h5 { --color-text: color-mix(in srgb, var(--color-heading-base), black 38%); }
-[data-theme="dark"] h6 { --color-text: color-mix(in srgb, var(--color-heading-base), black 48%); }
-
-:where(article, address, blockquote, dl, figure, form, ol, p, pre, table, ul, hr) ~ :is(h1, h2, h3, h4, h5, h6) {
-  margin-top: var(--typography-spacing-top);
-}
-
-p {
-  margin-bottom: var(--typography-spacing-vertical);
-}
-
-hgroup {
-  margin-bottom: var(--typography-spacing-vertical);
-
-  & > * {
-    margin-top: 0;
-    margin-bottom: 0;
-
-    &:not(:first-child):last-child {
-      color: color-mix(in srgb, var(--color-text), rgb(128, 128, 128) 70%);
-      --font-weight: unset;
-      font-size: 1rem;
-    }
-  }
-}
-
-:where(ol, ul) li {
-  margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
-}
-
-:where(dl, ol, ul) :where(dl, ol, ul) {
-  margin: 0;
-  margin-top: calc(var(--typography-spacing-vertical) * 0.25);
-}
-
-ul li {
-  list-style: square;
-}
-
-mark {
-  padding: 0.125rem 0.25rem;
-  background-color: var(--color-mark-bg);
-  color: var(--color-mark-text);
-  vertical-align: baseline;
-}
-
-blockquote {
-  display: block;
-  margin: var(--typography-spacing-vertical) 0;
-  padding: var(--spacing);
-  border-right: none;
-  border-left: 0.25rem solid var(--blockquote-border-color);
-  border-inline-start: 0.25rem solid var(--blockquote-border-color);
-  border-inline-end: none;
-
-  & footer {
-    margin-top: calc(var(--typography-spacing-vertical) * 0.5);
-    color: var(--blockquote-footer-color);
-  }
-}
-
-abbr[title] {
-  border-bottom: 1px dotted;
-  text-decoration: none;
-  cursor: help;
-}
-
-ins {
-  color: rgb(var(--color-success-rgb));
-  text-decoration: none;
-}
-
-del {
-  color: rgb(var(--color-danger-rgb));
-}
-
-::selection {
-  background-color: var(--color-text-selection);
-}

package/src/utilities/colors/_background-colors.css

@@ -1,248 +0,0 @@
-.text-bg-primary {
-  --color-text: var(--color-primary-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-secondary {
-  --color-text: var(--color-secondary-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-success {
-  --color-text: var(--color-success-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-success-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-info {
-  --color-text: var(--color-info-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-info-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-warning {
-  --color-text: var(--color-warning-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-danger {
-  --color-text: var(--color-danger-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-contrast {
-  --color-text: var(--color-contrast-inverse) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: var(--color-text) !important;
-  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity, 1)) !important;
-}
-
-.text-bg-primary-subtle {
-  --color-text: rgb(var(--color-primary-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-primary-emphasis-rgb)) !important;
-  background-color: var(--color-primary-bg-subtle) !important;
-}
-
-.text-bg-secondary-subtle {
-  --color-text: rgb(var(--color-secondary-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-secondary-emphasis-rgb)) !important;
-  background-color: var(--color-secondary-bg-subtle) !important;
-}
-
-.text-bg-success-subtle {
-  --color-text: rgb(var(--color-success-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-success-emphasis-rgb)) !important;
-  background-color: var(--color-success-bg-subtle) !important;
-}
-
-.text-bg-info-subtle {
-  --color-text: rgb(var(--color-info-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-info-emphasis-rgb)) !important;
-  background-color: var(--color-info-bg-subtle) !important;
-}
-
-.text-bg-warning-subtle {
-  --color-text: rgb(var(--color-warning-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-warning-emphasis-rgb)) !important;
-  background-color: var(--color-warning-bg-subtle) !important;
-}
-
-.text-bg-danger-subtle {
-  --color-text: rgb(var(--color-danger-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-danger-emphasis-rgb)) !important;
-  background-color: var(--color-danger-bg-subtle) !important;
-}
-
-.text-bg-contrast-subtle {
-  --color-text: rgb(var(--color-contrast-emphasis-rgb)) !important;
-  --color-heading-base: color-mix(in srgb, var(--color-text), black 18%);
-
-  color: rgb(var(--color-contrast-emphasis-rgb)) !important;
-  background-color: var(--color-contrast-bg-subtle) !important;
-}
-
-.bg-primary {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-primary-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-secondary {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-secondary-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-success {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-success-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-info {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-info-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-warning {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-warning-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-danger {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-danger-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-contrast {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-contrast-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-body {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-body-bg-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-transparent {
-  --bg-opacity: 1;
-
-  background-color: transparent !important;
-}
-
-.bg-body-secondary {
-  --bg-opacity: 1;
-
-  background-color: rgba(var(--color-secondary-bg-rgb), var(--bg-opacity)) !important;
-}
-
-.bg-opacity-10 {
-  --bg-opacity: 0.1;
-}
-
-.bg-opacity-25 {
-  --bg-opacity: 0.25;
-}
-
-.bg-opacity-50 {
-  --bg-opacity: 0.5;
-}
-
-.bg-opacity-75 {
-  --bg-opacity: 0.75;
-}
-
-.bg-opacity-100 {
-  --bg-opacity: 1;
-}
-
-.bg-primary-subtle {
-  background-color: var(--color-primary-bg-subtle) !important;
-}
-
-.bg-secondary-subtle {
-  background-color: var(--color-secondary-bg-subtle) !important;
-}
-
-.bg-success-subtle {
-  background-color: var(--color-success-bg-subtle) !important;
-}
-
-.bg-info-subtle {
-  background-color: var(--color-info-bg-subtle) !important;
-}
-
-.bg-warning-subtle {
-  background-color: var(--color-warning-bg-subtle) !important;
-}
-
-.bg-danger-subtle {
-  background-color: var(--color-danger-bg-subtle) !important;
-}
-
-.bg-contrast-subtle {
-  background-color: var(--color-contrast-bg-subtle) !important;
-}
-
-.bg-gradient {
-  background-image: var(--gradient) !important;
-}
-
-/* Dark mode: headings should be lighter than inverse text (mix in white) */
-@media (prefers-color-scheme: dark) {
-  .text-bg-primary,
-  .text-bg-secondary,
-  .text-bg-success,
-  .text-bg-info,
-  .text-bg-warning,
-  .text-bg-danger,
-  .text-bg-contrast {
-    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
-  }
-}
-
-[data-theme="dark"] {
-  .text-bg-primary,
-  .text-bg-secondary,
-  .text-bg-success,
-  .text-bg-info,
-  .text-bg-warning,
-  .text-bg-danger,
-  .text-bg-contrast {
-    --color-heading-base: color-mix(in srgb, var(--color-text), white 75%);
-  }
-}