@code-coaching/vuetiful 0.25.0 → 0.27.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 (257) hide show
  1. package/README.md +47 -55
  2. package/dist/css/animations.css +2 -0
  3. package/{src → dist}/css/overrides/quasar.css +73 -58
  4. package/{src/styles → dist/css}/transitions/slide.css +6 -0
  5. package/dist/favicon.ico +0 -0
  6. package/dist/types/components/atoms/VAvatar.vue.d.ts +39 -90
  7. package/dist/types/components/atoms/VBadge.vue.d.ts +34 -21
  8. package/dist/types/components/atoms/VButton.vue.d.ts +42 -48
  9. package/dist/types/components/atoms/VChip.vue.d.ts +33 -21
  10. package/dist/types/components/atoms/VLightSwitch.vue.d.ts +5 -5
  11. package/dist/types/components/atoms/VRadio/VRadioDescription.vue.d.ts +7 -12
  12. package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts +53 -83
  13. package/dist/types/components/atoms/VRadio/VRadioItem.vue.d.ts +46 -12
  14. package/dist/types/components/atoms/VRadio/VRadioLabel.vue.d.ts +7 -12
  15. package/dist/types/components/atoms/VSwitch/VSwitch.vue.d.ts +51 -72
  16. package/dist/types/components/atoms/VSwitch/VSwitchDescription.vue.d.ts +32 -11
  17. package/dist/types/components/atoms/VSwitch/VSwitchGroup.vue.d.ts +32 -11
  18. package/dist/types/components/atoms/VSwitch/VSwitchLabel.vue.d.ts +33 -20
  19. package/dist/types/components/molecules/VAccordion/VAccordion.vue.d.ts +39 -28
  20. package/dist/types/components/molecules/VAccordion/VAccordionItem.vue.d.ts +35 -19
  21. package/dist/types/components/molecules/VAlert.vue.d.ts +50 -73
  22. package/dist/types/components/molecules/VCard/VCard.vue.d.ts +37 -48
  23. package/dist/types/components/molecules/VCard/VCardBody.vue.d.ts +33 -12
  24. package/dist/types/components/molecules/VCard/VCardFooter.vue.d.ts +36 -20
  25. package/dist/types/components/molecules/VCard/VCardHeader.vue.d.ts +36 -20
  26. package/dist/types/components/molecules/VCodeBlock.vue.d.ts +15 -16
  27. package/dist/types/components/molecules/VDrawer.vue.d.ts +13 -7
  28. package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +54 -132
  29. package/dist/types/components/molecules/VListbox/VListboxButton.vue.d.ts +22 -21
  30. package/dist/types/components/molecules/VListbox/VListboxItem.vue.d.ts +22 -19
  31. package/dist/types/components/molecules/VListbox/VListboxItems.vue.d.ts +19 -30
  32. package/dist/types/components/molecules/VListbox/VListboxLabel.vue.d.ts +7 -12
  33. package/dist/types/components/molecules/VPreview.vue.d.ts +57 -74
  34. package/dist/types/components/molecules/VRail/VRail.vue.d.ts +28 -13
  35. package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +49 -16
  36. package/dist/types/components/molecules/VShell.vue.d.ts +76 -44
  37. package/dist/types/components/molecules/VShellConfigurator.vue.d.ts +99 -0
  38. package/dist/types/components/molecules/VTabs/VTab.vue.d.ts +52 -20
  39. package/dist/types/components/molecules/VTabs/VTabPanel.vue.d.ts +8 -1
  40. package/dist/types/components/molecules/VTabs/VTabs.vue.d.ts +43 -101
  41. package/dist/types/components/molecules/Vuetiful.vue.d.ts +22 -0
  42. package/dist/types/components/molecules/index.d.ts +3 -4
  43. package/dist/types/directives/click-outside-group.d.ts +9 -0
  44. package/dist/types/directives/click-outside.d.ts +9 -0
  45. package/dist/types/directives/clipboard.d.ts +1 -1
  46. package/dist/types/directives/index.d.ts +3 -1
  47. package/dist/types/index.d.ts +1 -8
  48. package/dist/types/props/props.d.ts +1 -14
  49. package/dist/types/services/dark-mode.service.d.ts +1 -1
  50. package/dist/types/services/drawer.service.d.ts +3 -3
  51. package/dist/types/services/index.d.ts +2 -2
  52. package/dist/types/utils/id-generator.d.ts +1 -0
  53. package/dist/types/utils/index.d.ts +3 -4
  54. package/dist/types/utils/tailwind-merge.d.ts +1 -0
  55. package/dist/types/utils/theme/rocket.theme.d.ts +223 -0
  56. package/dist/types/utils/theme/theme-switcher.vue.d.ts +14 -5
  57. package/dist/types/utils/theme/theme.service.d.ts +6 -9
  58. package/dist/types/utils/theme/themes.d.ts +3 -39
  59. package/dist/types/utils/theme/vuetiful.theme.d.ts +224 -0
  60. package/dist/vuetiful.es.mjs +54837 -49494
  61. package/dist/vuetiful.umd.cjs +189 -0
  62. package/package.json +53 -37
  63. package/dist/style.css +0 -10
  64. package/dist/types/components/VBootstrap.vue.d.ts +0 -15
  65. package/dist/types/components/atoms/VAvatar.test.d.ts +0 -1
  66. package/dist/types/components/atoms/VBadge.test.d.ts +0 -1
  67. package/dist/types/components/atoms/VButton.test.d.ts +0 -1
  68. package/dist/types/components/atoms/VChip.test.d.ts +0 -1
  69. package/dist/types/components/atoms/VLightSwitch.test.d.ts +0 -1
  70. package/dist/types/components/atoms/VRadio/VRadioDescription.test.d.ts +0 -1
  71. package/dist/types/components/atoms/VRadio/VRadioGroup.test.d.ts +0 -1
  72. package/dist/types/components/atoms/VRadio/VRadioItem.test.d.ts +0 -1
  73. package/dist/types/components/atoms/VRadio/VRadioLabel.test.d.ts +0 -1
  74. package/dist/types/components/atoms/VSwitch/VSwitch.test.d.ts +0 -1
  75. package/dist/types/components/atoms/VSwitch/VSwitchDescription.test.d.ts +0 -1
  76. package/dist/types/components/atoms/VSwitch/VSwitchGroup.test.d.ts +0 -1
  77. package/dist/types/components/atoms/VSwitch/VSwitchLabel.test.d.ts +0 -1
  78. package/dist/types/components/molecules/VAccordion/VAccordion.test.d.ts +0 -1
  79. package/dist/types/components/molecules/VAccordion/VAccordionItem.test.d.ts +0 -1
  80. package/dist/types/components/molecules/VAlert.test.d.ts +0 -1
  81. package/dist/types/components/molecules/VCard/VCard.test.d.ts +0 -1
  82. package/dist/types/components/molecules/VCard/VCardBody.test.d.ts +0 -1
  83. package/dist/types/components/molecules/VCard/VCardFooter.test.d.ts +0 -1
  84. package/dist/types/components/molecules/VCard/VCardHeader.test.d.ts +0 -1
  85. package/dist/types/components/molecules/VCodeBlock.test.d.ts +0 -1
  86. package/dist/types/components/molecules/VDrawer.test.d.ts +0 -1
  87. package/dist/types/components/molecules/VListbox/VListbox.test.d.ts +0 -1
  88. package/dist/types/components/molecules/VListbox/VListboxButton.test.d.ts +0 -1
  89. package/dist/types/components/molecules/VListbox/VListboxItem.test.d.ts +0 -1
  90. package/dist/types/components/molecules/VListbox/VListboxItems.test.d.ts +0 -1
  91. package/dist/types/components/molecules/VListbox/VListboxLabel.test.d.ts +0 -1
  92. package/dist/types/components/molecules/VPreview.test.d.ts +0 -1
  93. package/dist/types/components/molecules/VRail/VRail.test.d.ts +0 -1
  94. package/dist/types/components/molecules/VRail/VRailTile.test.d.ts +0 -1
  95. package/dist/types/components/molecules/VShell.test.d.ts +0 -1
  96. package/dist/types/components/molecules/VTabs/VTab.test.d.ts +0 -1
  97. package/dist/types/components/molecules/VTabs/VTabPanel.test.d.ts +0 -1
  98. package/dist/types/components/molecules/VTabs/VTabs.test.d.ts +0 -1
  99. package/dist/types/directives/clipboard.test.d.ts +0 -1
  100. package/dist/types/services/dark-mode.service.test.d.ts +0 -1
  101. package/dist/types/services/drawer.service.test.d.ts +0 -1
  102. package/dist/types/services/highlight.service.test.d.ts +0 -1
  103. package/dist/types/services/rail.service.test.d.ts +0 -1
  104. package/dist/types/services/settings.service.test.d.ts +0 -1
  105. package/dist/types/types/index.d.ts +0 -54
  106. package/dist/types/types/tailwind.d.ts +0 -4
  107. package/dist/types/utils/colors/colors.service.d.ts +0 -69
  108. package/dist/types/utils/platform/platform.service.test.d.ts +0 -1
  109. package/dist/types/utils/theme/callback.test.d.ts +0 -1
  110. package/dist/types/utils/theme/remove.test.d.ts +0 -1
  111. package/dist/types/utils/theme/theme.service.test.d.ts +0 -1
  112. package/dist/vuetiful.umd.js +0 -99
  113. package/src/assets/fonts/myfont.woff +0 -0
  114. package/src/assets/main.css +0 -17
  115. package/src/components/VBootstrap.vue +0 -62
  116. package/src/components/atoms/VAvatar.test.ts +0 -175
  117. package/src/components/atoms/VAvatar.vue +0 -89
  118. package/src/components/atoms/VBadge.test.ts +0 -28
  119. package/src/components/atoms/VBadge.vue +0 -17
  120. package/src/components/atoms/VButton.test.ts +0 -180
  121. package/src/components/atoms/VButton.vue +0 -76
  122. package/src/components/atoms/VChip.test.ts +0 -33
  123. package/src/components/atoms/VChip.vue +0 -17
  124. package/src/components/atoms/VLightSwitch.test.ts +0 -69
  125. package/src/components/atoms/VLightSwitch.vue +0 -121
  126. package/src/components/atoms/VRadio/VRadioDescription.test.ts +0 -55
  127. package/src/components/atoms/VRadio/VRadioDescription.vue +0 -14
  128. package/src/components/atoms/VRadio/VRadioGroup.test.ts +0 -81
  129. package/src/components/atoms/VRadio/VRadioGroup.vue +0 -88
  130. package/src/components/atoms/VRadio/VRadioItem.test.ts +0 -183
  131. package/src/components/atoms/VRadio/VRadioItem.vue +0 -36
  132. package/src/components/atoms/VRadio/VRadioLabel.test.ts +0 -55
  133. package/src/components/atoms/VRadio/VRadioLabel.vue +0 -16
  134. package/src/components/atoms/VSwitch/VSwitch.test.ts +0 -100
  135. package/src/components/atoms/VSwitch/VSwitch.vue +0 -106
  136. package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +0 -55
  137. package/src/components/atoms/VSwitch/VSwitchDescription.vue +0 -16
  138. package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +0 -26
  139. package/src/components/atoms/VSwitch/VSwitchGroup.vue +0 -16
  140. package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +0 -89
  141. package/src/components/atoms/VSwitch/VSwitchLabel.vue +0 -20
  142. package/src/components/atoms/index.ts +0 -31
  143. package/src/components/index.ts +0 -2
  144. package/src/components/molecules/VAccordion/VAccordion.test.ts +0 -27
  145. package/src/components/molecules/VAccordion/VAccordion.vue +0 -32
  146. package/src/components/molecules/VAccordion/VAccordionItem.test.ts +0 -134
  147. package/src/components/molecules/VAccordion/VAccordionItem.vue +0 -68
  148. package/src/components/molecules/VAlert.test.ts +0 -100
  149. package/src/components/molecules/VAlert.vue +0 -137
  150. package/src/components/molecules/VCard/VCard.test.ts +0 -47
  151. package/src/components/molecules/VCard/VCard.vue +0 -74
  152. package/src/components/molecules/VCard/VCardBody.test.ts +0 -39
  153. package/src/components/molecules/VCard/VCardBody.vue +0 -16
  154. package/src/components/molecules/VCard/VCardFooter.test.ts +0 -63
  155. package/src/components/molecules/VCard/VCardFooter.vue +0 -31
  156. package/src/components/molecules/VCard/VCardHeader.test.ts +0 -86
  157. package/src/components/molecules/VCard/VCardHeader.vue +0 -53
  158. package/src/components/molecules/VCodeBlock.test.ts +0 -133
  159. package/src/components/molecules/VCodeBlock.vue +0 -113
  160. package/src/components/molecules/VDrawer.test.ts +0 -14
  161. package/src/components/molecules/VDrawer.vue +0 -87
  162. package/src/components/molecules/VListbox/VListbox.test.ts +0 -146
  163. package/src/components/molecules/VListbox/VListbox.vue +0 -149
  164. package/src/components/molecules/VListbox/VListboxButton.test.ts +0 -66
  165. package/src/components/molecules/VListbox/VListboxButton.vue +0 -57
  166. package/src/components/molecules/VListbox/VListboxItem.test.ts +0 -51
  167. package/src/components/molecules/VListbox/VListboxItem.vue +0 -39
  168. package/src/components/molecules/VListbox/VListboxItems.test.ts +0 -44
  169. package/src/components/molecules/VListbox/VListboxItems.vue +0 -42
  170. package/src/components/molecules/VListbox/VListboxLabel.test.ts +0 -30
  171. package/src/components/molecules/VListbox/VListboxLabel.vue +0 -14
  172. package/src/components/molecules/VPreview.test.ts +0 -73
  173. package/src/components/molecules/VPreview.vue +0 -230
  174. package/src/components/molecules/VRail/VRail.test.ts +0 -14
  175. package/src/components/molecules/VRail/VRail.vue +0 -33
  176. package/src/components/molecules/VRail/VRailTile.test.ts +0 -97
  177. package/src/components/molecules/VRail/VRailTile.vue +0 -49
  178. package/src/components/molecules/VShell.test.ts +0 -14
  179. package/src/components/molecules/VShell.vue +0 -63
  180. package/src/components/molecules/VTabs/VTab.test.ts +0 -143
  181. package/src/components/molecules/VTabs/VTab.vue +0 -50
  182. package/src/components/molecules/VTabs/VTabPanel.test.ts +0 -24
  183. package/src/components/molecules/VTabs/VTabPanel.vue +0 -9
  184. package/src/components/molecules/VTabs/VTabs.test.ts +0 -92
  185. package/src/components/molecules/VTabs/VTabs.vue +0 -104
  186. package/src/components/molecules/index.ts +0 -51
  187. package/src/directives/clipboard.test.ts +0 -26
  188. package/src/directives/clipboard.ts +0 -9
  189. package/src/directives/index.ts +0 -3
  190. package/src/env.d.ts +0 -8
  191. package/src/index.ts +0 -21
  192. package/src/props/index.ts +0 -1
  193. package/src/props/props.ts +0 -62
  194. package/src/services/dark-mode.service.test.ts +0 -104
  195. package/src/services/dark-mode.service.ts +0 -75
  196. package/src/services/drawer.service.test.ts +0 -45
  197. package/src/services/drawer.service.ts +0 -46
  198. package/src/services/highlight.service.test.ts +0 -24
  199. package/src/services/highlight.service.ts +0 -19
  200. package/src/services/index.ts +0 -8
  201. package/src/services/rail.service.test.ts +0 -13
  202. package/src/services/rail.service.ts +0 -11
  203. package/src/services/settings.service.test.ts +0 -17
  204. package/src/services/settings.service.ts +0 -136
  205. package/src/styles/all.css +0 -24
  206. package/src/styles/core.css +0 -66
  207. package/src/styles/elements/alerts.css +0 -17
  208. package/src/styles/elements/badges.css +0 -31
  209. package/src/styles/elements/breadcrumbs.css +0 -26
  210. package/src/styles/elements/buttons.css +0 -103
  211. package/src/styles/elements/cards.css +0 -32
  212. package/src/styles/elements/chips.css +0 -22
  213. package/src/styles/elements/forms.css +0 -269
  214. package/src/styles/elements/lists.css +0 -48
  215. package/src/styles/elements/logo-clouds.css +0 -29
  216. package/src/styles/elements/modals.css +0 -15
  217. package/src/styles/elements/placeholders.css +0 -17
  218. package/src/styles/elements/popups.css +0 -16
  219. package/src/styles/elements/tables.css +0 -102
  220. package/src/styles/elements.css +0 -19
  221. package/src/styles/highlight-js.css +0 -116
  222. package/src/styles/tailwind.css +0 -16
  223. package/src/styles/transitions.css +0 -2
  224. package/src/styles/typography.css +0 -101
  225. package/src/styles/variants.css +0 -156
  226. package/src/tailwind/core.cjs +0 -37
  227. package/src/tailwind/generated/intellisense-classes.cjs +0 -558
  228. package/src/tailwind/intellisense.cjs +0 -21
  229. package/src/tailwind/settings.cjs +0 -20
  230. package/src/tailwind/theme/colors.cjs +0 -20
  231. package/src/tailwind/tokens/backgrounds.cjs +0 -48
  232. package/src/tailwind/tokens/border-radius.cjs +0 -21
  233. package/src/tailwind/tokens/borders.cjs +0 -24
  234. package/src/tailwind/tokens/fills.cjs +0 -20
  235. package/src/tailwind/tokens/rings.cjs +0 -50
  236. package/src/tailwind/tokens/text.cjs +0 -35
  237. package/src/tailwind/vuetiful.cjs +0 -19
  238. package/src/themes/theme-rocket.css +0 -119
  239. package/src/themes/theme-sahara.css +0 -128
  240. package/src/themes/theme-seafoam.css +0 -120
  241. package/src/themes/theme-seasonal.css +0 -115
  242. package/src/themes/theme-skeleton.css +0 -115
  243. package/src/themes/theme-vintage.css +0 -125
  244. package/src/themes/theme-vuetiful.css +0 -136
  245. package/src/types/index.ts +0 -59
  246. package/src/types/tailwind.ts +0 -7
  247. package/src/utils/colors/colors.service.ts +0 -293
  248. package/src/utils/index.ts +0 -8
  249. package/src/utils/platform/platform.service.test.ts +0 -19
  250. package/src/utils/platform/platform.service.ts +0 -8
  251. package/src/utils/theme/callback.test.ts +0 -28
  252. package/src/utils/theme/remove.test.ts +0 -27
  253. package/src/utils/theme/theme-switcher.vue +0 -74
  254. package/src/utils/theme/theme.service.test.ts +0 -269
  255. package/src/utils/theme/theme.service.ts +0 -173
  256. package/src/utils/theme/themes.ts +0 -282
  257. /package/{src/styles → dist/css}/transitions/fade.css +0 -0
