Export theme

src/index.ts

@@ -20,3 +20,7 @@ export { Icon } from './components/Icon'
 // themes
 export { createTheme } from './themes/createTheme'
 export { ThemeProvider } from './themes/ThemeProvider'
+export { defaultPalette } from './themes/createPalette'
+export { defaultInteraction } from './themes/createInteraction'
+export { defaultFrame } from './themes/createFrame'
+export { defaultSize } from './themes/createSize'

src/themes/createFrame.ts

@@ -3,6 +3,7 @@ import { defaultPalette, PaletteProperty } from './createPalette'
 
 const lineWidth = '1px'
 const lineStyle = 'solid'
+const lineColor = defaultPalette.BORDER
 
 export interface FrameProperty {
   border?: {
@@ -30,19 +31,26 @@ export interface CreatedFrameTheme {
   }
 }
 
+export const defaultFrame: CreatedFrameTheme = {
+  border: {
+    lineWidth,
+    lineStyle,
+    default: `${lineWidth} ${lineStyle} ${lineColor}`,
+    radius: {
+      s: '3px',
+      m: '6px',
+      l: '8px',
+    },
+  },
+}
+
 export const createFrame = (userFrame: FrameProperty = {}, userPalette: PaletteProperty = {}) => {
   const color = userPalette.BORDER || defaultPalette.BORDER
   const created: CreatedFrameTheme = merge(
     {
       border: {
-        lineWidth,
-        lineStyle,
+        ...defaultFrame.border,
         default: `${lineWidth} ${lineStyle} ${color}`,
-        radius: {
-          s: '3px',
-          m: '6px',
-          l: '8px',
-        },
       },
     },
     userFrame,

src/themes/createInteraction.ts

@@ -21,15 +21,19 @@ export interface CreatedInteractionTheme {
   }
 }
 
+export const defaultInteraction = {
+  hover: {
+    feedbackOpacity: '.7',
+    animationDuration: hoverAnimationDuration,
+    animationTiming: hoverAnimationTiming,
+    animation: `${hoverAnimationDuration} ${hoverAnimationTiming}`,
+  },
+}
+
 export const createInteraction = (userInteraction: InteractionProperty = {}) => {
   const created: CreatedInteractionTheme = merge(
     {
-      hover: {
-        feedbackOpacity: '.7',
-        animationDuration: hoverAnimationDuration,
-        animationTiming: hoverAnimationTiming,
-        animation: `${hoverAnimationDuration} ${hoverAnimationTiming}`,
-      },
+      ...defaultInteraction,
     },
     userInteraction,
   )

src/themes/createPalette.ts

@@ -29,7 +29,10 @@ export interface CreatedPaletteTheme {
   OVERLAY: string
 }
 
-export const defaultPalette = {
+const hoverColor = (value: string): string => darken(0.05, value)
+
+export const defaultPalette: CreatedPaletteTheme = {
+  hoverColor,
   TEXT_BLACK: '#333',
   TEXT_GREY: '#767676',
   BORDER: '#d6d6d6',
@@ -45,7 +48,6 @@ export const defaultPalette = {
 export const createPalette = (userPalette: PaletteProperty = {}) => {
   const created: CreatedPaletteTheme = merge(
     {
-      hoverColor: (value: string): string => darken(0.05, value),
       ...defaultPalette,
     },
     userPalette,

src/themes/createSize.ts

@@ -1,7 +1,7 @@
 import { merge } from '../libs/lodash'
 
 const defaultHtmlFontSize = 16
-const defaultSpace = 8
+const defaultSpaceSize = 8
 
 export interface SizeProperty {
   htmlFontSize?: number
@@ -51,36 +51,44 @@ export interface CreatedSizeTheme {
   }
 }
 
-const defaultSize = {
-  font: {
-    SHORT: 11,
-    TALL: 14,
-    GRANDE: 18,
-    VENTI: 24,
-  },
-  mediaQuery: {
-    SP: 599,
-    TABLET: 959,
-  },
+const pxToRem = (value: number) => (font: number) => {
+  return `${value / font}rem`
+}
+
+const getSpace = (size: number) => {
+  return {
+    XXS: size,
+    XS: size * 2,
+    S: size * 3,
+    M: size * 4,
+    L: size * 5,
+    XL: size * 6,
+    XXL: size * 7,
+  }
+}
+
+const defaultFontSize = { SHORT: 11, TALL: 14, GRANDE: 18, VENTI: 24 }
+
+const defaultMediaQuery = { SP: 599, TABLET: 959 }
+
+const defaultSpace = getSpace(defaultSpaceSize)
+
+export const defaultSize: CreatedSizeTheme = {
+  pxToRem: (value: number) => pxToRem(value)(defaultHtmlFontSize),
+  font: defaultFontSize,
+  space: defaultSpace,
+  mediaQuery: defaultMediaQuery,
 }
 
 export const createSize = (userSize: SizeProperty = {}) => {
   const space = userSize.space || {}
-  const XXS = space.defaultRem || defaultSpace
+  const XXS = space.defaultRem || defaultSpaceSize
   const created: CreatedSizeTheme = merge(
     {
-      pxToRem: (value: number): string =>
-        `${value / (userSize.htmlFontSize || defaultHtmlFontSize)}rem`,
-      space: {
-        XXS,
-        XS: XXS * 2,
-        S: XXS * 3,
-        M: XXS * 4,
-        L: XXS * 5,
-        XL: XXS * 6,
-        XXL: XXS * 7,
-      },
-      ...defaultSize,
+      pxToRem: (value: number) => pxToRem(value)(userSize.htmlFontSize || defaultHtmlFontSize),
+      space: getSpace(XXS),
+      font: defaultFontSize,
+      mediaQuery: defaultMediaQuery,
     },
     userSize,
   )