feat(themebuilder): add severity colors (#4164)

Author: Barsnes

apps/themebuilder/app/_components/color-contrasts/color-contrasts.tsx

@@ -103,7 +103,8 @@ const ColorContrastMapper = ({
   variant: string;
 }) => {
   const { t } = useTranslation();
-  const { colorScheme, colors } = useThemebuilder();
+  const { colorScheme, colors, severityColors, severityEnabled } =
+    useThemebuilder();
   const [selectedColor, setSelectedColor] = useState('dominant');
 
   const getMappedTheme = () => {
@@ -120,6 +121,16 @@ const ColorContrastMapper = ({
           }
         }
       }
+
+      // Check severity colors if enabled
+      if (severityEnabled) {
+        for (const color of severityColors) {
+          if (color.name === selectedColor) {
+            colorTheme = color.colors;
+            break;
+          }
+        }
+      }
     }
 
     for (const [, value] of Object.entries(colorTheme[colorScheme])) {
@@ -163,6 +174,12 @@ const ColorContrastMapper = ({
               </Select.Option>
             )),
           )}
+          {severityEnabled &&
+            severityColors.map((color, index) => (
+              <Select.Option key={`severity-${index}`} value={color.name}>
+                {color.name}
+              </Select.Option>
+            ))}
         </Select>
       </Field>
       <div className={classes.tableContainer}>

apps/themebuilder/app/_components/color-preview/color-preview.tsx

