Skip to content

Feature/theme #404

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Jul 25, 2020
Merged

Feature/theme #404

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
49083dc
add default theme variables
ShMcK Jul 24, 2020
2d2e1ad
setup theme
ShMcK Jul 24, 2020
d59b0e1
theme progress
ShMcK Jul 24, 2020
4c59200
theme migration progress 2
ShMcK Jul 24, 2020
6f4fc38
fix hint story
ShMcK Jul 24, 2020
ffac6b4
update styles
ShMcK Jul 24, 2020
9aa6a1b
fix width scroll issue (except review page)
ShMcK Jul 25, 2020
e94b95c
fix footer height
ShMcK Jul 25, 2020
File filter

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
add default theme variables 
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
  • Loading branch information
@ShMcK
ShMcK committed Jul 24, 2020
commit 49083dc870b2a01549c3b61da53a79935215f344
6 changes: 5 additions & 1 deletion web-app/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,18 @@ import { ConfigProvider } from '@alifd/next'
import enUS from '@alifd/next/lib/locale/en-us'
import ErrorBoundary from './components/ErrorBoundary'
import Workspace from './components/Workspace'
import { ThemeProvider } from 'emotion-theming'
import theme from './styles/theme'
import Routes from './Routes'

const App = () => (
/* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */
<ConfigProvider locale={enUS}>
<ErrorBoundary>
<Workspace>
<Routes />
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
</Workspace>
</ErrorBoundary>
</ConfigProvider>
Expand Down
255 changes: 255 additions & 0 deletions web-app/src/styles/theme.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
// import variables from '@alifd/theme-4/variables'

const theme = {
'$form-element-small-height': '20px',
'$form-element-medium-height': '32px',
'$form-element-large-height': '44px',
'$form-element-small-font-size': '12px',
'$form-element-medium-font-size': '12px',
'$form-element-large-font-size': '16px',
'$form-element-small-preview-height': '20px',
'$form-element-medium-preview-height': '28px',
'$form-element-large-preview-height': '40px',
'$form-element-small-preview-font-size': '12px',
'$form-element-medium-preview-font-size': '12px',
'$form-element-large-preview-font-size': '16px',
'$form-element-small-icon-size': '12px',
'$form-element-medium-icon-size': '12px',
'$form-element-large-icon-size': '16px',
'$form-element-small-corner': '35px',
'$form-element-medium-corner': '35px',
'$form-element-large-corner': '35px',
'$mask-background': '#000000',
'$mask-opacity': '.2',
'$popup-local-border-width': '1px',
'$popup-local-border-style': 'solid',
'$popup-local-border-color': '#DCDEE3',
'$popup-local-corner': '3px',
'$popup-local-shadow': 'none',
'$popup-global-border-width': '0',
'$popup-global-border-style': 'solid',
'$popup-global-border-color': '#DCDEE3',
'$popup-global-corner': '3px',
'$popup-global-shadow': '0px 2px 4px 0px rgba(0,0, 0, 0.12)',
'$color-brand1-1': '#D6F4ED',
'$color-brand1-6': '#01C1B2',
'$color-brand1-9': '#01A79A',
'$color-data1-1': '#01C1B2',
'$color-data1-2': '#5584FF',
'$color-data1-3': '#8272EC',
'$color-data1-4': '#FF445F',
'$color-data1-5': '#FF6A00',
'$color-data1-6': '#FFD74D',
'$color-data1-7': '#4DDE6D',
'$color-data1-8': '#18B1F7',
'$color-white': '#FFFFFF',
'$color-black': '#000000',
'$color-transparent': 'transparent',
'$color-success-1': '#E4FDDA',
'$color-success-2': '#CDF2BE',
'$color-success-3': '#46BC15',
'$color-success-4': '#41A716',
'$color-notice-1': '#E3F2FD',
'$color-notice-2': '#BAD9FF',
'$color-notice-3': '#4494F9',
'$color-notice-4': '#2E7DE0',
'$color-warning-1': '#FFF3E0',
'$color-warning-2': '#FFE6BD',
'$color-warning-3': '#FF9300',
'$color-warning-4': '#EB7E10',
'$color-error-1': '#FFECE4',
'$color-error-2': '#FFC8B2',
'$color-error-3': '#FF3000',
'$color-error-4': '#E72B00',
'$color-help-1': '#E3FFF8',
'$color-help-2': '#C0ECE2',
'$color-help-3': '#01C1B2',
'$color-help-4': '#01A79A',
'$color-link-1': '#5584FF',
'$color-link-2': '#5584FF',
'$color-link-3': '#3E71F7',
'$color-other-1': '#FFEB3B',
'$color-other-2': '#FCCC12',
'$color-other-3': '#EABB06',
'$color-line1-1': '#E6E7EB',
'$color-line1-2': '#DCDEE3',
'$color-line1-3': '#C4C6CF',
'$color-line1-4': '#A0A2AD',
'$color-fill1-1': '#F7F8FA',
'$color-fill1-2': '#F2F3F7',
'$color-fill1-3': '#EBECF0',
'$color-fill1-4': '#E2E4E8',
'$color-text1-1': '#CCCCCC',
'$color-text1-2': '#999999',
'$color-text1-3': '#666666',
'$color-text1-4': '#333333',
'$corner-1': '3px',
'$corner-2': '15px',
'$corner-3': '35px',
'$corner-circle': '50%',
'$corner-semicircle': '500px',
'$corner-zero': '0',
'$font-family-base': 'Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"',
'$font-lineheight-1': '1.3',
'$font-lineheight-2': '1.5',
'$font-lineheight-3': '1.7',
'$font-size-display-3': '56px',
'$font-size-display-2': '48px',
'$font-size-display-1': '36px',
'$font-size-headline': '24px',
'$font-size-title': '20px',
'$font-size-subhead': '16px',
'$font-size-body-2': '14px',
'$font-size-body-1': '12px',
'$font-size-caption': '12px',
'$font-weight-1': 'lighter',
'$font-weight-thin': '200',
'$font-weight-light': '300',
'$font-weight-2': 'normal',
'$font-weight-medium': '500',
'$font-weight-semi-bold': '600',
'$font-weight-3': 'bold',
'$font-weight-extra-bold': '800',
'$font-weight-ultra-bold': '900',
'$icon-xxs': '8px',
'$icon-xs': '12px',
'$icon-s': '16px',
'$icon-m': '20px',
'$icon-l': '24px',
'$icon-xl': '32px',
'$icon-xxl': '48px',
'$icon-xxxl': '64px',
'$icon-content-smile': '"\\e65f"',
'$icon-content-cry': '"\\e65d"',
'$icon-content-success': '"\\e60a"',
'$icon-content-warning': '"\\e60b"',
'$icon-content-prompt': '"\\e60c"',
'$icon-content-error': '"\\e60d"',
'$icon-content-help': '"\\e673"',
'$icon-content-clock': '"\\e621"',
'$icon-content-success-filling': '"\\e63a"',
'$icon-content-delete-filling': '"\\e623"',
'$icon-content-favorites-filling': '"\\e60e"',
'$icon-content-add': '"\\e655"',
'$icon-content-minus': '"\\e601"',
'$icon-content-arrow-up': '"\\e625"',
'$icon-content-arrow-down': '"\\e63d"',
'$icon-content-arrow-left': '"\\e61d"',
'$icon-content-arrow-right': '"\\e619"',
'$icon-content-arrow-double-left': '"\\e659"',
'$icon-content-arrow-double-right': '"\\e65e"',
'$icon-content-switch': '"\\e6b3"',
'$icon-content-sorting': '"\\e634"',
'$icon-content-descending': '"\\e61f"',
'$icon-content-ascending': '"\\e61e"',
'$icon-content-select': '"\\e632"',
'$icon-content-semi-select': '"\\e633"',
'$icon-content-loading': '"\\e646"',
'$icon-content-search': '"\\e656"',
'$icon-content-close': '"\\e626"',
'$icon-content-ellipsis': '"\\e654"',
'$icon-content-picture': '"\\e631"',
'$icon-content-calendar': '"\\e607"',
'$icon-content-ashbin': '"\\e639"',
'$icon-content-upload': '"\\e7ee"',
'$icon-content-download': '"\\e628"',
'$icon-content-set': '"\\e683"',
'$icon-content-edit': '"\\e63b"',
'$icon-content-refresh': '"\\e677"',
'$icon-content-filter': '"\\e627"',
'$icon-content-attachment': '"\\e665"',
'$icon-content-account': '"\\e608"',
'$icon-content-email': '"\\e605"',
'$icon-content-atm': '"\\e606"',
'$icon-content-copy': '"\\e60f"',
'$icon-content-toggle-left': '"\\e602"',
'$icon-content-toggle-right': '"\\e603"',
'$icon-content-eye': '"\\e611"',
'$icon-content-eye-close': '"\\e600"',
'$icon-content-unlock': '"\\e615"',
'$icon-content-lock': '"\\e617"',
'$icon-content-exit': '"\\e616"',
'$icon-content-chart-bar': '"\\e612"',
'$icon-content-chart-pie': '"\\e613"',
'$icon-content-form': '"\\e7fb"',
'$icon-content-detail': '"\\e7f8"',
'$icon-content-list': '"\\e7f9"',
'$icon-content-dashboard': '"\\e7fa"',
'$icon-reset': '""',
'$line-zero': '0',
'$line-1': '1px',
'$line-2': '2px',
'$line-3': '4px',
'$line-solid': 'solid',
'$line-dashed': 'dashed',
'$line-dotted': 'dotted',
'$shadow-zero': 'none',
'$shadow-1': '1px 1px 3px 0px rgba(0,0,0,0.12)',
'$shadow-1-up': '0px -1px 3px 0px rgba(0,0,0,0.12)',
'$shadow-1-right': '1px 0px 3px 0px rgba(0,0,0,0.12)',
'$shadow-1-down': '0px 1px 3px 0px rgba(0,0,0,0.12)',
'$shadow-1-left': '-1px 0px 3px 0px rgba(0,0,0,0.12)',
'$shadow-2': '2px 2px 4px 0px rgba(0,0,0,0.12)',
'$shadow-2-up': '0px -2px 4px 0px rgba(0,0,0,0.12)',
'$shadow-2-right': '2px 0px 4px 0px rgba(0,0,0,0.12)',
'$shadow-2-down': '0px 2px 4px 0px rgba(0,0,0,0.12)',
'$shadow-2-left': '-2px 0px 4px 0px rgba(0,0,0,0.12)',
'$shadow-3': '2px 2px 8px 0px rgba(0,0,0,0.12)',
'$shadow-3-up': '0px -2px 8px 0px rgba(0,0,0,0.12)',
'$shadow-3-right': '2px 0px 8px 0px rgba(0,0,0,0.12)',
'$shadow-3-down': '0px 2px 8px 0px rgba(0,0,0,0.12)',
'$shadow-3-left': '-2px 0px 8px 0px rgba(0,0,0,0.12)',
'$s-zero': '0',
'$s-1': '4px',
'$s-2': '8px',
'$s-3': '12px',
'$s-4': '16px',
'$s-5': '20px',
'$s-6': '24px',
'$s-7': '28px',
'$s-8': '32px',
'$s-9': '36px',
'$s-10': '40px',
'$s-11': '44px',
'$s-12': '48px',
'$s-13': '52px',
'$s-14': '56px',
'$s-15': '60px',
'$s-16': '64px',
'$s-17': '68px',
'$s-18': '72px',
'$s-19': '76px',
'$s-20': '80px',
'$s-21': '84px',
'$s-22': '88px',
'$s-23': '92px',
'$s-24': '96px',
'$s-25': '100px',
'$s-26': '104px',
'$s-27': '108px',
'$s-28': '112px',
'$s-29': '116px',
'$s-30': '120px',
'$s-31': '124px',
'$s-32': '128px',
'$s-33': '132px',
'$s-34': '136px',
'$s-35': '140px',
'$s-36': '144px',
'$s-37': '148px',
'$s-38': '152px',
'$s-39': '156px',
'$s-40': '160px',
'$s-41': '164px',
'$s-42': '168px',
'$s-43': '172px',
'$s-44': '176px',
'$s-45': '180px',
'$s-46': '184px',
'$s-47': '188px',
'$s-48': '192px',
'$s-49': '196px',
'$s-50': '200px',
}

export default theme