feat: replace fixed colors with semantic tokens

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,7 +1,26 @@
+import React from 'react';
 import { Preview } from '@storybook/react';
 import { themes } from '@storybook/theming';
+import { ClassicColors, ModernColors } from '../src/essentials/Colors/globalStyles';
+import { getSemanticValue } from '../src/utils/cssVariables';
+
+const THEMES = {
+ classic: ClassicColors,
+ modern: ModernColors
+} as const;
+
+export const withTheme = (Story, context) => {
+ const Theme = THEMES[context.globals.theme];
+ return (
+ <>
+ <Theme />
+ <Story {...context} />
+ </>
+ );
+};
 
 export const preview: Preview = {
+ decorators: [withTheme],
  parameters: {
  actions: { argTypesRegex: '^on[A-Z].*' },
  viewMode: 'docs',
@@ -12,14 +31,22 @@ export const preview: Preview = {
  date: /Date$/
  }
  },
+ options: {
+ storySort: {
+ order: ['Welcome', 'Get Started', 'Essentials', 'Components', 'Form Elements']
+ }
+ },
  docs: {
- theme: themes.light
+ theme: themes.light,
+ toc: {
+ headingSelector: 'h2, h3'
+ }
  },
  backgrounds: {
  default: 'light',
  values: [
- { name: 'light', value: '#FFFFFF' },
- { name: 'dark', value: '#001E3E' }
+ { name: 'light', value: getSemanticValue('background-surface-neutral-default') },
+ { name: 'dark', value: getSemanticValue('background-surface-primary-default') }
  ]
  },
  viewport: {
@@ -65,10 +92,17 @@ export const preview: Preview = {
  type: 'desktop'
  }
  }
- },
- options: {
- storySort: {
- order: ['Welcome', 'Get Started', 'Essentials', 'Components', 'Form Elements']
+ }
+ },
+ globalTypes: {
+ theme: {
+ description: 'Global theme for components',
+ defaultValue: 'modern',
+ toolbar: {
+ title: 'Theme',
+ icon: 'paintbrush',
+ items: ['modern', 'classic'],
+ dynamicTitle: true
  }
  }
  }

