@fibery/ui-kit 1.1.0 → 1.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "main": "index.ts",
   "private": false,
   "files": [

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,5 +1,12 @@
-export function createInlineTheme<T extends Record<string, unknown>>(themes: T): Record<string, string> {
+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;

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,
@@ -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,7 +685,7 @@ 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})`])
@@ -717,7 +723,8 @@ export const themeVars = Object.keys(getThemeColors("#FFFFFF", "light")).reduce(
   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,