@code-coaching/vuetiful 0.23.2 → 0.24.0

package/dist/types/components/atoms/VLightSwitch.vue.d.ts

@@ -43,8 +43,12 @@ declare const _default: import("vue").DefineComponent<{
     };
     onToggleHandler: () => void;
     onKeyDown: (event: KeyboardEvent) => void;
-    currentMode: Readonly<import("vue").Ref<boolean>>;
+    chosenMode: import("vue").Ref<string>;
     iconFill: ComputedRef<string>;
+    MODE: {
+        LIGHT: string;
+        DARK: string;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     bgLight: {
         type: () => CssClasses;

package/dist/types/services/dark-mode.service.d.ts

@@ -1,19 +1,19 @@
-import { Ref } from 'vue';
+declare const MODE: {
+    LIGHT: string;
+    DARK: string;
+};
+export declare type Mode = (typeof MODE)[keyof typeof MODE];
 declare const useDarkMode: () => {
-    modeOsPrefers: Readonly<Ref<boolean>>;
-    modeUserPrefers: Readonly<Ref<boolean | undefined>>;
-    currentMode: Readonly<Ref<boolean>>;
-    isDark: Readonly<Ref<boolean>>;
-    getModeOsPrefers: () => boolean;
-    getModeUserPrefers: () => boolean | undefined;
-    getModeAutoPrefers: () => boolean;
-    setModeUserPrefers: (value: boolean) => void;
-    setModeCurrent: (value: boolean) => void;
-    autoModeWatcher: () => void;
+    chosenMode: import("vue").Ref<string>;
+    isDark: Readonly<import("vue").Ref<boolean>>;
     initializeMode: () => void;
+    applyMode: (value: Mode) => void;
+    autoModeWatcher: () => void;
+    applyModeSSR: (html: string, mode: Mode) => string;
+    getModeFromCookie: (cookies: string) => string;
     MODE: {
-        LIGHT: boolean;
-        DARK: boolean;
+        LIGHT: string;
+        DARK: string;
     };
 };
 export { useDarkMode };

package/dist/types/services/index.d.ts

@@ -1,7 +1,7 @@
-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/dist/types/utils/colors/colors.service.d.ts

@@ -0,0 +1,69 @@
+declare type ContrastLevel = 'AA' | 'AAA';
+declare 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 declare type Palette = {
+    [key: number]: {
+        hex: string;
+        rgb: string;
+        on: string;
+    };
+};
+export declare const semanticNames: readonly ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
+export declare type SemanticNames = (typeof semanticNames)[number];
+export interface ColorSettings {
+    key: SemanticNames;
+    label: string;
+    hex: string;
+    rgb: string;
+    on: string;
+}
+declare type Rgb = {
+    r: number;
+    g: number;
+    b: number;
+};
+declare const useColors: () => {
+    hexToRgb: (hex: string) => Rgb | null;
+    hexToTailwindRgbString: (hex: string) => string;
+    rgbToHex: (r: number, g: number, b: number) => string;
+    generateA11yOnColor: (hex: string) => '255 255 255' | '0 0 0';
+    lighten: (hex: string, intensity: number) => string;
+    darken: (hex: string, intensity: number) => string;
+    generatePalette: (baseColor: string) => Palette;
+    contrastLevels: Record<ContrastSize, {
+        AA: number;
+        AAA: number;
+    }>;
+    getLuminance: {
+        (r: Rgb): number;
+        (r: number, g: number, b: number): number;
+    };
+    destringRgb: (rgbString: string) => Rgb;
+    handleStringColor: {
+        (colorString: string): Rgb;
+        (colorString: string, returnType: 'rgb'): Rgb;
+        (colorString: string, returnType: 'hex'): string;
+        (colorString: string, returnType?: "rgb" | "hex" | undefined): string | Rgb;
+    };
+    calculateRatio: (luminance1: string | number, luminance2: string | number) => number;
+    textPasses: (textColor: string, backgroundColor: string, size: ContrastSize, level: ContrastLevel) => boolean;
+    hexValueIsValid: (textColor: string) => boolean;
+    getPassReport: (textColor: string, backgroundColor: string) => PassReport;
+    hexValuesAreValid: (colors: Array<ColorSettings>) => boolean;
+    semanticNames: readonly ["primary", "secondary", "tertiary", "success", "warning", "error", "surface"];
+};
+export { useColors };

package/dist/types/utils/index.d.ts

@@ -1,3 +1,7 @@
+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/dist/types/utils/theme/theme.service.d.ts

@@ -1,28 +1,13 @@
 import { Ref } from 'vue';
-export interface Theme {
-    name: string;
-    url: string;
-}
+import { Theme } from './themes';
 declare const useTheme: () => {
-    themes: Readonly<Ref<readonly {
-        readonly name: string;
-        readonly url: string;
-    }[]>>;
-    chosenTheme: Readonly<Ref<string>>;
+    chosenTheme: Ref<Theme>;
+    themes: Theme[];
+    applyThemeSSR: (html: string, theme: Theme) => string;
+    applyTheme: (theme: Theme, callback?: Function | undefined) => void;
+    getThemeFromCookie: (cookies: string) => Theme;
     initializeTheme: (callback?: Function | undefined) => void;
-    loadTheme: (themeName: string, callback?: Function | undefined) => void;
-    saveThemeToStorage: (name: string) => void;
-    THEMES: {
-        VUETIFUL: string;
-        ROCKET: string;
-        SAHARA: string;
-        SEAFOAM: string;
-        SEASONAL: string;
-        SKELETON: string;
-        VINTAGE: string;
-    };
-    overwriteThemes: (newThemes: Array<Theme>) => void;
-    registerAllBuiltInThemes: () => Array<Theme>;
-    registerTheme: (name: string, url: string) => Theme;
+    changeDataTheme: (name: string) => void;
+    registerTheme: (theme: Theme) => void;
 };
 export { useTheme };

package/dist/types/utils/theme/themes.d.ts

@@ -0,0 +1,35 @@
+import { ColorSettings } from '../colors/colors.service';
+export declare const themes: Array<Theme>;
+export interface Theme {
+    name: string;
+    gradients: Gradients;
+    colors: {
+        primary: ColorSettings;
+        secondary: ColorSettings;
+        tertiary: ColorSettings;
+        success: ColorSettings;
+        warning: ColorSettings;
+        error: ColorSettings;
+        surface: ColorSettings;
+    };
+    fonts: Fonts;
+    textColorLight: string;
+    textColorDark: string;
+    roundedBase: string;
+    roundedContainer: string;
+    borderBase: string;
+    customCss: string;
+    [key: string]: any;
+}
+export interface Fonts {
+    base: string;
+    customBase: string;
+    baseImports: string;
+    headings: string;
+    customHeadings: string;
+    headingImports: string;
+}
+export interface Gradients {
+    light: string;
+    dark: string;
+}