@code-coaching/vuetiful 0.23.2 → 0.24.1

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

@@ -1,11 +1,11 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { useDrawer } from './drawer.service';
 
 const { drawer, open, close } = useDrawer();
 
 describe('useDrawer', () => {
   describe('defaults', () => {
-    it('should have the default values', () => {
+    test('should have the default values', () => {
       expect(drawer.id).toBe('default');
       expect(drawer.open).toBe(false);
       expect(drawer.position).toBe('left');
@@ -16,7 +16,7 @@ describe('useDrawer', () => {
   });
 
   describe('open', () => {
-    it('should use the settings', () => {
+    test('should use the settings', () => {
       open({
         id: 'test',
         open: true,
@@ -35,7 +35,7 @@ describe('useDrawer', () => {
   });
 
   describe('close', () => {
-    it('should set the drawer to close', () => {
+    test('should set the drawer to close', () => {
       open();
       expect(drawer.open).toBe(true);
       close();

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

@@ -1,4 +1,4 @@
-import { describe, expect, it } from 'vitest';
+import { describe, expect, test } from 'vitest';
 import { useHighlight } from './highlight.service';
 
 const { highlight } = useHighlight();
@@ -6,7 +6,7 @@ const { highlight } = useHighlight();
 describe('useHighlight', () => {
   describe('highlight', () => {
     describe('given a known language is passed', () => {
-      it('should trim and highlight the code', () => {
+      test('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>',
         );
@@ -14,7 +14,7 @@ describe('useHighlight', () => {
     });
 
     describe('given an unknown language is passed', () => {
-      it('should trim and auto highlight the code', () => {
+      test('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/index.ts

@@ -1,8 +1,8 @@
-import { useDarkMode } from './dark-mode.service';
+import { useDarkMode, Mode } 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 };
+export type { VuetifulSettings, Mode };

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

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

package/src/utils/colors/colors.service.ts

@@ -0,0 +1,293 @@
+// This file is taken from Skeleton - wrapped in a useColors composable function
+type ContrastLevel = 'AA' | 'AAA';
+type ContrastSize = 'small' | 'large';
+
+export interface Report {
+  emoji: string;
+  note: string;
+}
+
+export interface PassReport {
+  textColor: string;
+  backgroundColor: string;
+  contrast: number;
+  report: Report;
+  smallAA: boolean;
+  smallAAA: boolean;
+  largeAA: boolean;
+  largeAAA: boolean;
+  fails: boolean;
+}
+
+export type Palette = {
+  [key: number]: {
+    hex: string;
+    rgb: string;
+    on: string;
+  };
+};
+
+export const semanticNames = ['primary', 'secondary', 'tertiary', 'success', 'warning', 'error', 'surface'] as const;
+export type SemanticNames = (typeof semanticNames)[number];
+export interface ColorSettings {
+  key: SemanticNames;
+  label: string;
+  hex: string;
+  rgb: string;
+  on: string;
+}
+
+type Rgb = {
+  r: number;
+  g: number;
+  b: number;
+};
+
+const useColors = () => {
+  function hexToRgb(hex: string): Rgb | null {
+    const sanitizedHex = hex.replaceAll('##', '#');
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+
+    if (!colorParts) return null;
+
+    const [, r, g, b] = colorParts;
+
+    return {
+      r: parseInt(r, 16),
+      g: parseInt(g, 16),
+      b: parseInt(b, 16),
+    } as Rgb;
+  }
+
+  function hexToTailwindRgbString(hex: string): string {
+    const sanitizedHex = hex.replaceAll('##', '#');
+    const colorParts = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(sanitizedHex);
+
+    if (!colorParts) return '(invalid)';
+
+    const [, r, g, b] = colorParts;
+
+    return `${parseInt(r, 16)} ${parseInt(g, 16)} ${parseInt(b, 16)}`;
+  }
+
+  function rgbToHex(r: number, g: number, b: number): string {
+    const toHex = (c: number) => `0${c.toString(16)}`.slice(-2);
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+  }
+
+  function generateA11yOnColor(hex: string): '255 255 255' | '0 0 0' {
+    const black = calculateRatio(hex, '#000000');
+    const white = calculateRatio(hex, '#FFFFFF');
+    return black < white ? '0 0 0' : '255 255 255';
+  }
+
+  function lighten(hex: string, intensity: number): string {
+    const color = hexToRgb(`#${hex}`);
+
+    if (!color) return '';
+
+    const r = Math.round(color.r + (255 - color.r) * intensity);
+    const g = Math.round(color.g + (255 - color.g) * intensity);
+    const b = Math.round(color.b + (255 - color.b) * intensity);
+
+    return rgbToHex(r, g, b);
+  }
+
+  function darken(hex: string, intensity: number): string {
+    const color = hexToRgb(hex);
+
+    if (!color) return '';
+
+    const r = Math.round(color.r * intensity);
+    const g = Math.round(color.g * intensity);
+    const b = Math.round(color.b * intensity);
+
+    return rgbToHex(r, g, b);
+  }
+
+  function generatePalette(baseColor: string): Palette {
+    const hexValidation = new RegExp(/^#[0-9a-f]{6}$/i);
+    if (!hexValidation.test(baseColor)) baseColor = '#CCCCCC';
+
+    const hex500 = `#${baseColor}`.replace('##', '#');
+
+    const response: Palette = {
+      500: { hex: hex500, rgb: hexToTailwindRgbString(hex500), on: generateA11yOnColor(hex500) },
+    };
+
+    const intensityMap: { [key: number]: number } = {
+      50: 0.85,
+      100: 0.8,
+      200: 0.75,
+      300: 0.6,
+      400: 0.3,
+      600: 0.9,
+      700: 0.75,
+      800: 0.6,
+      900: 0.49,
+    };
+
+    [50, 100, 200, 300, 400].forEach((level) => {
+      const hex = lighten(baseColor, intensityMap[level]);
+      response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
+    });
+
+    [600, 700, 800, 900].forEach((level) => {
+      const hex = darken(baseColor, intensityMap[level]);
+      response[level] = { hex, rgb: hexToTailwindRgbString(hex), on: generateA11yOnColor(hex) };
+    });
+
+    return response as Palette;
+  }
+
+  const contrastLevels: Record<
+    ContrastSize,
+    {
+      [key in ContrastLevel]: number;
+    }
+  > = {
+    /** For text that is less than 18pt */
+    small: {
+      AA: 1 / 4.5,
+      AAA: 1 / 7,
+    },
+    /** For text that is at or is larger than 18pt */
+    large: {
+      AA: 1 / 3,
+      AAA: 1 / 4.5,
+    },
+  };
+
+  /** Takes the RGB and returns the luminance of it */
+  function getLuminance(r: Rgb): number;
+  function getLuminance(r: number, g: number, b: number): number;
+  function getLuminance(r: number | Rgb, g?: number, b?: number) {
+    const { _r, _g, _b } = typeof r === 'object' ? { _r: r.r, _g: r.g, _b: r.b } : { _r: r, _g: g, _b: b }; // I'm not really happy with this ternary, but it works
+    // we can't use !_r shorthand here because 0 is a valid value
+    if (_r === undefined || _g === undefined || _b === undefined) throw new Error('Invalid RGB value!');
+    const a = [_r, _g, _b].map(function (v) {
+      v /= 255;
+      return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+  }
+
+  function destringRgb(rgbString: string): Rgb {
+    const rgb = rgbString.match(/(\d+),?\s*(\d+),?\s*(\d+)/); // matches "255, 255, 255" and "255 255 255"
+    if (!rgb) throw new Error('Invalid RGB string!');
+    return { r: parseInt(rgb[1], 10), g: parseInt(rgb[2], 10), b: parseInt(rgb[3], 10) };
+  }
+
+  // overload to specify that when there is no returnType, it will always return Rgb
+  function handleStringColor(colorString: string): Rgb;
+  function handleStringColor(colorString: string, returnType: 'rgb'): Rgb;
+  function handleStringColor(colorString: string, returnType: 'hex'): string;
+  function handleStringColor(colorString: string, returnType?: 'hex' | 'rgb'): string | Rgb;
+  function handleStringColor(colorString: string, returnType: 'hex' | 'rgb' = 'rgb'): string | Rgb {
+    // if it's a css variable
+    if (colorString.includes('--')) {
+      colorString = colorString.replace(/var\(|\)/g, ''); // grab just the variable name
+      const cssVarHydrated = getComputedStyle(document.documentElement).getPropertyValue(colorString).trim();
+      return handleStringColor(cssVarHydrated, returnType);
+    }
+    // if it has spaces, it's an rgb string
+    if (colorString.includes(' ')) {
+      const rgb = destringRgb(colorString);
+      return returnType === 'hex' ? rgbToHex(rgb.r, rgb.g, rgb.b) : rgb;
+    }
+
+    // if it's a hex string
+    if (colorString.includes('#')) {
+      const rgb = hexToRgb(colorString);
+      if (!rgb) return '(invalid)';
+      return returnType === 'hex' ? colorString : rgb;
+    }
+    return colorString;
+  }
+
+  function calculateRatio(luminance1: string | number, luminance2: string | number) {
+    const lum1 = typeof luminance1 === 'string' ? getLuminance(handleStringColor(luminance1)) : luminance1;
+    const lum2 = typeof luminance2 === 'string' ? getLuminance(handleStringColor(luminance2)) : luminance2;
+    if (lum1 === undefined || lum2 === undefined) throw new Error('Luminance is undefined!');
+    return lum1 > lum2 ? (lum2 + 0.05) / (lum1 + 0.05) : (lum1 + 0.05) / (lum2 + 0.05);
+  }
+
+  function textPasses(textColor: string, backgroundColor: string, size: ContrastSize, level: ContrastLevel) {
+    const ratio = calculateRatio(textColor, backgroundColor);
+    return ratio <= contrastLevels[size][level];
+  }
+
+  function hexValueIsValid(textColor: string) {
+    return /^#[0-9A-F]{6}$/i.test(textColor);
+  }
+
+  /** A catch-all function to give a report on what size and level a given combination achieves.  */
+  function getPassReport(textColor: string, backgroundColor: string): PassReport {
+    const _textColor = handleStringColor(textColor, 'hex');
+    const _backgroundColor = handleStringColor(backgroundColor, 'hex');
+    const contrast = calculateRatio(_textColor, _backgroundColor);
+    const smallAA = textPasses(_textColor, _backgroundColor, 'small', 'AA');
+    const smallAAA = textPasses(_textColor, _backgroundColor, 'small', 'AAA');
+    const largeAA = textPasses(_textColor, _backgroundColor, 'large', 'AA');
+    const largeAAA = textPasses(_textColor, _backgroundColor, 'large', 'AAA');
+    const fails = !smallAA && !smallAAA && !largeAA && !largeAAA;
+    const AAAEmoji = '<i class="fa-solid fa-heart"></i>';
+    const AAEmoji = '<i class="fa-solid fa-star"></i>';
+    const largeAAEmoji = '<i class="fa-solid fa-star-half-stroke"></i>';
+    const failEmoji = '<i class="fa-solid fa-triangle-exclamation"></i>';
+    const report = {
+      emoji: smallAAA ? AAAEmoji : smallAA ? AAEmoji : largeAA ? largeAAEmoji : failEmoji,
+      note:
+        `${_textColor} and ${_backgroundColor} ` +
+        (smallAAA
+          ? 'has great contrast!'
+          : smallAA
+          ? 'is satisfactory for larger text'
+          : largeAA
+          ? 'has poor contrast'
+          : 'fail contrast guidelines'),
+    };
+    return {
+      textColor: _textColor,
+      backgroundColor: _backgroundColor,
+      contrast,
+      report,
+      smallAA,
+      smallAAA,
+      largeAA,
+      largeAAA,
+      fails,
+    };
+  }
+
+  const hexValuesAreValid = (colors: Array<ColorSettings>) => {
+    let valid = true;
+    colors?.forEach((color: ColorSettings) => {
+      valid = valid && hexValueIsValid(color.hex);
+    });
+
+    return valid;
+  };
+
+  return {
+    hexToRgb,
+    hexToTailwindRgbString,
+    rgbToHex,
+    generateA11yOnColor,
+    lighten,
+    darken,
+    generatePalette,
+    contrastLevels,
+    getLuminance,
+    destringRgb,
+    handleStringColor,
+    calculateRatio,
+    textPasses,
+    hexValueIsValid,
+    getPassReport,
+    hexValuesAreValid,
+    semanticNames
+  };
+};
+
+export { useColors };

package/src/utils/index.ts

@@ -1,4 +1,8 @@
+import type { ColorSettings, Palette, PassReport, Report, SemanticNames } from './colors/colors.service';
+import { useColors } from './colors/colors.service';
+import { usePlatform } from './platform/platform.service';
 import ThemeSwitcher from './theme/theme-switcher.vue';
 import { useTheme } from './theme/theme.service';
 
-export { ThemeSwitcher, useTheme };
+export { ThemeSwitcher, useColors, usePlatform, useTheme };
+export type { ColorSettings, Palette, PassReport, Report, SemanticNames };

package/src/utils/platform/platform.service.test.ts

@@ -1,16 +1,16 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, vi, test } from 'vitest';
 import { usePlatform } from './platform.service';
 
 const matchMediaMock = (matches: boolean) => vi.fn(() => ({ matches, onchange: vi.fn() }));
 
 describe('usePlatform', () => {
   describe('isBrowser', () => {
-    it('should return true when window is defined', () => {
+    test('should return true when window is defined', () => {
       const { isBrowser } = usePlatform();
       expect(isBrowser).toBe(true);
     });
 
-    it('should return false when window is not defined', () => {
+    test('should return false when window is not defined', () => {
       window = undefined as any;
       const { isBrowser } = usePlatform();
       expect(isBrowser).toBe(false);

package/src/utils/theme/callback.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, vi, test } from 'vitest';
 
 /**
  * No clue why, but when this test is added to theme.service.test.ts, it fails.
@@ -6,16 +6,20 @@ import { describe, expect, it, vi } from 'vitest';
  */
 
 describe('given there is a callback', () => {
-  it('should call the callback', async () => {
+  test('should call the callback', async () => {
     const { useTheme } = await import('./theme.service');
-    const { loadTheme } = useTheme();
+    const { applyTheme, themes } = useTheme();
 
     const callbackSpy = vi.fn();
     const callbackFunction = () => {
       callbackSpy();
     };
-    loadTheme('vuetiful', callbackFunction);
-    const link = document.querySelector('#theme') as HTMLLinkElement;
+
+    const newTheme = JSON.parse(JSON.stringify(themes[0]));
+    newTheme.name = 'new-theme';
+    applyTheme(newTheme, callbackFunction);
+
+    const link = document.querySelector('#vuetiful-theme') as HTMLLinkElement;
     // @ts-ignore
     link.onload();
 

package/src/utils/theme/remove.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, vi } from 'vitest';
+import { describe, expect, vi, test } from 'vitest';
 
 /**
  * No clue why, but when this test is added to theme.service.test.ts, it fails.
@@ -6,17 +6,19 @@ import { describe, expect, it, vi } from 'vitest';
  */
 
 describe('given there is no existing theme style tag', () => {
-  it('should create a new theme style tag', async () => {
+  test('should create a new theme style tag', async () => {
     const { useTheme } = await import('./theme.service');
-    const { loadTheme } = useTheme();
+    const { applyTheme, themes } = useTheme();
 
     const removeObject = { remove: () => {} };
     const removeSpy = vi.spyOn(removeObject, 'remove');
     vi.spyOn(window.document, 'getElementById').mockReturnValueOnce(removeObject as any);
 
-    loadTheme('vuetiful');
+    const newTheme = JSON.parse(JSON.stringify(themes[0]));
+    newTheme.name = 'new-theme';
+    applyTheme(newTheme);
 
-    const link = document.querySelector('#theme') as HTMLLinkElement;
+    const link = document.querySelector('#vuetiful-theme') as HTMLLinkElement;
     // @ts-ignore
     link.onload();
 

package/src/utils/theme/theme-switcher.vue

@@ -1,36 +1,3 @@
-<template>
-  <div class="vuetiful-theme-switcher">
-    <v-button :class="`vuetiful-theme-switcher__button ${classButton}`" @click="showPopup = !showPopup">
-      Theme
-    </v-button>
-
-    <div
-      v-if="showPopup"
-      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
-      :class="`${background} ${text} ${widthPopup} ${classList}`"
-    >
-      <section class="flex items-center justify-between">
-        <div class="text-lg">Mode</div>
-        <v-light-switch />
-      </section>
-      <nav
-        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
-        :class="`${heightList} ${classList}`"
-      >
-        <v-button
-          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
-          v-for="(theme, index) in themes"
-          :class="`${classListItem} ${chosenTheme === theme.name ? 'variant-filled-surface' : ''}`"
-          :key="index"
-          @click="loadTheme(theme.name)"
-        >
-          {{ theme.name }}
-        </v-button>
-      </nav>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { CssClasses, useTheme, VButton, VLightSwitch } from '@/index';
 import { onMounted, ref } from 'vue';
@@ -68,10 +35,40 @@ defineProps({
   },
 });
 
-const { initializeTheme, loadTheme, themes, chosenTheme } = useTheme();
+const { applyTheme, themes, chosenTheme } = useTheme();
 
 const showPopup = ref(false);
-onMounted(() => {
-  initializeTheme();
-});
 </script>
+
+<template>
+  <div class="vuetiful-theme-switcher">
+    <v-button :class="`vuetiful-theme-switcher__button ${classButton}`" @click="showPopup = !showPopup">
+      Theme
+    </v-button>
+
+    <div
+      v-if="showPopup"
+      class="vuetiful-theme-switcher__popup absolute z-10 mt-1 space-y-4 p-4 shadow-xl rounded-container-token"
+      :class="`${background} ${text} ${widthPopup} ${classList}`"
+    >
+      <section class="flex items-center justify-between">
+        <div class="text-lg">Mode</div>
+        <v-light-switch />
+      </section>
+      <nav
+        class="vuetiful-theme-switcher__popup-list -m-4 flex flex-col gap-4 overflow-y-auto p-4"
+        :class="`${heightList} ${classList}`"
+      >
+        <v-button
+          class="vuetiful-theme-switcher__popup-list-item h-full w-full p-2 text-center capitalize hover:cursor-pointer"
+          v-for="(theme, index) in themes"
+          :class="`${classListItem} ${chosenTheme.name === theme.name ? 'variant-filled-surface' : ''}`"
+          :key="index"
+          @click="applyTheme(theme)"
+        >
+          {{ theme.name }}
+        </v-button>
+      </nav>
+    </div>
+  </div>
+</template>