feat: backport Shin Color to v6 (SHRUI-232) (#1157)

* feat: add Shin color (SHRUI-227) (#1141) * test: update snapshot * test: fix lint
kufu · Nov 24, 2020 · f462116 · f462116
1 parent 57364d4
commit f462116
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 6 deletions.
diff --git a/.storybook/config.js b/.storybook/config.js
@@ -6,12 +6,13 @@ import { withA11y } from '@storybook/addon-a11y'
 import { addReadme } from 'storybook-readme'
 
 import { createTheme } from '../src/themes/createTheme'
+import { shinColorPalette } from '../src/themes/createPalette'
 import { ThemeProvider } from '../src/themes/ThemeProvider'
 
 const req = require.context('../src/components', true, /.stories.tsx$/)
 
 function loadStories() {
-  req.keys().forEach(filename => req(filename))
+  req.keys().forEach((filename) => req(filename))
 }
 
 addParameters({
@@ -29,7 +30,10 @@ addParameters({ viewport: { viewports: INITIAL_VIEWPORTS } })
 
 addDecorator(withA11y)
 addDecorator(addReadme)
-addDecorator(Story => <ThemeProvider theme={createTheme()}><Story /></ThemeProvider>)
+addDecorator((Story) => (
+  <ThemeProvider theme={createTheme({ palette: shinColorPalette })}>
+    <Story />
+  </ThemeProvider>
+))
 
 configure(loadStories, module)
-
diff --git a/src/components/CheckBox/__snapshots__/CheckBox.test.tsx.snap b/src/components/CheckBox/__snapshots__/CheckBox.test.tsx.snap
@@ -31,6 +31,7 @@ exports[`CheckBox should be match snapshot 1`] = `
         },
         "palette": Object {
           "BACKGROUND": "#f5f6fa",
+          "BASE_GREY": "#f5f5f5",
           "BORDER": "#d6d6d6",
           "COLUMN": "#f9f9f9",
           "DANGER": "#ef475b",
@@ -125,6 +126,7 @@ exports[`CheckBox should be match snapshot 1`] = `
           },
           "palette": Object {
             "BACKGROUND": "#f5f6fa",
+            "BASE_GREY": "#f5f5f5",
             "BORDER": "#d6d6d6",
             "COLUMN": "#f9f9f9",
             "DANGER": "#ef475b",
@@ -197,6 +199,7 @@ exports[`CheckBox should be match snapshot 1`] = `
               },
               "palette": Object {
                 "BACKGROUND": "#f5f6fa",
+                "BASE_GREY": "#f5f5f5",
                 "BORDER": "#d6d6d6",
                 "COLUMN": "#f9f9f9",
                 "DANGER": "#ef475b",
@@ -294,6 +297,7 @@ exports[`CheckBox should be match snapshot 1`] = `
                 },
                 "palette": Object {
                   "BACKGROUND": "#f5f6fa",
+                  "BASE_GREY": "#f5f5f5",
                   "BORDER": "#d6d6d6",
                   "COLUMN": "#f9f9f9",
                   "DANGER": "#ef475b",
@@ -371,6 +375,7 @@ exports[`CheckBox should be match snapshot 1`] = `
               },
               "palette": Object {
                 "BACKGROUND": "#f5f6fa",
+                "BASE_GREY": "#f5f5f5",
                 "BORDER": "#d6d6d6",
                 "COLUMN": "#f9f9f9",
                 "DANGER": "#ef475b",
@@ -465,6 +470,7 @@ exports[`CheckBox should be match snapshot 1`] = `
                 },
                 "palette": Object {
                   "BACKGROUND": "#f5f6fa",
+                  "BASE_GREY": "#f5f5f5",
                   "BORDER": "#d6d6d6",
                   "COLUMN": "#f9f9f9",
                   "DANGER": "#ef475b",
@@ -536,6 +542,7 @@ exports[`CheckBox should be match snapshot 1`] = `
               },
               "palette": Object {
                 "BACKGROUND": "#f5f6fa",
+                "BASE_GREY": "#f5f5f5",
                 "BORDER": "#d6d6d6",
                 "COLUMN": "#f9f9f9",
                 "DANGER": "#ef475b",
@@ -629,6 +636,7 @@ exports[`CheckBox should be match snapshot 1`] = `
                 },
                 "palette": Object {
                   "BACKGROUND": "#f5f6fa",
+                  "BASE_GREY": "#f5f5f5",
                   "BORDER": "#d6d6d6",
                   "COLUMN": "#f9f9f9",
                   "DANGER": "#ef475b",

diff --git a/src/components/CheckBoxLabel/__snapshots__/CheckBoxLabel.test.tsx.snap b/src/components/CheckBoxLabel/__snapshots__/CheckBoxLabel.test.tsx.snap
@@ -112,6 +112,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                       },
                       "palette": Object {
                         "BACKGROUND": "#f5f6fa",
+                        "BASE_GREY": "#f5f5f5",
                         "BORDER": "#d6d6d6",
                         "COLUMN": "#f9f9f9",
                         "DANGER": "#ef475b",
@@ -206,6 +207,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                         },
                         "palette": Object {
                           "BACKGROUND": "#f5f6fa",
+                          "BASE_GREY": "#f5f5f5",
                           "BORDER": "#d6d6d6",
                           "COLUMN": "#f9f9f9",
                           "DANGER": "#ef475b",
@@ -279,6 +281,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                             },
                             "palette": Object {
                               "BACKGROUND": "#f5f6fa",
+                              "BASE_GREY": "#f5f5f5",
                               "BORDER": "#d6d6d6",
                               "COLUMN": "#f9f9f9",
                               "DANGER": "#ef475b",
@@ -377,6 +380,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                               },
                               "palette": Object {
                                 "BACKGROUND": "#f5f6fa",
+                                "BASE_GREY": "#f5f5f5",
                                 "BORDER": "#d6d6d6",
                                 "COLUMN": "#f9f9f9",
                                 "DANGER": "#ef475b",
@@ -455,6 +459,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                             },
                             "palette": Object {
                               "BACKGROUND": "#f5f6fa",
+                              "BASE_GREY": "#f5f5f5",
                               "BORDER": "#d6d6d6",
                               "COLUMN": "#f9f9f9",
                               "DANGER": "#ef475b",
@@ -549,6 +554,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                               },
                               "palette": Object {
                                 "BACKGROUND": "#f5f6fa",
+                                "BASE_GREY": "#f5f5f5",
                                 "BORDER": "#d6d6d6",
                                 "COLUMN": "#f9f9f9",
                                 "DANGER": "#ef475b",
@@ -620,6 +626,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                             },
                             "palette": Object {
                               "BACKGROUND": "#f5f6fa",
+                              "BASE_GREY": "#f5f5f5",
                               "BORDER": "#d6d6d6",
                               "COLUMN": "#f9f9f9",
                               "DANGER": "#ef475b",
@@ -713,6 +720,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                               },
                               "palette": Object {
                                 "BACKGROUND": "#f5f6fa",
+                                "BASE_GREY": "#f5f5f5",
                                 "BORDER": "#d6d6d6",
                                 "COLUMN": "#f9f9f9",
                                 "DANGER": "#ef475b",
@@ -833,6 +841,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                     },
                     "palette": Object {
                       "BACKGROUND": "#f5f6fa",
+                      "BASE_GREY": "#f5f5f5",
                       "BORDER": "#d6d6d6",
                       "COLUMN": "#f9f9f9",
                       "DANGER": "#ef475b",
@@ -926,6 +935,7 @@ exports[`CheckBoxLabel should be match snapshot 1`] = `
                       },
                       "palette": Object {
                         "BACKGROUND": "#f5f6fa",
+                        "BASE_GREY": "#f5f5f5",
                         "BORDER": "#d6d6d6",
                         "COLUMN": "#f9f9f9",
                         "DANGER": "#ef475b",

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -1,8 +1,8 @@
-import React, { SelectHTMLAttributes, FC, ChangeEvent, useCallback } from 'react'
+import React, { ChangeEvent, FC, SelectHTMLAttributes, useCallback } from 'react'
 import styled, { css } from 'styled-components'
 
 import { isTouchDevice } from '../../libs/ua'
-import { useTheme, Theme } from '../../hooks/useTheme'
+import { Theme, useTheme } from '../../hooks/useTheme'
 
 import { Icon } from '../Icon'
 

diff --git a/src/components/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap b/src/components/StatusLabel/__snapshots__/StatusLabel.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`StatusLabel should be match snapshot 1`] = `
         },
         "palette": Object {
           "BACKGROUND": "#f5f6fa",
+          "BASE_GREY": "#f5f5f5",
           "BORDER": "#d6d6d6",
           "COLUMN": "#f9f9f9",
           "DANGER": "#ef475b",
@@ -124,6 +125,7 @@ exports[`StatusLabel should be match snapshot 1`] = `
           },
           "palette": Object {
             "BACKGROUND": "#f5f6fa",
+            "BASE_GREY": "#f5f5f5",
             "BORDER": "#d6d6d6",
             "COLUMN": "#f9f9f9",
             "DANGER": "#ef475b",

diff --git a/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap b/src/components/TabBar/__snapshots__/TabBar.test.tsx.snap
@@ -30,6 +30,7 @@ exports[`TabBar should be match snapshot 1`] = `
           },
           "palette": Object {
             "BACKGROUND": "#f5f6fa",
+            "BASE_GREY": "#f5f5f5",
             "BORDER": "#d6d6d6",
             "COLUMN": "#f9f9f9",
             "DANGER": "#ef475b",
@@ -125,6 +126,7 @@ exports[`TabBar should be match snapshot 1`] = `
             },
             "palette": Object {
               "BACKGROUND": "#f5f6fa",
+              "BASE_GREY": "#f5f5f5",
               "BORDER": "#d6d6d6",
               "COLUMN": "#f9f9f9",
               "DANGER": "#ef475b",
@@ -204,6 +206,7 @@ exports[`TabBar should be match snapshot 1`] = `
                   },
                   "palette": Object {
                     "BACKGROUND": "#f5f6fa",
+                    "BASE_GREY": "#f5f5f5",
                     "BORDER": "#d6d6d6",
                     "COLUMN": "#f9f9f9",
                     "DANGER": "#ef475b",
@@ -312,6 +315,7 @@ exports[`TabBar should be match snapshot 1`] = `
                     },
                     "palette": Object {
                       "BACKGROUND": "#f5f6fa",
+                      "BASE_GREY": "#f5f5f5",
                       "BORDER": "#d6d6d6",
                       "COLUMN": "#f9f9f9",
                       "DANGER": "#ef475b",
@@ -400,6 +404,7 @@ exports[`TabBar should be match snapshot 1`] = `
                   },
                   "palette": Object {
                     "BACKGROUND": "#f5f6fa",
+                    "BASE_GREY": "#f5f5f5",
                     "BORDER": "#d6d6d6",
                     "COLUMN": "#f9f9f9",
                     "DANGER": "#ef475b",
@@ -508,6 +513,7 @@ exports[`TabBar should be match snapshot 1`] = `
                     },
                     "palette": Object {
                       "BACKGROUND": "#f5f6fa",
+                      "BASE_GREY": "#f5f5f5",
                       "BORDER": "#d6d6d6",
                       "COLUMN": "#f9f9f9",
                       "DANGER": "#ef475b",
@@ -596,6 +602,7 @@ exports[`TabBar should be match snapshot 1`] = `
                   },
                   "palette": Object {
                     "BACKGROUND": "#f5f6fa",
+                    "BASE_GREY": "#f5f5f5",
                     "BORDER": "#d6d6d6",
                     "COLUMN": "#f9f9f9",
                     "DANGER": "#ef475b",
@@ -704,6 +711,7 @@ exports[`TabBar should be match snapshot 1`] = `
                     },
                     "palette": Object {
                       "BACKGROUND": "#f5f6fa",
+                      "BASE_GREY": "#f5f5f5",
                       "BORDER": "#d6d6d6",
                       "COLUMN": "#f9f9f9",
                       "DANGER": "#ef475b",

diff --git a/src/index.ts b/src/index.ts
@@ -57,7 +57,7 @@ export { InformationPanel } from './components/InformationPanel'
 // themes
 export { createTheme } from './themes/createTheme'
 export { ThemeProvider } from './themes/ThemeProvider'
-export { defaultPalette } from './themes/createPalette'
+export { defaultPalette, shinColorPalette } from './themes/createPalette'
 export { defaultInteraction } from './themes/createInteraction'
 export { defaultFrame } from './themes/createFrame'
 export { defaultSize } from './themes/createSize'

diff --git a/src/themes/createPalette.ts b/src/themes/createPalette.ts
@@ -10,6 +10,7 @@ export interface PaletteProperty {
   BORDER?: string
   BACKGROUND?: string
   COLUMN?: string
+  BASE_GREY?: string
   MAIN?: string
   DANGER?: string
   WARNING?: string
@@ -28,6 +29,7 @@ export interface CreatedPaletteTheme {
   BORDER: string
   BACKGROUND: string
   COLUMN: string
+  BASE_GREY: string
   MAIN: string
   DANGER: string
   WARNING: string
@@ -45,6 +47,7 @@ export const defaultPalette = {
   BORDER: '#d6d6d6',
   BACKGROUND: '#f5f6fa',
   COLUMN: '#f9f9f9',
+  BASE_GREY: '#f5f5f5',
   MAIN: '#00a5ab',
   DANGER: '#ef475b',
   WARNING: '#ff8800',
@@ -53,6 +56,23 @@ export const defaultPalette = {
   HEADER_GREEN: '#57d0d5',
 }
 
+export const shinColorPalette = {
+  TEXT_BLACK: '#23221f',
+  TEXT_GREY: '#76736a',
+  TEXT_DISABLED: '#c1bdb7',
+  TEXT_LINK: '#0077c7',
+  BORDER: '#d6d3d0',
+  BACKGROUND: '#f8f7f6',
+  COLUMN: '#f9f8f7',
+  BASE_GREY: '#f5f4f3',
+  MAIN: '#0077c7',
+  DANGER: '#e01e5a',
+  WARNING: '#ff8800',
+  SCRIM: 'rgba(0,0,0,0.5)',
+  OVERLAY: 'rgba(0,0,0,0.15)',
+  BRAND: '#00c4cc',
+}
+
 export const createPalette = (userPalette: PaletteProperty = {}) => {
   const created: CreatedPaletteTheme = merge(
     {