@semanticus/semanticus-css 2.2.0 → 3.0.0

package/src/semantics/elements/_type-search.css

@@ -1,30 +0,0 @@
-input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
-  background-image: var(--icon-search);
-  background-position: left calc(var(--input-spacing-horizontal) + 0.125rem) center;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-
-  &[aria-invalid] {
-    padding-inline-start: calc(var(--input-spacing-horizontal) + 1.75rem);
-    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: left calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, right calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
-  }
-
-  &[aria-invalid=false] {
-    background-image: var(--icon-search), var(--icon-valid);
-  }
-
-  &[aria-invalid=true] {
-    background-image: var(--icon-search), var(--icon-invalid);
-  }
-}
-
-[dir=rtl] input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=search] {
-  background-position: right calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center;
-
-  &[aria-invalid] {
-    /* Using calc with var to workaround LightningCSS minification bug with 3-value syntax */
-    background-position: right calc(var(--input-spacing-horizontal) * 0 + 1.125rem) center, left calc(var(--input-spacing-horizontal) * 0 + 0.75rem) center;
-  }
-}

package/src/variables/_elements.css

@@ -1,195 +0,0 @@
-/* ==========================================================================
-   Element-Scoped Variables
-   ==========================================================================
-
-   These selectors override global :root variables on a per-element basis
-   so each component can have its own defaults (font-size, weight,
-   line-height, border-radius, etc.) without class-name bloat.
-
-   This enables semantic HTML elements to have appropriate styling
-   out of the box.
-   ========================================================================== */
-
-/* Small text */
-small {
-  --font-size: 80%; /* modern-normalize */
-}
-
-/* ==========================================================================
-   Heading Typography
-   ========================================================================== */
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  --font-weight: 700;
-}
-
-h1 {
-  --font-size: var(--h1-size);
-  --line-height: 1.125;
-  --heading-gap-top: 3rem;
-}
-
-h2 {
-  --font-size: var(--h2-size);
-  --line-height: 1.15;
-  --heading-gap-top: 2.625rem;
-}
-
-h3 {
-  --font-size: var(--h3-size);
-  --line-height: 1.175;
-  --heading-gap-top: 2.25rem;
-}
-
-h4 {
-  --font-size: var(--h4-size);
-  --line-height: 1.2;
-  --heading-gap-top: 1.874rem;
-}
-
-h5 {
-  --font-size: var(--h5-size);
-  --line-height: 1.225;
-  --heading-gap-top: 1.6875rem;
-}
-
-h6 {
-  --font-size: var(--h6-size);
-  --line-height: 1.25;
-  --heading-gap-top: 1.5rem;
-}
-
-/* ==========================================================================
-   Table Elements
-   ========================================================================== */
-
-thead th,
-thead td,
-tfoot th,
-tfoot td {
-  --font-weight: 600;
-  --border-size: 0.1875rem;
-}
-
-/* ==========================================================================
-   Code Elements
-   ========================================================================== */
-
-pre,
-code,
-kbd,
-samp {
-  --font-family: var(--font-family-monospace);
-}
-
-kbd {
-  --font-weight: bolder;
-}
-
-/* ==========================================================================
-   Form Elements
-   ========================================================================== */
-
-/* Text-style form inputs use a thinner outline */
-input:not(
-    [type="submit"],
-    [type="button"],
-    [type="reset"],
-    [type="checkbox"],
-    [type="radio"],
-    [type="file"]
-  ),
-:where(select, textarea) {
-  --outline-size: 0.0625rem;
-}
-
-/* Search inputs are pill-shaped */
-[type="search"] {
-  --radius: 5rem;
-}
-
-/* Checkboxes & radios use a slightly thicker border */
-[type="checkbox"],
-[type="radio"] {
-  --border-size: 0.125rem;
-}
-
-/* Toggle switches get an even thicker border */
-[type="checkbox"][role="switch"] {
-  --border-size: 0.1875rem;
-}
-
-/* Search role wrappers are pill-shaped */
-[role="search"] {
-  --radius: 5rem;
-}
-
-/* ==========================================================================
-   Button Group Focus Ring Overrides
-   ========================================================================== */
-
-/* Secondary button focus in groups */
-[role="search"]:has(
-    button.secondary:focus,
-    [type="submit"].secondary:focus,
-    [type="button"].secondary:focus,
-    [role="button"].secondary:focus
-  ),
-[role="group"]:has(
-    button.secondary:focus,
-    [type="submit"].secondary:focus,
-    [type="button"].secondary:focus,
-    [role="button"].secondary:focus
-  ) {
-  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
-}
-
-/* Contrast button focus in groups */
-[role="search"]:has(
-    button.contrast:focus,
-    [type="submit"].contrast:focus,
-    [type="button"].contrast:focus,
-    [role="button"].contrast:focus
-  ),
-[role="group"]:has(
-    button.contrast:focus,
-    [type="submit"].contrast:focus,
-    [type="button"].contrast:focus,
-    [role="button"].contrast:focus
-  ) {
-  --group-shadow-focus-button: 0 0 0 var(--outline-size) var(--color-contrast-focus-ring);
-}
-
-/* Buttons inside search/group combos get wider horizontal padding */
-[role="search"] button,
-[role="search"] [type="submit"],
-[role="search"] [type="button"],
-[role="search"] [role="button"],
-[role="group"] button,
-[role="group"] [type="submit"],
-[role="group"] [type="button"],
-[role="group"] [role="button"] {
-  --input-spacing-horizontal: 1rem;
-}
-
-/* ==========================================================================
-   Form Element Accent Color
-   ========================================================================== */
-
-/* Native browser accent-color for checkboxes, radios, and range sliders */
-[type="checkbox"],
-[type="radio"],
-[type="range"] {
-  accent-color: var(--color-primary-fill);
-}
-
-/* Text selection color */
-
-::selection {
-  background-color: color-mix(in srgb, var(--color-primary-fill), white 75%);
-}