@semanticus/semanticus-css 2.2.0 → 3.1.0

package/src/semantics/elements/_button.css

@@ -1,124 +0,0 @@
-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-fill);
-  --border-color: var(--color-primary-fill);
-  --color-text: var(--color-primary-on-fill);
-  --shadow: var(--button-shadow, 0 0 0 rgba(0, 0, 0, 0));
-  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
-  border: var(--border-size) solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
-  background-color: var(--color-background);
-  box-shadow: var(--shadow);
-  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-fill-hover);
-  --border-color: var(--color-primary-fill-hover);
-  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0));
-  --color-text: var(--color-primary-on-fill);
-}
-
-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: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-primary-focus-ring);
-}
-
-[type=submit],
-[type=reset],
-[type=button] {
-  margin-bottom: var(--spacing);
-}
-
-[type=reset],
-[type=file]::file-selector-button {
-  --color-background: var(--color-secondary-fill);
-  --border-color: var(--color-secondary-fill);
-  --color-text: var(--color-secondary-on-fill);
-  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-fill-hover);
-  --border-color: var(--color-secondary-fill-hover);
-  --color-text: var(--color-secondary-on-fill);
-}
-
-[type=reset]:focus,
-[type=reset]:is([aria-current]:not([aria-current=false])):focus,
-[type=file]::file-selector-button:focus {
-  --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
-}
-
-: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;
-}
-
-aside {
-  nav {
-    :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
-      display: block !important;
-      width: 100%;
-    }
-  }
-}
-
-nav {
-  :where(button, [role=button], [type=button], input:not([type=checkbox], [type=radio], [type=range], [type=file]), select) {
-    --input-spacing-vertical: calc(var(--nav-link-gap) - var(--border-size) * 2);
-    --input-spacing-horizontal: var(--nav-link-gap);
-
-    height: auto;
-    margin-right: inherit;
-    margin-bottom: 0;
-    margin-left: inherit;
-    padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
-  }
-}

package/src/semantics/elements/_input.css

