libremdb/views/sass/_abstracts.scss

// importing sass built-in modules
@use 'sass:color';
@use 'sass:map';

////////////////////////////////////////////////////////////////
//                          ANIMATIONS
////////////////////////////////////////////////////////////////
// animation to be used when summary is being opened
// doesn't work on closing because of the limitation of details tag
@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-1rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

////////////////////////////////////////////////////////////////
//                          MIXINS
////////////////////////////////////////////////////////////////
// mixin to add underline under link
@mixin underliner($clr-2, $clr-1: transparent, $transition: true) {
  border-bottom: 2px solid $clr-1;

  @if $transition {
    transition: border 0.4s;
  }

  &:hover {
    border-bottom: 2px solid $clr-2;
  }
}

// MIXINS TO TURN SCSS VARIABLES INTO CSS VARIABLES:
@mixin themed-css-variables($theme) {
  @each $var, $values in $themed-variables {
    --#{$var}: #{map.get($values, $theme)};
  }
}
@mixin misc-css-variables {
  @each $var, $value in $misc-variables {
    --#{$var}: #{$value};
  }
}

// MIXIN TO ADD FONTS
$font-type-map: (
  'Thin': 100,
  'ExtraLight': 200,
  'Light': 300,
  'Regular': 400,
  'Medium': 500,
  'SemiBold': 600,
  'Bold': 700,
  'ExtraBold': 800,
  'Black': 900,
);

@mixin font($font-name, $font-types...) {
  // looping over the argument list $font-types
  @each $font-type in $font-types {
    // setting initial values
    $weight: normal;
    $style: normal;
    // font names to be used in the src
    $font-name-string: '#{$font-name}-#{$font-type}';

    // changing weight property for font-type that has weight defined in the font-type-map map
    @if (map.has-key($font-type-map, $font-type)) {
      $weight: map.get($font-type-map, $font-type);
    }
    // changing style property if the font-type value is Italic
    @if ($font-type == 'Italic') {
      $style: italic;
    }

    // filling all the properties
    @font-face {
      font-family: $font-name;
      src: local($font-name),
        url('/font/#{$font-name-string}.woff2') format('woff2');
      font-weight: $weight;
      font-style: $style;
      font-display: swap;
    }
  }
}
////////////////////////////////////////////////////////////////
//                        BREAKPOINTS
////////////////////////////////////////////////////////////////
// declaration of breakpoints
// using em for accessibility reasons(see: https://zellwk.com/blog/media-query-units/)
// 1em = 16px
$breakpoints: (
  bp-1100: 68.75em,
  bp-900: 56.25em,
  bp-725: 45.32em,
  bp-550: 34.375em,
  bp-450: 28.125em,
  bp-400: 25em,
  bp-350: 21.875em,
);

// mixin to handle known and unknown breakpoints:
@mixin bp($given-breakpoint) {
  // just  assigning the given value to a new variable since we're going to change it conditionally;
  $breakpoint: $given-breakpoint;
  // if $breakpoints map contains the given variable then getting it's value
  @if map.has-key($breakpoints, $breakpoint) {
    $breakpoint: map.get($breakpoints, $breakpoint);
  }
  // and then using it for media query. This will also work for straight out values(50em or 800px, for example)
  @media screen and (max-width: $breakpoint) {
    @content;
  }
}

