add transparency

Author: devklick

src/common/utils/colorUtils.ts

@@ -1,5 +1,9 @@
-import { getLuminance } from "polished";
+import { darken, getLuminance, lighten } from "polished";
 
 export function isLight(color: string): boolean {
   return getLuminance(color) >= 0.5;
 }
+
+export function adjustLuminance(amount: number, color: string) {
+  return isLight(color) ? darken(amount, color) : lighten(amount, color);
+}

src/common/utils/htmlHelpers.ts

@@ -0,0 +1,12 @@
+import { ForwardedRef } from "react";
+
+export function setRef<T extends HTMLElement>(
+  ref: ForwardedRef<T>,
+  value: T | null,
+): void {
+  if (typeof ref === "function") {
+    ref(value);
+  } else if (ref != null) {
+    ref.current = value;
+  }
+}

src/components/AppSideBar/AppSideBar.tsx

@@ -1,3 +1,4 @@
+import { adjustLuminance } from "../../common/utils/colorUtils";
 import useSystemSettings from "../../stores/systemSettingsStore";
 import Button from "../Button";
 import { StyledItemContainer, StyledSideBar } from "./styles";
@@ -27,7 +28,9 @@ function AppSideBar({ items }: AppSideBarProps) {
             group="vertical"
             onClick={item.onClick}
             color={fontColor}
-            backgroundColor={buttonColor}
+            backgroundColor={"transparent"}
+            backgroundColorHover={adjustLuminance(0.1, buttonColor)}
+            backgroundColorActive={adjustLuminance(0.2, buttonColor)}
             active={item.isActive ?? false}
             justifyContent="start"
             key={item.title}

src/components/BorderedApp/BorderedApp.tsx

@@ -72,7 +72,7 @@ function BorderedApp<
   contentRef,
 }: React.PropsWithChildren<BorderedAppProps<T, E>>) {
   const winMan = useWindowManagerStore();
-  const settings = useSystemSettings();
+  const { mainColor, blur, opacity } = useSystemSettings();
 
   // Listen for keyDown events and send them down to the content rendered inside the bordered app
   const handleKeyDown = (e: KeyboardEvent) =>
@@ -122,10 +122,12 @@ function BorderedApp<
       initialDimensions={initialDimensions}
       initialPosition={initialPosition}
       zIndex={zIndex}
-      backgroundColor={settings.mainColor}
+      backgroundColor={mainColor}
       display={hidden === true ? "none" : "grid"}
       tabIndex={0}
       onKeyDown={handleKeyDown}
+      opacity={opacity}
+      blur={blur}
     >
       <StyledCorner location="nw" ref={resizeHandleNW} />
       <StyledEdge location="n" ref={resizeHandleN} />

src/components/BorderedApp/styles.ts

@@ -1,12 +1,15 @@
 import styled from "@emotion/styled";
 import { Dimensions, Position } from "../../hooks/useDragToResize";
+import { transparentize } from "polished";
 
 interface StyledBorderedAppProps {
   initialDimensions: Dimensions;
   initialPosition: Position;
   zIndex: number | undefined;
   backgroundColor: string;
   display: "none" | "grid";
+  opacity: number;
+  blur: number;
 }
 
 export const StyledBorderedApp = styled.div<StyledBorderedAppProps>`
@@ -26,7 +29,9 @@ export const StyledBorderedApp = styled.div<StyledBorderedAppProps>`
   width: ${(props) => props.initialDimensions.width}px;
   height: ${(props) => props.initialDimensions.height}px;
   z-index: ${(props) => props.zIndex};
-  background-color: ${(props) => props.backgroundColor};
+  background-color: ${(props) =>
+    transparentize(props.opacity, props.backgroundColor)};
+  backdrop-filter: ${(props) => props.blur && `blur(${props.blur}px)`};
   display: ${(props) => props.display};
   left: ${(props) => props.initialPosition.x}px;
   top: ${(props) => props.initialPosition.y}px;

src/components/BottomBar/BottomBar.tsx

@@ -12,10 +12,15 @@ interface BottomBarProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function BottomBar({}: BottomBarProps) {
-  const settings = useSystemSettings();
+  const { mainColor, opacity, blur } = useSystemSettings();
   return (
     <StyledContainer id="bottom-bar__container">
-      <StyledBottomBar id="bottom-bar" backgroundColor={settings.mainColor}>
+      <StyledBottomBar
+        id="bottom-bar"
+        backgroundColor={mainColor}
+        opacity={opacity}
+        blur={blur}
+      >
         <StyledContents id="bottom-bar__contents">
           <TextEditorLauncher />
           <CalculatorLauncher />

src/components/BottomBar/styles.ts

@@ -15,14 +15,20 @@ export const StyledContainer = styled.div`
   align-items: center;
 `;
 
-export const StyledBottomBar = styled.div<{ backgroundColor: string }>`
+interface StyledBottomBarProps {
+  backgroundColor: string;
+  opacity: number;
+  blur: number;
+}
+export const StyledBottomBar = styled.div<StyledBottomBarProps>`
   height: 100%;
   width: 100%;
   display: flex;
   background-color: var(--ui-color-primary);
   border-radius: 50px;
-  background-color: ${(props) => transparentize(0.5, props.backgroundColor)};
-  backdrop-filter: blur(5px);
+  background-color: ${(props) =>
+    transparentize(props.opacity, props.backgroundColor)};
+  backdrop-filter: ${(props) => props.blur && `blur(${props.blur}px)`};
   box-shadow:
     0 -2px 10px 1px #11172b,
     0 -2px 3px #bebebe inset;

src/components/Button/Button.tsx

@@ -1,5 +1,6 @@
 import { forwardRef, PropsWithChildren, useCallback } from "react";
 import { StyledButton, StyledButtonProps } from "./styles";
+import { setRef } from "../../common/utils/htmlHelpers";
 
 interface ButtonProps extends StyledButtonProps {
   onClick?: () => void;
@@ -9,13 +10,7 @@ interface ButtonProps extends StyledButtonProps {
 const Button = forwardRef<HTMLButtonElement, PropsWithChildren<ButtonProps>>(
   ({ onClick, children, ...rest }, ref) => {
     const onRef = useCallback(
-      (el: HTMLButtonElement | null) => {
-        if (typeof ref === "function") {
-          ref(el);
-        } else if (ref != null) {
-          ref.current = el;
-        }
-      },
+      (el: HTMLButtonElement | null) => setRef(ref, el),
       [ref],
     );
     return (

src/components/TopBar/TopBar.tsx

@@ -13,10 +13,15 @@ interface TopBarProps {}
 
 // eslint-disable-next-line no-empty-pattern
 function TopBar({}: TopBarProps) {
-  const settings = useSystemSettings();
+  const { mainColor, opacity, blur } = useSystemSettings();
   return (
     <StyledTopBarContainer id="top-bar__container">
-      <StyledTopBar id="top-bar" backgroundColor={settings.mainColor}>
+      <StyledTopBar
+        id="top-bar"
+        backgroundColor={mainColor}
+        opacity={opacity}
+        blur={blur}
+      >
         <StyledTopBarContents id="top-bar__contents">
           <FocusedWindowMenu />
           <ClockMenu />

src/components/TopBar/styles.ts

@@ -10,15 +10,21 @@ export const StyledTopBarContainer = styled.div`
   box-sizing: border-box;
 `;
 
-export const StyledTopBar = styled.div<{ backgroundColor: string }>`
+interface StyledTopBarProps {
+  backgroundColor: string;
+  opacity: number;
+  blur: number;
+}
+export const StyledTopBar = styled.div<StyledTopBarProps>`
   height: 100%;
   width: 100%;
   border-radius: 15px;
   box-shadow:
     0 -2px 10px 1px #11172b,
     0 -2px 3px #bebebe inset;
-  background-color: ${(props) => transparentize(0.5, props.backgroundColor)};
-  backdrop-filter: blur(5px);
+  background-color: ${(props) =>
+    transparentize(props.opacity, props.backgroundColor)};
+  backdrop-filter: ${(props) => props.blur && `blur(${props.blur}px)`};
 `;
 
 export const StyledTopBarContents = styled.div`