@@ -1,302 +0,0 @@
-input,
-optgroup,
-select,
-textarea {
-  margin: 0;
-  font-size: 1rem;
-  line-height: var(--line-height);
-  font-family: inherit;
-  letter-spacing: inherit;
-}
-
-input {
-  overflow: visible;
-}
-
-select {
-  text-transform: none;
-}
-
-legend {
-  max-width: 100%;
-  padding: 0;
-  color: inherit;
-  white-space: normal;
-}
-
-textarea {
-  overflow: auto;
-}
-
-[type=checkbox],
-[type=radio] {
-  padding: 0;
-}
-
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type=search] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-}
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-
-::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-:-moz-focusring {
-  outline: none;
-}
-
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-
-::-ms-expand {
-  display: none;
-}
-
-[type=file],
-[type=range] {
-  padding: 0;
-  border-width: 0;
-}
-
-input:not([type=checkbox], [type=radio], [type=range]) {
-  height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
-}
-
-fieldset {
-  width: 100%;
-  margin: 0 ;
-  padding: 0;
-  border: 0;
-}
-
-label,
-fieldset legend {
-  display: block;
-  margin-bottom: calc(var(--spacing) * 0.375);
-  color: var(--color-text);
-  font-weight: var(--form-label-font-weight, var(--font-weight));
-}
-
-fieldset legend {
-  margin-bottom: calc(var(--spacing) * 0.5);
-}
-
-input:not([type=checkbox], [type=radio]),
-button[type=submit],
-select,
-textarea {
-  width: 100%;
-}
-
-input:not([type=checkbox], [type=radio], [type=range], [type=file]),
-select,
-textarea {
-  appearance: none;
-  padding: var(--input-spacing-vertical) var(--input-spacing-horizontal);
-}
-
-input,
-select,
-textarea {
-  --color-background: var(--input-fill);
-  --border-color: var(--input-border);
-  --color-text: var(--input-text);
-  --shadow: none;
-  border: var(--border-size) solid var(--border-color);
-  border-radius: var(--radius);
-  outline: none;
-  background-color: var(--color-background);
-  box-shadow: var(--shadow);
-  color: var(--color-text);
-  font-weight: var(--font-weight);
-  transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-}
-
-input:not([type=submit],
-[type=button],
-[type=reset],
-[type=checkbox],
-[type=radio],
-[readonly]):is(:active, :focus),
-:where(select, textarea):not([readonly]):is(:active, :focus) {
-  --color-background: var(--input-fill-active);
-}
-
-input:not([type=submit], [type=button], [type=reset], [role=switch], [readonly]):is(:active, :focus),
-:where(select, textarea):not([readonly]):is(:active, :focus) {
-  --border-color: var(--input-border-focus);
-}
-
-input:not([type=submit],
-[type=button],
-[type=reset],
-[type=range],
-[type=file],
-[readonly]):focus,
-:where(select, textarea):not([readonly]):focus {
-  --shadow: 0 0 0 var(--outline-size) var(--input-border-focus);
-}
-
-input:not([type=submit], [type=button], [type=reset])[disabled],
-select[disabled],
-textarea[disabled],
-label[aria-disabled=true],
-:where(fieldset[disabled]) :is(input:not([type=submit], [type=button], [type=reset]), select, textarea) {
-  opacity: var(--input-opacity-disabled);
-  pointer-events: none;
-}
-
-label[aria-disabled=true] input[disabled] {
-  opacity: 1;
-}
-
-:where(:is(input, select, textarea):not([type=checkbox],
- [type=radio],
- [type=date],
- [type=datetime-local],
- [type=month],
- [type=time],
- [type=week],
- [type=range])[aria-invalid]) {
-  padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
-  padding-left: var(--input-spacing-horizontal);
-  padding-inline-start: var(--input-spacing-horizontal);
-  padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
-  background-position: center right 0.75rem;
-  background-size: 1rem auto;
-  background-repeat: no-repeat;
-}
-:where(input:not([type=checkbox],
- [type=radio],
- [type=date],
- [type=datetime-local],
- [type=month],
- [type=time],
- [type=week],
- [type=range])[aria-invalid=false], textarea[aria-invalid=false]) {
-  background-image: var(--icon-valid);
-}
-:where(input:not([type=checkbox],
- [type=radio],
- [type=date],
- [type=datetime-local],
- [type=month],
- [type=time],
- [type=week],
- [type=range])[aria-invalid=true], textarea[aria-invalid=true]) {
-  background-image: var(--icon-invalid);
-}
-
-:is(input, select, textarea)[aria-invalid=false] {
-  --border-color: var(--color-success-fill);
-}
-:is(input, select, textarea)[aria-invalid=false]:is(:active, :focus) {
-  --border-color: var(--color-success-fill-hover);
-}
-input:not([type=checkbox], [type=radio])[aria-invalid=false]:is(:active, :focus), select[aria-invalid=false]:is(:active, :focus), textarea[aria-invalid=false]:is(:active, :focus) {
-  --shadow: 0 0 0 var(--outline-size) var(--color-success-fill);
-}
-
-:is(input, select, textarea)[aria-invalid=true] {
-  --border-color: var(--color-danger-fill);
-}
-:is(input, select, textarea)[aria-invalid=true]:is(:active, :focus) {
-  --border-color: var(--color-danger-fill-hover);
-}
-input:not([type=checkbox], [type=radio])[aria-invalid=true]:is(:active, :focus), select[aria-invalid=true]:is(:active, :focus), textarea[aria-invalid=true]:is(:active, :focus) {
-  --shadow: 0 0 0 var(--outline-size) var(--color-danger-fill);
-}
-
-:where([dir=rtl] :is(input, select, textarea):not([type=checkbox], [type=radio]):is([aria-invalid], [aria-invalid=true], [aria-invalid=false])) {
-  background-position: center left 0.75rem;
-}
-
-input::placeholder,
-input::-webkit-input-placeholder,
-textarea::placeholder,
-textarea::-webkit-input-placeholder,
-select:invalid {
-  color: var(--input-placeholder-text);
-  opacity: 1;
-}
-
-input:not([type=checkbox], [type=radio]),
-select,
-textarea {
-  margin-bottom: var(--spacing);
-}
-
-select {
-  &::-ms-expand {
-    border: 0;
-    background-color: transparent;
-  }
-
-  &:not([multiple], [size]) {
-    padding-right: calc(var(--input-spacing-horizontal) + 1.5rem);
-    padding-left: var(--input-spacing-horizontal);
-    padding-inline-start: var(--input-spacing-horizontal);
-    padding-inline-end: calc(var(--input-spacing-horizontal) + 1.5rem);
-    background-image: var(--icon-chevron);
-    background-position: center right 0.75rem;
-    background-size: 1rem auto;
-    background-repeat: no-repeat;
-  }
-
-  &[multiple] option:checked {
-    background: var(--input-fill-selected);
-    color: var(--input-text);
-  }
-}
-
-[dir=rtl] select:not([multiple], [size]) {
-  background-position: center left 0.75rem;
-}
-
-textarea {
-  display: block;
-  resize: vertical;
-}
-
-:where(textarea[aria-invalid]) {
-  --icon-height: calc(1rem * var(--line-height) + var(--input-spacing-vertical) * 2 + var(--border-size) * 2);
-  background-position: top right 0.75rem;
-  background-size: 1rem var(--icon-height);
-}
-
-:where(input, select, textarea, fieldset) + small {
-  display: block;
-  width: 100%;
-  margin-top: calc(var(--spacing) * -0.75);
-  margin-bottom: var(--spacing);
-  color: var(--color-text-muted);
-}
-
-:where(input, select, textarea, fieldset)[aria-invalid=false] + small {
-  color: var(--color-success-text);
-}
-
-:where(input, select, textarea, fieldset)[aria-invalid=true] + small {
-  color: var(--color-danger-text);
-}
-
-label > :where(input, select, textarea) {
-  margin-top: calc(var(--spacing) * 0.25);
-}

