@code-coaching/vuetiful 0.23.0 → 0.23.2

package/src/services/drawer.service.test.ts

@@ -1,41 +1,41 @@
-import { describe, expect, it } from "vitest";
-import { useDrawer } from "./drawer.service";
+import { describe, expect, it } from 'vitest';
+import { useDrawer } from './drawer.service';
 
 const { drawer, open, close } = useDrawer();
 
-describe("useDrawer", () => {
-  describe("defaults", () => {
-    it("should have the default values", () => {
-      expect(drawer.id).toBe("default");
+describe('useDrawer', () => {
+  describe('defaults', () => {
+    it('should have the default values', () => {
+      expect(drawer.id).toBe('default');
       expect(drawer.open).toBe(false);
-      expect(drawer.position).toBe("left");
+      expect(drawer.position).toBe('left');
       expect(drawer.duration).toBe(300);
-      expect(drawer.regionBackdrop).toBe("");
-      expect(drawer.regionDrawer).toBe("");
+      expect(drawer.regionBackdrop).toBe('');
+      expect(drawer.regionDrawer).toBe('');
     });
   });
 
-  describe("open", () => {
-    it("should use the settings", () => {
+  describe('open', () => {
+    it('should use the settings', () => {
       open({
-        id: "test",
+        id: 'test',
         open: true,
-        position: "right",
+        position: 'right',
         duration: 150,
-        regionBackdrop: "backdrop",
-        regionDrawer: "drawer",
+        regionBackdrop: 'backdrop',
+        regionDrawer: 'drawer',
       });
-      expect(drawer.id).toBe("test");
+      expect(drawer.id).toBe('test');
       expect(drawer.open).toBe(true);
-      expect(drawer.position).toBe("right");
+      expect(drawer.position).toBe('right');
       expect(drawer.duration).toBe(150);
-      expect(drawer.regionBackdrop).toBe("backdrop");
-      expect(drawer.regionDrawer).toBe("drawer");
+      expect(drawer.regionBackdrop).toBe('backdrop');
+      expect(drawer.regionDrawer).toBe('drawer');
     });
   });
 
-  describe("close", () => {
-    it("should set the drawer to close", () => {
+  describe('close', () => {
+    it('should set the drawer to close', () => {
       open();
       expect(drawer.open).toBe(true);
       close();

package/src/services/drawer.service.ts

@@ -1,10 +1,10 @@
-import { reactive, readonly } from "vue";
+import { reactive, readonly } from 'vue';
 
 export interface DrawerSettings {
   id?: string;
   open?: boolean;
 
-  position?: "left" | "top" | "right" | "bottom";
+  position?: 'left' | 'top' | 'right' | 'bottom';
   duration?: 150 | 300;
 
   regionBackdrop?: string;
@@ -14,22 +14,22 @@ export interface DrawerSettings {
 }
 
 const drawer = reactive<DrawerSettings>({
-  id: "default",
+  id: 'default',
   open: false,
-  position: "left",
+  position: 'left',
   duration: 300,
-  regionBackdrop: "",
-  regionDrawer: "",
+  regionBackdrop: '',
+  regionDrawer: '',
 });
 
 const useDrawer = () => {
   const open = (settings?: DrawerSettings) => {
     drawer.open = true;
-    drawer.id = settings?.id ?? "default";
+    drawer.id = settings?.id ?? 'default';
     drawer.duration = settings?.duration ?? 300;
-    drawer.regionBackdrop = settings?.regionBackdrop ?? "";
-    drawer.regionDrawer = settings?.regionDrawer ?? "";
-    drawer.position = settings?.position ?? "left";
+    drawer.regionBackdrop = settings?.regionBackdrop ?? '';
+    drawer.regionDrawer = settings?.regionDrawer ?? '';
+    drawer.position = settings?.position ?? 'left';
   };
 
   const close = () => {

package/src/services/highlight.service.test.ts

@@ -1,22 +1,22 @@
-import { describe, expect, it } from "vitest";
-import { useHighlight } from "./highlight.service";
+import { describe, expect, it } from 'vitest';
+import { useHighlight } from './highlight.service';
 
 const { highlight } = useHighlight();
 
-describe("useHighlight", () => {
-  describe("highlight", () => {
-    describe("given a known language is passed", () => {
-      it("should trim and highlight the code", () => {
-        expect(highlight("  const name = 'John Duck'  ", "javascript")).toEqual(
-          '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
+describe('useHighlight', () => {
+  describe('highlight', () => {
+    describe('given a known language is passed', () => {
+      it('should trim and highlight the code', () => {
+        expect(highlight("  const name = 'John Duck'  ", 'javascript')).toEqual(
+          '<span class="hljs-keyword">const</span> name = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
         );
       });
     });
 
-    describe("given an unknown language is passed", () => {
-      it("should trim and auto highlight the code", () => {
-        expect(highlight("  const name = 'John Duck'  ", "unknown")).toEqual(
-          '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>'
+    describe('given an unknown language is passed', () => {
+      it('should trim and auto highlight the code', () => {
+        expect(highlight("  const name = 'John Duck'  ", 'unknown')).toEqual(
+          '<span class="hljs-keyword">const</span> <span class="hljs-keyword">name</span> = <span class="hljs-string">&#x27;John Duck&#x27;</span>',
         );
       });
     });

package/src/services/highlight.service.ts

@@ -1,4 +1,4 @@
-import hljs from "highlight.js";
+import hljs from 'highlight.js';
 
 const highlighter = hljs;
 

package/src/services/index.ts

@@ -1,8 +1,8 @@
-import { useDarkMode } from "./dark-mode.service";
-import { useDrawer } from "./drawer.service";
-import { useHighlight } from "./highlight.service";
-import { useRail } from "./rail.service";
-import { useSettings, VuetifulSettings } from "./settings.service";
+import { useDarkMode } from './dark-mode.service';
+import { useDrawer } from './drawer.service';
+import { useHighlight } from './highlight.service';
+import { useRail } from './rail.service';
+import { useSettings, VuetifulSettings } from './settings.service';
 
 export { useDarkMode, useDrawer, useHighlight, useRail, useSettings };
 export type { VuetifulSettings };

package/src/services/rail.service.test.ts

@@ -1,13 +1,13 @@
-import { describe, expect, it } from "vitest";
-import { useRail } from "./rail.service";
+import { describe, expect, it } from 'vitest';
+import { useRail } from './rail.service';
 
 const { selectedRailTile } = useRail();
 
-describe("useRail", () => {
-  describe("selectedRailTile", () => {
-    it("should expose selectedRailTile", () => {
-      selectedRailTile.value = "John Duck";
-      expect(selectedRailTile.value).toBe("John Duck");
+describe('useRail', () => {
+  describe('selectedRailTile', () => {
+    it('should expose selectedRailTile', () => {
+      selectedRailTile.value = 'John Duck';
+      expect(selectedRailTile.value).toBe('John Duck');
     });
   });
 });

package/src/services/rail.service.ts

@@ -1,6 +1,6 @@
-import { ref } from "vue";
+import { ref } from 'vue';
 
-const selectedRailTile = ref("");
+const selectedRailTile = ref('');
 
 const useRail = () => {
   return {

package/src/services/settings.service.test.ts

@@ -1,12 +1,12 @@
-import { afterEach, describe, expect, test, vi } from "vitest";
+import { afterEach, describe, expect, test, vi } from 'vitest';
 
-describe("useSettings", () => {
+describe('useSettings', () => {
   afterEach(() => {
     vi.resetModules();
   });
-  describe("updateSettings", () => {
-    test("should update settings", async () => {
-      const { useSettings } = await import("./settings.service");
+  describe('updateSettings', () => {
+    test('should update settings', async () => {
+      const { useSettings } = await import('./settings.service');
       const { updateSettings, settings } = useSettings();
 
       expect(settings.global.unstyled).toBe(false);

package/src/services/settings.service.ts

@@ -1,4 +1,4 @@
-import { reactive } from "vue";
+import { reactive } from 'vue';
 
 interface UnstyledSettings {
   unstyled: boolean;

package/src/styles/all.css

@@ -3,22 +3,22 @@
 /* NOTE: The order shown below is required */
 
 /* Tailwind Directives */
-@import "tailwind.css";
+@import 'tailwind.css';
 
 /* Global Styles */
-@import "core.css";
+@import 'core.css';
 
 /* Typographical Settings */
-@import "typography.css";
+@import 'typography.css';
 
 /* Imports all Tailwind Elements */
-@import "elements.css";
+@import 'elements.css';
 
 /* Imports all Variant Styles */
-@import "variants.css";
+@import 'variants.css';
 
 /* Imports all Transitions */
-@import "transitions.css";
+@import 'transitions.css';
 
 /* Imports all Component Styles */
-@import "../../dist/style.css";
+@import '../../dist/style.css';

package/src/styles/elements/buttons.css

@@ -66,7 +66,7 @@
   }
 
   /* File Input Button */
-  input[type="file"]:not(.file-dropzone-input)::file-selector-button {
+  input[type='file']:not(.file-dropzone-input)::file-selector-button {
     @apply variant-filled btn btn-sm mr-2 border-0;
   }
 

package/src/styles/elements/forms.css

@@ -48,7 +48,7 @@
 
   /* Range Input */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color */
-  [type="range"] {
+  [type='range'] {
     @apply w-full accent-surface-900 dark:accent-surface-50;
   }
 
@@ -138,23 +138,23 @@
   /* === Specialized === */
 
   /* File Inputs */
-  .input[type="file"] {
+  .input[type='file'] {
     @apply p-1;
   }
 
   /* Color Picker */
   /* https://stackoverflow.com/questions/11167281/webkit-css-to-control-the-box-around-the-color-in-an-inputtype-color */
-  .input[type="color"] {
+  .input[type='color'] {
     @apply h-10 w-10 cursor-pointer overflow-hidden border-none rounded-token;
     -webkit-appearance: none; /* WebKit Only */
   }
-  .input[type="color"]::-webkit-color-swatch-wrapper {
+  .input[type='color']::-webkit-color-swatch-wrapper {
     @apply p-0;
   }
-  .input[type="color"]::-webkit-color-swatch {
+  .input[type='color']::-webkit-color-swatch {
     @apply border-none hover:brightness-110;
   }
-  .input[type="color"]::-moz-color-swatch {
+  .input[type='color']::-moz-color-swatch {
     @apply border-none;
   }
 
@@ -263,7 +263,7 @@
     /* Blur */
     @apply backdrop-blur;
   }
-  .variant-form-material[type="file"] {
+  .variant-form-material[type='file'] {
     @apply !py-1.5;
   }
 }

package/src/styles/elements.css

@@ -2,18 +2,18 @@
 /* Import AFTER your theme, but BEFORE your global stylesheet. */
 /* Recommended as the LAST stylesheet in the set */
 
-@import "elements/alerts.css";
-@import "elements/badges.css";
-@import "elements/breadcrumbs.css";
-@import "elements/buttons.css";
-@import "elements/cards.css";
-@import "elements/chips.css";
-@import "elements/forms.css";
-@import "elements/lists.css";
-@import "elements/logo-clouds.css";
-@import "elements/placeholders.css";
-@import "elements/tables.css";
+@import 'elements/alerts.css';
+@import 'elements/badges.css';
+@import 'elements/breadcrumbs.css';
+@import 'elements/buttons.css';
+@import 'elements/cards.css';
+@import 'elements/chips.css';
+@import 'elements/forms.css';
+@import 'elements/lists.css';
+@import 'elements/logo-clouds.css';
+@import 'elements/placeholders.css';
+@import 'elements/tables.css';
 
 /* Utilities */
-@import "elements/modals.css";
-@import "elements/popups.css";
+@import 'elements/modals.css';
+@import 'elements/popups.css';

package/src/styles/transitions.css

@@ -1,2 +1,2 @@
-@import "transitions/fade.css";
-@import "transitions/slide.css";
+@import 'transitions/fade.css';
+@import 'transitions/slide.css';

package/src/styles/typography.css

@@ -33,9 +33,9 @@
     @apply text-base;
   }
 
-  a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(
-      .logo-item
-    ):not(a.card):not(.list-nav a) {
+  a:not(.unstyled):not(.permalink):is(:not(.prose *)):not(.btn):not(.btn-icon):not(.app-bar a):not(.logo-item):not(
+      a.card
+    ):not(.list-nav a) {
     @apply text-primary-700 underline hover:brightness-110 dark:text-primary-500;
   }
 
@@ -79,10 +79,10 @@
     @apply absolute left-1 font-mono;
   }
   ins:not(.unstyled):is(:not(.prose *))::before {
-    content: "+";
+    content: '+';
   }
   del:not(.unstyled):is(:not(.prose *))::before {
-    content: "−";
+    content: '−';
   }
 
   ins:not(.unstyled):is(:not(.prose *)) {

package/src/themes/theme-rocket.css

@@ -1,12 +1,12 @@
 /* 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-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;
@@ -100,12 +100,12 @@
   --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 {
+[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;
 }
 

package/src/themes/theme-sahara.css

@@ -1,12 +1,12 @@
 /* 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");
+@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");
+@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-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;
@@ -100,27 +100,27 @@
   --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 {
+[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 {
+[data-theme='sahara'] p {
   font-weight: 400;
 }
 
 /* Applied to body with `<body data-theme="sahara">` */
 /* Created with: https://csshero.org/mesher/ */
-[data-theme="sahara"] {
+[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"] {
+.dark [data-theme='sahara'] {
   /* prettier-ignore */
   background-image:
 		radial-gradient(at 100% 36%, hsla(37,81%,56%,0.15) 0px, transparent 50%),

package/src/themes/theme-seafoam.css

@@ -1,12 +1,12 @@
 /* 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");
+@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-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;
@@ -100,12 +100,12 @@
   --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 {
+[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;
@@ -114,9 +114,9 @@
 /* #213253 | #08847c */
 /* Applied to body with `<body data-theme="seafoam">` */
 /* Created with: https://csshero.org/mesher/ */
-[data-theme="seafoam"] {
+[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"] {
+.dark [data-theme='seafoam'] {
   background: linear-gradient(0deg, rgba(33, 50, 83, 1) 0%, rgba(8, 132, 124, 1) 100%);
 }

package/src/themes/theme-seasonal.css

@@ -1,12 +1,12 @@
 /* A New Years inspired theme. */
 
 /* 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");
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
 
 :root {
   /* =~= Theme Properties =~= */
   --theme-font-family-base: system-ui;
-  --theme-font-family-heading: "Quicksand", sans-serif;
+  --theme-font-family-heading: 'Quicksand', sans-serif;
   --theme-font-color-base: var(--color-surface-500);
   --theme-font-color-dark: var(--color-surface-200);
   --theme-rounded-base: 12px;
@@ -101,13 +101,13 @@
 }
 
 /* Applied to body with `<body data-theme="seasonal">` */
-[data-theme="seasonal"] {
+[data-theme='seasonal'] {
   /* prettier-ignore */
   background-image:
 		radial-gradient(at 22% 100%, hsla(39,68%,50%,0.23) 0px, transparent 50%),
 		radial-gradient(at 80% 100%, hsla(189,100%,56%,0.33) 0px, transparent 50%);
 }
-.dark [data-theme="seasonal"] {
+.dark [data-theme='seasonal'] {
   /* prettier-ignore */
   background-image:
 		radial-gradient(at 22% 0%, hsla(39,68%,50%,0.15) 0px, transparent 50%),

package/src/themes/theme-skeleton.css

@@ -1,5 +1,5 @@
 /* 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");
+@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 Properties =~= */
@@ -99,12 +99,12 @@
 }
 
 /* Headings */
-[data-theme="skeleton"] h1,
-[data-theme="skeleton"] h2,
-[data-theme="skeleton"] h3,
-[data-theme="skeleton"] h4,
-[data-theme="skeleton"] h5,
-[data-theme="skeleton"] h6 {
+[data-theme='skeleton'] h1,
+[data-theme='skeleton'] h2,
+[data-theme='skeleton'] h3,
+[data-theme='skeleton'] h4,
+[data-theme='skeleton'] h5,
+[data-theme='skeleton'] h6 {
   font-weight: bold;
 }
 

package/src/themes/theme-vintage.css

@@ -1,12 +1,12 @@
 /* https://fonts.google.com/specimen/Abril+Fatface?query=Abril+Fatface&noto.query=Abril */
-@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
 /* https://fonts.google.com/noto/specimen/Noto+Sans?query=sans */
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100;0,200;0,300;0,400;1,100;1,200;1,300&display=swap');
 
 :root {
   /* =~= Theme Styles =~= */
-  --theme-font-family-base: "Noto Sans", sans-serif;
-  --theme-font-family-heading: "Abril Fatface", cursive;
+  --theme-font-family-base: 'Noto Sans', sans-serif;
+  --theme-font-family-heading: 'Abril Fatface', cursive;
   --theme-font-color-base: var(--color-primary-900);
   --theme-font-color-dark: var(--color-primary-100);
   --theme-rounded-base: 2px;
@@ -100,24 +100,24 @@
   --color-surface-900: 31 27 24; /* ⬅ #1f1b18 */
 }
 
-[data-theme="vintage"] h1,
-[data-theme="vintage"] h2,
-[data-theme="vintage"] h3,
-[data-theme="vintage"] h4,
-[data-theme="vintage"] h5,
-[data-theme="vintage"] h6 {
+[data-theme='vintage'] h1,
+[data-theme='vintage'] h2,
+[data-theme='vintage'] h3,
+[data-theme='vintage'] h4,
+[data-theme='vintage'] h5,
+[data-theme='vintage'] h6 {
   letter-spacing: 1px;
 }
 
 /* Applied to body with `<body data-theme="vintage">` */
 /* Created with: https://csshero.org/mesher/ */
-[data-theme="vintage"] {
+[data-theme='vintage'] {
   /* prettier-ignore */
   background-image:
 		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.20) 0px, transparent 50%),
 		radial-gradient(at 85% 100%, hsla(31,83%,50%,0.20) 0px, transparent 50%);
 }
-.dark [data-theme="vintage"] {
+.dark [data-theme='vintage'] {
   /* prettier-ignore */
   background-image:
 		radial-gradient(at 100% 0%, hsla(135,34%,70%,0.14) 0px, transparent 50%),