@rotki/ui-library 2.11.0 → 2.11.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
import { createSharedComposable, useColorMode } from "@vueuse/core";
|
|
2
|
-
import { ref,
|
|
2
|
+
import { ref, computed, watch } from "vue";
|
|
3
3
|
import { defaultTheme, ThemeMode } from "../types/theme.js";
|
|
4
|
-
import {
|
|
4
|
+
import { get, set } from "@vueuse/shared";
|
|
5
5
|
const config = ref({ ...defaultTheme });
|
|
6
6
|
const useRotkiTheme = createSharedComposable(() => {
|
|
7
|
-
const { state, store } = useColorMode(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
set(attributeState, newState);
|
|
7
|
+
const { state, store } = useColorMode({
|
|
8
|
+
onChanged(mode, defaultHandler) {
|
|
9
|
+
defaultHandler(mode);
|
|
10
|
+
document.documentElement.dataset.theme = mode;
|
|
11
|
+
}
|
|
13
12
|
});
|
|
14
13
|
const isAutoControlled = computed(() => get(store) === ThemeMode.auto);
|
|
15
14
|
const isLight = computed(() => get(state) === ThemeMode.light);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n type ColorIntensity,\n defaultTheme,\n type InitThemeOptions,\n type ThemeConfig,\n type ThemeContent,\n type ThemeData,\n ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n const { state, store } = useColorMode<ThemeMode>(
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../src/composables/theme.ts"],"sourcesContent":["import { useColorMode } from '@vueuse/core';\nimport { computed, type ComputedRef, type Ref, ref } from 'vue';\nimport {\n type ColorIntensity,\n defaultTheme,\n type InitThemeOptions,\n type ThemeConfig,\n type ThemeContent,\n type ThemeData,\n ThemeMode,\n} from '@/types/theme';\n\nconst config: Ref<ThemeConfig> = ref({ ...defaultTheme });\n\n/**\n * Theme manager\n * @returns {ThemeContent}\n */\nexport const useRotkiTheme = createSharedComposable<() => ThemeContent>(() => {\n const { state, store } = useColorMode<ThemeMode>({\n onChanged(mode, defaultHandler) {\n defaultHandler(mode);\n document.documentElement.dataset.theme = mode;\n },\n });\n\n /**\n * whether the current theme is controlled by system or user\n * @type {ComputedRef<boolean>}\n */\n const isAutoControlled: ComputedRef<boolean> = computed(() => get(store) === ThemeMode.auto);\n\n /**\n * truthy for light theme\n * @type {ComputedRef<boolean>}\n */\n const isLight: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.light);\n\n /**\n * truthy for dark theme\n * @type {ComputedRef<boolean>}\n */\n const isDark: ComputedRef<boolean> = computed(() => get(state) === ThemeMode.dark);\n\n /**\n * current theme based on light or dark mode\n * @type {ComputedRef<ThemeData>}\n */\n const theme: ComputedRef<ThemeData> = computed(() => {\n if (get(isLight))\n return get(config).light;\n\n return get(config).dark;\n });\n\n /**\n * switch theme through dark/light/auto modes\n * @param {ThemeMode} mode\n */\n const switchThemeScheme = (mode: ThemeMode): void => {\n set(store, mode || ThemeMode.auto);\n };\n\n /**\n * toggle between auto|light|dark\n */\n const toggleThemeMode = (): void => {\n if (get(isAutoControlled))\n switchThemeScheme(ThemeMode.light);\n else if (get(isLight))\n switchThemeScheme(ThemeMode.dark);\n else if (get(isDark))\n switchThemeScheme(ThemeMode.auto);\n };\n\n /**\n * sets the configuration for the theme\n * @param {ThemeConfig} newConfig\n */\n const setThemeConfig = (newConfig: ThemeConfig): void => {\n set(config, newConfig);\n };\n\n /**\n * theme initializer, must be called once from the app's entry\n * @param {InitThemeOptions} options\n */\n const init = (options: InitThemeOptions): void => {\n switchThemeScheme(options.mode ?? ThemeMode.auto);\n setThemeConfig(options.config ?? { ...defaultTheme });\n\n if (typeof window !== 'undefined') {\n watch([isLight, theme], ([isLight, theme]) => {\n const styleVariables = new Map();\n\n // Compute context variables\n Object.entries(theme).forEach(([context, contextObject]: [string, ColorIntensity]) => {\n styleVariables.set(`--rui-${context}-darker`, contextObject.darker);\n styleVariables.set(`--rui-${context}-lighter`, contextObject.lighter);\n styleVariables.set(`--rui-${context}-main`, contextObject.DEFAULT);\n });\n\n // Determine the theme mode\n const state = isLight ? ThemeMode.light : ThemeMode.dark;\n\n // Add text color variables\n styleVariables.set('--rui-text-disabled', `var(--rui-${state}-text-disabled)`);\n styleVariables.set('--rui-text-primary', `var(--rui-${state}-text-primary)`);\n styleVariables.set('--rui-text-secondary', `var(--rui-${state}-text-secondary)`);\n\n // Apply all style variables in one operation\n const rootStyle = document.documentElement.style;\n styleVariables.forEach((value, variableName) => {\n rootStyle.setProperty(variableName, value);\n });\n }, { immediate: true });\n }\n };\n\n return {\n config,\n init,\n isAutoControlled,\n isDark,\n isLight,\n setThemeConfig,\n state,\n store,\n switchThemeScheme,\n theme,\n toggleThemeMode,\n };\n});\n"],"names":["isLight","theme","state"],"mappings":";;;;AAYA,MAAM,SAA2B,IAAI,EAAE,GAAG,cAAc;AAMjD,MAAM,gBAAgB,uBAA2C,MAAM;AAC5E,QAAM,EAAE,OAAO,MAAA,IAAU,aAAwB;AAAA,IAC/C,UAAU,MAAM,gBAAgB;AAC9B,qBAAe,IAAI;AACnB,eAAS,gBAAgB,QAAQ,QAAQ;AAAA,IAC3C;AAAA,EAAA,CACD;AAMD,QAAM,mBAAyC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAM3F,QAAM,UAAgC,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,KAAK;AAMnF,QAAM,SAA+B,SAAS,MAAM,IAAI,KAAK,MAAM,UAAU,IAAI;AAMjF,QAAM,QAAgC,SAAS,MAAM;AACnD,QAAI,IAAI,OAAO;AACb,aAAO,IAAI,MAAM,EAAE;AAErB,WAAO,IAAI,MAAM,EAAE;AAAA,EACrB,CAAC;AAMD,QAAM,oBAAoB,CAAC,SAA0B;AACnD,QAAI,OAAO,QAAQ,UAAU,IAAI;AAAA,EACnC;AAKA,QAAM,kBAAkB,MAAY;AAClC,QAAI,IAAI,gBAAgB;AACtB,wBAAkB,UAAU,KAAK;AAAA,aAC1B,IAAI,OAAO;AAClB,wBAAkB,UAAU,IAAI;AAAA,aACzB,IAAI,MAAM;AACjB,wBAAkB,UAAU,IAAI;AAAA,EACpC;AAMA,QAAM,iBAAiB,CAAC,cAAiC;AACvD,QAAI,QAAQ,SAAS;AAAA,EACvB;AAMA,QAAM,OAAO,CAAC,YAAoC;AAChD,sBAAkB,QAAQ,QAAQ,UAAU,IAAI;AAChD,mBAAe,QAAQ,UAAU,EAAE,GAAG,cAAc;AAEpD,QAAI,OAAO,WAAW,aAAa;AACjC,YAAM,CAAC,SAAS,KAAK,GAAG,CAAC,CAACA,UAASC,MAAK,MAAM;AAC5C,cAAM,qCAAqB,IAAA;AAG3B,eAAO,QAAQA,MAAK,EAAE,QAAQ,CAAC,CAAC,SAAS,aAAa,MAAgC;AACpF,yBAAe,IAAI,SAAS,OAAO,WAAW,cAAc,MAAM;AAClE,yBAAe,IAAI,SAAS,OAAO,YAAY,cAAc,OAAO;AACpE,yBAAe,IAAI,SAAS,OAAO,SAAS,cAAc,OAAO;AAAA,QACnE,CAAC;AAGD,cAAMC,SAAQF,WAAU,UAAU,QAAQ,UAAU;AAGpD,uBAAe,IAAI,uBAAuB,aAAaE,MAAK,iBAAiB;AAC7E,uBAAe,IAAI,sBAAsB,aAAaA,MAAK,gBAAgB;AAC3E,uBAAe,IAAI,wBAAwB,aAAaA,MAAK,kBAAkB;AAG/E,cAAM,YAAY,SAAS,gBAAgB;AAC3C,uBAAe,QAAQ,CAAC,OAAO,iBAAiB;AAC9C,oBAAU,YAAY,cAAc,KAAK;AAAA,QAC3C,CAAC;AAAA,MACH,GAAG,EAAE,WAAW,MAAM;AAAA,IACxB;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ,CAAC;"}
|
package/dist/types/theme.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { BasicColorSchema } from '@vueuse/core';
|
|
1
|
+
import type { BasicColorMode, BasicColorSchema } from '@vueuse/core';
|
|
2
2
|
import type { ComputedRef, Ref } from 'vue';
|
|
3
3
|
import type { GeneratedIcon } from '../types/icons';
|
|
4
4
|
export declare const ThemeMode: {
|
|
@@ -25,16 +25,16 @@ export interface InitThemeOptions {
|
|
|
25
25
|
icons?: GeneratedIcon[];
|
|
26
26
|
}
|
|
27
27
|
export interface ThemeContent {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
state: ComputedRef<ThemeMode | BasicColorSchema>;
|
|
31
|
-
config: Ref<ThemeConfig | undefined>;
|
|
28
|
+
config: Ref<ThemeConfig>;
|
|
29
|
+
init: (options: InitThemeOptions) => void;
|
|
32
30
|
isAutoControlled: ComputedRef<boolean>;
|
|
33
31
|
isDark: ComputedRef<boolean>;
|
|
34
32
|
isLight: ComputedRef<boolean>;
|
|
35
|
-
|
|
33
|
+
setThemeConfig: (newConfig: ThemeConfig) => void;
|
|
34
|
+
state: ComputedRef<ThemeMode | BasicColorMode>;
|
|
35
|
+
store: Ref<ThemeMode | BasicColorSchema>;
|
|
36
36
|
switchThemeScheme: (mode: ThemeMode) => void;
|
|
37
|
+
theme: ComputedRef<ThemeData>;
|
|
37
38
|
toggleThemeMode: () => void;
|
|
38
|
-
setThemeConfig: (newConfig: ThemeConfig) => void;
|
|
39
39
|
}
|
|
40
40
|
export declare const defaultTheme: ThemeConfig;
|
package/dist/types/theme.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sources":["../../src/types/theme.ts"],"sourcesContent":["import type { BasicColorSchema } from '@vueuse/core';\nimport type { ComputedRef, Ref } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport { contextColors } from '@/consts/colors';\n\nexport const ThemeMode = {\n auto: 'auto',\n dark: 'dark',\n light: 'light',\n} as const;\n\nexport type ThemeMode = (typeof ThemeMode)[keyof typeof ThemeMode];\n\nexport interface ColorIntensity {\n DEFAULT: string;\n lighter: string;\n darker: string;\n}\n\nexport type ThemeData = {\n [key in string]: ColorIntensity;\n};\n\nexport interface ThemeConfig {\n light: ThemeData;\n dark: ThemeData;\n}\n\nexport interface InitThemeOptions {\n mode?: ThemeMode;\n config?: ThemeConfig;\n icons?: GeneratedIcon[];\n}\n\nexport interface ThemeContent {\n
|
|
1
|
+
{"version":3,"file":"theme.js","sources":["../../src/types/theme.ts"],"sourcesContent":["import type { BasicColorMode, BasicColorSchema } from '@vueuse/core';\nimport type { ComputedRef, Ref } from 'vue';\nimport type { GeneratedIcon } from '@/types/icons';\nimport { contextColors } from '@/consts/colors';\n\nexport const ThemeMode = {\n auto: 'auto',\n dark: 'dark',\n light: 'light',\n} as const;\n\nexport type ThemeMode = (typeof ThemeMode)[keyof typeof ThemeMode];\n\nexport interface ColorIntensity {\n DEFAULT: string;\n lighter: string;\n darker: string;\n}\n\nexport type ThemeData = {\n [key in string]: ColorIntensity;\n};\n\nexport interface ThemeConfig {\n light: ThemeData;\n dark: ThemeData;\n}\n\nexport interface InitThemeOptions {\n mode?: ThemeMode;\n config?: ThemeConfig;\n icons?: GeneratedIcon[];\n}\n\nexport interface ThemeContent {\n config: Ref<ThemeConfig>;\n init: (options: InitThemeOptions) => void;\n isAutoControlled: ComputedRef<boolean>;\n isDark: ComputedRef<boolean>;\n isLight: ComputedRef<boolean>;\n setThemeConfig: (newConfig: ThemeConfig) => void;\n state: ComputedRef<ThemeMode | BasicColorMode>;\n store: Ref<ThemeMode | BasicColorSchema>;\n switchThemeScheme: (mode: ThemeMode) => void;\n theme: ComputedRef<ThemeData>;\n toggleThemeMode: () => void;\n}\n\nfunction createDefaultTheme(theme: 'light' | 'dark') {\n return Object.fromEntries(\n contextColors.map(color => [\n color,\n {\n darker: `var(--rui-${theme}-${color}-darker)`,\n DEFAULT: `var(--rui-${theme}-${color}-main)`,\n lighter: `var(--rui-${theme}-${color}-lighter)`,\n },\n ]),\n );\n}\n\nexport const defaultTheme: ThemeConfig = {\n dark: createDefaultTheme('dark'),\n light: createDefaultTheme('light'),\n};\n"],"names":[],"mappings":";AAKO,MAAM,YAAY;AAAA,EACvB,MAAM;AAAA,EACN,MAAM;AAAA,EACN,OAAO;AACT;AAuCA,SAAS,mBAAmB,OAAyB;AACnD,SAAO,OAAO;AAAA,IACZ,cAAc,IAAI,CAAA,UAAS;AAAA,MACzB;AAAA,MACA;AAAA,QACE,QAAQ,aAAa,KAAK,IAAI,KAAK;AAAA,QACnC,SAAS,aAAa,KAAK,IAAI,KAAK;AAAA,QACpC,SAAS,aAAa,KAAK,IAAI,KAAK;AAAA,MAAA;AAAA,IACtC,CACD;AAAA,EAAA;AAEL;AAEO,MAAM,eAA4B;AAAA,EACvC,MAAM,mBAAmB,MAAM;AAAA,EAC/B,OAAO,mBAAmB,OAAO;AACnC;"}
|
package/dist/web-types.json
CHANGED