@fibery/ui-kit 1.1.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "main": "index.ts",
   "private": false,
   "files": [
@@ -8,6 +8,7 @@
     "src/Button.d.ts",
     "src/Button.js",
     "src/designSystem.ts",
+    "src/theme-styles.ts",
     "src/theme-settings.ts",
     "src/media-query-utils.ts",
     "src/create-inline-theme.ts",

package/src/Pallete.ts

@@ -239,3 +239,27 @@ export const whiteA = {
   whiteA11: "hsla(0, 0%, 100%, 0.592)",
   whiteA12: "hsla(0, 0%, 100%, 0.923)",
 } as const;
+
+export const opacity = {
+  opacity100: 1,
+  opacity95: 0.95,
+  opacity90: 0.9,
+  opacity85: 0.85,
+  opacity80: 0.8,
+  opacity75: 0.75,
+  opacity70: 0.7,
+  opacity65: 0.65,
+  opacity60: 0.6,
+  opacity55: 0.55,
+  opacity50: 0.5,
+  opacity45: 0.45,
+  opacity40: 0.4,
+  opacity35: 0.35,
+  opacity30: 0.3,
+  opacity25: 0.25,
+  opacity20: 0.2,
+  opacity15: 0.15,
+  opacity10: 0.1,
+  opacity5: 0.05,
+  opacity0: 0,
+} as const;

package/src/ThemeProvider.tsx

@@ -1,6 +1,7 @@
 import invariant from "invariant";
+import {themeStyles} from "@fibery/ui-kit/src/theme-styles";
 import {createContext, ReactNode, useContext, useEffect, useState} from "react";
-import {colors, createInlineTheme, getThemeColors, ThemeColors} from "./designSystem";
+import {colors, getThemeColors, ThemeColors} from "./designSystem";
 import {
   subscribeOnThemeMenuPreferenceChange,
   subscribeOnThemeModeChange,
@@ -50,13 +51,6 @@ export function useThemeMenuPreference(): ThemeMenuPreference {
   return themeMenuPreference;
 }
 
-export function applyThemeToRoot(theme: ThemeColors) {
-  const inlineTheme = createInlineTheme(theme);
-  Object.entries(inlineTheme).forEach(([p, v]) => {
-    document.body.style.setProperty(p, v);
-  });
-}
-
 export function RootThemeProvider({
   initialThemeMode,
   initialPreference,
@@ -90,6 +84,7 @@ export function RootThemeProvider({
     const documentElement = document.documentElement;
     documentElement.classList.remove(darkThemeClassName);
     documentElement.classList.remove(lightThemeAndDarkMenuClassName);
+    documentElement.classList.add(themeStyles);
     if (themeMode === "dark") {
       documentElement.classList.add(darkThemeClassName);
       colorScheme = "dark";
@@ -105,9 +100,7 @@ export function RootThemeProvider({
       documentElement.classList.remove(lightThemeAndDarkMenuClassName);
     };
   }, [themeMode]);
-  useEffect(() => {
-    applyThemeToRoot(theme);
-  }, [theme]);
+
   return (
     <FiberyThemePreferenceContext.Provider value={themePreference}>
       <FiberyThemeMenuPreferenceContext.Provider value={themeMenuPreference}>

package/src/create-inline-theme.ts

@@ -1,55 +1,65 @@
-export function createInlineTheme<T extends Record<string, unknown>>(themes: T): Record<string, string> {
+declare const VAR_THEME_PREFIX: string | undefined;
+export const varPrefix = typeof VAR_THEME_PREFIX === "string" ? VAR_THEME_PREFIX : "fibery";
+
+export function createInlineTheme<T extends Record<string, unknown>>(
+  themes: T,
+  rejectKeys: Array<string>
+): Record<string, string> {
   return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
+    if (rejectKeys.includes(key)) {
+      return inlineTheme;
+    }
+
     if (key === "opacity") {
       Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
-        inlineTheme[`--fibery-opacity-${opacityKey}`] = opacityValue;
+        inlineTheme[`--${varPrefix}-opacity-${opacityKey}`] = opacityValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "stateColors") {
       Object.entries(themes.stateColors as Record<string, string>).forEach(([stateColorKey, stateColorValue]) => {
-        inlineTheme[`--fibery-state-colors-${stateColorKey}`] = stateColorValue;
+        inlineTheme[`--${varPrefix}-state-colors-${stateColorKey}`] = stateColorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "brandColors") {
       Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
-        inlineTheme[`--fibery-brand-colors-${brandColorKey}`] = brandColorValue;
+        inlineTheme[`--${varPrefix}-brand-colors-${brandColorKey}`] = brandColorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "shades") {
       Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
-        inlineTheme[`--fibery-shades-${shadeKey}`] = shadeValue;
+        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "lights") {
       Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
-        inlineTheme[`--fibery-lights-${lightKey}`] = lightValue;
+        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "separators") {
       Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--fibery-separator-${separatorKey}`] = separatorValue;
+        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
       }, "");
 
       return inlineTheme;
     }
     if (key === "inversedSeparators") {
       Object.entries(themes.inversedSeparators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--fibery-inversed-separators-${separatorKey}`] = separatorValue;
+        inlineTheme[`--${varPrefix}-inversed-separators-${separatorKey}`] = separatorValue;
       }, "");
 
       return inlineTheme;
     }
-    inlineTheme[`--fibery-color-${key}`] = value as string;
+    inlineTheme[`--${varPrefix}-color-${key}`] = value as string;
     return inlineTheme;
   }, {});
 }

package/src/designSystem.ts

@@ -4,11 +4,11 @@ import {ThemeMode} from "./theme-settings";
 import ColorHash from "color-hash";
 import {
   blackA,
+  blue,
+  blueDark,
   indigo,
   indigoDark,
   red,
-  blue,
-  blueDark,
   redDark,
   sage,
   slate,
@@ -18,7 +18,7 @@ import {
   yellowDark,
 } from "./Pallete";
 import _ from "lodash";
-import {createInlineTheme as createInlineStyles} from "./create-inline-theme";
+import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 
 export const typeSizes = [28, 24, 18, 16, 14, 12, 10, 8] as const;
 
@@ -149,15 +149,17 @@ const lightColors = {
   entityNodeBorder: `1px solid ${getOpacities(slateDark.slate3).opacity30}`,
   entityNodeHoverColor: slateDark.slate7,
   entityNodeBorderHover: `1px solid ${getOpacities(slate.slate11).opacity80}`,
-  entityNodeBgColor: getOpacities(slate.slate3).opacity80,
+  entityNodeBgColor: slate.slate2,
   shortcutTextColor: slate.slate9,
   shortcutBorderColor: `1px solid ${getOpacities(slate.slate8).opacity20}`,
   inputBgColor: whiteA.whiteA0,
-  inputDisabledBgColor: slate.slate2,
+  inputDisabledBgColor: getOpacities(slate.slate6).opacity30,
   inputDisabledBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity20}`,
   inputCopyBgColor: slate.slate3,
   inputBorderColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity70}`,
-  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate6).opacity100}`,
+  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slate.slate7).opacity100}`,
+  inputBorderFocusColor: `0 0 0 1px  ${getOpacities(slate.slate8).opacity100}`,
+  inputBorderBlendMode: "multiply",
   inputPlaceholderTextColor: slate.slate10,
   buttonColor: slate.slate10,
   buttonPrimaryTextColor: slate.slate2,
@@ -195,6 +197,7 @@ const lightColors = {
   entityCardShadowHover: `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${
     getOpacities(slate.slate10).opacity20
   }`,
+  relationViewBgColor: slate.slate2,
   unitBg: slate.slate3,
   unitBgHover: slate.slate4,
   badgeBgColor: getOpacities(slate.slate10).opacity20,
@@ -294,15 +297,17 @@ const darkColors = {
   entityNodeBorder: `1px solid ${getOpacities(slate.slate8).opacity40}`,
   entityNodeHoverColor: slate.slate7,
   entityNodeBorderHover: `1px solid ${getOpacities(slate.slate7).opacity80}`,
-  entityNodeBgColor: getOpacities(slateDark.slate6).opacity80,
+  entityNodeBgColor: slateDark.slate3,
   shortcutTextColor: slateDark.slate11,
   shortcutBorderColor: `1px solid ${getOpacities(slateDark.slate10).opacity20}`,
   inputBgColor: slateDark.slate2,
-  inputDisabledBgColor: slateDark.slate3,
+  inputDisabledBgColor: getOpacities(slateDark.slate6).opacity30,
   inputDisabledBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity20}`,
   inputCopyBgColor: slateDark.slate4,
   inputBorderColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
-  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity70}`,
+  inputBorderHoverColor: `0 0 0 1px ${getOpacities(slateDark.slate8).opacity100}`,
+  inputBorderFocusColor: `0 0 0 1px ${getOpacities(slateDark.slate9).opacity100}`,
+  inputBorderBlendMode: "lighten",
   inputPlaceholderTextColor: slate.slate10,
   buttonColor: slateDark.slate10,
   buttonPrimaryTextColor: slate.slate6,
@@ -336,6 +341,7 @@ const darkColors = {
   entityCardShadowHover: `0 0 0 1px ${getOpacities(slateDark.slate2).opacity10}, 0 2px 4px -4px ${
     getOpacities(slateDark.slate2).opacity20
   }`,
+  relationViewBgColor: slateDark.slate3,
   unitBg: slateDark.slate6,
   unitBgHover: slateDark.slate7,
   badgeBgColor: getOpacities(slate.slate10).opacity20,
@@ -439,7 +445,7 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
     boardBg: boardBg.hex(),
     boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
-    detailsBg: chroma(color).alpha(0.6).luminance(0.85).hex(),
+    detailsBg: chroma(color).alpha(0.5).luminance(0.85).hex(),
     focus: chroma(color).alpha(0.25).css(),
     separator: chroma(color).alpha(0.3).css(),
   };
@@ -452,7 +458,7 @@ function getTypeColors(themeColor: string, theme: ThemeMode) {
     boardBg: boardBg.hex(),
     boardBgOverlay: boardBg.alpha(0.8).css(),
     headerBg: chroma(color).luminance(0.7).desaturate(0.5).set("hsl.h", "+2").css(),
-    detailsBg: chroma(color).alpha(0.03).luminance(0.8).darken(0.1).hex(),
+    detailsBg: chroma(color).alpha(0.03).luminance(0.8).desaturate(0.8).darken(0.1).hex(),
     focus: chroma(color).alpha(0.25).css(),
     separator: chroma(color).alpha(0.3).css(),
   };
@@ -679,45 +685,52 @@ export const getObjectColorMemoized = _.memoize((name) => {
   return colorHash.hex(name);
 });
 
-export const themeVars = Object.keys(getThemeColors("#FFFFFF", "light")).reduce((vars, key) => {
+export const themeVars = Object.keys(getThemeColors(brandColors.green, "light")).reduce((vars, key) => {
   if (key === "opacity") {
     vars[key] = Object.fromEntries(
-      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--fibery-opacity-${opacityKey})`])
+      Object.keys(opacity).map((opacityKey) => [opacityKey, `var(--${varPrefix}-opacity-${opacityKey})`])
     );
   } else if (key === "stateColors") {
     vars[key] = Object.fromEntries(
-      Object.keys(stateColors).map((stateColorKey) => [stateColorKey, `var(--fibery-state-colors-${stateColorKey})`])
+      Object.keys(stateColors).map((stateColorKey) => [
+        stateColorKey,
+        `var(--${varPrefix}-state-colors-${stateColorKey})`,
+      ])
     );
   } else if (key === "brandColors") {
     vars[key] = Object.fromEntries(
-      Object.keys(brandColors).map((brandColorKey) => [brandColorKey, `var(--fibery-brand-colors-${brandColorKey})`])
+      Object.keys(brandColors).map((brandColorKey) => [
+        brandColorKey,
+        `var(--${varPrefix}-brand-colors-${brandColorKey})`,
+      ])
     );
   } else if (key === "shades") {
     vars[key] = Object.fromEntries(
-      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--fibery-shades-${shadeKey})`])
+      Object.keys(shades).map((shadeKey) => [shadeKey, `var(--${varPrefix}-shades-${shadeKey})`])
     );
   } else if (key === "lights") {
     vars[key] = Object.fromEntries(
-      Object.keys(lights).map((lightKey) => [lightKey, `var(--fibery-lights-${lightKey})`])
+      Object.keys(lights).map((lightKey) => [lightKey, `var(--${varPrefix}-lights-${lightKey})`])
     );
   } else if (key === "separators") {
     vars[key] = Object.fromEntries(
-      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--fibery-separator-${separatorKey})`])
+      Object.keys(separators).map((separatorKey) => [separatorKey, `var(--${varPrefix}-separator-${separatorKey})`])
     );
   } else if (key === "inversedSeparators") {
     vars[key] = Object.fromEntries(
       Object.keys(inversedSeparators).map((separatorKey) => [
         separatorKey,
-        `var(--fibery-inversed-separator-${separatorKey})`,
+        `var(--${varPrefix}-inversed-separator-${separatorKey})`,
       ])
     );
   } else {
-    vars[key] = `var(--fibery-color-${key})`;
+    vars[key] = `var(--${varPrefix}-color-${key})`;
   }
   return vars;
 }, {} as Record<string, string | {[k: string]: string}>) as ThemeColors;
 
-export const createInlineTheme = (theme: ThemeColors) => createInlineStyles<ThemeColors>(theme);
+export const createInlineTheme = (theme: ThemeColors, rejectKeys = Object.keys(lightColors)) =>
+  createInlineStyles<ThemeColors>(theme, rejectKeys);
 
 export const textStyles = {
   heading1: {

package/src/loading-sausage.tsx

@@ -2,7 +2,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import _ from "lodash";
-import {useRef, memo} from "react";
+import {memo, useRef} from "react";
 import {space, themeVars} from "./designSystem";
 
 const getRandomWithSeed = _.memoize((seed: number) => {
@@ -101,7 +101,7 @@ const Container = styled.div<{height: number}>`
   }
 `;
 
-type Props = {
+export type LoadingSausageProps = {
   minWidth?: number;
   maxWidth?: number;
   height?: number;
@@ -119,7 +119,7 @@ export const LoadingSausage = memo(function LoadingSausage({
   inverted = false,
   margins = true,
   animateAppearance = false,
-}: Props): JSX.Element {
+}: LoadingSausageProps): JSX.Element {
   const widthRef = useRef(getRandomInt(minWidth, maxWidth, index));
   return (
     <Container
@@ -140,7 +140,7 @@ type SausageListProps = {
   minAmount?: number;
   maxAmount?: number;
   WrapperComponent?: ({children}: {children: JSX.Element}) => JSX.Element | null;
-} & Omit<Props, "index">;
+} & Omit<LoadingSausageProps, "index">;
 export const LoadingSausageList = memo<SausageListProps>(function LoadingSausageList({
   amount,
   minAmount = 1,

package/src/theme-styles.ts

@@ -0,0 +1,18 @@
+import {css} from "@linaria/core";
+import {createInlineTheme, getThemeColors, colors} from "./designSystem";
+const lightTheme = getThemeColors(colors.brandColors.blue, "light");
+const darkTheme = getThemeColors(colors.brandColors.blue, "dark");
+const light2Theme = getThemeColors(colors.brandColors.blue, "light2");
+export const themeStyles = css`
+  :global(html) {
+    &:root {
+      ${createInlineTheme(lightTheme, [])}
+    }
+    &.dark-theme:root {
+      ${createInlineTheme(darkTheme, [])}
+    }
+    &.light-theme-and-dark-menu:root {
+      ${createInlineTheme(light2Theme, [])}
+    }
+  }
+`;