variables.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344
  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: #6364ff;
  8. // Differences
  9. $success-green: lighten(#3c754d, 8%);
  10. $base-overlay-background: $white !default;
  11. $valid-value-color: $success-green !default;
  12. $ui-base-color: $classic-secondary-color !default;
  13. $ui-base-lighter-color: #b0c0cf;
  14. $ui-primary-color: #9bcbed;
  15. $ui-secondary-color: $classic-base-color !default;
  16. $ui-highlight-color: $classic-highlight-color !default;
  17. $primary-text-color: $black !default;
  18. $darker-text-color: $classic-base-color !default;
  19. $highlight-text-color: darken($ui-highlight-color, 8%) !default;
  20. $dark-text-color: #444b5d;
  21. $action-button-color: #606984;
  22. $inverted-text-color: $black !default;
  23. $lighter-text-color: $classic-base-color !default;
  24. $light-text-color: #444b5d;
  25. // Newly added colors
  26. $account-background-color: $white !default;
  27. // Invert darkened and lightened colors
  28. @function darken($color, $amount) {
  29. @return hsl(hue($color), saturation($color), lightness($color) + $amount);
  30. }
  31. @function lighten($color, $amount) {
  32. @return hsl(hue($color), saturation($color), lightness($color) - $amount);
  33. }
  34. $emojis-requiring-inversion: 'chains';