@lumx/core 3.0.7 → 3.1.0

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 (291) hide show
  1. package/{CONTRIBUTING.md → dist/CONTRIBUTING.md} +0 -0
  2. package/{LICENSE.md → dist/LICENSE.md} +0 -0
  3. package/{css → dist/css}/_retro-compat-v2.css +0 -0
  4. package/{css → dist/css}/design-tokens.css +0 -0
  5. package/{css → dist/css}/material.css +0 -0
  6. package/{js → dist/js}/constants/design-tokens.js +0 -0
  7. package/{js → dist/js}/constants/design-tokens.min.js +0 -0
  8. package/{js → dist/js}/constants/design-tokens.min.js.map +0 -0
  9. package/{js → dist/js}/constants/design-tokens.ts +0 -0
  10. package/{js → dist/js}/constants/index.js +0 -0
  11. package/{js → dist/js}/constants/index.min.js +0 -0
  12. package/{js → dist/js}/constants/index.min.js.map +0 -0
  13. package/{js → dist/js}/constants/index.ts +0 -0
  14. package/{js → dist/js}/constants/keycodes.js +0 -0
  15. package/{js → dist/js}/constants/keycodes.min.js +0 -0
  16. package/{js → dist/js}/constants/keycodes.min.js.map +0 -0
  17. package/{js → dist/js}/constants/keycodes.ts +0 -0
  18. package/{js → dist/js}/custom-colors.js +0 -0
  19. package/{js → dist/js}/custom-colors.min.js +0 -0
  20. package/dist/js/custom-colors.min.js.map +1 -0
  21. package/{js → dist/js}/custom-colors.ts +0 -0
  22. package/{js → dist/js}/date-picker.js +0 -0
  23. package/{js → dist/js}/date-picker.min.js +0 -0
  24. package/dist/js/date-picker.min.js.map +1 -0
  25. package/{js → dist/js}/date-picker.ts +0 -0
  26. package/{js → dist/js}/utils.js +0 -0
  27. package/{js → dist/js}/utils.min.js +0 -0
  28. package/dist/js/utils.min.js.map +1 -0
  29. package/{js → dist/js}/utils.ts +0 -0
  30. package/{lumx.css → dist/lumx.css} +1 -1
  31. package/{lumx.min.css → dist/lumx.min.css} +1 -1
  32. package/dist/package.json +81 -0
  33. package/{scss → dist/scss}/_components.scss +0 -0
  34. package/{scss → dist/scss}/_core.scss +0 -0
  35. package/{scss → dist/scss}/_design-tokens.scss +0 -0
  36. package/{scss → dist/scss}/_retro-compat-v2.scss +0 -0
  37. package/{scss → dist/scss}/components/avatar/_index.scss +0 -0
  38. package/{scss → dist/scss}/components/badge/_index.scss +0 -0
  39. package/{scss → dist/scss}/components/button/_index.scss +0 -0
  40. package/{scss → dist/scss}/components/button/_mixins.scss +0 -0
  41. package/{scss → dist/scss}/components/button/_variables.scss +0 -0
  42. package/{scss → dist/scss}/components/checkbox/_index.scss +0 -0
  43. package/{scss → dist/scss}/components/checkbox/_mixins.scss +0 -0
  44. package/{scss → dist/scss}/components/chip/_index.scss +0 -0
  45. package/{scss → dist/scss}/components/chip/_mixins.scss +0 -0
  46. package/{scss → dist/scss}/components/chip/_variables.scss +0 -0
  47. package/{scss → dist/scss}/components/comment-block/_index.scss +0 -0
  48. package/{scss → dist/scss}/components/date-picker/_index.scss +0 -0
  49. package/{scss → dist/scss}/components/dialog/_index.scss +0 -0
  50. package/{scss → dist/scss}/components/dialog/_variables.scss +0 -0
  51. package/{scss → dist/scss}/components/divider/_index.scss +0 -0
  52. package/{scss → dist/scss}/components/divider/_mixins.scss +0 -0
  53. package/{scss → dist/scss}/components/divider/_variables.scss +0 -0
  54. package/{scss → dist/scss}/components/drag-handle/_index.scss +0 -0
  55. package/{scss → dist/scss}/components/dropdown/_index.scss +0 -0
  56. package/{scss → dist/scss}/components/expansion-panel/_index.scss +0 -0
  57. package/{scss → dist/scss}/components/expansion-panel/_variables.scss +0 -0
  58. package/{scss → dist/scss}/components/flag/_index.scss +0 -0
  59. package/{scss → dist/scss}/components/flex-box/_index.scss +0 -0
  60. package/{scss → dist/scss}/components/generic-block/_index.scss +0 -0
  61. package/{scss → dist/scss}/components/grid/_index.scss +0 -0
  62. package/dist/scss/components/grid-column/_index.scss +18 -0
  63. package/{scss → dist/scss}/components/icon/_index.scss +0 -0
  64. package/{scss → dist/scss}/components/icon/_mixins.scss +0 -0
  65. package/{scss → dist/scss}/components/icon/_variables.scss +0 -0
  66. package/{scss → dist/scss}/components/image-block/_index.scss +0 -0
  67. package/{scss → dist/scss}/components/inline-list/_index.scss +0 -0
  68. package/{scss → dist/scss}/components/input-helper/_index.scss +0 -0
  69. package/{scss → dist/scss}/components/input-helper/_mixins.scss +0 -0
  70. package/{scss → dist/scss}/components/input-helper/_variables.scss +0 -0
  71. package/{scss → dist/scss}/components/input-label/_index.scss +0 -0
  72. package/{scss → dist/scss}/components/input-label/_mixins.scss +0 -0
  73. package/{scss → dist/scss}/components/lightbox/_index.scss +0 -0
  74. package/{scss → dist/scss}/components/lightbox/_variables.scss +0 -0
  75. package/{scss → dist/scss}/components/link/_index.scss +0 -0
  76. package/{scss → dist/scss}/components/link/_mixins.scss +0 -0
  77. package/{scss → dist/scss}/components/link-preview/_index.scss +0 -0
  78. package/{scss → dist/scss}/components/list/_index.scss +0 -0
  79. package/{scss → dist/scss}/components/list/_mixins.scss +0 -0
  80. package/{scss → dist/scss}/components/list/_variables.scss +0 -0
  81. package/{scss → dist/scss}/components/message/_index.scss +0 -0
  82. package/{scss → dist/scss}/components/mosaic/_index.scss +0 -0
  83. package/{scss → dist/scss}/components/notification/_index.scss +0 -0
  84. package/{scss → dist/scss}/components/notification/_variables.scss +0 -0
  85. package/{scss → dist/scss}/components/notification-block/_index.scss +0 -0
  86. package/{scss → dist/scss}/components/popover/_index.scss +0 -0
  87. package/{scss → dist/scss}/components/popover/_variables.scss +0 -0
  88. package/{scss → dist/scss}/components/post-block/_index.scss +0 -0
  89. package/{scss → dist/scss}/components/progress/_index.scss +20 -0
  90. package/dist/scss/components/progress/_variables.scss +12 -0
  91. package/{scss → dist/scss}/components/progress-tracker/_index.scss +0 -0
  92. package/{scss → dist/scss}/components/progress-tracker/_variables.scss +0 -0
  93. package/{scss → dist/scss}/components/radio-button/_index.scss +0 -0
  94. package/{scss → dist/scss}/components/radio-button/_mixins.scss +0 -0
  95. package/{scss → dist/scss}/components/select/_index.scss +0 -0
  96. package/{scss → dist/scss}/components/select/_mixins.scss +0 -0
  97. package/{scss → dist/scss}/components/side-navigation/_index.scss +0 -0
  98. package/{scss → dist/scss}/components/side-navigation/_mixins.scss +0 -0
  99. package/{scss → dist/scss}/components/skeleton/_index.scss +0 -0
  100. package/{scss → dist/scss}/components/skeleton/_mixins.scss +0 -0
  101. package/{scss → dist/scss}/components/slider/_index.scss +0 -0
  102. package/{scss → dist/scss}/components/slideshow/_index.scss +0 -0
  103. package/{scss → dist/scss}/components/slideshow/_variables.scss +0 -0
  104. package/{scss → dist/scss}/components/switch/_index.scss +0 -0
  105. package/{scss → dist/scss}/components/switch/_mixins.scss +0 -0
  106. package/{scss → dist/scss}/components/table/_index.scss +0 -0
  107. package/{scss → dist/scss}/components/table/_mixins.scss +0 -0
  108. package/{scss → dist/scss}/components/tabs/_index.scss +0 -0
  109. package/{scss → dist/scss}/components/tabs/_mixins.scss +0 -0
  110. package/{scss → dist/scss}/components/text/_index.scss +0 -0
  111. package/{scss → dist/scss}/components/text-field/_index.scss +0 -0
  112. package/{scss → dist/scss}/components/text-field/_mixins.scss +0 -0
  113. package/{scss → dist/scss}/components/text-field/_variables.scss +0 -0
  114. package/{scss → dist/scss}/components/thumbnail/_index.scss +0 -0
  115. package/{scss → dist/scss}/components/thumbnail/_variables.scss +0 -0
  116. package/{scss → dist/scss}/components/toolbar/_index.scss +0 -0
  117. package/{scss → dist/scss}/components/toolbar/_variables.scss +0 -0
  118. package/{scss → dist/scss}/components/tooltip/_index.scss +0 -0
  119. package/{scss → dist/scss}/components/tooltip/_variables.scss +0 -0
  120. package/{scss → dist/scss}/components/uploader/_index.scss +0 -0
  121. package/{scss → dist/scss}/components/user-block/_index.scss +0 -0
  122. package/{scss → dist/scss}/core/base/_functions.scss +0 -0
  123. package/{scss → dist/scss}/core/base/_helpers.scss +0 -0
  124. package/{scss → dist/scss}/core/base/_index.scss +0 -0
  125. package/{scss → dist/scss}/core/base/_normalize.scss +0 -0
  126. package/{scss → dist/scss}/core/base/_variables.scss +0 -0
  127. package/{scss → dist/scss}/core/color/_functions.scss +0 -0
  128. package/{scss → dist/scss}/core/color/_index.scss +0 -0
  129. package/{scss → dist/scss}/core/color/_variables.scss +0 -0
  130. package/{scss → dist/scss}/core/elevation/_mixins.scss +0 -0
  131. package/{scss → dist/scss}/core/elevation/_variables.scss +0 -0
  132. package/{scss → dist/scss}/core/size/_variables.scss +0 -0
  133. package/{scss → dist/scss}/core/spacing/_index.scss +0 -0
  134. package/{scss → dist/scss}/core/spacing/_variables.scss +0 -0
  135. package/{scss → dist/scss}/core/state/_mixins.scss +0 -0
  136. package/{scss → dist/scss}/core/state/_variables.scss +0 -0
  137. package/{scss → dist/scss}/core/typography/_index.scss +0 -0
  138. package/{scss → dist/scss}/core/typography/_mixins.scss +0 -0
  139. package/{scss → dist/scss}/core/typography/_variables.scss +0 -0
  140. package/{scss → dist/scss}/lumx.scss +1 -0
  141. package/package.json +4 -8
  142. package/src/css/_retro-compat-v2.css +117 -0
  143. package/src/css/design-tokens.css +544 -0
  144. package/src/css/material.css +62 -0
  145. package/src/js/constants/design-tokens.ts +2157 -0
  146. package/src/js/constants/index.ts +35 -0
  147. package/src/js/constants/keycodes.ts +44 -0
  148. package/src/js/custom-colors.ts +56 -0
  149. package/src/js/date-picker.ts +71 -0
  150. package/src/js/utils.ts +296 -0
  151. package/src/scss/_components.scss +35 -0
  152. package/src/scss/_core.scss +12 -0
  153. package/src/scss/_design-tokens.scss +1667 -0
  154. package/src/scss/_retro-compat-v2.scss +95 -0
  155. package/src/scss/components/avatar/_index.scss +42 -0
  156. package/src/scss/components/badge/_index.scss +47 -0
  157. package/src/scss/components/button/_index.scss +166 -0
  158. package/src/scss/components/button/_mixins.scss +271 -0
  159. package/src/scss/components/button/_variables.scss +6 -0
  160. package/src/scss/components/checkbox/_index.scss +231 -0
  161. package/src/scss/components/checkbox/_mixins.scss +69 -0
  162. package/src/scss/components/chip/_index.scss +156 -0
  163. package/src/scss/components/chip/_mixins.scss +37 -0
  164. package/src/scss/components/chip/_variables.scss +1 -0
  165. package/src/scss/components/comment-block/_index.scss +170 -0
  166. package/src/scss/components/date-picker/_index.scss +67 -0
  167. package/src/scss/components/dialog/_index.scss +169 -0
  168. package/src/scss/components/dialog/_variables.scss +8 -0
  169. package/src/scss/components/divider/_index.scss +39 -0
  170. package/src/scss/components/divider/_mixins.scss +60 -0
  171. package/src/scss/components/divider/_variables.scss +7 -0
  172. package/src/scss/components/drag-handle/_index.scss +7 -0
  173. package/src/scss/components/dropdown/_index.scss +22 -0
  174. package/src/scss/components/expansion-panel/_index.scss +80 -0
  175. package/src/scss/components/expansion-panel/_variables.scss +2 -0
  176. package/src/scss/components/flag/_index.scss +41 -0
  177. package/src/scss/components/flex-box/_index.scss +132 -0
  178. package/src/scss/components/generic-block/_index.scss +11 -0
  179. package/src/scss/components/grid/_index.scss +147 -0
  180. package/src/scss/components/grid-column/_index.scss +18 -0
  181. package/src/scss/components/icon/_index.scss +106 -0
  182. package/src/scss/components/icon/_mixins.scss +42 -0
  183. package/src/scss/components/icon/_variables.scss +6 -0
  184. package/src/scss/components/image-block/_index.scss +108 -0
  185. package/src/scss/components/inline-list/_index.scss +15 -0
  186. package/src/scss/components/input-helper/_index.scss +27 -0
  187. package/src/scss/components/input-helper/_mixins.scss +12 -0
  188. package/src/scss/components/input-helper/_variables.scss +1 -0
  189. package/src/scss/components/input-label/_index.scss +23 -0
  190. package/src/scss/components/input-label/_mixins.scss +12 -0
  191. package/src/scss/components/lightbox/_index.scss +59 -0
  192. package/src/scss/components/lightbox/_variables.scss +1 -0
  193. package/src/scss/components/link/_index.scss +35 -0
  194. package/src/scss/components/link/_mixins.scss +25 -0
  195. package/src/scss/components/link-preview/_index.scss +95 -0
  196. package/src/scss/components/list/_index.scss +96 -0
  197. package/src/scss/components/list/_mixins.scss +128 -0
  198. package/src/scss/components/list/_variables.scss +7 -0
  199. package/src/scss/components/message/_index.scss +36 -0
  200. package/src/scss/components/mosaic/_index.scss +120 -0
  201. package/src/scss/components/notification/_index.scss +78 -0
  202. package/src/scss/components/notification/_variables.scss +3 -0
  203. package/src/scss/components/notification-block/_index.scss +42 -0
  204. package/src/scss/components/popover/_index.scss +64 -0
  205. package/src/scss/components/popover/_variables.scss +1 -0
  206. package/src/scss/components/post-block/_index.scss +101 -0
  207. package/src/scss/components/progress/_index.scss +190 -0
  208. package/src/scss/components/progress/_variables.scss +12 -0
  209. package/src/scss/components/progress-tracker/_index.scss +131 -0
  210. package/src/scss/components/progress-tracker/_variables.scss +2 -0
  211. package/src/scss/components/radio-button/_index.scss +180 -0
  212. package/src/scss/components/radio-button/_mixins.scss +82 -0
  213. package/src/scss/components/select/_index.scss +295 -0
  214. package/src/scss/components/select/_mixins.scss +36 -0
  215. package/src/scss/components/side-navigation/_index.scss +69 -0
  216. package/src/scss/components/side-navigation/_mixins.scss +61 -0
  217. package/src/scss/components/skeleton/_index.scss +143 -0
  218. package/src/scss/components/skeleton/_mixins.scss +9 -0
  219. package/src/scss/components/slider/_index.scss +209 -0
  220. package/src/scss/components/slideshow/_index.scss +171 -0
  221. package/src/scss/components/slideshow/_variables.scss +1 -0
  222. package/src/scss/components/switch/_index.scss +257 -0
  223. package/src/scss/components/switch/_mixins.scss +77 -0
  224. package/src/scss/components/table/_index.scss +138 -0
  225. package/src/scss/components/table/_mixins.scss +115 -0
  226. package/src/scss/components/tabs/_index.scss +111 -0
  227. package/src/scss/components/tabs/_mixins.scss +104 -0
  228. package/src/scss/components/text/_index.scss +29 -0
  229. package/src/scss/components/text-field/_index.scss +323 -0
  230. package/src/scss/components/text-field/_mixins.scss +149 -0
  231. package/src/scss/components/text-field/_variables.scss +2 -0
  232. package/src/scss/components/thumbnail/_index.scss +227 -0
  233. package/src/scss/components/thumbnail/_variables.scss +6 -0
  234. package/src/scss/components/toolbar/_index.scss +38 -0
  235. package/src/scss/components/toolbar/_variables.scss +1 -0
  236. package/src/scss/components/tooltip/_index.scss +91 -0
  237. package/src/scss/components/tooltip/_variables.scss +4 -0
  238. package/src/scss/components/uploader/_index.scss +115 -0
  239. package/src/scss/components/user-block/_index.scss +106 -0
  240. package/src/scss/core/base/_functions.scss +3 -0
  241. package/src/scss/core/base/_helpers.scss +21 -0
  242. package/src/scss/core/base/_index.scss +54 -0
  243. package/src/scss/core/base/_normalize.scss +353 -0
  244. package/src/scss/core/base/_variables.scss +39 -0
  245. package/src/scss/core/color/_functions.scss +7 -0
  246. package/src/scss/core/color/_index.scss +15 -0
  247. package/src/scss/core/color/_variables.scss +4 -0
  248. package/src/scss/core/elevation/_mixins.scss +10 -0
  249. package/src/scss/core/elevation/_variables.scss +7 -0
  250. package/src/scss/core/size/_variables.scss +3 -0
  251. package/src/scss/core/spacing/_index.scss +15 -0
  252. package/src/scss/core/spacing/_variables.scss +22 -0
  253. package/src/scss/core/state/_mixins.scss +127 -0
  254. package/src/scss/core/state/_variables.scss +1 -0
  255. package/src/scss/core/typography/_index.scss +16 -0
  256. package/src/scss/core/typography/_mixins.scss +25 -0
  257. package/src/scss/core/typography/_variables.scss +6 -0
  258. package/src/scss/lumx.scss +69 -0
  259. package/style-dictionary/.eslintignore +1 -0
  260. package/style-dictionary/README.md +19 -0
  261. package/style-dictionary/config/_run.js +12 -0
  262. package/style-dictionary/config/_transform-group.js +16 -0
  263. package/style-dictionary/config/gen-css-variables.js +25 -0
  264. package/style-dictionary/config/gen-scss-variables.js +65 -0
  265. package/style-dictionary/config/gen-ts-variables.js +52 -0
  266. package/style-dictionary/config/utils/_color-attributes.js +24 -0
  267. package/style-dictionary/config/utils/_color-rgba-value.js +22 -0
  268. package/style-dictionary/config/utils/_css-prefer-variable.js +24 -0
  269. package/style-dictionary/config/utils/_genHeader.js +3 -0
  270. package/style-dictionary/config/utils/_lumx-variables.js +12 -0
  271. package/style-dictionary/config/utils/_pickFieldsInTree.js +22 -0
  272. package/style-dictionary/config/utils/_prettier-scss.js +13 -0
  273. package/style-dictionary/config/utils/_prettier-ts.js +13 -0
  274. package/style-dictionary/config/utils/_resolve-structure-alias.js +76 -0
  275. package/style-dictionary/index.js +11 -0
  276. package/style-dictionary/properties/components/button.json +206 -0
  277. package/style-dictionary/properties/components/material.json +64 -0
  278. package/style-dictionary/properties/components/navigation.json +207 -0
  279. package/style-dictionary/properties/components/tabs.json +168 -0
  280. package/style-dictionary/properties/components/text-field.json +167 -0
  281. package/style-dictionary/properties/core/border-radius.json +3 -0
  282. package/style-dictionary/properties/core/color.json +421 -0
  283. package/style-dictionary/properties/core/size.json +11 -0
  284. package/style-dictionary/properties/core/spacing.json +11 -0
  285. package/style-dictionary/properties/core/typography.json +127 -0
  286. package/tsconfig.json +3 -0
  287. package/webpack.config.js +202 -0
  288. package/js/custom-colors.min.js.map +0 -1
  289. package/js/date-picker.min.js.map +0 -1
  290. package/js/utils.min.js.map +0 -1
  291. package/scss/components/progress/_variables.scss +0 -2
