_config.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
  1. // Vertical Rhythm Multiplier
  2. $baseline-unit: 10px;
  3. // Typescale Multipliers
  4. $typescale-root: 18px; // Set 16px/1em default on html
  5. $typescale-base: 1em; // Set 1em default on body == $typescale-root;
  6. $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
  7. @mixin global-variables() {
  8. /* Font Family */
  9. --global--font-primary: var(--font-headings, 'Playfair Display', Georgia, Times, serif);
  10. --global--font-secondary: var(--font-base, 'Fira Sans', Helvetica, Arial, sans-serif);
  11. --global--font-code: monospace, monospace;
  12. --global--font-ui: var(--font-base, var(--global--font-secondary));
  13. /* Font Size */
  14. --global--font-size-root: #{$typescale-root};
  15. --global--font-size-ratio: #{$typescale-ratio};
  16. --global--font-size-base: #{$typescale-base};
  17. --global--font-size-xs: 14px;
  18. --global--font-size-sm: 16px;
  19. --global--font-size-md: 18px;
  20. --global--font-size-lg: 24px;
  21. --global--font-size-xl: 28px;
  22. --global--font-size-xxl: 32px;
  23. --global--font-size-xxxl: 48px;
  24. --global--letter-spacing: normal;
  25. /* Font Weight */
  26. --global--font-weight: normal;
  27. /* Line Height */
  28. --global--line-height-base: #{$typescale-base / ( $typescale-base * 0 + 1 )};
  29. --global--line-height-body: 1.7;
  30. --global--line-height-heading: 1.3;
  31. /* Colors */
  32. --global--color-primary: #000000;
  33. --global--color-secondary: #3C8067;
  34. --global--color-primary-hover: var( --global--color-secondary );
  35. --global--color-secondary-hover: #336D58;
  36. --global--color-black: black;
  37. --global--color-white: white;
  38. --global--color-foreground: #333333;
  39. --global--color-foreground-low-contrast: #444444;
  40. --global--color-foreground-high-contrast: #000000;
  41. --global--color-background: #FFFFFF;
  42. --global--color-tertiary: #FAFBF6;
  43. --global--color-background-dark: #DDDDDD;
  44. --global--color-border: #EFEFEF;
  45. --global--color-text-selection: #EBF2F0;
  46. --global--color-alert-success: yellowgreen;
  47. --global--color-alert-info: skyblue;
  48. --global--color-alert-warning: gold;
  49. --global--color-alert-error: salmon;
  50. /* Spacing */
  51. --global--spacing-unit: #{2 * $baseline-unit}; // 20px
  52. --global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width
  53. --global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px
  54. --global--spacing-vertical: #{3 * $baseline-unit}; // 30px.
  55. /* Elevation */
  56. --global--elevation: 1px 1px 3px 0px rgba( 0, 0, 0, 0.2 );
  57. /* Other */
  58. --global--border-radius-sm: #{0.5 * $typescale-root};
  59. --global--border-radius-md: #{0.75 * $typescale-root};
  60. --global--border-radius-lg: #{$typescale-root};
  61. --global--border-radius-pill: #{10 * $typescale-root};
  62. --global--border-radius-none: 0;
  63. }