@tmorrow/cre8-wc 1.0.25 → 1.1.1

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 (214) hide show
  1. package/cdn/cre8-wc.esm.js +9082 -15604
  2. package/cdn/cre8-wc.esm.js.map +1 -1
  3. package/cdn/cre8-wc.min.js +1231 -8308
  4. package/cdn/cre8-wc.min.js.map +1 -1
  5. package/lib/cdn-entry.d.ts +20 -2
  6. package/lib/cdn-entry.d.ts.map +1 -1
  7. package/lib/components/accordion/accordion.js +18 -64
  8. package/lib/components/accordion/accordion.styles.d.ts.map +1 -1
  9. package/lib/components/accordion-item/accordion-item.js +35 -238
  10. package/lib/components/accordion-item/accordion-item.styles.d.ts.map +1 -1
  11. package/lib/components/alert/alert.js +56 -221
  12. package/lib/components/alert/alert.styles.d.ts.map +1 -1
  13. package/lib/components/badge/badge.js +33 -164
  14. package/lib/components/badge/badge.styles.d.ts.map +1 -1
  15. package/lib/components/band/band.js +15 -46
  16. package/lib/components/band/band.styles.d.ts.map +1 -1
  17. package/lib/components/breadcrumbs/breadcrumbs.js +14 -33
  18. package/lib/components/breadcrumbs/breadcrumbs.styles.d.ts.map +1 -1
  19. package/lib/components/breadcrumbs-item/breadcrumbs-item.js +10 -45
  20. package/lib/components/breadcrumbs-item/breadcrumbs-item.styles.d.ts.map +1 -1
  21. package/lib/components/button/button.js +16 -16
  22. package/lib/components/button-group/button-group.js +19 -50
  23. package/lib/components/button-group/button-group.styles.d.ts.map +1 -1
  24. package/lib/components/card/card.js +17 -130
  25. package/lib/components/card/card.styles.d.ts.map +1 -1
  26. package/lib/components/chart/chart.js +137 -223
  27. package/lib/components/chart/chart.styles.d.ts.map +1 -1
  28. package/lib/components/checkbox-field/checkbox-field.js +26 -59
  29. package/lib/components/checkbox-field/checkbox-field.styles.d.ts.map +1 -1
  30. package/lib/components/checkbox-field-item/checkbox-field-item.d.ts +0 -5
  31. package/lib/components/checkbox-field-item/checkbox-field-item.d.ts.map +1 -1
  32. package/lib/components/checkbox-field-item/checkbox-field-item.js +42 -212
  33. package/lib/components/checkbox-field-item/checkbox-field-item.styles.d.ts.map +1 -1
  34. package/lib/components/contexts/form-internals-context.d.ts +30 -0
  35. package/lib/components/contexts/form-internals-context.d.ts.map +1 -0
  36. package/lib/components/cre8-form-element.d.ts +98 -24
  37. package/lib/components/cre8-form-element.d.ts.map +1 -1
  38. package/lib/components/cre8-form-element.js +221 -22
  39. package/lib/components/danger-button/danger-button.js +53 -582
  40. package/lib/components/danger-button/danger-button.styles.d.ts.map +1 -1
  41. package/lib/components/date-picker/calendar/calendar.styles.d.ts.map +1 -1
  42. package/lib/components/date-picker/calendar-month-modal/calendar-month-modal.styles.d.ts.map +1 -1
  43. package/lib/components/date-picker/calendar-navigation/calendar-navigation.styles.d.ts.map +1 -1
  44. package/lib/components/date-picker/calendar-year-modal/calendar-year-modal.styles.d.ts.map +1 -1
  45. package/lib/components/date-picker/date-picker.js +262 -499
  46. package/lib/components/date-picker/date-picker.styles.d.ts.map +1 -1
  47. package/lib/components/divider/divider.js +20 -61
  48. package/lib/components/divider/divider.styles.d.ts.map +1 -1
  49. package/lib/components/dropdown/dropdown.js +34 -107
  50. package/lib/components/dropdown/dropdown.styles.d.ts.map +1 -1
  51. package/lib/components/dropdown-item/dropdown-item.js +18 -49
  52. package/lib/components/dropdown-item/dropdown-item.styles.d.ts.map +1 -1
  53. package/lib/components/feature/feature.js +19 -81
  54. package/lib/components/feature/feature.styles.d.ts.map +1 -1
  55. package/lib/components/field/field.js +12 -146
  56. package/lib/components/field/field.styles.d.ts.map +1 -1
  57. package/lib/components/field-note/field-note.js +22 -66
  58. package/lib/components/field-note/field-note.styles.d.ts.map +1 -1
  59. package/lib/components/footer/footer.js +10 -29
  60. package/lib/components/footer/footer.styles.d.ts.map +1 -1
  61. package/lib/components/global-nav/global-nav.js +20 -43
  62. package/lib/components/global-nav/global-nav.styles.d.ts.map +1 -1
  63. package/lib/components/global-nav-item/global-nav-item.js +26 -105
  64. package/lib/components/global-nav-item/global-nav-item.styles.d.ts.map +1 -1
  65. package/lib/components/grid/grid.js +15 -337
  66. package/lib/components/grid/grid.styles.d.ts.map +1 -1
  67. package/lib/components/grid-item/grid-item.js +7 -15
  68. package/lib/components/grid-item/grid-item.styles.d.ts.map +1 -1
  69. package/lib/components/header/header.js +17 -80
  70. package/lib/components/header/header.styles.d.ts.map +1 -1
  71. package/lib/components/heading/heading.js +16 -153
  72. package/lib/components/heading/heading.styles.d.ts.map +1 -1
  73. package/lib/components/hero/hero.js +17 -149
  74. package/lib/components/hero/hero.styles.d.ts.map +1 -1
  75. package/lib/components/icon/icon.js +1 -1
  76. package/lib/components/icon/icon.styles.d.ts.map +1 -1
  77. package/lib/components/inline-alert/inline-alert.js +53 -214
  78. package/lib/components/inline-alert/inline-alert.styles.d.ts.map +1 -1
  79. package/lib/components/layout/layout.js +20 -53
  80. package/lib/components/layout/layout.styles.d.ts.map +1 -1
  81. package/lib/components/layout-container/layout-container.js +20 -43
  82. package/lib/components/layout-container/layout-container.styles.d.ts.map +1 -1
  83. package/lib/components/layout-section/layout-section.js +20 -29
  84. package/lib/components/layout-section/layout-section.styles.d.ts.map +1 -1
  85. package/lib/components/linelength-container/linelength-container.js +7 -15
  86. package/lib/components/linelength-container/linelength-container.styles.d.ts.map +1 -1
  87. package/lib/components/link/link.js +33 -228
  88. package/lib/components/link/link.styles.d.ts.map +1 -1
  89. package/lib/components/link-list/link-list.js +23 -129
  90. package/lib/components/link-list/link-list.styles.d.ts.map +1 -1
  91. package/lib/components/link-list-item/link-list-item.js +19 -80
  92. package/lib/components/link-list-item/link-list-item.styles.d.ts.map +1 -1
  93. package/lib/components/list/list.js +17 -67
  94. package/lib/components/list/list.styles.d.ts.map +1 -1
  95. package/lib/components/list-item/list-item.js +11 -16
  96. package/lib/components/list-item/list-item.styles.d.ts.map +1 -1
  97. package/lib/components/loading-spinner/loading-spinner.js +13 -157
  98. package/lib/components/loading-spinner/loading-spinner.styles.d.ts.map +1 -1
  99. package/lib/components/logo/logo.js +20 -30
  100. package/lib/components/logo/logo.styles.d.ts.map +1 -1
  101. package/lib/components/main/main.js +18 -42
  102. package/lib/components/main/main.styles.d.ts.map +1 -1
  103. package/lib/components/modal/modal.js +50 -215
  104. package/lib/components/modal/modal.styles.d.ts.map +1 -1
  105. package/lib/components/multi-select/multi-select.js +57 -222
  106. package/lib/components/multi-select/multi-select.styles.d.ts.map +1 -1
  107. package/lib/components/nav-container/nav-container.js +5 -40
  108. package/lib/components/nav-container/nav-container.styles.d.ts.map +1 -1
  109. package/lib/components/page-header/page-header.js +19 -54
  110. package/lib/components/page-header/page-header.styles.d.ts.map +1 -1
  111. package/lib/components/pagination/page-counter/page-counter.styles.d.ts.map +1 -1
  112. package/lib/components/pagination/pagination.js +102 -183
  113. package/lib/components/pagination/pagination.styles.d.ts.map +1 -1
  114. package/lib/components/percent-bar/percent-bar.js +22 -50
  115. package/lib/components/percent-bar/percent-bar.styles.d.ts.map +1 -1
  116. package/lib/components/popover/popover.js +51 -220
  117. package/lib/components/popover/popover.styles.d.ts.map +1 -1
  118. package/lib/components/primary-nav/primary-nav.js +17 -51
  119. package/lib/components/primary-nav/primary-nav.styles.d.ts.map +1 -1
  120. package/lib/components/primary-nav-item/primary-nav-item.js +24 -191
  121. package/lib/components/primary-nav-item/primary-nav-item.styles.d.ts.map +1 -1
  122. package/lib/components/progress-meter/progress-meter.js +23 -127
  123. package/lib/components/progress-meter/progress-meter.styles.d.ts.map +1 -1
  124. package/lib/components/progress-steps/progress-steps.styles.d.ts.map +1 -1
  125. package/lib/components/progress-steps-item/progress-steps-item.js +27 -118
  126. package/lib/components/progress-steps-item/progress-steps-item.styles.d.ts.map +1 -1
  127. package/lib/components/radio-field/radio-field.js +28 -64
  128. package/lib/components/radio-field/radio-field.styles.d.ts.map +1 -1
  129. package/lib/components/radio-field-item/radio-field-item.d.ts +0 -4
  130. package/lib/components/radio-field-item/radio-field-item.d.ts.map +1 -1
  131. package/lib/components/radio-field-item/radio-field-item.js +69 -207
  132. package/lib/components/radio-field-item/radio-field-item.styles.d.ts.map +1 -1
  133. package/lib/components/remove-tag/remove-tag.js +36 -129
  134. package/lib/components/remove-tag/remove-tag.styles.d.ts.map +1 -1
  135. package/lib/components/section/section.js +19 -50
  136. package/lib/components/section/section.styles.d.ts.map +1 -1
  137. package/lib/components/select/select.d.ts +6 -10
  138. package/lib/components/select/select.d.ts.map +1 -1
  139. package/lib/components/select/select.js +67 -135
  140. package/lib/components/select/select.styles.d.ts.map +1 -1
  141. package/lib/components/select-tile/select-tile.d.ts +0 -4
  142. package/lib/components/select-tile/select-tile.d.ts.map +1 -1
  143. package/lib/components/select-tile/select-tile.js +21 -448
  144. package/lib/components/select-tile/select-tile.styles.d.ts.map +1 -1
  145. package/lib/components/select-tile-list/select-tile-list.js +24 -62
  146. package/lib/components/select-tile-list/select-tile-list.styles.d.ts.map +1 -1
  147. package/lib/components/skeleton-loader/skeleton-loader.js +19 -73
  148. package/lib/components/skeleton-loader/skeleton-loader.styles.d.ts.map +1 -1
  149. package/lib/components/split-button/split-button.js +21 -37
  150. package/lib/components/split-button/split-button.styles.d.ts.map +1 -1
  151. package/lib/components/submenu/submenu.js +8 -18
  152. package/lib/components/submenu/submenu.styles.d.ts.map +1 -1
  153. package/lib/components/submenu-item/submenu-item.js +21 -42
  154. package/lib/components/submenu-item/submenu-item.styles.d.ts.map +1 -1
  155. package/lib/components/tab/tab.js +17 -100
  156. package/lib/components/tab/tab.styles.d.ts.map +1 -1
  157. package/lib/components/tab-panel/tab-panel.js +18 -52
  158. package/lib/components/tab-panel/tab-panel.styles.d.ts.map +1 -1
  159. package/lib/components/table/table.js +21 -73
  160. package/lib/components/table/table.styles.d.ts.map +1 -1
  161. package/lib/components/table-body/table-body.js +12 -24
  162. package/lib/components/table-body/table-body.styles.d.ts.map +1 -1
  163. package/lib/components/table-cell/table-cell.js +29 -69
  164. package/lib/components/table-cell/table-cell.styles.d.ts.map +1 -1
  165. package/lib/components/table-header/table-header.js +8 -39
  166. package/lib/components/table-header/table-header.styles.d.ts.map +1 -1
  167. package/lib/components/table-header-cell/table-header-cell.js +18 -37
  168. package/lib/components/table-header-cell/table-header-cell.styles.d.ts.map +1 -1
  169. package/lib/components/table-object/table-object.js +13 -32
  170. package/lib/components/table-object/table-object.styles.d.ts.map +1 -1
  171. package/lib/components/table-row/table-row.js +33 -139
  172. package/lib/components/table-row/table-row.styles.d.ts.map +1 -1
  173. package/lib/components/tabs/tabs.d.ts.map +1 -1
  174. package/lib/components/tabs/tabs.js +58 -159
  175. package/lib/components/tabs/tabs.styles.d.ts.map +1 -1
  176. package/lib/components/tag/tag.js +46 -161
  177. package/lib/components/tag/tag.styles.d.ts.map +1 -1
  178. package/lib/components/tag-list/tag-list.js +20 -51
  179. package/lib/components/tag-list/tag-list.styles.d.ts.map +1 -1
  180. package/lib/components/tertiary-nav/tertiary-nav.js +21 -54
  181. package/lib/components/tertiary-nav/tertiary-nav.styles.d.ts.map +1 -1
  182. package/lib/components/tertiary-nav-item/tertiary-nav-item.js +18 -68
  183. package/lib/components/tertiary-nav-item/tertiary-nav-item.styles.d.ts.map +1 -1
  184. package/lib/components/text-link/text-link.js +20 -85
  185. package/lib/components/text-link/text-link.styles.d.ts.map +1 -1
  186. package/lib/components/text-passage/text-passage-light-dom.styles.d.ts.map +1 -1
  187. package/lib/components/text-passage/text-passage.js +17 -189
  188. package/lib/components/text-passage/text-passage.styles.d.ts.map +1 -1
  189. package/lib/components/tooltip/tooltip.js +57 -248
  190. package/lib/components/tooltip/tooltip.styles.d.ts.map +1 -1
  191. package/lib/components/utility-nav/utility-nav.js +23 -56
  192. package/lib/components/utility-nav/utility-nav.styles.d.ts.map +1 -1
  193. package/lib/components/utility-nav-item/utility-nav-item.js +28 -83
  194. package/lib/components/utility-nav-item/utility-nav-item.styles.d.ts.map +1 -1
  195. package/lib/design-tokens/brands/blue/css/tokens_blue.module.d.ts.map +1 -1
  196. package/lib/design-tokens/brands/bolt/tokens_bolt.theme.d.ts.map +1 -1
  197. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts +3 -0
  198. package/lib/design-tokens/brands/cre8-a2ui/css/tokens_cre8-a2ui.module.d.ts.map +1 -0
  199. package/lib/design-tokens/brands/cre8-legacy/css/tokens_cre8-legacy.module.d.ts.map +1 -1
  200. package/lib/design-tokens/brands/femmecubator/css/tokens_femmecubator2.module.d.ts.map +1 -1
  201. package/lib/design-tokens/brands/legacy/css/tokens_legacy.module.d.ts.map +1 -1
  202. package/lib/design-tokens/brands/marketing/css/tokens_marketing.module.d.ts.map +1 -1
  203. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts +2 -2
  204. package/lib/design-tokens/brands/minimalist/css/tokens_minimalist.module.d.ts.map +1 -1
  205. package/lib/design-tokens/brands/starbucks/tokens_starbucks.module.d.ts.map +1 -1
  206. package/lib/design-tokens/core/scss/theming/component.scss +6 -6
  207. package/lib/design-tokens/core/scss/theming/functions.scss +4 -0
  208. package/lib/design-tokens/core/scss/theming/spacing.scss +60 -60
  209. package/lib/design-tokens/core/scss/theming/variables.scss +11 -11
  210. package/lib/design-tokens/mixins/typography-usage.scss +277 -277
  211. package/lib/design-tokens/tokens_netflix.theme.d.ts.map +1 -1
  212. package/lib/{icon-DImqxDiW.js → icon-D22g8aWB.js} +35 -138
  213. package/lib/index.js +1 -1
  214. package/package.json +12 -5
