@code-coaching/vuetiful 0.4.1 → 0.5.0

package/src/styles/variants.css

@@ -2,155 +2,155 @@
 /* A canned set of reusabled variant styles. */
 
 @layer components {
-	/* Outline -- supports ringed and host variants */
-	.variant-outline-primary {
-		@apply ring-[1px] ring-primary-500 dark:ring-primary-500 ring-inset;
-	}
-	.variant-outline-secondary {
-		@apply ring-[1px] ring-secondary-500 dark:ring-secondary-500 ring-inset;
-	}
-	.variant-outline-tertiary {
-		@apply ring-[1px] ring-tertiary-500 dark:ring-tertiary-500 ring-inset;
-	}
-	.variant-outline-success {
-		@apply ring-[1px] ring-success-500 dark:ring-success-500 ring-inset;
-	}
-	.variant-outline-warning {
-		@apply ring-[1px] ring-warning-500 dark:ring-warning-500 ring-inset;
-	}
-	.variant-outline-error {
-		@apply ring-[1px] ring-error-500 dark:ring-error-500 ring-inset;
-	}
-	.variant-outline,
-	.variant-outline-surface {
-		@apply ring-[1px] ring-surface-500 dark:ring-surface-500 ring-inset;
-	}
+  /* Outline -- supports ringed and host variants */
+  .variant-outline-primary {
+    @apply ring-[1px] ring-inset ring-primary-500 dark:ring-primary-500;
+  }
+  .variant-outline-secondary {
+    @apply ring-[1px] ring-inset ring-secondary-500 dark:ring-secondary-500;
+  }
+  .variant-outline-tertiary {
+    @apply ring-[1px] ring-inset ring-tertiary-500 dark:ring-tertiary-500;
+  }
+  .variant-outline-success {
+    @apply ring-[1px] ring-inset ring-success-500 dark:ring-success-500;
+  }
+  .variant-outline-warning {
+    @apply ring-[1px] ring-inset ring-warning-500 dark:ring-warning-500;
+  }
+  .variant-outline-error {
+    @apply ring-[1px] ring-inset ring-error-500 dark:ring-error-500;
+  }
+  .variant-outline,
+  .variant-outline-surface {
+    @apply ring-[1px] ring-inset ring-surface-500 dark:ring-surface-500;
+  }
 
-	/* ------------------------ */
+  /* ------------------------ */
 
-	/* Filled */
-	.variant-filled {
-		@apply bg-surface-900-50-token text-surface-50-900-token;
-	}
-	.variant-filled-primary {
-		@apply bg-primary-500 dark:bg-primary-500 text-on-primary-token dark:text-on-primary-token;
-	}
-	.variant-filled-secondary {
-		@apply bg-secondary-500 dark:bg-secondary-500 text-on-secondary-token dark:text-on-secondary-token;
-	}
-	.variant-filled-tertiary {
-		@apply bg-tertiary-500 dark:bg-tertiary-500 text-on-tertiary-token dark:text-on-tertiary-token;
-	}
-	.variant-filled-success {
-		@apply bg-success-500 dark:bg-success-500 text-on-success-token dark:text-on-success-token;
-	}
-	.variant-filled-warning {
-		@apply bg-warning-500 dark:bg-warning-500 text-on-warning-token dark:text-on-warning-token;
-	}
-	.variant-filled-error {
-		@apply bg-error-500 dark:bg-error-500 text-on-error-token dark:text-on-error-token;
-	}
-	.variant-filled-surface {
-		@apply bg-surface-400-500-token text-on-surface-token dark:text-on-surface-token;
-	}
+  /* Filled */
+  .variant-filled {
+    @apply bg-surface-900-50-token text-surface-50-900-token;
+  }
+  .variant-filled-primary {
+    @apply bg-primary-500 text-on-primary-token dark:bg-primary-500 dark:text-on-primary-token;
+  }
+  .variant-filled-secondary {
+    @apply bg-secondary-500 text-on-secondary-token dark:bg-secondary-500 dark:text-on-secondary-token;
+  }
+  .variant-filled-tertiary {
+    @apply bg-tertiary-500 text-on-tertiary-token dark:bg-tertiary-500 dark:text-on-tertiary-token;
+  }
+  .variant-filled-success {
+    @apply bg-success-500 text-on-success-token dark:bg-success-500 dark:text-on-success-token;
+  }
+  .variant-filled-warning {
+    @apply bg-warning-500 text-on-warning-token dark:bg-warning-500 dark:text-on-warning-token;
+  }
+  .variant-filled-error {
+    @apply bg-error-500 text-on-error-token dark:bg-error-500 dark:text-on-error-token;
+  }
+  .variant-filled-surface {
+    @apply bg-surface-400-500-token text-on-surface-token dark:text-on-surface-token;
+  }
 
-	/* Ringed */
-	.variant-ringed {
-		@apply bg-transparent dark:bg-transparent variant-outline;
-	}
-	.variant-ringed-primary {
-		@apply bg-transparent dark:bg-transparent variant-outline-primary;
-	}
-	.variant-ringed-secondary {
-		@apply bg-transparent dark:bg-transparent variant-outline-secondary;
-	}
-	.variant-ringed-tertiary {
-		@apply bg-transparent dark:bg-transparent variant-outline-tertiary;
-	}
-	.variant-ringed-success {
-		@apply bg-transparent dark:bg-transparent variant-outline-success;
-	}
-	.variant-ringed-warning {
-		@apply bg-transparent dark:bg-transparent variant-outline-warning;
-	}
-	.variant-ringed-error {
-		@apply bg-transparent dark:bg-transparent variant-outline-error;
-	}
-	.variant-ringed-surface {
-		@apply bg-transparent dark:bg-transparent variant-outline-surface;
-	}
+  /* Ringed */
+  .variant-ringed {
+    @apply variant-outline bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-primary {
+    @apply variant-outline-primary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-secondary {
+    @apply variant-outline-secondary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-tertiary {
+    @apply variant-outline-tertiary bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-success {
+    @apply variant-outline-success bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-warning {
+    @apply variant-outline-warning bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-error {
+    @apply variant-outline-error bg-transparent dark:bg-transparent;
+  }
+  .variant-ringed-surface {
+    @apply variant-outline-surface bg-transparent dark:bg-transparent;
+  }
 
-	/* Ghost */
-	.variant-ghost-primary {
-		@apply bg-primary-500/20 dark:bg-primary-500/20 variant-outline-primary;
-	}
-	.variant-ghost-secondary {
-		@apply bg-secondary-500/20 dark:bg-secondary-500/20 variant-outline-secondary;
-	}
-	.variant-ghost-tertiary {
-		@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 variant-outline-tertiary;
-	}
-	.variant-ghost-success {
-		@apply bg-success-500/20 dark:bg-success-500/20 variant-outline-success;
-	}
-	.variant-ghost-warning {
-		@apply bg-warning-500/20 dark:bg-warning-500/20 variant-outline-warning;
-	}
-	.variant-ghost-error {
-		@apply bg-error-500/20 dark:bg-error-500/20 variant-outline-error;
-	}
-	.variant-ghost,
-	.variant-ghost-surface {
-		@apply bg-surface-500/20 dark:bg-surface-500/20 variant-outline-surface;
-	}
+  /* Ghost */
+  .variant-ghost-primary {
+    @apply variant-outline-primary bg-primary-500/20 dark:bg-primary-500/20;
+  }
+  .variant-ghost-secondary {
+    @apply variant-outline-secondary bg-secondary-500/20 dark:bg-secondary-500/20;
+  }
+  .variant-ghost-tertiary {
+    @apply variant-outline-tertiary bg-tertiary-500/20 dark:bg-tertiary-500/20;
+  }
+  .variant-ghost-success {
+    @apply variant-outline-success bg-success-500/20 dark:bg-success-500/20;
+  }
+  .variant-ghost-warning {
+    @apply variant-outline-warning bg-warning-500/20 dark:bg-warning-500/20;
+  }
+  .variant-ghost-error {
+    @apply variant-outline-error bg-error-500/20 dark:bg-error-500/20;
+  }
+  .variant-ghost,
+  .variant-ghost-surface {
+    @apply variant-outline-surface bg-surface-500/20 dark:bg-surface-500/20;
+  }
 
-	/* Soft */
-	.variant-soft-primary {
-		@apply bg-primary-400/20 dark:bg-primary-500/20 text-primary-700-200-token !ring-0;
-	}
-	.variant-soft-secondary {
-		@apply bg-secondary-400/20 dark:bg-secondary-500/20 text-secondary-700-200-token !ring-0;
-	}
-	.variant-soft-tertiary {
-		@apply bg-tertiary-400/20 dark:bg-tertiary-500/20 text-tertiary-700-200-token !ring-0;
-	}
-	.variant-soft-success {
-		@apply bg-success-400/20 dark:bg-success-500/20 text-success-700-200-token !ring-0;
-	}
-	.variant-soft-warning {
-		@apply bg-warning-400/20 dark:bg-warning-500/20 text-warning-700-200-token !ring-0;
-	}
-	.variant-soft-error {
-		@apply bg-error-400/20 dark:bg-error-500/20 text-error-700-200-token !ring-0;
-	}
-	.variant-soft,
-	.variant-soft-surface {
-		@apply bg-surface-400/20 dark:bg-surface-500/20 text-surface-700-200-token !ring-0;
-	}
+  /* Soft */
+  .variant-soft-primary {
+    @apply bg-primary-400/20 !ring-0 text-primary-700-200-token dark:bg-primary-500/20;
+  }
+  .variant-soft-secondary {
+    @apply bg-secondary-400/20 !ring-0 text-secondary-700-200-token dark:bg-secondary-500/20;
+  }
+  .variant-soft-tertiary {
+    @apply bg-tertiary-400/20 !ring-0 text-tertiary-700-200-token dark:bg-tertiary-500/20;
+  }
+  .variant-soft-success {
+    @apply bg-success-400/20 !ring-0 text-success-700-200-token dark:bg-success-500/20;
+  }
+  .variant-soft-warning {
+    @apply bg-warning-400/20 !ring-0 text-warning-700-200-token dark:bg-warning-500/20;
+  }
+  .variant-soft-error {
+    @apply bg-error-400/20 !ring-0 text-error-700-200-token dark:bg-error-500/20;
+  }
+  .variant-soft,
+  .variant-soft-surface {
+    @apply bg-surface-400/20 !ring-0 text-surface-700-200-token dark:bg-surface-500/20;
+  }
 
-	/* Glass */
-	.variant-glass-primary {
-		@apply bg-primary-500/20 dark:bg-primary-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-secondary {
-		@apply bg-secondary-500/20 dark:bg-secondary-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-tertiary {
-		@apply bg-tertiary-500/20 dark:bg-tertiary-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-success {
-		@apply bg-success-500/20 dark:bg-success-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-warning {
-		@apply bg-warning-500/20 dark:bg-warning-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-error {
-		@apply bg-error-500/20 dark:bg-error-500/20 backdrop-blur-lg;
-	}
-	.variant-glass-surface {
-		@apply bg-surface-500/20 dark:bg-surface-500/20 backdrop-blur-lg;
-	}
-	.variant-glass {
-		@apply bg-surface-50/30 dark:bg-surface-900/30 backdrop-blur-lg;
-	}
+  /* Glass */
+  .variant-glass-primary {
+    @apply bg-primary-500/20 backdrop-blur-lg dark:bg-primary-500/20;
+  }
+  .variant-glass-secondary {
+    @apply bg-secondary-500/20 backdrop-blur-lg dark:bg-secondary-500/20;
+  }
+  .variant-glass-tertiary {
+    @apply bg-tertiary-500/20 backdrop-blur-lg dark:bg-tertiary-500/20;
+  }
+  .variant-glass-success {
+    @apply bg-success-500/20 backdrop-blur-lg dark:bg-success-500/20;
+  }
+  .variant-glass-warning {
+    @apply bg-warning-500/20 backdrop-blur-lg dark:bg-warning-500/20;
+  }
+  .variant-glass-error {
+    @apply bg-error-500/20 backdrop-blur-lg dark:bg-error-500/20;
+  }
+  .variant-glass-surface {
+    @apply bg-surface-500/20 backdrop-blur-lg dark:bg-surface-500/20;
+  }
+  .variant-glass {
+    @apply bg-surface-50/30 backdrop-blur-lg dark:bg-surface-900/30;
+  }
 }

package/src/themes/theme-rocket.css

@@ -1,112 +1,112 @@
 /* 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');
+@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');
+@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 */
+  /* =~= 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;
+[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">` */
@@ -116,4 +116,4 @@
 	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%);
-}
+}