feat: remove color categories

.changeset/deep-brooms-rescue.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Removed color categories `main` and `support`. All colors are now defined in `themes.<name>.colors` (just like neutral).

.changeset/petite-memes-stop.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Removed color categories `main` and `support` support in config. Define all colors in `colors`.

.changeset/thirty-ends-live.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Remove `UNSAFE_COLOR_GROUPS` env variable as its no longer relevant

.changeset/twelve-bugs-prove.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet": minor
+---
+
+Added support for auto-migrations which checks files and prompts users about needed migrations.

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

@@ -17,7 +17,6 @@ import { useThemebuilder } from '~/routes/themebuilder/_utils/use-themebuilder';
 import classes from './color-contrasts.module.css';
 
 const initialTheme = generateColorSchemes('#0062BA');
-const colorGroups = ['main', 'neutral', 'support'] as const;
 
 export const ColorContrasts = () => {
   const { t } = useTranslation();
@@ -110,15 +109,13 @@ const ColorContrastMapper = ({
   const getMappedTheme = () => {
     const mappedColors: { [key: string]: Color } = {};
 
-    let colorTheme = colors?.main[0]?.colors || initialTheme;
+    let colorTheme = colors?.[0]?.colors || initialTheme;
 
     if (selectedColor !== 'dominant') {
-      for (const group of colorGroups) {
-        for (const color of colors[group]) {
-          if (color.name === selectedColor) {
-            colorTheme = color.colors;
-            break;
-          }
+      for (const color of colors) {
+        if (color.name === selectedColor) {
+          colorTheme = color.colors;
+          break;
         }
       }
 
@@ -167,13 +164,11 @@ const ColorContrastMapper = ({
           aria-label={t('colorContrasts.select-color')}
           value={selectedColor}
         >
-          {colorGroups.flatMap((group) =>
-            colors[group as keyof typeof colors].map((color, colorIndex) => (
-              <Select.Option key={`${group}-${colorIndex}`} value={color.name}>
-                {color.name}
-              </Select.Option>
-            )),
-          )}
+          {colors.map((color, colorIndex) => (
+            <Select.Option key={`color-${colorIndex}`} value={color.name}>
+              {color.name}
+            </Select.Option>
+          ))}
           {severityEnabled &&
             severityColors.map((color, index) => (
               <Select.Option key={`severity-${index}`} value={color.name}>

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

@@ -30,12 +30,7 @@ export const ColorPreview = () => {
     useThemebuilder();
   const [view, setView] = useState<ViewType>(DEFAULT_VIEW);
 
-  const allColors = [
-    ...colors.main,
-    ...colors.neutral,
-    ...colors.support,
-    ...(severityEnabled ? severityColors : []),
-  ];
+  const allColors = [...colors, ...(severityEnabled ? severityColors : [])];
 
   const prepVariables = (variables: Record<string, string>) => {
     const prepped: Record<string, string> = {};
@@ -92,7 +87,7 @@ export const ColorPreview = () => {
 };
 
 type CardProps = {
-  color: ReturnType<typeof useThemebuilder>['colors']['main'][number];
+  color: ReturnType<typeof useThemebuilder>['colors'][number];
   view?: ViewType;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
 

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

@@ -12,18 +12,16 @@ export const ColorVariables = () => {
   const { colors, colorScheme, severityEnabled, severityColors } =
     useThemebuilder();
 
-  const neutralColor = colors?.neutral[0]?.hex || '';
-  const [previewColor, setPreviewColor] = useState(colors?.main[0] || '');
+  const neutralColor = colors?.find((c) => c.name === 'neutral')?.hex || '';
+  const [previewColor, setPreviewColor] = useState(colors?.[0] || '');
 
   const style = {
     ...styleColorVars(neutralColor as CssColor, colorScheme, 'neutral'),
     ...styleColorVars(previewColor.hex as CssColor, colorScheme),
   };
 
   const allColors = [
-    ...colors.main,
-    ...colors.neutral,
-    ...colors.support,
+    ...(colors ?? []),
     ...(severityEnabled ? severityColors : []),
   ];
 
@@ -40,7 +38,7 @@ export const ColorVariables = () => {
                 const selectedColor = allColors.find(
                   (c) => c.name === v.target.value,
                 );
-                setPreviewColor(selectedColor ?? colors.main[0]);
+                setPreviewColor(selectedColor ?? colors[0]);
               }}
             >
               {allColors.map((color) => (

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

@@ -8,11 +8,9 @@ export const Colors = () => {
 
   return (
     <div className={classes.rows}>
-      <MainColors />
+      <ThemeColors />
       <Divider />
       <NeutralColor />
-      <Divider />
-      <SupportColors />
       {severityEnabled && (
         <>
           <Divider />
@@ -23,57 +21,40 @@ export const Colors = () => {
   );
 };
 
-const MainColors = () => {
-  const {
-    colors: { main },
-  } = useThemebuilder();
+const ThemeColors = () => {
+  const { colors } = useThemebuilder();
 
   return (
     <div className={classes.rows}>
-      {main.map((color, index) => (
-        <div key={index} className={classes.row}>
-          <div className={classes.scaleLabel}>{color.name}</div>
-          <Scale
-            colorScale={color.colors}
-            showHeader={index === 0}
-            namespace={color.name}
-          />
-        </div>
-      ))}
+      {colors
+        .filter((c) => c.name !== 'neutral')
+        .map((color, index) => (
+          <div key={index} className={classes.row}>
+            <div className={classes.scaleLabel}>{color.name}</div>
+            <Scale
+              colorScale={color.colors}
+              showHeader={index === 0}
+              namespace={color.name}
+            />
+          </div>
+        ))}
     </div>
   );
 };
 
 const NeutralColor = () => {
-  const {
-    colors: { neutral },
-  } = useThemebuilder();
-
-  return (
-    <div className={classes.rows}>
-      {neutral.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>
-  );
-};
-
-const SupportColors = () => {
-  const {
-    colors: { support },
-  } = useThemebuilder();
+  const { colors } = useThemebuilder();
 
   return (
     <div className={classes.rows}>
-      {support.map((color, index) => (
-        <div key={index} className={classes.row}>
-          <div className={classes.scaleLabel}>{color.name}</div>
-          <Scale colorScale={color.colors} namespace={color.name} />
-        </div>
-      ))}
+      {colors
+        .filter((c) => c.name === 'neutral')
+        .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/config-paste/config-paste.tsx

@@ -107,29 +107,9 @@ export function ConfigPaste() {
                       {themeName}
                     </Paragraph>
                     <div className={classes.colorPreview}>
-                      {themeConfig.colors.main &&
-                        Object.values(themeConfig.colors.main)
-                          .slice(0, 3)
-                          .map((color, idx) => (
-                            <div
-                              key={idx}
-                              className={classes.colorDot}
-                              style={{ backgroundColor: color }}
-                              title={color}
-                            />
-                          ))}
-                      {themeConfig.colors.neutral && (
-                        <div
-                          className={classes.colorDot}
-                          style={{
-                            backgroundColor: themeConfig.colors.neutral,
-                          }}
-                          title={themeConfig.colors.neutral}
-                        />
-                      )}
-                      {themeConfig.colors?.support &&
-                        Object.values(themeConfig.colors.support)
-                          .slice(0, 3)
+                      {themeConfig.colors &&
+                        Object.values(themeConfig.colors)
+                          .slice(0, 7)
                           .map((color, idx) => (
                             <div
                               key={idx}

apps/themebuilder/app/_components/examples-components/examples-components.tsx

@@ -54,10 +54,9 @@ export const ExamplesComponents = ({
   const ref = useRef<HTMLDivElement>(null);
   const { colors } = useThemebuilder();
 
-  const neutralColor = colors?.neutral[0].hex || '#F5F7FA';
-  const [previewColor, setPreviewColor] = useState(
-    colors?.main[0].hex || color,
-  );
+  const neutralColor =
+    colors?.find((c) => c.name === 'neutral')?.hex || '#F5F7FA';
+  const [previewColor, setPreviewColor] = useState(colors?.[0]?.hex || color);
 
   useEffect(() => {
     if (ref.current) {
@@ -74,7 +73,7 @@ export const ExamplesComponents = ({
 
   useEffect(() => {
     if (!colors) return;
-    const allColors = [...colors.main, ...colors.support];
+    const allColors = colors.filter((c) => c.name !== 'neutral');
     /* if select colors is gone, set to default */
     if (!allColors.find((c) => c.hex === previewColor)) {
       setPreviewColor(color);
@@ -97,27 +96,24 @@ export const ExamplesComponents = ({
               value={previewColor}
               onChange={(v) => {
                 if (!colors) return;
-                const allColors = [...colors.main, ...colors.support];
+                const allColors = colors.filter((c) => c.name !== 'neutral');
                 /* find the selected color */
                 let selected = allColors.find(
                   (c) => c.hex === v.target.value,
                 )?.hex;
                 if (!selected) {
-                  selected = colors.main[0].hex;
+                  selected = allColors[0]?.hex;
                 }
                 setPreviewColor(selected as CssColor);
               }}
             >
-              {colors.main.map((color) => (
-                <Select.Option key={color.name} value={color.hex}>
-                  {color.name}
-                </Select.Option>
-              ))}
-              {colors.support.map((color) => (
-                <Select.Option key={color.name} value={color.hex}>
-                  {color.name}
-                </Select.Option>
-              ))}
+              {colors
+                .filter((c) => c.name !== 'neutral')
+                .map((color) => (
+                  <Select.Option key={color.name} value={color.hex}>
+                    {color.name}
+                  </Select.Option>
+                ))}
             </Select>
           </Field>
 

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

@@ -15,16 +15,9 @@ export const ColorOverrides = ({ triggerButton }: ColorOverridesProps) => {
   const { t } = useTranslation();
   const dialogRef = useRef<HTMLDialogElement>(null);
 
-  const allColors: Array<{ color: ColorTheme; type: string }> = [
-    ...colors.main.map((c) => ({ color: c, type: 'main' })),
-    ...colors.neutral.map((c) => ({ color: c, type: 'neutral' })),
-    ...colors.support.map((c) => ({ color: c, type: 'support' })),
-    ...(severityEnabled
-      ? severityColors.map((c) => ({
-          color: c as ColorTheme,
-          type: 'severity',
-        }))
-      : []),
+  const allColors: ColorTheme[] = [
+    ...colors,
+    ...(severityEnabled ? (severityColors as ColorTheme[]) : []),
   ];
 
   return (
@@ -42,7 +35,7 @@ export const ColorOverrides = ({ triggerButton }: ColorOverridesProps) => {
 
         <Dialog.Block>
           <Card data-color='neutral' variant='tinted'>
-            {allColors.map(({ color }) => {
+            {allColors.map((color) => {
               return <ColorDetails key={color.name} color={color} />;
             })}
           </Card>

apps/themebuilder/app/_components/sidebar/color-page/color-page.module.css

@@ -14,10 +14,6 @@
   height: 44px;
 }
 
-.AddBtn {
-  margin-right: -8px;
-}
-
 .colors {
   display: flex;
   flex-wrap: wrap;