package/lib/design-tokens/mixins/typography-usage.scss CHANGED
@@ -4,180 +4,140 @@
4
4
  // typography presets to high-level UI applications.
5
5
 
6
6
  @import '../layouts/breakpoints.scss';
7
- @mixin cre8-typography-display-large() {
8
- font-family: var(--cre8-typography-display-large-mobile-font-family);
9
- font-size: var(--cre8-typography-display-large-mobile-font-size);
10
- font-weight: var(--cre8-typography-display-large-mobile-font-weight);
11
- line-height: var(--cre8-typography-display-large-mobile-line-height);
12
- text-decoration: var(--cre8-typography-display-large-mobile-text-decoration);
13
- text-transform: var(--cre8-typography-display-large-mobile-text-transform);
14
- @media all and (min-width: $cre8-breakpoint-md) {
15
- font-family: var(--cre8-typography-display-large-font-family);
16
- font-size: var(--cre8-typography-display-large-font-size);
17
- font-weight: var(--cre8-typography-display-large-font-weight);
18
- line-height: var(--cre8-typography-display-large-line-height);
19
- text-decoration: var(--cre8-typography-display-large-text-decoration);
20
- text-transform: var(--cre8-typography-display-large-text-transform);
21
- }
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);
22
15
  };
23
16
 
