feat: add origin colors to color palette (#1152)

db-ux-design-system · Feb 10, 2025 · 8eee76d · 8eee76d
1 parent 45d4921
commit 8eee76d
Show file tree

Hide file tree

Showing 2 changed files with 116 additions and 47 deletions.
diff --git a/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx b/src/components/Customization/Preview/ColorPalettes/color-palettes.tsx
@@ -1,13 +1,14 @@
 import { useThemeBuilderStore } from "../../../../store";
-import { Fragment, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { getHeissluftColors } from "../../../../utils/generate-colors.ts";
 import "./index.scss";
-import { DBInput, DBPopover } from "@db-ui/react-components";
+import { DBInput } from "@db-ui/react-components";
 import { useTranslation } from "react-i18next";
 import chroma from "chroma-js";
 import PaletteBox from "./PaletteBox";
 import { isValidColor } from "../../../../utils";
 import { DefaultColorType } from "../../../../utils/data.ts";
+import { Hsluv } from "hsluv";
 
 const ColorPalettes = () => {
   const { luminanceSteps, developerMode, theme } = useThemeBuilderStore(
@@ -19,6 +20,11 @@ const ColorPalettes = () => {
     {},
   );
 
+  const [selectedColor, setSelectedColor] = useState<{
+    colorIndex: number;
+    index: number;
+  }>({ colorIndex: -1, index: -1 });
+
   useEffect(() => {
     setAllColors({
       ...theme.colors,
@@ -58,6 +64,18 @@ const ColorPalettes = () => {
               </span>
             </div>
           ))}
+
+          <div className="flex items-center">
+            <span className="font-bold whitespace-nowrap pr-fix-xs md:pr-fix-lg">
+              origin-light
+            </span>
+          </div>
+
+          <div className="flex items-center">
+            <span className="font-bold whitespace-nowrap pr-fix-xs md:pr-fix-lg">
+              origin-dark
+            </span>
+          </div>
         </div>
 
         {Object.entries(allColors)
@@ -68,6 +86,15 @@ const ColorPalettes = () => {
               value.origin,
               luminanceSteps,
             );
+
+            const originLight = new Hsluv();
+            originLight.hex = value.originLightDefault || "";
+            originLight.hexToHsluv();
+
+            const originDark = new Hsluv();
+            originDark.hex = value.originDarkDefault || "";
+            originDark.hexToHsluv();
+
             return (
               <div
                 key={`${key}-header`}
@@ -79,54 +106,88 @@ const ColorPalettes = () => {
 
                 {heissluftColors.map(
                   ({ hex, hue, saturation, luminance }, index) => (
-                    <Fragment key={`${key}-${hex}-${index}`}>
-                      <DBPopover
-                        style={{
-                          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                          /* @ts-expect-error */
-                          "--color-index": index,
-                        }}
-                        placement={
-                          colorIndex > 3 ? "left-start" : "right-start"
-                        }
-                        trigger={
-                          <PaletteBox
-                            hex={hex}
-                            hue={hue}
-                            saturation={saturation}
-                            luminance={luminance}
-                            index={index}
-                          />
-                        }
-                      >
-                        <div className="flex flex-col gap-fix-2xs items-center grid-color-palettes">
-                          {heissluftColors.map((popoverColor, tooltipIndex) => (
-                            <Fragment
-                              key={`popover-${key}-${popoverColor.hex}-${tooltipIndex}`}
+                    <div
+                      className="flex gap-fix-sm items-center justify-center"
+                      key={`${key}-${hex}-${index}`}
+                    >
+                      {developerMode ? (
+                        <>
+                          <button
+                            className="relative"
+                            data-focus={
+                              colorIndex === selectedColor.colorIndex &&
+                              index === selectedColor.index
+                            }
+                            onClick={() => {
+                              if (
+                                selectedColor.index === index &&
+                                selectedColor.colorIndex === colorIndex
+                              ) {
+                                setSelectedColor({ colorIndex: -1, index: -1 });
+                              } else {
+                                setSelectedColor({ colorIndex, index });
+                              }
+                            }}
+                          >
+                            <PaletteBox
+                              hex={hex}
+                              hue={hue}
+                              saturation={saturation}
+                              luminance={luminance}
+                              index={index}
+                            />
+                          </button>
+                          {colorIndex === selectedColor.colorIndex && (
+                            <PaletteBox
+                              hex={hex}
+                              hue={hue}
+                              saturation={saturation}
+                              luminance={luminance}
+                              hideText
                             >
-                              <PaletteBox
-                                hex={popoverColor.hex}
-                                hue={popoverColor.hue}
-                                saturation={popoverColor.saturation}
-                                luminance={popoverColor.luminance}
-                                hideText
-                              >
-                                <span className="m-auto">
-                                  {chroma
-                                    .contrast(
-                                      chroma.hex(hex),
-                                      chroma.hex(popoverColor.hex),
-                                    )
-                                    .toFixed(2)}
-                                </span>
-                              </PaletteBox>
-                            </Fragment>
-                          ))}
-                        </div>
-                      </DBPopover>
-                    </Fragment>
+                              <span className="m-auto">
+                                {chroma
+                                  .contrast(
+                                    chroma.hex(hex),
+                                    chroma.hex(
+                                      heissluftColors[selectedColor.index].hex,
+                                    ),
+                                  )
+                                  .toFixed(2)}
+                              </span>
+                            </PaletteBox>
+                          )}
+                        </>
+                      ) : (
+                        <PaletteBox
+                          hex={hex}
+                          hue={hue}
+                          saturation={saturation}
+                          luminance={luminance}
+                          index={index}
+                        />
+                      )}
+                    </div>
                   ),
                 )}
+
+                {value.originLightDefault && (
+                  <PaletteBox
+                    hex={originLight.hex}
+                    hue={originLight.hsluv_h}
+                    saturation={originLight.hsluv_s}
+                    luminance={originLight.hsluv_l}
+                  />
+                )}
+
+                {value.originDarkDefault && (
+                  <PaletteBox
+                    hex={originDark.hex}
+                    hue={originDark.hsluv_h}
+                    saturation={originDark.hsluv_s}
+                    luminance={originDark.hsluv_l}
+                  />
+                )}
               </div>
             );
           })}

diff --git a/src/index.scss b/src/index.scss
@@ -1,9 +1,17 @@
 @use "@db-ui/foundations/build/scss/variables";
 @use "@db-ui/foundations/build/scss/colors";
 @use "@db-ui/foundations/build/scss/screen-sizes";
+@use "@db-ui/components/build/styles/db-puls" as puls;
 @forward "@db-ui/components/build/styles/db-ui-42-rollup";
 @forward "font-face.css";
 
+[data-focus="true"] {
+  @extend %db-puls;
+  @include puls.set-db-puls-vertical();
+  @include puls.show-db-puls-vertical();
+  inset-inline-end: calc(-1 * #{variables.$db-spacing-fixed-xs});
+}
+
 :root {
   --db-drawer-max-height: 100%;
   --db-drawer-max-width: 90%;