initial-variables.sass 2.2 KB

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