24
- @mixin cre8-typography-display-large-mobile() {
25
- font-family: var(--cre8-typography-display-large-mobile-font-family);
26
- font-size: var(--cre8-typography-display-large-mobile-font-size);
27
- font-weight: var(--cre8-typography-display-large-mobile-font-weight);
28
- line-height: var(--cre8-typography-display-large-mobile-line-height);
29
- text-decoration: var(--cre8-typography-display-large-mobile-text-decoration);
30
- text-transform: var(--cre8-typography-display-large-mobile-text-transform);
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);
31
24
  };
32
- @mixin cre8-typography-display-default() {
33
- font-family: var(--cre8-typography-display-default-mobile-font-family);
34
- font-size: var(--cre8-typography-display-default-mobile-font-size);
35
- font-weight: var(--cre8-typography-display-default-mobile-font-weight);
36
- line-height: var(--cre8-typography-display-default-mobile-line-height);
37
- text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
38
- text-transform: var(--cre8-typography-display-default-mobile-text-transform);
39
- @media all and (min-width: $cre8-breakpoint-md) {
40
- font-family: var(--cre8-typography-display-default-font-family);
41
- font-size: var(--cre8-typography-display-default-font-size);
42
- font-weight: var(--cre8-typography-display-default-font-weight);
43
- line-height: var(--cre8-typography-display-default-line-height);
44
- text-decoration: var(--cre8-typography-display-default-text-decoration);
45
- text-transform: var(--cre8-typography-display-default-text-transform);
46
- }
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);
47
33
  };
