feat: add rem checker, add transition to themes

coingaming · Oct 8, 2020 · 1d20c03 · 1d20c03
1 parent 9619e45
commit 1d20c03
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/packages/themes/src/sharedTokens/sharedTokens.ts b/packages/themes/src/sharedTokens/sharedTokens.ts
@@ -21,6 +21,8 @@ const borderWidth = 1;
 
 const space = 16;
 
+const transitionDuration = 0.2;
+
 const sharedTokens: Shared = {
   base: {
     space,
@@ -69,8 +71,12 @@ const sharedTokens: Shared = {
     xlarge: space * 2.5,
   },
   transitionDuration: {
-    slow: 0.4,
-    default: 0.2,
+    slow: transitionDuration * 2,
+    default: transitionDuration,
+  },
+  transition: {
+    slow: `${transitionDuration * 2}s ease-in-out`,
+    default: `${transitionDuration}s ease-in-out`,
   },
   zIndex: {
     carouselControl: 5,

diff --git a/packages/themes/src/types/theme.ts b/packages/themes/src/types/theme.ts
@@ -10,7 +10,7 @@ import { MaxWidth } from './maxWidth';
 import { Opacity } from './opacity';
 import { Radius } from './radius';
 import { Space } from './space';
-import { TransitionDuration } from './transition';
+import { TransitionDuration, Transition } from './transition';
 import { ZIndex } from './zIndex';
 
 export type Theme = {
@@ -32,5 +32,6 @@ export type Theme = {
   radius: Radius;
   space: Space;
   transitionDuration: TransitionDuration;
+  transition: Transition;
   zIndex: ZIndex;
 };
diff --git a/packages/themes/src/types/transition.ts b/packages/themes/src/types/transition.ts
@@ -2,3 +2,8 @@ export type TransitionDuration = {
   slow: number;
   default: number;
 };
+
+export type Transition = {
+  slow: string;
+  default: string;
+};
diff --git a/packages/utils/src/rem/rem.ts b/packages/utils/src/rem/rem.ts
@@ -2,6 +2,15 @@ import polishedRem from 'polished/lib/helpers/rem';
 import { sharedTokens } from '@heathmont/moon-themes';
 
 const rem = (value: string | number, baseFontSize: string | number = 16) => {
+  if (
+    ![10, 14, 18, '10px', '14px', '18px'].includes(value) ||
+    (typeof value === 'number' && value % 4 !== 0)
+  ) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `ATTENTION! You've used rem(${value}) which is out of Moon DS range! Please use 4px-step approach instead!`
+    );
+  }
   return polishedRem(value, baseFontSize || sharedTokens.base.fontSize);
 };