_config-child-theme-deep.scss 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381
  1. /**
  2. * Redefine Sass map values for child theme output.
  3. * - See: style-child-theme.scss
  4. */
  5. @import "../../varia/sass/abstracts/color-variables";
  6. /**
  7. * Global
  8. */
  9. // Vertical Rhythm Multiplier
  10. $baseline-unit: 8px;
  11. $typescale-root: 18px; // Set 16px/1em default on html
  12. $typescale-base: 1rem; // Set 1em default on body == $typescale-root;
  13. $typescale-ratio: 1.2; // Run ratio math on 1em == $typescale-base * $typescale-root;
  14. $config-global: (
  15. /* Fonts */
  16. "font": (
  17. /* Font Family */
  18. "family": (
  19. "primary": (
  20. "fallback": "\"Oswald\"\, sans-serif",
  21. "css-var": "--font-headings",
  22. ),
  23. "secondary": (
  24. "fallback": "\"Source Sans Pro\"\, Arial\, sans-serif",
  25. "css-var": "--font-base",
  26. ),
  27. "code": "\"Courier 10 Pitch\"\, Courier\, monospace",
  28. "ui": (
  29. "fallback": "-apple-system\, BlinkMacSystemFont\, \"Segoe UI\"\, \"Roboto\"\, \"Oxygen\"\, \"Ubuntu\"\, \"Cantarell\"\, \"Fira Sans\"\, \"Droid Sans\"\, \"Helvetica Neue\"\, sans-serif",
  30. "css-var": "--font-base",
  31. ),
  32. ),
  33. /* Font Size */
  34. "size": (
  35. "root": $typescale-root,
  36. "ratio": $typescale-ratio,
  37. "xs": ($typescale-base / $typescale-ratio / $typescale-ratio),
  38. "sm": ($typescale-base / $typescale-ratio),
  39. "base": $typescale-base,
  40. "md": ($typescale-base * $typescale-ratio),
  41. "lg": ($typescale-base * $typescale-ratio * $typescale-ratio),
  42. "xl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio),
  43. "xxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
  44. "xxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
  45. "xxxxl": ($typescale-base * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio * $typescale-ratio),
  46. ),
  47. /* Letter Spacing */
  48. "letter-spacing": (
  49. "base": normal,
  50. "xs": normal,
  51. "sm": normal,
  52. "md": normal,
  53. "lg": normal,
  54. "xl": normal,
  55. "xxl": normal,
  56. "xxxl": normal,
  57. ),
  58. /* Line Height */
  59. "line-height": (
  60. "base": strip-unit($typescale-base),
  61. "body": 1.78,
  62. "heading": 1.125,
  63. ),
  64. ),
  65. /* Spacing */
  66. "spacing": (
  67. "unit": (2 * $baseline-unit), // 16px
  68. "measure": unset, // Use ch units here. ie: 60ch = 60 character max-width
  69. "horizontal": (2 * $baseline-unit), // 16px
  70. "vertical": (4 * $baseline-unit), // 32px matches default spacing in the editor.
  71. ),
  72. /* Breakpoints */
  73. "breakpoint": (
  74. "sm": 560px,
  75. "md": 640px,
  76. "lg": 782px,
  77. "xl": 1024px,
  78. "xxl": 1280px,
  79. ),
  80. /* Elevation */
  81. "elevation": (
  82. "none": 0px 0px 0px 0px rgba( 0, 0, 0, 0 ),
  83. "2dp": 0px 0px 4px 2px rgba( 0, 0, 0, 0.2 ),
  84. "4dp": 0px 0px 8px 2px rgba( 0, 0, 0, 0.2 ),
  85. "6dp": 2px 2px 4px 2px rgba( 0, 0, 0, 0.2 ),
  86. "8dp": 2px 2px 8px 0px rgba( 0, 0, 0, 0.2 ),
  87. "10dp": 4px 4px 8px 0px rgba( 0, 0, 0, 0.2 ),
  88. ),
  89. /* Border radius */
  90. "border-radius": (
  91. "sm": (0.5 * $typescale-root),
  92. "md": (0.75 * $typescale-root),
  93. "lg": $typescale-root,
  94. "pill": (10 * $typescale-root),
  95. ),
  96. );
  97. $child-theme-colors: map-extend($color-variables, (
  98. "color": (
  99. "tertiary": (
  100. "default": "var(--wp--preset--color--tertiary)"
  101. )
  102. )
  103. ), true);
  104. $config-global: map-merge($child-theme-colors, $config-global);
  105. /**
  106. * Elements
  107. */
  108. $config-elements: (
  109. "form": (
  110. // Colors
  111. "color": (
  112. "text": map-deep-get($config-global, "color", "black"),
  113. "border": map-deep-get($config-global, "color", "border", "default"),
  114. "border-focus": map-deep-get($config-global, "color", "primary", "hover"),
  115. ),
  116. // Fonts
  117. "font": (
  118. "family": (
  119. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  120. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  121. ),
  122. "line-height": map-deep-get($config-global, "font", "line-height", "md"),
  123. "size": map-deep-get($config-global, "font", "size", "md"),
  124. "weight": bold,
  125. ),
  126. // Borders
  127. "border": (
  128. "width": 1px,
  129. "radius": 3px,
  130. ),
  131. "padding": calc( 0.33 * #{map-deep-get($config-global, "spacing", "unit")} ),
  132. ),
  133. );
  134. /**
  135. * Button
  136. */
  137. $config-button: (
  138. // Colors
  139. "color": (
  140. "text": map-deep-get($config-global, "color", "background", "default"),
  141. "text-hover": map-deep-get($config-global, "color", "background", "default"),
  142. "background": map-deep-get($config-global, "color", "secondary", "default"),
  143. "background-hover": map-deep-get($config-global, "color", "secondary", "hover"),
  144. ),
  145. // Fonts
  146. "font": (
  147. "family": (
  148. "fallback": map-deep-get($config-global, "font", "family", "ui", "fallback"),
  149. "css-var": map-deep-get($config-global, "font", "family", "ui", "css-var"),
  150. ),
  151. "size": map-deep-get($config-global, "font", "size", "xs"),
  152. "weight": 600,
  153. "line-height": 1,
  154. ),
  155. // Borders
  156. "border-radius": map-deep-get($config-global, "border-radius", "sm"),
  157. "border-width": 2px,
  158. // Padding
  159. "padding": (
  160. "vertical": map-deep-get($config-global, "spacing", "unit"),
  161. "horizontal": map-deep-get($config-global, "spacing", "unit"),
  162. ),
  163. );
  164. /**
  165. * Cover
  166. */
  167. $config-cover: (
  168. "height": #{15 * map-deep-get($config-global, "spacing", "vertical")},
  169. "color": (
  170. "foreground": #{map-deep-get($config-global, "color", "background", "default")},
  171. "background": #{map-deep-get($config-global, "color", "foreground", "default")},
  172. )
  173. );
  174. /**
  175. * Heading
  176. */
  177. $config-heading: (
  178. // Fonts & Typography
  179. "font": (
  180. // Family
  181. "family": (
  182. "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
  183. "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
  184. ),
  185. // Size
  186. "size": (
  187. "h6": map-deep-get($config-global, "font", "size", "sm"),
  188. "h5": map-deep-get($config-global, "font", "size", "base"),
  189. "h4": map-deep-get($config-global, "font", "size", "md"),
  190. "h3": map-deep-get($config-global, "font", "size", "lg"),
  191. "h2": map-deep-get($config-global, "font", "size", "xl"),
  192. "h1": map-deep-get($config-global, "font", "size", "xxl"),
  193. ),
  194. // Letter spacing
  195. "line-height": (
  196. "h6": map-deep-get($config-global, "font", "line-height", "heading"),
  197. "h5": map-deep-get($config-global, "font", "line-height", "heading"),
  198. "h4": map-deep-get($config-global, "font", "line-height", "heading"),
  199. "h3": map-deep-get($config-global, "font", "line-height", "heading"),
  200. "h2": map-deep-get($config-global, "font", "line-height", "heading"),
  201. "h1": map-deep-get($config-global, "font", "line-height", "heading"),
  202. ),
  203. // Letter spacing
  204. "letter-spacing": (
  205. "h6": map-deep-get($config-global, "font", "letter-spacing", "sm"),
  206. "h5": map-deep-get($config-global, "font", "letter-spacing", "md"),
  207. "h4": map-deep-get($config-global, "font", "letter-spacing", "lg"),
  208. "h3": map-deep-get($config-global, "font", "letter-spacing", "xl"),
  209. "h2": map-deep-get($config-global, "font", "letter-spacing", "xxl"),
  210. "h1": map-deep-get($config-global, "font", "letter-spacing", "xxxl"),
  211. ),
  212. // Font Weight
  213. "weight": 300,
  214. ),
  215. );
  216. /**
  217. * List
  218. */
  219. $config-list: (
  220. // Fonts
  221. "font": (
  222. "family": (
  223. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  224. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  225. ),
  226. ),
  227. );
  228. /**
  229. * Pullquote
  230. */
  231. $config-pullquote: (
  232. // Font
  233. "font": (
  234. "family": (
  235. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  236. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  237. ),
  238. ),
  239. // Border
  240. "color": (
  241. "border": #{map-deep-get($config-global, "color", "border", "default")},
  242. "background": #{map-deep-get($config-global, "color", "primary", "default")},
  243. ),
  244. // Border
  245. "border": (
  246. "width": #{0.5 * $baseline-unit},
  247. ),
  248. );
  249. /**
  250. * Quote
  251. */
  252. $config-quote: (
  253. // Font
  254. "font": (
  255. "family": (
  256. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  257. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  258. ),
  259. ),
  260. );
  261. /**
  262. * Separator
  263. */
  264. $config-separator: (
  265. "height": #{0.125 * map-deep-get($config-global, "spacing", "unit")},
  266. "width": #{6 * map-deep-get($config-global, "spacing", "horizontal")},
  267. );
  268. /**
  269. * Header
  270. */
  271. $config-header: (
  272. "branding": (
  273. // Colors
  274. "color": (
  275. "text": map-deep-get($config-global, "color", "foreground", "light"),
  276. "link": map-deep-get($config-global, "color", "primary", "default"),
  277. "link-hover": map-deep-get($config-global, "color", "primary", "hover"),
  278. ),
  279. // Fonts & Typography
  280. "title": (
  281. // Fonts
  282. "font": (
  283. "family": (
  284. "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
  285. "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
  286. ),
  287. "size": map-deep-get($config-global, "font", "size", "md"),
  288. "weight": 300,
  289. "line-height": 1.3333,
  290. ),
  291. ),
  292. // Fonts & Typography
  293. "description": (
  294. // Fonts
  295. "font": (
  296. "family": (
  297. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  298. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  299. ),
  300. "size": map-deep-get($config-global, "font", "size", "sm"),
  301. ),
  302. ),
  303. ),
  304. "main-nav": (
  305. // Colors
  306. "color": (
  307. "text": map-deep-get($config-global, "color", "foreground", "default"),
  308. "link": map-deep-get($config-global, "color", "primary", "default"),
  309. "link-hover": map-deep-get($config-global, "color", "primary", "hover"),
  310. ),
  311. // Fonts
  312. "font": (
  313. "family": (
  314. "fallback": map-deep-get($config-global, "font", "family", "secondary", "fallback"),
  315. "css-var": map-deep-get($config-global, "font", "family", "secondary", "css-var"),
  316. ),
  317. "size": map-deep-get($config-global, "font", "size", "md"),
  318. "weight": 700,
  319. "line-height": 1,
  320. ),
  321. "link-padding": map-deep-get($config-global, "spacing", "unit"),
  322. ),
  323. "social-nav": (
  324. // Colors
  325. "color": (
  326. "link": map-deep-get($config-global, "color", "primary", "default"),
  327. "link-hover": map-deep-get($config-global, "color", "primary", "hover"),
  328. ),
  329. "link-padding": calc( 0.5 * calc(0.66 * #{map-deep-get($config-global, "spacing", "unit")} ) ),
  330. ),
  331. );
  332. /**
  333. * Footer
  334. */
  335. $config-footer: (
  336. // Colors
  337. "color": (
  338. "text": map-deep-get($config-global, "color", "primary", "default"),
  339. "link": map-deep-get($config-global, "color", "secondary", "default"),
  340. "link-hover": map-deep-get($config-global, "color", "secondary", "hover"),
  341. ),
  342. // Fonts
  343. "font": (
  344. "family": (
  345. "fallback": map-deep-get($config-global, "font", "family", "primary", "fallback"),
  346. "css-var": map-deep-get($config-global, "font", "family", "primary", "css-var"),
  347. ),
  348. "size": map-deep-get($config-global, "font", "size", "sm"),
  349. "line-height": map-deep-get($config-global, "font", "line-height", "sm"),
  350. ),
  351. );