Code cleaning of Theme and work on ColorModal

digdir · Jun 17, 2024 · a589528 · a589528
1 parent 727e6f5
commit a589528
Show file tree

Hide file tree

Showing 18 changed files with 228 additions and 154 deletions.
diff --git a/apps/theme/app/page.module.css b/apps/theme/app/page.module.css
@@ -8,12 +8,6 @@
   font-size: 18px;
 }
 
-.preview.dark,
-.preview.contrast {
-  --back: var(--grey1);
-  --fore: var(--grey2);
-}
-
 .container {
   max-width: 1600px;
   margin: 0 auto;

diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
@@ -231,8 +231,7 @@ export default function Home() {
       <Header />
 
       <ColorModal
-        name={selectedColor.name}
-        color={selectedColor.hex}
+        color={selectedColor}
         colorModalRef={colorModalRef}
       />
 

diff --git a/apps/theme/components/Color/Color.tsx b/apps/theme/components/Color/Color.tsx
@@ -1,6 +1,6 @@
 import cl from 'clsx/lite';
 import { SunIcon } from '@navikt/aksel-icons';
-import type { ColorInfo } from '@digdir/designsystemet/color';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 
 import { useThemeStore } from '../../store';
 
@@ -14,6 +14,7 @@ type ColorProps = {
   featured?: boolean;
   hex?: string;
   showColorMeta?: boolean;
+  type: ColorType;
 };
 
 const Color = ({
@@ -23,17 +24,21 @@ const Color = ({
   lightness,
   hex,
   showColorMeta = true,
+  type,
 }: ColorProps) => {
   const setSelectedColor = useThemeStore((state) => state.setSelectedColor);
   return (
     <div>
       <button
         onClick={() => {
-          setSelectedColor({
-            hex: color.hex,
-            number: color.number,
-            name: color.name,
-          });
+          setSelectedColor(
+            {
+              hex: color.hex,
+              number: color.number,
+              name: color.name,
+            },
+            type,
+          );
         }}
         style={{ backgroundColor: color.hex }}
         className={cl(classes.box, featured && classes.featured)}

diff --git a/apps/theme/components/ColorModal/ColorModal.module.css b/apps/theme/components/ColorModal/ColorModal.module.css
@@ -3,27 +3,36 @@
 }
 
 .container {
-  border: 1px solid #d3d3d3;
+  border: 1px solid var(--ds-color-neutral-border-subtle);
   border-radius: 8px;
-  min-height: 280px;
+  min-height: 275px;
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
 }
 
 .left {
   width: 50%;
-  padding: 20px;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  font-size: 16px;
 }
 
 .right {
   width: 50%;
+  border-left: 1px solid var(--ds-color-neutral-border-subtle);
 }
 
 .field {
   display: flex;
   align-items: center;
-  font-size: 18px;
+  height: 24px;
+}
+
+.field:last-child {
+  margin-bottom: 0;
 }
 
 .label {
@@ -32,5 +41,5 @@
 }
 
 .value {
-  margin-right: 12px;
+  margin-right: 8px;
 }
diff --git a/apps/theme/components/ColorModal/ColorModal.tsx b/apps/theme/components/ColorModal/ColorModal.tsx
@@ -1,5 +1,6 @@
 import { Modal } from '@digdir/designsystemet-react';
-import type { CssColor } from '@adobe/leonardo-contrast-colors';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
+import { getCssVariable, hexToHSL } from '@digdir/designsystemet/color';
 
 import { CopyBtn } from '../CopyBtn/CopyBtn';
 
@@ -8,10 +9,32 @@ import classes from './ColorModal.module.css';
 type ColorModalProps = {
   colorModalRef: React.RefObject<HTMLDialogElement>;
   name: string;
-  color: CssColor;
+  color: { color: ColorInfo; type: ColorType };
 };
 
-export const ColorModal = ({ colorModalRef, name, color }: ColorModalProps) => {
+const Field = ({
+  label,
+  value,
+  copyBtn = false,
+}: {
+  label: string;
+  value: string;
+  copyBtn?: boolean;
+}) => {
+  return (
+    <div className={classes.field}>
+      <div className={classes.label}>{label}</div>
+      <div className={classes.value}>{value}</div>
+      {copyBtn && <CopyBtn text={value} />}
+    </div>
+  );
+};
+
+const capitalizeFirstLetter = (str: string) => {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
+export const ColorModal = ({ colorModalRef, color }: ColorModalProps) => {
   return (
     <Modal
       ref={colorModalRef}
@@ -21,19 +44,44 @@ export const ColorModal = ({ colorModalRef, name, color }: ColorModalProps) => {
       className={classes.modal}
       onInteractOutside={() => colorModalRef.current?.close()}
     >
-      <Modal.Header>{name}</Modal.Header>
+      <Modal.Header>
+        {capitalizeFirstLetter(color.type) + ' ' + color.color.name}
+      </Modal.Header>
       <Modal.Content className={classes.modalContent}>
         <div className={classes.container}>
           <div className={classes.left}>
-            <div className={classes.field}>
-              <div className={classes.label}>Hexkode:</div>
-              <div className={classes.value}>{color}</div>
-              <CopyBtn text={color} />
-            </div>
+            <Field
+              label='Hexkode:'
+              value={color.color.hex}
+              copyBtn
+            />
+            <Field
+              label='HSLuv:'
+              value={
+                hexToHSL(color.color.hex)[0].toFixed(0) +
+                '° ' +
+                hexToHSL(color.color.hex)[1].toFixed(0) +
+                '% ' +
+                hexToHSL(color.color.hex)[2].toFixed(0) +
+                '%'
+              }
+            />
+            <Field
+              label='CSS variabel:'
+              value={getCssVariable(color.type, color.color.number)}
+              copyBtn
+            />
+            {/* <Field
+              label='Illuminans terskel:'
+              value='30-40%'
+            />
+            <div>
+              Les mer om denne fargen <Link href='#'>her</Link>.
+            </div> */}
           </div>
           <div
             className={classes.right}
-            style={{ backgroundColor: color }}
+            style={{ backgroundColor: color.color.hex }}
           ></div>
         </div>
       </Modal.Content>

diff --git a/apps/theme/components/Group/Group.tsx b/apps/theme/components/Group/Group.tsx
@@ -1,5 +1,5 @@
 import cl from 'clsx/lite';
-import type { ColorInfo } from '@digdir/designsystemet/color';
+import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
 
 import { Color } from '../Color/Color';
 
@@ -11,14 +11,15 @@ type GroupProps = {
   showColorMeta?: boolean;
   names?: string[];
   featured?: boolean;
+  type: ColorType;
 };
 
 export const Group = ({
   header,
   colors,
   showColorMeta,
   names,
-
+  type,
   featured = false,
 }: GroupProps) => {
   return (
@@ -46,6 +47,7 @@ export const Group = ({
               lightness={'dd'}
               hex={item.hex}
               showColorMeta={showColorMeta}
+              type={type}
             />
           );
         })}

diff --git a/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css b/apps/theme/components/Previews/Dashboard/AreaChart/AreaChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .area svg g:nth-child(7) path:first-child {
-  fill: var(--brandOne7);
+  fill: var(--brand1-7);
 }
 
 .area svg g:nth-child(8) path:first-child {
-  fill: var(--brandThree7);
+  fill: var(--brand3-7);
 }
diff --git a/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css b/apps/theme/components/Previews/Dashboard/BarChart/BarChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .bar svg g:nth-child(7) path {
-  fill: var(--brandThree6);
+  fill: var(--brand3-6);
 }
 
 .bar svg g:nth-child(8) path {
-  fill: var(--brandOne6);
+  fill: var(--brand1-6);
 }
diff --git a/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css b/apps/theme/components/Previews/Dashboard/ColorCard/ColorCard.module.css
@@ -1,20 +1,20 @@
 .colorCard {
-  background-color: var(--brandOne3);
+  background-color: var(--brand1-3);
   width: 270px;
   border-radius: 8px;
   padding: 24px;
 }
 
 .colorCardTwo {
-  background-color: var(--brandTwo3);
+  background-color: var(--brand2-3);
 }
 
 .colorCardThree {
-  background-color: var(--brandThree3);
+  background-color: var(--brand3-3);
 }
 
 .colorCardIcon {
-  background-color: var(--brandOne5);
+  background-color: var(--brand1-5);
   height: 40px;
   width: 40px;
   border-radius: 50%;
@@ -26,30 +26,30 @@
 }
 
 .colorCardIconTwo {
-  background-color: var(--brandTwo5);
-  color: var(--brandTwo12);
+  background-color: var(--brand2-5);
+  color: var(--brand2-12);
 }
 
 .colorCardIconThree {
-  background-color: var(--brandThree5);
-  color: var(--brandThree12);
+  background-color: var(--brand3-5);
+  color: var(--brand3-12);
 }
 
 .colorCardTitle {
-  color: var(--brandOne12);
+  color: var(--brand1-12);
   margin-bottom: 8px;
 }
 
 .colorCardDesc {
-  color: var(--brandOne12);
+  color: var(--brand1-12);
 }
 
 .textTwo .colorCardTitle,
 .textTwo .colorCardDesc {
-  color: var(--brandTwo12) !important;
+  color: var(--brand2-12) !important;
 }
 
 .textThree .colorCardTitle,
 .textThree .colorCardDesc {
-  color: var(--brandThree12) !important;
+  color: var(--brand3-12) !important;
 }
diff --git a/apps/theme/components/Previews/Dashboard/Dashboard.module.css b/apps/theme/components/Previews/Dashboard/Dashboard.module.css
@@ -114,7 +114,7 @@
 
 .userName {
   font-size: 16px;
-  color: var(--grey13);
+  color: var(--neutral-13);
 }
 
 .user img {

diff --git a/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css b/apps/theme/components/Previews/Dashboard/LineCart/LineChart.module.css
@@ -3,9 +3,9 @@
 }
 
 .line svg g:nth-child(7) path {
-  stroke: var(--brandOne9);
+  stroke: var(--brand1-9);
 }
 
 .line svg g:nth-child(8) path {
-  stroke: var(--brandThree9);
+  stroke: var(--brand3-9);
 }