package/src/scss/_design-tokens.scss ADDED
@@ -0,0 +1,1667 @@
1
+ /**
2
+ * Do not edit directly
3
+ * Generated on Wed, 26 Oct 2022 13:20:02 GMT
4
+ */
5
+
6
+ $lumx-button-height: 36px !default;
7
+ $lumx-button-border-radius: 4px !default;
8
+ $lumx-button-emphasis-high-state-default-padding-horizontal: 16px !default;
9
+ $lumx-button-emphasis-high-state-default-border-width: 0 !default;
10
+ $lumx-button-emphasis-high-state-default-theme-light-background-color: var(--lumx-color-primary-N) !default;
11
+ $lumx-button-emphasis-high-state-default-theme-light-color: var(--lumx-color-light-N) !default;
12
+ $lumx-button-emphasis-high-state-default-theme-light-border-color: transparent !default;
13
+ $lumx-button-emphasis-high-state-default-theme-dark-background-color: var(--lumx-color-light-N) !default;
14
+ $lumx-button-emphasis-high-state-default-theme-dark-color: var(--lumx-color-primary-N) !default;
15
+ $lumx-button-emphasis-high-state-default-theme-dark-border-color: transparent !default;
16
+ $lumx-button-emphasis-high-state-hover-padding-horizontal: 16px !default;
17
+ $lumx-button-emphasis-high-state-hover-border-width: 0 !default;
18
+ $lumx-button-emphasis-high-state-hover-theme-light-background-color: var(--lumx-color-primary-D1) !default;
19
+ $lumx-button-emphasis-high-state-hover-theme-light-color: var(--lumx-color-light-N) !default;
20
+ $lumx-button-emphasis-high-state-hover-theme-light-border-color: transparent !default;
21
+ $lumx-button-emphasis-high-state-hover-theme-dark-background-color: var(--lumx-color-light-L1) !default;
22
+ $lumx-button-emphasis-high-state-hover-theme-dark-color: var(--lumx-color-primary-N) !default;
23
+ $lumx-button-emphasis-high-state-hover-theme-dark-border-color: transparent !default;
24
+ $lumx-button-emphasis-high-state-active-padding-horizontal: 16px !default;
25
+ $lumx-button-emphasis-high-state-active-border-width: 0 !default;
26
+ $lumx-button-emphasis-high-state-active-theme-light-background-color: var(--lumx-color-primary-D2) !default;
27
+ $lumx-button-emphasis-high-state-active-theme-light-color: var(--lumx-color-light-N) !default;
28
+ $lumx-button-emphasis-high-state-active-theme-light-border-color: transparent !default;
29
+ $lumx-button-emphasis-high-state-active-theme-dark-background-color: var(--lumx-color-light-L2) !default;
30
+ $lumx-button-emphasis-high-state-active-theme-dark-color: var(--lumx-color-primary-N) !default;
31
+ $lumx-button-emphasis-high-state-active-theme-dark-border-color: transparent !default;
32
+ $lumx-button-emphasis-medium-state-default-padding-horizontal: 16px !default;
33
+ $lumx-button-emphasis-medium-state-default-border-width: 0 !default;
34
+ $lumx-button-emphasis-medium-state-default-theme-light-background-color: var(--lumx-color-dark-L5) !default;
35
+ $lumx-button-emphasis-medium-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
36
+ $lumx-button-emphasis-medium-state-default-theme-light-border-color: transparent !default;
37
+ $lumx-button-emphasis-medium-state-default-theme-dark-background-color: var(--lumx-color-light-L5) !default;
38
+ $lumx-button-emphasis-medium-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
39
+ $lumx-button-emphasis-medium-state-default-theme-dark-border-color: transparent !default;
40
+ $lumx-button-emphasis-medium-state-hover-padding-horizontal: 16px !default;
41
+ $lumx-button-emphasis-medium-state-hover-border-width: 0 !default;
42
+ $lumx-button-emphasis-medium-state-hover-theme-light-background-color: var(--lumx-color-dark-L4) !default;
43
+ $lumx-button-emphasis-medium-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
44
+ $lumx-button-emphasis-medium-state-hover-theme-light-border-color: transparent !default;
45
+ $lumx-button-emphasis-medium-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
46
+ $lumx-button-emphasis-medium-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
47
+ $lumx-button-emphasis-medium-state-hover-theme-dark-border-color: transparent !default;
48
+ $lumx-button-emphasis-medium-state-active-padding-horizontal: 16px !default;
49
+ $lumx-button-emphasis-medium-state-active-border-width: 0 !default;
50
+ $lumx-button-emphasis-medium-state-active-theme-light-background-color: var(--lumx-color-dark-L3) !default;
51
+ $lumx-button-emphasis-medium-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
52
+ $lumx-button-emphasis-medium-state-active-theme-light-border-color: transparent !default;
53
+ $lumx-button-emphasis-medium-state-active-theme-dark-background-color: var(--lumx-color-light-L3) !default;
54
+ $lumx-button-emphasis-medium-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
55
+ $lumx-button-emphasis-medium-state-active-theme-dark-border-color: transparent !default;
56
+ $lumx-button-emphasis-low-state-default-padding-horizontal: 8px !default;
57
+ $lumx-button-emphasis-low-state-default-border-width: 0 !default;
58
+ $lumx-button-emphasis-low-state-default-theme-light-background-color: transparent !default;
59
+ $lumx-button-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
60
+ $lumx-button-emphasis-low-state-default-theme-light-border-color: transparent !default;
61
+ $lumx-button-emphasis-low-state-default-theme-dark-background-color: transparent !default;
62
+ $lumx-button-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
63
+ $lumx-button-emphasis-low-state-default-theme-dark-border-color: transparent !default;
64
+ $lumx-button-emphasis-low-state-hover-padding-horizontal: 8px !default;
65
+ $lumx-button-emphasis-low-state-hover-border-width: 0 !default;
66
+ $lumx-button-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
67
+ $lumx-button-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
68
+ $lumx-button-emphasis-low-state-hover-theme-light-border-color: transparent !default;
69
+ $lumx-button-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
70
+ $lumx-button-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
71
+ $lumx-button-emphasis-low-state-hover-theme-dark-border-color: transparent !default;
72
+ $lumx-button-emphasis-low-state-active-padding-horizontal: 8px !default;
73
+ $lumx-button-emphasis-low-state-active-border-width: 0 !default;
74
+ $lumx-button-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
75
+ $lumx-button-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
76
+ $lumx-button-emphasis-low-state-active-theme-light-border-color: transparent !default;
77
+ $lumx-button-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
78
+ $lumx-button-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
79
+ $lumx-button-emphasis-low-state-active-theme-dark-border-color: transparent !default;
80
+ $lumx-button-emphasis-selected-state-default-padding-horizontal: 16px !default;
81
+ $lumx-button-emphasis-selected-state-default-border-width: 0 !default;
82
+ $lumx-button-emphasis-selected-state-default-theme-light-background-color: var(--lumx-color-primary-L5) !default;
83
+ $lumx-button-emphasis-selected-state-default-theme-light-color: var(--lumx-color-primary-D2) !default;
84
+ $lumx-button-emphasis-selected-state-default-theme-light-border-color: transparent !default;
85
+ $lumx-button-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
86
+ $lumx-button-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
87
+ $lumx-button-emphasis-selected-state-default-theme-dark-border-color: transparent !default;
88
+ $lumx-button-emphasis-selected-state-hover-padding-horizontal: 16px !default;
89
+ $lumx-button-emphasis-selected-state-hover-border-width: 0 !default;
90
+ $lumx-button-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
91
+ $lumx-button-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-primary-D2) !default;
92
+ $lumx-button-emphasis-selected-state-hover-theme-light-border-color: transparent !default;
93
+ $lumx-button-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
94
+ $lumx-button-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
95
+ $lumx-button-emphasis-selected-state-hover-theme-dark-border-color: transparent !default;
96
+ $lumx-button-emphasis-selected-state-active-padding-horizontal: 16px !default;
97
+ $lumx-button-emphasis-selected-state-active-border-width: 0 !default;
98
+ $lumx-button-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-primary-L3) !default;
99
+ $lumx-button-emphasis-selected-state-active-theme-light-color: var(--lumx-color-primary-D2) !default;
100
+ $lumx-button-emphasis-selected-state-active-theme-light-border-color: transparent !default;
101
+ $lumx-button-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
102
+ $lumx-button-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
103
+ $lumx-button-emphasis-selected-state-active-theme-dark-border-color: transparent !default;
104
+ $lumx-material-button-text-transform: none !default;
105
+ $lumx-material-checkbox-wrapper-size: 20px !default;
106
+ $lumx-material-checkbox-control-size: 16px !default;
107
+ $lumx-material-chip-size-m-height: 36px !default;
108
+ $lumx-material-chip-size-m-border-radius: 18px !default;
109
+ $lumx-material-chip-size-m-padding-vertical: 16px !default;
110
+ $lumx-material-chip-size-s-height: 24px !default;
111
+ $lumx-material-chip-size-s-border-radius: 12px !default;
112
+ $lumx-material-chip-size-s-padding-vertical: 12px !default;
113
+ $lumx-material-input-helper-font-size: 12px !default;
114
+ $lumx-material-input-helper-font-weight: var(--lumx-typography-font-weight-regular) !default;
115
+ $lumx-material-input-helper-line-height: 16px !default;
116
+ $lumx-material-input-label-font-size: 14px !default;
117
+ $lumx-material-input-label-font-weight: var(--lumx-typography-font-weight-regular) !default;
118
+ $lumx-material-input-label-line-height: 20px !default;
119
+ $lumx-material-progress-bounce: block !default;
120
+ $lumx-material-progress-rotate: none !default;
121
+ $lumx-material-radio-button-wrapper-size: 20px !default;
122
+ $lumx-material-radio-button-control-size: 16px !default;
123
+ $lumx-material-radio-button-indicator-size: 8px !default;
124
+ $lumx-material-switch-wrapper-width: 30px !default;
125
+ $lumx-material-switch-wrapper-height: 20px !default;
126
+ $lumx-material-switch-control-width: 30px !default;
127
+ $lumx-material-switch-control-height: 16px !default;
128
+ $lumx-material-switch-indicator-size: 8px !default;
129
+ $lumx-material-switch-indicator-offset: 4px !default;
130
+ $lumx-material-text-field-padding-top: 0 !default;
131
+ $lumx-material-text-field-padding-bottom: 0 !default;
132
+ $lumx-material-text-field-header-wrapper-margin-bottom: 8px !default;
133
+ $lumx-material-text-field-header-label-font-size: 14px !default;
134
+ $lumx-material-text-field-header-label-font-weight: var(--lumx-typography-font-weight-regular) !default;
135
+ $lumx-material-text-field-header-label-line-height: 20px !default;
136
+ $lumx-material-text-field-input-content-font-size: 14px !default;
137
+ $lumx-material-text-field-input-content-font-weight: var(--lumx-typography-font-weight-regular) !default;
138
+ $lumx-material-text-field-input-content-line-height: 20px !default;
139
+ $lumx-navigation-item-padding-horizontal: 8px !default;
140
+ $lumx-navigation-item-min-height: 36px !default;
141
+ $lumx-navigation-item-border-radius: 4px !default;
142
+ $lumx-navigation-item-emphasis-low-state-default-border-top-width: 0 !default;
143
+ $lumx-navigation-item-emphasis-low-state-default-border-right-width: 0 !default;
144
+ $lumx-navigation-item-emphasis-low-state-default-border-bottom-width: 0 !default;
145
+ $lumx-navigation-item-emphasis-low-state-default-border-left-width: 0 !default;
146
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color: transparent !default;
147
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
148
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
149
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color: var(--lumx-color-dark-N) !default;
150
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color: transparent !default;
151
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
152
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color: transparent !default;
153
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
154
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
155
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
156
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color: transparent !default;
157
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
158
+ $lumx-navigation-item-emphasis-low-state-hover-border-top-width: 0 !default;
159
+ $lumx-navigation-item-emphasis-low-state-hover-border-right-width: 0 !default;
160
+ $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width: 0 !default;
161
+ $lumx-navigation-item-emphasis-low-state-hover-border-left-width: 0 !default;
162
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
163
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
164
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
165
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color: var(--lumx-color-dark-N) !default;
166
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color: var(--lumx-color-dark-L5) !default;
167
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
168
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
169
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
170
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
171
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
172
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color: var(--lumx-color-light-L5) !default;
173
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
174
+ $lumx-navigation-item-emphasis-low-state-active-border-top-width: 0 !default;
175
+ $lumx-navigation-item-emphasis-low-state-active-border-right-width: 0 !default;
176
+ $lumx-navigation-item-emphasis-low-state-active-border-bottom-width: 0 !default;
177
+ $lumx-navigation-item-emphasis-low-state-active-border-left-width: 0 !default;
178
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
179
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
180
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color: var(--lumx-color-dark-L1) !default;
181
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color: var(--lumx-color-dark-N) !default;
182
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color: var(
183
+ --lumx-color-dark-L4
184
+ ) !default;
185
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color: var(--lumx-color-dark-L1) !default;
186
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
187
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
188
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
189
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
190
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color: var(
191
+ --lumx-color-light-L4
192
+ ) !default;
193
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
194
+ $lumx-navigation-item-emphasis-selected-state-default-border-top-width: 0 !default;
195
+ $lumx-navigation-item-emphasis-selected-state-default-border-right-width: 0 !default;
196
+ $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width: 0 !default;
197
+ $lumx-navigation-item-emphasis-selected-state-default-border-left-width: 0 !default;
198
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color: var(
199
+ --lumx-color-primary-L5
200
+ ) !default;
201
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
202
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
203
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color: var(--lumx-color-primary-D2) !default;
204
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color: transparent !default;
205
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
206
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color: var(--lumx-color-light-L3) !default;
207
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
208
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color: var(--lumx-color-light-N) !default;
209
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color: var(--lumx-color-light-N) !default;
210
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color: transparent !default;
211
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
212
+ $lumx-navigation-item-emphasis-selected-state-hover-border-top-width: 0 !default;
213
+ $lumx-navigation-item-emphasis-selected-state-hover-border-right-width: 0 !default;
214
+ $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width: 0 !default;
215
+ $lumx-navigation-item-emphasis-selected-state-hover-border-left-width: 0 !default;
216
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-primary-L4) !default;
217
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
218
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
219
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color: var(--lumx-color-primary-D2) !default;
220
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color: var(
221
+ --lumx-color-primary-L4
222
+ ) !default;
223
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
224
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L4) !default;
225
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
226
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color: var(--lumx-color-light-N) !default;
227
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color: var(--lumx-color-light-N) !default;
228
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color: var(
229
+ --lumx-color-light-L4
230
+ ) !default;
231
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
232
+ $lumx-navigation-item-emphasis-selected-state-active-border-top-width: 0 !default;
233
+ $lumx-navigation-item-emphasis-selected-state-active-border-right-width: 0 !default;
234
+ $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width: 0 !default;
235
+ $lumx-navigation-item-emphasis-selected-state-active-border-left-width: 0 !default;
236
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color: var(
237
+ --lumx-color-primary-L3
238
+ ) !default;
239
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
240
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color: var(--lumx-color-primary-D2) !default;
241
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color: var(--lumx-color-primary-D2) !default;
242
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color: var(
243
+ --lumx-color-primary-L3
244
+ ) !default;
245
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color: var(--lumx-color-primary-D2) !default;
246
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L5) !default;
247
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
248
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color: var(--lumx-color-light-N) !default;
249
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color: var(--lumx-color-light-N) !default;
250
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color: var(
251
+ --lumx-color-light-L5
252
+ ) !default;
253
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color: var(--lumx-color-light-N) !default;
254
+ $lumx-tabs-link-height: 48px !default;
255
+ $lumx-tabs-link-border-radius: 0 !default;
256
+ $lumx-tabs-link-emphasis-low-state-default-border-top-width: 0 !default;
257
+ $lumx-tabs-link-emphasis-low-state-default-border-right-width: 0 !default;
258
+ $lumx-tabs-link-emphasis-low-state-default-border-bottom-width: 2px !default;
259
+ $lumx-tabs-link-emphasis-low-state-default-border-left-width: 0 !default;
260
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color: transparent !default;
261
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
262
+ $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color: var(--lumx-color-dark-L5) !default;
263
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color: transparent !default;
264
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
265
+ $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color: var(--lumx-color-light-L5) !default;
266
+ $lumx-tabs-link-emphasis-low-state-hover-border-top-width: 0 !default;
267
+ $lumx-tabs-link-emphasis-low-state-hover-border-right-width: 0 !default;
268
+ $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width: 2px !default;
269
+ $lumx-tabs-link-emphasis-low-state-hover-border-left-width: 0 !default;
270
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
271
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
272
+ $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color: var(--lumx-color-dark-L5) !default;
273
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
274
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
275
+ $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color: var(--lumx-color-light-L5) !default;
276
+ $lumx-tabs-link-emphasis-low-state-active-border-top-width: 0 !default;
277
+ $lumx-tabs-link-emphasis-low-state-active-border-right-width: 0 !default;
278
+ $lumx-tabs-link-emphasis-low-state-active-border-bottom-width: 2px !default;
279
+ $lumx-tabs-link-emphasis-low-state-active-border-left-width: 0 !default;
280
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
281
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
282
+ $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color: var(--lumx-color-dark-L5) !default;
283
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
284
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
285
+ $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color: var(--lumx-color-light-L5) !default;
286
+ $lumx-tabs-link-emphasis-selected-state-default-border-top-width: 0 !default;
287
+ $lumx-tabs-link-emphasis-selected-state-default-border-right-width: 0 !default;
288
+ $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width: 2px !default;
289
+ $lumx-tabs-link-emphasis-selected-state-default-border-left-width: 0 !default;
290
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color: transparent !default;
291
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-color: var(--lumx-color-dark-L1) !default;
292
+ $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color: var(--lumx-color-primary-N) !default;
293
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color: transparent !default;
294
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color: var(--lumx-color-light-N) !default;
295
+ $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color: var(--lumx-color-light-N) !default;
296
+ $lumx-tabs-link-emphasis-selected-state-hover-border-top-width: 0 !default;
297
+ $lumx-tabs-link-emphasis-selected-state-hover-border-right-width: 0 !default;
298
+ $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width: 2px !default;
299
+ $lumx-tabs-link-emphasis-selected-state-hover-border-left-width: 0 !default;
300
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color: var(--lumx-color-dark-L5) !default;
301
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color: var(--lumx-color-dark-L1) !default;
302
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color: var(--lumx-color-primary-N) !default;
303
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color: var(--lumx-color-light-L5) !default;
304
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color: var(--lumx-color-light-N) !default;
305
+ $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color: var(--lumx-color-light-N) !default;
306
+ $lumx-tabs-link-emphasis-selected-state-active-border-top-width: 0 !default;
307
+ $lumx-tabs-link-emphasis-selected-state-active-border-right-width: 0 !default;
308
+ $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width: 2px !default;
309
+ $lumx-tabs-link-emphasis-selected-state-active-border-left-width: 0 !default;
310
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color: var(--lumx-color-dark-L4) !default;
311
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-color: var(--lumx-color-dark-L1) !default;
312
+ $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color: var(--lumx-color-primary-N) !default;
313
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color: var(--lumx-color-light-L4) !default;
314
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color: var(--lumx-color-light-N) !default;
315
+ $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color: var(--lumx-color-light-N) !default;
316
+ $lumx-text-field-input-min-height: 36px !default;
317
+ $lumx-text-field-input-padding-horizontal: 12px !default;
318
+ $lumx-text-field-input-border-radius: 4px !default;
319
+ $lumx-text-field-state-default-input-border-top-width: 1px !default;
320
+ $lumx-text-field-state-default-input-border-right-width: 1px !default;
321
+ $lumx-text-field-state-default-input-border-bottom-width: 1px !default;
322
+ $lumx-text-field-state-default-input-border-left-width: 1px !default;
323
+ $lumx-text-field-state-default-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
324
+ $lumx-text-field-state-default-theme-light-input-background-color: var(--lumx-color-dark-L6) !default;
325
+ $lumx-text-field-state-default-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
326
+ $lumx-text-field-state-default-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
327
+ $lumx-text-field-state-default-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
328
+ $lumx-text-field-state-default-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
329
+ $lumx-text-field-state-default-theme-dark-input-background-color: var(--lumx-color-light-L6) !default;
330
+ $lumx-text-field-state-default-theme-dark-input-border-color: var(--lumx-color-light-L4) !default;
331
+ $lumx-text-field-state-default-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
332
+ $lumx-text-field-state-default-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
333
+ $lumx-text-field-state-hover-input-border-top-width: 1px !default;
334
+ $lumx-text-field-state-hover-input-border-right-width: 1px !default;
335
+ $lumx-text-field-state-hover-input-border-bottom-width: 1px !default;
336
+ $lumx-text-field-state-hover-input-border-left-width: 1px !default;
337
+ $lumx-text-field-state-hover-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
338
+ $lumx-text-field-state-hover-theme-light-input-background-color: var(--lumx-color-dark-L5) !default;
339
+ $lumx-text-field-state-hover-theme-light-input-border-color: var(--lumx-color-dark-L4) !default;
340
+ $lumx-text-field-state-hover-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
341
+ $lumx-text-field-state-hover-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
342
+ $lumx-text-field-state-hover-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
343
+ $lumx-text-field-state-hover-theme-dark-input-background-color: var(--lumx-color-light-L5) !default;
344
+ $lumx-text-field-state-hover-theme-dark-input-border-color: var(--lumx-color-light-L4) !default;
345
+ $lumx-text-field-state-hover-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
346
+ $lumx-text-field-state-hover-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
347
+ $lumx-text-field-state-focus-input-border-top-width: 2px !default;
348
+ $lumx-text-field-state-focus-input-border-right-width: 2px !default;
349
+ $lumx-text-field-state-focus-input-border-bottom-width: 2px !default;
350
+ $lumx-text-field-state-focus-input-border-left-width: 2px !default;
351
+ $lumx-text-field-state-focus-theme-light-header-label-color: var(--lumx-color-dark-N) !default;
352
+ $lumx-text-field-state-focus-theme-light-input-background-color: var(--lumx-color-light-N) !default;
353
+ $lumx-text-field-state-focus-theme-light-input-border-color: var(--lumx-color-primary-N) !default;
354
+ $lumx-text-field-state-focus-theme-light-input-content-color: var(--lumx-color-dark-N) !default;
355
+ $lumx-text-field-state-focus-theme-light-input-placeholder-color: var(--lumx-color-dark-L2) !default;
356
+ $lumx-text-field-state-focus-theme-dark-header-label-color: var(--lumx-color-light-N) !default;
357
+ $lumx-text-field-state-focus-theme-dark-input-background-color: transparent !default;
358
+ $lumx-text-field-state-focus-theme-dark-input-border-color: var(--lumx-color-light-N) !default;
359
+ $lumx-text-field-state-focus-theme-dark-input-content-color: var(--lumx-color-light-N) !default;
360
+ $lumx-text-field-state-focus-theme-dark-input-placeholder-color: var(--lumx-color-light-L2) !default;
361
+ $lumx-border-radius: 4px !default;
362
+ $lumx-color-dark-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
363
+ $lumx-color-dark-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
364
+ $lumx-color-dark-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
365
+ $lumx-color-dark-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
366
+ $lumx-color-dark-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
367
+ $lumx-color-dark-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
368
+ $lumx-color-dark-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
369
+ $lumx-color-light-N: rgb(255, 255, 255) !default; // Neutral light color
370
+ $lumx-color-light-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
371
+ $lumx-color-light-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
372
+ $lumx-color-light-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
373
+ $lumx-color-light-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
374
+ $lumx-color-light-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
375
+ $lumx-color-light-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
376
+ $lumx-color-blue-D2: rgb(21, 70, 193) !default; // Darkest blue color
377
+ $lumx-color-blue-D1: rgb(24, 78, 216) !default; // Dark blue color
378
+ $lumx-color-blue-N: rgb(36, 91, 231) !default; // Neutral blue color
379
+ $lumx-color-blue-L1: rgba(36, 91, 231, 0.8) !default; // Base blue color with 80% opacity
380
+ $lumx-color-blue-L2: rgba(36, 91, 231, 0.6) !default; // Base blue color with 60% opacity
381
+ $lumx-color-blue-L3: rgba(36, 91, 231, 0.4) !default; // Base blue color with 40% opacity
382
+ $lumx-color-blue-L4: rgba(36, 91, 231, 0.2) !default; // Base blue color with 20% opacity
383
+ $lumx-color-blue-L5: rgba(36, 91, 231, 0.1) !default; // Base blue color with 10% opacity
384
+ $lumx-color-blue-L6: rgba(36, 91, 231, 0.05) !default; // Base blue color with 5% opacity
385
+ $lumx-color-green-D2: rgb(26, 110, 89) !default; // Darkest green color
386
+ $lumx-color-green-D1: rgb(23, 122, 97) !default; // Dark green color
387
+ $lumx-color-green-N: rgb(19, 134, 105) !default; // Neutral green color
388
+ $lumx-color-green-L1: rgba(19, 134, 105, 0.8) !default; // Base green color with 80% opacity
389
+ $lumx-color-green-L2: rgba(19, 134, 105, 0.6) !default; // Base green color with 60% opacity
390
+ $lumx-color-green-L3: rgba(19, 134, 105, 0.4) !default; // Base green color with 40% opacity
391
+ $lumx-color-green-L4: rgba(19, 134, 105, 0.2) !default; // Base green color with 20% opacity
392
+ $lumx-color-green-L5: rgba(19, 134, 105, 0.1) !default; // Base green color with 10% opacity
393
+ $lumx-color-green-L6: rgba(19, 134, 105, 0.05) !default; // Base green color with 5% opacity
394
+ $lumx-color-yellow-D2: rgb(255, 161, 37) !default; // Darkest yellow color
395
+ $lumx-color-yellow-D1: rgb(255, 179, 37) !default; // Dark yellow color
396
+ $lumx-color-yellow-N: rgb(255, 196, 37) !default; // Neutral yellow color
397
+ $lumx-color-yellow-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
398
+ $lumx-color-yellow-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
399
+ $lumx-color-yellow-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
400
+ $lumx-color-yellow-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
401
+ $lumx-color-yellow-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
402
+ $lumx-color-yellow-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
403
+ $lumx-color-red-D2: rgb(190, 30, 70) !default; // Darkest red color
404
+ $lumx-color-red-D1: rgb(212, 33, 72) !default; // Dark red color
405
+ $lumx-color-red-N: rgb(223, 48, 80) !default; // Neutral red color
406
+ $lumx-color-red-L1: rgba(223, 48, 80, 0.8) !default; // Base red color with 80% opacity
407
+ $lumx-color-red-L2: rgba(223, 48, 80, 0.6) !default; // Base red color with 60% opacity
408
+ $lumx-color-red-L3: rgba(223, 48, 80, 0.4) !default; // Base red color with 40% opacity
409
+ $lumx-color-red-L4: rgba(223, 48, 80, 0.2) !default; // Base red color with 20% opacity
410
+ $lumx-color-red-L5: rgba(223, 48, 80, 0.1) !default; // Base red color with 10% opacity
411
+ $lumx-color-red-L6: rgba(223, 48, 80, 0.05) !default; // Base red color with 5% opacity
412
+ $lumx-color-grey-N: rgb(117, 117, 117) !default; // Neutral grey color
413
+ $lumx-color-grey-L1: rgba(117, 117, 117, 0.8) !default; // Base grey color with 80% opacity
414
+ $lumx-color-grey-L2: rgba(117, 117, 117, 0.6) !default; // Base grey color with 60% opacity
415
+ $lumx-color-grey-L3: rgba(117, 117, 117, 0.4) !default; // Base grey color with 40% opacity
416
+ $lumx-color-grey-L4: rgba(117, 117, 117, 0.2) !default; // Base grey color with 20% opacity
417
+ $lumx-color-grey-L5: rgba(117, 117, 117, 0.1) !default; // Base grey color with 10% opacity
418
+ $lumx-color-grey-L6: rgba(117, 117, 117, 0.05) !default; // Base grey color with 5% opacity
419
+ $lumx-color-primary-D2: var(--lumx-color-primary-D2) !default; // Darkest blue color
420
+ $lumx-color-primary-D1: var(--lumx-color-primary-D1) !default; // Dark blue color
421
+ $lumx-color-primary-N: var(--lumx-color-primary-N) !default; // Neutral blue color
422
+ $lumx-color-primary-L1: var(--lumx-color-primary-L1) !default; // Base blue color with 80% opacity
423
+ $lumx-color-primary-L2: var(--lumx-color-primary-L2) !default; // Base blue color with 60% opacity
424
+ $lumx-color-primary-L3: var(--lumx-color-primary-L3) !default; // Base blue color with 40% opacity
425
+ $lumx-color-primary-L4: var(--lumx-color-primary-L4) !default; // Base blue color with 20% opacity
426
+ $lumx-color-primary-L5: var(--lumx-color-primary-L5) !default; // Base blue color with 10% opacity
427
+ $lumx-color-primary-L6: var(--lumx-color-primary-L6) !default; // Base blue color with 5% opacity
428
+ $lumx-color-secondary-D2: var(--lumx-color-secondary-D2) !default; // Darkest green color
429
+ $lumx-color-secondary-D1: var(--lumx-color-secondary-D1) !default; // Dark green color
430
+ $lumx-color-secondary-N: var(--lumx-color-secondary-N) !default; // Neutral green color
431
+ $lumx-color-secondary-L1: var(--lumx-color-secondary-L1) !default; // Base green color with 80% opacity
432
+ $lumx-color-secondary-L2: var(--lumx-color-secondary-L2) !default; // Base green color with 60% opacity
433
+ $lumx-color-secondary-L3: var(--lumx-color-secondary-L3) !default; // Base green color with 40% opacity
434
+ $lumx-color-secondary-L4: var(--lumx-color-secondary-L4) !default; // Base green color with 20% opacity
435
+ $lumx-color-secondary-L5: var(--lumx-color-secondary-L5) !default; // Base green color with 10% opacity
436
+ $lumx-color-secondary-L6: var(--lumx-color-secondary-L6) !default; // Base green color with 5% opacity
437
+ $lumx-color-accent-D2: var(--lumx-color-accent-D2) !default; // Darkest green color
438
+ $lumx-color-accent-D1: var(--lumx-color-accent-D1) !default; // Dark green color
439
+ $lumx-color-accent-N: var(--lumx-color-accent-N) !default; // Neutral green color
440
+ $lumx-color-accent-L1: var(--lumx-color-accent-L1) !default; // Base green color with 80% opacity
441
+ $lumx-color-accent-L2: var(--lumx-color-accent-L2) !default; // Base green color with 60% opacity
442
+ $lumx-color-accent-L3: var(--lumx-color-accent-L3) !default; // Base green color with 40% opacity
443
+ $lumx-color-accent-L4: var(--lumx-color-accent-L4) !default; // Base green color with 20% opacity
444
+ $lumx-color-accent-L5: var(--lumx-color-accent-L5) !default; // Base green color with 10% opacity
445
+ $lumx-color-accent-L6: var(--lumx-color-accent-L6) !default; // Base green color with 5% opacity
446
+ $lumx-color-black-N: rgba(0, 0, 0, 0.87) !default; // Neutral dark color
447
+ $lumx-color-black-L1: rgba(0, 0, 0, 0.7) !default; // Base dark color with 70% opacity
448
+ $lumx-color-black-L2: rgba(0, 0, 0, 0.54) !default; // Base dark color with 54% opacity
449
+ $lumx-color-black-L3: rgba(0, 0, 0, 0.38) !default; // Base dark color with 38% opacity
450
+ $lumx-color-black-L4: rgba(0, 0, 0, 0.2) !default; // Base dark color with 20% opacity
451
+ $lumx-color-black-L5: rgba(0, 0, 0, 0.12) !default; // Base dark color with 12% opacity
452
+ $lumx-color-black-L6: rgba(0, 0, 0, 0.05) !default; // Base dark color with 5% opacity
453
+ $lumx-color-white-N: rgb(255, 255, 255) !default; // Neutral light color
454
+ $lumx-color-white-L1: rgba(255, 255, 255, 0.9) !default; // Base light color with 90% opacity
455
+ $lumx-color-white-L2: rgba(255, 255, 255, 0.8) !default; // Base light color with 80% opacity
456
+ $lumx-color-white-L3: rgba(255, 255, 255, 0.6) !default; // Base light color with 60% opacity
457
+ $lumx-color-white-L4: rgba(255, 255, 255, 0.4) !default; // Base light color with 40% opacity
458
+ $lumx-color-white-L5: rgba(255, 255, 255, 0.2) !default; // Base light color with 20% opacity
459
+ $lumx-color-white-L6: rgba(255, 255, 255, 0.1) !default; // Base light color with 10% opacity
460
+ $lumx-color-orange-D2: rgb(255, 161, 37) !default; // Darkest yellow color
461
+ $lumx-color-orange-D1: rgb(255, 179, 37) !default; // Dark yellow color
462
+ $lumx-color-orange-N: rgb(255, 196, 37) !default; // Neutral yellow color
463
+ $lumx-color-orange-L1: rgba(255, 196, 37, 0.9) !default; // Base yellow color with 80% opacity
464
+ $lumx-color-orange-L2: rgba(255, 196, 37, 0.8) !default; // Base yellow color with 70% opacity
465
+ $lumx-color-orange-L3: rgba(255, 196, 37, 0.6) !default; // Base yellow color with 60% opacity
466
+ $lumx-color-orange-L4: rgba(255, 196, 37, 0.48) !default; // Base yellow color with 40% opacity
467
+ $lumx-color-orange-L5: rgba(255, 196, 37, 0.24) !default; // Base yellow color with 20% opacity
468
+ $lumx-color-orange-L6: rgba(255, 196, 37, 0.12) !default; // Base yellow color with 10% opacity
469
+ $lumx-size-xxs: 14px !default;
470
+ $lumx-size-xs: 20px !default;
471
+ $lumx-size-s: 24px !default;
472
+ $lumx-size-m: 36px !default;
473
+ $lumx-size-l: 64px !default;
474
+ $lumx-size-xl: 128px !default;
475
+ $lumx-size-xxl: 256px !default;
476
+ $lumx-spacing-unit-tiny: 4px !default;
477
+ $lumx-spacing-unit-regular: 8px !default;
478
+ $lumx-spacing-unit-medium: 12px !default;
479
+ $lumx-spacing-unit-big: 16px !default;
480
+ $lumx-spacing-unit-huge: 24px !default;
481
+ $lumx-typography-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Fira Sans',
482
+ 'Droid Sans', 'Helvetica Neue', sans-serif !default;
483
+ $lumx-typography-font-weight-regular: 400 !default;
484
+ $lumx-typography-font-weight-bold: 700 !default;
485
+ $lumx-typography-font-weight-light: 300 !default;
486
+ $lumx-typography-interface-display1-font-size: 34px !default;
487
+ $lumx-typography-interface-display1-font-weight: var(--lumx-typography-font-weight-bold) !default;
488
+ $lumx-typography-interface-display1-line-height: 40px !default;
489
+ $lumx-typography-interface-headline-font-size: 24px !default;
490
+ $lumx-typography-interface-headline-font-weight: var(--lumx-typography-font-weight-bold) !default;
491
+ $lumx-typography-interface-headline-line-height: 32px !default;
492
+ $lumx-typography-interface-title-font-size: 20px !default;
493
+ $lumx-typography-interface-title-font-weight: var(--lumx-typography-font-weight-bold) !default;
494
+ $lumx-typography-interface-title-line-height: 30px !default;
495
+ $lumx-typography-interface-subtitle2-font-size: 16px !default;
496
+ $lumx-typography-interface-subtitle2-font-weight: var(--lumx-typography-font-weight-bold) !default;
497
+ $lumx-typography-interface-subtitle2-line-height: 24px !default;
498
+ $lumx-typography-interface-subtitle1-font-size: 14px !default;
499
+ $lumx-typography-interface-subtitle1-font-weight: var(--lumx-typography-font-weight-bold) !default;
500
+ $lumx-typography-interface-subtitle1-line-height: 20px !default;
501
+ $lumx-typography-interface-body2-font-size: 16px !default;
502
+ $lumx-typography-interface-body2-font-weight: var(--lumx-typography-font-weight-regular) !default;
503
+ $lumx-typography-interface-body2-line-height: 24px !default;
504
+ $lumx-typography-interface-body1-font-size: 14px !default;
505
+ $lumx-typography-interface-body1-font-weight: var(--lumx-typography-font-weight-regular) !default;
506
+ $lumx-typography-interface-body1-line-height: 20px !default;
507
+ $lumx-typography-interface-caption-font-size: 12px !default;
508
+ $lumx-typography-interface-caption-font-weight: var(--lumx-typography-font-weight-regular) !default;
509
+ $lumx-typography-interface-caption-line-height: 16px !default;
510
+ $lumx-typography-interface-overline-font-size: 10px !default;
511
+ $lumx-typography-interface-overline-font-weight: var(--lumx-typography-font-weight-bold) !default;
512
+ $lumx-typography-interface-overline-line-height: 12px !default;
513
+ $lumx-typography-custom-title1-font-size: 40px !default;
514
+ $lumx-typography-custom-title1-font-weight: var(--lumx-typography-font-weight-bold) !default;
515
+ $lumx-typography-custom-title1-line-height: 50px !default;
516
+ $lumx-typography-custom-title2-font-size: 30px !default;
517
+ $lumx-typography-custom-title2-font-weight: var(--lumx-typography-font-weight-bold) !default;
518
+ $lumx-typography-custom-title2-line-height: 40px !default;
519
+ $lumx-typography-custom-title3-font-size: 24px !default;
520
+ $lumx-typography-custom-title3-font-weight: var(--lumx-typography-font-weight-bold) !default;
521
+ $lumx-typography-custom-title3-line-height: 32px !default;
522
+ $lumx-typography-custom-title4-font-size: 20px !default;
523
+ $lumx-typography-custom-title4-font-weight: var(--lumx-typography-font-weight-bold) !default;
524
+ $lumx-typography-custom-title4-line-height: 30px !default;
525
+ $lumx-typography-custom-title5-font-size: 16px !default;
526
+ $lumx-typography-custom-title5-font-weight: var(--lumx-typography-font-weight-bold) !default;
527
+ $lumx-typography-custom-title5-line-height: 24px !default;
528
+ $lumx-typography-custom-title6-font-size: 14px !default;
529
+ $lumx-typography-custom-title6-font-weight: var(--lumx-typography-font-weight-bold) !default;
530
+ $lumx-typography-custom-title6-line-height: 20px !default;
531
+ $lumx-typography-custom-intro-font-size: 18px !default;
532
+ $lumx-typography-custom-intro-font-weight: var(--lumx-typography-font-weight-bold) !default;
533
+ $lumx-typography-custom-intro-line-height: 30px !default;
534
+ $lumx-typography-custom-body-large-font-size: 16px !default;
535
+ $lumx-typography-custom-body-large-font-weight: var(--lumx-typography-font-weight-regular) !default;
536
+ $lumx-typography-custom-body-large-line-height: 24px !default;
537
+ $lumx-typography-custom-body-font-size: 14px !default;
538
+ $lumx-typography-custom-body-font-weight: var(--lumx-typography-font-weight-regular) !default;
539
+ $lumx-typography-custom-body-line-height: 20px !default;
540
+ $lumx-typography-custom-quote-font-size: 16px !default;
541
+ $lumx-typography-custom-quote-font-weight: var(--lumx-typography-font-weight-regular) !default;
542
+ $lumx-typography-custom-quote-font-style: italic !default;
543
+ $lumx-typography-custom-quote-line-height: 24px !default;
544
+ $lumx-typography-custom-publish-info-font-size: 14px !default;
545
+ $lumx-typography-custom-publish-info-font-weight: var(--lumx-typography-font-weight-regular) !default;
546
+ $lumx-typography-custom-publish-info-line-height: 20px !default;
547
+ $lumx-typography-custom-button-size-m-font-size: 14px !default;
548
+ $lumx-typography-custom-button-size-m-font-weight: var(--lumx-typography-font-weight-bold) !default;
549
+ $lumx-typography-custom-button-size-s-font-size: 12px !default;
550
+ $lumx-typography-custom-button-size-s-font-weight: var(--lumx-typography-font-weight-bold) !default;
551
+
552
+ $lumx-design-tokens: (
553
+ 'button': (
554
+ 'height': $lumx-button-height,
555
+ 'border-radius': $lumx-button-border-radius,
556
+ 'emphasis-high': (
557
+ 'state-default': (
558
+ 'padding': (
559
+ 'horizontal': $lumx-button-emphasis-high-state-default-padding-horizontal,
560
+ ),
561
+ 'border-width': $lumx-button-emphasis-high-state-default-border-width,
562
+ 'theme-light': (
563
+ 'background-color': $lumx-button-emphasis-high-state-default-theme-light-background-color,
564
+ 'color': $lumx-button-emphasis-high-state-default-theme-light-color,
565
+ 'border-color': $lumx-button-emphasis-high-state-default-theme-light-border-color,
566
+ ),
567
+ 'theme-dark': (
568
+ 'background-color': $lumx-button-emphasis-high-state-default-theme-dark-background-color,
569
+ 'color': $lumx-button-emphasis-high-state-default-theme-dark-color,
570
+ 'border-color': $lumx-button-emphasis-high-state-default-theme-dark-border-color,
571
+ ),
572
+ ),
573
+ 'state-hover': (
574
+ 'padding': (
575
+ 'horizontal': $lumx-button-emphasis-high-state-hover-padding-horizontal,
576
+ ),
577
+ 'border-width': $lumx-button-emphasis-high-state-hover-border-width,
578
+ 'theme-light': (
579
+ 'background-color': $lumx-button-emphasis-high-state-hover-theme-light-background-color,
580
+ 'color': $lumx-button-emphasis-high-state-hover-theme-light-color,
581
+ 'border-color': $lumx-button-emphasis-high-state-hover-theme-light-border-color,
582
+ ),
583
+ 'theme-dark': (
584
+ 'background-color': $lumx-button-emphasis-high-state-hover-theme-dark-background-color,
585
+ 'color': $lumx-button-emphasis-high-state-hover-theme-dark-color,
586
+ 'border-color': $lumx-button-emphasis-high-state-hover-theme-dark-border-color,
587
+ ),
588
+ ),
589
+ 'state-active': (
590
+ 'padding': (
591
+ 'horizontal': $lumx-button-emphasis-high-state-active-padding-horizontal,
592
+ ),
593
+ 'border-width': $lumx-button-emphasis-high-state-active-border-width,
594
+ 'theme-light': (
595
+ 'background-color': $lumx-button-emphasis-high-state-active-theme-light-background-color,
596
+ 'color': $lumx-button-emphasis-high-state-active-theme-light-color,
597
+ 'border-color': $lumx-button-emphasis-high-state-active-theme-light-border-color,
598
+ ),
599
+ 'theme-dark': (
600
+ 'background-color': $lumx-button-emphasis-high-state-active-theme-dark-background-color,
601
+ 'color': $lumx-button-emphasis-high-state-active-theme-dark-color,
602
+ 'border-color': $lumx-button-emphasis-high-state-active-theme-dark-border-color,
603
+ ),
604
+ ),
605
+ ),
606
+ 'emphasis-medium': (
607
+ 'state-default': (
608
+ 'padding': (
609
+ 'horizontal': $lumx-button-emphasis-medium-state-default-padding-horizontal,
610
+ ),
611
+ 'border-width': $lumx-button-emphasis-medium-state-default-border-width,
612
+ 'theme-light': (
613
+ 'background-color': $lumx-button-emphasis-medium-state-default-theme-light-background-color,
614
+ 'color': $lumx-button-emphasis-medium-state-default-theme-light-color,
615
+ 'border-color': $lumx-button-emphasis-medium-state-default-theme-light-border-color,
616
+ ),
617
+ 'theme-dark': (
618
+ 'background-color': $lumx-button-emphasis-medium-state-default-theme-dark-background-color,
619
+ 'color': $lumx-button-emphasis-medium-state-default-theme-dark-color,
620
+ 'border-color': $lumx-button-emphasis-medium-state-default-theme-dark-border-color,
621
+ ),
622
+ ),
623
+ 'state-hover': (
624
+ 'padding': (
625
+ 'horizontal': $lumx-button-emphasis-medium-state-hover-padding-horizontal,
626
+ ),
627
+ 'border-width': $lumx-button-emphasis-medium-state-hover-border-width,
628
+ 'theme-light': (
629
+ 'background-color': $lumx-button-emphasis-medium-state-hover-theme-light-background-color,
630
+ 'color': $lumx-button-emphasis-medium-state-hover-theme-light-color,
631
+ 'border-color': $lumx-button-emphasis-medium-state-hover-theme-light-border-color,
632
+ ),
633
+ 'theme-dark': (
634
+ 'background-color': $lumx-button-emphasis-medium-state-hover-theme-dark-background-color,
635
+ 'color': $lumx-button-emphasis-medium-state-hover-theme-dark-color,
636
+ 'border-color': $lumx-button-emphasis-medium-state-hover-theme-dark-border-color,
637
+ ),
638
+ ),
639
+ 'state-active': (
640
+ 'padding': (
641
+ 'horizontal': $lumx-button-emphasis-medium-state-active-padding-horizontal,
642
+ ),
643
+ 'border-width': $lumx-button-emphasis-medium-state-active-border-width,
644
+ 'theme-light': (
645
+ 'background-color': $lumx-button-emphasis-medium-state-active-theme-light-background-color,
646
+ 'color': $lumx-button-emphasis-medium-state-active-theme-light-color,
647
+ 'border-color': $lumx-button-emphasis-medium-state-active-theme-light-border-color,
648
+ ),
649
+ 'theme-dark': (
650
+ 'background-color': $lumx-button-emphasis-medium-state-active-theme-dark-background-color,
651
+ 'color': $lumx-button-emphasis-medium-state-active-theme-dark-color,
652
+ 'border-color': $lumx-button-emphasis-medium-state-active-theme-dark-border-color,
653
+ ),
654
+ ),
655
+ ),
656
+ 'emphasis-low': (
657
+ 'state-default': (
658
+ 'padding': (
659
+ 'horizontal': $lumx-button-emphasis-low-state-default-padding-horizontal,
660
+ ),
661
+ 'border-width': $lumx-button-emphasis-low-state-default-border-width,
662
+ 'theme-light': (
663
+ 'background-color': $lumx-button-emphasis-low-state-default-theme-light-background-color,
664
+ 'color': $lumx-button-emphasis-low-state-default-theme-light-color,
665
+ 'border-color': $lumx-button-emphasis-low-state-default-theme-light-border-color,
666
+ ),
667
+ 'theme-dark': (
668
+ 'background-color': $lumx-button-emphasis-low-state-default-theme-dark-background-color,
669
+ 'color': $lumx-button-emphasis-low-state-default-theme-dark-color,
670
+ 'border-color': $lumx-button-emphasis-low-state-default-theme-dark-border-color,
671
+ ),
672
+ ),
673
+ 'state-hover': (
674
+ 'padding': (
675
+ 'horizontal': $lumx-button-emphasis-low-state-hover-padding-horizontal,
676
+ ),
677
+ 'border-width': $lumx-button-emphasis-low-state-hover-border-width,
678
+ 'theme-light': (
679
+ 'background-color': $lumx-button-emphasis-low-state-hover-theme-light-background-color,
680
+ 'color': $lumx-button-emphasis-low-state-hover-theme-light-color,
681
+ 'border-color': $lumx-button-emphasis-low-state-hover-theme-light-border-color,
682
+ ),
683
+ 'theme-dark': (
684
+ 'background-color': $lumx-button-emphasis-low-state-hover-theme-dark-background-color,
685
+ 'color': $lumx-button-emphasis-low-state-hover-theme-dark-color,
686
+ 'border-color': $lumx-button-emphasis-low-state-hover-theme-dark-border-color,
687
+ ),
688
+ ),
689
+ 'state-active': (
690
+ 'padding': (
691
+ 'horizontal': $lumx-button-emphasis-low-state-active-padding-horizontal,
692
+ ),
693
+ 'border-width': $lumx-button-emphasis-low-state-active-border-width,
694
+ 'theme-light': (
695
+ 'background-color': $lumx-button-emphasis-low-state-active-theme-light-background-color,
696
+ 'color': $lumx-button-emphasis-low-state-active-theme-light-color,
697
+ 'border-color': $lumx-button-emphasis-low-state-active-theme-light-border-color,
698
+ ),
699
+ 'theme-dark': (
700
+ 'background-color': $lumx-button-emphasis-low-state-active-theme-dark-background-color,
701
+ 'color': $lumx-button-emphasis-low-state-active-theme-dark-color,
702
+ 'border-color': $lumx-button-emphasis-low-state-active-theme-dark-border-color,
703
+ ),
704
+ ),
705
+ ),
706
+ 'emphasis-selected': (
707
+ 'state-default': (
708
+ 'padding': (
709
+ 'horizontal': $lumx-button-emphasis-selected-state-default-padding-horizontal,
710
+ ),
711
+ 'border-width': $lumx-button-emphasis-selected-state-default-border-width,
712
+ 'theme-light': (
713
+ 'background-color': $lumx-button-emphasis-selected-state-default-theme-light-background-color,
714
+ 'color': $lumx-button-emphasis-selected-state-default-theme-light-color,
715
+ 'border-color': $lumx-button-emphasis-selected-state-default-theme-light-border-color,
716
+ ),
717
+ 'theme-dark': (
718
+ 'background-color': $lumx-button-emphasis-selected-state-default-theme-dark-background-color,
719
+ 'color': $lumx-button-emphasis-selected-state-default-theme-dark-color,
720
+ 'border-color': $lumx-button-emphasis-selected-state-default-theme-dark-border-color,
721
+ ),
722
+ ),
723
+ 'state-hover': (
724
+ 'padding': (
725
+ 'horizontal': $lumx-button-emphasis-selected-state-hover-padding-horizontal,
726
+ ),
727
+ 'border-width': $lumx-button-emphasis-selected-state-hover-border-width,
728
+ 'theme-light': (
729
+ 'background-color': $lumx-button-emphasis-selected-state-hover-theme-light-background-color,
730
+ 'color': $lumx-button-emphasis-selected-state-hover-theme-light-color,
731
+ 'border-color': $lumx-button-emphasis-selected-state-hover-theme-light-border-color,
732
+ ),
733
+ 'theme-dark': (
734
+ 'background-color': $lumx-button-emphasis-selected-state-hover-theme-dark-background-color,
735
+ 'color': $lumx-button-emphasis-selected-state-hover-theme-dark-color,
736
+ 'border-color': $lumx-button-emphasis-selected-state-hover-theme-dark-border-color,
737
+ ),
738
+ ),
739
+ 'state-active': (
740
+ 'padding': (
741
+ 'horizontal': $lumx-button-emphasis-selected-state-active-padding-horizontal,
742
+ ),
743
+ 'border-width': $lumx-button-emphasis-selected-state-active-border-width,
744
+ 'theme-light': (
745
+ 'background-color': $lumx-button-emphasis-selected-state-active-theme-light-background-color,
746
+ 'color': $lumx-button-emphasis-selected-state-active-theme-light-color,
747
+ 'border-color': $lumx-button-emphasis-selected-state-active-theme-light-border-color,
748
+ ),
749
+ 'theme-dark': (
750
+ 'background-color': $lumx-button-emphasis-selected-state-active-theme-dark-background-color,
751
+ 'color': $lumx-button-emphasis-selected-state-active-theme-dark-color,
752
+ 'border-color': $lumx-button-emphasis-selected-state-active-theme-dark-border-color,
753
+ ),
754
+ ),
755
+ ),
756
+ ),
757
+ 'material': (
758
+ 'button': (
759
+ 'text-transform': $lumx-material-button-text-transform,
760
+ 'variant-icon-border-radius': (),
761
+ ),
762
+ 'checkbox': (
763
+ 'wrapper-size': $lumx-material-checkbox-wrapper-size,
764
+ 'control-size': $lumx-material-checkbox-control-size,
765
+ ),
766
+ 'chip': (
767
+ 'size-m': (
768
+ 'height': $lumx-material-chip-size-m-height,
769
+ 'border-radius': $lumx-material-chip-size-m-border-radius,
770
+ 'padding-vertical': $lumx-material-chip-size-m-padding-vertical,
771
+ ),
772
+ 'size-s': (
773
+ 'height': $lumx-material-chip-size-s-height,
774
+ 'border-radius': $lumx-material-chip-size-s-border-radius,
775
+ 'padding-vertical': $lumx-material-chip-size-s-padding-vertical,
776
+ ),
777
+ ),
778
+ 'input-helper': (
779
+ 'font-size': $lumx-material-input-helper-font-size,
780
+ 'font-weight': $lumx-material-input-helper-font-weight,
781
+ 'line-height': $lumx-material-input-helper-line-height,
782
+ ),
783
+ 'input-label': (
784
+ 'font-size': $lumx-material-input-label-font-size,
785
+ 'font-weight': $lumx-material-input-label-font-weight,
786
+ 'line-height': $lumx-material-input-label-line-height,
787
+ ),
788
+ 'progress': (
789
+ 'bounce': $lumx-material-progress-bounce,
790
+ 'rotate': $lumx-material-progress-rotate,
791
+ ),
792
+ 'radio-button': (
793
+ 'wrapper-size': $lumx-material-radio-button-wrapper-size,
794
+ 'control-size': $lumx-material-radio-button-control-size,
795
+ 'indicator-size': $lumx-material-radio-button-indicator-size,
796
+ ),
797
+ 'switch': (
798
+ 'wrapper': (
799
+ 'width': $lumx-material-switch-wrapper-width,
800
+ 'height': $lumx-material-switch-wrapper-height,
801
+ ),
802
+ 'control': (
803
+ 'width': $lumx-material-switch-control-width,
804
+ 'height': $lumx-material-switch-control-height,
805
+ ),
806
+ 'indicator': (
807
+ 'size': $lumx-material-switch-indicator-size,
808
+ 'offset': $lumx-material-switch-indicator-offset,
809
+ ),
810
+ ),
811
+ 'text-field': (
812
+ 'padding': (
813
+ 'top': $lumx-material-text-field-padding-top,
814
+ 'bottom': $lumx-material-text-field-padding-bottom,
815
+ ),
816
+ 'header': (
817
+ 'wrapper': (
818
+ 'margin-bottom': $lumx-material-text-field-header-wrapper-margin-bottom,
819
+ ),
820
+ 'label': (
821
+ 'font-size': $lumx-material-text-field-header-label-font-size,
822
+ 'font-weight': $lumx-material-text-field-header-label-font-weight,
823
+ 'line-height': $lumx-material-text-field-header-label-line-height,
824
+ ),
825
+ ),
826
+ 'input': (
827
+ 'content': (
828
+ 'font-size': $lumx-material-text-field-input-content-font-size,
829
+ 'font-weight': $lumx-material-text-field-input-content-font-weight,
830
+ 'line-height': $lumx-material-text-field-input-content-line-height,
831
+ ),
832
+ ),
833
+ ),
834
+ ),
835
+ 'navigation': (
836
+ 'item': (
837
+ 'padding': (
838
+ 'horizontal': $lumx-navigation-item-padding-horizontal,
839
+ ),
840
+ 'min-height': $lumx-navigation-item-min-height,
841
+ 'border-radius': $lumx-navigation-item-border-radius,
842
+ 'emphasis-low': (
843
+ 'state-default': (
844
+ 'border': (
845
+ 'top': (
846
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-top-width,
847
+ ),
848
+ 'right': (
849
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-right-width,
850
+ ),
851
+ 'bottom': (
852
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-bottom-width,
853
+ ),
854
+ 'left': (
855
+ 'width': $lumx-navigation-item-emphasis-low-state-default-border-left-width,
856
+ ),
857
+ ),
858
+ 'theme-light': (
859
+ 'background-color':
860
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-background-color,
861
+ 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-border-color,
862
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-icon-color,
863
+ 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-label-color,
864
+ 'chevron-background-color':
865
+ $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-background-color,
866
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-light-chevron-color,
867
+ ),
868
+ 'theme-dark': (
869
+ 'background-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-background-color,
870
+ 'border-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-border-color,
871
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-icon-color,
872
+ 'label-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-label-color,
873
+ 'chevron-background-color':
874
+ $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-background-color,
875
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-default-theme-dark-chevron-color,
876
+ ),
877
+ ),
878
+ 'state-hover': (
879
+ 'border': (
880
+ 'top': (
881
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-top-width,
882
+ ),
883
+ 'right': (
884
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-right-width,
885
+ ),
886
+ 'bottom': (
887
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-bottom-width,
888
+ ),
889
+ 'left': (
890
+ 'width': $lumx-navigation-item-emphasis-low-state-hover-border-left-width,
891
+ ),
892
+ ),
893
+ 'theme-light': (
894
+ 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-background-color,
895
+ 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-border-color,
896
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-icon-color,
897
+ 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-label-color,
898
+ 'chevron-background-color':
899
+ $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-background-color,
900
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-light-chevron-color,
901
+ ),
902
+ 'theme-dark': (
903
+ 'background-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-background-color,
904
+ 'border-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-border-color,
905
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-icon-color,
906
+ 'label-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-label-color,
907
+ 'chevron-background-color':
908
+ $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-background-color,
909
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-hover-theme-dark-chevron-color,
910
+ ),
911
+ ),
912
+ 'state-active': (
913
+ 'border': (
914
+ 'top': (
915
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-top-width,
916
+ ),
917
+ 'right': (
918
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-right-width,
919
+ ),
920
+ 'bottom': (
921
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-bottom-width,
922
+ ),
923
+ 'left': (
924
+ 'width': $lumx-navigation-item-emphasis-low-state-active-border-left-width,
925
+ ),
926
+ ),
927
+ 'theme-light': (
928
+ 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-background-color,
929
+ 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-border-color,
930
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-icon-color,
931
+ 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-label-color,
932
+ 'chevron-background-color':
933
+ $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-background-color,
934
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-light-chevron-color,
935
+ ),
936
+ 'theme-dark': (
937
+ 'background-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-background-color,
938
+ 'border-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-border-color,
939
+ 'icon-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-icon-color,
940
+ 'label-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-label-color,
941
+ 'chevron-background-color':
942
+ $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-background-color,
943
+ 'chevron-color': $lumx-navigation-item-emphasis-low-state-active-theme-dark-chevron-color,
944
+ ),
945
+ ),
946
+ ),
947
+ 'emphasis-selected': (
948
+ 'state-default': (
949
+ 'border': (
950
+ 'top': (
951
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-top-width,
952
+ ),
953
+ 'right': (
954
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-right-width,
955
+ ),
956
+ 'bottom': (
957
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-bottom-width,
958
+ ),
959
+ 'left': (
960
+ 'width': $lumx-navigation-item-emphasis-selected-state-default-border-left-width,
961
+ ),
962
+ ),
963
+ 'theme-light': (
964
+ 'background-color':
965
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-background-color,
966
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-border-color,
967
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-icon-color,
968
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-label-color,
969
+ 'chevron-background-color':
970
+ $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-background-color,
971
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-light-chevron-color,
972
+ ),
973
+ 'theme-dark': (
974
+ 'background-color':
975
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-background-color,
976
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-border-color,
977
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-icon-color,
978
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-label-color,
979
+ 'chevron-background-color':
980
+ $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-background-color,
981
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-default-theme-dark-chevron-color,
982
+ ),
983
+ ),
984
+ 'state-hover': (
985
+ 'border': (
986
+ 'top': (
987
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-top-width,
988
+ ),
989
+ 'right': (
990
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-right-width,
991
+ ),
992
+ 'bottom': (
993
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-bottom-width,
994
+ ),
995
+ 'left': (
996
+ 'width': $lumx-navigation-item-emphasis-selected-state-hover-border-left-width,
997
+ ),
998
+ ),
999
+ 'theme-light': (
1000
+ 'background-color':
1001
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-background-color,
1002
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-border-color,
1003
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-icon-color,
1004
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-label-color,
1005
+ 'chevron-background-color':
1006
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-background-color,
1007
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-light-chevron-color,
1008
+ ),
1009
+ 'theme-dark': (
1010
+ 'background-color':
1011
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-background-color,
1012
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-border-color,
1013
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-icon-color,
1014
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-label-color,
1015
+ 'chevron-background-color':
1016
+ $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-background-color,
1017
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-hover-theme-dark-chevron-color,
1018
+ ),
1019
+ ),
1020
+ 'state-active': (
1021
+ 'border': (
1022
+ 'top': (
1023
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-top-width,
1024
+ ),
1025
+ 'right': (
1026
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-right-width,
1027
+ ),
1028
+ 'bottom': (
1029
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-bottom-width,
1030
+ ),
1031
+ 'left': (
1032
+ 'width': $lumx-navigation-item-emphasis-selected-state-active-border-left-width,
1033
+ ),
1034
+ ),
1035
+ 'theme-light': (
1036
+ 'background-color':
1037
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-background-color,
1038
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-border-color,
1039
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-icon-color,
1040
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-label-color,
1041
+ 'chevron-background-color':
1042
+ $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-background-color,
1043
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-light-chevron-color,
1044
+ ),
1045
+ 'theme-dark': (
1046
+ 'background-color':
1047
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-background-color,
1048
+ 'border-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-border-color,
1049
+ 'icon-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-icon-color,
1050
+ 'label-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-label-color,
1051
+ 'chevron-background-color':
1052
+ $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-background-color,
1053
+ 'chevron-color': $lumx-navigation-item-emphasis-selected-state-active-theme-dark-chevron-color,
1054
+ ),
1055
+ ),
1056
+ ),
1057
+ ),
1058
+ ),
1059
+ 'tabs': (
1060
+ 'link': (
1061
+ 'height': $lumx-tabs-link-height,
1062
+ 'border-radius': $lumx-tabs-link-border-radius,
1063
+ 'emphasis-low': (
1064
+ 'state-default': (
1065
+ 'border': (
1066
+ 'top': (
1067
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-top-width,
1068
+ ),
1069
+ 'right': (
1070
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-right-width,
1071
+ ),
1072
+ 'bottom': (
1073
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-bottom-width,
1074
+ ),
1075
+ 'left': (
1076
+ 'width': $lumx-tabs-link-emphasis-low-state-default-border-left-width,
1077
+ ),
1078
+ ),
1079
+ 'theme-light': (
1080
+ 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-background-color,
1081
+ 'color': $lumx-tabs-link-emphasis-low-state-default-theme-light-color,
1082
+ 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-light-border-color,
1083
+ ),
1084
+ 'theme-dark': (
1085
+ 'background-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-background-color,
1086
+ 'color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-color,
1087
+ 'border-color': $lumx-tabs-link-emphasis-low-state-default-theme-dark-border-color,
1088
+ ),
1089
+ ),
1090
+ 'state-hover': (
1091
+ 'border': (
1092
+ 'top': (
1093
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-top-width,
1094
+ ),
1095
+ 'right': (
1096
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-right-width,
1097
+ ),
1098
+ 'bottom': (
1099
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-bottom-width,
1100
+ ),
1101
+ 'left': (
1102
+ 'width': $lumx-tabs-link-emphasis-low-state-hover-border-left-width,
1103
+ ),
1104
+ ),
1105
+ 'theme-light': (
1106
+ 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-background-color,
1107
+ 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-color,
1108
+ 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-light-border-color,
1109
+ ),
1110
+ 'theme-dark': (
1111
+ 'background-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-background-color,
1112
+ 'color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-color,
1113
+ 'border-color': $lumx-tabs-link-emphasis-low-state-hover-theme-dark-border-color,
1114
+ ),
1115
+ ),
1116
+ 'state-active': (
1117
+ 'border': (
1118
+ 'top': (
1119
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-top-width,
1120
+ ),
1121
+ 'right': (
1122
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-right-width,
1123
+ ),
1124
+ 'bottom': (
1125
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-bottom-width,
1126
+ ),
1127
+ 'left': (
1128
+ 'width': $lumx-tabs-link-emphasis-low-state-active-border-left-width,
1129
+ ),
1130
+ ),
1131
+ 'theme-light': (
1132
+ 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-background-color,
1133
+ 'color': $lumx-tabs-link-emphasis-low-state-active-theme-light-color,
1134
+ 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-light-border-color,
1135
+ ),
1136
+ 'theme-dark': (
1137
+ 'background-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-background-color,
1138
+ 'color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-color,
1139
+ 'border-color': $lumx-tabs-link-emphasis-low-state-active-theme-dark-border-color,
1140
+ ),
1141
+ ),
1142
+ ),
1143
+ 'emphasis-selected': (
1144
+ 'state-default': (
1145
+ 'border': (
1146
+ 'top': (
1147
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-top-width,
1148
+ ),
1149
+ 'right': (
1150
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-right-width,
1151
+ ),
1152
+ 'bottom': (
1153
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-bottom-width,
1154
+ ),
1155
+ 'left': (
1156
+ 'width': $lumx-tabs-link-emphasis-selected-state-default-border-left-width,
1157
+ ),
1158
+ ),
1159
+ 'theme-light': (
1160
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-background-color,
1161
+ 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-color,
1162
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-light-border-color,
1163
+ ),
1164
+ 'theme-dark': (
1165
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-background-color,
1166
+ 'color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-color,
1167
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-default-theme-dark-border-color,
1168
+ ),
1169
+ ),
1170
+ 'state-hover': (
1171
+ 'border': (
1172
+ 'top': (
1173
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-top-width,
1174
+ ),
1175
+ 'right': (
1176
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-right-width,
1177
+ ),
1178
+ 'bottom': (
1179
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-bottom-width,
1180
+ ),
1181
+ 'left': (
1182
+ 'width': $lumx-tabs-link-emphasis-selected-state-hover-border-left-width,
1183
+ ),
1184
+ ),
1185
+ 'theme-light': (
1186
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-background-color,
1187
+ 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-color,
1188
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-light-border-color,
1189
+ ),
1190
+ 'theme-dark': (
1191
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-background-color,
1192
+ 'color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-color,
1193
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-hover-theme-dark-border-color,
1194
+ ),
1195
+ ),
1196
+ 'state-active': (
1197
+ 'border': (
1198
+ 'top': (
1199
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-top-width,
1200
+ ),
1201
+ 'right': (
1202
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-right-width,
1203
+ ),
1204
+ 'bottom': (
1205
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-bottom-width,
1206
+ ),
1207
+ 'left': (
1208
+ 'width': $lumx-tabs-link-emphasis-selected-state-active-border-left-width,
1209
+ ),
1210
+ ),
1211
+ 'theme-light': (
1212
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-background-color,
1213
+ 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-color,
1214
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-light-border-color,
1215
+ ),
1216
+ 'theme-dark': (
1217
+ 'background-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-background-color,
1218
+ 'color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-color,
1219
+ 'border-color': $lumx-tabs-link-emphasis-selected-state-active-theme-dark-border-color,
1220
+ ),
1221
+ ),
1222
+ ),
1223
+ ),
1224
+ ),
1225
+ 'text-field': (
1226
+ 'input': (
1227
+ 'min-height': $lumx-text-field-input-min-height,
1228
+ 'padding': (
1229
+ 'horizontal': $lumx-text-field-input-padding-horizontal,
1230
+ ),
1231
+ 'border-radius': $lumx-text-field-input-border-radius,
1232
+ ),
1233
+ 'state-default': (
1234
+ 'input': (
1235
+ 'border': (
1236
+ 'top': (
1237
+ 'width': $lumx-text-field-state-default-input-border-top-width,
1238
+ ),
1239
+ 'right': (
1240
+ 'width': $lumx-text-field-state-default-input-border-right-width,
1241
+ ),
1242
+ 'bottom': (
1243
+ 'width': $lumx-text-field-state-default-input-border-bottom-width,
1244
+ ),
1245
+ 'left': (
1246
+ 'width': $lumx-text-field-state-default-input-border-left-width,
1247
+ ),
1248
+ ),
1249
+ ),
1250
+ 'theme-light': (
1251
+ 'header': (
1252
+ 'label': (
1253
+ 'color': $lumx-text-field-state-default-theme-light-header-label-color,
1254
+ ),
1255
+ ),
1256
+ 'input': (
1257
+ 'background-color': $lumx-text-field-state-default-theme-light-input-background-color,
1258
+ 'border-color': $lumx-text-field-state-default-theme-light-input-border-color,
1259
+ 'content': (
1260
+ 'color': $lumx-text-field-state-default-theme-light-input-content-color,
1261
+ ),
1262
+ 'placeholder': (
1263
+ 'color': $lumx-text-field-state-default-theme-light-input-placeholder-color,
1264
+ ),
1265
+ ),
1266
+ ),
1267
+ 'theme-dark': (
1268
+ 'header': (
1269
+ 'label': (
1270
+ 'color': $lumx-text-field-state-default-theme-dark-header-label-color,
1271
+ ),
1272
+ ),
1273
+ 'input': (
1274
+ 'background-color': $lumx-text-field-state-default-theme-dark-input-background-color,
1275
+ 'border-color': $lumx-text-field-state-default-theme-dark-input-border-color,
1276
+ 'content': (
1277
+ 'color': $lumx-text-field-state-default-theme-dark-input-content-color,
1278
+ ),
1279
+ 'placeholder': (
1280
+ 'color': $lumx-text-field-state-default-theme-dark-input-placeholder-color,
1281
+ ),
1282
+ ),
1283
+ ),
1284
+ ),
1285
+ 'state-hover': (
1286
+ 'input': (
1287
+ 'border': (
1288
+ 'top': (
1289
+ 'width': $lumx-text-field-state-hover-input-border-top-width,
1290
+ ),
1291
+ 'right': (
1292
+ 'width': $lumx-text-field-state-hover-input-border-right-width,
1293
+ ),
1294
+ 'bottom': (
1295
+ 'width': $lumx-text-field-state-hover-input-border-bottom-width,
1296
+ ),
1297
+ 'left': (
1298
+ 'width': $lumx-text-field-state-hover-input-border-left-width,
1299
+ ),
1300
+ ),
1301
+ ),
1302
+ 'theme-light': (
1303
+ 'header': (
1304
+ 'label': (
1305
+ 'color': $lumx-text-field-state-hover-theme-light-header-label-color,
1306
+ ),
1307
+ ),
1308
+ 'input': (
1309
+ 'background-color': $lumx-text-field-state-hover-theme-light-input-background-color,
1310
+ 'border-color': $lumx-text-field-state-hover-theme-light-input-border-color,
1311
+ 'content': (
1312
+ 'color': $lumx-text-field-state-hover-theme-light-input-content-color,
1313
+ ),
1314
+ 'placeholder': (
1315
+ 'color': $lumx-text-field-state-hover-theme-light-input-placeholder-color,
1316
+ ),
1317
+ ),
1318
+ ),
1319
+ 'theme-dark': (
1320
+ 'header': (
1321
+ 'label': (
1322
+ 'color': $lumx-text-field-state-hover-theme-dark-header-label-color,
1323
+ ),
1324
+ ),
1325
+ 'input': (
1326
+ 'background-color': $lumx-text-field-state-hover-theme-dark-input-background-color,
1327
+ 'border-color': $lumx-text-field-state-hover-theme-dark-input-border-color,
1328
+ 'content': (
1329
+ 'color': $lumx-text-field-state-hover-theme-dark-input-content-color,
1330
+ ),
1331
+ 'placeholder': (
1332
+ 'color': $lumx-text-field-state-hover-theme-dark-input-placeholder-color,
1333
+ ),
1334
+ ),
1335
+ ),
1336
+ ),
1337
+ 'state-focus': (
1338
+ 'input': (
1339
+ 'border': (
1340
+ 'top': (
1341
+ 'width': $lumx-text-field-state-focus-input-border-top-width,
1342
+ ),
1343
+ 'right': (
1344
+ 'width': $lumx-text-field-state-focus-input-border-right-width,
1345
+ ),
1346
+ 'bottom': (
1347
+ 'width': $lumx-text-field-state-focus-input-border-bottom-width,
1348
+ ),
1349
+ 'left': (
1350
+ 'width': $lumx-text-field-state-focus-input-border-left-width,
1351
+ ),
1352
+ ),
1353
+ ),
1354
+ 'theme-light': (
1355
+ 'header': (
1356
+ 'label': (
1357
+ 'color': $lumx-text-field-state-focus-theme-light-header-label-color,
1358
+ ),
1359
+ ),
1360
+ 'input': (
1361
+ 'background-color': $lumx-text-field-state-focus-theme-light-input-background-color,
1362
+ 'border-color': $lumx-text-field-state-focus-theme-light-input-border-color,
1363
+ 'content': (
1364
+ 'color': $lumx-text-field-state-focus-theme-light-input-content-color,
1365
+ ),
1366
+ 'placeholder': (
1367
+ 'color': $lumx-text-field-state-focus-theme-light-input-placeholder-color,
1368
+ ),
1369
+ ),
1370
+ ),
1371
+ 'theme-dark': (
1372
+ 'header': (
1373
+ 'label': (
1374
+ 'color': $lumx-text-field-state-focus-theme-dark-header-label-color,
1375
+ ),
1376
+ ),
1377
+ 'input': (
1378
+ 'background-color': $lumx-text-field-state-focus-theme-dark-input-background-color,
1379
+ 'border-color': $lumx-text-field-state-focus-theme-dark-input-border-color,
1380
+ 'content': (
1381
+ 'color': $lumx-text-field-state-focus-theme-dark-input-content-color,
1382
+ ),
1383
+ 'placeholder': (
1384
+ 'color': $lumx-text-field-state-focus-theme-dark-input-placeholder-color,
1385
+ ),
1386
+ ),
1387
+ ),
1388
+ ),
1389
+ ),
1390
+ 'border-radius': $lumx-border-radius,
1391
+ 'color': (
1392
+ 'dark': (
1393
+ 'N': $lumx-color-dark-N,
1394
+ 'L1': $lumx-color-dark-L1,
1395
+ 'L2': $lumx-color-dark-L2,
1396
+ 'L3': $lumx-color-dark-L3,
1397
+ 'L4': $lumx-color-dark-L4,
1398
+ 'L5': $lumx-color-dark-L5,
1399
+ 'L6': $lumx-color-dark-L6,
1400
+ ),
1401
+ 'light': (
1402
+ 'N': $lumx-color-light-N,
1403
+ 'L1': $lumx-color-light-L1,
1404
+ 'L2': $lumx-color-light-L2,
1405
+ 'L3': $lumx-color-light-L3,
1406
+ 'L4': $lumx-color-light-L4,
1407
+ 'L5': $lumx-color-light-L5,
1408
+ 'L6': $lumx-color-light-L6,
1409
+ ),
1410
+ 'blue': (
1411
+ 'D2': $lumx-color-blue-D2,
1412
+ 'D1': $lumx-color-blue-D1,
1413
+ 'N': $lumx-color-blue-N,
1414
+ 'L1': $lumx-color-blue-L1,
1415
+ 'L2': $lumx-color-blue-L2,
1416
+ 'L3': $lumx-color-blue-L3,
1417
+ 'L4': $lumx-color-blue-L4,
1418
+ 'L5': $lumx-color-blue-L5,
1419
+ 'L6': $lumx-color-blue-L6,
1420
+ ),
1421
+ 'green': (
1422
+ 'D2': $lumx-color-green-D2,
1423
+ 'D1': $lumx-color-green-D1,
1424
+ 'N': $lumx-color-green-N,
1425
+ 'L1': $lumx-color-green-L1,
1426
+ 'L2': $lumx-color-green-L2,
1427
+ 'L3': $lumx-color-green-L3,
1428
+ 'L4': $lumx-color-green-L4,
1429
+ 'L5': $lumx-color-green-L5,
1430
+ 'L6': $lumx-color-green-L6,
1431
+ ),
1432
+ 'yellow': (
1433
+ 'D2': $lumx-color-yellow-D2,
1434
+ 'D1': $lumx-color-yellow-D1,
1435
+ 'N': $lumx-color-yellow-N,
1436
+ 'L1': $lumx-color-yellow-L1,
1437
+ 'L2': $lumx-color-yellow-L2,
1438
+ 'L3': $lumx-color-yellow-L3,
1439
+ 'L4': $lumx-color-yellow-L4,
1440
+ 'L5': $lumx-color-yellow-L5,
1441
+ 'L6': $lumx-color-yellow-L6,
1442
+ ),
1443
+ 'red': (
1444
+ 'D2': $lumx-color-red-D2,
1445
+ 'D1': $lumx-color-red-D1,
1446
+ 'N': $lumx-color-red-N,
1447
+ 'L1': $lumx-color-red-L1,
1448
+ 'L2': $lumx-color-red-L2,
1449
+ 'L3': $lumx-color-red-L3,
1450
+ 'L4': $lumx-color-red-L4,
1451
+ 'L5': $lumx-color-red-L5,
1452
+ 'L6': $lumx-color-red-L6,
1453
+ ),
1454
+ 'grey': (
1455
+ 'N': $lumx-color-grey-N,
1456
+ 'L1': $lumx-color-grey-L1,
1457
+ 'L2': $lumx-color-grey-L2,
1458
+ 'L3': $lumx-color-grey-L3,
1459
+ 'L4': $lumx-color-grey-L4,
1460
+ 'L5': $lumx-color-grey-L5,
1461
+ 'L6': $lumx-color-grey-L6,
1462
+ ),
1463
+ 'primary': (
1464
+ 'D2': $lumx-color-primary-D2,
1465
+ 'D1': $lumx-color-primary-D1,
1466
+ 'N': $lumx-color-primary-N,
1467
+ 'L1': $lumx-color-primary-L1,
1468
+ 'L2': $lumx-color-primary-L2,
1469
+ 'L3': $lumx-color-primary-L3,
1470
+ 'L4': $lumx-color-primary-L4,
1471
+ 'L5': $lumx-color-primary-L5,
1472
+ 'L6': $lumx-color-primary-L6,
1473
+ ),
1474
+ 'secondary': (
1475
+ 'D2': $lumx-color-secondary-D2,
1476
+ 'D1': $lumx-color-secondary-D1,
1477
+ 'N': $lumx-color-secondary-N,
1478
+ 'L1': $lumx-color-secondary-L1,
1479
+ 'L2': $lumx-color-secondary-L2,
1480
+ 'L3': $lumx-color-secondary-L3,
1481
+ 'L4': $lumx-color-secondary-L4,
1482
+ 'L5': $lumx-color-secondary-L5,
1483
+ 'L6': $lumx-color-secondary-L6,
1484
+ ),
1485
+ 'accent': (
1486
+ 'D2': $lumx-color-accent-D2,
1487
+ 'D1': $lumx-color-accent-D1,
1488
+ 'N': $lumx-color-accent-N,
1489
+ 'L1': $lumx-color-accent-L1,
1490
+ 'L2': $lumx-color-accent-L2,
1491
+ 'L3': $lumx-color-accent-L3,
1492
+ 'L4': $lumx-color-accent-L4,
1493
+ 'L5': $lumx-color-accent-L5,
1494
+ 'L6': $lumx-color-accent-L6,
1495
+ ),
1496
+ 'black': (
1497
+ 'N': $lumx-color-black-N,
1498
+ 'L1': $lumx-color-black-L1,
1499
+ 'L2': $lumx-color-black-L2,
1500
+ 'L3': $lumx-color-black-L3,
1501
+ 'L4': $lumx-color-black-L4,
1502
+ 'L5': $lumx-color-black-L5,
1503
+ 'L6': $lumx-color-black-L6,
1504
+ ),
1505
+ 'white': (
1506
+ 'N': $lumx-color-white-N,
1507
+ 'L1': $lumx-color-white-L1,
1508
+ 'L2': $lumx-color-white-L2,
1509
+ 'L3': $lumx-color-white-L3,
1510
+ 'L4': $lumx-color-white-L4,
1511
+ 'L5': $lumx-color-white-L5,
1512
+ 'L6': $lumx-color-white-L6,
1513
+ ),
1514
+ 'orange': (
1515
+ 'D2': $lumx-color-orange-D2,
1516
+ 'D1': $lumx-color-orange-D1,
1517
+ 'N': $lumx-color-orange-N,
1518
+ 'L1': $lumx-color-orange-L1,
1519
+ 'L2': $lumx-color-orange-L2,
1520
+ 'L3': $lumx-color-orange-L3,
1521
+ 'L4': $lumx-color-orange-L4,
1522
+ 'L5': $lumx-color-orange-L5,
1523
+ 'L6': $lumx-color-orange-L6,
1524
+ ),
1525
+ ),
1526
+ 'size': (
1527
+ 'xxs': $lumx-size-xxs,
1528
+ 'xs': $lumx-size-xs,
1529
+ 's': $lumx-size-s,
1530
+ 'm': $lumx-size-m,
1531
+ 'l': $lumx-size-l,
1532
+ 'xl': $lumx-size-xl,
1533
+ 'xxl': $lumx-size-xxl,
1534
+ ),
1535
+ 'spacing': (
1536
+ 'unit': (
1537
+ 'tiny': $lumx-spacing-unit-tiny,
1538
+ 'regular': $lumx-spacing-unit-regular,
1539
+ 'medium': $lumx-spacing-unit-medium,
1540
+ 'big': $lumx-spacing-unit-big,
1541
+ 'huge': $lumx-spacing-unit-huge,
1542
+ ),
1543
+ ),
1544
+ 'typography': (
1545
+ 'font-family': $lumx-typography-font-family,
1546
+ 'font-weight': (
1547
+ 'regular': $lumx-typography-font-weight-regular,
1548
+ 'bold': $lumx-typography-font-weight-bold,
1549
+ 'light': $lumx-typography-font-weight-light,
1550
+ ),
1551
+ 'interface': (
1552
+ 'display1': (
1553
+ 'font-size': $lumx-typography-interface-display1-font-size,
1554
+ 'font-weight': $lumx-typography-interface-display1-font-weight,
1555
+ 'line-height': $lumx-typography-interface-display1-line-height,
1556
+ ),
1557
+ 'headline': (
1558
+ 'font-size': $lumx-typography-interface-headline-font-size,
1559
+ 'font-weight': $lumx-typography-interface-headline-font-weight,
1560
+ 'line-height': $lumx-typography-interface-headline-line-height,
1561
+ ),
1562
+ 'title': (
1563
+ 'font-size': $lumx-typography-interface-title-font-size,
1564
+ 'font-weight': $lumx-typography-interface-title-font-weight,
1565
+ 'line-height': $lumx-typography-interface-title-line-height,
1566
+ ),
1567
+ 'subtitle2': (
1568
+ 'font-size': $lumx-typography-interface-subtitle2-font-size,
1569
+ 'font-weight': $lumx-typography-interface-subtitle2-font-weight,
1570
+ 'line-height': $lumx-typography-interface-subtitle2-line-height,
1571
+ ),
1572
+ 'subtitle1': (
1573
+ 'font-size': $lumx-typography-interface-subtitle1-font-size,
1574
+ 'font-weight': $lumx-typography-interface-subtitle1-font-weight,
1575
+ 'line-height': $lumx-typography-interface-subtitle1-line-height,
1576
+ ),
1577
+ 'body2': (
1578
+ 'font-size': $lumx-typography-interface-body2-font-size,
1579
+ 'font-weight': $lumx-typography-interface-body2-font-weight,
1580
+ 'line-height': $lumx-typography-interface-body2-line-height,
1581
+ ),
1582
+ 'body1': (
1583
+ 'font-size': $lumx-typography-interface-body1-font-size,
1584
+ 'font-weight': $lumx-typography-interface-body1-font-weight,
1585
+ 'line-height': $lumx-typography-interface-body1-line-height,
1586
+ ),
1587
+ 'caption': (
1588
+ 'font-size': $lumx-typography-interface-caption-font-size,
1589
+ 'font-weight': $lumx-typography-interface-caption-font-weight,
1590
+ 'line-height': $lumx-typography-interface-caption-line-height,
1591
+ ),
1592
+ 'overline': (
1593
+ 'font-size': $lumx-typography-interface-overline-font-size,
1594
+ 'font-weight': $lumx-typography-interface-overline-font-weight,
1595
+ 'line-height': $lumx-typography-interface-overline-line-height,
1596
+ ),
1597
+ ),
1598
+ 'custom': (
1599
+ 'title1': (
1600
+ 'font-size': $lumx-typography-custom-title1-font-size,
1601
+ 'font-weight': $lumx-typography-custom-title1-font-weight,
1602
+ 'line-height': $lumx-typography-custom-title1-line-height,
1603
+ ),
1604
+ 'title2': (
1605
+ 'font-size': $lumx-typography-custom-title2-font-size,
1606
+ 'font-weight': $lumx-typography-custom-title2-font-weight,
1607
+ 'line-height': $lumx-typography-custom-title2-line-height,
1608
+ ),
1609
+ 'title3': (
1610
+ 'font-size': $lumx-typography-custom-title3-font-size,
1611
+ 'font-weight': $lumx-typography-custom-title3-font-weight,
1612
+ 'line-height': $lumx-typography-custom-title3-line-height,
1613
+ ),
1614
+ 'title4': (
1615
+ 'font-size': $lumx-typography-custom-title4-font-size,
1616
+ 'font-weight': $lumx-typography-custom-title4-font-weight,
1617
+ 'line-height': $lumx-typography-custom-title4-line-height,
1618
+ ),
1619
+ 'title5': (
1620
+ 'font-size': $lumx-typography-custom-title5-font-size,
1621
+ 'font-weight': $lumx-typography-custom-title5-font-weight,
1622
+ 'line-height': $lumx-typography-custom-title5-line-height,
1623
+ ),
1624
+ 'title6': (
1625
+ 'font-size': $lumx-typography-custom-title6-font-size,
1626
+ 'font-weight': $lumx-typography-custom-title6-font-weight,
1627
+ 'line-height': $lumx-typography-custom-title6-line-height,
1628
+ ),
1629
+ 'intro': (
1630
+ 'font-size': $lumx-typography-custom-intro-font-size,
1631
+ 'font-weight': $lumx-typography-custom-intro-font-weight,
1632
+ 'line-height': $lumx-typography-custom-intro-line-height,
1633
+ ),
1634
+ 'body-large': (
1635
+ 'font-size': $lumx-typography-custom-body-large-font-size,
1636
+ 'font-weight': $lumx-typography-custom-body-large-font-weight,
1637
+ 'line-height': $lumx-typography-custom-body-large-line-height,
1638
+ ),
1639
+ 'body': (
1640
+ 'font-size': $lumx-typography-custom-body-font-size,
1641
+ 'font-weight': $lumx-typography-custom-body-font-weight,
1642
+ 'line-height': $lumx-typography-custom-body-line-height,
1643
+ ),
1644
+ 'quote': (
1645
+ 'font-size': $lumx-typography-custom-quote-font-size,
1646
+ 'font-weight': $lumx-typography-custom-quote-font-weight,
1647
+ 'font-style': $lumx-typography-custom-quote-font-style,
1648
+ 'line-height': $lumx-typography-custom-quote-line-height,
1649
+ ),
1650
+ 'publish-info': (
1651
+ 'font-size': $lumx-typography-custom-publish-info-font-size,
1652
+ 'font-weight': $lumx-typography-custom-publish-info-font-weight,
1653
+ 'line-height': $lumx-typography-custom-publish-info-line-height,
1654
+ ),
1655
+ 'button': (
1656
+ 'size-m': (
1657
+ 'font-size': $lumx-typography-custom-button-size-m-font-size,
1658
+ 'font-weight': $lumx-typography-custom-button-size-m-font-weight,
1659
+ ),
1660
+ 'size-s': (
1661
+ 'font-size': $lumx-typography-custom-button-size-s-font-size,
1662
+ 'font-weight': $lumx-typography-custom-button-size-s-font-weight,
1663
+ ),
1664
+ ),
1665
+ ),
1666
+ ),
1667
+ ) !default;