refactor: rename data-ds-color-mode to data-color-scheme

This does not currently affect the design tokens, which still contain the color scheme modes in the group "Mode". This will be changed later. Closes #2706
digdir · Nov 20, 2024 · 4ccbe68 · 4ccbe68
1 parent 566fa37
commit 4ccbe68
Show file tree

Hide file tree

Showing 47 changed files with 133 additions and 125 deletions.
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/.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/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/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);
   }
 }
diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -41,30 +41,30 @@ const getPath = (href: string | undefined): string => {
 
 const components = {
   p: (props: Props) => (
-    <Paragraph {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Paragraph {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   ol: (props: Props) => (
     <List.Ordered
       {...props}
       style={{ maxWidth: '70ch' }}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   ul: (props: Props) => (
     <List.Unordered
       {...props}
       style={{ maxWidth: '70ch' }}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   li: (props: Props) => (
     <List.Item
       {...props}
       className='sb-unstyled'
       style={{ maxWidth: '70ch' }}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   a: (props: LinkProps) => {
@@ -76,7 +76,7 @@ const components = {
         {...props}
         href={href}
         className='sb-unstyled'
-        data-ds-color-mode='light'
+        data-color-scheme='light'
       />
     );
   },
@@ -86,27 +86,27 @@ const components = {
       zebra
       className='sb-unstyled'
       style={{ width: '100%' }}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   thead: (props: Props) => (
-    <Table.Head {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Head {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   tbody: (props: Props) => (
-    <Table.Body {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Body {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   tr: (props: Props) => (
-    <Table.Row {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Row {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
   th: (props: Props) => (
     <Table.HeaderCell
       {...props}
       className='sb-unstyled'
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     />
   ),
   td: (props: Props) => (
-    <Table.Cell {...props} className='sb-unstyled' data-ds-color-mode='light' />
+    <Table.Cell {...props} className='sb-unstyled' data-color-scheme='light' />
   ),
 };
 
@@ -177,7 +177,7 @@ const preview: Preview = {
       Auto: 'auto',
     },
     defaultTheme: 'Light',
-    attributeName: 'data-ds-color-mode',
+    attributeName: 'data-color-scheme',
     parentSelector:
       '.sbdocs-preview .docs-story div:first-of-type, .sb-show-main:has(#storybook-docs[hidden="true"])',
   }),

diff --git a/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx b/apps/storybook/docs-components/DoAndDont/DoAndDont.tsx
@@ -12,7 +12,7 @@ const Wrapper = ({ variant, description, image, alt }: WrapperProps) => {
   return (
     <figure
       className={cl(styles.wrapper, styles[variant])}
-      data-ds-color-mode='light'
+      data-color-scheme='light'
     >
       <div className={styles.header}>
         <div className={styles.icon}>{icon}</div>

diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
@@ -80,8 +80,8 @@
   box-shadow: var(--ds-shadow-md);
 }
 
-.preview[data-ds-color-mode='dark'],
-.preview[data-ds-color-mode='contrast'] {
+.preview[data-color-scheme='dark'],
+.preview[data-color-scheme='contrast'] {
   --background: var(--neutral-1);
   --foreground: var(--neutral-2);
 }
diff --git a/apps/theme/components/Previews/Previews.tsx b/apps/theme/components/Previews/Previews.tsx
@@ -123,7 +123,7 @@ export const Previews = ({ themeMode, onThemeModeChange }: PreviewsProps) => {
           classes[themeMode as keyof typeof classes],
         )}
         id='preview'
-        data-ds-color-mode={themeMode}
+        data-color-scheme={themeMode}
       >
         {previewMode === 'components' && <Components />}
         {previewMode === 'dashboard' && <Dashboard />}

diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -35,7 +35,7 @@ const sd = new StyleDictionary();
  */
 const buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ['typography'] },
-  'color-mode': { getConfig: configs.colorModeVariables, dimensions: ['mode'] },
+  'color-scheme': { getConfig: configs.colorSchemeVariables, dimensions: ['mode'] },
   'main-color': { getConfig: configs.mainColorVariables, dimensions: ['main-color'] },
   'support-color': { getConfig: configs.supportColorVariables, dimensions: ['support-color'] },
   semantic: { getConfig: configs.semanticVariables, dimensions: ['semantic'] },

diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts
@@ -72,9 +72,9 @@ export type GetStyleDictionaryConfig = (
   },
 ) => StyleDictionaryConfig | { config: StyleDictionaryConfig; permutationOverrides?: Partial<ThemePermutation> }[];
 
-const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
-  const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
-  const layer = `ds.theme.color-mode.${mode}`;
+const colorSchemeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme }, { outPath }) => {
+  const selector = `${mode === 'light' ? ':root, ' : ''}[data-color-scheme="${mode}"]`;
+  const layer = `ds.theme.color-scheme.${mode}`;
 
   return {
     usesDtcg,
@@ -93,7 +93,7 @@ const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme },
         transforms: dsTransformers,
         files: [
           {
-            destination: `color-mode/${mode}.css`,
+            destination: `color-scheme/${mode}.css`,
             format: formats.colormode.name,
             filter: (token) => !token.isSource && typeEquals('color', token),
           },
@@ -315,7 +315,7 @@ const typographyVariables: GetStyleDictionaryConfig = ({ theme, typography }, {
 };
 
 export const configs = {
-  colorModeVariables,
+  colorSchemeVariables,
   mainColorVariables: colorCategoryVariables('main'),
   supportColorVariables: colorCategoryVariables('support'),
   typographyVariables,

diff --git a/packages/cli/src/tokens/build/formats/css.ts b/packages/cli/src/tokens/build/formats/css.ts
@@ -8,7 +8,7 @@ import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } f
 
 const prefersColorScheme = (mode: string, content: string) => `
 @media (prefers-color-scheme: ${mode}) {
-  [data-ds-color-mode="auto"] ${content}
+  [data-color-scheme="auto"] ${content}
 }
 `;