refactor(core): update design theme multipliers names

arwes · Mar 27, 2021 · 799676c · 799676c
1 parent 3994913
commit 799676c
Show file tree

Hide file tree

Showing 15 changed files with 70 additions and 71 deletions.
diff --git a/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx b/packages/core/src/ArwesThemeProvider/ArwesThemeProvider.component.tsx
@@ -1,10 +1,19 @@
 import React, { FC, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from '@emotion/react';
-import { ThemeSettings, ThemePalette, Theme, createTheme } from '@arwes/design';
+import { ThemeSettings, ThemePalette, Theme, createTheme, ThemeSettingsPalette } from '@arwes/design';
+
+interface ArwesThemeSettingsPalette extends ThemeSettingsPalette {
+  text?: {
+    root?: string
+    headings?: string
+    link?: string
+    linkHover?: string
+  }
+}
 
 interface ArwesThemeSettings extends ThemeSettings {
-  fontScale?: number
+  palette?: ArwesThemeSettingsPalette
 }
 
 interface ArwesThemePalette extends ThemePalette {
@@ -18,8 +27,6 @@ interface ArwesThemePalette extends ThemePalette {
 
 interface ArwesTheme extends Theme {
   palette: ArwesThemePalette
-  fontScale: number
-  transitionDuration: number
 }
 
 interface ArwesThemeProviderProps {
@@ -55,23 +62,15 @@ const ArwesThemeProvider: FC<ArwesThemeProviderProps> = props => {
         neutral: {
           main: '#021114'
         },
+        ...themeSettings?.palette,
         text: {
           root: '#7efcf6',
           headings: '#00f8f8',
           link: '#ffa76c',
-          linkHover: '#ffc69f'
-        },
-        ...themeSettings?.palette
-      },
-      space: themeSettings?.space ?? 5,
-      outline: themeSettings?.outline ?? 1,
-      shadow: {
-        blur: 1,
-        spread: 1,
-        ...themeSettings?.shadow
-      },
-      fontScale: themeSettings?.fontScale ?? 1,
-      transitionDuration: themeSettings?.transitionDuration ?? 150
+          linkHover: '#ffc69f',
+          ...themeSettings?.palette?.text
+        }
+      }
     }) as ArwesTheme;
   }, []);
 

