@bexis2/bexis2-core-ui 0.3.0 → 0.3.2

package/dist/css/themes/theme-sahara.css

@@ -1,128 +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%);
-}
+/* 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%);
+}

package/dist/css/themes/theme-seafoam.css

@@ -1,122 +1,122 @@
-/* https://fonts.google.com/specimen/Playfair+Display?query=playfair&noto.query=Abril */
-@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');
-
-:root {
-	/* =~= Theme Styles =~= */
-	--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: var(--color-surface-900);
-	--theme-font-color-dark: var(--color-secondary-100);
-	--theme-rounded-base: 16px;
-	--theme-rounded-container: 16px;
-	--theme-border-base: 3px;
-	/* =~= 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: 0 0 0;
-	/* =~= Theme Colors  =~= */
-	/* primary | #86d0cb */
-	--color-primary-50: 237 248 247; /* ⬅ #edf8f7 */
-	--color-primary-100: 231 246 245; /* ⬅ #e7f6f5 */
-	--color-primary-200: 225 243 242; /* ⬅ #e1f3f2 */
-	--color-primary-300: 207 236 234; /* ⬅ #cfecea */
-	--color-primary-400: 170 222 219; /* ⬅ #aadedb */
-	--color-primary-500: 134 208 203; /* ⬅ #86d0cb */
-	--color-primary-600: 121 187 183; /* ⬅ #79bbb7 */
-	--color-primary-700: 101 156 152; /* ⬅ #659c98 */
-	--color-primary-800: 80 125 122; /* ⬅ #507d7a */
-	--color-primary-900: 66 102 99; /* ⬅ #426663 */
-	/* secondary | #213355 */
-	--color-secondary-50: 222 224 230; /* ⬅ #dee0e6 */
-	--color-secondary-100: 211 214 221; /* ⬅ #d3d6dd */
-	--color-secondary-200: 200 204 213; /* ⬅ #c8ccd5 */
-	--color-secondary-300: 166 173 187; /* ⬅ #a6adbb */
-	--color-secondary-400: 100 112 136; /* ⬅ #647088 */
-	--color-secondary-500: 33 51 85; /* ⬅ #213355 */
-	--color-secondary-600: 30 46 77; /* ⬅ #1e2e4d */
-	--color-secondary-700: 25 38 64; /* ⬅ #192640 */
-	--color-secondary-800: 20 31 51; /* ⬅ #141f33 */
-	--color-secondary-900: 16 25 42; /* ⬅ #10192a */
-	/* tertiary | #ff3d00 */
-	--color-tertiary-50: 255 226 217; /* ⬅ #ffe2d9 */
-	--color-tertiary-100: 255 216 204; /* ⬅ #ffd8cc */
-	--color-tertiary-200: 255 207 191; /* ⬅ #ffcfbf */
-	--color-tertiary-300: 255 177 153; /* ⬅ #ffb199 */
-	--color-tertiary-400: 255 119 77; /* ⬅ #ff774d */
-	--color-tertiary-500: 255 61 0; /* ⬅ #ff3d00 */
-	--color-tertiary-600: 230 55 0; /* ⬅ #e63700 */
-	--color-tertiary-700: 191 46 0; /* ⬅ #bf2e00 */
-	--color-tertiary-800: 153 37 0; /* ⬅ #992500 */
-	--color-tertiary-900: 125 30 0; /* ⬅ #7d1e00 */
-	/* success | #06e5a2 */
-	--color-success-50: 218 251 241; /* ⬅ #dafbf1 */
-	--color-success-100: 205 250 236; /* ⬅ #cdfaec */
-	--color-success-200: 193 249 232; /* ⬅ #c1f9e8 */
-	--color-success-300: 155 245 218; /* ⬅ #9bf5da */
-	--color-success-400: 81 237 190; /* ⬅ #51edbe */
-	--color-success-500: 6 229 162; /* ⬅ #06e5a2 */
-	--color-success-600: 5 206 146; /* ⬅ #05ce92 */
-	--color-success-700: 5 172 122; /* ⬅ #05ac7a */
-	--color-success-800: 4 137 97; /* ⬅ #048961 */
-	--color-success-900: 3 112 79; /* ⬅ #03704f */
-	/* warning | #eae557 */
-	--color-warning-50: 252 251 230; /* ⬅ #fcfbe6 */
-	--color-warning-100: 251 250 221; /* ⬅ #fbfadd */
-	--color-warning-200: 250 249 213; /* ⬅ #faf9d5 */
-	--color-warning-300: 247 245 188; /* ⬅ #f7f5bc */
-	--color-warning-400: 240 237 137; /* ⬅ #f0ed89 */
-	--color-warning-500: 234 229 87; /* ⬅ #eae557 */
-	--color-warning-600: 211 206 78; /* ⬅ #d3ce4e */
-	--color-warning-700: 176 172 65; /* ⬅ #b0ac41 */
-	--color-warning-800: 140 137 52; /* ⬅ #8c8934 */
-	--color-warning-900: 115 112 43; /* ⬅ #73702b */
-	/* error | #d24646 */
-	--color-error-50: 248 227 227; /* ⬅ #f8e3e3 */
-	--color-error-100: 246 218 218; /* ⬅ #f6dada */
-	--color-error-200: 244 209 209; /* ⬅ #f4d1d1 */
-	--color-error-300: 237 181 181; /* ⬅ #edb5b5 */
-	--color-error-400: 224 126 126; /* ⬅ #e07e7e */
-	--color-error-500: 210 70 70; /* ⬅ #d24646 */
-	--color-error-600: 189 63 63; /* ⬅ #bd3f3f */
-	--color-error-700: 158 53 53; /* ⬅ #9e3535 */
-	--color-error-800: 126 42 42; /* ⬅ #7e2a2a */
-	--color-error-900: 103 34 34; /* ⬅ #672222 */
-	/* surface | #25d1d4 */
-	--color-surface-50: 222 248 249; /* ⬅ #def8f9 */
-	--color-surface-100: 211 246 246; /* ⬅ #d3f6f6 */
-	--color-surface-200: 201 244 244; /* ⬅ #c9f4f4 */
-	--color-surface-300: 168 237 238; /* ⬅ #a8edee */
-	--color-surface-400: 102 223 225; /* ⬅ #66dfe1 */
-	--color-surface-500: 37 209 212; /* ⬅ #25d1d4 */
-	--color-surface-600: 33 188 191; /* ⬅ #21bcbf */
-	--color-surface-700: 28 157 159; /* ⬅ #1c9d9f */
-	--color-surface-800: 22 125 127; /* ⬅ #167d7f */
-	--color-surface-900: 18 102 104; /* ⬅ #126668 */
-}
-
-[data-theme='seafoam'] h1,
-[data-theme='seafoam'] h2,
-[data-theme='seafoam'] h3,
-[data-theme='seafoam'] h4,
-[data-theme='seafoam'] h5,
-[data-theme='seafoam'] h6 {
-	font-weight: bold;
-	font-style: italic;
-	letter-spacing: 1px;
-}
-
-/* #213253 | #08847c */
-/* Applied to body with `<body data-theme="seafoam">` */
-/* Created with: https://csshero.org/mesher/ */
-[data-theme='seafoam'] {
-	background: linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%);
-}
-.dark [data-theme='seafoam'] {
-	background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
-}
+/* https://fonts.google.com/specimen/Playfair+Display?query=playfair&noto.query=Abril */
+@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');
+
+:root {
+	/* =~= Theme Styles =~= */
+	--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: var(--color-surface-900);
+	--theme-font-color-dark: var(--color-secondary-100);
+	--theme-rounded-base: 16px;
+	--theme-rounded-container: 16px;
+	--theme-border-base: 3px;
+	/* =~= 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: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #86d0cb */
+	--color-primary-50: 237 248 247; /* ⬅ #edf8f7 */
+	--color-primary-100: 231 246 245; /* ⬅ #e7f6f5 */
+	--color-primary-200: 225 243 242; /* ⬅ #e1f3f2 */
+	--color-primary-300: 207 236 234; /* ⬅ #cfecea */
+	--color-primary-400: 170 222 219; /* ⬅ #aadedb */
+	--color-primary-500: 134 208 203; /* ⬅ #86d0cb */
+	--color-primary-600: 121 187 183; /* ⬅ #79bbb7 */
+	--color-primary-700: 101 156 152; /* ⬅ #659c98 */
+	--color-primary-800: 80 125 122; /* ⬅ #507d7a */
+	--color-primary-900: 66 102 99; /* ⬅ #426663 */
+	/* secondary | #213355 */
+	--color-secondary-50: 222 224 230; /* ⬅ #dee0e6 */
+	--color-secondary-100: 211 214 221; /* ⬅ #d3d6dd */
+	--color-secondary-200: 200 204 213; /* ⬅ #c8ccd5 */
+	--color-secondary-300: 166 173 187; /* ⬅ #a6adbb */
+	--color-secondary-400: 100 112 136; /* ⬅ #647088 */
+	--color-secondary-500: 33 51 85; /* ⬅ #213355 */
+	--color-secondary-600: 30 46 77; /* ⬅ #1e2e4d */
+	--color-secondary-700: 25 38 64; /* ⬅ #192640 */
+	--color-secondary-800: 20 31 51; /* ⬅ #141f33 */
+	--color-secondary-900: 16 25 42; /* ⬅ #10192a */
+	/* tertiary | #ff3d00 */
+	--color-tertiary-50: 255 226 217; /* ⬅ #ffe2d9 */
+	--color-tertiary-100: 255 216 204; /* ⬅ #ffd8cc */
+	--color-tertiary-200: 255 207 191; /* ⬅ #ffcfbf */
+	--color-tertiary-300: 255 177 153; /* ⬅ #ffb199 */
+	--color-tertiary-400: 255 119 77; /* ⬅ #ff774d */
+	--color-tertiary-500: 255 61 0; /* ⬅ #ff3d00 */
+	--color-tertiary-600: 230 55 0; /* ⬅ #e63700 */
+	--color-tertiary-700: 191 46 0; /* ⬅ #bf2e00 */
+	--color-tertiary-800: 153 37 0; /* ⬅ #992500 */
+	--color-tertiary-900: 125 30 0; /* ⬅ #7d1e00 */
+	/* success | #06e5a2 */
+	--color-success-50: 218 251 241; /* ⬅ #dafbf1 */
+	--color-success-100: 205 250 236; /* ⬅ #cdfaec */
+	--color-success-200: 193 249 232; /* ⬅ #c1f9e8 */
+	--color-success-300: 155 245 218; /* ⬅ #9bf5da */
+	--color-success-400: 81 237 190; /* ⬅ #51edbe */
+	--color-success-500: 6 229 162; /* ⬅ #06e5a2 */
+	--color-success-600: 5 206 146; /* ⬅ #05ce92 */
+	--color-success-700: 5 172 122; /* ⬅ #05ac7a */
+	--color-success-800: 4 137 97; /* ⬅ #048961 */
+	--color-success-900: 3 112 79; /* ⬅ #03704f */
+	/* warning | #eae557 */
+	--color-warning-50: 252 251 230; /* ⬅ #fcfbe6 */
+	--color-warning-100: 251 250 221; /* ⬅ #fbfadd */
+	--color-warning-200: 250 249 213; /* ⬅ #faf9d5 */
+	--color-warning-300: 247 245 188; /* ⬅ #f7f5bc */
+	--color-warning-400: 240 237 137; /* ⬅ #f0ed89 */
+	--color-warning-500: 234 229 87; /* ⬅ #eae557 */
+	--color-warning-600: 211 206 78; /* ⬅ #d3ce4e */
+	--color-warning-700: 176 172 65; /* ⬅ #b0ac41 */
+	--color-warning-800: 140 137 52; /* ⬅ #8c8934 */
+	--color-warning-900: 115 112 43; /* ⬅ #73702b */
+	/* error | #d24646 */
+	--color-error-50: 248 227 227; /* ⬅ #f8e3e3 */
+	--color-error-100: 246 218 218; /* ⬅ #f6dada */
+	--color-error-200: 244 209 209; /* ⬅ #f4d1d1 */
+	--color-error-300: 237 181 181; /* ⬅ #edb5b5 */
+	--color-error-400: 224 126 126; /* ⬅ #e07e7e */
+	--color-error-500: 210 70 70; /* ⬅ #d24646 */
+	--color-error-600: 189 63 63; /* ⬅ #bd3f3f */
+	--color-error-700: 158 53 53; /* ⬅ #9e3535 */
+	--color-error-800: 126 42 42; /* ⬅ #7e2a2a */
+	--color-error-900: 103 34 34; /* ⬅ #672222 */
+	/* surface | #25d1d4 */
+	--color-surface-50: 222 248 249; /* ⬅ #def8f9 */
+	--color-surface-100: 211 246 246; /* ⬅ #d3f6f6 */
+	--color-surface-200: 201 244 244; /* ⬅ #c9f4f4 */
+	--color-surface-300: 168 237 238; /* ⬅ #a8edee */
+	--color-surface-400: 102 223 225; /* ⬅ #66dfe1 */
+	--color-surface-500: 37 209 212; /* ⬅ #25d1d4 */
+	--color-surface-600: 33 188 191; /* ⬅ #21bcbf */
+	--color-surface-700: 28 157 159; /* ⬅ #1c9d9f */
+	--color-surface-800: 22 125 127; /* ⬅ #167d7f */
+	--color-surface-900: 18 102 104; /* ⬅ #126668 */
+}
+
+[data-theme='seafoam'] h1,
+[data-theme='seafoam'] h2,
+[data-theme='seafoam'] h3,
+[data-theme='seafoam'] h4,
+[data-theme='seafoam'] h5,
+[data-theme='seafoam'] h6 {
+	font-weight: bold;
+	font-style: italic;
+	letter-spacing: 1px;
+}
+
+/* #213253 | #08847c */
+/* Applied to body with `<body data-theme="seafoam">` */
+/* Created with: https://csshero.org/mesher/ */
+[data-theme='seafoam'] {
+	background: linear-gradient(0deg, rgba(203, 221, 254, 0.75) 0%, rgba(163, 209, 206, 0.75) 100%);
+}
+.dark [data-theme='seafoam'] {
+	background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
+}