@@ -26,10 +26,16 @@ const CardWrapper = ({ color, view, ...rest }: CardProps) =>
 
 export const ColorPreview = () => {
   const { t } = useTranslation();
-  const { colorScheme, colors } = useThemebuilder();
+  const { colorScheme, colors, severityColors, severityEnabled } =
+    useThemebuilder();
   const [view, setView] = useState<ViewType>(DEFAULT_VIEW);
 
-  const allColors = [...colors.main, ...colors.neutral, ...colors.support];
+  const allColors = [
+    ...colors.main,
+    ...colors.neutral,
+    ...colors.support,
+    ...(severityEnabled ? severityColors : []),
+  ];
 
   const prepVariables = (variables: Record<string, string>) => {
     const prepped: Record<string, string> = {};

apps/themebuilder/app/_components/colors/colors.tsx

@@ -4,13 +4,21 @@ import { Scale } from '../scale/scale';
 import classes from './colors.module.css';
 
 export const Colors = () => {
+  const { severityEnabled } = useThemebuilder();
+
   return (
     <div className={classes.rows}>
       <MainColors />
       <Divider />
       <NeutralColor />
       <Divider />
       <SupportColors />
+      {severityEnabled && (
+        <>
+          <Divider />
+          <SeverityColors />
+        </>
+      )}
     </div>
   );
 };
@@ -69,3 +77,18 @@ const SupportColors = () => {
     </div>
   );
 };
+
+const SeverityColors = () => {
+  const { severityColors } = useThemebuilder();
+
+  return (
+    <div className={classes.rows}>
+      {severityColors.map((color, index) => (
+        <div key={index} className={classes.row}>
+          <div className={classes.scaleLabel}>{color.name}</div>
+          <Scale colorScale={color.colors} namespace={color.name} />
+        </div>
+      ))}
+    </div>
+  );
+};

apps/themebuilder/app/_components/sidebar/color-page/color-page.tsx

@@ -1,10 +1,18 @@
-import { Button, Heading } from '@digdir/designsystemet-react';
+import {
+  Button,
+  Heading,
+  Paragraph,
+  Switch,
+} from '@digdir/designsystemet-react';
 import { PlusIcon } from '@navikt/aksel-icons';
 import { useState } from 'react';
 import { ColorService, useColor } from 'react-color-palette';
 import { useTranslation } from 'react-i18next';
 import { useSearchParams } from 'react-router';
-import type { ColorTheme } from '~/routes/themebuilder/_utils/use-themebuilder';
+import type {
+  ColorTheme,
+  SeverityColorTheme,
+} from '~/routes/themebuilder/_utils/use-themebuilder';
 import {
   QUERY_SEPARATOR,
   useThemebuilder,
@@ -14,8 +22,8 @@ import { ColorPane } from '../color-pane/color-pane';
 import classes from './color-page.module.css';
 
 type ColorEditorState = {
-  activePanel: 'add-color' | 'edit-color' | 'none';
-  colorType: 'main' | 'neutral' | 'support';
+  activePanel: 'add-color' | 'edit-color' | 'edit-severity' | 'none';
+  colorType: 'main' | 'neutral' | 'support' | 'severity';
   index: number;
   name: string;
   initialName: string;
@@ -26,7 +34,7 @@ const DEFAULT_COLOR = '#0062ba';
 
 export const ColorPage = () => {
   const { t } = useTranslation();
-  const { colors } = useThemebuilder();
+  const { colors, severityColors, severityEnabled } = useThemebuilder();
   const [query, setQuery] = useSearchParams();
 
   const [editorState, setEditorState] = useState<ColorEditorState>({
@@ -63,11 +71,42 @@ export const ColorPage = () => {
       updatedParams.set(type, colorArray.join(QUERY_SEPARATOR));
     } else if (type === 'neutral') {
       updatedParams.set('neutral', hex);
+    } else if (type === 'severity') {
+      updateSeverityColorInParams(hex, name, updatedParams);
     }
 
     setQuery(updatedParams, { replace: true, preventScrollReset: true });
   };
 
+  const updateSeverityColorInParams = (
+    hex: string,
+    name: string,
+    params: URLSearchParams,
+  ) => {
+    const severityParam = params.get('severity') || '';
+    const severityArray = severityParam.split(QUERY_SEPARATOR).filter(Boolean);
+
+    // Find the severity color and check if it's the default
+    const defaultColor = severityColors.find((sc) => sc.name === name);
+    if (!defaultColor) return;
+
+    const isDefault = hex.toLowerCase() === defaultColor.hex.toLowerCase();
+
+    // Remove existing entry for this severity color
+    const filtered = severityArray.filter((s) => !s.startsWith(`${name}:`));
+
+    // Only add if it's not the default value
+    if (!isDefault) {
+      filtered.push(`${name}:${hex}`);
+    }
+
+    if (filtered.length > 0) {
+      params.set('severity', filtered.join(QUERY_SEPARATOR));
+    } else {
+      params.delete('severity');
+    }
+  };
+
   const openColorEditor = (
     colorTheme: ColorTheme,
     index: number,
@@ -105,6 +144,24 @@ export const ColorPage = () => {
     updateColorInParams(DEFAULT_COLOR, newColorName, type, colorCount);
   };
 
+  const openSeverityColorEditor = (
+    severityColor: SeverityColorTheme,
+    index: number,
+  ) => {
+    const hexColor = severityColor.hex;
+
+    setColor(ColorService.convert('hex', hexColor));
+
+    setEditorState({
+      activePanel: 'edit-severity',
+      colorType: 'severity',
+      index: index,
+      name: severityColor.name,
+      initialName: severityColor.name,
+      initialHex: hexColor,
+    });
+  };
+
   const closeEditor = () => {
     setEditorState((prev) => ({
       ...prev,
@@ -130,6 +187,17 @@ export const ColorPage = () => {
     }
   };
 
+  const toggleSeverityColors = (enabled: boolean) => {
+    const updatedParams = new URLSearchParams(query);
+    if (enabled) {
+      updatedParams.set('severity-enabled', 'true');
+    } else {
+      updatedParams.delete('severity-enabled');
+      updatedParams.delete('severity'); // Also remove any severity color overrides
+    }
+    setQuery(updatedParams, { replace: true, preventScrollReset: true });
+  };
+
   return (
     <div>
       {editorState.activePanel === 'none' && (
@@ -194,7 +262,9 @@ export const ColorPage = () => {
                 </Button>
               )}{' '}
               {colors.support.length >= 40 && (
-                <div className={classes.error}>Maximum 4 support colours</div>
+                <div className={classes.error}>
+                  {t('themeModal.max-X-colors', { count: 4 })}
+                </div>
               )}
             </div>
             <div className={classes.colors}>
@@ -208,6 +278,50 @@ export const ColorPage = () => {
               ))}
             </div>
           </div>
+
+          <div className={classes.separator}></div>
+          <div className={classes.group}>
+            <div className={classes.groupHeader}>
+              <Heading data-size='2xs' id='severity-colors-heading'>
+                {t('themeModal.severity-colors')}
+              </Heading>
+              <Switch
+                name='severity-colors-switch'
+                data-size='sm'
+                checked={severityEnabled}
+                onChange={(e) => toggleSeverityColors(e.target.checked)}
+                aria-labelledby='severity-colors-heading'
+                aria-describedby='severity-colors-description'
+              />
+            </div>
+            {!severityEnabled && (
+              <Paragraph
+                id='severity-colors-description'
+                data-size='sm'
+                style={{
+                  marginTop: '-4px',
+                  marginBottom: '8px',
+                  color: 'var(--ds-color-neutral-text-subtle)',
+                }}
+              >
+                {t('themeModal.severity-colors-switch')}
+              </Paragraph>
+            )}
+            {severityEnabled && (
+              <div className={classes.colors}>
+                {severityColors.map((severityColor, index) => (
+                  <ColorInput
+                    key={severityColor.name}
+                    color={severityColor.hex}
+                    name={severityColor.name}
+                    onClick={() =>
+                      openSeverityColorEditor(severityColor, index)
+                    }
+                  />
+                ))}
+              </div>
+            )}
+          </div>
         </>
       )}
 
@@ -218,7 +332,12 @@ export const ColorPage = () => {
             closeEditor();
           }}
           onRemove={() => {
-            removeColor(editorState.index, editorState.colorType);
+            if (
+              editorState.colorType === 'main' ||
+              editorState.colorType === 'support'
+            ) {
+              removeColor(editorState.index, editorState.colorType);
+            }
             closeEditor();
           }}
           onCancel={() => {
@@ -253,7 +372,58 @@ export const ColorPage = () => {
               editorState.index,
             );
           }}
-          colorType={editorState.colorType}
+          colorType={
+            editorState.colorType === 'severity'
+              ? 'neutral'
+              : editorState.colorType
+          }
+        />
+      )}
+
+      {editorState.activePanel === 'edit-severity' && (
+        <ColorPane
+          onClose={() => {
+            closeEditor();
+          }}
+          onRemove={() => {
+            // Reset to default by removing from query params
+            const updatedParams = new URLSearchParams(query);
+            updateSeverityColorInParams(
+              editorState.initialHex,
+              editorState.name,
+              updatedParams,
+            );
+            setQuery(updatedParams, {
+              replace: true,
+              preventScrollReset: true,
+            });
+            closeEditor();
+          }}
+          onCancel={() => {
+            updateColorInParams(
+              editorState.initialHex,
+              editorState.initialName,
+              editorState.colorType,
+              editorState.index,
+            );
+            closeEditor();
+          }}
+          type='edit-color'
+          color={color}
+          name={editorState.name}
+          setColor={(newColor) => {
+            setColor(newColor);
+            updateColorInParams(
+              newColor.hex,
+              editorState.name,
+              editorState.colorType,
+              editorState.index,
+            );
+          }}
+          setName={() => {
+            // Name changes not allowed for severity colors
+          }}
+          colorType='severity'
         />
       )}
     </div>