package/src/semantics/elements/_main.css

@@ -1,3 +0,0 @@
-main {
-  width: 100%;
-}

package/src/semantics/elements/_type-checkbox-radio.css

@@ -1,139 +0,0 @@
-label:has([type=checkbox], [type=radio]) {
-  width: fit-content;
-  cursor: pointer;
-}
-
-[type=checkbox],
-[type=radio] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 1.25em;
-  height: 1.25em;
-  margin-top: -0.125em;
-  margin-inline-end: 0.5em;
-  border-width: var(--border-size);
-  vertical-align: middle;
-  cursor: pointer;
-
-  &::-ms-check {
-    display: none;
-  }
-
-  &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-fill);
-    --border-color: var(--color-primary-fill);
-    background-image: var(--icon-checkbox);
-    background-position: center;
-    background-size: 0.75em auto;
-    background-repeat: no-repeat;
-  }
-
-  & ~ label {
-    display: inline-block;
-    margin-bottom: 0;
-    cursor: pointer;
-
-    &:not(:last-of-type) {
-      margin-inline-end: 1em;
-    }
-  }
-}
-
-[type=checkbox] {
-  &:indeterminate {
-    --color-background: var(--color-primary-fill);
-    --border-color: var(--color-primary-fill);
-    background-image: var(--icon-minus);
-    background-position: center;
-    background-size: 0.75em auto;
-    background-repeat: no-repeat;
-  }
-}
-
-[type=radio] {
-  border-radius: 50%;
-
-  &:checked, &:checked:active, &:checked:focus {
-    --color-background: var(--color-primary-on-fill);
-    border-width: 0.35em;
-    background-image: none;
-  }
-}
-
-[type=checkbox][role=switch] {
-  --color-background: var(--switch-fill);
-  --color-text: var(--switch-thumb-fill);
-  width: 2.25em;
-  height: 1.25em;
-  border: var(--border-size) solid var(--border-color);
-  border-radius: 1.25em;
-  background-color: var(--color-background);
-  line-height: 1.25em;
-
-  &:not([aria-invalid]) {
-    --border-color: var(--switch-fill);
-  }
-
-  &:before {
-    display: block;
-    aspect-ratio: 1;
-    height: 100%;
-    border-radius: 50%;
-    background-color: var(--color-text);
-    box-shadow: var(--switch-thumb-glow);
-    content: "";
-    transition: margin 0.1s ease-in-out;
-  }
-
-  &:focus {
-    --color-background: var(--switch-fill);
-    --border-color: var(--switch-fill);
-  }
-
-  &:checked {
-    --color-background: var(--switch-fill-checked);
-    --border-color: var(--switch-fill-checked);
-    background-image: none;
-
-    &::before {
-      margin-inline-start: calc(2.25em - 1.25em);
-    }
-  }
-
-  &[disabled] {
-    --color-background: var(--border-color);
-  }
-}
-
-[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
-[type=checkbox][role=switch][aria-invalid=false]:checked,
-[type=checkbox][role=switch][aria-invalid=false]:checked:active,
-[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
-  --color-background: var(--color-success-fill);
-}
-[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
-[type=checkbox][role=switch]:checked[aria-invalid=true],
-[type=checkbox][role=switch]:checked:active[aria-invalid=true],
-[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
-  --color-background: var(--color-danger-fill);
-}
-
-[type=checkbox][aria-invalid=false]:checked, [type=checkbox][aria-invalid=false]:checked:active, [type=checkbox][aria-invalid=false]:checked:focus,
-[type=radio][aria-invalid=false]:checked,
-[type=radio][aria-invalid=false]:checked:active,
-[type=radio][aria-invalid=false]:checked:focus,
-[type=checkbox][role=switch][aria-invalid=false]:checked,
-[type=checkbox][role=switch][aria-invalid=false]:checked:active,
-[type=checkbox][role=switch][aria-invalid=false]:checked:focus {
-  --border-color: var(--color-success-fill);
-}
-[type=checkbox]:checked[aria-invalid=true], [type=checkbox]:checked:active[aria-invalid=true], [type=checkbox]:checked:focus[aria-invalid=true],
-[type=radio]:checked[aria-invalid=true],
-[type=radio]:checked:active[aria-invalid=true],
-[type=radio]:checked:focus[aria-invalid=true],
-[type=checkbox][role=switch]:checked[aria-invalid=true],
-[type=checkbox][role=switch]:checked:active[aria-invalid=true],
-[type=checkbox][role=switch]:checked:focus[aria-invalid=true] {
-  --border-color: var(--color-danger-fill);
-}

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

@@ -1,37 +0,0 @@
-:where(input:not([type=checkbox], [type=radio], [type=range], [type=file]):is([type=date], [type=datetime-local], [type=month], [type=time], [type=week])) {
-  --icon-position: 0.75rem;
-  --icon-width: 1rem;
-  padding-right: calc(var(--icon-width) + var(--icon-position));
-  background-image: var(--icon-date);
-  background-position: center right var(--icon-position);
-  background-size: var(--icon-width) auto;
-  background-repeat: no-repeat;
-}
-:where(input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=time]) {
-  background-image: var(--icon-time);
-}
-
-[type=date]::-webkit-calendar-picker-indicator,
-[type=datetime-local]::-webkit-calendar-picker-indicator,
-[type=month]::-webkit-calendar-picker-indicator,
-[type=time]::-webkit-calendar-picker-indicator,
-[type=week]::-webkit-calendar-picker-indicator {
-  width: var(--icon-width);
-  margin-right: calc(var(--icon-width) * -1);
-  margin-left: var(--icon-position);
-  opacity: 0;
-}
-
-@-moz-document url-prefix() {
-  [type=date],
-  [type=datetime-local],
-  [type=month],
-  [type=time],
-  [type=week] {
-    padding-right: var(--input-spacing-horizontal);
-    background-image: none;
-  }
-}
-[dir=rtl] :is([type=date], [type=datetime-local], [type=month], [type=time], [type=week]) {
-  text-align: right;
-}

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

@@ -1,23 +0,0 @@
-[type=file] {
-  --color-text: var(--color-text-muted);
-  margin-left: calc(var(--outline-size) * -1);
-  padding: calc(var(--input-spacing-vertical) * 0.5) 0;
-  padding-left: var(--outline-size);
-  border: 0;
-  border-radius: 0;
-  background: none;
-
-  &::file-selector-button {
-    margin-right: calc(var(--spacing) / 2);
-    padding: calc(var(--input-spacing-vertical) * 0.5) var(--input-spacing-horizontal);
-  }
-
-  &:is(:hover, :active, :focus)::file-selector-button {
-    --color-background: var(--color-secondary-fill-hover);
-    --border-color: var(--color-secondary-fill-hover);
-  }
-
-  &:focus::file-selector-button {
-    --shadow: var(--button-shadow-hover, 0 0 0 rgba(0, 0, 0, 0)), 0 0 0 var(--outline-size) var(--color-secondary-focus-ring);
-  }
-}

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

@@ -1,87 +0,0 @@
-[type=range] {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 100%;
-  height: 1.25rem;
-  background: none;
-
-  &::-webkit-slider-runnable-track {
-    width: 100%;
-    height: 0.375rem;
-    border-radius: var(--radius);
-    background-color: var(--range-track-border);
-    transition: background-color var(--transition), box-shadow var(--transition);
-  }
-
-  &::-moz-range-track {
-    width: 100%;
-    height: 0.375rem;
-    border-radius: var(--radius);
-    background-color: var(--range-track-border);
-    transition: background-color var(--transition), box-shadow var(--transition);
-  }
-
-  &::-ms-track {
-    width: 100%;
-    height: 0.375rem;
-    border-radius: var(--radius);
-    background-color: var(--range-track-border);
-    transition: background-color var(--transition), box-shadow var(--transition);
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-top: -0.4375rem;
-    border: 2px solid var(--range-thumb-border);
-    border-radius: 50%;
-    background-color: var(--range-thumb-fill);
-    cursor: pointer;
-    transition: background-color var(--transition), transform var(--transition);
-  }
-
-  &::-moz-range-thumb {
-    -webkit-appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-top: -0.4375rem;
-    border: 2px solid var(--range-thumb-border);
-    border-radius: 50%;
-    background-color: var(--range-thumb-fill);
-    cursor: pointer;
-    transition: background-color var(--transition), transform var(--transition);
-  }
-
-  &::-ms-thumb {
-    -webkit-appearance: none;
-    width: 1.25rem;
-    height: 1.25rem;
-    margin-top: -0.4375rem;
-    border: 2px solid var(--range-thumb-border);
-    border-radius: 50%;
-    background-color: var(--range-thumb-fill);
-    cursor: pointer;
-    transition: background-color var(--transition), transform var(--transition);
-  }
-
-  &:active, &:focus-within {
-    --range-track-border: var(--range-track-border-active);
-    --range-thumb-fill: var(--range-thumb-fill-active);
-  }
-
-  &:active {
-    &::-webkit-slider-thumb {
-      transform: scale(1.25);
-    }
-
-    &::-moz-range-thumb {
-      transform: scale(1.25);
-    }
-
-    &::-ms-thumb {
-      transform: scale(1.25);
-    }
-  }
-}