initial-variables.sass 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576
  1. // Colors
  2. $black: hsl(0, 0%, 4%) !default
  3. $black-bis: hsl(0, 0%, 7%) !default
  4. $black-ter: hsl(0, 0%, 14%) !default
  5. $grey-darker: hsl(0, 0%, 21%) !default
  6. $grey-dark: hsl(0, 0%, 29%) !default
  7. $grey: hsl(0, 0%, 48%) !default
  8. $grey-light: hsl(0, 0%, 71%) !default
  9. $grey-lighter: hsl(0, 0%, 86%) !default
  10. $white-ter: hsl(0, 0%, 96%) !default
  11. $white-bis: hsl(0, 0%, 98%) !default
  12. $white: hsl(0, 0%, 100%) !default
  13. $orange: hsl(14, 100%, 53%) !default
  14. $yellow: hsl(48, 100%, 67%) !default
  15. $green: hsl(141, 71%, 48%) !default
  16. $turquoise: hsl(171, 100%, 41%) !default
  17. $cyan: hsl(204, 86%, 53%) !default
  18. $blue: hsl(217, 71%, 53%) !default
  19. $purple: hsl(271, 100%, 71%) !default
  20. $red: hsl(348, 100%, 61%) !default
  21. // Typography
  22. $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
  23. $family-monospace: monospace !default
  24. $render-mode: optimizeLegibility !default
  25. $size-1: 3rem !default
  26. $size-2: 2.5rem !default
  27. $size-3: 2rem !default
  28. $size-4: 1.5rem !default
  29. $size-5: 1.25rem !default
  30. $size-6: 1rem !default
  31. $size-7: 0.75rem !default
  32. $weight-light: 300 !default
  33. $weight-normal: 400 !default
  34. $weight-medium: 500 !default
  35. $weight-semibold: 600 !default
  36. $weight-bold: 700 !default
  37. // Spacing
  38. $block-spacing: 1.5rem !default
  39. // Responsiveness
  40. // The container horizontal gap, which acts as the offset for breakpoints
  41. $gap: 32px !default
  42. // 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
  43. $tablet: 769px !default
  44. // 960px container + 4rem
  45. $desktop: 960px + (2 * $gap) !default
  46. // 1152px container + 4rem
  47. $widescreen: 1152px + (2 * $gap) !default
  48. $widescreen-enabled: true !default
  49. // 1344px container + 4rem
  50. $fullhd: 1344px + (2 * $gap) !default
  51. $fullhd-enabled: true !default
  52. // Miscellaneous
  53. $easing: ease-out !default
  54. $radius-small: 2px !default
  55. $radius: 4px !default
  56. $radius-large: 6px !default
  57. $radius-rounded: 290486px !default
  58. $speed: 86ms !default
  59. // Flags
  60. $variable-columns: true !default