48
34
 
49
- @mixin cre8-typography-display-default-mobile() {
50
- font-family: var(--cre8-typography-display-default-mobile-font-family);
51
- font-size: var(--cre8-typography-display-default-mobile-font-size);
52
- font-weight: var(--cre8-typography-display-default-mobile-font-weight);
53
- line-height: var(--cre8-typography-display-default-mobile-line-height);
54
- text-decoration: var(--cre8-typography-display-default-mobile-text-decoration);
55
- text-transform: var(--cre8-typography-display-default-mobile-text-transform);
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);
56
42
  };
57
- @mixin cre8-typography-display-small() {
58
- font-family: var(--cre8-typography-display-small-mobile-font-family);
59
- font-size: var(--cre8-typography-display-small-mobile-font-size);
60
- font-weight: var(--cre8-typography-display-small-mobile-font-weight);
61
- line-height: var(--cre8-typography-display-small-mobile-line-height);
62
- text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
63
- text-transform: var(--cre8-typography-display-small-mobile-text-transform);
64
- @media all and (min-width: $cre8-breakpoint-md) {
65
- font-family: var(--cre8-typography-display-small-font-family);
66
- font-size: var(--cre8-typography-display-small-font-size);
67
- font-weight: var(--cre8-typography-display-small-font-weight);
68
- line-height: var(--cre8-typography-display-small-line-height);
69
- text-decoration: var(--cre8-typography-display-small-text-decoration);
70
- text-transform: var(--cre8-typography-display-small-text-transform);
71
- }
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);
72
51
  };
