Merge pull request #491 from vrk-kpa/fix/styles-and-types-cleanup

Fix/styles and types cleanup
vrk-kpa · Aug 12, 2021 · 6f3600f · 6f3600f
2 parents dd42ec5 + 6dc6139
commit 6f3600f
Show file tree

Hide file tree

Showing 170 changed files with 1,954 additions and 4,894 deletions.
diff --git a/.styleguidist/colors.md b/.styleguidist/colors.md
@@ -3,55 +3,48 @@ Suomifi-styleguide colors
 ## Base
 
 ```jsx noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.base} />;
 ```
 
 ## Brand
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.brand} />;
 ```
 
 ## Depth
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.depth} />;
 ```
 
 ### DepthSecondary
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.depthSecondary} />;
 ```
 
 ## Highlight
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.hightlight} />;
 ```
 
 ## Accent
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.accent} />;
 ```
 
 ## Trafficlights
 
 ```js noeditor
-import { Colors } from '../src/core/Colors/Colors';
-import { colorTokens } from '../src/core/theme/colors';
+import { Colors, colorTokens } from '../src/docs/Colors/Colors';
 <Colors colors={colorTokens.trafficlights} />;
 ```
diff --git a/.styleguidist/spacing.md b/.styleguidist/spacing.md
@@ -1,9 +1,8 @@
 ```js noeditor
 import { default as styled } from 'styled-components';
-import { colors } from '../src/core/theme/colors';
+import { defaultSuomifiTheme } from '../src/core/theme';
 import { cssValueToString } from '../src/utils/css';
 import { element, fonts } from '../src/core/theme/reset';
-import { spacing } from '../src/core/theme/spacing';
 import { Text } from '../src/core/Text/Text';
 import clipboardCopy from 'clipboard-copy';
 
