@code-coaching/vuetiful 0.26.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.
- package/README.md +47 -55
- package/dist/css/animations.css +2 -0
- package/{src → dist}/css/overrides/quasar.css +73 -58
- package/{src/styles → dist/css}/transitions/slide.css +6 -0
- package/dist/favicon.ico +0 -0
- package/dist/types/components/atoms/VAvatar.vue.d.ts +39 -90
- package/dist/types/components/atoms/VBadge.vue.d.ts +34 -21
- package/dist/types/components/atoms/VButton.vue.d.ts +42 -48
- package/dist/types/components/atoms/VChip.vue.d.ts +33 -21
- package/dist/types/components/atoms/VLightSwitch.vue.d.ts +5 -5
- package/dist/types/components/atoms/VRadio/VRadioDescription.vue.d.ts +7 -12
- package/dist/types/components/atoms/VRadio/VRadioGroup.vue.d.ts +53 -83
- package/dist/types/components/atoms/VRadio/VRadioItem.vue.d.ts +46 -12
- package/dist/types/components/atoms/VRadio/VRadioLabel.vue.d.ts +7 -12
- package/dist/types/components/atoms/VSwitch/VSwitch.vue.d.ts +51 -72
- package/dist/types/components/atoms/VSwitch/VSwitchDescription.vue.d.ts +32 -11
- package/dist/types/components/atoms/VSwitch/VSwitchGroup.vue.d.ts +32 -11
- package/dist/types/components/atoms/VSwitch/VSwitchLabel.vue.d.ts +33 -20
- package/dist/types/components/molecules/VAccordion/VAccordion.vue.d.ts +39 -28
- package/dist/types/components/molecules/VAccordion/VAccordionItem.vue.d.ts +35 -19
- package/dist/types/components/molecules/VAlert.vue.d.ts +50 -73
- package/dist/types/components/molecules/VCard/VCard.vue.d.ts +37 -48
- package/dist/types/components/molecules/VCard/VCardBody.vue.d.ts +33 -12
- package/dist/types/components/molecules/VCard/VCardFooter.vue.d.ts +36 -20
- package/dist/types/components/molecules/VCard/VCardHeader.vue.d.ts +36 -20
- package/dist/types/components/molecules/VCodeBlock.vue.d.ts +15 -16
- package/dist/types/components/molecules/VDrawer.vue.d.ts +13 -7
- package/dist/types/components/molecules/VListbox/VListbox.vue.d.ts +54 -132
- package/dist/types/components/molecules/VListbox/VListboxButton.vue.d.ts +22 -21
- package/dist/types/components/molecules/VListbox/VListboxItem.vue.d.ts +22 -19
- package/dist/types/components/molecules/VListbox/VListboxItems.vue.d.ts +19 -30
- package/dist/types/components/molecules/VListbox/VListboxLabel.vue.d.ts +7 -12
- package/dist/types/components/molecules/VPreview.vue.d.ts +57 -74
- package/dist/types/components/molecules/VRail/VRail.vue.d.ts +28 -13
- package/dist/types/components/molecules/VRail/VRailTile.vue.d.ts +49 -16
- package/dist/types/components/molecules/VShell.vue.d.ts +76 -44
- package/dist/types/components/molecules/VShellConfigurator.vue.d.ts +99 -0
- package/dist/types/components/molecules/VTabs/VTab.vue.d.ts +52 -20
- package/dist/types/components/molecules/VTabs/VTabPanel.vue.d.ts +8 -1
- package/dist/types/components/molecules/VTabs/VTabs.vue.d.ts +43 -101
- package/dist/types/components/molecules/Vuetiful.vue.d.ts +22 -0
- package/dist/types/components/molecules/index.d.ts +3 -4
- package/dist/types/directives/click-outside-group.d.ts +1 -1
- package/dist/types/directives/click-outside.d.ts +1 -1
- package/dist/types/directives/clipboard.d.ts +1 -1
- package/dist/types/index.d.ts +1 -8
- package/dist/types/props/props.d.ts +1 -14
- package/dist/types/services/dark-mode.service.d.ts +1 -1
- package/dist/types/services/drawer.service.d.ts +3 -3
- package/dist/types/services/index.d.ts +2 -2
- package/dist/types/utils/id-generator.d.ts +1 -0
- package/dist/types/utils/index.d.ts +3 -4
- package/dist/types/utils/tailwind-merge.d.ts +1 -0
- package/dist/types/utils/theme/rocket.theme.d.ts +223 -0
- package/dist/types/utils/theme/theme-switcher.vue.d.ts +14 -5
- package/dist/types/utils/theme/theme.service.d.ts +6 -9
- package/dist/types/utils/theme/themes.d.ts +3 -39
- package/dist/types/utils/theme/vuetiful.theme.d.ts +224 -0
- package/dist/vuetiful.es.mjs +54831 -49535
- package/dist/vuetiful.umd.cjs +189 -0
- package/package.json +53 -37
- package/dist/style.css +0 -10
- package/dist/types/components/VBootstrap.vue.d.ts +0 -15
- package/dist/types/components/atoms/VAvatar.test.d.ts +0 -1
- package/dist/types/components/atoms/VBadge.test.d.ts +0 -1
- package/dist/types/components/atoms/VButton.test.d.ts +0 -1
- package/dist/types/components/atoms/VChip.test.d.ts +0 -1
- package/dist/types/components/atoms/VLightSwitch.test.d.ts +0 -1
- package/dist/types/components/atoms/VRadio/VRadioDescription.test.d.ts +0 -1
- package/dist/types/components/atoms/VRadio/VRadioGroup.test.d.ts +0 -1
- package/dist/types/components/atoms/VRadio/VRadioItem.test.d.ts +0 -1
- package/dist/types/components/atoms/VRadio/VRadioLabel.test.d.ts +0 -1
- package/dist/types/components/atoms/VSwitch/VSwitch.test.d.ts +0 -1
- package/dist/types/components/atoms/VSwitch/VSwitchDescription.test.d.ts +0 -1
- package/dist/types/components/atoms/VSwitch/VSwitchGroup.test.d.ts +0 -1
- package/dist/types/components/atoms/VSwitch/VSwitchLabel.test.d.ts +0 -1
- package/dist/types/components/molecules/VAccordion/VAccordion.test.d.ts +0 -1
- package/dist/types/components/molecules/VAccordion/VAccordionItem.test.d.ts +0 -1
- package/dist/types/components/molecules/VAlert.test.d.ts +0 -1
- package/dist/types/components/molecules/VCard/VCard.test.d.ts +0 -1
- package/dist/types/components/molecules/VCard/VCardBody.test.d.ts +0 -1
- package/dist/types/components/molecules/VCard/VCardFooter.test.d.ts +0 -1
- package/dist/types/components/molecules/VCard/VCardHeader.test.d.ts +0 -1
- package/dist/types/components/molecules/VCodeBlock.test.d.ts +0 -1
- package/dist/types/components/molecules/VDrawer.test.d.ts +0 -1
- package/dist/types/components/molecules/VListbox/VListbox.test.d.ts +0 -1
- package/dist/types/components/molecules/VListbox/VListboxButton.test.d.ts +0 -1
- package/dist/types/components/molecules/VListbox/VListboxItem.test.d.ts +0 -1
- package/dist/types/components/molecules/VListbox/VListboxItems.test.d.ts +0 -1
- package/dist/types/components/molecules/VListbox/VListboxLabel.test.d.ts +0 -1
- package/dist/types/components/molecules/VPreview.test.d.ts +0 -1
- package/dist/types/components/molecules/VRail/VRail.test.d.ts +0 -1
- package/dist/types/components/molecules/VRail/VRailTile.test.d.ts +0 -1
- package/dist/types/components/molecules/VShell.test.d.ts +0 -1
- package/dist/types/components/molecules/VTabs/VTab.test.d.ts +0 -1
- package/dist/types/components/molecules/VTabs/VTabPanel.test.d.ts +0 -1
- package/dist/types/components/molecules/VTabs/VTabs.test.d.ts +0 -1
- package/dist/types/directives/click-outside-group.test.d.ts +0 -1
- package/dist/types/directives/click-outside.test.d.ts +0 -1
- package/dist/types/directives/clipboard.test.d.ts +0 -1
- package/dist/types/services/dark-mode.service.test.d.ts +0 -1
- package/dist/types/services/drawer.service.test.d.ts +0 -1
- package/dist/types/services/highlight.service.test.d.ts +0 -1
- package/dist/types/services/rail.service.test.d.ts +0 -1
- package/dist/types/services/settings.service.test.d.ts +0 -1
- package/dist/types/types/index.d.ts +0 -54
- package/dist/types/types/tailwind.d.ts +0 -4
- package/dist/types/utils/colors/colors.service.d.ts +0 -69
- package/dist/types/utils/platform/platform.service.test.d.ts +0 -1
- package/dist/types/utils/theme/callback.test.d.ts +0 -1
- package/dist/types/utils/theme/remove.test.d.ts +0 -1
- package/dist/types/utils/theme/theme.service.test.d.ts +0 -1
- package/dist/vuetiful.umd.js +0 -99
- package/src/assets/fonts/myfont.woff +0 -0
- package/src/assets/main.css +0 -17
- package/src/components/VBootstrap.vue +0 -62
- package/src/components/atoms/VAvatar.test.ts +0 -175
- package/src/components/atoms/VAvatar.vue +0 -89
- package/src/components/atoms/VBadge.test.ts +0 -28
- package/src/components/atoms/VBadge.vue +0 -17
- package/src/components/atoms/VButton.test.ts +0 -180
- package/src/components/atoms/VButton.vue +0 -76
- package/src/components/atoms/VChip.test.ts +0 -33
- package/src/components/atoms/VChip.vue +0 -17
- package/src/components/atoms/VLightSwitch.test.ts +0 -69
- package/src/components/atoms/VLightSwitch.vue +0 -121
- package/src/components/atoms/VRadio/VRadioDescription.test.ts +0 -55
- package/src/components/atoms/VRadio/VRadioDescription.vue +0 -14
- package/src/components/atoms/VRadio/VRadioGroup.test.ts +0 -81
- package/src/components/atoms/VRadio/VRadioGroup.vue +0 -88
- package/src/components/atoms/VRadio/VRadioItem.test.ts +0 -183
- package/src/components/atoms/VRadio/VRadioItem.vue +0 -36
- package/src/components/atoms/VRadio/VRadioLabel.test.ts +0 -55
- package/src/components/atoms/VRadio/VRadioLabel.vue +0 -16
- package/src/components/atoms/VSwitch/VSwitch.test.ts +0 -100
- package/src/components/atoms/VSwitch/VSwitch.vue +0 -106
- package/src/components/atoms/VSwitch/VSwitchDescription.test.ts +0 -55
- package/src/components/atoms/VSwitch/VSwitchDescription.vue +0 -16
- package/src/components/atoms/VSwitch/VSwitchGroup.test.ts +0 -26
- package/src/components/atoms/VSwitch/VSwitchGroup.vue +0 -16
- package/src/components/atoms/VSwitch/VSwitchLabel.test.ts +0 -89
- package/src/components/atoms/VSwitch/VSwitchLabel.vue +0 -20
- package/src/components/atoms/index.ts +0 -31
- package/src/components/index.ts +0 -2
- package/src/components/molecules/VAccordion/VAccordion.test.ts +0 -27
- package/src/components/molecules/VAccordion/VAccordion.vue +0 -32
- package/src/components/molecules/VAccordion/VAccordionItem.test.ts +0 -134
- package/src/components/molecules/VAccordion/VAccordionItem.vue +0 -68
- package/src/components/molecules/VAlert.test.ts +0 -100
- package/src/components/molecules/VAlert.vue +0 -137
- package/src/components/molecules/VCard/VCard.test.ts +0 -47
- package/src/components/molecules/VCard/VCard.vue +0 -74
- package/src/components/molecules/VCard/VCardBody.test.ts +0 -39
- package/src/components/molecules/VCard/VCardBody.vue +0 -16
- package/src/components/molecules/VCard/VCardFooter.test.ts +0 -63
- package/src/components/molecules/VCard/VCardFooter.vue +0 -31
- package/src/components/molecules/VCard/VCardHeader.test.ts +0 -86
- package/src/components/molecules/VCard/VCardHeader.vue +0 -53
- package/src/components/molecules/VCodeBlock.test.ts +0 -133
- package/src/components/molecules/VCodeBlock.vue +0 -113
- package/src/components/molecules/VDrawer.test.ts +0 -14
- package/src/components/molecules/VDrawer.vue +0 -87
- package/src/components/molecules/VListbox/VListbox.test.ts +0 -146
- package/src/components/molecules/VListbox/VListbox.vue +0 -149
- package/src/components/molecules/VListbox/VListboxButton.test.ts +0 -66
- package/src/components/molecules/VListbox/VListboxButton.vue +0 -57
- package/src/components/molecules/VListbox/VListboxItem.test.ts +0 -51
- package/src/components/molecules/VListbox/VListboxItem.vue +0 -39
- package/src/components/molecules/VListbox/VListboxItems.test.ts +0 -44
- package/src/components/molecules/VListbox/VListboxItems.vue +0 -42
- package/src/components/molecules/VListbox/VListboxLabel.test.ts +0 -30
- package/src/components/molecules/VListbox/VListboxLabel.vue +0 -14
- package/src/components/molecules/VPreview.test.ts +0 -73
- package/src/components/molecules/VPreview.vue +0 -230
- package/src/components/molecules/VRail/VRail.test.ts +0 -14
- package/src/components/molecules/VRail/VRail.vue +0 -33
- package/src/components/molecules/VRail/VRailTile.test.ts +0 -97
- package/src/components/molecules/VRail/VRailTile.vue +0 -49
- package/src/components/molecules/VShell.test.ts +0 -14
- package/src/components/molecules/VShell.vue +0 -63
- package/src/components/molecules/VTabs/VTab.test.ts +0 -143
- package/src/components/molecules/VTabs/VTab.vue +0 -50
- package/src/components/molecules/VTabs/VTabPanel.test.ts +0 -24
- package/src/components/molecules/VTabs/VTabPanel.vue +0 -9
- package/src/components/molecules/VTabs/VTabs.test.ts +0 -92
- package/src/components/molecules/VTabs/VTabs.vue +0 -104
- package/src/components/molecules/index.ts +0 -51
- package/src/directives/click-outside-group.test.ts +0 -44
- package/src/directives/click-outside-group.ts +0 -39
- package/src/directives/click-outside.test.ts +0 -38
- package/src/directives/click-outside.ts +0 -28
- package/src/directives/clipboard.test.ts +0 -26
- package/src/directives/clipboard.ts +0 -9
- package/src/directives/index.ts +0 -5
- package/src/env.d.ts +0 -8
- package/src/index.ts +0 -21
- package/src/props/index.ts +0 -1
- package/src/props/props.ts +0 -62
- package/src/services/dark-mode.service.test.ts +0 -104
- package/src/services/dark-mode.service.ts +0 -75
- package/src/services/drawer.service.test.ts +0 -45
- package/src/services/drawer.service.ts +0 -46
- package/src/services/highlight.service.test.ts +0 -24
- package/src/services/highlight.service.ts +0 -19
- package/src/services/index.ts +0 -8
- package/src/services/rail.service.test.ts +0 -13
- package/src/services/rail.service.ts +0 -11
- package/src/services/settings.service.test.ts +0 -17
- package/src/services/settings.service.ts +0 -136
- package/src/styles/all.css +0 -24
- package/src/styles/core.css +0 -66
- package/src/styles/elements/alerts.css +0 -17
- package/src/styles/elements/badges.css +0 -31
- package/src/styles/elements/breadcrumbs.css +0 -26
- package/src/styles/elements/buttons.css +0 -103
- package/src/styles/elements/cards.css +0 -32
- package/src/styles/elements/chips.css +0 -22
- package/src/styles/elements/forms.css +0 -269
- package/src/styles/elements/lists.css +0 -48
- package/src/styles/elements/logo-clouds.css +0 -29
- package/src/styles/elements/modals.css +0 -15
- package/src/styles/elements/placeholders.css +0 -17
- package/src/styles/elements/popups.css +0 -16
- package/src/styles/elements/tables.css +0 -102
- package/src/styles/elements.css +0 -19
- package/src/styles/highlight-js.css +0 -116
- package/src/styles/tailwind.css +0 -16
- package/src/styles/transitions.css +0 -2
- package/src/styles/typography.css +0 -101
- package/src/styles/variants.css +0 -156
- package/src/tailwind/core.cjs +0 -37
- package/src/tailwind/generated/intellisense-classes.cjs +0 -558
- package/src/tailwind/intellisense.cjs +0 -21
- package/src/tailwind/settings.cjs +0 -20
- package/src/tailwind/theme/colors.cjs +0 -20
- package/src/tailwind/tokens/backgrounds.cjs +0 -48
- package/src/tailwind/tokens/border-radius.cjs +0 -21
- package/src/tailwind/tokens/borders.cjs +0 -24
- package/src/tailwind/tokens/fills.cjs +0 -20
- package/src/tailwind/tokens/rings.cjs +0 -50
- package/src/tailwind/tokens/text.cjs +0 -35
- package/src/tailwind/vuetiful.cjs +0 -19
- package/src/themes/theme-rocket.css +0 -119
- package/src/themes/theme-sahara.css +0 -128
- package/src/themes/theme-seafoam.css +0 -120
- package/src/themes/theme-seasonal.css +0 -115
- package/src/themes/theme-skeleton.css +0 -115
- package/src/themes/theme-vintage.css +0 -125
- package/src/themes/theme-vuetiful.css +0 -136
- package/src/types/index.ts +0 -59
- package/src/types/tailwind.ts +0 -7
- package/src/utils/colors/colors.service.ts +0 -293
- package/src/utils/index.ts +0 -8
- package/src/utils/platform/platform.service.test.ts +0 -19
- package/src/utils/platform/platform.service.ts +0 -8
- package/src/utils/theme/callback.test.ts +0 -28
- package/src/utils/theme/remove.test.ts +0 -27
- package/src/utils/theme/theme-switcher.vue +0 -78
- package/src/utils/theme/theme.service.test.ts +0 -269
- package/src/utils/theme/theme.service.ts +0 -173
- package/src/utils/theme/themes.ts +0 -282
- /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¬o.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¬o.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
|
-
}
|