73
52
 
74
- @mixin cre8-typography-display-small-mobile() {
75
- font-family: var(--cre8-typography-display-small-mobile-font-family);
76
- font-size: var(--cre8-typography-display-small-mobile-font-size);
77
- font-weight: var(--cre8-typography-display-small-mobile-font-weight);
78
- line-height: var(--cre8-typography-display-small-mobile-line-height);
79
- text-decoration: var(--cre8-typography-display-small-mobile-text-decoration);
80
- text-transform: var(--cre8-typography-display-small-mobile-text-transform);
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);
81
60
  };
82
- @mixin cre8-typography-headline-large() {
83
- font-family: var(--cre8-typography-headline-large-mobile-font-family);
84
- font-size: var(--cre8-typography-headline-large-mobile-font-size);
85
- font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
86
- line-height: var(--cre8-typography-headline-large-mobile-line-height);
87
- text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
88
- text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
89
- @media all and (min-width: $cre8-breakpoint-md) {
90
- font-family: var(--cre8-typography-headline-large-font-family);
91
- font-size: var(--cre8-typography-headline-large-font-size);
92
- font-weight: var(--cre8-typography-headline-large-font-weight);
93
- line-height: var(--cre8-typography-headline-large-line-height);
94
- text-decoration: var(--cre8-typography-headline-large-text-decoration);
95
- text-transform: var(--cre8-typography-headline-large-text-transform);
96
- }
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);
97
69
  };
98
70
 
99
- @mixin cre8-typography-headline-large-mobile() {
100
- font-family: var(--cre8-typography-headline-large-mobile-font-family);
101
- font-size: var(--cre8-typography-headline-large-mobile-font-size);
102
- font-weight: var(--cre8-typography-headline-large-mobile-font-weight);
103
- line-height: var(--cre8-typography-headline-large-mobile-line-height);
104
- text-decoration: var(--cre8-typography-headline-large-mobile-text-decoration);
105
- text-transform: var(--cre8-typography-headline-large-mobile-text-transform);
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);
106
78
  };