@@ -20,20 +19,20 @@ const Container = styled(({ size, name, ...passProps }) => (
   flex-direction: row;
   justify-content: space-between;
   align-items: flex-end;
-  margin-bottom: ${cssValueToString(spacing.xl)};
+  margin-bottom: ${cssValueToString(defaultSuomifiTheme.spacing.xl)};
   cursor: pointer;
 
   * {
     cursor: inherit;
   }
 
   > div:not(:first-of-type) {
-    margin-left: ${cssValueToString(spacing.s)};
+    margin-left: ${cssValueToString(defaultSuomifiTheme.spacing.s)};
   }
 `
 );
 
-const Square = styled(props => (
+const Square = styled((props) => (
   <div {...props}>
     <div className="box" />
   </div>
@@ -47,13 +46,13 @@ const Square = styled(props => (
     > .box {
       height: ${size};
       width: ${size};
-      border: 1px dashed ${colors.blackBase};
+      border: 1px dashed ${defaultSuomifiTheme.colors.blackBase};
       overflow: hidden;
     }
   `
 );
 
-const Bar = styled(props => (
+const Bar = styled((props) => (
   <div {...props}>
     <div className="row" />
     <div className="col" />
@@ -69,22 +68,22 @@ const Bar = styled(props => (
     > .row {
       height: ${size};
       width: 100%;
-      background-color: ${colors.depthDark1};
+      background-color: ${defaultSuomifiTheme.colors.depthDark1};
     }
     > .col {
       position: absolute;
       bottom: 0;
       right: 0;
       height: 100%;
       width: ${size};
-      background-color: ${colors.depthDark1};
+      background-color: ${defaultSuomifiTheme.colors.depthDark1};
     }
   `
 );
 
 const Name = styled(({ name, value, ...passProps }) => (
   <div {...passProps}>
-    <Text.lead>{name}</Text.lead>
+    <Text variant="lead">{name}</Text>
     <Text>{value}</Text>
   </div>
 ))(
@@ -95,7 +94,7 @@ const Name = styled(({ name, value, ...passProps }) => (
 `
 );
 
-Object.entries(spacing).map(([key, value]) => {
+Object.entries(defaultSuomifiTheme.spacing).map(([key, value]) => {
   const spacingValue = cssValueToString(value);
   return (
     <Container size={spacingValue} name={key} key={key}>

diff --git a/.styleguidist/styleguidist.sections.js b/.styleguidist/styleguidist.sections.js
@@ -5,15 +5,11 @@ const primitiveComponents = [
   'Block',
   'Button',
   'Heading',
-  'Chip',
   'VisuallyHidden',
   ['Form', 'TextInput'],
-  ['Form', 'Toggle'],
   ['Form', 'SearchInput'],
   ['Form', 'Checkbox'],
   ['Form', 'Textarea'],
-  ['Form', 'RadioButton'],
-  ['Form', 'MultiSelect'],
 ];
 
 const getComponent = ({ name, underName }) =>
@@ -55,8 +51,25 @@ module.exports = {
           name: 'Spacing',
           content: './.styleguidist/spacing.md',
         },
+        {
+          name: 'Theme',
+          content: './.styleguidist/theme.md',
+          sections: [
+            {
+              name: 'SuomifiThemeProvider',
+              components: getComponent({
+                underName: 'theme/SuomifiThemeProvider',
+                name: 'SuomifiThemeProvider',
+              }),
+            },
+            {
+              name: 'Default Theme',
+              content: './.styleguidist/themevalues.md',
+            },
+          ],
+        },
       ],
-      sectionDepth: 1,
+      sectionDepth: 2,
       expand: true,
     },
     {

diff --git a/.styleguidist/theme.md b/.styleguidist/theme.md
@@ -0,0 +1,7 @@
+## Suomi.fi theme
+
+SuomifiTheme provides all shared styles for the suomifi-ui-components library. The default theme consists of design tokens and styles derived from the tokens. The theme is applied with SuomifiThemeProvider and all components use it by default.
+
+The theme consists of Colors, Spacing, Typography, Gradients, Focus, Radius, Shadows, Transitions, Z-indexes and Raw design token values. Most of the default values for the theme are based on the [design tokens](https://github.com/vrk-kpa/suomifi-design-tokens).
+
+The theme can be customized by wrapping the target components to a SuomifiThemeProvider and providing customized theme for the provider.
diff --git a/.styleguidist/themevalues.md b/.styleguidist/themevalues.md
@@ -0,0 +1,157 @@
+## Default Theme Values
+
+### Colors
+
+Theme colors is of type _`ColorDesignTokens`_ and defines all the colors and gradients used in the components.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="colors:" values={suomifiTheme.colors} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Spacing
+
+Theme spacing is of type _`SpacingDesignTokens`_ and defines external spacing used between more complex elements as well as some parts of internal spacing.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="spacing:" values={suomifiTheme.spacing} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Typography
+
+Theme typography is of type _`TypographyDesignTokens`_ and defines most typography styles used in the components.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps
+      title="typography:"
+      values={suomifiTheme.typography}
+    />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Gradients
+
+Theme gradients is of type _`GradientDesignTokens`_ and defines all gradient colors used in the components. By default, gradients are based on color design tokens.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="gradients:" values={suomifiTheme.gradients} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Focus
+
+Theme focus is of type _`FocusDesignTokens`_ and defines all focus styles used in the library. By default, focus styles are based on color, spacing and radius design tokens.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="focus:" values={suomifiTheme.focus} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Radius
+
+Theme focus is of type _`RadiusDesignTokens`_ and defines all focus styles used in the library.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="radius:" values={suomifiTheme.radius} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Shadows
+
+Theme focus is of type _`ShadowDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="shadows:" values={suomifiTheme.shadows} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Transitions
+
+Theme focus is of type _`TransitionDesignTokens`_ and defines all shadow styles used in the library. By default, shadow styles are based on color design tokens.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps
+      title="transitions:"
+      values={suomifiTheme.transitions}
+    />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Z-indexes
+
+Theme zindexes is of type _`ZIndexDesignTokens`_ and defines all z-indexes used in the library. Most implementations use portals by default and do not rely on z-index.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="zindexes:" values={suomifiTheme.zindexes} />
+  )}
+</SuomifiThemeConsumer>;
+```
+
+### Raw token values
+
+Theme values is of type _`RawDesignTokens`_ and provides colors, typograhpy and spacing design tokens in more granular format for use with custom styles. Values have no effect on the theme and are only provided for further use.
+
+```js noeditor
+import { SuomifiThemeConsumer } from '../src/core/theme';
+import { ThemeProps } from '../src/docs/Theme/ThemeProps';
+
+<SuomifiThemeConsumer>
+  {({ suomifiTheme }) => (
+    <ThemeProps title="values:" values={suomifiTheme.values} />
+  )}
+</SuomifiThemeConsumer>;
+```