////////////////////////////////////////////////////////////////
//                        VARIABLES
////////////////////////////////////////////////////////////////
// BASE COLOR DEFINITIONS:
$clr-primary: #f3e3e2;
$clr-secondary: #4d0011;
$clr-tertiary: #0f2c67;
$clr-alpha: #2f3542;
$clr-beta: #485460;
$clr-gamma: #ddd;
// unused
// $clr-quatenary: #232946;
// $clr-delta: #1e272e;
// $clr-epsilon: #ccc;
// $clr-zeta: #eee;
// VARIABLES MAPS:
$misc-variables: (
  // 1) FONTS:
  ff-base: ('NunitoSans', sans-serif),
  ff-alt-alpha: ('Montserrat', sans-serif),
  fs-2000: 20rem,
  fs-1700: 17rem,
  fs-1500: 15rem,
  fs-1200: 12rem,
  fs-1000: 10rem,
  fs-400: 4rem,
  fs-350: 3.5rem,
  fs-320: 3.2rem,
  fs-300: 3rem,
  fs-280: 2.8rem,
  fs-250: 2.5rem,
  fs-220: 2.2rem,
  fs-200: 2rem,
  fs-180: 1.8rem,
  fs-160: 1.6rem,
  fs-140: 1.4rem,
  fs-120: 1.2rem,
  // 2) MISCELLANEOUS:
  border-radius: 0.5em,
  spacer-200: 2rem,
  spacer-050: 0.5rem,
  spacer-100: 1rem,
  spacer-300: 3rem,
  spacer-500: 5rem,
  spacer-800: 8rem,
  theme-swticher-rotation-unchecked: -180deg,
  theme-swticher-rotation-checked: 180deg
);
$themed-variables: (
  // BIG LAYOUTS:
  // 1) BASE:
  clr-base-bg:
    (
      light: color.scale($clr-primary, $lightness: 50%),
      // light: lighten($clr-primary, 5%),
      dark: color.scale($clr-tertiary, $lightness: -82%),
    ),
  clr-base-heading: (
    light: darken($clr-tertiary, 9%),
    dark: color.scale($clr-primary, $lightness: -10%, $saturation: -70%),
  ),
  clr-base-heading-alt-alpha: (
    light: initial,
    dark: initial,
  ),
  clr-base-text: (
    light: $clr-alpha,
    dark: $clr-gamma,
  ),
  clr-base-text-alt-alpha: (
    light: $clr-beta,
    dark: $clr-gamma,
  ),
  clr-base-link: (
    light: color.scale($clr-tertiary, $lightness: 5%),
    dark: color.scale($clr-secondary, $lightness: 80%),
  ),
  clr-base-link-hover: (
    light: color.scale($clr-tertiary, $lightness: 20%),
    dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
  ),
  // 2) HEADER & FOOTER(HF):
  clr-hf-bg:
    (
      light: color.scale($clr-primary, $lightness: -15%),
      // dark: color.scale($clr-primary, $lightness: -90%, $saturation: -50%),
      dark: color.scale($clr-tertiary, $lightness: -55%, $saturation: 80%),
    ),
  clr-hf-logo: (
    light: color.scale($clr-secondary, $lightness: 12%),
    dark: lighten($clr-secondary, 50%),
  ),
  clr-hf-text: (
    light: darken($clr-tertiary, 10%),
    dark: lighten($clr-primary, 3%),
  ),
  clr-hf-text-alt-alpha: (
    light: color.scale($clr-alpha, $lightness: -10%),
    dark: $clr-gamma,
  ),
  clr-hf-link: (
    light: color.scale($clr-tertiary, $lightness: 5%),
    dark: color.scale($clr-secondary, $lightness: 85%),
  ),
  clr-hf-link-hover: (
    light: color.scale($clr-tertiary, $lightness: 15%, $saturation: 50%),
    dark: color.scale($clr-secondary, $lightness: 78%, $saturation: 95%),
  ),
  // SMALLER COMPONENTS:
  // 3) CARD:
  clr-card-bg:
    (
      light: $clr-primary,
      dark: color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%),
    ),
  clr-card-bg-alt-alpha: (
    light: color.scale($clr-primary, $lightness: 30%),
    dark: color.scale($clr-tertiary, $lightness: -70%),
  ),
  clr-card-heading: (
    light: color.scale($clr-tertiary, $lightness: -35%),
    dark: color.scale($clr-secondary, $lightness: 85%, $saturation: 0%),
  ),
  clr-card-heading-alt-alpha: (
    light: color.scale($clr-tertiary, $lightness: -15%),
    dark: color.scale($clr-secondary, $lightness: 92%),
  ),
  clr-card-text: (
    light: $clr-alpha,
    dark: color.scale($clr-primary, $lightness: 10%),
  ),
  clr-card-text-alt-alpha: (
    light: $clr-beta,
    dark: color.scale($clr-beta, $lightness: 40%),
  ),
  clr-card-icon: (
    light: lighten($clr-secondary, 10%),
    dark: color.scale($clr-secondary, $lightness: 60%),
  ),
  clr-card-icon-alt-alpha: (
    light: lighten($clr-beta, 5%),
    dark: color.scale($clr-beta, $lightness: 5%),
  ),
  clr-card-icon-alt-beta: (
    light: $clr-tertiary,
    dark: color.scale($clr-secondary, $lightness: 60%),
  ),
  clr-card-link: (
    light: $clr-secondary,
    dark: color.scale($clr-secondary, $lightness: 75%),
  ),
  clr-card-link-hover: (
    light: lighten($clr-secondary, 10%),
    dark: color.scale($clr-secondary, $lightness: 80%, $saturation: 90%),
  ),
  clr-card-link-alt-alpha: (
    light: color.scale($clr-tertiary, $lightness: 5%),
    dark: color.scale($clr-secondary, $lightness: 80%),
  ),
  clr-card-link-hover-alt-alpha: (
    light: color.scale($clr-tertiary, $lightness: 20%),
    dark: color.scale($clr-secondary, $lightness: 70%, $saturation: 90%),
  ),
  gradient-card-bg: (
    light:
      linear-gradient(
        to top,
        rgba($clr-primary, 1),
        rgba(lighten($clr-secondary, 10%), 0.5)
      ),
    dark:
      linear-gradient(
        to top,
        rgba(color.scale($clr-tertiary, $lightness: -45%, $saturation: 50%), 1),
        rgba(color.scale($clr-primary, $lightness: -90%), 0.8)
      ),
  ),
  clr-card-border: (
    light: darken($clr-secondary, 5%),
    dark: color.scale($clr-secondary, $lightness: 60%),
  ),
  // 4) BUTTONS:
  clr-button:
    (
      light: $clr-secondary,
      dark: lighten($clr-secondary, 3%),
    ),
  clr-button-hover: (
    light: lighten($clr-secondary, 3%),
    dark: lighten($clr-secondary, 6%),
  ),
  clr-button-text: (
    light: lighten($clr-primary, 5%),
    dark: lighten($clr-primary, 10%),
  ),
  clr-button-alt-alpha: (
    light: lighten($clr-tertiary, 5%),
    dark: color.scale($clr-tertiary, $lightness: -15%),
  ),
  clr-button-hover-alt-alpha: (
    light: lighten($clr-tertiary, 15%),
    dark: color.scale($clr-tertiary, $lightness: 5%),
  ),
  clr-button-text-alt-alpha: (
    light: color.scale($clr-primary, $lightness: 50%),
    dark: color.scale($clr-primary, $lightness: 50%),
  ),
  // MISCELLANEOUS
  // 5) SHADOWS:
  shadow-button:
    (
      light: 3px 3px 2px rgba(#000, 0.4),
      dark: 3px 3px 2px rgba(#000, 1),
    ),
  shadow-button-hover: (
    light: 7px 7px 3px rgba(#000, 0.3),
    dark: 7px 7px 3px rgba(#000, 0.6),
  ),
  shadow-button-active: (
    light: 6px 6px 2px rgba(#000, 0.5),
    dark: 6px 6px 2px rgba(#000, 0.8),
  ),
  shadow-card: (
    light: 0 0.5rem 1rem rgba(#000, 0.3),
    dark: 2px 2px 3px 2px rgba(#000, 1),
  ),
  // 6) THEME SWITCHER ICON
  clr-theme-switcher-unchecked:
    (
      light: $clr-tertiary,
      dark: lighten($clr-secondary, 70%),
    ),
  clr-theme-switcher-checked: (
    light: $clr-tertiary,
    dark: lighten($clr-secondary, 70%),
  ),
  // 7) SCROLLBAR:
  clr-scrollbar-track:
    (
      light: transparent,
      dark: transparent,
    ),
  clr-scrollbar-thumb: (
    light: $clr-tertiary,
    dark: $clr-primary,
  ),
  clr-scrollbar-thumb-hover: (
    light: $clr-tertiary,
    dark: lighten($clr-primary, 10%),
  ),
  // 8) SELECTION:
  clr-selection-bg:
    (
      light: color.scale($clr-secondary, $lightness: 5%),
      dark: color.scale($clr-secondary, $lightness: 90%),
    ),
  clr-selection-text: (
    light: color.scale($clr-primary, $lightness: 15%),
    dark: color.scale($clr-tertiary, $lightness: -20%),
  )
);