107
- @mixin cre8-typography-headline-default() {
108
- font-family: var(--cre8-typography-headline-default-mobile-font-family);
109
- font-size: var(--cre8-typography-headline-default-mobile-font-size);
110
- font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
111
- line-height: var(--cre8-typography-headline-default-mobile-line-height);
112
- text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
113
- text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
114
- @media all and (min-width: $cre8-breakpoint-md) {
115
- font-family: var(--cre8-typography-headline-default-font-family);
116
- font-size: var(--cre8-typography-headline-default-font-size);
117
- font-weight: var(--cre8-typography-headline-default-font-weight);
118
- line-height: var(--cre8-typography-headline-default-line-height);
119
- text-decoration: var(--cre8-typography-headline-default-text-decoration);
120
- text-transform: var(--cre8-typography-headline-default-text-transform);
121
- }
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);
122
87
  };
123
88
 
124
- @mixin cre8-typography-headline-default-mobile() {
125
- font-family: var(--cre8-typography-headline-default-mobile-font-family);
126
- font-size: var(--cre8-typography-headline-default-mobile-font-size);
127
- font-weight: var(--cre8-typography-headline-default-mobile-font-weight);
128
- line-height: var(--cre8-typography-headline-default-mobile-line-height);
129
- text-decoration: var(--cre8-typography-headline-default-mobile-text-decoration);
130
- text-transform: var(--cre8-typography-headline-default-mobile-text-transform);
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);
131
96
  };
132
- @mixin cre8-typography-headline-small() {
133
- font-family: var(--cre8-typography-headline-small-mobile-font-family);
134
- font-size: var(--cre8-typography-headline-small-mobile-font-size);
135
- font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
136
- line-height: var(--cre8-typography-headline-small-mobile-line-height);
137
- text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
138
- text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
139
- @media all and (min-width: $cre8-breakpoint-md) {
140
- font-family: var(--cre8-typography-headline-small-font-family);
141
- font-size: var(--cre8-typography-headline-small-font-size);
142
- font-weight: var(--cre8-typography-headline-small-font-weight);
143
- line-height: var(--cre8-typography-headline-small-line-height);
144
- text-decoration: var(--cre8-typography-headline-small-text-decoration);
145
- text-transform: var(--cre8-typography-headline-small-text-transform);
146
- }
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);
147
105
  };
148
106
 
149
- @mixin cre8-typography-headline-small-mobile() {
150
- font-family: var(--cre8-typography-headline-small-mobile-font-family);
151
- font-size: var(--cre8-typography-headline-small-mobile-font-size);
152
- font-weight: var(--cre8-typography-headline-small-mobile-font-weight);
153
- line-height: var(--cre8-typography-headline-small-mobile-line-height);
154
- text-decoration: var(--cre8-typography-headline-small-mobile-text-decoration);
155
- text-transform: var(--cre8-typography-headline-small-mobile-text-transform);
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);
156
114
  };
157
- @mixin cre8-typography-headline-xsmall() {
158
- font-family: var(--cre8-typography-headline-xsmall-mobile-font-family);
159
- font-size: var(--cre8-typography-headline-xsmall-mobile-font-size);
160
- font-weight: var(--cre8-typography-headline-xsmall-mobile-font-weight);
161
- line-height: var(--cre8-typography-headline-xsmall-mobile-line-height);
162
- text-decoration: var(--cre8-typography-headline-xsmall-mobile-text-decoration);
163
- text-transform: var(--cre8-typography-headline-xsmall-mobile-text-transform);
164
- @media all and (min-width: $cre8-breakpoint-md) {
165
- font-family: var(--cre8-typography-headline-xsmall-font-family);
166
- font-size: var(--cre8-typography-headline-xsmall-font-size);
167
- font-weight: var(--cre8-typography-headline-xsmall-font-weight);
168
- line-height: var(--cre8-typography-headline-xsmall-line-height);
169
- text-decoration: var(--cre8-typography-headline-xsmall-text-decoration);
170
- text-transform: var(--cre8-typography-headline-xsmall-text-transform);
171
- }
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);
172
123
  };
173
124
 
174
- @mixin cre8-typography-headline-xsmall-mobile() {
175
- font-family: var(--cre8-typography-headline-xsmall-mobile-font-family);
176
- font-size: var(--cre8-typography-headline-xsmall-mobile-font-size);
177
- font-weight: var(--cre8-typography-headline-xsmall-mobile-font-weight);
178
- line-height: var(--cre8-typography-headline-xsmall-mobile-line-height);
179
- text-decoration: var(--cre8-typography-headline-xsmall-mobile-text-decoration);
180
- text-transform: var(--cre8-typography-headline-xsmall-mobile-text-transform);
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);
181
141
  };
