Last active
December 27, 2019 10:42
-
-
Save cheton/f920cc8ca1c3b879cde0e3bf76ffe712 to your computer and use it in GitHub Desktop.
(Draft) Trend Micro Frontend Theme
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const breakpoints = [ | |
| '320px', | |
| '640px', | |
| '1024px', | |
| '1280px', | |
| '1680px', | |
| ]; | |
| // @media screen and (min-width: 320px) | |
| // @media screen and (min-width: 640px) | |
| // @media screen and (min-width: 1024px) | |
| // @media screen and (min-width: 1280px) | |
| // @media screen and (min-width: 1680px) | |
| // aliases | |
| breakpoints.sm = breakpoints[0]; | |
| breakpoints.md = breakpoints[1]; | |
| breakpoints.lg = breakpoints[2]; | |
| breakpoints.xl = breakpoints[3]; | |
| breakpoints['2xl'] = breakpoints[4]; | |
| // Space for margin and padding | |
| const space = { | |
| 0: '0', | |
| xs: '.125rem', // 2px | |
| sm: '.25rem', // 4px | |
| md: '.5rem', // 8px | |
| lg: '.75rem', // 12px | |
| xl: '1rem', // 16px | |
| '1.5xl': '1.5rem', // 24px | |
| '2xl': '2rem', // 32px | |
| '2.5xl': '2.5rem', // 40px | |
| '3xl': '3rem', // 48px | |
| '4xl': '4rem', // 64px | |
| '5xl': '5rem', // 80px | |
| '6xl': '6rem', // 96px | |
| }; | |
| const fontSizes = { | |
| xs: '.75rem', // font-size: 12px, line-height: 18px | |
| sm: '.875rem', // font-size: 14px, line-height: 20px | |
| md: '1rem', // font-size: 16px, line-height: 22px | |
| lg: '1.125rem', // font-size: 18px, line-height: 24px | |
| xl: '1.25rem', // font-size: 20px, line-height: 28px | |
| '2xl': '1.5rem', // font-size: 24px, line-height: 32px | |
| '3xl': '1.75rem', // font-size: 28px, line-height: 36px | |
| '4xl': '2rem', // font-size: 32px, line-height: 40px | |
| }; | |
| const colors = { | |
| transparent: 'transparent', | |
| current: 'currentColor', | |
| // Red | |
| red: { | |
| 100: '#6e0002', | |
| 90: '#9d0003', | |
| 80: '#b80003', | |
| 70: '#d71920', | |
| 60: '#e52630', | |
| 50: '#f24c4f', | |
| 40: '#f46f71', | |
| 30: '#fd999a', | |
| 20: '#fcc3c4', | |
| 10: '#fee1e2', | |
| }, | |
| // Magenta | |
| magenta: { | |
| 100: '#750037', | |
| 90: '#960043', | |
| 80: '#b3004c', | |
| 70: '#ca0455', | |
| 60: '#dc1d68', | |
| 50: '#e94181', | |
| 40: '#f36fa0', | |
| 30: '#f9a0c1', | |
| 20: '#fcc3d8', | |
| 10: '#fee1ec', | |
| }, | |
| // Purple | |
| purple: { | |
| 100: '#460086', | |
| 90: '#5300a5', | |
| 80: '#6304ca', | |
| 70: '#771ddc', | |
| 60: '#8f41e9', | |
| 50: '#ab6ff3', | |
| 40: '#bb89f6', | |
| 30: '#cca6f9', | |
| 20: '#ddc3fc', | |
| 10: '#eee1fe', | |
| }, | |
| // Blue | |
| blue: { | |
| 100: '#002a7e', | |
| 90: '#00349d', | |
| 80: '#003db8', | |
| 70: '#0547cd', | |
| 60: '#1e5ede', | |
| 50: '#578aef', | |
| 40: '#6f9bf4', | |
| 30: '#95b7fc', | |
| 20: '#c3d6fc', | |
| 10: '#e1ebfe', | |
| }, | |
| // Green | |
| green: { | |
| 100: '#003011', | |
| 90: '#00461a', | |
| 80: '#005c24', | |
| 70: '#00712e', | |
| 60: '#008539', | |
| 50: '#00a94f', | |
| 40: '#04c45a', | |
| 30: '#40e884', | |
| 20: '#89f6b2', | |
| 10: '#c3fcd8', | |
| }, | |
| // Teal | |
| teal: { | |
| 100: '#004034', | |
| 90: '#005242', | |
| 80: '#006451', | |
| 70: '#00755f', | |
| 60: '#00866c', | |
| 50: '#00a584', | |
| 40: '#04caa1', | |
| 30: '#4119c5', | |
| 20: '#89f6df', | |
| 10: '#c3fcf0', | |
| }, | |
| // Cyan | |
| cyan: { | |
| 100: '#003664', | |
| 90: '#004575', | |
| 80: '#005486', | |
| 70: '#006496', | |
| 60: '#0075a5', | |
| 50: '#0095bf', | |
| 40: '#10b4d3', | |
| 30: '#41d8e9', | |
| 20: '#89f0f6', | |
| 10: '#c3f9fc', | |
| }, | |
| // Gray | |
| gray: { | |
| 100: '#151515', | |
| 90: '#212121', | |
| 80: '#303030', | |
| 70: '#424242', | |
| 60: '#5e5e5e', | |
| 50: '#8a8a8a', | |
| 40: '#adadad', | |
| 30: '#c9c9c9', | |
| 20: '#e0e0e0', | |
| 10: '#f2f2f2', | |
| }, | |
| // White | |
| white: '#ffffff', | |
| // Black | |
| black: '#000000', | |
| // Orange | |
| orange: { | |
| 50: '#ff7633', | |
| }, | |
| // Yellow | |
| yellow: { | |
| 50: '#faca2a', | |
| }, | |
| }; | |
| /** | |
| * A generic font family should be the last item in the list of font family names. | |
| * The keywords includes: serif, sans-serif, monospace, cursive, fantasy, system-ui, math, emoji, fangsong | |
| */ | |
| const fonts = { | |
| heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif', | |
| base: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif', | |
| mono: '"SFMono-Medium", "SF Mono", "Segoe UI Mono", Menlo, Consolas, Courier, monospace', | |
| }; | |
| const fontWeights = { | |
| thin: 100, | |
| extralight: 200, | |
| light: 300, | |
| normal: 400, | |
| medium: 500, | |
| semibold: 600, | |
| bold: 700, | |
| extrabold: 800, | |
| black: 900, | |
| }; | |
| const lineHeights = { | |
| xs: '1.125rem', // font-size: 12px, line-height: 18px | |
| sm: '1.25rem', // font-size: 14px, line-height: 20px | |
| md: '1.375rem', // font-size: 16px, line-height: 22px | |
| lg: '1.5rem', // font-size: 18px, line-height: 24px | |
| xl: '1.75rem', // font-size: 20px, line-height: 28px | |
| '2xl': '2rem', // font-size: 24px, line-height: 32px | |
| '3xl': '2.25rem', // font-size: 28px, line-height: 36px | |
| '4xl': '2.5rem', // font-size: 32px, line-height: 40px | |
| normal: 'normal', | |
| none: '1', | |
| // TO BE REFINED LATER | |
| short: '1.3', | |
| base: '1.5', | |
| tall: '1.75', | |
| }; | |
| const letterSpacings = { | |
| // Not required here | |
| }; | |
| const sizes = { | |
| // Not required here | |
| }; | |
| const borders = { | |
| none: 0, | |
| 1: '1px solid', | |
| 2: '2px solid', | |
| }; | |
| const borderWidths = { | |
| none: 0, | |
| 1: '1px', | |
| 2: '2px', | |
| }; | |
| const radii = { | |
| circle: '50%', | |
| none: 0, | |
| sm: '3px', | |
| md: '6px', | |
| lg: '12px', | |
| }; | |
| const shadows = { | |
| none: 'none', | |
| /** | |
| * offset-x | offset-y | blur-radius | spread-radius | color | |
| */ | |
| '1x': { | |
| dark: '0 2px 8px 0 rgba(0, 0, 0, 0.48), 0 1px 2px 0 rgba(0, 0, 0, 0.16)', | |
| light: '0 2px 8px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.08)', | |
| }, | |
| '2x': { | |
| dark: '0 4px 16px 0 rgba(0, 0, 0, 0.48), 0 2px 4px 0 rgba(0, 0, 0, 0.16)', | |
| light: '0 4px 16px 0 rgba(0, 0, 0, 0.16), 0 2px 4px 0 rgba(0, 0, 0, 0.08)', | |
| }, | |
| '4x': { | |
| dark: '0 8px 32px 0 rgba(0, 0, 0, 0.48), 0 4px 8px 0 rgba(0, 0, 0, 0.16)', | |
| light: '0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 4px 8px 0 rgba(0, 0, 0, 0.08)', | |
| }, | |
| }; | |
| const zIndices = { | |
| hide: -1, | |
| auto: 'auto', | |
| base: 0, | |
| dropdown: 1000, | |
| sticky: 1100, | |
| fixed: 1200, | |
| overlay: 1300, | |
| drawer: 1400, | |
| modal: 1500, | |
| popover: 1600, | |
| toast: 1700, | |
| tooltip: 1800, | |
| }; | |
| const theme = { | |
| breakpoints, | |
| space, | |
| fontSizes, | |
| colors, | |
| fonts, | |
| fontWeights, | |
| lineHeights, | |
| letterSpacings, | |
| sizes, | |
| borders, | |
| borderWidths, | |
| radii, | |
| shadows, | |
| zIndices, | |
| }; | |
| export default theme; |
I removed media query from theme object, it should be implemented in the component level.
Maybe we could have this?
const mediaQueries = { all: 'all', print: 'print', screen: 'screen' };
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Maybe we could have this?