libremdb/views/sass/_base.scss

// importing as scss vars
@use 'abstracts' as *;

///////////////////////////////////////////////////////////////
//                         TYPOGRAPHY
///////////////////////////////////////////////////////////////
@include font('Montserrat', 'Italic', 'Light', 'Regular', 'SemiBold', 'Bold');
@include font('NunitoSans', 'Italic', 'Light', 'Regular', 'SemiBold', 'Bold');

///////////////////////////////////////////////////////////////
//                         RESET RULES
///////////////////////////////////////////////////////////////
html {
  scroll-behavior: smooth;
  font-size: 62.5%;

  @include bp(bp-725) {
    font-size: 58%;
  }

  @include bp(bp-350) {
    font-size: 55%;
  }
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  text-rendering: optimizeLegibility;
  // transition: all 0.2s ease;
}

body {
  box-sizing: border-box;
  font-size: 1.6rem;
  background-color: var(--clr-base-bg);
}

////////////////////////////////////////////////////////////////
//                       BASE STYLES
////////////////////////////////////////////////////////////////
// initally declaring light-mode variables
:root {
  @include misc-css-variables;
  @include themed-css-variables(light);

  // dark mode declaration
  &[theme='dark'] {
    @include themed-css-variables(dark);
  }
}

.page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: min-content 1fr min-content;

  background-color: var(--clr-base-bg);
  color: var(--clr-base-text);
  font-family: var(--ff-base);
}

////////////////////////////////////////////////////////////////
//                            VANITY
////////////////////////////////////////////////////////////////
// selection

::selection {
  background-color: var(--clr-selection-bg);
  color: var(--clr-selection-text);
}

// scrollbar
@supports (scrollbar-width: auto) {
  * {
    scrollbar-width: auto;
    scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
    // scrollba
  }
}
@supports not (scrollbar-width: auto) {
  ::-webkit-scrollbar {
    width: 1rem; // for vertical scrollbars
    height: 1rem; // horizontal scrollbars
    border-radius: 100rem;
  }

  ::-webkit-scrollbar-track {
    background-color: var(--clr-scrollbar-track);
    // border-radius: 100vw;
    // margin-block: 5px;
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--clr-scrollbar-thumb);
    border-radius: 100vw;
    // margin: 2px;
    border: 2px solid transparent;
    background-clip: padding-box;
    &:hover {
      background-color: var(--clr-scrollbar-thumb-hover);
    }
  }
}
////////////////////////////////////////////////////////////////
//                       THEME SWITCHER
////////////////////////////////////////////////////////////////

.theme-switcher {
  &__input {
    position: absolute;
    clip-path: circle(1px);
    z-index: -1;
  }

  &__label {
    display: grid;
    place-content: center;
    border-radius: 50%;
  }

  &__icon {
    border-radius: 50%;
    cursor: pointer;
    height: var(--fs-200);
    width: var(--fs-200);

    fill: var(--clr-theme-switcher-unchecked);
    transform: rotateZ(var(--theme-swticher-rotation-unchecked));

    transition: all 0.2s ease;

    @include bp(bp-400) {
      height: var(--fs-160);
      width: var(--fs-160);
    }
  }

  // new selector, same as writing:
  // &__label:hover, &__input:focus ~ .page &__label
  :is(&__label:hover, &__input:focus ~ .page &__label) {
    box-shadow: 0px 0px 1rem currentColor, 0px 0px 1.5rem currentColor;
  }

  &__input:checked ~ .page &__icon {
    fill: var(--clr-theme-switcher-checked);
    transform: rotateZ(var(--theme-swticher-rotation-checked));
  }
}

// if js is disabled, applying vars from on .page instead of on body.
// progressive degradement i guess
:root:not([js='enabled']) {
  // when user checks the theme-switcher, replacing root styles(light) with dark styles(on the .page)
  .theme-switcher__input:checked ~ .page {
    @include themed-css-variables(dark);
  }

  // if the user prefers the dark scheme, then using dark styles on root
  @media (prefers-color-scheme: dark) {
    @include themed-css-variables(dark);

    // and when user checks the theme-switcher, applying light styles on .page
    .theme-switcher {
      &__input:checked ~ .page {
        @include themed-css-variables(light);
      }

      &__input:checked ~ .page &__icon {
        fill: var(--clr-theme-switcher-checked);
        transform: rotateZ(var(--theme-swticher-rotation-checked));
      }
    }
  }
}