@semanticus/semanticus-css 0.8.0 → 0.9.0

package/src/semantics/_role-group-search.css

@@ -1,129 +0,0 @@
-/**
- * Group ([role="group"], [role="search"])
- */
-[role="search"],
-[role="group"] {
-  display: inline-flex;
-  position: relative;
-  width: 100%;
-  margin-bottom: var(--spacing);
-  border-radius: var(--border-radius);
-  box-shadow: var(--group-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  vertical-align: middle;
-  transition: box-shadow var(--transition);
-
-  & > *:not(details),
-  & input:not([type="checkbox"], [type="radio"]),
-  & select {
-    position: relative;
-    flex: 1 1 auto;
-    margin-bottom: 0;
-
-    &:not(:first-child) {
-      margin-left: calc(var(--border-width) * -1);
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
-
-    &:not(:last-child) {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    &:focus {
-      z-index: 2;
-    }
-  }
-
-  & button,
-  & [type="submit"],
-  & [type="reset"],
-  & [type="button"],
-  & [role="button"] {
-    width: auto;
-  }
-
-  /* Details dropdown inside group */
-  & > details {
-    position: relative;
-    margin-bottom: 0;
-    /* Constrain details height to just the button, not the dropdown menu */
-    height: calc(1rem * var(--line-height) + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
-    overflow: visible;
-
-    &:not(:first-child) {
-      margin-left: calc(var(--border-width) * -1);
-
-      & > summary {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    &:not(:last-child) > summary {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    & > summary:focus {
-      z-index: 2;
-    }
-
-    /* Ensure consistent height with other form elements in the group */
-    & > summary[role="button"] {
-      display: flex;
-      align-items: center;
-      height: 100%;
-
-      &::after {
-        height: calc(1rem * var(--line-height, 1.5));
-      }
-    }
-  }
-}
-
-@supports selector(:has(*)) {
-  [role="search"],
-  [role="group"] {
-    &:has(button:focus, [type="submit"]:focus, [type="button"]:focus, [role="button"]:focus) {
-      --group-shadow: var(--group-shadow-focus-with-button);
-
-      & input:not([type="checkbox"], [type="radio"]),
-      & select {
-        border-color: transparent;
-      }
-    }
-
-    &:has(input:not([type="submit"], [type="button"]):focus, select:focus) {
-      --group-shadow: var(--group-shadow-focus-with-input);
-
-      & button,
-      & [type="submit"],
-      & [type="button"],
-      & [role="button"] {
-        --button-shadow: 0 0 0 var(--border-width) var(--color-primary-border);
-        --button-shadow-hover: 0 0 0 var(--border-width) var(--color-primary-hover-border);
-      }
-    }
-
-    & button:focus,
-    & [type="submit"]:focus,
-    & [type="reset"]:focus,
-    & [type="button"]:focus,
-    & [role="button"]:focus {
-      box-shadow: none;
-    }
-  }
-}
-
-[role="search"] {
-  & > :first-child {
-    border-top-left-radius: 5rem;
-    border-bottom-left-radius: 5rem;
-  }
-
-  & > :last-child {
-    border-top-right-radius: 5rem;
-    border-bottom-right-radius: 5rem;
-  }
-}

package/src/semantics/_section.css

@@ -1,9 +0,0 @@
-/**
- * Section
- */
-section {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  margin-bottom: var(--block-spacing-vertical);
-}

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/variants/_card.css

@@ -1,45 +0,0 @@
-/**
- * Card (.card)
- * A container component for grouped content with visual card styling
- * Can be applied to any element (article, div, section, etc.)
- */
-.card {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  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 {
-    width: calc(100% + var(--block-spacing-horizontal) * 2);
-    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/_panel.css

@@ -1,18 +0,0 @@
-/**
- * Panel akin to a flat card.
- */
-.panel {
-  --block-spacing-vertical: calc(var(--spacing) * var(--responsive-multiplier));
-  --block-spacing-horizontal: calc(var(--spacing) * var(--responsive-multiplier));
-
-  --color-background: var(--card-bg);
-  --border-color: var(--card-border);
-  --color-text: var(--color-text);
-
-  background-color: var(--color-background);
-  border-radius: var(--border-radius);
-  border: var(--border-width) solid var(--border-color);
-  color: var(--color-text);
-  margin-bottom: var(--block-spacing-vertical);
-  padding: var(--block-spacing-vertical) var(--block-spacing-horizontal);
-}