docs/components/ItemWrapper.ts

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { compose, margin, MarginProps, padding, PaddingProps } from 'styled-system';
-import { Colors, Spaces } from '../../src/essentials';
+import { Spaces } from '../../src/essentials';
+import { getSemanticValue } from '../../src/utils/cssVariables';
 
 type ItemWrapperProps = PaddingProps &
  MarginProps & {
@@ -17,7 +18,8 @@ const ItemWrapper = styled.div<ItemWrapperProps>`
  grid-template-columns: ${p => (p.gridTemplate ? p.gridTemplate : '1fr')};
  grid-row-gap: ${Spaces[3]};
  grid-column-gap: ${Spaces[2]};
- background-color: ${p => (p.inverted ? Colors.AUTHENTIC_BLUE_900 : Colors.WHITE)};
+ background-color: ${p =>
+ getSemanticValue(p.inverted ? 'background-surface-primary-default' : 'background-surface-neutral-default')};
 
  ${compose(padding, margin)}
 `;

package.json

@@ -61,21 +61,21 @@
  "@commitlint/config-conventional": "^8.3.4",
  "@semantic-release/changelog": "^5.0.1",
  "@semantic-release/git": "^9.0.0",
- "@storybook/addon-actions": "^7.0.18",
- "@storybook/addon-essentials": "^7.0.18",
- "@storybook/addon-interactions": "^7.0.18",
- "@storybook/addon-links": "^7.0.18",
- "@storybook/manager-api": "^7.0.18",
- "@storybook/react": "^7.0.18",
- "@storybook/react-webpack5": "^7.0.18",
- "@storybook/testing-library": "^0.1.0",
- "@storybook/theming": "^7.0.18",
+ "@storybook/addon-actions": "^7.1.1",
+ "@storybook/addon-essentials": "^7.1.1",
+ "@storybook/addon-interactions": "^7.1.1",
+ "@storybook/addon-links": "^7.1.1",
+ "@storybook/manager-api": "^7.1.1",
+ "@storybook/react": "^7.1.1",
+ "@storybook/react-webpack5": "^7.1.1",
+ "@storybook/testing-library": "^0.2.0",
+ "@storybook/theming": "^7.1.1",
  "@svgr/core": "^5.3.0",
  "@svgr/plugin-prettier": "^5.3.0",
  "@svgr/plugin-svgo": "^5.3.0",
- "@testing-library/jest-dom": "^5.11.9",
- "@testing-library/react": "^11.2.5",
- "@testing-library/user-event": "^12.8.3",
+ "@testing-library/jest-dom": "^5.17.0",
+ "@testing-library/react": "^14.0.0",
+ "@testing-library/user-event": "^14.4.3",
  "@types/babel__traverse": "7.17.1",
  "@types/jest": "^25.1.4",
  "@types/jest-axe": "^3.2.1",
@@ -98,7 +98,7 @@
  "eslint-plugin-promise": "^5.1.0",
  "eslint-plugin-react": "^7.24.0",
  "eslint-plugin-react-hooks": "^4.2.0",
- "eslint-plugin-storybook": "^0.6.12",
+ "eslint-plugin-storybook": "^0.6.13",
  "eslint-plugin-unicorn": "^34.0.1",
  "husky": "^4.2.3",
  "jest": "^26.6.3",
@@ -115,7 +115,7 @@
  "react-helmet": "^6.0.0",
  "react-select-event": "^5.3.0",
  "semantic-release": "^17.4.2",
- "storybook": "^7.0.18",
+ "storybook": "^7.1.1",
  "styled-components": "^5.3.8",
  "stylelint": "^13.2.1",
  "stylelint-config-prettier": "^8.0.1",

scripts/generate-icons

@@ -9,15 +9,6 @@ const generate = require('@babel/generator').default;
 const minimatch = require('minimatch');
 const { Project } = require('ts-morph');
 
-let Colors;
-try {
- Colors = require('../lib/cjs/essentials').Colors;
-} catch (e) {
- console.error(`Library build was not found, run \`npm run build\` first.`);
- console.debug(e);
- process.exit(1);
-}
-
 const argv = yargs.command('$0 <input>', '', yargs => {
  yargs.positional('input', {
  type: 'string'
@@ -51,16 +42,15 @@ const argv = yargs.command('$0 <input>', '', yargs => {
 function template(babel, opts, { imports, componentName, props, jsx, exports }) {
  const header = `// DO NOT EDIT. This file was generated by running \`npm run generate\`.`;
 
- const libImports = `${opts.colorProp ? "import { Colors } from '../../essentials';" : ''}`;
+ const libImports = `${opts.colorProp ? "import { getSemanticValue } from '../../utils/cssVariables';" : ''}`;
 
  const typeDef = `type Props = ${opts.colorProp ? 'IconProps' : "Omit<IconProps, 'color'>"};`;
 
  const name = generate(componentName).code;
  const nameDecl = `${name}: React.FC<Props>`;
 
- const defaultProps = `${name}.defaultProps = {
- ${opts.colorProp ? 'color: Colors.AUTHENTIC_BLUE_900' : ''}
- };`;
+ const iconProps = opts.colorProp ? "({ size = 'medium', color = getSemanticValue('foreground-primary'), ...rest})" :
+ "({ size = 'medium', ...props})";
 
  return babel.template.smart({ plugins: ['typescript'] }).ast`
  ${header}
@@ -73,16 +63,15 @@ function template(babel, opts, { imports, componentName, props, jsx, exports })
 
  ${typeDef}
 
- const ${nameDecl}: FC = ({ size = 'medium', ...props}: IconProps) => {
+ const ${nameDecl}: FC = ${iconProps} => {
+ ${opts.colorProp ? 'const props = {...rest, color}' : ''}
  const sizePx = (Number.isFinite(size as number)) ? size : get(\`iconSizes.\${size}\`)(props) || get('iconSizes.medium')(props);
-
+ 
  return (
  ${jsx}
  );
  };
 
- ${defaultProps}
-
  ${exports}`;
 }
 
@@ -163,7 +152,8 @@ for (let file of getSvgSources(argv.input, { recursive: argv.recursive })) {
  svgProps: { width: '{sizePx}', height: '{sizePx}' },
  replaceAttrValues: colorProp
  ? {
- [Colors.AUTHENTIC_BLUE_900]: 'currentColor'
+ // replace default color for the source svg icons (see assets/icons folder)
+ ['#001E3E']: 'currentColor'
  }
  : {},
  ...additionalConfig

src/components/Accordion/Accordion.spec.tsx

@@ -26,17 +26,18 @@ describe('Accordion', () => {
  expect(screen.queryByText('Place holder')).not.toBeInTheDocument();
  });
 
- it('render default variant open', () => {
+ it('render default variant open', async () => {
+ const user = userEvent.setup();
  render(
  <Accordion heading="Some heading" info="some info" description="some description" buttonLabel="button">
  <p>Place holder</p>
  </Accordion>
  );
- userEvent.click(screen.getByText('Some heading'));
+ await user.click(screen.getByText('Some heading'));
  expect(screen.getByText('Place holder')).toBeInTheDocument();
  expect(screen.getByText('some description')).toBeInTheDocument();
  expect(screen.getByText('button')).toBeInTheDocument();
- userEvent.click(screen.getByText('button'));
+ await user.click(screen.getByText('button'));
  expect(screen.queryByText('Place holder')).toBeFalsy();
  });
 
@@ -58,16 +59,17 @@ describe('Accordion', () => {
  expect(screen.queryByText('paragraph')).toBeFalsy();
  });
 
- it('render compact variant open', () => {
+ it('render compact variant open', async () => {
+ const user = userEvent.setup();
  render(
  <Accordion heading="Some heading" description="some description" variant="compact">
  <p>Place holder</p>
  </Accordion>
  );
- userEvent.click(screen.getByText('Some heading'));
+ await user.click(screen.getByText('Some heading'));
  expect(screen.getByText('Place holder')).toBeInTheDocument();
  expect(screen.getByText('some description')).toBeInTheDocument();
- userEvent.click(screen.getByText('Some heading'));
+ await user.click(screen.getByText('Some heading'));
  expect(screen.queryByText('Place holder')).toBeFalsy();
  });
 });

src/components/Accordion/Accordion.tsx

@@ -1,15 +1,14 @@
 import React, { PropsWithChildren } from 'react';
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../essentials';
 import { Box } from '../Box/Box';
 import { Compact } from './components/Compact';
 import { DefaultPanel } from './components/Default';
 import { AccordionProps } from './types';
+import { getSemanticValue } from '../../utils/cssVariables';
 
 const HorizontalDivider = styled(Box)`
  border: 0;
- border-top: solid 0.0625rem ${SemanticColors.border.primary};
+ border-top: solid 0.0625rem ${getSemanticValue('border-neutral-default')};
 `;
 
 const HorizontalDividerTop = HorizontalDivider;

src/components/Accordion/components/ChevronDown.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { ChevronDownIcon } from '../../../icons';
-import { SemanticColors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 export const ChevronDown = styled(ChevronDownIcon)`
- color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
+ color: ${props => (props.color ? props.color : getSemanticValue('foreground-primary'))};
 `;

src/components/Accordion/components/ChevronUp.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { ChevronUpIcon } from '../../../icons';
-import { SemanticColors } from '../../../essentials';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 export const ChevronUp = styled(ChevronUpIcon)`
- color: ${props => (props.color ? props.color : SemanticColors.icon.primary)};
+ color: ${props => (props.color ? props.color : getSemanticValue('foreground-primary'))};
 `;

src/components/Accordion/components/Compact.tsx

@@ -1,14 +1,13 @@
-import React, { useState, ReactElement, PropsWithChildren } from 'react';
+import React, { ReactElement, useState, PropsWithChildren } from 'react';
 import styled from 'styled-components';
-
-import { SemanticColors } from '../../../essentials';
 import { Box } from '../../Box/Box';
 import { Headline } from '../../Headline/Headline';
 import { Header } from './Header';
 import { ChevronUp } from './ChevronUp';
 import { ChevronDown } from './ChevronDown';
 import { Description } from './Description';
 import { AccordionProps } from '../types';
+import { getSemanticValue } from '../../../utils/cssVariables';
 
 type Props = PropsWithChildren<
  Pick<AccordionProps, 'heading' | 'description' | 'defaultExpanded' | 'onExpand' | 'onCollapse'>
@@ -17,16 +16,9 @@ type Props = PropsWithChildren<
 const StyleHeadline = styled(Headline)``;
 
 const PanelHeader = styled(Header)`
- &:hover ${StyleHeadline} {
- color: ${SemanticColors.text.linkHover};
- }
-
- &:hover ${ChevronDown} {
- color: ${SemanticColors.text.linkHover};
- }
-
- &:hover ${ChevronUp} {
- color: ${SemanticColors.text.linkHover};
+ /* stylelint-disable */
+ &:hover ${StyleHeadline}, &:hover ${ChevronDown}, &:hover ${ChevronUp} {
+ color: ${getSemanticValue('foreground-accent-emphasized')};
  }
 `;