variables.scss 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. // Dependent colors
  2. $black: #000000;
  3. $white: #ffffff;
  4. $classic-base-color: #282c37;
  5. $classic-primary-color: #9baec8;
  6. $classic-secondary-color: #d9e1e8;
  7. $classic-highlight-color: #858afa;
  8. $blurple-600: #563acc; // Iris
  9. $blurple-500: #6364ff; // Brand purple
  10. $blurple-300: #858afa; // Faded Blue
  11. $grey-600: #4e4c5a; // Trout
  12. $grey-100: #dadaf3; // Topaz
  13. // Differences
  14. $success-green: lighten(#3c754d, 8%);
  15. $base-overlay-background: $white !default;
  16. $valid-value-color: $success-green !default;
  17. $ui-base-color: $classic-secondary-color !default;
  18. $ui-base-lighter-color: #b0c0cf;
  19. $ui-primary-color: #9bcbed;
  20. $ui-secondary-color: $classic-base-color !default;
  21. $ui-highlight-color: $classic-highlight-color !default;
  22. $ui-button-secondary-color: $grey-600 !default;
  23. $ui-button-secondary-border-color: $grey-600 !default;
  24. $ui-button-secondary-focus-color: $white !default;
  25. $ui-button-tertiary-color: $blurple-500 !default;
  26. $ui-button-tertiary-border-color: $blurple-500 !default;
  27. $primary-text-color: $black !default;
  28. $darker-text-color: $classic-base-color !default;
  29. $highlight-text-color: darken($ui-highlight-color, 8%) !default;
  30. $dark-text-color: #444b5d;
  31. $action-button-color: #606984;
  32. $inverted-text-color: $black !default;
  33. $lighter-text-color: $classic-base-color !default;
  34. $light-text-color: #444b5d;
  35. // Newly added colors
  36. $account-background-color: $white !default;
  37. // Invert darkened and lightened colors
  38. @function darken($color, $amount) {
  39. @return hsl(hue($color), saturation($color), lightness($color) + $amount);
  40. }
  41. @function lighten($color, $amount) {
  42. @return hsl(hue($color), saturation($color), lightness($color) - $amount);
  43. }
  44. $emojis-requiring-inversion: 'chains';