@jaredpdesigns/pasta/src/controls.css

Pasta provides a great starting place for web projects. It combines light styling for common web elements, yummy!

@layer props {
  :root {
    --control__font-size: var(--type__size--m);
    --control__line-height: var(--type__lineheight--l);
    --control__padding--block: var(--size__s);
    --control__padding--inline: var(--size__m);
    --control__radius: var(--size__s);
    --control__size: clamp(var(--size__xl),
        var(--type__size--target),
        var(--size__xxl));
  }
}

@layer reset {

  input,
  button,
  textarea,
  select {
    font: inherit;
  }

  fieldset {
    border: none;
  }
}

@layer config {

  details:not([class]),
  details.styled {
    --radius: var(--size__s);
    border: var(--size__xxs) solid var(--color__base--light);
    border-radius: var(--radius);

    summary {
      border-radius: var(--radius);
      font-size: var(--type__size--m);
      line-height: var(--type__lineheight--l);
      list-style: revert;
      padding-block: var(--size__s);
      padding-inline: var(--size__m);

      &::marker {
        color: var(--color__base--mid);
      }

      +* {
        background-color: var(--color__base--ghost);
        border-bottom-left-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        border-block-start: var(--size__xxs) solid var(--color__base--light);
        padding-block: var(--size__s);
        padding-inline: var(--size__m);
      }
    }

    &[open] summary {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

@layer reset {

  :where(*[class^="button__"],
    *[class^="control__"] input,
    *[class^="control__"] select) {
    all: unset;
    box-sizing: border-box;
    display: revert;

    &:before,
    &:after {
      box-sizing: border-box;
    }
  }

  .button {

    &__primary,
    &__secondary,
    &__tertiary {
      --color__bg: var(--color__highlight);
      --color__border: var(--color__highlight);
      --color__type: var(--color__contrast--fixed);
      align-items: center;
      background-color: var(--color__bg);
      border-color: var(--color__border);
      border-radius: var(--control__radius);
      color: var(--color__type);
      cursor: pointer;
      display: inline-flex;
      font-size: var(--control__font-size);
      gap: var(--size__s);
      justify-content: center;
      line-height: var(--control__line-height);

      &:focus,
      &:hover,
      &:focus-visible {
        transition: all 0.375s ease-in;
        transition-property: background-color, border-color, color, opacity;
      }

      &[disabled] {
        cursor: not-allowed;
      }
    }

    &__primary,
    &__secondary {
      border: var(--size__xxs) solid var(--color__border);
      padding-block: var(--control__padding--block);
      padding-inline: var(--control__padding--inline);

      &.button__micro {
        padding-block: calc(var(--control__padding--block) / 2);
        padding-inline: calc(var(--control__padding--inline) / 2);
      }
    }

    &__primary {

      &:focus:not([disabled]),
      &:hover:not([disabled]) {
        --color__bg: var(--color__highlight--ish);
      }

      &[disabled] {
        --color__bg: var(--color__highlight--mid);
      }
    }

    &__secondary,
    &__tertiary {
      --color__type: var(--color__base--ish);

      &:focus:not([disabled]),
      &:hover:not([disabled]) {
        --color__type: var(--color__base);
      }
    }

    &__secondary {
      --color__bg: var(--color__contrast--adaptive);
      --color__border: var(--color__base--light);

      &:focus:not([disabled]),
      &:hover:not([disabled]) {
        --color__border: var(--color__base--semi);
      }

      &[disabled] {
        --color__bg: var(--color__base--ghost);
      }
    }

    &__tertiary {
      --color__bg: transparent;

      &:focus:not([disabled]),
      &:hover:not([disabled]) {
        opacity: 0.75;
      }

      &[disabled] {
        opacity: 0.5;
      }
    }
  }

  .control {

    &__input legend,
    &__select legend,
    &__checkbox legend,
    &__radio legend,
    &__toggle legend,
    &__input label,
    &__select label {
      color: var(--color__base--ish);
      display: block;
      font-size: var(--type__size--xs);
      font-weight: 600;
      letter-spacing: var(--size__xxs);
      line-height: var(--type__lineheight--l);
      text-transform: uppercase;

      +* {
        margin-block-start: var(--size__s);
      }
    }

    &__input,
    &__select {

      input,
      select,
      textarea {
        appearance: none;
        background-color: var(--color__contrast--adaptive);
        border: var(--size__xxs) solid var(--color__base--semi);
        border-radius: var(--control__radius);
        color: var(--color__base);
        font-size: var(--control__font-size);
        line-height: var(--control__line-height);
        min-height: var(--control__size);
        padding-block: var(--control__padding--block);
        padding-inline: var(--control__padding--inline);
        width: 100%;

        &::placeholder {
          color: var(--color__base--mid);
        }

        &:hover {
          background-color: var(--color__highlight--ghost);
          border-color: var(--color__highlight);
          transition: all 0.375s ease-in;
          transition-property: background-color, border-color, color;
        }

        &[disabled] {
          background-color: var(--color__base--ghost);
          color: var(--color__base--ish);
          cursor: not-allowed;

          &::placeholder {
            color: var(--color__base--semi);
          }

          &:hover {
            background-color: var(--color__base--ghost);
            border-color: var(--color__base--semi);
            cursor: not-allowed;
          }
        }
      }

      select {
        text-indent: 0.01px;
        text-overflow: "";

        &::-ms-expand {
          display: none;
        }
      }
    }

    &__select {
      span {
        display: block;
        position: relative;

        &:after {
          background-color: var(--color__base--semi);
          block-size: var(--size__m);
          content: "";
          display: block;
          inline-size: var(--size__m);
          inset-block-start: 50%;
          inset-inline-end: var(--control__padding--inline);
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.0000258,16.5154845 L22.7701434,8.9931316 C23.8785204,7.76160154 25.7753899,7.6617663 27.00692,8.77014336 C28.2384501,9.87852042 28.3382853,11.7753899 27.2299082,13.00692 L18.2299082,23.00692 C17.0381813,24.3310611 14.9618703,24.3310611 13.7701434,23.00692 L4.77014336,13.00692 C3.6617663,11.7753899 3.76160154,9.87852042 4.9931316,8.77014336 C6.22466167,7.6617663 8.12153118,7.76160154 9.22990824,8.9931316 L16.0000258,16.5154845 Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
          position: absolute;
          transform: translateY(-50%);
        }
      }
    }

    &__checkbox,
    &__radio,
    &__toggle {
      label {
        align-items: center;
        cursor: pointer;
        display: inline-flex;
        grid-auto-flow: column;

        >span {
          align-items: center;
          display: inline-flex;
        }

        +label {
          margin-inline-start: var(--size__m);
        }
      }

      input[type="checkbox"],
      input[type="radio"] {
        opacity: 0;

        &:focus-visible+span:before {
          outline: var(--outline__size) var(--outline__style) var(--outline__color);
          outline-offset: var(--outline__offset, var(--outline__size));
        }

        +span:before {
          --size: calc(var(--size__m) + var(--size__s));
          align-items: center;
          background-color: var(--color__contrast--adaptive);
          background-position: center;
          background-repeat: no-repeat;
          border: var(--size__xxs) solid var(--color__base--semi);
          color: var(--color__base--semi);
          content: "";
          display: inline-flex;
          height: var(--size);
          justify-content: center;
          margin-right: var(--size__s);
          width: var(--size);
        }

        &:hover+span:before {
          border-color: var(--color__base--mid);
          transition: all 0.375s ease-in;
          transition-property: background, border-color, color;
        }

        &:checked+span:before {
          background-color: var(--color__highlight);
        }

        &:checked:hover+span:before {
          background-color: var(--color__highlight--dark);
        }

        &[disabled] {
          +span {
            color: var(--color__base--mid);
            cursor: not-allowed;
          }

          +span:before {
            background-color: var(--color__base--ghost);
            border-color: var(--color__base--light);
          }

          &:checked+span:before {
            background-color: var(--color__base--mid);
            color: var(--color__base--mid);
          }
        }
      }

      input[type="checkbox"] {
        +span:before {
          border-radius: calc(var(--control__radius) / 2);
          font-size: var(--type__size--xs);
          font-weight: bold;
        }
      }

      input[type="radio"] {
        +span:before {
          border-radius: 50%;
        }

        &:checked+span:before {
          box-shadow: inset 0 0 0 calc(var(--size__xxs) * 2) var(--color__contrast);
        }

        &:checked:focus-visible+span:before {
          outline: var(--outline__size) var(--outline__style) var(--outline__color);
          outline-offset: var(--outline__offset, var(--outline__size));
        }
      }

      span {
        color: var(--color__base);
        font-size: var(--control__font-size);
        line-height: var(--control__line-height);
        position: relative;
      }
    }

    &__checkbox {

      input[type="checkbox"]:checked+span:after,
      input[type="checkbox"]:indeterminate+span:after {
        block-size: var(--size__m);
        content: "";
        display: block;
        inline-size: var(--size__m);
        inset-inline-start: var(--size__xs);
        position: absolute;
      }

      input[type="checkbox"]:checked+span:after {
        background-color: white;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M22.5041679,5.33621823 C23.4232253,3.95763217 25.2858333,3.58511056 26.6644194,4.50416794 C28.0430055,5.42322532 28.4155271,7.28583334 27.4964697,8.66441941 L15.4964697,26.6644194 C14.3090036,28.4456186 11.6916341,28.4456186 10.5041679,26.6644194 L4.50416794,17.6644194 C3.58511056,16.2858333 3.95763217,14.4232253 5.33621823,13.5041679 C6.7148043,12.5851106 8.57741233,12.9576322 9.4964697,14.3362182 L13.0003188,19.5919919 L22.5041679,5.33621823 Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
      }

      input[type="checkbox"]:indeterminate+span:after {
        background-color: var(--color__base--semi);
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M25,13 C26.6568542,13 28,14.3431458 28,16 C28,17.6568542 26.6568542,19 25,19 L7,19 C5.34314575,19 4,17.6568542 4,16 C4,14.3431458 5.34314575,13 7,13 L25,13 Z'%3E%3C/path%3E%3C/svg%3E") center / contain no-repeat;
      }
    }

    &__toggle {
      input[type="checkbox"] {
        +span {
          &:before {
            border-radius: calc(var(--size) / 2);
            width: var(--size__xl);
          }

          &:after {
            background-color: var(--color__base--semi);
            border-radius: 50%;
            content: "";
            display: block;
            height: var(--size__m);
            inset-inline-start: calc(var(--size__xs));
            position: absolute;
            width: var(--size__m);
          }
        }

        &[disabled] {
          +span:before {
            background-color: var(--color__base--ghost);
          }

          +span:after {
            background-color: var(--color__base--light);
          }
        }

        &:checked+span:after {
          background-color: var(--color__contrast);
          transform: scale(1.375) translateX(calc(100% - (var(--size__xs) + var(--size__xxs))));
        }

        &:hover+span:after {
          transition: all 0.375s ease-in;
          transition-property: background-color, transform;
        }
      }
    }
  }
}