chore: debug tool for the color system

apps/theme/app/color-debugger/ColorFilter/ColorFIlter.module.css

@@ -0,0 +1,20 @@
+.filter {
+  margin-top: 16px;
+  margin-bottom: 24px;
+}
+
+.item {
+  border: 1px solid var(--ds-color-neutral-border-subtle);
+  background-color: white;
+  height: 40px;
+  text-align: left;
+  padding: 0 14px;
+  margin-right: -1px;
+  font-size: 15px;
+  cursor: pointer;
+}
+
+.active {
+  background-color: rgb(82, 82, 82);
+  color: white;
+}

apps/theme/app/color-debugger/ColorFilter/ColorFilter.tsx

@@ -0,0 +1,45 @@
+import cl from 'clsx/lite';
+import { useState } from 'react';
+import { ColorScaleNames } from '../utils';
+import classes from './ColorFIlter.module.css';
+
+type ColorFilterProps = {
+  onFilterChange: (name: string) => void;
+};
+
+export const ColorFilter = ({ onFilterChange }: ColorFilterProps) => {
+  const [selected, setSelected] = useState<NameType>('Alle');
+
+  type ItemProps = {
+    name: string;
+    active?: boolean;
+  };
+
+  type NameType = keyof typeof ColorScaleNames | 'Alle';
+
+  const Item = ({ name, active }: ItemProps) => {
+    return (
+      <button
+        key={name}
+        className={cl(classes.item, active && classes.active)}
+        onClick={() => {
+          setSelected(name as NameType);
+          onFilterChange(name);
+        }}
+      >
+        {name}
+      </button>
+    );
+  };
+
+  return (
+    <div className={classes.filter}>
+      <div>
+        <Item name='Alle' active={selected === 'Alle'} />
+        {ColorScaleNames.map((name, index) => (
+          <Item name={name} key={index} active={selected === name} />
+        ))}
+      </div>
+    </div>
+  );
+};

apps/theme/app/color-debugger/ColorGrid/ColorGrid.module.css

@@ -0,0 +1,61 @@
+.rows {
+  display: flex;
+  flex-direction: column;
+}
+
+.row {
+  display: flex;
+  margin-bottom: 12px;
+  margin-left: -8px;
+  border-radius: 4px;
+}
+
+.item {
+  flex: 1;
+  display: flex;
+}
+
+.color {
+  height: 44px;
+  width: 100%;
+  border: 6px solid white;
+  border-top: none;
+  border-radius: 4px;
+}
+
+.baseColor {
+  width: 100%;
+  height: 38px;
+  margin-right: -6px;
+  border-bottom: none;
+  position: relative;
+  z-index: 2;
+  margin-bottom: 8px;
+}
+
+.checkbox {
+  margin-top: 4px;
+  margin-bottom: 24px;
+}
+
+.grid {
+  background-color: white;
+  border-radius: 4px;
+  padding: 24px;
+}
+
+.heading {
+  margin-bottom: 12px;
+  font-size: 19px;
+}
+
+.tables {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.pageHeading {
+  font-size: 23px;
+  font-weight: 500;
+}

apps/theme/app/color-debugger/ColorGrid/ColorGrid.tsx

@@ -0,0 +1,142 @@
+import type { ThemeInfo } from '@/packages/cli/dist/src';
+import { Checkbox, Heading } from '@digdir/designsystemet-react';
+import { useState } from 'react';
+import { useDebugStore } from '../debugStore';
+import { generateColorSchemes } from '../logic/theme';
+import { ColorIndexes } from '../utils';
+import classes from './ColorGrid.module.css';
+
+type ColorGridProps = {
+  colors: ThemeInfo[][];
+  showBase?: boolean;
+  colorNumber: number;
+};
+
+type RowProps = {
+  rowColors: ThemeInfo[];
+};
+
+export const ColorGrid = ({ colors, colorNumber }: ColorGridProps) => {
+  const [showBase, setShowBase] = useState(false);
+  const themeSettings = useDebugStore((state) => state.themeSettings);
+  const luminance = useDebugStore((state) => state.luminance);
+  const greyScheme = generateColorSchemes('#000000', luminance, themeSettings);
+
+  const Row = ({ rowColors }: RowProps) => {
+    return (
+      <div className={classes.row}>
+        {rowColors.map((rowItem, index) => (
+          <div key={index} className={classes.item}>
+            {showBase && (
+              <div
+                className={classes.baseColor}
+                style={{
+                  backgroundColor:
+                    rowItem[themeSettings.general.colorScheme][
+                      ColorIndexes.baseDefault
+                    ].hex,
+                }}
+              ></div>
+            )}
+            <div
+              className={classes.color}
+              style={{
+                backgroundColor:
+                  rowItem[themeSettings.general.colorScheme][colorNumber].hex,
+                borderColor:
+                  greyScheme[themeSettings.general.colorScheme][
+                    ColorIndexes.backgroundDefault
+                  ].hex,
+              }}
+            ></div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className={classes.rows}>
+      <Checkbox
+        label='Show base colors'
+        data-size='sm'
+        onChange={(e) => setShowBase(e.target.checked)}
+        className={classes.checkbox}
+      />
+      <div
+        className={classes.grid}
+        style={{
+          backgroundColor:
+            greyScheme[themeSettings.general.colorScheme][
+              ColorIndexes.backgroundDefault
+            ].hex,
+        }}
+      >
+        {colors.map((item, index) => (
+          <Row key={index} rowColors={item} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+type ColorTablesProps = {
+  colorScales: ThemeInfo[][];
+};
+
+export const ColorTables = ({ colorScales }: ColorTablesProps) => {
+  return (
+    <div className={classes.tables}>
+      <div className={classes.pageHeading}>Color tables</div>
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Background tinted</Heading>
+        <ColorGrid colors={colorScales} colorNumber={1} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Surface Default</Heading>
+        <ColorGrid colors={colorScales} colorNumber={2} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Surface tinted</Heading>
+        <ColorGrid colors={colorScales} colorNumber={3} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Surface hover</Heading>
+        <ColorGrid colors={colorScales} colorNumber={4} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Surface Active</Heading>
+        <ColorGrid colors={colorScales} colorNumber={5} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Border Subtle</Heading>
+        <ColorGrid colors={colorScales} colorNumber={6} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Border Default</Heading>
+        <ColorGrid colors={colorScales} colorNumber={7} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Border Strong</Heading>
+        <ColorGrid colors={colorScales} colorNumber={8} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Text Subtle</Heading>
+        <ColorGrid colors={colorScales} colorNumber={9} />
+      </div>
+
+      <div className={classes.table}>
+        <Heading className={classes.heading}>Text Default</Heading>
+        <ColorGrid colors={colorScales} colorNumber={10} />
+      </div>
+    </div>
+  );
+};

apps/theme/app/color-debugger/ColorInfo/ColorInfo.module.css

@@ -0,0 +1,47 @@
+.container {
+  width: 100%;
+}
+
+.heading {
+  font-size: 20px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.items {
+  display: flex;
+  width: 100%;
+  gap: 16px;
+}
+
+.item {
+  position: relative;
+  width: 100%;
+}
+
+.label {
+  font-size: 16px;
+  margin-bottom: 8px;
+}
+
+.result {
+  border: 1px solid rgb(216, 216, 216);
+  display: flex;
+  flex-wrap: wrap;
+  padding: 16px;
+  gap: 12px;
+  font-size: 15px;
+  margin-top: 12px;
+  border-radius: 4px;
+}
+
+.resultItem {
+  width: calc(50% - 8px);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.resultLabel {
+  font-weight: 500;
+}