@tmorrow/cre8-design-tokens 1.0.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (320) hide show
  1. package/README.md +109 -0
  2. package/dist/favicon.svg +7 -0
  3. package/dist/index.html +231 -0
  4. package/dist/index.json +1 -0
  5. package/dist/leaf.png +0 -0
  6. package/dist/leafDS.png +0 -0
  7. package/dist/project.json +1 -0
  8. package/dist/sb-addons/essentials-actions-1/manager-bundle.js +49 -0
  9. package/dist/sb-addons/essentials-actions-1/manager-bundle.js.LEGAL.txt +0 -0
  10. package/dist/sb-addons/essentials-backgrounds-2/manager-bundle.js +12 -0
  11. package/dist/sb-addons/essentials-backgrounds-2/manager-bundle.js.LEGAL.txt +0 -0
  12. package/dist/sb-addons/essentials-controls-0/manager-bundle.js +108 -0
  13. package/dist/sb-addons/essentials-controls-0/manager-bundle.js.LEGAL.txt +18 -0
  14. package/dist/sb-addons/essentials-measure-5/manager-bundle.js +3 -0
  15. package/dist/sb-addons/essentials-measure-5/manager-bundle.js.LEGAL.txt +0 -0
  16. package/dist/sb-addons/essentials-outline-6/manager-bundle.js +3 -0
  17. package/dist/sb-addons/essentials-outline-6/manager-bundle.js.LEGAL.txt +0 -0
  18. package/dist/sb-addons/essentials-toolbars-4/manager-bundle.js +3 -0
  19. package/dist/sb-addons/essentials-toolbars-4/manager-bundle.js.LEGAL.txt +0 -0
  20. package/dist/sb-addons/essentials-viewport-3/manager-bundle.js +3 -0
  21. package/dist/sb-addons/essentials-viewport-3/manager-bundle.js.LEGAL.txt +0 -0
  22. package/dist/sb-addons/storybook-9/manager-bundle.css +1 -0
  23. package/dist/sb-addons/storybook-9/manager-bundle.css.LEGAL.txt +0 -0
  24. package/dist/sb-addons/storybook-9/manager-bundle.js +9 -0
  25. package/dist/sb-addons/storybook-9/manager-bundle.js.LEGAL.txt +0 -0
  26. package/dist/sb-addons/storybook-design-token-7/manager-bundle.js +59 -0
  27. package/dist/sb-addons/storybook-design-token-7/manager-bundle.js.LEGAL.txt +0 -0
  28. package/dist/sb-addons/storybook-design-token-8/manager-bundle.js +59 -0
  29. package/dist/sb-addons/storybook-design-token-8/manager-bundle.js.LEGAL.txt +0 -0
  30. package/dist/sb-common-assets/fonts.css +31 -0
  31. package/dist/sb-common-assets/nunito-sans-bold-italic.woff2 +0 -0
  32. package/dist/sb-common-assets/nunito-sans-bold.woff2 +0 -0
  33. package/dist/sb-common-assets/nunito-sans-italic.woff2 +0 -0
  34. package/dist/sb-common-assets/nunito-sans-regular.woff2 +0 -0
  35. package/dist/sb-manager/WithTooltip-V3YHNWJZ-MXTFSDU5.js +1 -0
  36. package/dist/sb-manager/chunk-5QAFKPS7.js +7 -0
  37. package/dist/sb-manager/chunk-7PRFHFSS.js +9 -0
  38. package/dist/sb-manager/chunk-XE6LDGTE.js +406 -0
  39. package/dist/sb-manager/chunk-YDUB7CS6.js +348 -0
  40. package/dist/sb-manager/chunk-ZEU7PDD3.js +1 -0
  41. package/dist/sb-manager/formatter-SWP5E3XI-7BGIK6BL.js +156 -0
  42. package/dist/sb-manager/globals-module-info.js +1 -0
  43. package/dist/sb-manager/globals.js +1 -0
  44. package/dist/sb-manager/index.js +1 -0
  45. package/dist/sb-manager/runtime.js +1 -0
  46. package/dist/sb-manager/syntaxhighlighter-MJWPISIS-JOSCT6CQ.js +1 -0
  47. package/dist/sb-preview/globals.js +1 -0
  48. package/dist/sb-preview/runtime.js +112 -0
  49. package/dist/stories.json +1 -0
  50. package/lib/react-native/brands/blue/tokens-brand.d.ts +542 -0
  51. package/lib/react-native/brands/blue/tokens-brand.js +885 -0
  52. package/lib/react-native/brands/blue-v1/tokens-brand.d.ts +516 -0
  53. package/lib/react-native/brands/blue-v1/tokens-brand.js +859 -0
  54. package/lib/react-native/brands/cre8/tokens-brand.d.ts +530 -0
  55. package/lib/react-native/brands/cre8/tokens-brand.js +873 -0
  56. package/lib/react-native/brands/femmecubator/tokens-brand.d.ts +131 -0
  57. package/lib/react-native/brands/femmecubator/tokens-brand.js +128 -0
  58. package/lib/react-native/brands/legacy/tokens-brand.d.ts +540 -0
  59. package/lib/react-native/brands/legacy/tokens-brand.js +883 -0
  60. package/lib/react-native/brands/marketing/tokens-brand.d.ts +548 -0
  61. package/lib/react-native/brands/marketing/tokens-brand.js +891 -0
  62. package/lib/react-native/brands/minimalist/tokens-brand.d.ts +538 -0
  63. package/lib/react-native/brands/minimalist/tokens-brand.js +881 -0
  64. package/lib/react-native/index.d.ts +20 -0
  65. package/lib/react-native/index.js +1 -0
  66. package/lib/support/brands/blue/blue-sass-support.scss +632 -0
  67. package/lib/support/brands/blue-v1/blue-v1-sass-support.scss +540 -0
  68. package/lib/support/brands/cre8/cre8-sass-support.scss +635 -0
  69. package/lib/support/brands/femmecubator/femmecubator-sass-support.scss +143 -0
  70. package/lib/support/brands/legacy/legacy-sass-support.scss +591 -0
  71. package/lib/support/brands/marketing/marketing-sass-support.scss +633 -0
  72. package/lib/support/brands/minimalist/minimalist-sass-support.scss +567 -0
  73. package/lib/web/brands/blue/_base.scss +142 -0
  74. package/lib/web/brands/blue/assets/fonts/ValueSans-Bold-Pro.woff2 +0 -0
  75. package/lib/web/brands/blue/assets/fonts/ValueSans-Medium-Pro.woff2 +0 -0
  76. package/lib/web/brands/blue/assets/fonts/ValueSansRegular-Pro.woff2 +0 -0
  77. package/lib/web/brands/blue/assets/fonts/ValueSerif-Bold-Pro.woff2 +0 -0
  78. package/lib/web/brands/blue/badge.scss +5 -0
  79. package/lib/web/brands/blue/bg.scss +35 -0
  80. package/lib/web/brands/blue/border-style.scss +5 -0
  81. package/lib/web/brands/blue/border.scss +21 -0
  82. package/lib/web/brands/blue/borderRadius.scss +15 -0
  83. package/lib/web/brands/blue/borderWidth.scss +11 -0
  84. package/lib/web/brands/blue/breakpoint.scss +9 -0
  85. package/lib/web/brands/blue/button.scss +225 -0
  86. package/lib/web/brands/blue/content.scss +29 -0
  87. package/lib/web/brands/blue/css/fonts.css +31 -0
  88. package/lib/web/brands/blue/css/tokens_blue.css +248 -0
  89. package/lib/web/brands/blue/css/tokens_brand.css +492 -0
  90. package/lib/web/brands/blue/desktop-menu.scss +5 -0
  91. package/lib/web/brands/blue/fontFamilies.scss +5 -0
  92. package/lib/web/brands/blue/fontSize.scss +17 -0
  93. package/lib/web/brands/blue/fontWeights.scss +7 -0
  94. package/lib/web/brands/blue/footer.scss +9 -0
  95. package/lib/web/brands/blue/header.scss +81 -0
  96. package/lib/web/brands/blue/icon-size.scss +6 -0
  97. package/lib/web/brands/blue/letterSpacing.scss +9 -0
  98. package/lib/web/brands/blue/lineHeights.scss +15 -0
  99. package/lib/web/brands/blue/link.scss +4 -0
  100. package/lib/web/brands/blue/paragraphIndent.scss +4 -0
  101. package/lib/web/brands/blue/paragraphSpacing.scss +4 -0
  102. package/lib/web/brands/blue/progress-meter.scss +4 -0
  103. package/lib/web/brands/blue/shadow.scss +8 -0
  104. package/lib/web/brands/blue/spacing.scss +21 -0
  105. package/lib/web/brands/blue/textCase.scss +5 -0
  106. package/lib/web/brands/blue/textDecoration.scss +5 -0
  107. package/lib/web/brands/blue/tokens-all-blue.scss +628 -0
  108. package/lib/web/brands/blue/tokens-brand.scss +31 -0
  109. package/lib/web/brands/blue-v1/_base.scss +76 -0
  110. package/lib/web/brands/blue-v1/assets/fonts/Montserrat-Bold.ttf +0 -0
  111. package/lib/web/brands/blue-v1/assets/fonts/Montserrat-Regular.ttf +0 -0
  112. package/lib/web/brands/blue-v1/assets/fonts/Montserrat-SemiBold.ttf +0 -0
  113. package/lib/web/brands/blue-v1/assets/fonts/OpenSans-Bold.ttf +0 -0
  114. package/lib/web/brands/blue-v1/assets/fonts/OpenSans-Regular.ttf +0 -0
  115. package/lib/web/brands/blue-v1/assets/fonts/OpenSans-SemiBold.ttf +0 -0
  116. package/lib/web/brands/blue-v1/badge.scss +5 -0
  117. package/lib/web/brands/blue-v1/bg.scss +34 -0
  118. package/lib/web/brands/blue-v1/border-style.scss +5 -0
  119. package/lib/web/brands/blue-v1/border.scss +21 -0
  120. package/lib/web/brands/blue-v1/borderRadius.scss +15 -0
  121. package/lib/web/brands/blue-v1/borderWidth.scss +11 -0
  122. package/lib/web/brands/blue-v1/breakpoint.scss +9 -0
  123. package/lib/web/brands/blue-v1/button.scss +199 -0
  124. package/lib/web/brands/blue-v1/content.scss +29 -0
  125. package/lib/web/brands/blue-v1/css/fonts.css +47 -0
  126. package/lib/web/brands/blue-v1/css/tokens_blue-v1.css +248 -0
  127. package/lib/web/brands/blue-v1/css/tokens_brand.css +464 -0
  128. package/lib/web/brands/blue-v1/desktop-menu.scss +5 -0
  129. package/lib/web/brands/blue-v1/fontFamilies.scss +5 -0
  130. package/lib/web/brands/blue-v1/fontSize.scss +17 -0
  131. package/lib/web/brands/blue-v1/fontWeights.scss +9 -0
  132. package/lib/web/brands/blue-v1/footer.scss +9 -0
  133. package/lib/web/brands/blue-v1/header.scss +79 -0
  134. package/lib/web/brands/blue-v1/icon-size.scss +6 -0
  135. package/lib/web/brands/blue-v1/letterSpacing.scss +9 -0
  136. package/lib/web/brands/blue-v1/lineHeights.scss +15 -0
  137. package/lib/web/brands/blue-v1/link.scss +4 -0
  138. package/lib/web/brands/blue-v1/paragraphIndent.scss +4 -0
  139. package/lib/web/brands/blue-v1/paragraphSpacing.scss +4 -0
  140. package/lib/web/brands/blue-v1/shadow.scss +8 -0
  141. package/lib/web/brands/blue-v1/spacing.scss +21 -0
  142. package/lib/web/brands/blue-v1/textCase.scss +5 -0
  143. package/lib/web/brands/blue-v1/textDecoration.scss +5 -0
  144. package/lib/web/brands/blue-v1/tokens-all-blue-v1.scss +534 -0
  145. package/lib/web/brands/blue-v1/tokens-brand.scss +30 -0
  146. package/lib/web/brands/cre8/_base.scss +157 -0
  147. package/lib/web/brands/cre8/assets/fonts/Inter-Bold.woff +0 -0
  148. package/lib/web/brands/cre8/assets/fonts/Inter-Bold.woff2 +0 -0
  149. package/lib/web/brands/cre8/assets/fonts/Inter-Medium.woff +0 -0
  150. package/lib/web/brands/cre8/assets/fonts/Inter-Medium.woff2 +0 -0
  151. package/lib/web/brands/cre8/assets/fonts/Inter-Regular.woff +0 -0
  152. package/lib/web/brands/cre8/assets/fonts/Inter-Regular.woff2 +0 -0
  153. package/lib/web/brands/cre8/assets/fonts/Inter-SemiBold.woff +0 -0
  154. package/lib/web/brands/cre8/assets/fonts/Inter-SemiBold.woff2 +0 -0
  155. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Bold.woff +0 -0
  156. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Bold.woff2 +0 -0
  157. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Medium.woff +0 -0
  158. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Medium.woff2 +0 -0
  159. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Regular.woff +0 -0
  160. package/lib/web/brands/cre8/assets/fonts/NB Akademie-Regular.woff2 +0 -0
  161. package/lib/web/brands/cre8/badge.scss +5 -0
  162. package/lib/web/brands/cre8/bg.scss +34 -0
  163. package/lib/web/brands/cre8/border-style.scss +5 -0
  164. package/lib/web/brands/cre8/border.scss +18 -0
  165. package/lib/web/brands/cre8/borderRadius.scss +15 -0
  166. package/lib/web/brands/cre8/borderWidth.scss +11 -0
  167. package/lib/web/brands/cre8/breakpoint.scss +9 -0
  168. package/lib/web/brands/cre8/button.scss +211 -0
  169. package/lib/web/brands/cre8/content.scss +29 -0
  170. package/lib/web/brands/cre8/css/fonts.css +35 -0
  171. package/lib/web/brands/cre8/css/tokens_brand.css +480 -0
  172. package/lib/web/brands/cre8/css/tokens_cre8.css +248 -0
  173. package/lib/web/brands/cre8/desktop-menu.scss +5 -0
  174. package/lib/web/brands/cre8/fontFamilies.scss +4 -0
  175. package/lib/web/brands/cre8/fontSize.scss +17 -0
  176. package/lib/web/brands/cre8/fontWeights.scss +7 -0
  177. package/lib/web/brands/cre8/footer.scss +8 -0
  178. package/lib/web/brands/cre8/header.scss +81 -0
  179. package/lib/web/brands/cre8/icon-size.scss +6 -0
  180. package/lib/web/brands/cre8/letterSpacing.scss +10 -0
  181. package/lib/web/brands/cre8/lineHeights.scss +22 -0
  182. package/lib/web/brands/cre8/link.scss +4 -0
  183. package/lib/web/brands/cre8/paragraphIndent.scss +4 -0
  184. package/lib/web/brands/cre8/paragraphSpacing.scss +4 -0
  185. package/lib/web/brands/cre8/progress-meter.scss +4 -0
  186. package/lib/web/brands/cre8/shadow.scss +8 -0
  187. package/lib/web/brands/cre8/spacing.scss +21 -0
  188. package/lib/web/brands/cre8/textCase.scss +5 -0
  189. package/lib/web/brands/cre8/textDecoration.scss +5 -0
  190. package/lib/web/brands/cre8/tokens-all-cre8.scss +631 -0
  191. package/lib/web/brands/cre8/tokens-brand.scss +31 -0
  192. package/lib/web/brands/femmecubator/base.scss +64 -0
  193. package/lib/web/brands/femmecubator/border.scss +15 -0
  194. package/lib/web/brands/femmecubator/color.scss +56 -0
  195. package/lib/web/brands/femmecubator/css/fonts.css +35 -0
  196. package/lib/web/brands/femmecubator/css/tokens_brand.css +142 -0
  197. package/lib/web/brands/femmecubator/spacing.scss +13 -0
  198. package/lib/web/brands/femmecubator/tokens-all-femmecubator.scss +139 -0
  199. package/lib/web/brands/femmecubator/tokens-brand.scss +8 -0
  200. package/lib/web/brands/legacy/_base.scss +103 -0
  201. package/lib/web/brands/legacy/assets/fonts/OFL.txt +93 -0
  202. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-300.woff +0 -0
  203. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-300.woff2 +0 -0
  204. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-500.woff +0 -0
  205. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-500.woff2 +0 -0
  206. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-regular.woff +0 -0
  207. package/lib/web/brands/legacy/assets/fonts/rubik-v4-latin-regular.woff2 +0 -0
  208. package/lib/web/brands/legacy/badge.scss +5 -0
  209. package/lib/web/brands/legacy/bg.scss +34 -0
  210. package/lib/web/brands/legacy/border-style.scss +5 -0
  211. package/lib/web/brands/legacy/border.scss +17 -0
  212. package/lib/web/brands/legacy/borderRadius.scss +15 -0
  213. package/lib/web/brands/legacy/borderWidth.scss +11 -0
  214. package/lib/web/brands/legacy/breakpoint.scss +9 -0
  215. package/lib/web/brands/legacy/button.scss +225 -0
  216. package/lib/web/brands/legacy/content.scss +29 -0
  217. package/lib/web/brands/legacy/css/fonts.css +26 -0
  218. package/lib/web/brands/legacy/css/tokens_brand.css +491 -0
  219. package/lib/web/brands/legacy/css/tokens_legacy.css +248 -0
  220. package/lib/web/brands/legacy/desktop-menu.scss +5 -0
  221. package/lib/web/brands/legacy/fontFamilies.scss +4 -0
  222. package/lib/web/brands/legacy/fontSize.scss +17 -0
  223. package/lib/web/brands/legacy/fontWeights.scss +10 -0
  224. package/lib/web/brands/legacy/footer.scss +9 -0
  225. package/lib/web/brands/legacy/header.scss +81 -0
  226. package/lib/web/brands/legacy/icon-size.scss +6 -0
  227. package/lib/web/brands/legacy/letterSpacing.scss +9 -0
  228. package/lib/web/brands/legacy/lineHeights.scss +19 -0
  229. package/lib/web/brands/legacy/paragraphIndent.scss +4 -0
  230. package/lib/web/brands/legacy/paragraphSpacing.scss +4 -0
  231. package/lib/web/brands/legacy/progress-meter.scss +4 -0
  232. package/lib/web/brands/legacy/shadow.scss +8 -0
  233. package/lib/web/brands/legacy/spacing.scss +20 -0
  234. package/lib/web/brands/legacy/textCase.scss +5 -0
  235. package/lib/web/brands/legacy/textDecoration.scss +5 -0
  236. package/lib/web/brands/legacy/tokens-all-legacy.scss +588 -0
  237. package/lib/web/brands/legacy/tokens-brand.scss +30 -0
  238. package/lib/web/brands/marketing/_base.scss +137 -0
  239. package/lib/web/brands/marketing/asset.scss +7 -0
  240. package/lib/web/brands/marketing/assets/fonts/Montserrat-Bold.ttf +0 -0
  241. package/lib/web/brands/marketing/assets/fonts/Montserrat-Medium.ttf +0 -0
  242. package/lib/web/brands/marketing/assets/fonts/Montserrat-Regular.ttf +0 -0
  243. package/lib/web/brands/marketing/assets/fonts/Montserrat-SemiBold.ttf +0 -0
  244. package/lib/web/brands/marketing/badge.scss +5 -0
  245. package/lib/web/brands/marketing/bg.scss +35 -0
  246. package/lib/web/brands/marketing/border-style.scss +5 -0
  247. package/lib/web/brands/marketing/border.scss +21 -0
  248. package/lib/web/brands/marketing/borderRadius.scss +15 -0
  249. package/lib/web/brands/marketing/borderWidth.scss +11 -0
  250. package/lib/web/brands/marketing/breakpoint.scss +9 -0
  251. package/lib/web/brands/marketing/button.scss +225 -0
  252. package/lib/web/brands/marketing/content.scss +29 -0
  253. package/lib/web/brands/marketing/css/fonts.css +31 -0
  254. package/lib/web/brands/marketing/css/tokens_brand.css +502 -0
  255. package/lib/web/brands/marketing/css/tokens_marketing.css +248 -0
  256. package/lib/web/brands/marketing/desktop-menu.scss +5 -0
  257. package/lib/web/brands/marketing/fontFamilies.scss +4 -0
  258. package/lib/web/brands/marketing/fontSize.scss +17 -0
  259. package/lib/web/brands/marketing/fontWeights.scss +7 -0
  260. package/lib/web/brands/marketing/footer.scss +9 -0
  261. package/lib/web/brands/marketing/header.scss +81 -0
  262. package/lib/web/brands/marketing/icon-size.scss +6 -0
  263. package/lib/web/brands/marketing/letterSpacing.scss +9 -0
  264. package/lib/web/brands/marketing/lineHeights.scss +22 -0
  265. package/lib/web/brands/marketing/link.scss +4 -0
  266. package/lib/web/brands/marketing/paragraphIndent.scss +4 -0
  267. package/lib/web/brands/marketing/paragraphSpacing.scss +4 -0
  268. package/lib/web/brands/marketing/progress-meter.scss +4 -0
  269. package/lib/web/brands/marketing/shadow.scss +8 -0
  270. package/lib/web/brands/marketing/spacing.scss +21 -0
  271. package/lib/web/brands/marketing/textCase.scss +5 -0
  272. package/lib/web/brands/marketing/textDecoration.scss +5 -0
  273. package/lib/web/brands/marketing/tokens-all-marketing.scss +633 -0
  274. package/lib/web/brands/marketing/tokens-brand.scss +32 -0
  275. package/lib/web/brands/minimalist/_base.scss +81 -0
  276. package/lib/web/brands/minimalist/asset.scss +6 -0
  277. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Bold.woff +0 -0
  278. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Bold.woff2 +0 -0
  279. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Light.woff +0 -0
  280. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Light.woff2 +0 -0
  281. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Regular.woff +0 -0
  282. package/lib/web/brands/minimalist/assets/fonts/Aeonik-Regular.woff2 +0 -0
  283. package/lib/web/brands/minimalist/badge.scss +5 -0
  284. package/lib/web/brands/minimalist/bg.scss +34 -0
  285. package/lib/web/brands/minimalist/border-style.scss +5 -0
  286. package/lib/web/brands/minimalist/border.scss +17 -0
  287. package/lib/web/brands/minimalist/borderRadius.scss +15 -0
  288. package/lib/web/brands/minimalist/borderWidth.scss +11 -0
  289. package/lib/web/brands/minimalist/breakpoint.scss +9 -0
  290. package/lib/web/brands/minimalist/button.scss +225 -0
  291. package/lib/web/brands/minimalist/content.scss +29 -0
  292. package/lib/web/brands/minimalist/css/fonts.css +26 -0
  293. package/lib/web/brands/minimalist/css/tokens_brand.css +492 -0
  294. package/lib/web/brands/minimalist/css/tokens_minimalist.css +248 -0
  295. package/lib/web/brands/minimalist/desktop-menu.scss +5 -0
  296. package/lib/web/brands/minimalist/fontFamilies.scss +4 -0
  297. package/lib/web/brands/minimalist/fontFamily.scss +4 -0
  298. package/lib/web/brands/minimalist/fontSize.scss +17 -0
  299. package/lib/web/brands/minimalist/fontWeights.scss +6 -0
  300. package/lib/web/brands/minimalist/footer.scss +9 -0
  301. package/lib/web/brands/minimalist/header.scss +81 -0
  302. package/lib/web/brands/minimalist/icon-size.scss +6 -0
  303. package/lib/web/brands/minimalist/letterSpacing.scss +9 -0
  304. package/lib/web/brands/minimalist/lineHeights.scss +20 -0
  305. package/lib/web/brands/minimalist/paragraphIndent.scss +4 -0
  306. package/lib/web/brands/minimalist/paragraphSpacing.scss +4 -0
  307. package/lib/web/brands/minimalist/progress-meter.scss +4 -0
  308. package/lib/web/brands/minimalist/shadow.scss +8 -0
  309. package/lib/web/brands/minimalist/spacing.scss +20 -0
  310. package/lib/web/brands/minimalist/textCase.scss +5 -0
  311. package/lib/web/brands/minimalist/textDecoration.scss +5 -0
  312. package/lib/web/brands/minimalist/tokens-all-minimalist.scss +567 -0
  313. package/lib/web/brands/minimalist/tokens-brand.scss +32 -0
  314. package/lib/web/cobrands/cobrand.css +98 -0
  315. package/lib/web/cobrands/cobrand_pbm.css +84 -0
  316. package/lib/web/cobrands/ers.css +123 -0
  317. package/lib/web/cobrands/trs.css +128 -0
  318. package/lib/web/layouts/breakpoints.scss +9 -0
  319. package/lib/web/mixins/typography-usage.scss +452 -0
  320. package/package.json +36 -0
