feat: support colors as args for create tokens (#2290)

resolves #2269 Use theme-builder to select desired colors <img width="1440" alt="image" src="https://github.com/user-attachments/assets/42828ba6-76cf-4989-b835-5b369c29f42f"> Paste provided cli command in a terminal to generate desired design-tokens <img width="1238" alt="image" src="https://github.com/user-attachments/assets/be61c86d-a62e-480b-b1d3-ec7fdb014b41">
digdir · Aug 27, 2024 · cd1c607 · cd1c607
1 parent f661ba1
commit cd1c607
Show file tree

Hide file tree

Showing 37 changed files with 743 additions and 298 deletions.
diff --git a/.changeset/serious-frogs-rescue.md b/.changeset/serious-frogs-rescue.md
@@ -0,0 +1,5 @@
+---
+'@digdir/designsystemet': minor
+---
+
+New create tokens script with color options support
diff --git a/.github/workflows/deploy-theme.yml b/.github/workflows/deploy-theme.yml
@@ -12,10 +12,6 @@ on:
         options:
           - production
           - next
-  pull_request:
-    types: [opened, synchronize]
-    paths:
-      - 'apps/theme/**'
   push:
     branches:
       - next

diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,5 @@
 # Built files
 dist
-build
 ignore
 tsc-build
 

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.module.css b/apps/_components/src/CodeSnippet/CodeSnippet.module.css
@@ -7,6 +7,10 @@
   height: fit-content;
 }
 
+.codeSnippet > pre {
+  padding-right: var(--ds-spacing-11) !important;
+}
+
 .copyButton {
   position: absolute;
   top: var(--ds-spacing-2);

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -25,7 +25,7 @@ const plugins = [
 ];
 
 type CodeSnippetProps = {
-  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json';
+  language?: 'css' | 'html' | 'ts' | 'markdown' | 'js' | 'json' | 'sh';
   children?: string;
 };
 
@@ -85,7 +85,7 @@ const CodeSnippet = ({
           </Tooltip>
           <SyntaxHighlighter
             style={nightOwl}
-            language='jsx'
+            language={language}
             customStyle={{
               fontSize: '15px',
               margin: 0,

diff --git a/apps/theme/app/page.tsx b/apps/theme/app/page.tsx
@@ -5,9 +5,9 @@ import { Heading } from '@digdir/designsystemet-react';
 import type {
   ColorError,
   ColorInfo,
-  ColorType,
+  ColorMode,
   ContrastMode,
-  Mode,
+  ThemeColors,
   ThemeInfo,
 } from '@digdir/designsystemet/color';
 import {
@@ -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(() => {
@@ -123,7 +123,7 @@ export default function Home() {
    * @param returnColor The default color to return
    * @returns The color from the query or the default color
    */
-  const getQueryColor = (colorType: ColorType, returnColor: CssColor) => {
+  const getQueryColor = (colorType: ThemeColors, returnColor: CssColor) => {
     const queryColor = params.get(colorType);
     if (queryColor && isHexColor(queryColor.substring(1))) {
       return queryColor as CssColor;
@@ -139,7 +139,11 @@ export default function Home() {
    * @param color The color to update
    * @param theme The theme to update
    */
-  const updateColor = (type: ColorType, color: CssColor, theme: ThemeInfo) => {
+  const updateColor = (
+    type: ThemeColors,
+    color: CssColor,
+    theme: ThemeInfo,
+  ) => {
     const colorErrorSetterMap = {
       accent: setAccentError,
       neutral: setNeutralError,
@@ -167,7 +171,7 @@ export default function Home() {
    * @param colorType The type of color to set
    * @param color The color to set
    */
-  const colorQuerySetter = (colorType: ColorType, color: CssColor) => {
+  const colorQuerySetter = (colorType: ThemeColors, color: CssColor) => {
     const defaultColor = {
       accent: Settings.accentBaseColor,
       neutral: Settings.neutralBaseColor,
@@ -193,7 +197,7 @@ export default function Home() {
     contrastMode,
   }: {
     colors?: ThemeInfo;
-    theme?: Mode;
+    theme?: ColorMode;
     borderRadius?: string;
     contrastMode?: ContrastMode;
   }) => {
@@ -215,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/Color/Color.tsx b/apps/theme/components/Color/Color.tsx
@@ -1,5 +1,5 @@
 import { omit } from '@digdir/designsystemet-react';
-import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
+import type { ColorInfo, ThemeColors } from '@digdir/designsystemet/color';
 import { SunIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 import { forwardRef } from 'react';
@@ -16,7 +16,7 @@ type ColorProps = {
   featured?: boolean;
   hex?: string;
   showColorMeta?: boolean;
-  type: ColorType;
+  type: ThemeColors;
 } & Omit<React.HTMLAttributes<HTMLButtonElement>, 'color'>;
 
 const Color = forwardRef<HTMLButtonElement, ColorProps>(

diff --git a/apps/theme/components/Group/Group.tsx b/apps/theme/components/Group/Group.tsx
@@ -1,5 +1,5 @@
 import { RovingFocusItem } from '@digdir/designsystemet-react';
-import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
+import type { ColorInfo, ThemeColors } from '@digdir/designsystemet/color';
 import cl from 'clsx/lite';
 
 import { Color } from '../Color/Color';
@@ -12,7 +12,7 @@ type GroupProps = {
   showColorMeta?: boolean;
   names?: string[];
   featured?: boolean;
-  type: ColorType;
+  type: ThemeColors;
 };
 
 export const Group = ({

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/Scale/Scale.tsx b/apps/theme/components/Scale/Scale.tsx
@@ -1,5 +1,5 @@
 import { RovingFocusRoot } from '@digdir/designsystemet-react';
-import type { ColorInfo, ColorType } from '@digdir/designsystemet/color';
+import type { ColorInfo, ThemeColors } from '@digdir/designsystemet/color';
 import { useEffect, useState } from 'react';
 
 import type { modeType } from '../../types';
@@ -12,7 +12,7 @@ type ScaleProps = {
   showHeader?: boolean;
   showColorMeta?: boolean;
   themeMode: modeType;
-  type: ColorType;
+  type: ThemeColors;
 };
 
 const setTokens = (lightColors: ColorInfo[], type: string) => {

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/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx b/apps/theme/components/ThemeToolbar/ThemeToolbar.tsx
@@ -2,8 +2,8 @@ import type { CssColor } from '@adobe/leonardo-contrast-colors';
 import { NativeSelect } from '@digdir/designsystemet-react';
 import type {
   ColorError,
-  ColorType,
   ContrastMode,
+  ThemeColors,
 } from '@digdir/designsystemet/color';
 import cl from 'clsx/lite';
 
@@ -20,7 +20,7 @@ type ThemeToolbarProps = {
   brand2Error: ColorError;
   brand3Error: ColorError;
   borderRadius: string;
-  onColorChanged: (type: ColorType, color: CssColor) => void;
+  onColorChanged: (type: ThemeColors, color: CssColor) => void;
   onContrastModeChanged: (mode: 'aa' | 'aaa') => void;
   onBorderRadiusChanged: (radius: string) => void;
   contrastMode: ContrastMode;