Merge branch 'next' into css/button-hover-tok

digdir · Nov 21, 2024 · aba6895 · aba6895
2 parents 7d409cd + 4874566
commit aba6895
Show file tree

Hide file tree

Showing 80 changed files with 522 additions and 216 deletions.
diff --git a/.changeset/loud-dragons-build.md b/.changeset/loud-dragons-build.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet": minor
+---
+
+CLI: `tokens build` command now generates a `colors.d.ts` file which enables type safety for the `data-color` attribute when included in your `tsconfig.json`. The `@digdir/designsystemet-theme` package has been updated to include types for those themes.
diff --git a/.changeset/mean-penguins-sing.md b/.changeset/mean-penguins-sing.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": minor
+---
+
+`data-color` prop now supports type safety based on the token structure which was used to generate the theme CSS. Instructions for enabling this has been added to the README. An optional `react-types.d.ts` has also been added, which adds type hints for `data-color` and `data-size` to all HTML elements.
diff --git a/.changeset/sharp-humans-itch.md b/.changeset/sharp-humans-itch.md
@@ -0,0 +1,8 @@
+---
+"@digdir/designsystemet-react": major
+"@digdir/designsystemet-theme": major
+"@digdir/designsystemet-css": major
+"@digdir/designsystemet": minor
+---
+
+**BREAKING CHANGE**: The attribute / prop `data-ds-color-mode` has been renamed to `data-color-scheme`
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ next-env.d.ts
 
 # jest/vitest test reports
 test-report.xml
+
+packages/cli/test-tokens-create
+packages/cli/test-tokens-build
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -14,7 +14,7 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "cssvar.files": [
-    "packages/theme/brand/digdir/color-mode/light.css",
+    "packages/theme/brand/digdir/color-scheme/light.css",
     "packages/theme/brand/digdir/typography/primary.css",
     "packages/theme/brand/digdir/semantic.css"
   ],

diff --git a/README.md b/README.md
@@ -107,6 +107,67 @@ import { Button } from '@digdir/designsystemet-react';
 
 `@digdir/designsystemet-theme` and `@digdir/designsystemet-css` only needs to be imported once.
 
+### 4. Add TypeScript types for colors
+
+Because color names depend on which theme is being used, you have to add the following to your `tsconfig.json` to
+use all your colors in the components which have a `data-color` prop:
+
+#### When using `@digdir/designsystemet-theme`
+
+```jsonc
+{
+  // ...other settings
+  "compilerOptions": {
+    // ...other compilerOptions
+    "types": [
+      // ...other types
+      "@digdir/designsystemet-theme/colors.d.ts"
+      ]
+  },
+}
+```
+
+#### When using a custom theme
+The CLI `designsystemet tokens build` command will output a `colors.d.ts` file to your chosen output directory.
+In the example, replace `<your-path>` with the actual path you used when running the command.
+
+```jsonc
+{
+  // ...other settings
+  "compilerOptions": {
+    // ...other compilerOptions
+    "types": [
+      // ...other types
+      "<your-path>/colors.d.ts"
+      ]
+  },
+}
+```
+
+### 5. Add editor hints for data-color & data-size on HTML elements (optional)
+
+You may want editor hints for `data-color` and `data-size` attributes on HTML elements
+like `<span>` or `<div>`, since these attributes can affect components nested within
+these elements.
+
+This requires augmenting React's built-in types, and is therefore opt-in. If you want this,
+add the following to your `tsconfig.json`:
+
+```jsonc
+{
+  // ...other settings
+  "compilerOptions": {
+    // ...other compilerOptions
+    "types": [
+      // ...other types
+      "@digdir/designsystemet-react/react-types.d.ts"
+      ]
+  },
+}
+```
+
+
+
 ## 🫶 Contributing
 
 Learn how you can contribute to this project by reading our [Code of Conduct](./CODE_OF_CONDUCT.md) and [Contributing Guide](./CONTRIBUTING.md).