182
142
  @mixin cre8-typography-title-xlarge() {
183
143
  font-family: var(--cre8-typography-title-xlarge-mobile-font-family);
@@ -279,149 +239,180 @@
279
239
  text-decoration: var(--cre8-typography-title-small-mobile-text-decoration);
280
240
  text-transform: var(--cre8-typography-title-small-mobile-text-transform);
281
241
  };
282
-
283
- @mixin cre8-typography-label-large() {
284
- font-family: var(--cre8-typography-label-large-font-family);
285
- font-size: var(--cre8-typography-label-large-font-size);
286
- font-weight: var(--cre8-typography-label-large-font-weight);
287
- line-height: var(--cre8-typography-label-large-line-height);
288
- text-decoration: var(--cre8-typography-label-large-text-decoration);
289
- text-transform: var(--cre8-typography-label-large-text-transform);
290
- };
291
-
292
- @mixin cre8-typography-label-default() {
293
- font-family: var(--cre8-typography-label-default-font-family);
294
- font-size: var(--cre8-typography-label-default-font-size);
295
- font-weight: var(--cre8-typography-label-default-font-weight);
296
- line-height: var(--cre8-typography-label-default-line-height);
297
- text-decoration: var(--cre8-typography-label-default-text-decoration);
298
- text-transform: var(--cre8-typography-label-default-text-transform);
299
- };
300
-
301
- @mixin cre8-typography-label-small() {
302
- font-family: var(--cre8-typography-label-small-font-family);
303
- font-size: var(--cre8-typography-label-small-font-size);
304
- font-weight: var(--cre8-typography-label-small-font-weight);
305
- line-height: var(--cre8-typography-label-small-line-height);
306
- text-decoration: var(--cre8-typography-label-small-text-decoration);
307
- text-transform: var(--cre8-typography-label-small-text-transform);
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
+ }
308
257
  };
309
258
 
310
- @mixin cre8-typography-body-xlarge() {
311
- font-family: var(--cre8-typography-body-xlarge-font-family);
312
- font-size: var(--cre8-typography-body-xlarge-font-size);
313
- font-weight: var(--cre8-typography-body-xlarge-font-weight);
314
- line-height: var(--cre8-typography-body-xlarge-line-height);
315
- text-decoration: var(--cre8-typography-body-xlarge-text-decoration);
316
- text-transform: var(--cre8-typography-body-xlarge-text-transform);
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);
317
266
  };
318
-
319
- @mixin cre8-typography-body-xlarge-strong() {
320
- font-family: var(--cre8-typography-body-xlarge-strong-font-family);
321
- font-size: var(--cre8-typography-body-xlarge-strong-font-size);
322
- font-weight: var(--cre8-typography-body-xlarge-strong-font-weight);
323
- line-height: var(--cre8-typography-body-xlarge-strong-line-height);
324
- text-decoration: var(--cre8-typography-body-xlarge-strong-text-decoration);
325
- text-transform: var(--cre8-typography-body-xlarge-strong-text-transform);
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
+ }
326
282
  };
327
283
 
328
- @mixin cre8-typography-body-xlarge-link() {
329
- font-family: var(--cre8-typography-body-xlarge-link-font-family);
330
- font-size: var(--cre8-typography-body-xlarge-link-font-size);
331
- font-weight: var(--cre8-typography-body-xlarge-link-font-weight);
332
- line-height: var(--cre8-typography-body-xlarge-link-line-height);
333
- text-decoration: var(--cre8-typography-body-xlarge-link-text-decoration);
334
- text-transform: var(--cre8-typography-body-xlarge-link-text-transform);
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);
335
291
  };
336
-
337
- @mixin cre8-typography-body-large() {
338
- font-family: var(--cre8-typography-body-large-font-family);
339
- font-size: var(--cre8-typography-body-large-font-size);
340
- font-weight: var(--cre8-typography-body-large-font-weight);
341
- line-height: var(--cre8-typography-body-large-line-height);
342
- text-decoration: var(--cre8-typography-body-large-text-decoration);
343
- text-transform: var(--cre8-typography-body-large-text-transform);
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
+ }
344
307
  };
345
308
 
346
- @mixin cre8-typography-body-large-strong() {
347
- font-family: var(--cre8-typography-body-large-strong-font-family);
348
- font-size: var(--cre8-typography-body-large-strong-font-size);
349
- font-weight: var(--cre8-typography-body-large-strong-font-weight);
350
- line-height: var(--cre8-typography-body-large-strong-line-height);
351
- text-decoration: var(--cre8-typography-body-large-strong-text-decoration);
352
- text-transform: var(--cre8-typography-body-large-strong-text-transform);
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);
353
316
  };
