@bexis2/bexis2-core-ui 0.0.17 → 0.0.19

package/src/lib/css/themes/theme-gold-nouveau.css

@@ -0,0 +1,140 @@
+/* =~= Gold Nouveau - made by GitHub user @Sarenor for the Skeleton community theme contest.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+/* =~= Gold Nouveau =~= */
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui, sans-serif;
+	--theme-font-family-heading: 'Quicksand', sans-serif;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-surface-50);
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 255 255 255;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #744aa1 */
+	--color-primary-50: 250 248 252; /* ⬅ #faf8fc */
+	--color-primary-100: 242 238 247; /* ⬅ #f2eef7 */
+	--color-primary-200: 229 220 239; /* ⬅ #e5dcef */
+	--color-primary-300: 209 192 226; /* ⬅ #d1c0e2 */
+	--color-primary-400: 162 129 197; /* ⬅ #a281c5 */
+	--color-primary-500: 116 74 161; /* ⬅ #744aa1 */
+	--color-primary-600: 83 53 115; /* ⬅ #533573 */
+	--color-primary-700: 60 39 84; /* ⬅ #3c2754 */
+	--color-primary-800: 35 22 49; /* ⬅ #231631 */
+	--color-primary-900: 18 11 24; /* ⬅ #120b18 */
+	/* secondary | #0672e5 */
+	--color-secondary-50: 218 234 251; /* ⬅ #daeafb */
+	--color-secondary-100: 205 227 250; /* ⬅ #cde3fa */
+	--color-secondary-200: 193 220 249; /* ⬅ #c1dcf9 */
+	--color-secondary-300: 155 199 245; /* ⬅ #9bc7f5 */
+	--color-secondary-400: 81 156 237; /* ⬅ #519ced */
+	--color-secondary-500: 6 114 229; /* ⬅ #0672e5 */
+	--color-secondary-600: 5 103 206; /* ⬅ #0567ce */
+	--color-secondary-700: 5 86 172; /* ⬅ #0556ac */
+	--color-secondary-800: 4 68 137; /* ⬅ #044489 */
+	--color-secondary-900: 3 56 112; /* ⬅ #033870 */
+	/* tertiary | #7f78dd */
+	--color-tertiary-50: 236 235 250; /* ⬅ #ecebfa */
+	--color-tertiary-100: 229 228 248; /* ⬅ #e5e4f8 */
+	--color-tertiary-200: 223 221 247; /* ⬅ #dfddf7 */
+	--color-tertiary-300: 204 201 241; /* ⬅ #ccc9f1 */
+	--color-tertiary-400: 165 161 231; /* ⬅ #a5a1e7 */
+	--color-tertiary-500: 127 120 221; /* ⬅ #7f78dd */
+	--color-tertiary-600: 114 108 199; /* ⬅ #726cc7 */
+	--color-tertiary-700: 95 90 166; /* ⬅ #5f5aa6 */
+	--color-tertiary-800: 76 72 133; /* ⬅ #4c4885 */
+	--color-tertiary-900: 62 59 108; /* ⬅ #3e3b6c */
+	/* success | #72c585 */
+	--color-success-50: 234 246 237; /* ⬅ #eaf6ed */
+	--color-success-100: 227 243 231; /* ⬅ #e3f3e7 */
+	--color-success-200: 220 241 225; /* ⬅ #dcf1e1 */
+	--color-success-300: 199 232 206; /* ⬅ #c7e8ce */
+	--color-success-400: 156 214 170; /* ⬅ #9cd6aa */
+	--color-success-500: 114 197 133; /* ⬅ #72c585 */
+	--color-success-600: 103 177 120; /* ⬅ #67b178 */
+	--color-success-700: 86 148 100; /* ⬅ #569464 */
+	--color-success-800: 68 118 80; /* ⬅ #447650 */
+	--color-success-900: 56 97 65; /* ⬅ #386141 */
+	/* warning | #e77f08 */
+	--color-warning-50: 251 236 218; /* ⬅ #fbecda */
+	--color-warning-100: 250 229 206; /* ⬅ #fae5ce */
+	--color-warning-200: 249 223 193; /* ⬅ #f9dfc1 */
+	--color-warning-300: 245 204 156; /* ⬅ #f5cc9c */
+	--color-warning-400: 238 165 82; /* ⬅ #eea552 */
+	--color-warning-500: 231 127 8; /* ⬅ #e77f08 */
+	--color-warning-600: 208 114 7; /* ⬅ #d07207 */
+	--color-warning-700: 173 95 6; /* ⬅ #ad5f06 */
+	--color-warning-800: 139 76 5; /* ⬅ #8b4c05 */
+	--color-warning-900: 113 62 4; /* ⬅ #713e04 */
+	/* error | #8f0f22 */
+	--color-error-50: 238 219 222; /* ⬅ #eedbde */
+	--color-error-100: 233 207 211; /* ⬅ #e9cfd3 */
+	--color-error-200: 227 195 200; /* ⬅ #e3c3c8 */
+	--color-error-300: 210 159 167; /* ⬅ #d29fa7 */
+	--color-error-400: 177 87 100; /* ⬅ #b15764 */
+	--color-error-500: 143 15 34; /* ⬅ #8f0f22 */
+	--color-error-600: 129 14 31; /* ⬅ #810e1f */
+	--color-error-700: 107 11 26; /* ⬅ #6b0b1a */
+	--color-error-800: 86 9 20; /* ⬅ #560914 */
+	--color-error-900: 70 7 17; /* ⬅ #460711 */
+	/* surface | #744aa1 */
+	--color-surface-50: 250 248 252; /* ⬅ #faf8fc */
+	--color-surface-100: 242 238 247; /* ⬅ #f2eef7 */
+	--color-surface-200: 229 220 239; /* ⬅ #e5dcef */
+	--color-surface-300: 209 192 226; /* ⬅ #d1c0e2 */
+	--color-surface-400: 162 129 197; /* ⬅ #a281c5 */
+	--color-surface-500: 116 74 161; /* ⬅ #744aa1 */
+	--color-surface-600: 83 53 115; /* ⬅ #533573 */
+	--color-surface-700: 60 39 84; /* ⬅ #3c2754 */
+	--color-surface-800: 35 22 49; /* ⬅ #231631 */
+	--color-surface-900: 18 11 24; /* ⬅ #120b18 */
+}
+
+/* =~= Gold Nouveau (dark mode overrides) =~= */
+.dark [data-theme='gold-nouveau'] {
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #e6c833 */
+	--color-primary-50: 251 247 224; /* ⬅ #fbf7e0 */
+	--color-primary-100: 250 244 214; /* ⬅ #faf4d6 */
+	--color-primary-200: 249 241 204; /* ⬅ #f9f1cc */
+	--color-primary-300: 245 233 173; /* ⬅ #f5e9ad */
+	--color-primary-400: 238 217 112; /* ⬅ #eed970 */
+	--color-primary-500: 230 200 51; /* ⬅ #e6c833 */
+	--color-primary-600: 207 180 46; /* ⬅ #cfb42e */
+	--color-primary-700: 173 150 38; /* ⬅ #ad9626 */
+	--color-primary-800: 138 120 31; /* ⬅ #8a781f */
+	--color-primary-900: 113 98 25; /* ⬅ #716219 */
+}
+
+/* Headings */
+[data-theme='gold-nouveau'] h1,
+[data-theme='gold-nouveau'] h2,
+[data-theme='gold-nouveau'] h3,
+[data-theme='gold-nouveau'] h4,
+[data-theme='gold-nouveau'] h5,
+[data-theme='gold-nouveau'] h6 {
+	font-weight: bold;
+}
+
+/* Applied to body with `<body data-theme="gold-nouveau">` */
+/* Created with: https://csshero.org/mesher/ */
+/* prettier-ignore */
+[data-theme='gold-nouveau'] {
+	background-image:
+		radial-gradient(at 0% 100%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
+		radial-gradient(at 98% 100%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+}

package/src/lib/css/themes/theme-hamlindigo.css

@@ -0,0 +1,111 @@
+/* =~= Hamlindigo Theme - made by GitHub user @rcgy for the Skeleton community. Go watch Better Call Saul.  =~= */
+/* https://github.com/skeletonlabs/skeleton/discussions/401 */
+
+@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&display=swap');
+
+:root {
+	/* =~= Hamlindigo Theme | Custom =~= */
+	--theme-font-family-base: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
+		'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+	--theme-font-family-heading: 'Playfair Display', serif;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 2px;
+	--theme-rounded-container: 2px;
+	--theme-border-base: 2px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 255 255 255;
+	--on-success: 255 255 255;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #a8bef1 */
+	--color-primary-50: 242 245 253; /* ⬅ #f2f5fd */
+	--color-primary-100: 238 242 252; /* ⬅ #eef2fc */
+	--color-primary-200: 233 239 252; /* ⬅ #e9effc */
+	--color-primary-300: 220 229 249; /* ⬅ #dce5f9 */
+	--color-primary-400: 194 210 245; /* ⬅ #c2d2f5 */
+	--color-primary-500: 168 190 241; /* ⬅ #a8bef1 */
+	--color-primary-600: 151 171 217; /* ⬅ #97abd9 */
+	--color-primary-700: 126 143 181; /* ⬅ #7e8fb5 */
+	--color-primary-800: 101 114 145; /* ⬅ #657291 */
+	--color-primary-900: 82 93 118; /* ⬅ #525d76 */
+	/* secondary | #a48e5b */
+	--color-secondary-50: 241 238 230; /* ⬅ #f1eee6 */
+	--color-secondary-100: 237 232 222; /* ⬅ #ede8de */
+	--color-secondary-200: 232 227 214; /* ⬅ #e8e3d6 */
+	--color-secondary-300: 219 210 189; /* ⬅ #dbd2bd */
+	--color-secondary-400: 191 176 140; /* ⬅ #bfb08c */
+	--color-secondary-500: 164 142 91; /* ⬅ #a48e5b */
+	--color-secondary-600: 148 128 82; /* ⬅ #948052 */
+	--color-secondary-700: 123 107 68; /* ⬅ #7b6b44 */
+	--color-secondary-800: 98 85 55; /* ⬅ #625537 */
+	--color-secondary-900: 80 70 45; /* ⬅ #50462d */
+	/* tertiary | #6197a3 */
+	--color-tertiary-50: 231 239 241; /* ⬅ #e7eff1 */
+	--color-tertiary-100: 223 234 237; /* ⬅ #dfeaed */
+	--color-tertiary-200: 216 229 232; /* ⬅ #d8e5e8 */
+	--color-tertiary-300: 192 213 218; /* ⬅ #c0d5da */
+	--color-tertiary-400: 144 182 191; /* ⬅ #90b6bf */
+	--color-tertiary-500: 97 151 163; /* ⬅ #6197a3 */
+	--color-tertiary-600: 87 136 147; /* ⬅ #578893 */
+	--color-tertiary-700: 73 113 122; /* ⬅ #49717a */
+	--color-tertiary-800: 58 91 98; /* ⬅ #3a5b62 */
+	--color-tertiary-900: 48 74 80; /* ⬅ #304a50 */
+	/* success | #47947d */
+	--color-success-50: 227 239 236; /* ⬅ #e3efec */
+	--color-success-100: 218 234 229; /* ⬅ #daeae5 */
+	--color-success-200: 209 228 223; /* ⬅ #d1e4df */
+	--color-success-300: 181 212 203; /* ⬅ #b5d4cb */
+	--color-success-400: 126 180 164; /* ⬅ #7eb4a4 */
+	--color-success-500: 71 148 125; /* ⬅ #47947d */
+	--color-success-600: 64 133 113; /* ⬅ #408571 */
+	--color-success-700: 53 111 94; /* ⬅ #356f5e */
+	--color-success-800: 43 89 75; /* ⬅ #2b594b */
+	--color-success-900: 35 73 61; /* ⬅ #23493d */
+	/* warning | #daa93e */
+	--color-warning-50: 249 242 226; /* ⬅ #f9f2e2 */
+	--color-warning-100: 248 238 216; /* ⬅ #f8eed8 */
+	--color-warning-200: 246 234 207; /* ⬅ #f6eacf */
+	--color-warning-300: 240 221 178; /* ⬅ #f0ddb2 */
+	--color-warning-400: 229 195 120; /* ⬅ #e5c378 */
+	--color-warning-500: 218 169 62; /* ⬅ #daa93e */
+	--color-warning-600: 196 152 56; /* ⬅ #c49838 */
+	--color-warning-700: 164 127 47; /* ⬅ #a47f2f */
+	--color-warning-800: 131 101 37; /* ⬅ #836525 */
+	--color-warning-900: 107 83 30; /* ⬅ #6b531e */
+	/* error | #a26175 */
+	--color-error-50: 241 231 234; /* ⬅ #f1e7ea */
+	--color-error-100: 236 223 227; /* ⬅ #ecdfe3 */
+	--color-error-200: 232 216 221; /* ⬅ #e8d8dd */
+	--color-error-300: 218 192 200; /* ⬅ #dac0c8 */
+	--color-error-400: 190 144 158; /* ⬅ #be909e */
+	--color-error-500: 162 97 117; /* ⬅ #a26175 */
+	--color-error-600: 146 87 105; /* ⬅ #925769 */
+	--color-error-700: 122 73 88; /* ⬅ #7a4958 */
+	--color-error-800: 97 58 70; /* ⬅ #613a46 */
+	--color-error-900: 79 48 57; /* ⬅ #4f3039 */
+	/* surface | #6376a3 */
+	--color-surface-50: 232 234 241; /* ⬅ #e8eaf1 */
+	--color-surface-100: 224 228 237; /* ⬅ #e0e4ed */
+	--color-surface-200: 216 221 232; /* ⬅ #d8dde8 */
+	--color-surface-300: 193 200 218; /* ⬅ #c1c8da */
+	--color-surface-400: 146 159 191; /* ⬅ #929fbf */
+	--color-surface-500: 99 118 163; /* ⬅ #6376a3 */
+	--color-surface-600: 89 106 147; /* ⬅ #596a93 */
+	--color-surface-700: 74 89 122; /* ⬅ #4a597a */
+	--color-surface-800: 59 71 98; /* ⬅ #3b4762 */
+	--color-surface-900: 49 58 80; /* ⬅ #313a50 */
+}
+
+/* Applied to body with `<body data-theme="hamlindigo">` */
+/* Generated via: https://heropatterns.com/ */
+[data-theme='hamlindigo'] {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23e0e4ed' fill-opacity='0.5'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}
+.dark [data-theme='hamlindigo'] {
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%233b4762' fill-opacity='0.2'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E");
+}

package/src/lib/css/themes/theme-modern.css

@@ -0,0 +1,127 @@
+/* https://fonts.google.com/specimen/Quicksand?query=Quicksand */
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: 'Quicksand', sans-serif;
+	--theme-font-family-heading: 'Quicksand', sans-serif;
+	--theme-font-color-base: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-tertiary-50);
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 24px;
+	--theme-border-base: 3px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #ec4899 */
+	--color-primary-50: 252 228 240; /* ⬅ #fce4f0 */
+	--color-primary-100: 251 218 235; /* ⬅ #fbdaeb */
+	--color-primary-200: 250 209 230; /* ⬅ #fad1e6 */
+	--color-primary-300: 247 182 214; /* ⬅ #f7b6d6 */
+	--color-primary-400: 242 127 184; /* ⬅ #f27fb8 */
+	--color-primary-500: 236 72 153; /* ⬅ #ec4899 */
+	--color-primary-600: 212 65 138; /* ⬅ #d4418a */
+	--color-primary-700: 177 54 115; /* ⬅ #b13673 */
+	--color-primary-800: 142 43 92; /* ⬅ #8e2b5c */
+	--color-primary-900: 116 35 75; /* ⬅ #74234b */
+	/* secondary | #06b6d4 */
+	--color-secondary-50: 218 244 249; /* ⬅ #daf4f9 */
+	--color-secondary-100: 205 240 246; /* ⬅ #cdf0f6 */
+	--color-secondary-200: 193 237 244; /* ⬅ #c1edf4 */
+	--color-secondary-300: 155 226 238; /* ⬅ #9be2ee */
+	--color-secondary-400: 81 204 225; /* ⬅ #51cce1 */
+	--color-secondary-500: 6 182 212; /* ⬅ #06b6d4 */
+	--color-secondary-600: 5 164 191; /* ⬅ #05a4bf */
+	--color-secondary-700: 5 137 159; /* ⬅ #05899f */
+	--color-secondary-800: 4 109 127; /* ⬅ #046d7f */
+	--color-secondary-900: 3 89 104; /* ⬅ #035968 */
+	/* tertiary | #14b8a6 */
+	--color-tertiary-50: 220 244 242; /* ⬅ #dcf4f2 */
+	--color-tertiary-100: 208 241 237; /* ⬅ #d0f1ed */
+	--color-tertiary-200: 196 237 233; /* ⬅ #c4ede9 */
+	--color-tertiary-300: 161 227 219; /* ⬅ #a1e3db */
+	--color-tertiary-400: 91 205 193; /* ⬅ #5bcdc1 */
+	--color-tertiary-500: 20 184 166; /* ⬅ #14b8a6 */
+	--color-tertiary-600: 18 166 149; /* ⬅ #12a695 */
+	--color-tertiary-700: 15 138 125; /* ⬅ #0f8a7d */
+	--color-tertiary-800: 12 110 100; /* ⬅ #0c6e64 */
+	--color-tertiary-900: 10 90 81; /* ⬅ #0a5a51 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #eab308 */
+	--color-warning-50: 252 244 218; /* ⬅ #fcf4da */
+	--color-warning-100: 251 240 206; /* ⬅ #fbf0ce */
+	--color-warning-200: 250 236 193; /* ⬅ #faecc1 */
+	--color-warning-300: 247 225 156; /* ⬅ #f7e19c */
+	--color-warning-400: 240 202 82; /* ⬅ #f0ca52 */
+	--color-warning-500: 234 179 8; /* ⬅ #eab308 */
+	--color-warning-600: 211 161 7; /* ⬅ #d3a107 */
+	--color-warning-700: 176 134 6; /* ⬅ #b08606 */
+	--color-warning-800: 140 107 5; /* ⬅ #8c6b05 */
+	--color-warning-900: 115 88 4; /* ⬅ #735804 */
+	/* error | #ef4444 */
+	--color-error-50: 253 227 227; /* ⬅ #fde3e3 */
+	--color-error-100: 252 218 218; /* ⬅ #fcdada */
+	--color-error-200: 251 208 208; /* ⬅ #fbd0d0 */
+	--color-error-300: 249 180 180; /* ⬅ #f9b4b4 */
+	--color-error-400: 244 124 124; /* ⬅ #f47c7c */
+	--color-error-500: 239 68 68; /* ⬅ #ef4444 */
+	--color-error-600: 215 61 61; /* ⬅ #d73d3d */
+	--color-error-700: 179 51 51; /* ⬅ #b33333 */
+	--color-error-800: 143 41 41; /* ⬅ #8f2929 */
+	--color-error-900: 117 33 33; /* ⬅ #752121 */
+	/* surface | #6366f1 */
+	--color-surface-50: 232 232 253; /* ⬅ #e8e8fd */
+	--color-surface-100: 224 224 252; /* ⬅ #e0e0fc */
+	--color-surface-200: 216 217 252; /* ⬅ #d8d9fc */
+	--color-surface-300: 193 194 249; /* ⬅ #c1c2f9 */
+	--color-surface-400: 146 148 245; /* ⬅ #9294f5 */
+	--color-surface-500: 99 102 241; /* ⬅ #6366f1 */
+	--color-surface-600: 89 92 217; /* ⬅ #595cd9 */
+	--color-surface-700: 74 77 181; /* ⬅ #4a4db5 */
+	--color-surface-800: 59 61 145; /* ⬅ #3b3d91 */
+	--color-surface-900: 49 50 118; /* ⬅ #313276 */
+}
+
+[data-theme='modern'] h1,
+[data-theme='modern'] h2,
+[data-theme='modern'] h3,
+[data-theme='modern'] h4,
+[data-theme='modern'] h5,
+[data-theme='modern'] h6,
+[data-theme='modern'] a,
+[data-theme='modern'] button {
+	font-weight: bold;
+}
+
+/* Applied to body with `<body data-theme="modern">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='modern'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.36) 0px, transparent 50%),
+		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.26) 0px, transparent 50%),
+		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.47) 0px, transparent 50%);
+}
+.dark [data-theme='modern'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 76% 0%, hsla(189,100%,56%,0.20) 0px, transparent 50%),
+		radial-gradient(at 1% 0%, hsla(340,100%,76%,0.15) 0px, transparent 50%),
+		radial-gradient(at 20% 100%, hsla(241,100%,70%,0.30) 0px, transparent 50%);
+}

package/src/lib/css/themes/theme-rocket.css

@@ -0,0 +1,119 @@
+/* https://fonts.google.com/specimen/Space+Grotesk */
+@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+/* https://fonts.google.com/specimen/Roboto?query=roboto */
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
+
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: 'Roboto', sans-serif;
+	--theme-font-family-heading: 'Space Grotesk', sans-serif;
+	--theme-font-color-base: var(--color-primary-900);
+	--theme-font-color-dark: var(--color-primary-100);
+	--theme-rounded-base: 0px;
+	--theme-rounded-container: 0px;
+	--theme-border-base: 0px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 255 255 255;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #06b6d4 */
+	--color-primary-50: 218 244 249; /* ⬅ #daf4f9 */
+	--color-primary-100: 205 240 246; /* ⬅ #cdf0f6 */
+	--color-primary-200: 193 237 244; /* ⬅ #c1edf4 */
+	--color-primary-300: 155 226 238; /* ⬅ #9be2ee */
+	--color-primary-400: 81 204 225; /* ⬅ #51cce1 */
+	--color-primary-500: 6 182 212; /* ⬅ #06b6d4 */
+	--color-primary-600: 5 164 191; /* ⬅ #05a4bf */
+	--color-primary-700: 5 137 159; /* ⬅ #05899f */
+	--color-primary-800: 4 109 127; /* ⬅ #046d7f */
+	--color-primary-900: 3 89 104; /* ⬅ #035968 */
+	/* secondary | #3b82f6 */
+	--color-secondary-50: 226 236 254; /* ⬅ #e2ecfe */
+	--color-secondary-100: 216 230 253; /* ⬅ #d8e6fd */
+	--color-secondary-200: 206 224 253; /* ⬅ #cee0fd */
+	--color-secondary-300: 177 205 251; /* ⬅ #b1cdfb */
+	--color-secondary-400: 118 168 249; /* ⬅ #76a8f9 */
+	--color-secondary-500: 59 130 246; /* ⬅ #3b82f6 */
+	--color-secondary-600: 53 117 221; /* ⬅ #3575dd */
+	--color-secondary-700: 44 98 185; /* ⬅ #2c62b9 */
+	--color-secondary-800: 35 78 148; /* ⬅ #234e94 */
+	--color-secondary-900: 29 64 121; /* ⬅ #1d4079 */
+	/* tertiary | #a855f7 */
+	--color-tertiary-50: 242 230 254; /* ⬅ #f2e6fe */
+	--color-tertiary-100: 238 221 253; /* ⬅ #eeddfd */
+	--color-tertiary-200: 233 213 253; /* ⬅ #e9d5fd */
+	--color-tertiary-300: 220 187 252; /* ⬅ #dcbbfc */
+	--color-tertiary-400: 194 136 249; /* ⬅ #c288f9 */
+	--color-tertiary-500: 168 85 247; /* ⬅ #a855f7 */
+	--color-tertiary-600: 151 77 222; /* ⬅ #974dde */
+	--color-tertiary-700: 126 64 185; /* ⬅ #7e40b9 */
+	--color-tertiary-800: 101 51 148; /* ⬅ #653394 */
+	--color-tertiary-900: 82 42 121; /* ⬅ #522a79 */
+	/* success | #4ccb15 */
+	--color-success-50: 228 247 220; /* ⬅ #e4f7dc */
+	--color-success-100: 219 245 208; /* ⬅ #dbf5d0 */
+	--color-success-200: 210 242 197; /* ⬅ #d2f2c5 */
+	--color-success-300: 183 234 161; /* ⬅ #b7eaa1 */
+	--color-success-400: 130 219 91; /* ⬅ #82db5b */
+	--color-success-500: 76 203 21; /* ⬅ #4ccb15 */
+	--color-success-600: 68 183 19; /* ⬅ #44b713 */
+	--color-success-700: 57 152 16; /* ⬅ #399810 */
+	--color-success-800: 46 122 13; /* ⬅ #2e7a0d */
+	--color-success-900: 37 99 10; /* ⬅ #25630a */
+	/* warning | #f4c12a */
+	--color-warning-50: 253 246 223; /* ⬅ #fdf6df */
+	--color-warning-100: 253 243 212; /* ⬅ #fdf3d4 */
+	--color-warning-200: 252 240 202; /* ⬅ #fcf0ca */
+	--color-warning-300: 251 230 170; /* ⬅ #fbe6aa */
+	--color-warning-400: 247 212 106; /* ⬅ #f7d46a */
+	--color-warning-500: 244 193 42; /* ⬅ #f4c12a */
+	--color-warning-600: 220 174 38; /* ⬅ #dcae26 */
+	--color-warning-700: 183 145 32; /* ⬅ #b79120 */
+	--color-warning-800: 146 116 25; /* ⬅ #927419 */
+	--color-warning-900: 120 95 21; /* ⬅ #785f15 */
+	/* error | #b52c55 */
+	--color-error-50: 244 223 230; /* ⬅ #f4dfe6 */
+	--color-error-100: 240 213 221; /* ⬅ #f0d5dd */
+	--color-error-200: 237 202 213; /* ⬅ #edcad5 */
+	--color-error-300: 225 171 187; /* ⬅ #e1abbb */
+	--color-error-400: 203 107 136; /* ⬅ #cb6b88 */
+	--color-error-500: 181 44 85; /* ⬅ #b52c55 */
+	--color-error-600: 163 40 77; /* ⬅ #a3284d */
+	--color-error-700: 136 33 64; /* ⬅ #882140 */
+	--color-error-800: 109 26 51; /* ⬅ #6d1a33 */
+	--color-error-900: 89 22 42; /* ⬅ #59162a */
+	/* surface | #64748b */
+	--color-surface-50: 232 234 238; /* ⬅ #e8eaee */
+	--color-surface-100: 224 227 232; /* ⬅ #e0e3e8 */
+	--color-surface-200: 216 220 226; /* ⬅ #d8dce2 */
+	--color-surface-300: 193 199 209; /* ⬅ #c1c7d1 */
+	--color-surface-400: 147 158 174; /* ⬅ #939eae */
+	--color-surface-500: 100 116 139; /* ⬅ #64748b */
+	--color-surface-600: 90 104 125; /* ⬅ #5a687d */
+	--color-surface-700: 75 87 104; /* ⬅ #4b5768 */
+	--color-surface-800: 60 70 83; /* ⬅ #3c4653 */
+	--color-surface-900: 49 57 68; /* ⬅ #313944 */
+}
+
+[data-theme='rocket'] h1,
+[data-theme='rocket'] h2,
+[data-theme='rocket'] h3,
+[data-theme='rocket'] h4,
+[data-theme='rocket'] h5,
+[data-theme='rocket'] h6 {
+	font-weight: bold;
+}
+
+/* Applied to body with `<body data-theme="rocket">` */
+/* Created with: https://csshero.org/mesher/ */
+/* prettier-ignore */
+[data-theme='rocket'] {
+	background-image:
+			radial-gradient(at 0% 0%, rgba(var(--color-secondary-500) / 0.33) 0px, transparent 50%),
+			radial-gradient(at 98% 1%, rgba(var(--color-error-500) / 0.33) 0px, transparent 50%);
+}