diff --git a/packages/core/src/Blockquote/Blockquote.animator.ts b/packages/core/src/Blockquote/Blockquote.animator.ts
@@ -21,7 +21,7 @@ const transitionRemoveBlockquote = (animator: AnimatorRef, containerRef: Contain
 const transitionCard = (animator: AnimatorRef, containerRef: ContainerRef): void => {
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
 
   const container = containerRef.current;
   const line = container.querySelector('.arwes-blockquote__line');
@@ -30,15 +30,15 @@ const transitionCard = (animator: AnimatorRef, containerRef: ContainerRef): void
   if (isEntering) {
     anime({
       targets: line,
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       height: [0, '100%']
     });
 
-    transitionAppear([line, bg], transitionDuration);
+    transitionAppear([line, bg], durationTransition);
   }
   else {
-    transitionDisappear([line, bg], transitionDuration);
+    transitionDisappear([line, bg], durationTransition);
   }
 };
 

diff --git a/packages/core/src/Blockquote/Blockquote.styles.ts b/packages/core/src/Blockquote/Blockquote.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate?: boolean, palette?: string }
 ): Record<string, CSSObject> => {
-  const { space, outline, shadow } = theme;
+  const { space, outline, shadowBlur } = theme;
   const { animate } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -43,7 +43,7 @@ const generateStyles = (
       width: outline(6),
       height: '100%',
       backgroundColor: color,
-      boxShadow: `0 0 ${shadow.blur(2)}px ${color}`,
+      boxShadow: `0 0 ${shadowBlur(2)}px ${color}`,
       opacity: animate ? 0 : undefined
     },
     content: {

diff --git a/packages/core/src/Button/Button.effects.ts b/packages/core/src/Button/Button.effects.ts
@@ -6,7 +6,7 @@ import { ArwesTheme } from '../ArwesThemeProvider';
 
 const highlightFrameBgs = (container: HTMLElement, theme: ArwesTheme, palette?: string): void => {
   const color = theme.palette[palette as string]?.main || theme.palette.primary.main;
-  const duration = theme.transitionDuration / 2;
+  const duration = theme.transitionDuration(0.5);
 
   const bgs: HTMLElement[] = Array.from(container.querySelectorAll(`.${ARWES_CORE_FRAME_BG_CLASSNAME}`));
 

diff --git a/packages/core/src/Button/Button.styles.ts b/packages/core/src/Button/Button.styles.ts
@@ -10,7 +10,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { palette?: string, active?: boolean, disabled?: boolean }
 ): Record<string, CSSObject> => {
-  const { shadow, transitionDuration } = theme;
+  const { shadowBlur, transitionDuration } = theme;
   const { active, disabled } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -28,22 +28,22 @@ const generateStyles = (
       fontSize: '0.875rem',
       textTransform: 'uppercase',
       textDecoration: 'none',
-      textShadow: `0 0 ${shadow.blur(1)}px ${color}`,
+      textShadow: `0 0 ${shadowBlur(1)}px ${color}`,
       color,
       cursor: disabled ? 'default' : 'pointer',
       transition: ['color', 'text-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
 
       [`& .${ARWES_CORE_FRAME_BG_CLASSNAME}`]: active && {
         backgroundColor: color,
         opacity: BUTTON_FRAME_BG_BASE_OPACITY,
-        transition: `opacity ${transitionDuration}ms ease-out`
+        transition: `opacity ${transitionDuration()}ms ease-out`
       },
 
       '&:hover, &:focus': !disabled && {
         color: colorHover,
-        textShadow: `0 0 ${shadow.blur(1)}px ${colorHover}`,
+        textShadow: `0 0 ${shadowBlur(1)}px ${colorHover}`,
 
         [`& .${ARWES_CORE_FRAME_BG_CLASSNAME}`]: active && {
           backgroundColor: colorHover

diff --git a/packages/core/src/Card/Card.animator.ts b/packages/core/src/Card/Card.animator.ts
@@ -30,7 +30,7 @@ const transitionCard = (
 ): void => {
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
   const container = containerRef.current;
   const { space } = theme;
 
@@ -39,27 +39,27 @@ const transitionCard = (
 
     anime({
       targets: container.querySelector('.arwes-card__line-picture'),
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       translateX: [space(4), 0]
     });
 
     anime({
       targets: container.querySelector('.arwes-card__line-content'),
-      duration: transitionDuration,
+      duration: durationTransition,
       easing: 'easeOutSine',
       translateY: [-space(4), 0]
     });
 
     transitionAppear(
       container.querySelectorAll('.arwes-card__line'),
-      transitionDuration
+      durationTransition
     );
 
     transitionAppear(
       container.querySelectorAll('.arwes-card__image, .arwes-card__content-bg'),
-      transitionDuration,
-      transitionDuration
+      durationTransition,
+      durationTransition
     );
   }
   else {
@@ -69,7 +69,7 @@ const transitionCard = (
         '.arwes-card__image',
         '.arwes-card__content-bg'
       ].join(',')),
-      transitionDuration
+      durationTransition
     );
   }
 };

diff --git a/packages/core/src/Card/Card.styles.ts b/packages/core/src/Card/Card.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate?: boolean, landscape?: boolean, hover?: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow, transitionDuration } = theme;
+  const { palette, space, outline, shadowBlur, transitionDuration } = theme;
   const { animate, landscape, hover } = options;
 
   const contentBg = rgba(palette.primary.light1, 0.05);
@@ -21,15 +21,15 @@ const generateStyles = (
         '&:focus .arwes-card__line-picture'
       ].join(',')]: hover && {
         backgroundColor: palette.secondary.light1,
-        boxShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.light1}`
+        boxShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.light1}`
       },
 
       [[
         '&:hover .arwes-card__line-content',
         '&:focus .arwes-card__line-content'
       ].join(',')]: hover && {
         backgroundColor: palette.primary.light1,
-        boxShadow: `0 0 ${shadow.blur(1)}px ${palette.primary.light1}`
+        boxShadow: `0 0 ${shadowBlur(1)}px ${palette.primary.light1}`
       }
     },
     container: {
@@ -42,7 +42,7 @@ const generateStyles = (
     line: {
       position: 'absolute',
       transition: ['background-color', 'box-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
       opacity: animate ? 0 : undefined
     },
@@ -78,7 +78,7 @@ const generateStyles = (
       width: outline(1),
       height: '100%',
       backgroundColor: palette.secondary.dark1,
-      boxShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.dark1}`
+      boxShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.dark1}`
     },
 
     content: {
@@ -121,7 +121,7 @@ const generateStyles = (
       width: '100%',
       height: outline(1),
       backgroundColor: palette.primary.dark1,
-      boxShadow: `0 0 ${shadow.blur(1)}px ${palette.primary.dark1}`
+      boxShadow: `0 0 ${shadowBlur(1)}px ${palette.primary.dark1}`
     }
   };
 };

diff --git a/packages/core/src/CodeBlock/CodeBlock.styles.ts b/packages/core/src/CodeBlock/CodeBlock.styles.ts
@@ -7,7 +7,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow } = theme;
+  const { palette, space, outline, shadowBlur } = theme;
   const { animate } = options;
 
   return {
@@ -55,7 +55,7 @@ const generateStyles = (
       top: outline(1),
       padding: `${space(0.5)}px ${space(1.5)}px`,
       color: palette.secondary.main,
-      textShadow: `0 0 ${shadow.blur(1)}px ${palette.secondary.main}`,
+      textShadow: `0 0 ${shadowBlur(1)}px ${palette.secondary.main}`,
       textTransform: 'uppercase'
     },
     langBg: {

diff --git a/packages/core/src/Figure/Figure.styles.ts b/packages/core/src/Figure/Figure.styles.ts
@@ -7,13 +7,13 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean, fluid?: boolean }
 ): Record<string, CSSObject> => {
-  const { palette, space, outline, shadow } = theme;
+  const { palette, space, outline, shadowBlur } = theme;
   const { animate, fluid } = options;
 
   const containerPadding = space(2);
 
   const lineWidth = outline(1);
-  const lineShadowBlur = shadow.blur(2);
+  const lineShadowBlur = shadowBlur(2);
   const lineColor = palette.primary.main;
   const lineShadowColor = palette.primary.main;
   const lineLength = space(18);

diff --git a/packages/core/src/FrameUnderline/FrameUnderline.animator.ts b/packages/core/src/FrameUnderline/FrameUnderline.animator.ts
@@ -45,13 +45,13 @@ const transitionFrameUnderline = (
 
   const { duration, flow } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
   const { space } = theme;
   const container = containerRef.current;
 
   anime({
     targets: container,
-    duration: transitionDuration,
+    duration: durationTransition,
     easing: 'easeOutSine',
     translateX: isEntering ? [-space(2), 0] : [0, -space(2)]
   });
@@ -60,7 +60,7 @@ const transitionFrameUnderline = (
     targets: container.querySelectorAll(
       '.arwes-frame-underline__shapes, .arwes-frame-underline__line'
     ),
-    duration: transitionDuration,
+    duration: durationTransition,
     easing: 'easeOutSine',
     opacity: isEntering ? [0, 1] : [1, 0]
   });

diff --git a/packages/core/src/FrameUnderline/FrameUnderline.styles.ts b/packages/core/src/FrameUnderline/FrameUnderline.styles.ts
@@ -6,7 +6,7 @@ const generateStyles = (
   theme: ArwesTheme,
   options: { animate: boolean, palette?: string, hover?: boolean, disabled?: boolean }
 ): Record<string, CSSObject> => {
-  const { space, outline, shadow, transitionDuration } = theme;
+  const { space, outline, shadowBlur, transitionDuration } = theme;
   const { animate, hover, disabled } = options;
 
   const defaultPalette = theme.palette.primary;
@@ -24,7 +24,7 @@ const generateStyles = (
         '&:focus .arwes-frame-underline__line'
       ].join(',')]: hover && !disabled && {
         backgroundColor: colorHover,
-        boxShadow: `0 0 ${shadow.blur(2)}px ${colorHover}`
+        boxShadow: `0 0 ${shadowBlur(2)}px ${colorHover}`
       }
     },
     container: {},
@@ -33,9 +33,9 @@ const generateStyles = (
       position: 'absolute',
       height: outline(2),
       backgroundColor: color,
-      boxShadow: `0 0 ${shadow.blur(2)}px ${color}`,
+      boxShadow: `0 0 ${shadowBlur(2)}px ${color}`,
       transition: ['background-color', 'box-shadow']
-        .map(prop => `${prop} ${transitionDuration}ms ease-out`)
+        .map(prop => `${prop} ${transitionDuration()}ms ease-out`)
         .join(','),
       opacity: animate ? 0 : undefined
     },

diff --git a/packages/core/src/List/List.animator.ts b/packages/core/src/List/List.animator.ts
@@ -20,7 +20,7 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
 
   const { flow, duration } = animator;
   const isEntering = flow.entering || flow.entered;
-  const transitionDuration = isEntering ? duration.enter : duration.exit;
+  const durationTransition = isEntering ? duration.enter : duration.exit;
 
   const container = containerRef.current;
   const items = container.querySelectorAll(':scope > li');
@@ -33,12 +33,12 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
       delay: anime.stagger(duration.stagger),
       opacity: {
         easing: 'easeOutExpo',
-        duration: transitionDuration / 3,
+        duration: durationTransition / 3,
         value: [0, 1]
       },
       translateX: {
         easing: 'easeOutSine',
-        duration: transitionDuration,
+        duration: durationTransition,
         value: [-space(2), 0]
       }
     });
@@ -49,7 +49,7 @@ const transitionList = (animator: AnimatorRef, containerRef: ContainerRef, theme
       // Only set `opacity: 0` when the animation is completed so the <List/>
       // children text components can be animated properly.
       easing: () => (progress: number): number => progress === 1 ? 1 : 0,
-      duration: transitionDuration,
+      duration: durationTransition,
       opacity: [1, 0]
     });
   }