diff --git a/apps/_components/src/CodeSnippet/CodeSnippet.tsx b/apps/_components/src/CodeSnippet/CodeSnippet.tsx
@@ -75,7 +75,7 @@ const CodeSnippet = ({
   return (
     <div
       className={cl(classes.codeSnippet, className)}
-      data-ds-color-mode='dark'
+      data-color-scheme='dark'
       {...rest}
     >
       {snippet && (

diff --git a/apps/_components/src/Footer/Footer.tsx b/apps/_components/src/Footer/Footer.tsx
@@ -49,7 +49,7 @@ export const Footer = forwardRef<HTMLElement, FooterProps>(function Footer(
     <footer
       ref={ref}
       className={cl(classes.footer, className)}
-      data-ds-color-mode='dark'
+      data-color-scheme='dark'
       {...rest}
     >
       <div className={classes.top}>

diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -6,8 +6,8 @@
   z-index: 5;
   background-color: var(--ds-color-neutral-background-default);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-subtle);
   }
 }

diff --git a/apps/_components/src/Header/Header.tsx b/apps/_components/src/Header/Header.tsx
@@ -74,7 +74,7 @@ const Header = ({
 
   const handleThemeChange = (newTheme: 'dark' | 'light') => {
     setTheme(newTheme);
-    document.documentElement.setAttribute('data-ds-color-mode', newTheme);
+    document.documentElement.setAttribute('data-color-scheme', newTheme);
   };
 
   useEffect(() => {

diff --git a/apps/_components/tsconfig.json b/apps/_components/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "../../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "./tsc-build",
     "declarationDir": "./dist/types",

diff --git a/apps/storefront/app/bloggen/(frontpage)/layout.module.css b/apps/storefront/app/bloggen/(frontpage)/layout.module.css
@@ -6,8 +6,8 @@
   padding-top: var(--ds-spacing-18) !important;
   padding-bottom: var(--page-spacing-bottom) !important;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }

diff --git a/apps/storefront/app/bloggen/(frontpage)/page.mdx b/apps/storefront/app/bloggen/(frontpage)/page.mdx
@@ -77,8 +77,8 @@ export const metadata = {
     body {
       background-color: var(--ds-color-neutral-background-subtle);
 
-        [data-ds-color-mode='dark'] &,
-        [data-ds-color-mode='auto'] & {
+        [data-color-scheme='dark'] &,
+        [data-color-scheme='auto'] & {
           background-color: var(--ds-color-neutral-backround-default);
         }
     }

diff --git a/apps/storefront/app/bloggen/2024/v1rc1/page.mdx b/apps/storefront/app/bloggen/2024/v1rc1/page.mdx
@@ -94,11 +94,11 @@ Denne installerer alle tre pakken, og inneholder tokens, CSS og React komponente
 
 #### Fargemodus
 
-Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-ds-color-mode="MODE"`.
+Ønsker du å teste `dark`, `light` eller `contrast` modus kan du legge på data-atributtet `data-color-scheme="MODE"`.
 Denne kan legges hvor som helst, og endrer alle barn til modusen du har valgt.
 
 <CodeSnippet language='ts'>
-  {`<Accordion data-ds-color-mode='dark'>...</Accordion>`}
+  {`<Accordion data-color-scheme='dark'>...</Accordion>`}
 </CodeSnippet>
 
 #### Design-tokens templat

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -17,8 +17,8 @@
 }
 
 .card {
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     --dsc-card-background: var(--ds-color-neutral-surface-default);
   }
 }

diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.tsx
@@ -89,8 +89,8 @@ function PostLayout({
       <style>
         {`
           header {
-            [data-ds-color-mode='dark'] &,
-            [data-ds-color-mode='auto'] & {
+            [data-color-scheme='dark'] &,
+            [data-color-scheme='auto'] & {
               background-color: var(--ds-color-neutral-background-default) !important;
             }
           }

diff --git a/apps/storefront/app/komponenter/page.tsx b/apps/storefront/app/komponenter/page.tsx
@@ -27,8 +27,8 @@ export default function page() {
     body {
       background-color: var(--ds-color-neutral-background-subtle);
 
-        [data-ds-color-mode='dark'] &,
-        [data-ds-color-mode='auto'] & {
+        [data-color-scheme='dark'] &,
+        [data-color-scheme='auto'] & {
           background-color: var(--ds-color-neutral-background-default);
         }
     }

diff --git a/apps/storefront/app/layout.tsx b/apps/storefront/app/layout.tsx
@@ -99,7 +99,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang='en' data-ds-color-mode='auto'>
+    <html lang='en' data-color-scheme='auto'>
       <body>
         <div className='root'>
           <SkipLink href='#main'>Hopp til hovedinnhold</SkipLink>

diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -12,8 +12,8 @@
   background-color: var(--ds-color-neutral-background-default);
   gap: var(--ds-spacing-4);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-subtle);
   }
 }

diff --git a/apps/storefront/components/ComponentCard/ComponentCard.module.css b/apps/storefront/components/ComponentCard/ComponentCard.module.css
@@ -9,8 +9,8 @@
   text-decoration: none;
   transition: 0.2s transform ease-in-out, 0.2s box-shadow ease-in-out;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -59,17 +59,17 @@
   background-color: var(--ds-color-neutral-background-default);
   box-shadow: none;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }
 
 .white {
   background-color: var(--ds-color-neutral-background-default);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }

diff --git a/apps/storefront/components/TeaserCard/TeaserCard.module.css b/apps/storefront/components/TeaserCard/TeaserCard.module.css
@@ -11,8 +11,8 @@
   z-index: 2;
   height: 100%;
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-surface-default);
   }
 }

diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.tsx
@@ -80,8 +80,8 @@ const MenuPageLayout = ({ content, data, banner }: PageLayoutProps) => {
       <style>
         {`
           header {
-            [data-ds-color-mode='dark'] &,
-            [data-ds-color-mode='auto'] & {
+            [data-color-scheme='dark'] &,
+            [data-color-scheme='auto'] & {
               background-color: var(--ds-color-neutral-background-default) !important;
             }
           }

diff --git a/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css b/apps/storefront/layouts/NavMenuPageLayout/NavMenuPageLayout.module.css
@@ -20,8 +20,8 @@
 .outerPage {
   background-color: var(--ds-color-neutral-background-subtle);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }
diff --git a/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css b/apps/storefront/layouts/NavPageLayout/NavPageLayout.module.css
@@ -2,8 +2,8 @@
   padding-bottom: var(--ds-spacing-12);
   padding-top: var(--ds-spacing-12);
 
-  [data-ds-color-mode='dark'] &,
-  [data-ds-color-mode='auto'] & {
+  [data-color-scheme='dark'] &,
+  [data-color-scheme='auto'] & {
     background-color: var(--ds-color-neutral-background-default);
   }
 }