update some names and stuff

digdir · Aug 21, 2024 · 3bb1688 · 3bb1688
1 parent 023d1a3
commit 3bb1688
Show file tree

Hide file tree

Showing 7 changed files with 45 additions and 52 deletions.
diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
@@ -5,8 +5,8 @@ import { Heading } from '@digdir/designsystemet-react';
 import type {
   ColorError,
   ColorInfo,
+  ColorMode,
   ContrastMode,
-  Mode,
   ThemeColors,
   ThemeInfo,
 } from '@digdir/designsystemet/color';
@@ -55,7 +55,7 @@ export default function Home() {
   const params = new URLSearchParams(searchParams);
   const colorModalRef = useRef<HTMLDialogElement>(null);
 
-  const themeMode = (params.get('theme') as Mode) || 'light';
+  const themeMode = (params.get('theme') as ColorMode) || 'light';
   const contrastMode = (params.get('contrastMode') as ContrastMode) || 'aa';
 
   useEffect(() => {
@@ -197,7 +197,7 @@ export default function Home() {
     contrastMode,
   }: {
     colors?: ThemeInfo;
-    theme?: Mode;
+    theme?: ColorMode;
     borderRadius?: string;
     contrastMode?: ContrastMode;
   }) => {
@@ -219,7 +219,7 @@ export default function Home() {
     setQueryParams({ borderRadius: radius });
   };
 
-  const updateTheme = (theme: Mode) => {
+  const updateTheme = (theme: ColorMode) => {
     setQueryParams({ theme });
   };
 

diff --git a/apps/theme/components/Previews/Previews.tsx b/apps/theme/components/Previews/Previews.tsx
@@ -1,4 +1,4 @@
-import type { Mode } from '@digdir/designsystemet/color';
+import type { ColorMode } from '@digdir/designsystemet/color';
 import cl from 'clsx/lite';
 import { useState } from 'react';
 
@@ -15,8 +15,8 @@ type previewModeType =
   | 'components';
 
 type PreviewsProps = {
-  themeMode: Mode;
-  onThemeModeChange: (themeMode: Mode) => void;
+  themeMode: ColorMode;
+  onThemeModeChange: (themeMode: ColorMode) => void;
 };
 
 export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {

diff --git a/apps/theme/components/Scales/Scales.tsx b/apps/theme/components/Scales/Scales.tsx
@@ -1,4 +1,4 @@
-import type { Mode } from '@digdir/designsystemet/color';
+import type { ColorMode } from '@digdir/designsystemet/color';
 import cl from 'clsx/lite';
 
 import { useThemeStore } from '../../store';
@@ -7,7 +7,7 @@ import { Scale } from '../Scale/Scale';
 import classes from './Scales.module.css';
 
 type ScalesProps = {
-  themeMode: Mode;
+  themeMode: ColorMode;
 };
 
 export const Scales = ({ themeMode }: ScalesProps) => {

diff --git a/packages/cli/src/colors/theme.ts b/packages/cli/src/colors/theme.ts
@@ -2,7 +2,7 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
 import { Hsluv } from 'hsluv';
 
-import type { BaseColors, ColorInfo, ColorNumber, ContrastMode, Mode, ThemeColors, ThemeInfo } from './types';
+import type { BaseColors, ColorInfo, ColorMode, ColorNumber, ContrastMode, ThemeColors, ThemeInfo } from './types';
 import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './utils';
 
 export const baseColors: Record<BaseColors, CssColor> = {
@@ -19,7 +19,7 @@ type Colors = Record<ThemeColors, CssColor>;
 export type ColorError = 'none' | 'decorative' | 'interaction';
 
 type GlobalGenType = {
-  themeMode?: Mode | 'all';
+  themeMode?: ColorMode | 'all';
   contrastMode?: ContrastMode;
 };
 
@@ -36,7 +36,7 @@ type ThemeGenType = {
  * @param contrastMode Contrast mode
  * @returns
  */
-const generateThemeColor = (color: CssColor, mode: Mode, contrastMode: 'aa' | 'aaa' = 'aa') => {
+const generateThemeColor = (color: CssColor, mode: ColorMode, contrastMode: 'aa' | 'aaa' = 'aa') => {
   const leoBackgroundColor = new BackgroundColor({
     name: 'backgroundColor',
     colorKeys: ['#ffffff'],
@@ -101,7 +101,11 @@ const generateThemeColor = (color: CssColor, mode: Mode, contrastMode: 'aa' | 'a
  * @param color The base color that is used to generate the color scale
  * @param mode The mode of the theme
  */
-export const generateScaleForColor = (color: CssColor, mode: Mode, contrastMode: 'aa' | 'aaa' = 'aa'): ColorInfo[] => {
+export const generateScaleForColor = (
+  color: CssColor,
+  mode: ColorMode,
+  contrastMode: 'aa' | 'aaa' = 'aa',
+): ColorInfo[] => {
   const themeColor = generateThemeColor(color, mode, contrastMode);
 
   const leoBackgroundColor = new BackgroundColor({
@@ -148,7 +152,7 @@ export const generateScaleForColor = (color: CssColor, mode: Mode, contrastMode:
  *
  * @param color The base color that is used to generate the color theme
  */
-export const generateThemeForColor = (color: CssColor, contrastMode: 'aa' | 'aaa' = 'aa') => {
+export const generateThemeForColor = (color: CssColor, contrastMode: 'aa' | 'aaa' = 'aa'): ThemeInfo => {
   const lightScale = generateScaleForColor(color, 'light', contrastMode);
   const darkScale = generateScaleForColor(color, 'dark', contrastMode);
   const contrastScale = generateScaleForColor(color, 'contrast', contrastMode);
@@ -157,7 +161,7 @@ export const generateThemeForColor = (color: CssColor, contrastMode: 'aa' | 'aaa
     light: lightScale,
     dark: darkScale,
     contrast: contrastScale,
-  } as ThemeInfo;
+  };
 };
 
 export const generateGlobalColors = ({ contrastMode = 'aa' }: GlobalGenType) => {
@@ -185,7 +189,7 @@ export const generateGlobalColors = ({ contrastMode = 'aa' }: GlobalGenType) =>
  * @param contrastMode The contrast mode to use
  * @returns
  */
-export const generateColorTheme = ({ colors, contrastMode = 'aa' }: ThemeGenType) => {
+export const generateColorTheme = ({ colors, contrastMode = 'aa' }: ThemeGenType): Record<ThemeColors, ThemeInfo> => {
   const accentTheme = generateThemeForColor(colors.accent, contrastMode);
   const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
   const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);

diff --git a/packages/cli/src/colors/types.ts b/packages/cli/src/colors/types.ts
@@ -1,6 +1,6 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 
-export type Mode = 'light' | 'dark' | 'contrast';
+export type ColorMode = 'light' | 'dark' | 'contrast';
 export type ContrastMode = 'aa' | 'aaa';
 export type ColorNumber = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15;
 export type BaseColors = 'red' | 'blue' | 'green' | 'orange' | 'purple' | 'yellow';

diff --git a/packages/cli/src/colors/utils.ts b/packages/cli/src/colors/utils.ts
@@ -282,8 +282,8 @@ export const getLightnessFromHex = (hex: string) => {
 /**
  * Get the contrast ratio between two HEX colors
  *
- * @param {CssColor} color1 The first color
- * @param {CssColor} color2 The second color
+ * @param color1 The first color
+ * @param color2 The second color
  * @returns
  */
 export const getContrastFromHex = (color1: CssColor, color2: CssColor) => {
@@ -327,9 +327,9 @@ export const getContrastFromLightness = (lightness: number, mainColor: CssColor,
 /**
  * Check if two colors have enough contrast to be used together
  *
- * @param {CssColor} color1 The first color
- * @param {CssColor} color2 The second color
- * @returns {boolean} If the colors have enough contrast
+ * @param color1 The first color
+ * @param color2 The second color
+ * @returns If the colors have enough contrast
  */
 export const areColorsContrasting = (color1: CssColor, color2: CssColor, type: 'decorative' | 'aa' | 'aaa' = 'aa') => {
   const contrast = getContrastFromHex(color1, color2);
@@ -361,8 +361,8 @@ export const getApcaContrastLc = (textColor: CssColor, backgroundColor: CssColor
 /**
  * Check if aa string value is a HEX color
  *
- * @param {string} hex The string to check
- * @returns {boolean} If the string is a HEX color
+ * @param hex The string to check
+ * @returns If the string is a HEX color
  */
 export const isHexColor = (hex: string) => {
   return typeof hex === 'string' && hex.length === 6 && !Number.isNaN(Number('0x' + hex));

diff --git a/packages/cli/src/tokens/create/index.ts b/packages/cli/src/tokens/create/index.ts
@@ -1,39 +1,30 @@
 import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { baseColors, generateScaleForColor } from '../../colors';
-import type { ColorInfo, ThemeColors } from '../../colors';
+import type { ColorInfo, ColorMode, ThemeColors } from '../../colors';
 
-export type modeType = 'light' | 'dark' | 'contrast';
-
-type TokenModalProps = {
-  accentColor: CssColor;
-  neutralColor: CssColor;
-  brand1Color: CssColor;
-  brand2Color: CssColor;
-  brand3Color: CssColor;
-  borderRadius: string;
-};
+type Colors = Record<ThemeColors, CssColor>;
 
 const generateJsonForColor = (colorArray: ColorInfo[]) => {
-  const obj: { [key: string]: { value: string; type: string } } = {};
+  const obj: { [key: string]: { $value: string; $type: string } } = {};
   for (let i = 0; i < colorArray.length; i++) {
     if (i === 13 && colorArray.length >= 14) {
       obj['contrast-1'] = {
-        value: colorArray[i].hex,
-        type: 'color',
+        $value: colorArray[i].hex,
+        $type: 'color',
       };
     } else if (i === 14 && colorArray.length >= 15) {
       obj['contrast-2'] = {
-        value: colorArray[i].hex,
-        type: 'color',
+        $value: colorArray[i].hex,
+        $type: 'color',
       };
     } else {
-      obj[i + 1] = { value: colorArray[i].hex, type: 'color' };
+      obj[i + 1] = { $value: colorArray[i].hex, $type: 'color' };
     }
   }
   return obj;
 };
 
-const genereateGlobalsJson = (theme: modeType) => {
+const genereateGlobalsJson = (theme: ColorMode) => {
   const blueScale = generateScaleForColor(baseColors.blue, theme);
   const greenScale = generateScaleForColor(baseColors.green, theme);
   const orangeScale = generateScaleForColor(baseColors.orange, theme);
@@ -55,15 +46,13 @@ const genereateGlobalsJson = (theme: modeType) => {
   const json = JSON.stringify(obj, null, '\t');
 };
 
-const run = ({ colors }: { colors: TokenModalProps }) => {
-  const { accentColor, neutralColor, brand1Color, brand2Color, brand3Color } = colors;
-
-  const generateThemeJson = (theme: modeType) => {
-    const accentColors = generateScaleForColor(accentColor, theme);
-    const neutralColors = generateScaleForColor(neutralColor, theme);
-    const brand1Colors = generateScaleForColor(brand1Color, theme);
-    const brand2Colors = generateScaleForColor(brand2Color, theme);
-    const brand3Colors = generateScaleForColor(brand3Color, theme);
+const run = ({ colors }: { colors: Colors }) => {
+  const generateThemeJson = (theme: ColorMode) => {
+    const accentColors = generateScaleForColor(colors.accent, theme);
+    const neutralColors = generateScaleForColor(colors.neutral, theme);
+    const brand1Colors = generateScaleForColor(colors.brand1, theme);
+    const brand2Colors = generateScaleForColor(colors.brand2, theme);
+    const brand3Colors = generateScaleForColor(colors.brand3, theme);
 
     const obj = {
       theme: {
@@ -75,6 +64,6 @@ const run = ({ colors }: { colors: TokenModalProps }) => {
       },
     };
 
-    const json = JSON.stringify(obj, null, '\t');
+    return JSON.stringify(obj, null, '\t');
   };
 };