@data-fair/lib-common-types 1.14.0 → 1.15.0

package/package.json

@@ -1,12 +1,20 @@
 {
   "name": "@data-fair/lib-common-types",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Shared schemas and built type definitions in the data-fair stack.",
   "main": "index.js",
   "scripts": {
     "prepublishOnly": "cd .. && npm run prepublishOnly",
     "build": "cd .. && npm run build"
   },
+  "peerDependencies": {
+    "tinycolor2": "1"
+  },
+  "peerDependenciesMeta": {
+    "tinycolor2": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@data-fair/lib-validation": "^1.0.0",
     "ajv-formats": "3.0.1"

package/theme/index.d.ts

@@ -1,3 +1,4 @@
+import { type Colors, type Theme } from './.type/index.js';
 export * from './.type/index.js';
 export declare const defaultTheme: {
     logo: undefined;
@@ -127,3 +128,7 @@ export declare const defaultTheme: {
         'text-admin': string;
     };
 };
+export declare const getTextColorsCss: (colors: Colors, theme: string) => string;
+export declare const getReadableColor: (baseColor: string, bgColors: string[], darkMode: boolean, level: "AA" | "AAA") => string;
+export declare const getOnColor: (color: string) => string;
+export declare const fillTheme: (theme: Theme, defaultTheme: Theme) => Required<Pick<Theme, "darkColors" | "hcColors" | "hcDarkColors">> & Theme;

package/theme/index.js

@@ -1,3 +1,5 @@
+import clone from '@data-fair/lib-utils/clone.js'
+import tinycolor from 'tinycolor2'
 export * from './.type/index.js'
 export const defaultTheme = {
   logo: undefined,
@@ -129,3 +131,78 @@ export const defaultTheme = {
     'text-admin': '#FFCDD2'
   },
 }
+export const getTextColorsCss = (colors, theme) => {
+  let css = ''
+  for (const color of ['primary', 'secondary', 'accent', 'error', 'info', 'success', 'warning', 'admin']) {
+    const key = `text-${color}`
+    if (colors[key]) {
+      css += `
+.v-theme--${theme} .text-${color}:not(.v-btn--disabled) { color: ${colors[key]}!important; }`
+    }
+  }
+  return css
+}
+export const getReadableColor = (baseColor, bgColors, darkMode, level) => {
+  const c = tinycolor(baseColor)
+  while (!bgColors.every(bgColor => tinycolor.isReadable(c, bgColor, { level, size: 'small' }))) {
+    if (darkMode) {
+      if (c.getBrightness() === 255) { break }
+      c.brighten(1)
+    } else {
+      if (c.getBrightness() === 0) { break }
+      c.darken(1)
+    }
+  }
+  return c.toHexString()
+}
+export const getOnColor = (color) => {
+  // priority to white text if it is readable
+  if (tinycolor.isReadable(color, '#FFFFFF', { level: 'AA', size: 'small' })) { return '#FFFFFF' }
+  return tinycolor.mostReadable(color, ['#000000', '#FFFFFF']).toHexString()
+}
+export const fillTheme = (theme, defaultTheme) => {
+  const fullTheme = clone(theme)
+  if (fullTheme.assistedMode && fullTheme.assistedModeColors) {
+    if (!defaultTheme.darkColors) { throw new Error('darkColors is missing in default theme') }
+    if (!defaultTheme.hcColors) { throw new Error('hcColors is missing in default theme') }
+    if (!defaultTheme.hcDarkColors) { throw new Error('hcDarkColors is missing in default theme') }
+    fullTheme.assistedModeColors.primary = fullTheme.assistedModeColors.primary ?? fullTheme.colors.primary
+    fullTheme.assistedModeColors.secondary = fullTheme.assistedModeColors.secondary ?? fullTheme.colors.secondary
+    fullTheme.assistedModeColors.accent = fullTheme.assistedModeColors.accent ?? fullTheme.colors.accent
+    fullTheme.colors = clone(defaultTheme.colors)
+    fullTheme.darkColors = clone(defaultTheme.darkColors)
+    fullTheme.hcColors = clone(defaultTheme.hcColors)
+    fullTheme.hcDarkColors = clone(defaultTheme.hcDarkColors)
+    const customColors = {
+      primary: fullTheme.assistedModeColors.primary,
+      secondary: fullTheme.assistedModeColors.secondary,
+      accent: fullTheme.assistedModeColors.accent,
+      'on-primary': getOnColor(fullTheme.assistedModeColors.primary),
+      'on-secondary': getOnColor(fullTheme.assistedModeColors.secondary),
+      'on-accent': getOnColor(fullTheme.assistedModeColors.accent)
+    }
+    Object.assign(fullTheme.colors, customColors)
+    Object.assign(fullTheme.darkColors, customColors)
+    Object.assign(fullTheme.hcColors, customColors)
+    Object.assign(fullTheme.hcDarkColors, customColors)
+    fullTheme.colors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
+    fullTheme.colors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
+    fullTheme.colors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.colors.background, fullTheme.colors.surface], false, 'AA')
+    fullTheme.darkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
+    fullTheme.darkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
+    fullTheme.darkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.darkColors.background, fullTheme.darkColors.surface], true, 'AA')
+    fullTheme.hcColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
+    fullTheme.hcColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
+    fullTheme.hcColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcColors.background, fullTheme.hcColors.surface], false, 'AAA')
+    fullTheme.hcDarkColors['text-primary'] = getReadableColor(fullTheme.colors.primary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
+    fullTheme.hcDarkColors['text-secondary'] = getReadableColor(fullTheme.colors.secondary, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
+    fullTheme.hcDarkColors['text-accent'] = getReadableColor(fullTheme.colors.accent, [fullTheme.hcDarkColors.background, fullTheme.hcDarkColors.surface], true, 'AAA')
+  } else {
+    fullTheme.assistedModeColors = {
+      primary: fullTheme.colors.primary,
+      secondary: fullTheme.colors.secondary,
+      accent: fullTheme.colors.accent,
+    }
+  }
+  return fullTheme
+}

package/theme/schema.d.ts

@@ -5,10 +5,16 @@ declare const _default: {
     title: string;
     required: string[];
     layout: (string | {
+        key: string;
+        if: string;
+        cols?: undefined;
+        comp?: undefined;
+        children?: undefined;
+    } | {
         key: string;
         cols: number;
+        if: string;
         comp?: undefined;
-        if?: undefined;
         children?: undefined;
     } | {
         comp: string;

package/theme/schema.js

@@ -5,9 +5,9 @@ export default {
   title: 'Thème',
   required: ['colors'],
   layout: [
-    'logo',
-    { key: 'bodyFontFamilyCss', cols: 6 },
-    { key: 'headingFontFamilyCss', cols: 6 },
+    { key: 'logo', if: '!context.simplifiedTheme' },
+    { key: 'bodyFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
+    { key: 'headingFontFamilyCss', cols: 6, if: '!context.simplifiedTheme' },
     'assistedMode',
     {
       comp: 'tabs',