354
-
355
- @mixin cre8-typography-body-default() {
356
- font-family: var(--cre8-typography-body-default-font-family);
357
- font-size: var(--cre8-typography-body-default-font-size);
358
- font-weight: var(--cre8-typography-body-default-font-weight);
359
- line-height: var(--cre8-typography-body-default-line-height);
360
- text-decoration: var(--cre8-typography-body-default-text-decoration);
361
- text-transform: var(--cre8-typography-body-default-text-transform);
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
+ }
362
332
  };
363
333
 
364
- @mixin cre8-typography-body-default-strong() {
365
- font-family: var(--cre8-typography-body-default-strong-font-family);
366
- font-size: var(--cre8-typography-body-default-strong-font-size);
367
- font-weight: var(--cre8-typography-body-default-strong-font-weight);
368
- line-height: var(--cre8-typography-body-default-strong-line-height);
369
- text-decoration: var(--cre8-typography-body-default-strong-text-decoration);
370
- text-transform: var(--cre8-typography-body-default-strong-text-transform);
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);
371
341
  };
372
-
373
- @mixin cre8-typography-body-small() {
374
- font-family: var(--cre8-typography-body-small-font-family);
375
- font-size: var(--cre8-typography-body-small-font-size);
376
- font-weight: var(--cre8-typography-body-small-font-weight);
377
- line-height: var(--cre8-typography-body-small-line-height);
378
- text-decoration: var(--cre8-typography-body-small-text-decoration);
379
- text-transform: var(--cre8-typography-body-small-text-transform);
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
+ }
380
357
  };
381
358
 
382
- @mixin cre8-typography-body-small-strong() {
383
- font-family: var(--cre8-typography-body-small-strong-font-family);
384
- font-size: var(--cre8-typography-body-small-strong-font-size);
385
- font-weight: var(--cre8-typography-body-small-strong-font-weight);
386
- line-height: var(--cre8-typography-body-small-strong-line-height);
387
- text-decoration: var(--cre8-typography-body-small-strong-text-decoration);
388
- text-transform: var(--cre8-typography-body-small-strong-text-transform);
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);
389
366
  };
390
-
391
- @mixin cre8-typography-body-large-link() {
392
- font-family: var(--cre8-typography-body-large-link-font-family);
393
- font-size: var(--cre8-typography-body-large-link-font-size);
394
- font-weight: var(--cre8-typography-body-large-link-font-weight);
395
- line-height: var(--cre8-typography-body-large-link-line-height);
396
- text-decoration: var(--cre8-typography-body-large-link-text-decoration);
397
- text-transform: var(--cre8-typography-body-large-link-text-transform);
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
+ }
398
382
  };
399
383
 
400
- @mixin cre8-typography-body-default-link() {
401
- font-family: var(--cre8-typography-body-default-link-font-family);
402
- font-size: var(--cre8-typography-body-default-link-font-size);
403
- font-weight: var(--cre8-typography-body-default-link-font-weight);
404
- line-height: var(--cre8-typography-body-default-link-line-height);
405
- text-decoration: var(--cre8-typography-body-default-link-text-decoration);
406
- text-transform: var(--cre8-typography-body-default-link-text-transform);
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);
407
391
  };
408
-
409
- @mixin cre8-typography-body-small-link() {
410
- font-family: var(--cre8-typography-body-small-link-font-family);
411
- font-size: var(--cre8-typography-body-small-link-font-size);
412
- font-weight: var(--cre8-typography-body-small-link-font-weight);
413
- line-height: var(--cre8-typography-body-small-link-line-height);
414
- text-decoration: var(--cre8-typography-body-small-link-text-decoration);
415
- text-transform: var(--cre8-typography-body-small-link-text-transform);
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
+ }
416
407
  };
417
408
 
418
- @mixin cre8-typography-meta-large() {
419
- font-family: var(--cre8-typography-meta-large-font-family);
420
- font-size: var(--cre8-typography-meta-large-font-size);
421
- font-weight: var(--cre8-typography-meta-large-font-weight);
422
- line-height: var(--cre8-typography-meta-large-line-height);
423
- text-decoration: var(--cre8-typography-meta-large-text-decoration);
424
- text-transform: var(--cre8-typography-meta-large-text-transform);
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);
425
416
  };
426
417
 
427
418
  @mixin cre8-typography-meta-default() {
@@ -442,6 +433,15 @@
442
433
  text-transform: var(--cre8-typography-meta-default-sentence-case-text-transform);
443
434
  };
444
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
445
  @mixin cre8-typography-meta-small() {
446
446
  font-family: var(--cre8-typography-meta-small-font-family);
447
447
  font-size: var(--cre8-typography-meta-small-font-size);