package/src/lib/css/themes/theme-sahara.css

@@ -0,0 +1,128 @@
+/* https://fonts.google.com/specimen/Raleway */
+@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');
+/* https://fonts.google.com/specimen/Lato?query=lato&noto.query=Abril */
+@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');
+
+:root {
+	/* =~= Theme Styles =~= */
+	--theme-font-family-base: 'Lato', sans-serif;
+	--theme-font-family-heading: 'Raleway', sans-serif;
+	--theme-font-color-base: var(--color-secondary-900);
+	--theme-font-color-dark: var(--color-primary-100);
+	--theme-rounded-base: 9999px;
+	--theme-rounded-container: 24px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 0 0 0;
+	--on-error: 255 255 255;
+	--on-surface: 255 255 255;
+	/* =~= Theme Colors  =~= */
+	/* primary | #ecaa36 */
+	--color-primary-50: 252 242 225; /* ⬅ #fcf2e1 */
+	--color-primary-100: 251 238 215; /* ⬅ #fbeed7 */
+	--color-primary-200: 250 234 205; /* ⬅ #faeacd */
+	--color-primary-300: 247 221 175; /* ⬅ #f7ddaf */
+	--color-primary-400: 242 196 114; /* ⬅ #f2c472 */
+	--color-primary-500: 236 170 54; /* ⬅ #ecaa36 */
+	--color-primary-600: 212 153 49; /* ⬅ #d49931 */
+	--color-primary-700: 177 128 41; /* ⬅ #b18029 */
+	--color-primary-800: 142 102 32; /* ⬅ #8e6620 */
+	--color-primary-900: 116 83 26; /* ⬅ #74531a */
+	/* secondary | #3acbba */
+	--color-secondary-50: 225 247 245; /* ⬅ #e1f7f5 */
+	--color-secondary-100: 216 245 241; /* ⬅ #d8f5f1 */
+	--color-secondary-200: 206 242 238; /* ⬅ #cef2ee */
+	--color-secondary-300: 176 234 227; /* ⬅ #b0eae3 */
+	--color-secondary-400: 117 219 207; /* ⬅ #75dbcf */
+	--color-secondary-500: 58 203 186; /* ⬅ #3acbba */
+	--color-secondary-600: 52 183 167; /* ⬅ #34b7a7 */
+	--color-secondary-700: 44 152 140; /* ⬅ #2c988c */
+	--color-secondary-800: 35 122 112; /* ⬅ #237a70 */
+	--color-secondary-900: 28 99 91; /* ⬅ #1c635b */
+	/* tertiary | #bbdf86 */
+	--color-tertiary-50: 245 250 237; /* ⬅ #f5faed */
+	--color-tertiary-100: 241 249 231; /* ⬅ #f1f9e7 */
+	--color-tertiary-200: 238 247 225; /* ⬅ #eef7e1 */
+	--color-tertiary-300: 228 242 207; /* ⬅ #e4f2cf */
+	--color-tertiary-400: 207 233 170; /* ⬅ #cfe9aa */
+	--color-tertiary-500: 187 223 134; /* ⬅ #bbdf86 */
+	--color-tertiary-600: 168 201 121; /* ⬅ #a8c979 */
+	--color-tertiary-700: 140 167 101; /* ⬅ #8ca765 */
+	--color-tertiary-800: 112 134 80; /* ⬅ #708650 */
+	--color-tertiary-900: 92 109 66; /* ⬅ #5c6d42 */
+	/* success | #84cc16 */
+	--color-success-50: 237 247 220; /* ⬅ #edf7dc */
+	--color-success-100: 230 245 208; /* ⬅ #e6f5d0 */
+	--color-success-200: 224 242 197; /* ⬅ #e0f2c5 */
+	--color-success-300: 206 235 162; /* ⬅ #ceeba2 */
+	--color-success-400: 169 219 92; /* ⬅ #a9db5c */
+	--color-success-500: 132 204 22; /* ⬅ #84cc16 */
+	--color-success-600: 119 184 20; /* ⬅ #77b814 */
+	--color-success-700: 99 153 17; /* ⬅ #639911 */
+	--color-success-800: 79 122 13; /* ⬅ #4f7a0d */
+	--color-success-900: 65 100 11; /* ⬅ #41640b */
+	/* warning | #e5c157 */
+	--color-warning-50: 251 246 230; /* ⬅ #fbf6e6 */
+	--color-warning-100: 250 243 221; /* ⬅ #faf3dd */
+	--color-warning-200: 249 240 213; /* ⬅ #f9f0d5 */
+	--color-warning-300: 245 230 188; /* ⬅ #f5e6bc */
+	--color-warning-400: 237 212 137; /* ⬅ #edd489 */
+	--color-warning-500: 229 193 87; /* ⬅ #e5c157 */
+	--color-warning-600: 206 174 78; /* ⬅ #ceae4e */
+	--color-warning-700: 172 145 65; /* ⬅ #ac9141 */
+	--color-warning-800: 137 116 52; /* ⬅ #897434 */
+	--color-warning-900: 112 95 43; /* ⬅ #705f2b */
+	/* error | #db5c9c */
+	--color-error-50: 250 231 240; /* ⬅ #fae7f0 */
+	--color-error-100: 248 222 235; /* ⬅ #f8deeb */
+	--color-error-200: 246 214 230; /* ⬅ #f6d6e6 */
+	--color-error-300: 241 190 215; /* ⬅ #f1bed7 */
+	--color-error-400: 230 141 186; /* ⬅ #e68dba */
+	--color-error-500: 219 92 156; /* ⬅ #db5c9c */
+	--color-error-600: 197 83 140; /* ⬅ #c5538c */
+	--color-error-700: 164 69 117; /* ⬅ #a44575 */
+	--color-error-800: 131 55 94; /* ⬅ #83375e */
+	--color-error-900: 107 45 76; /* ⬅ #6b2d4c */
+	/* surface | #da4e65 */
+	--color-surface-50: 249 228 232; /* ⬅ #f9e4e8 */
+	--color-surface-100: 248 220 224; /* ⬅ #f8dce0 */
+	--color-surface-200: 246 211 217; /* ⬅ #f6d3d9 */
+	--color-surface-300: 240 184 193; /* ⬅ #f0b8c1 */
+	--color-surface-400: 229 131 147; /* ⬅ #e58393 */
+	--color-surface-500: 218 78 101; /* ⬅ #da4e65 */
+	--color-surface-600: 196 70 91; /* ⬅ #c4465b */
+	--color-surface-700: 164 59 76; /* ⬅ #a43b4c */
+	--color-surface-800: 131 47 61; /* ⬅ #832f3d */
+	--color-surface-900: 107 38 49; /* ⬅ #6b2631 */
+}
+
+[data-theme='sahara'] h1,
+[data-theme='sahara'] h2,
+[data-theme='sahara'] h3,
+[data-theme='sahara'] h4,
+[data-theme='sahara'] h5,
+[data-theme='sahara'] h6 {
+	font-weight: 600;
+}
+[data-theme='sahara'] p {
+	font-weight: 400;
+}
+
+/* Applied to body with `<body data-theme="sahara">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='sahara'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
+		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
+}
+.dark [data-theme='sahara'] {
+	/* prettier-ignore */
+	background-image:
+		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),
+		radial-gradient(at 7% 0%, hsla(37,81%,56%,0.20) 0px, transparent 50%);
+}