@@ -1,24 +0,0 @@
1
- // Design Tokens: Borders
2
- // Doc: https://www.vuetiful.dev/docs/tokens
3
-
4
- const settings = require("../settings.cjs");
5
-
6
- module.exports = () => {
7
- const classes = {
8
- // Border Width - ex: .border-token
9
- ".border-token": { "border-width": "var(--theme-border-base)" },
10
- };
11
- settings.colorNames.forEach((n) => {
12
- // Color Pairings
13
- // Example: .border-primary-50-900-token | .border-primary-900-50-token
14
- settings.colorPairings.forEach((p) => {
15
- classes[`.border-${n}-${p.light}-${p.dark}-token`] = {
16
- "border-color": `rgb(var(--color-${n}-${p.light}))`,
17
- };
18
- classes[`.dark .border-${n}-${p.light}-${p.dark}-token`] = {
19
- "border-color": `rgb(var(--color-${n}-${p.dark}))`,
20
- };
21
- });
22
- });
23
- return classes;
24
- };
@@ -1,20 +0,0 @@
1
- // Design Tokens: SVG Fill
2
- // Doc: https://www.vuetiful.dev/docs/tokens
3
-
4
- const settings = require("../settings.cjs");
5
-
6
- module.exports = () => {
7
- const classes = {
8
- ".fill-base-token": { fill: "rgba(var(--theme-font-color-base))" },
9
- ".fill-dark-token": { fill: "rgba(var(--theme-font-color-dark))" },
10
- // Fill Token - ex: .fill-token
11
- ".fill-token": { fill: "rgba(var(--theme-font-color-base))" },
12
- ".dark .fill-token": { fill: "rgba(var(--theme-font-color-dark))" },
13
- };
14
- settings.colorNames.forEach((n) => {
15
- // On-X Fill Colors
16
- // Example: .fill-on-primary-token
17
- classes[`.fill-on-${n}-token`] = { fill: `rgb(var(--on-${n}))` };
18
- });
19
- return classes;
20
- };
@@ -1,50 +0,0 @@
1
- // Design Tokens: Rings
2
- // Doc: https://www.vuetiful.dev/docs/tokens
3
-
4
- const settings = require('../settings.cjs');
5
-
6
- // Local
7
- const ringTokenTheme = {
8
- '--tw-ring-offset-shadow': `var(--tw-ring-inset) 0 0 0 var(--theme-border-base) var(--tw-ring-offset-color)`,
9
- '--tw-ring-shadow': `var(--tw-ring-inset) 0 0 0 calc(2px + var(--theme-border-base)) var(--tw-ring-color)`,
10
- 'box-shadow': `var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)`,
11
- };
12
- const ringOutlineShared = {
13
- // .ring-[1px]
14
- '--tw-ring-offset-shadow': 'var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)',
15
- '--tw-ring-shadow': 'var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)',
16
- 'box-shadow': 'var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)',
17
- // .ring-inset
18
- '--tw-ring-inset': 'inset'
19
- };
20
-
21
- module.exports = () => {
22
- const classes = {
23
- '.ring-token': {
24
- ...ringTokenTheme,
25
- },
26
- // Ring Outline (for cards)
27
- // Example: .ring-outline-token
28
- '.ring-outline-token': {
29
- ...ringOutlineShared,
30
- '--tw-ring-color': 'rgb(23 23 23 / 0.05);' // neutral-900, 5% opacity
31
- },
32
- '.dark .ring-outline-token': {
33
- ...ringOutlineShared,
34
- '--tw-ring-color': 'rgb(250 250 250 / 0.05)' // neutral-50, 5% opacity
35
- }
36
- };
37
- settings.colorNames.forEach((n) => {
38
- // Color Pairings
39
- // Example: .ring-primary-50-900-token | .ring-primary-900-50-token
40
- settings.colorPairings.forEach((p) => {
41
- classes[`.ring-${n}-${p.light}-${p.dark}-token`] = {
42
- '--tw-ring-color': `rgb(var(--color-${n}-${p.light}) / 1)`
43
- };
44
- classes[`.dark .ring-${n}-${p.light}-${p.dark}-token`] = {
45
- '--tw-ring-color': `rgb(var(--color-${n}-${p.dark}) / 1)`
46
- };
47
- });
48
- });
49
- return classes;
50
- };
@@ -1,35 +0,0 @@
1
- // Design Tokens: Text
2
- // Doc: https://www.vuetiful.dev/docs/tokens
3
-
4
- const settings = require("../settings.cjs");
5
-
6
- module.exports = () => {
7
- const classes = {
8
- // Font Family
9
- ".font-heading-token": { "font-family": "var(--theme-font-family-heading)" },
10
- ".font-token": { "font-family": "var(--theme-font-family-base)" },
11
- // Default Text Colors
12
- ".text-base-token": { color: "rgba(var(--theme-font-color-base))" },
13
- ".text-dark-token": { color: "rgba(var(--theme-font-color-dark))" },
14
- // Light/Dark Text Color - ex: .text-token
15
- ".text-token": { color: "rgba(var(--theme-font-color-base))" },
16
- ".dark .text-token": { color: "rgba(var(--theme-font-color-dark))" },
17
- };
18
- settings.colorNames.forEach((n) => {
19
- // On-X Text Colors
20
- // Example: .text-on-primary-token
21
- classes[`.text-on-${n}-token`] = { color: `rgb(var(--on-${n}))` };
22
-
23
- // Color Pairings
24
- // Example: .text-primary-50-900-token | .text-primary-900-50-token
25
- settings.colorPairings.forEach((p) => {
26
- classes[`.text-${n}-${p.light}-${p.dark}-token`] = {
27
- color: `rgb(var(--color-${n}-${p.light}))`,
28
- };
29
- classes[`.dark .text-${n}-${p.light}-${p.dark}-token`] = {
30
- color: `rgb(var(--color-${n}-${p.dark}))`,
31
- };
32
- });
33
- });
34
- return classes;
35
- };
@@ -1,19 +0,0 @@
1
- // The Vuetiful Tailwind Plugin
2
- // Tailwind Docs: https://tailwindcss.com/docs/plugins
3
- // Vuetiful Docs: https://www.vuetiful.dev/docs/get-started
4
-
5
- const intellisensePlugin = require("./intellisense.cjs");
6
- const corePlugin = require("./core.cjs");
7
-
8
- // The default export is a function that returns an array of plugins
9
- // and accepts an optional config that determines which plugins are included.
10
- // By default, all plugins are included.
11
- module.exports = function (config = { intellisense: true }) {
12
- const { intellisense } = config;
13
- const plugins = [corePlugin];
14
-
15
- // Add the plugin if the option is not explicitly set to false
16
- if (intellisense !== false) plugins.push(intellisensePlugin);
17
-
18
- return plugins;
19
- };
@@ -1,119 +0,0 @@
1
- /* https://fonts.google.com/specimen/Space+Grotesk */
2
- @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
3
- /* https://fonts.google.com/specimen/Roboto?query=roboto */
4
- @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
5
-
6
- :root {
7
- /* =~= Theme Properties =~= */
8
- --theme-font-family-base: 'Roboto', sans-serif;
9
- --theme-font-family-heading: 'Space Grotesk', sans-serif;
10
- --theme-font-color-base: var(--color-primary-900);
11
- --theme-font-color-dark: var(--color-primary-100);
12
- --theme-rounded-base: 0px;
13
- --theme-rounded-container: 0px;
14
- --theme-border-base: 0px;
15
- /* =~= Theme On-X Colors =~= */
16
- --on-primary: 0 0 0;
17
- --on-secondary: 0 0 0;
18
- --on-tertiary: 0 0 0;
19
- --on-success: 0 0 0;
20
- --on-warning: 0 0 0;
21
- --on-error: 255 255 255;
22
- --on-surface: 255 255 255;
23
- /* =~= Theme Colors =~= */
24
- /* primary | #06b6d4 */
25
- --color-primary-50: 218 244 249; /* ⬅ #daf4f9 */
26
- --color-primary-100: 205 240 246; /* ⬅ #cdf0f6 */
27
- --color-primary-200: 193 237 244; /* ⬅ #c1edf4 */
28
- --color-primary-300: 155 226 238; /* ⬅ #9be2ee */
29
- --color-primary-400: 81 204 225; /* ⬅ #51cce1 */
30
- --color-primary-500: 6 182 212; /* ⬅ #06b6d4 */
31
- --color-primary-600: 5 164 191; /* ⬅ #05a4bf */
32
- --color-primary-700: 5 137 159; /* ⬅ #05899f */
33
- --color-primary-800: 4 109 127; /* ⬅ #046d7f */
34
- --color-primary-900: 3 89 104; /* ⬅ #035968 */
35
- /* secondary | #3b82f6 */
36
- --color-secondary-50: 226 236 254; /* ⬅ #e2ecfe */
37
- --color-secondary-100: 216 230 253; /* ⬅ #d8e6fd */
38
- --color-secondary-200: 206 224 253; /* ⬅ #cee0fd */
39
- --color-secondary-300: 177 205 251; /* ⬅ #b1cdfb */
40
- --color-secondary-400: 118 168 249; /* ⬅ #76a8f9 */
41
- --color-secondary-500: 59 130 246; /* ⬅ #3b82f6 */
42
- --color-secondary-600: 53 117 221; /* ⬅ #3575dd */
43
- --color-secondary-700: 44 98 185; /* ⬅ #2c62b9 */
44
- --color-secondary-800: 35 78 148; /* ⬅ #234e94 */
45
- --color-secondary-900: 29 64 121; /* ⬅ #1d4079 */
46
- /* tertiary | #a855f7 */
47
- --color-tertiary-50: 242 230 254; /* ⬅ #f2e6fe */
48
- --color-tertiary-100: 238 221 253; /* ⬅ #eeddfd */
49
- --color-tertiary-200: 233 213 253; /* ⬅ #e9d5fd */
50
- --color-tertiary-300: 220 187 252; /* ⬅ #dcbbfc */
51
- --color-tertiary-400: 194 136 249; /* ⬅ #c288f9 */
52
- --color-tertiary-500: 168 85 247; /* ⬅ #a855f7 */
53
- --color-tertiary-600: 151 77 222; /* ⬅ #974dde */
54
- --color-tertiary-700: 126 64 185; /* ⬅ #7e40b9 */
55
- --color-tertiary-800: 101 51 148; /* ⬅ #653394 */
56
- --color-tertiary-900: 82 42 121; /* ⬅ #522a79 */
57
- /* success | #4ccb15 */
58
- --color-success-50: 228 247 220; /* ⬅ #e4f7dc */
59
- --color-success-100: 219 245 208; /* ⬅ #dbf5d0 */
60
- --color-success-200: 210 242 197; /* ⬅ #d2f2c5 */
61
- --color-success-300: 183 234 161; /* ⬅ #b7eaa1 */
62
- --color-success-400: 130 219 91; /* ⬅ #82db5b */
63
- --color-success-500: 76 203 21; /* ⬅ #4ccb15 */
64
- --color-success-600: 68 183 19; /* ⬅ #44b713 */
65
- --color-success-700: 57 152 16; /* ⬅ #399810 */
66
- --color-success-800: 46 122 13; /* ⬅ #2e7a0d */
67
- --color-success-900: 37 99 10; /* ⬅ #25630a */
68
- /* warning | #f4c12a */
69
- --color-warning-50: 253 246 223; /* ⬅ #fdf6df */
70
- --color-warning-100: 253 243 212; /* ⬅ #fdf3d4 */
71
- --color-warning-200: 252 240 202; /* ⬅ #fcf0ca */
72
- --color-warning-300: 251 230 170; /* ⬅ #fbe6aa */
73
- --color-warning-400: 247 212 106; /* ⬅ #f7d46a */
74
- --color-warning-500: 244 193 42; /* ⬅ #f4c12a */
75
- --color-warning-600: 220 174 38; /* ⬅ #dcae26 */
76
- --color-warning-700: 183 145 32; /* ⬅ #b79120 */
77
- --color-warning-800: 146 116 25; /* ⬅ #927419 */
78
- --color-warning-900: 120 95 21; /* ⬅ #785f15 */
79
- /* error | #b52c55 */
80
- --color-error-50: 244 223 230; /* ⬅ #f4dfe6 */
81
- --color-error-100: 240 213 221; /* ⬅ #f0d5dd */
82
- --color-error-200: 237 202 213; /* ⬅ #edcad5 */
83
- --color-error-300: 225 171 187; /* ⬅ #e1abbb */
84
- --color-error-400: 203 107 136; /* ⬅ #cb6b88 */
85
- --color-error-500: 181 44 85; /* ⬅ #b52c55 */
86
- --color-error-600: 163 40 77; /* ⬅ #a3284d */
87
- --color-error-700: 136 33 64; /* ⬅ #882140 */
88
- --color-error-800: 109 26 51; /* ⬅ #6d1a33 */
89
- --color-error-900: 89 22 42; /* ⬅ #59162a */
90
- /* surface | #64748b */
91
- --color-surface-50: 232 234 238; /* ⬅ #e8eaee */
92
- --color-surface-100: 224 227 232; /* ⬅ #e0e3e8 */
93
- --color-surface-200: 216 220 226; /* ⬅ #d8dce2 */
94
- --color-surface-300: 193 199 209; /* ⬅ #c1c7d1 */
95
- --color-surface-400: 147 158 174; /* ⬅ #939eae */
96
- --color-surface-500: 100 116 139; /* ⬅ #64748b */
97
- --color-surface-600: 90 104 125; /* ⬅ #5a687d */
98
- --color-surface-700: 75 87 104; /* ⬅ #4b5768 */
99
- --color-surface-800: 60 70 83; /* ⬅ #3c4653 */
100
- --color-surface-900: 49 57 68; /* ⬅ #313944 */
101
- }
102
-
103
- [data-theme='rocket'] h1,
104
- [data-theme='rocket'] h2,
105
- [data-theme='rocket'] h3,
106
- [data-theme='rocket'] h4,
107
- [data-theme='rocket'] h5,
108
- [data-theme='rocket'] h6 {
109
- font-weight: bold;
110
- }
111
-
112
- /* Applied to body with `<body data-theme="rocket">` */
113
- /* Created with: https://csshero.org/mesher/ */
114
- /* prettier-ignore */
115
- [data-theme='rocket'] {
116
- background-image:
117
- radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
118
- radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
119
- }
@@ -1,128 +0,0 @@
1
- /* https://fonts.google.com/specimen/Raleway */
2
- @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
- /* https://fonts.google.com/specimen/Lato?query=lato&noto.query=Abril */
4
- @import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
5
-
6
- :root {
7
- /* =~= Theme Styles =~= */
8
- --theme-font-family-base: 'Lato', sans-serif;
9
- --theme-font-family-heading: 'Raleway', sans-serif;
10
- --theme-font-color-base: var(--color-secondary-900);
11
- --theme-font-color-dark: var(--color-primary-100);
12
- --theme-rounded-base: 9999px;
13
- --theme-rounded-container: 24px;
14
- --theme-border-base: 1px;
15
- /* =~= Theme On-X Colors =~= */
16
- --on-primary: 0 0 0;
17
- --on-secondary: 0 0 0;
18
- --on-tertiary: 0 0 0;
19
- --on-success: 0 0 0;
20
- --on-warning: 0 0 0;
21
- --on-error: 0 0 0;
22
- --on-surface: 0 0 0;
23
- /* =~= Theme Colors =~= */
24
- /* primary | #ecaa36 */
25
- --color-primary-50: 252 242 225; /* ⬅ #fcf2e1 */
26
- --color-primary-100: 251 238 215; /* ⬅ #fbeed7 */
27
- --color-primary-200: 250 234 205; /* ⬅ #faeacd */
28
- --color-primary-300: 247 221 175; /* ⬅ #f7ddaf */
29
- --color-primary-400: 242 196 114; /* ⬅ #f2c472 */
30
- --color-primary-500: 236 170 54; /* ⬅ #ecaa36 */
31
- --color-primary-600: 212 153 49; /* ⬅ #d49931 */
32
- --color-primary-700: 177 128 41; /* ⬅ #b18029 */
33
- --color-primary-800: 142 102 32; /* ⬅ #8e6620 */
34
- --color-primary-900: 116 83 26; /* ⬅ #74531a */
35
- /* secondary | #3acbba */
36
- --color-secondary-50: 225 247 245; /* ⬅ #e1f7f5 */
37
- --color-secondary-100: 216 245 241; /* ⬅ #d8f5f1 */
38
- --color-secondary-200: 206 242 238; /* ⬅ #cef2ee */
39
- --color-secondary-300: 176 234 227; /* ⬅ #b0eae3 */
40
- --color-secondary-400: 117 219 207; /* ⬅ #75dbcf */
41
- --color-secondary-500: 58 203 186; /* ⬅ #3acbba */
42
- --color-secondary-600: 52 183 167; /* ⬅ #34b7a7 */
43
- --color-secondary-700: 44 152 140; /* ⬅ #2c988c */
44
- --color-secondary-800: 35 122 112; /* ⬅ #237a70 */
45
- --color-secondary-900: 28 99 91; /* ⬅ #1c635b */
46
- /* tertiary | #bbdf86 */
47
- --color-tertiary-50: 245 250 237; /* ⬅ #f5faed */
48
- --color-tertiary-100: 241 249 231; /* ⬅ #f1f9e7 */
49
- --color-tertiary-200: 238 247 225; /* ⬅ #eef7e1 */
50
- --color-tertiary-300: 228 242 207; /* ⬅ #e4f2cf */
51
- --color-tertiary-400: 207 233 170; /* ⬅ #cfe9aa */
52
- --color-tertiary-500: 187 223 134; /* ⬅ #bbdf86 */
53
- --color-tertiary-600: 168 201 121; /* ⬅ #a8c979 */
54
- --color-tertiary-700: 140 167 101; /* ⬅ #8ca765 */
55
- --color-tertiary-800: 112 134 80; /* ⬅ #708650 */
56
- --color-tertiary-900: 92 109 66; /* ⬅ #5c6d42 */
57
- /* success | #84cc16 */
58
- --color-success-50: 237 247 220; /* ⬅ #edf7dc */
59
- --color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
60
- --color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
61
- --color-success-300: 206 235 162; /* ⬅ #ceeba2 */
62
- --color-success-400: 169 219 92; /* ⬅ #a9db5c */
63
- --color-success-500: 132 204 22; /* ⬅ #84cc16 */
64
- --color-success-600: 119 184 20; /* ⬅ #77b814 */
65
- --color-success-700: 99 153 17; /* ⬅ #639911 */
66
- --color-success-800: 79 122 13; /* ⬅ #4f7a0d */
67
- --color-success-900: 65 100 11; /* ⬅ #41640b */
68
- /* warning | #e5c157 */
69
- --color-warning-50: 251 246 230; /* ⬅ #fbf6e6 */
70
- --color-warning-100: 250 243 221; /* ⬅ #faf3dd */
71
- --color-warning-200: 249 240 213; /* ⬅ #f9f0d5 */
72
- --color-warning-300: 245 230 188; /* ⬅ #f5e6bc */
73
- --color-warning-400: 237 212 137; /* ⬅ #edd489 */
74
- --color-warning-500: 229 193 87; /* ⬅ #e5c157 */
75
- --color-warning-600: 206 174 78; /* ⬅ #ceae4e */
76
- --color-warning-700: 172 145 65; /* ⬅ #ac9141 */
77
- --color-warning-800: 137 116 52; /* ⬅ #897434 */
78
- --color-warning-900: 112 95 43; /* ⬅ #705f2b */
79
- /* error | #db5c9c */
80
- --color-error-50: 250 231 240; /* ⬅ #fae7f0 */
81
- --color-error-100: 248 222 235; /* ⬅ #f8deeb */
82
- --color-error-200: 246 214 230; /* ⬅ #f6d6e6 */
83
- --color-error-300: 241 190 215; /* ⬅ #f1bed7 */
84
- --color-error-400: 230 141 186; /* ⬅ #e68dba */
85
- --color-error-500: 219 92 156; /* ⬅ #db5c9c */
86
- --color-error-600: 197 83 140; /* ⬅ #c5538c */
87
- --color-error-700: 164 69 117; /* ⬅ #a44575 */
88
- --color-error-800: 131 55 94; /* ⬅ #83375e */
89
- --color-error-900: 107 45 76; /* ⬅ #6b2d4c */
90
- /* surface | #da4e65 */
91
- --color-surface-50: 249 228 232; /* ⬅ #f9e4e8 */
92
- --color-surface-100: 248 220 224; /* ⬅ #f8dce0 */
93
- --color-surface-200: 246 211 217; /* ⬅ #f6d3d9 */
94
- --color-surface-300: 240 184 193; /* ⬅ #f0b8c1 */
95
- --color-surface-400: 229 131 147; /* ⬅ #e58393 */
96
- --color-surface-500: 218 78 101; /* ⬅ #da4e65 */
97
- --color-surface-600: 196 70 91; /* ⬅ #c4465b */
98
- --color-surface-700: 164 59 76; /* ⬅ #a43b4c */
99
- --color-surface-800: 131 47 61; /* ⬅ #832f3d */
100
- --color-surface-900: 107 38 49; /* ⬅ #6b2631 */
101
- }
102
-
103
- [data-theme='sahara'] h1,
104
- [data-theme='sahara'] h2,
105
- [data-theme='sahara'] h3,
106
- [data-theme='sahara'] h4,
107
- [data-theme='sahara'] h5,
108
- [data-theme='sahara'] h6 {
109
- font-weight: 600;
110
- }
111
- [data-theme='sahara'] p {
112
- font-weight: 400;
113
- }
114
-
115
- /* Applied to body with `<body data-theme="sahara">` */
116
- /* Created with: https://csshero.org/mesher/ */
117
- [data-theme='sahara'] {
118
- /* prettier-ignore */
119
- background-image:
120
- radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
121
- radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
122
- }
123
- .dark [data-theme='sahara'] {
124
- /* prettier-ignore */
125
- background-image:
126
- radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
127
- radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
128
- }
@@ -1,120 +0,0 @@
1
- /* https://fonts.google.com/specimen/Playfair+Display?query=playfair&noto.query=Abril */
2
- @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
3
-
4
- :root {
5
- /* =~= Theme Styles =~= */
6
- --theme-font-family-base: system-ui;
7
- --theme-font-family-heading: 'Playfair Display', serif;
8
- --theme-font-color-base: var(--color-surface-900);
9
- --theme-font-color-dark: var(--color-secondary-100);
10
- --theme-rounded-base: 16px;
11
- --theme-rounded-container: 16px;
12
- --theme-border-base: 3px;
13
- /* =~= Theme On-X Colors =~= */
14
- --on-primary: 0 0 0;
15
- --on-secondary: 255 255 255;
16
- --on-tertiary: 255 255 255;
17
- --on-success: 0 0 0;
18
- --on-warning: 0 0 0;
19
- --on-error: 255 255 255;
20
- --on-surface: 0 0 0;
21
- /* =~= Theme Colors =~= */
22
- /* primary | #86d0cb */
23
- --color-primary-50: 237 248 247; /* ⬅ #edf8f7 */
24
- --color-primary-100: 231 246 245; /* ⬅ #e7f6f5 */
25
- --color-primary-200: 225 243 242; /* ⬅ #e1f3f2 */
26
- --color-primary-300: 207 236 234; /* ⬅ #cfecea */
27
- --color-primary-400: 170 222 219; /* ⬅ #aadedb */
28
- --color-primary-500: 134 208 203; /* ⬅ #86d0cb */
29
- --color-primary-600: 121 187 183; /* ⬅ #79bbb7 */
30
- --color-primary-700: 101 156 152; /* ⬅ #659c98 */
31
- --color-primary-800: 80 125 122; /* ⬅ #507d7a */
32
- --color-primary-900: 66 102 99; /* ⬅ #426663 */
33
- /* secondary | #213355 */
34
- --color-secondary-50: 222 224 230; /* ⬅ #dee0e6 */
35
- --color-secondary-100: 211 214 221; /* ⬅ #d3d6dd */
36
- --color-secondary-200: 200 204 213; /* ⬅ #c8ccd5 */
37
- --color-secondary-300: 166 173 187; /* ⬅ #a6adbb */
38
- --color-secondary-400: 100 112 136; /* ⬅ #647088 */
39
- --color-secondary-500: 33 51 85; /* ⬅ #213355 */
40
- --color-secondary-600: 30 46 77; /* ⬅ #1e2e4d */
41
- --color-secondary-700: 25 38 64; /* ⬅ #192640 */
42
- --color-secondary-800: 20 31 51; /* ⬅ #141f33 */
43
- --color-secondary-900: 16 25 42; /* ⬅ #10192a */
44
- /* tertiary | #ff3d00 */
45
- --color-tertiary-50: 255 226 217; /* ⬅ #ffe2d9 */
46
- --color-tertiary-100: 255 216 204; /* ⬅ #ffd8cc */
47
- --color-tertiary-200: 255 207 191; /* ⬅ #ffcfbf */
48
- --color-tertiary-300: 255 177 153; /* ⬅ #ffb199 */
49
- --color-tertiary-400: 255 119 77; /* ⬅ #ff774d */
50
- --color-tertiary-500: 255 61 0; /* ⬅ #ff3d00 */
51
- --color-tertiary-600: 230 55 0; /* ⬅ #e63700 */
52
- --color-tertiary-700: 191 46 0; /* ⬅ #bf2e00 */
53
- --color-tertiary-800: 153 37 0; /* ⬅ #992500 */
54
- --color-tertiary-900: 125 30 0; /* ⬅ #7d1e00 */
55
- /* success | #06e5a2 */
56
- --color-success-50: 218 251 241; /* ⬅ #dafbf1 */
57
- --color-success-100: 205 250 236; /* ⬅ #cdfaec */
58
- --color-success-200: 193 249 232; /* ⬅ #c1f9e8 */
59
- --color-success-300: 155 245 218; /* ⬅ #9bf5da */
60
- --color-success-400: 81 237 190; /* ⬅ #51edbe */
61
- --color-success-500: 6 229 162; /* ⬅ #06e5a2 */
62
- --color-success-600: 5 206 146; /* ⬅ #05ce92 */
63
- --color-success-700: 5 172 122; /* ⬅ #05ac7a */
64
- --color-success-800: 4 137 97; /* ⬅ #048961 */
65
- --color-success-900: 3 112 79; /* ⬅ #03704f */
66
- /* warning | #eae557 */
67
- --color-warning-50: 252 251 230; /* ⬅ #fcfbe6 */
68
- --color-warning-100: 251 250 221; /* ⬅ #fbfadd */
69
- --color-warning-200: 250 249 213; /* ⬅ #faf9d5 */
70
- --color-warning-300: 247 245 188; /* ⬅ #f7f5bc */
71
- --color-warning-400: 240 237 137; /* ⬅ #f0ed89 */
72
- --color-warning-500: 234 229 87; /* ⬅ #eae557 */
73
- --color-warning-600: 211 206 78; /* ⬅ #d3ce4e */
74
- --color-warning-700: 176 172 65; /* ⬅ #b0ac41 */
75
- --color-warning-800: 140 137 52; /* ⬅ #8c8934 */
76
- --color-warning-900: 115 112 43; /* ⬅ #73702b */
77
- /* error | #d24646 */
78
- --color-error-50: 248 227 227; /* ⬅ #f8e3e3 */
79
- --color-error-100: 246 218 218; /* ⬅ #f6dada */
80
- --color-error-200: 244 209 209; /* ⬅ #f4d1d1 */
81
- --color-error-300: 237 181 181; /* ⬅ #edb5b5 */
82
- --color-error-400: 224 126 126; /* ⬅ #e07e7e */
83
- --color-error-500: 210 70 70; /* ⬅ #d24646 */
84
- --color-error-600: 189 63 63; /* ⬅ #bd3f3f */
85
- --color-error-700: 158 53 53; /* ⬅ #9e3535 */
86
- --color-error-800: 126 42 42; /* ⬅ #7e2a2a */
87
- --color-error-900: 103 34 34; /* ⬅ #672222 */
88
- /* surface | #25d1d4 */
89
- --color-surface-50: 222 248 249; /* ⬅ #def8f9 */
90
- --color-surface-100: 211 246 246; /* ⬅ #d3f6f6 */
91
- --color-surface-200: 201 244 244; /* ⬅ #c9f4f4 */
92
- --color-surface-300: 168 237 238; /* ⬅ #a8edee */
93
- --color-surface-400: 102 223 225; /* ⬅ #66dfe1 */
94
- --color-surface-500: 37 209 212; /* ⬅ #25d1d4 */
95
- --color-surface-600: 33 188 191; /* ⬅ #21bcbf */
96
- --color-surface-700: 28 157 159; /* ⬅ #1c9d9f */
97
- --color-surface-800: 22 125 127; /* ⬅ #167d7f */
98
- --color-surface-900: 18 102 104; /* ⬅ #126668 */
99
- }
100
-
101
- [data-theme='seafoam'] h1,
102
- [data-theme='seafoam'] h2,
103
- [data-theme='seafoam'] h3,
104
- [data-theme='seafoam'] h4,
105
- [data-theme='seafoam'] h5,
106
- [data-theme='seafoam'] h6 {
107
- font-weight: bold;
108
- font-style: italic;
109
- letter-spacing: 1px;
110
- }
111
-
112
- /* #213253 | #08847c */
113
- /* Applied to body with `<body data-theme="seafoam">` */
114
- /* Created with: https://csshero.org/mesher/ */
115
- [data-theme='seafoam'] {
116
- background: linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%);
117
- }
118
- .dark [data-theme='seafoam'] {
119
- background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
120
- }
@@ -1,115 +0,0 @@
1
- /* A New Years inspired theme. */
2
-
3
- /* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
4
- @import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
5
-
6
- :root {
7
- /* =~= Theme Properties =~= */
8
- --theme-font-family-base: system-ui;
9
- --theme-font-family-heading: 'Quicksand', sans-serif;
10
- --theme-font-color-base: var(--color-surface-500);
11
- --theme-font-color-dark: var(--color-surface-200);
12
- --theme-rounded-base: 12px;
13
- --theme-rounded-container: 12px;
14
- --theme-border-base: 0px;
15
- /* =~= Theme On-X Colors =~= */
16
- --on-primary: 0 0 0;
17
- --on-secondary: 255 255 255;
18
- --on-tertiary: 255 255 255;
19
- --on-success: 0 0 0;
20
- --on-warning: 0 0 0;
21
- --on-error: 255 255 255;
22
- --on-surface: 255 255 255;
23
- /* =~= Theme Colors =~= */
24
- /* primary | #40b09d */
25
- --color-primary-50: 226 243 240; /* ⬅ #e2f3f0 */
26
- --color-primary-100: 217 239 235; /* ⬅ #d9efeb */
27
- --color-primary-200: 207 235 231; /* ⬅ #cfebe7 */
28
- --color-primary-300: 179 223 216; /* ⬅ #b3dfd8 */
29
- --color-primary-400: 121 200 186; /* ⬅ #79c8ba */
30
- --color-primary-500: 64 176 157; /* ⬅ #40b09d */
31
- --color-primary-600: 58 158 141; /* ⬅ #3a9e8d */
32
- --color-primary-700: 48 132 118; /* ⬅ #308476 */
33
- --color-primary-800: 38 106 94; /* ⬅ #266a5e */
34
- --color-primary-900: 31 86 77; /* ⬅ #1f564d */
35
- /* secondary | #d7a12d */
36
- --color-secondary-50: 249 241 224; /* ⬅ #f9f1e0 */
37
- --color-secondary-100: 247 236 213; /* ⬅ #f7ecd5 */
38
- --color-secondary-200: 245 232 203; /* ⬅ #f5e8cb */
39
- --color-secondary-300: 239 217 171; /* ⬅ #efd9ab */
40
- --color-secondary-400: 227 189 108; /* ⬅ #e3bd6c */
41
- --color-secondary-500: 215 161 45; /* ⬅ #d7a12d */
42
- --color-secondary-600: 194 145 41; /* ⬅ #c29129 */
43
- --color-secondary-700: 161 121 34; /* ⬅ #a17922 */
44
- --color-secondary-800: 129 97 27; /* ⬅ #81611b */
45
- --color-secondary-900: 105 79 22; /* ⬅ #694f16 */
46
- /* tertiary | #411d96 */
47
- --color-tertiary-50: 227 221 239; /* ⬅ #e3ddef */
48
- --color-tertiary-100: 217 210 234; /* ⬅ #d9d2ea */
49
- --color-tertiary-200: 208 199 229; /* ⬅ #d0c7e5 */
50
- --color-tertiary-300: 179 165 213; /* ⬅ #b3a5d5 */
51
- --color-tertiary-400: 122 97 182; /* ⬅ #7a61b6 */
52
- --color-tertiary-500: 65 29 150; /* ⬅ #411d96 */
53
- --color-tertiary-600: 59 26 135; /* ⬅ #3b1a87 */
54
- --color-tertiary-700: 49 22 113; /* ⬅ #311671 */
55
- --color-tertiary-800: 39 17 90; /* ⬅ #27115a */
56
- --color-tertiary-900: 32 14 74; /* ⬅ #200e4a */
57
- /* success | #aad765 */
58
- --color-success-50: 242 249 232; /* ⬅ #f2f9e8 */
59
- --color-success-100: 238 247 224; /* ⬅ #eef7e0 */
60
- --color-success-200: 234 245 217; /* ⬅ #eaf5d9 */
61
- --color-success-300: 221 239 193; /* ⬅ #ddefc1 */
62
- --color-success-400: 196 227 147; /* ⬅ #c4e393 */
63
- --color-success-500: 170 215 101; /* ⬅ #aad765 */
64
- --color-success-600: 153 194 91; /* ⬅ #99c25b */
65
- --color-success-700: 128 161 76; /* ⬅ #80a14c */
66
- --color-success-800: 102 129 61; /* ⬅ #66813d */
67
- --color-success-900: 83 105 49; /* ⬅ #536931 */
68
- /* warning | #e1ca84 */
69
- --color-warning-50: 251 247 237; /* ⬅ #fbf7ed */
70
- --color-warning-100: 249 244 230; /* ⬅ #f9f4e6 */
71
- --color-warning-200: 248 242 224; /* ⬅ #f8f2e0 */
72
- --color-warning-300: 243 234 206; /* ⬅ #f3eace */
73
- --color-warning-400: 234 218 169; /* ⬅ #eadaa9 */
74
- --color-warning-500: 225 202 132; /* ⬅ #e1ca84 */
75
- --color-warning-600: 203 182 119; /* ⬅ #cbb677 */
76
- --color-warning-700: 169 152 99; /* ⬅ #a99863 */
77
- --color-warning-800: 135 121 79; /* ⬅ #87794f */
78
- --color-warning-900: 110 99 65; /* ⬅ #6e6341 */
79
- /* error | #e1565d */
80
- --color-error-50: 251 230 231; /* ⬅ #fbe6e7 */
81
- --color-error-100: 249 221 223; /* ⬅ #f9dddf */
82
- --color-error-200: 248 213 215; /* ⬅ #f8d5d7 */
83
- --color-error-300: 243 187 190; /* ⬅ #f3bbbe */
84
- --color-error-400: 234 137 142; /* ⬅ #ea898e */
85
- --color-error-500: 225 86 93; /* ⬅ #e1565d */
86
- --color-error-600: 203 77 84; /* ⬅ #cb4d54 */
87
- --color-error-700: 169 65 70; /* ⬅ #a94146 */
88
- --color-error-800: 135 52 56; /* ⬅ #873438 */
89
- --color-error-900: 110 42 46; /* ⬅ #6e2a2e */
90
- /* surface | #0f233e */
91
- --color-surface-50: 219 222 226; /* ⬅ #dbdee2 */
92
- --color-surface-100: 207 211 216; /* ⬅ #cfd3d8 */
93
- --color-surface-200: 195 200 207; /* ⬅ #c3c8cf */
94
- --color-surface-300: 159 167 178; /* ⬅ #9fa7b2 */
95
- --color-surface-400: 87 101 120; /* ⬅ #576578 */
96
- --color-surface-500: 15 35 62; /* ⬅ #0f233e */
97
- --color-surface-600: 14 32 56; /* ⬅ #0e2038 */
98
- --color-surface-700: 11 26 47; /* ⬅ #0b1a2f */
99
- --color-surface-800: 9 21 37; /* ⬅ #091525 */
100
- --color-surface-900: 7 17 30; /* ⬅ #07111e */
101
- }
102
-
103
- /* Applied to body with `<body data-theme="seasonal">` */
104
- [data-theme='seasonal'] {
105
- /* prettier-ignore */
106
- background-image:
107
- radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%),
108
- radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%);
109
- }
110
- .dark [data-theme='seasonal'] {
111
- /* prettier-ignore */
112
- background-image:
113
- radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%),
114
- radial-gradient(at 80% 0%, hsla(189,100%,56%,0.15) 0px, transparent 50%);
115
- }