package/lib/web/mixins/typography-usage.scss ADDED
@@ -0,0 +1,452 @@
1
+
2
+ // Typography usage provided via mixins.
3
+ // Typography applications are Tier 2 values that map
4
+ // typography presets to high-level UI applications.
5
+
6
+ @import '../layouts/breakpoints.scss';
7
+
8
+ @mixin cre8-typography-body-xlarge() {
9
+ font-family: var(--cre8-typography-body-xlarge-font-family);
10
+ font-size: var(--cre8-typography-body-xlarge-font-size);
11
+ font-weight: var(--cre8-typography-body-xlarge-font-weight);
12
+ line-height: var(--cre8-typography-body-xlarge-line-height);
13
+ text-decoration: var(--cre8-typography-body-xlarge-text-decoration);
14
+ text-transform: var(--cre8-typography-body-xlarge-text-transform);
15
+ };
16
+
17
+ @mixin cre8-typography-body-xlarge-strong() {
18
+ font-family: var(--cre8-typography-body-xlarge-strong-font-family);
19
+ font-size: var(--cre8-typography-body-xlarge-strong-font-size);
20
+ font-weight: var(--cre8-typography-body-xlarge-strong-font-weight);
21
+ line-height: var(--cre8-typography-body-xlarge-strong-line-height);
22
+ text-decoration: var(--cre8-typography-body-xlarge-strong-text-decoration);
23
+ text-transform: var(--cre8-typography-body-xlarge-strong-text-transform);
24
+ };
25
+
26
+ @mixin cre8-typography-body-xlarge-link() {
27
+ font-family: var(--cre8-typography-body-xlarge-link-font-family);
28
+ font-size: var(--cre8-typography-body-xlarge-link-font-size);
29
+ font-weight: var(--cre8-typography-body-xlarge-link-font-weight);
30
+ line-height: var(--cre8-typography-body-xlarge-link-line-height);
31
+ text-decoration: var(--cre8-typography-body-xlarge-link-text-decoration);
32
+ text-transform: var(--cre8-typography-body-xlarge-link-text-transform);
33
+ };
34
+
35
+ @mixin cre8-typography-body-large() {
36
+ font-family: var(--cre8-typography-body-large-font-family);
37
+ font-size: var(--cre8-typography-body-large-font-size);
38
+ font-weight: var(--cre8-typography-body-large-font-weight);
39
+ line-height: var(--cre8-typography-body-large-line-height);
40
+ text-decoration: var(--cre8-typography-body-large-text-decoration);
41
+ text-transform: var(--cre8-typography-body-large-text-transform);
42
+ };
43
+
44
+ @mixin cre8-typography-body-large-strong() {
45
+ font-family: var(--cre8-typography-body-large-strong-font-family);
46
+ font-size: var(--cre8-typography-body-large-strong-font-size);
47
+ font-weight: var(--cre8-typography-body-large-strong-font-weight);
48
+ line-height: var(--cre8-typography-body-large-strong-line-height);
49
+ text-decoration: var(--cre8-typography-body-large-strong-text-decoration);
50
+ text-transform: var(--cre8-typography-body-large-strong-text-transform);
51
+ };
52
+
53
+ @mixin cre8-typography-body-default() {
54
+ font-family: var(--cre8-typography-body-default-font-family);
55
+ font-size: var(--cre8-typography-body-default-font-size);
56
+ font-weight: var(--cre8-typography-body-default-font-weight);
57
+ line-height: var(--cre8-typography-body-default-line-height);
58
+ text-decoration: var(--cre8-typography-body-default-text-decoration);
59
+ text-transform: var(--cre8-typography-body-default-text-transform);
60
+ };
61
+
62
+ @mixin cre8-typography-body-default-strong() {
63
+ font-family: var(--cre8-typography-body-default-strong-font-family);
64
+ font-size: var(--cre8-typography-body-default-strong-font-size);
65
+ font-weight: var(--cre8-typography-body-default-strong-font-weight);
66
+ line-height: var(--cre8-typography-body-default-strong-line-height);
67
+ text-decoration: var(--cre8-typography-body-default-strong-text-decoration);
68
+ text-transform: var(--cre8-typography-body-default-strong-text-transform);
69
+ };
70
+
71
+ @mixin cre8-typography-body-small() {
72
+ font-family: var(--cre8-typography-body-small-font-family);
73
+ font-size: var(--cre8-typography-body-small-font-size);
74
+ font-weight: var(--cre8-typography-body-small-font-weight);
75
+ line-height: var(--cre8-typography-body-small-line-height);
76
+ text-decoration: var(--cre8-typography-body-small-text-decoration);
77
+ text-transform: var(--cre8-typography-body-small-text-transform);
78
+ };
79
+
80
+ @mixin cre8-typography-body-small-strong() {
81
+ font-family: var(--cre8-typography-body-small-strong-font-family);
82
+ font-size: var(--cre8-typography-body-small-strong-font-size);
83
+ font-weight: var(--cre8-typography-body-small-strong-font-weight);
84
+ line-height: var(--cre8-typography-body-small-strong-line-height);
85
+ text-decoration: var(--cre8-typography-body-small-strong-text-decoration);
86
+ text-transform: var(--cre8-typography-body-small-strong-text-transform);
87
+ };
88
+
89
+ @mixin cre8-typography-body-large-link() {
90
+ font-family: var(--cre8-typography-body-large-link-font-family);
91
+ font-size: var(--cre8-typography-body-large-link-font-size);
92
+ font-weight: var(--cre8-typography-body-large-link-font-weight);
93
+ line-height: var(--cre8-typography-body-large-link-line-height);
94
+ text-decoration: var(--cre8-typography-body-large-link-text-decoration);
95
+ text-transform: var(--cre8-typography-body-large-link-text-transform);
96
+ };
97
+
98
+ @mixin cre8-typography-body-default-link() {
99
+ font-family: var(--cre8-typography-body-default-link-font-family);
100
+ font-size: var(--cre8-typography-body-default-link-font-size);
101
+ font-weight: var(--cre8-typography-body-default-link-font-weight);
102
+ line-height: var(--cre8-typography-body-default-link-line-height);
103
+ text-decoration: var(--cre8-typography-body-default-link-text-decoration);
104
+ text-transform: var(--cre8-typography-body-default-link-text-transform);
105
+ };
106
+
107
+ @mixin cre8-typography-body-small-link() {
108
+ font-family: var(--cre8-typography-body-small-link-font-family);
109
+ font-size: var(--cre8-typography-body-small-link-font-size);
110
+ font-weight: var(--cre8-typography-body-small-link-font-weight);
111
+ line-height: var(--cre8-typography-body-small-link-line-height);
112
+ text-decoration: var(--cre8-typography-body-small-link-text-decoration);
113
+ text-transform: var(--cre8-typography-body-small-link-text-transform);
114
+ };
115
+
116
+ @mixin cre8-typography-label-default() {
117
+ font-family: var(--cre8-typography-label-default-font-family);
118
+ font-size: var(--cre8-typography-label-default-font-size);
119
+ font-weight: var(--cre8-typography-label-default-font-weight);
120
+ line-height: var(--cre8-typography-label-default-line-height);
121
+ text-decoration: var(--cre8-typography-label-default-text-decoration);
122
+ text-transform: var(--cre8-typography-label-default-text-transform);
123
+ };
124
+
125
+ @mixin cre8-typography-label-large() {
126
+ font-family: var(--cre8-typography-label-large-font-family);
127
+ font-size: var(--cre8-typography-label-large-font-size);
128
+ font-weight: var(--cre8-typography-label-large-font-weight);
129
+ line-height: var(--cre8-typography-label-large-line-height);
130
+ text-decoration: var(--cre8-typography-label-large-text-decoration);
131
+ text-transform: var(--cre8-typography-label-large-text-transform);
132
+ };
133
+
134
+ @mixin cre8-typography-label-small() {
135
+ font-family: var(--cre8-typography-label-small-font-family);
136
+ font-size: var(--cre8-typography-label-small-font-size);
137
+ font-weight: var(--cre8-typography-label-small-font-weight);
138
+ line-height: var(--cre8-typography-label-small-line-height);
139
+ text-decoration: var(--cre8-typography-label-small-text-decoration);
140
+ text-transform: var(--cre8-typography-label-small-text-transform);
141
+ };
142
+ @mixin cre8-typography-title-xlarge() {
143
+ font-family: var(--cre8-typography-title-xlarge-mobile-font-family);
144
+ font-size: var(--cre8-typography-title-xlarge-mobile-font-size);
145
+ font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);
146
+ line-height: var(--cre8-typography-title-xlarge-mobile-line-height);
147
+ text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);
148
+ text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);
149
+ @media all and (min-width: $cre8-breakpoint-md) {
150
+ font-family: var(--cre8-typography-title-xlarge-font-family);
151
+ font-size: var(--cre8-typography-title-xlarge-font-size);
152
+ font-weight: var(--cre8-typography-title-xlarge-font-weight);
153
+ line-height: var(--cre8-typography-title-xlarge-line-height);
154
+ text-decoration: var(--cre8-typography-title-xlarge-text-decoration);
155
+ text-transform: var(--cre8-typography-title-xlarge-text-transform);
156
+ }
157
+ };
158
+
159
+ @mixin cre8-typography-title-xlarge-mobile() {
160
+ font-family: var(--cre8-typography-title-xlarge-mobile-font-family);
161
+ font-size: var(--cre8-typography-title-xlarge-mobile-font-size);
162
+ font-weight: var(--cre8-typography-title-xlarge-mobile-font-weight);
163
+ line-height: var(--cre8-typography-title-xlarge-mobile-line-height);
164
+ text-decoration: var(--cre8-typography-title-xlarge-mobile-text-decoration);
165
+ text-transform: var(--cre8-typography-title-xlarge-mobile-text-transform);
166
+ };
167
+ @mixin cre8-typography-title-large() {
168
+ font-family: var(--cre8-typography-title-large-mobile-font-family);
169
+ font-size: var(--cre8-typography-title-large-mobile-font-size);
170
+ font-weight: var(--cre8-typography-title-large-mobile-font-weight);
171
+ line-height: var(--cre8-typography-title-large-mobile-line-height);
172
+ text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);
173
+ text-transform: var(--cre8-typography-title-large-mobile-text-transform);
174
+ @media all and (min-width: $cre8-breakpoint-md) {
175
+ font-family: var(--cre8-typography-title-large-font-family);
176
+ font-size: var(--cre8-typography-title-large-font-size);
177
+ font-weight: var(--cre8-typography-title-large-font-weight);
178
+ line-height: var(--cre8-typography-title-large-line-height);
179
+ text-decoration: var(--cre8-typography-title-large-text-decoration);
180
+ text-transform: var(--cre8-typography-title-large-text-transform);
181
+ }
182
+ };
183
+
184
+ @mixin cre8-typography-title-large-mobile() {
185
+ font-family: var(--cre8-typography-title-large-mobile-font-family);
186
+ font-size: var(--cre8-typography-title-large-mobile-font-size);
187
+ font-weight: var(--cre8-typography-title-large-mobile-font-weight);
188
+ line-height: var(--cre8-typography-title-large-mobile-line-height);
189
+ text-decoration: var(--cre8-typography-title-large-mobile-text-decoration);
190
+ text-transform: var(--cre8-typography-title-large-mobile-text-transform);
191
+ };
192
+ @mixin cre8-typography-title-default() {
193
+ font-family: var(--cre8-typography-title-default-mobile-font-family);
194
+ font-size: var(--cre8-typography-title-default-mobile-font-size);
195
+ font-weight: var(--cre8-typography-title-default-mobile-font-weight);
196
+ line-height: var(--cre8-typography-title-default-mobile-line-height);
197
+ text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);
198
+ text-transform: var(--cre8-typography-title-default-mobile-text-transform);
199
+ @media all and (min-width: $cre8-breakpoint-md) {
200
+ font-family: var(--cre8-typography-title-default-font-family);
201
+ font-size: var(--cre8-typography-title-default-font-size);
202
+ font-weight: var(--cre8-typography-title-default-font-weight);
203
+ line-height: var(--cre8-typography-title-default-line-height);
204
+ text-decoration: var(--cre8-typography-title-default-text-decoration);
205
+ text-transform: var(--cre8-typography-title-default-text-transform);
206
+ }
207
+ };
208
+
209
+ @mixin cre8-typography-title-default-mobile() {
210
+ font-family: var(--cre8-typography-title-default-mobile-font-family);
211
+ font-size: var(--cre8-typography-title-default-mobile-font-size);
212
+ font-weight: var(--cre8-typography-title-default-mobile-font-weight);
213
+ line-height: var(--cre8-typography-title-default-mobile-line-height);
214
+ text-decoration: var(--cre8-typography-title-default-mobile-text-decoration);
215
+ text-transform: var(--cre8-typography-title-default-mobile-text-transform);
216
+ };
217
+ @mixin cre8-typography-title-small() {
218
+ font-family: var(--cre8-typography-title-small-mobile-font-family);
219
+ font-size: var(--cre8-typography-title-small-mobile-font-size);
220
+ font-weight: var(--cre8-typography-title-small-mobile-font-weight);
221
+ line-height: var(--cre8-typography-title-small-mobile-line-height);
222
+ text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
223
+ text-transform: var(--cre8-typography-title-small-mobile-text-transform);
224
+ @media all and (min-width: $cre8-breakpoint-md) {
225
+ font-family: var(--cre8-typography-title-small-font-family);
226
+ font-size: var(--cre8-typography-title-small-font-size);
227
+ font-weight: var(--cre8-typography-title-small-font-weight);
228
+ line-height: var(--cre8-typography-title-small-line-height);
229
+ text-decoration: var(--cre8-typography-title-small-text-decoration);
230
+ text-transform: var(--cre8-typography-title-small-text-transform);
231
+ }
232
+ };
233
+
234
+ @mixin cre8-typography-title-small-mobile() {
235
+ font-family: var(--cre8-typography-title-small-mobile-font-family);
236
+ font-size: var(--cre8-typography-title-small-mobile-font-size);
237
+ font-weight: var(--cre8-typography-title-small-mobile-font-weight);
238
+ line-height: var(--cre8-typography-title-small-mobile-line-height);
239
+ text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
240
+ text-transform: var(--cre8-typography-title-small-mobile-text-transform);
241
+ };
242
+ @mixin cre8-typography-headline-large() {
243
+ font-family: var(--cre8-typography-headline-large-mobile-font-family);
244
+ font-size: var(--cre8-typography-headline-large-mobile-font-size);
245
+ font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
246
+ line-height: var(--cre8-typography-headline-large-mobile-line-height);
247
+ text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
248
+ text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
249
+ @media all and (min-width: $cre8-breakpoint-md) {
250
+ font-family: var(--cre8-typography-headline-large-font-family);
251
+ font-size: var(--cre8-typography-headline-large-font-size);
252
+ font-weight: var(--cre8-typography-headline-large-font-weight);
253
+ line-height: var(--cre8-typography-headline-large-line-height);
254
+ text-decoration: var(--cre8-typography-headline-large-text-decoration);
255
+ text-transform: var(--cre8-typography-headline-large-text-transform);
256
+ }
257
+ };
258
+
259
+ @mixin cre8-typography-headline-large-mobile() {
260
+ font-family: var(--cre8-typography-headline-large-mobile-font-family);
261
+ font-size: var(--cre8-typography-headline-large-mobile-font-size);
262
+ font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
263
+ line-height: var(--cre8-typography-headline-large-mobile-line-height);
264
+ text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
265
+ text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
266
+ };
267
+ @mixin cre8-typography-headline-default() {
268
+ font-family: var(--cre8-typography-headline-default-mobile-font-family);
269
+ font-size: var(--cre8-typography-headline-default-mobile-font-size);
270
+ font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
271
+ line-height: var(--cre8-typography-headline-default-mobile-line-height);
272
+ text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
273
+ text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
274
+ @media all and (min-width: $cre8-breakpoint-md) {
275
+ font-family: var(--cre8-typography-headline-default-font-family);
276
+ font-size: var(--cre8-typography-headline-default-font-size);
277
+ font-weight: var(--cre8-typography-headline-default-font-weight);
278
+ line-height: var(--cre8-typography-headline-default-line-height);
279
+ text-decoration: var(--cre8-typography-headline-default-text-decoration);
280
+ text-transform: var(--cre8-typography-headline-default-text-transform);
281
+ }
282
+ };
283
+
284
+ @mixin cre8-typography-headline-default-mobile() {
285
+ font-family: var(--cre8-typography-headline-default-mobile-font-family);
286
+ font-size: var(--cre8-typography-headline-default-mobile-font-size);
287
+ font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
288
+ line-height: var(--cre8-typography-headline-default-mobile-line-height);
289
+ text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
290
+ text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
291
+ };
292
+ @mixin cre8-typography-headline-small() {
293
+ font-family: var(--cre8-typography-headline-small-mobile-font-family);
294
+ font-size: var(--cre8-typography-headline-small-mobile-font-size);
295
+ font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
296
+ line-height: var(--cre8-typography-headline-small-mobile-line-height);
297
+ text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
298
+ text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
299
+ @media all and (min-width: $cre8-breakpoint-md) {
300
+ font-family: var(--cre8-typography-headline-small-font-family);
301
+ font-size: var(--cre8-typography-headline-small-font-size);
302
+ font-weight: var(--cre8-typography-headline-small-font-weight);
303
+ line-height: var(--cre8-typography-headline-small-line-height);
304
+ text-decoration: var(--cre8-typography-headline-small-text-decoration);
305
+ text-transform: var(--cre8-typography-headline-small-text-transform);
306
+ }
307
+ };
308
+
309
+ @mixin cre8-typography-headline-small-mobile() {
310
+ font-family: var(--cre8-typography-headline-small-mobile-font-family);
311
+ font-size: var(--cre8-typography-headline-small-mobile-font-size);
312
+ font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
313
+ line-height: var(--cre8-typography-headline-small-mobile-line-height);
314
+ text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
315
+ text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
316
+ };
317
+ @mixin cre8-typography-headline-xsmall() {
318
+ font-family: var(--cre8-typography-headline-xsmall-mobile-font-family);
319
+ font-size: var(--cre8-typography-headline-xsmall-mobile-font-size);
320
+ font-weight: var(--cre8-typography-headline-xsmall-mobile-font-weight);
321
+ line-height: var(--cre8-typography-headline-xsmall-mobile-line-height);
322
+ text-decoration: var(--cre8-typography-headline-xsmall-mobile-text-decoration);
323
+ text-transform: var(--cre8-typography-headline-xsmall-mobile-text-transform);
324
+ @media all and (min-width: $cre8-breakpoint-md) {
325
+ font-family: var(--cre8-typography-headline-xsmall-font-family);
326
+ font-size: var(--cre8-typography-headline-xsmall-font-size);
327
+ font-weight: var(--cre8-typography-headline-xsmall-font-weight);
328
+ line-height: var(--cre8-typography-headline-xsmall-line-height);
329
+ text-decoration: var(--cre8-typography-headline-xsmall-text-decoration);
330
+ text-transform: var(--cre8-typography-headline-xsmall-text-transform);
331
+ }
332
+ };
333
+
334
+ @mixin cre8-typography-headline-xsmall-mobile() {
335
+ font-family: var(--cre8-typography-headline-xsmall-mobile-font-family);
336
+ font-size: var(--cre8-typography-headline-xsmall-mobile-font-size);
337
+ font-weight: var(--cre8-typography-headline-xsmall-mobile-font-weight);
338
+ line-height: var(--cre8-typography-headline-xsmall-mobile-line-height);
339
+ text-decoration: var(--cre8-typography-headline-xsmall-mobile-text-decoration);
340
+ text-transform: var(--cre8-typography-headline-xsmall-mobile-text-transform);
341
+ };
342
+ @mixin cre8-typography-display-large() {
343
+ font-family: var(--cre8-typography-display-large-mobile-font-family);
344
+ font-size: var(--cre8-typography-display-large-mobile-font-size);
345
+ font-weight: var(--cre8-typography-display-large-mobile-font-weight);
346
+ line-height: var(--cre8-typography-display-large-mobile-line-height);
347
+ text-decoration: var(--cre8-typography-display-large-mobile-text-decoration);
348
+ text-transform: var(--cre8-typography-display-large-mobile-text-transform);
349
+ @media all and (min-width: $cre8-breakpoint-md) {
350
+ font-family: var(--cre8-typography-display-large-font-family);
351
+ font-size: var(--cre8-typography-display-large-font-size);
352
+ font-weight: var(--cre8-typography-display-large-font-weight);
353
+ line-height: var(--cre8-typography-display-large-line-height);
354
+ text-decoration: var(--cre8-typography-display-large-text-decoration);
355
+ text-transform: var(--cre8-typography-display-large-text-transform);
356
+ }
357
+ };
358
+
359
+ @mixin cre8-typography-display-large-mobile() {
360
+ font-family: var(--cre8-typography-display-large-mobile-font-family);
361
+ font-size: var(--cre8-typography-display-large-mobile-font-size);
362
+ font-weight: var(--cre8-typography-display-large-mobile-font-weight);
363
+ line-height: var(--cre8-typography-display-large-mobile-line-height);
364
+ text-decoration: var(--cre8-typography-display-large-mobile-text-decoration);
365
+ text-transform: var(--cre8-typography-display-large-mobile-text-transform);
366
+ };
367
+ @mixin cre8-typography-display-default() {
368
+ font-family: var(--cre8-typography-display-default-mobile-font-family);
369
+ font-size: var(--cre8-typography-display-default-mobile-font-size);
370
+ font-weight: var(--cre8-typography-display-default-mobile-font-weight);
371
+ line-height: var(--cre8-typography-display-default-mobile-line-height);
372
+ text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
373
+ text-transform: var(--cre8-typography-display-default-mobile-text-transform);
374
+ @media all and (min-width: $cre8-breakpoint-md) {
375
+ font-family: var(--cre8-typography-display-default-font-family);
376
+ font-size: var(--cre8-typography-display-default-font-size);
377
+ font-weight: var(--cre8-typography-display-default-font-weight);
378
+ line-height: var(--cre8-typography-display-default-line-height);
379
+ text-decoration: var(--cre8-typography-display-default-text-decoration);
380
+ text-transform: var(--cre8-typography-display-default-text-transform);
381
+ }
382
+ };
383
+
384
+ @mixin cre8-typography-display-default-mobile() {
385
+ font-family: var(--cre8-typography-display-default-mobile-font-family);
386
+ font-size: var(--cre8-typography-display-default-mobile-font-size);
387
+ font-weight: var(--cre8-typography-display-default-mobile-font-weight);
388
+ line-height: var(--cre8-typography-display-default-mobile-line-height);
389
+ text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
390
+ text-transform: var(--cre8-typography-display-default-mobile-text-transform);
391
+ };
392
+ @mixin cre8-typography-display-small() {
393
+ font-family: var(--cre8-typography-display-small-mobile-font-family);
394
+ font-size: var(--cre8-typography-display-small-mobile-font-size);
395
+ font-weight: var(--cre8-typography-display-small-mobile-font-weight);
396
+ line-height: var(--cre8-typography-display-small-mobile-line-height);
397
+ text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
398
+ text-transform: var(--cre8-typography-display-small-mobile-text-transform);
399
+ @media all and (min-width: $cre8-breakpoint-md) {
400
+ font-family: var(--cre8-typography-display-small-font-family);
401
+ font-size: var(--cre8-typography-display-small-font-size);
402
+ font-weight: var(--cre8-typography-display-small-font-weight);
403
+ line-height: var(--cre8-typography-display-small-line-height);
404
+ text-decoration: var(--cre8-typography-display-small-text-decoration);
405
+ text-transform: var(--cre8-typography-display-small-text-transform);
406
+ }
407
+ };
408
+
409
+ @mixin cre8-typography-display-small-mobile() {
410
+ font-family: var(--cre8-typography-display-small-mobile-font-family);
411
+ font-size: var(--cre8-typography-display-small-mobile-font-size);
412
+ font-weight: var(--cre8-typography-display-small-mobile-font-weight);
413
+ line-height: var(--cre8-typography-display-small-mobile-line-height);
414
+ text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
415
+ text-transform: var(--cre8-typography-display-small-mobile-text-transform);
416
+ };
417
+
418
+ @mixin cre8-typography-meta-default() {
419
+ font-family: var(--cre8-typography-meta-default-font-family);
420
+ font-size: var(--cre8-typography-meta-default-font-size);
421
+ font-weight: var(--cre8-typography-meta-default-font-weight);
422
+ line-height: var(--cre8-typography-meta-default-line-height);
423
+ text-decoration: var(--cre8-typography-meta-default-text-decoration);
424
+ text-transform: var(--cre8-typography-meta-default-text-transform);
425
+ };
426
+
427
+ @mixin cre8-typography-meta-default-sentence-case() {
428
+ font-family: var(--cre8-typography-meta-default-sentence-case-font-family);
429
+ font-size: var(--cre8-typography-meta-default-sentence-case-font-size);
430
+ font-weight: var(--cre8-typography-meta-default-sentence-case-font-weight);
431
+ line-height: var(--cre8-typography-meta-default-sentence-case-line-height);
432
+ text-decoration: var(--cre8-typography-meta-default-sentence-case-text-decoration);
433
+ text-transform: var(--cre8-typography-meta-default-sentence-case-text-transform);
434
+ };
435
+
436
+ @mixin cre8-typography-meta-large() {
437
+ font-family: var(--cre8-typography-meta-large-font-family);
438
+ font-size: var(--cre8-typography-meta-large-font-size);
439
+ font-weight: var(--cre8-typography-meta-large-font-weight);
440
+ line-height: var(--cre8-typography-meta-large-line-height);
441
+ text-decoration: var(--cre8-typography-meta-large-text-decoration);
442
+ text-transform: var(--cre8-typography-meta-large-text-transform);
443
+ };
444
+
445
+ @mixin cre8-typography-meta-small() {
446
+ font-family: var(--cre8-typography-meta-small-font-family);
447
+ font-size: var(--cre8-typography-meta-small-font-size);
448
+ font-weight: var(--cre8-typography-meta-small-font-weight);
449
+ line-height: var(--cre8-typography-meta-small-line-height);
450
+ text-decoration: var(--cre8-typography-meta-small-text-decoration);
451
+ text-transform: var(--cre8-typography-meta-small-text-transform);
452
+ };
package/package.json ADDED
@@ -0,0 +1,36 @@
1
+ {
2
+ "name": "@tmorrow/cre8-design-tokens",
3
+ "version": "1.0.16",
4
+ "description": "",
5
+ "repository": {
6
+ "type": "git"
7
+ },
8
+ "main": "lib/",
9
+ "files": [
10
+ "README.md",
11
+ "lib",
12
+ "dist"
13
+ ],
14
+ "scripts": {
15
+ "build": "npm run clean && node ./build.js && npm run build-storybook",
16
+ "clean": "rm -rf lib",
17
+ "storybook": "storybook dev -p 6008",
18
+ "build-storybook": "storybook build --output-dir dist/"
19
+ },
20
+ "devDependencies": {
21
+ "@storybook/addon-essentials": "^7.3.1",
22
+ "@storybook/addon-mdx-gfm": "^7.3.1",
23
+ "@storybook/react": "^7.3.1",
24
+ "@storybook/react-webpack5": "^7.3.1",
25
+ "color2k": "^2.0.3",
26
+ "deepmerge": "^4.3.1",
27
+ "eslint-plugin-json": "^3.1.0",
28
+ "lodash": "^4.17.21",
29
+ "react": "^18.2.0",
30
+ "react-dom": "^18.2.0",
31
+ "storybook": "^7.3.1",
32
+ "storybook-design-token": "next",
33
+ "style-dictionary": "^3.0.0",
34
+ "typescript": "4.8.2"
35
+ }
36
+ }