├── .DS_Store ├── .babelrc ├── .github ├── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md └── PULL_REQUEST_TEMPLATE.md ├── .gitignore ├── .npmignore ├── .travis.yml ├── LICENSE ├── README.md ├── docs └── logo.png ├── package.json ├── src ├── config │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── config.spec.ts.snap │ │ └── config.spec.ts │ ├── box-styles.config.ts │ ├── colors.config.ts │ ├── position.config.ts │ ├── size.config.ts │ └── typography.config.ts ├── styles │ ├── box-styles.styles.ts │ ├── colors.styles.ts │ ├── positon.styles.ts │ └── typography.styles.ts └── types │ ├── box-styles.types.ts │ ├── color.types.ts │ ├── postition.types.ts │ ├── size.types.ts │ └── typography.types.ts ├── tsconfig.json └── yarn.lock /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshferrell/tailwind-system/8bbb1b3c668708690fe91aab75d470d2c2b63ae0/.DS_Store -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/env", 4 | "@babel/typescript" 5 | ], 6 | "plugins": [ 7 | "@babel/proposal-class-properties", 8 | "@babel/proposal-object-rest-spread" 9 | ] 10 | } -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior: 15 | 1. Go to '...' 16 | 2. Click on '....' 17 | 3. Scroll down to '....' 18 | 4. See error 19 | 20 | **Expected behavior** 21 | A clear and concise description of what you expected to happen. 22 | 23 | **Screenshots** 24 | If applicable, add screenshots to help explain your problem. 25 | 26 | **Desktop (please complete the following information):** 27 | - OS: [e.g. iOS] 28 | - Browser [e.g. chrome, safari] 29 | - Version [e.g. 22] 30 | 31 | **Smartphone (please complete the following information):** 32 | - Device: [e.g. iPhone6] 33 | - OS: [e.g. iOS8.1] 34 | - Browser [e.g. stock browser, safari] 35 | - Version [e.g. 22] 36 | 37 | **Additional context** 38 | Add any other context about the problem here. 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Is your feature request related to a problem? Please describe.** 11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] 12 | 13 | **Describe the solution you'd like** 14 | A clear and concise description of what you want to happen. 15 | 16 | **Describe alternatives you've considered** 17 | A clear and concise description of any alternative solutions or features you've considered. 18 | 19 | **Additional context** 20 | Add any other context or screenshots about the feature request here. 21 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | * **Please check if the PR fulfills these requirements** 2 | - [ ] The commit message follows our guidelines 3 | - [ ] Tests for the changes have been added (for bug fixes / features) 4 | - [ ] Docs have been added / updated (for bug fixes / features) 5 | 6 | 7 | * **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...) 8 | 9 | 10 | 11 | * **What is the current behavior?** (You can also link to an open issue here) 12 | 13 | 14 | 15 | * **What is the new behavior (if this is a feature change)?** 16 | 17 | 18 | 19 | * **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?) 20 | 21 | 22 | 23 | * **Other information**: 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | dist 3 | node_modules -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | src/ 2 | docs/ 3 | .github/ 4 | .travis.yml -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "lts/*" 4 | 5 | jobs: 6 | include: 7 | - stage: Test 8 | name: "Type Check" 9 | script: yarn type-check 10 | - script: yarn test 11 | name: "Unit Tests" -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Joshua Ferrell 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | Tailwind System logo 3 |
Tailwind System
4 |

5 | 6 | [![Greenkeeper badge](https://badges.greenkeeper.io/joshferrell/tailwind-system.svg)](https://greenkeeper.io/) 7 | [![Build Status](https://travis-ci.org/joshferrell/tailwind-system.svg?branch=master)](https://travis-ci.org/joshferrell/tailwind-system) 8 | 9 | This project is an implementation of [Tailwind CSS](https://tailwindcss.com/) using [Styled System](https://styled-system.com/). The reasoning behind this was that some may prefer using styled system to apply their utility styles, versus class names which can be forgotten by other developers. If your spacing system is available to devs via a prop, they are more likely to use that than an inline style. 10 | 11 | Another benefit is that class names are unknown to your IDE. Whereas what utilities you have available on your component will be listed as props that are available and auto completed since this project uses typescript. No more having to switch back and forth between api documentation. Once your component is made, you can simply see what the IDE autocompletes to. 12 | 13 | ## How to use 14 | 15 | Styled System is built on CSS-in-JS libraries, so installing a implmentation of those things is required to use this library. See [Emotion](https://github.com/emotion-js/emotion) or [Styled Components](https://github.com/styled-components/styled-components) for possible implemntations of this. You might also want to check out the [getting started guide](https://styled-system.com/#getting-started) from styled-system to get more information and also create your own custom systems. 16 | 17 | ## Differences of Tailwind 18 | 19 | ### Color Differences 20 | There are some minor differences between this library and tailwind. First, instead of using named color values like `text-indigo-600` this library uses a naming convention of primary, secondary, tertiary, and status, similar to [bootstrap 4.0](https://getbootstrap.com/docs/4.0/utilities/colors/). This is an important distinction, as if you attempt to change the theme of your application, you have all these named color values which would be hard coded in your application. 21 | 22 | ### Missing Features 23 | Another difference would be that _all_ features in tailwind, may not exist in this library. [These things take time](https://www.youtube.com/watch?v=0d6yBHDvKUw), and if there is a feature that hasn't been issued yet, [create an issue]() and we'll get on it. 24 | 25 | ### TODO 26 | - [ ] Create a basic example 27 | - [ ] Add type documentation like simple js 28 | - [ ] Add linting and prettier 29 | - [ ] Add breakpoint definitions 30 | - [ ] Add linting and prettier 31 | - [ ] Add automated deploy to travis 32 | - [ ] Create unit tests for config files 33 | - [ ] Create unit tests for style implementation 34 | - [ ] Remove type defs from code coverage -------------------------------------------------------------------------------- /docs/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshferrell/tailwind-system/8bbb1b3c668708690fe91aab75d470d2c2b63ae0/docs/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tailwind-system", 3 | "version": "1.0.0", 4 | "description": "Tailwind implementation using system components", 5 | "main": "dist/index.js", 6 | "author": "Josh Ferrell", 7 | "license": "MIT", 8 | "private": true, 9 | "scripts": { 10 | "type-check": "tsc --noEmit", 11 | "type-check:watch": "npm run type-check -- --watch", 12 | "build": "npm run build:types && npm run build:js", 13 | "build:types": "tsc --emitDeclarationOnly", 14 | "build:js": "babel src --out-dir lib --extensions \".ts,.tsx\" --ignore \"**/__tests__\" --source-maps inline", 15 | "prepublish": "npm run build", 16 | "test": "jest", 17 | "test:watch": "npm run test --watch" 18 | }, 19 | "devDependencies": { 20 | "@babel/cli": "^7.4.4", 21 | "@babel/core": "^7.4.5", 22 | "@babel/plugin-proposal-class-properties": "^7.4.4", 23 | "@babel/plugin-proposal-object-rest-spread": "^7.4.4", 24 | "@babel/preset-env": "^7.4.5", 25 | "@babel/preset-typescript": "^7.3.3", 26 | "@types/jest": "^24.0.13", 27 | "@types/styled-system": "^4.2.1", 28 | "csstype": "^2.6.5", 29 | "jest": "^24.8.0", 30 | "styled-system": "^5.0.5", 31 | "typescript": "^3.5.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/config/__tests__/__snapshots__/config.spec.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`tailwind theme configurations should have box styles 1`] = ` 4 | Object { 5 | "backgroundPosition": Object { 6 | "bottom": "bottom", 7 | "center": "center", 8 | "left": "left", 9 | "left-bottom": "left bottom", 10 | "left-top": "left top", 11 | "right": "right", 12 | "right-bottom": "right bottom", 13 | "right-top": "right top", 14 | "top": "top", 15 | }, 16 | "backgroundSize": Object { 17 | "auto": "auto", 18 | "contain": "contain", 19 | "cover": "cover", 20 | }, 21 | "borderRadius": Object { 22 | "default": "0.25rem", 23 | "full": "9999px", 24 | "lg": "0.5rem", 25 | "none": "0", 26 | "sm": "0.125rem", 27 | }, 28 | "borderWidth": Array [ 29 | 0, 30 | "2px", 31 | "4px", 32 | "8px", 33 | ], 34 | "boxShadow": Object { 35 | "2xl": "0 25px 50px -12px rgba(0, 0, 0, 0.25)", 36 | "default": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)", 37 | "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)", 38 | "lg": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)", 39 | "md": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)", 40 | "none": "none", 41 | "outline": "0 0 0 3px rgba(66, 153, 225, 0.5)", 42 | "xl": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)", 43 | }, 44 | "cursor": Object { 45 | "auto": "auto", 46 | "default": "default", 47 | "move": "move", 48 | "not-allowed": "not-allowed", 49 | "pointer": "pointer", 50 | "text": "text", 51 | "wait": "wait", 52 | }, 53 | "inset": Object { 54 | "0": "0", 55 | "auto": "auto", 56 | }, 57 | "listStyleType": Object { 58 | "decimal": "decimal", 59 | "disc": "disc", 60 | "none": "none", 61 | }, 62 | "opacity": Array [ 63 | 0, 64 | 0.25, 65 | 0.5, 66 | 0.75, 67 | 1, 68 | ], 69 | } 70 | `; 71 | -------------------------------------------------------------------------------- /src/config/__tests__/config.spec.ts: -------------------------------------------------------------------------------- 1 | import boxStyles from '../box-styles.config'; 2 | 3 | describe('tailwind theme configurations', () => { 4 | it('should have box styles', () => { 5 | expect(boxStyles).toMatchSnapshot(); 6 | }) 7 | }) -------------------------------------------------------------------------------- /src/config/box-styles.config.ts: -------------------------------------------------------------------------------- 1 | const borderWidth: any = [0, '2px', '4px', '8px']; 2 | borderWidth.default = '1px'; 3 | 4 | export default { 5 | backgroundPosition: { 6 | bottom: 'bottom', 7 | center: 'center', 8 | left: 'left', 9 | 'left-bottom': 'left bottom', 10 | 'left-top': 'left top', 11 | right: 'right', 12 | 'right-bottom': 'right bottom', 13 | 'right-top': 'right top', 14 | top: 'top' 15 | }, 16 | backgroundSize: { 17 | auto: 'auto', 18 | cover: 'cover', 19 | contain: 'contain' 20 | }, 21 | boxShadow: { 22 | default: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', 23 | md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', 24 | lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', 25 | xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', 26 | '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', 27 | inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', 28 | outline: '0 0 0 3px rgba(66, 153, 225, 0.5)', 29 | none: 'none' 30 | }, 31 | cursor: { 32 | auto: 'auto', 33 | default: 'default', 34 | pointer: 'pointer', 35 | wait: 'wait', 36 | text: 'text', 37 | move: 'move', 38 | 'not-allowed': 'not-allowed' 39 | }, 40 | inset: { 41 | '0': '0', 42 | auto: 'auto' 43 | }, 44 | listStyleType: { 45 | none: 'none', 46 | disc: 'disc', 47 | decimal: 'decimal' 48 | }, 49 | opacity: [0, 0.25, 0.5, 0.75, 1], 50 | borderRadius: { 51 | none: '0', 52 | sm: '0.125rem', 53 | default: '0.25rem', 54 | lg: '0.5rem', 55 | full: '9999px' 56 | }, 57 | borderWidth: borderWidth 58 | } -------------------------------------------------------------------------------- /src/config/colors.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | transparent: 'transparent', 3 | positive: '#000', 4 | negative: '#fff', 5 | primary: { 6 | 100: '#ebf8ff', 7 | 200: '#bee3f8', 8 | 300: '#90cdf4', 9 | 400: '#63b3ed', 10 | 500: '#4299e1', 11 | 600: '#3182ce', 12 | 700: '#2b6cb0', 13 | 800: '#2c5282', 14 | 900: '#2a4365' 15 | }, 16 | secondary: { 17 | 100: '#ebf4ff', 18 | 200: '#c3dafe', 19 | 300: '#a3bffa', 20 | 400: '#7f9cf5', 21 | 500: '#667eea', 22 | 600: '#5a67d8', 23 | 700: '#4c51bf', 24 | 800: '#434190', 25 | 900: '#3c366b' 26 | }, 27 | tertiary: { 28 | 100: '#e6fffa', 29 | 200: '#b2f5ea', 30 | 300: '#81e6d9', 31 | 400: '#4fd1c5', 32 | 500: '#38b2ac', 33 | 600: '#319795', 34 | 700: '#2c7a7b', 35 | 800: '#285e61', 36 | 900: '#234e52' 37 | }, 38 | neutral: { 39 | l6: '#f7fafc', 40 | l5: '#edf2f7', 41 | l4: '#e2e8f0', 42 | l3: '#cbd5e0', 43 | l2: '#a0aec0', 44 | l1: '#718096', 45 | primary: '#4a5568', 46 | dark1: '#2d3748', 47 | dark2: '#1a202c' 48 | }, 49 | danger: { 50 | l6: '#fff5f5', 51 | l5: '#fed7d7', 52 | l4: '#feb2b2', 53 | l3: '#fc8181', 54 | l2: '#f56565', 55 | l1: '#e53e3e', 56 | primary: '#c53030', 57 | dark1: '#9b2c2c', 58 | dark2: '#742a2a' 59 | }, 60 | warning: { 61 | l6: '#fffaf0', 62 | l5: '#feebc8', 63 | l4: '#fbd38d', 64 | l3: '#f6ad55', 65 | l2: '#ed8936', 66 | l1: '#dd6b20', 67 | primary: '#c05621', 68 | dark1: '#9c4221', 69 | dark2: '#7b341e' 70 | }, 71 | success: { 72 | 100: '#f0fff4', 73 | 200: '#c6f6d5', 74 | 300: '#9ae6b4', 75 | 400: '#68d391', 76 | 500: '#48bb78', 77 | 600: '#38a169', 78 | 700: '#2f855a', 79 | 800: '#276749', 80 | 900: '#22543d' 81 | }, 82 | info: { 83 | 100: '#faf5ff', 84 | 200: '#e9d8fd', 85 | 300: '#d6bcfa', 86 | 400: '#b794f4', 87 | 500: '#9f7aea', 88 | 600: '#805ad5', 89 | 700: '#6b46c1', 90 | 800: '#553c9a', 91 | 900: '#44337a' 92 | }, 93 | highlight: { 94 | 100: '#fff5f7', 95 | 200: '#fed7e2', 96 | 300: '#fbb6ce', 97 | 400: '#f687b3', 98 | 500: '#ed64a6', 99 | 600: '#d53f8c', 100 | 700: '#b83280', 101 | 800: '#97266d', 102 | 900: '#702459' 103 | } 104 | }; -------------------------------------------------------------------------------- /src/config/position.config.ts: -------------------------------------------------------------------------------- 1 | const order: any = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]; 2 | order.first = '-9999'; 3 | order.last = '9999'; 4 | order.none = '0'; 5 | 6 | const zIndex: any = [0, 10, 20, 30, 40, 50]; 7 | zIndex.auto = 'auto'; 8 | 9 | export default { 10 | flex: { 11 | '1': '1 1 0%', 12 | auto: '1 1 auto', 13 | initial: '0 1 auto', 14 | none: 'none', 15 | }, 16 | flexGrow: { 17 | '0': '0', 18 | default: '1', 19 | }, 20 | flexShrink: { 21 | '0': '0', 22 | default: '1' 23 | }, 24 | objectPosition: { 25 | bottom: 'bottom', 26 | center: 'center', 27 | left: 'left', 28 | 'left-bottom': 'left bottom', 29 | 'left-top': 'left top', 30 | right: 'right', 31 | 'right-bottom': 'right bottom', 32 | 'right-top': 'right top', 33 | top: 'top', 34 | }, 35 | order, 36 | zIndex 37 | } -------------------------------------------------------------------------------- /src/config/size.config.ts: -------------------------------------------------------------------------------- 1 | const spacing: any = [0, '0.25rem', '0.5rem', '0.75rem', '1rem', '1.25rem', '1.5rem', '2rem', '2.5rem', '3rem', '4rem', '5rem', '6rem', '8rem', '10rem', '12rem', '14rem', '16rem']; 2 | spacing.px = '1px'; 3 | 4 | export default { 5 | spacing, 6 | maxHeight: { 7 | full: '100%', 8 | screen: '100vh', 9 | }, 10 | maxWidth: { 11 | xs: '20rem', 12 | sm: '24rem', 13 | md: '28rem', 14 | lg: '32rem', 15 | xl: '36rem', 16 | '2xl': '42rem', 17 | '3xl': '48rem', 18 | '4xl': '56rem', 19 | '5xl': '64rem', 20 | '6xl': '72rem', 21 | full: '100%', 22 | }, 23 | minHeight: { 24 | '0': '0', 25 | full: '100%', 26 | screen: '100vh', 27 | }, 28 | minWidth: { 29 | '0': '0', 30 | full: '100%', 31 | }, 32 | width: { 33 | auto: 'auto', 34 | ...spacing, 35 | '1/2': '50%', 36 | '1/3': '33.33333%', 37 | '2/3': '66.66667%', 38 | '1/4': '25%', 39 | '2/4': '50%', 40 | '3/4': '75%', 41 | '1/5': '20%', 42 | '2/5': '40%', 43 | '3/5': '60%', 44 | '4/5': '80%', 45 | '1/6': '16.66667%', 46 | '2/6': '33.33333%', 47 | '3/6': '50%', 48 | '4/6': '66.66667%', 49 | '5/6': '83.33333%', 50 | '1/12': '8.33333%', 51 | '2/12': '16.66667%', 52 | '3/12': '25%', 53 | '4/12': '33.33333%', 54 | '5/12': '41.66667%', 55 | '6/12': '50%', 56 | '7/12': '58.33333%', 57 | '8/12': '66.66667%', 58 | '9/12': '75%', 59 | '10/12': '83.33333%', 60 | '11/12': '91.66667%', 61 | full: '100%', 62 | screen: '100vw', 63 | }, 64 | height: { 65 | auto: 'auto', 66 | ...spacing, 67 | full: '100%', 68 | screen: '100vh' 69 | } 70 | } 71 | 72 | // TODO: margin 73 | // TODO: padding -------------------------------------------------------------------------------- /src/config/typography.config.ts: -------------------------------------------------------------------------------- 1 | export default { 2 | fontFamily: { 3 | sans: '-apple-system BlinkMacSystemFont "Segoe UI" Roboto "Helvetica Neue" Arial "Noto Sans" sans-serif "Apple Color Emoji" "Segoe UI Emoji" "Segoe UI Symbol" "Noto Color Emoji"', 4 | serif: 'Georgia Cambria "Times New Roman" Times serif', 5 | mono: 'Menlo Monaco Consolas "Liberation Mono" "Courier New" monospace' 6 | }, 7 | fontSize: { 8 | xs: '0.75rem', 9 | sm: '0.875rem', 10 | base: '1rem', 11 | lg: '1.125rem', 12 | xl: '1.25rem', 13 | '2xl': '1.5rem', 14 | '3xl': '1.875rem', 15 | '4xl': '2.25rem', 16 | '5xl': '3rem', 17 | '6xl': '4rem', 18 | }, 19 | fontWeight: { 20 | hairline: '100', 21 | thin: '200', 22 | light: '300', 23 | normal: '400', 24 | medium: '500', 25 | semibold: '600', 26 | bold: '700', 27 | extrabold: '800', 28 | black: '900', 29 | }, 30 | letterSpacing: { 31 | tighter: '-0.05em', 32 | tight: '-0.025em', 33 | normal: '0', 34 | wide: '0.025em', 35 | wider: '0.05em', 36 | widest: '0.1em', 37 | }, 38 | lineHeight: { 39 | none: '1', 40 | tight: '1.25', 41 | snug: '1.375', 42 | normal: '1.5', 43 | relaxed: '1.625', 44 | loose: '2', 45 | } 46 | } -------------------------------------------------------------------------------- /src/styles/box-styles.styles.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { system } from 'styled-system'; 3 | import boxStylesConfig from '../config/box-styles.config'; 4 | 5 | type PropertyTypes = 'backgroundPosition' | 'backgroundSize' | 'boxShadow' | 'cursor' | 'inset' | 'listStyleType' | 'opacity' | 'borderRadius' | 'borderWidth'; 6 | const createSystem = (property: PropertyTypes) => system({ 7 | property, 8 | scale: property, 9 | defaultScale: boxStylesConfig[property] 10 | }); 11 | 12 | export const backgroundPosition = createSystem('backgroundPosition'); 13 | export const backgroundSize = createSystem('backgroundSize'); 14 | export const boxShadow = createSystem('boxShadow'); 15 | export const cursor = createSystem('cursor'); 16 | export const inset = createSystem('inset'); 17 | export const listStyleType = createSystem('listStyleType'); 18 | export const opacity = createSystem('opacity'); 19 | export const borderRadius = createSystem('borderRadius'); 20 | export const borderWidth = createSystem('borderWidth'); 21 | 22 | -------------------------------------------------------------------------------- /src/styles/colors.styles.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { system } from 'styled-system'; 3 | import colorDefaults from '../config/colors.config'; 4 | 5 | const createSystem = (property: string) => system({ 6 | property, 7 | scale: property, 8 | defaultScale: colorDefaults 9 | }); 10 | 11 | const colorConfig = { 12 | color: { 13 | property: 'color', 14 | scale: 'colors', 15 | defaultScale: colorDefaults 16 | }, 17 | backgroundColor: { 18 | property: 'backgroundColor', 19 | scale: 'colors', 20 | defaultScale: colorDefaults 21 | }, 22 | bg: {}, 23 | textColor: {}, 24 | opacity: true 25 | }; 26 | 27 | colorConfig.bg = colorConfig.backgroundColor; 28 | colorConfig.textColor = colorConfig.color; 29 | 30 | export const color = system(colorConfig); 31 | export const stroke = createSystem('stroke'); 32 | export const fill = createSystem('fill'); 33 | export const borderColor = createSystem('borderColor'); -------------------------------------------------------------------------------- /src/styles/positon.styles.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { system } from 'styled-system'; 3 | import positionConfig from '../config/position.config'; 4 | 5 | type PropertyTypes = 'flex' | 'flexGrow' | 'flexShrink' | 'objectPosition' | 'order' | 'zIndex'; 6 | const createSystem = (property: PropertyTypes) => system({ 7 | property, 8 | scale: property, 9 | defaultScale: positionConfig[property] 10 | }); 11 | 12 | export const flex = createSystem('flex'); 13 | export const flexGrow = createSystem('flexGrow'); 14 | export const flexShrink = createSystem('flexShrink'); 15 | export const objectPosition = createSystem('objectPosition'); 16 | export const order = createSystem('order'); 17 | export const zIndex = createSystem('zIndex'); -------------------------------------------------------------------------------- /src/styles/typography.styles.ts: -------------------------------------------------------------------------------- 1 | // @ts-ignore 2 | import { system } from 'styled-system'; 3 | import typographyConfig from '../config/typography.config'; 4 | 5 | type PropertyTypes = 'fontFamily' | 'fontSize' | 'fontWeight' | 'letterSpacing' | 'lineHeight'; 6 | const createSystem = (property: PropertyTypes) => system({ 7 | property, 8 | scale: property, 9 | defaultScale: typographyConfig[property] 10 | }); 11 | 12 | export const fontFamily = createSystem('fontFamily'); 13 | export const fontSize = createSystem('fontSize'); 14 | export const fontWeight = createSystem('fontWeight'); 15 | export const letterSpacing = createSystem('letterSpacing'); 16 | export const lineHeight = createSystem('lineHeight'); -------------------------------------------------------------------------------- /src/types/box-styles.types.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveValue } from 'styled-system'; 2 | import CSS from 'csstype'; 3 | 4 | type BackgroundPositionTypes = 'bottom' | 'center' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top'; 5 | export interface BackgroundPositionProps { 6 | backgroundPosition?: ResponsiveValue< 7 | CSS.BackgroundPositionProperty 8 | >; 9 | } 10 | 11 | type BackgroundSizeTypes = 'auto' | 'cover' | 'contain'; 12 | export interface BackgroundSizeProps { 13 | backgroundSize?: ResponsiveValue>; 14 | } 15 | 16 | 17 | type BoxShadowTypes = 'default' | 'md' | 'lg' | 'xl' | 'inner' | 'outline' | 'none'; 18 | export interface BoxShadowProps { 19 | boxShadow?: ResponsiveValue; 20 | } 21 | 22 | type CursorTypes = 'auto' | 'default' | 'pointer' | 'wait' | 'text' | 'move' | 'not-allowed'; 23 | export interface CurosrProps { 24 | cursor?: ResponsiveValue; 25 | } 26 | 27 | type InsetTypes = '0' | 0 | 'auto'; 28 | export interface InsetProps { 29 | inset?: ResponsiveValue>; 30 | } 31 | 32 | type ListStyleTypes = 'none' | 'disc' | 'decimal'; 33 | export interface ListStyleProps { 34 | lightStyleType?: ResponsiveValue; 35 | } 36 | 37 | type OpacityTypes = 0 | 1 | 2 | 3 | 4; 38 | export interface OpacityProps { 39 | opacity?: ResponsiveValue; 40 | } 41 | 42 | type BorderRadiusTypes = 'none' | 'sm' | 'default' | 'lg' | 'full'; 43 | export interface BorderRadiusProps { 44 | borderRadius?: ResponsiveValue>; 45 | } 46 | 47 | type BorderWidthTypes = 0 | 1 | 2 | 3 | 'default'; 48 | export interface BorderWidthProperty { 49 | borderWidth?: ResponsiveValue>; 50 | } -------------------------------------------------------------------------------- /src/types/color.types.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveValue } from 'styled-system'; 2 | import CSS from 'csstype'; 3 | 4 | export type ColorTypes = 'transparent' | 5 | 'positive' | 6 | 'negative' | 7 | 'primary.l6' | 8 | 'primary.l5' | 9 | 'primary.l4' | 10 | 'primary.l3' | 11 | 'primary.l2' | 12 | 'primary.l1' | 13 | 'primary.primary' | 14 | 'primary.dark1' | 15 | 'primary.dark2' | 16 | 'secondary.l6' | 17 | 'secondary.l5' | 18 | 'secondary.l4' | 19 | 'secondary.l3' | 20 | 'secondary.l2' | 21 | 'secondary.l1' | 22 | 'secondary.primary' | 23 | 'secondary.dark1' | 24 | 'secondary.dark2' | 25 | 'tertiary.l6' | 26 | 'tertiary.l5' | 27 | 'tertiary.l4' | 28 | 'tertiary.l3' | 29 | 'tertiary.l2' | 30 | 'tertiary.l1' | 31 | 'tertiary.primary' | 32 | 'tertiary.dark1' | 33 | 'tertiary.dark2' | 34 | 'neutral.l6' | 35 | 'neutral.l5' | 36 | 'neutral.l4' | 37 | 'neutral.l3' | 38 | 'neutral.l2' | 39 | 'neutral.l1' | 40 | 'neutral.primary' | 41 | 'neutral.dark1' | 42 | 'neutral.dark2' | 43 | 'danger.l6' | 44 | 'danger.l5' | 45 | 'danger.l4' | 46 | 'danger.l3' | 47 | 'danger.l2' | 48 | 'danger.l1' | 49 | 'danger.primary' | 50 | 'danger.dark1' | 51 | 'danger.dark2' | 52 | 'warning.l6' | 53 | 'warning.l5' | 54 | 'warning.l4' | 55 | 'warning.l3' | 56 | 'warning.l2' | 57 | 'warning.l1' | 58 | 'warning.primary' | 59 | 'warning.dark1' | 60 | 'warning.dark2' | 61 | 'success.l6' | 62 | 'success.l5' | 63 | 'success.l4' | 64 | 'success.l3' | 65 | 'success.l2' | 66 | 'success.l1' | 67 | 'success.primary' | 68 | 'success.dark1' | 69 | 'success.dark2' | 70 | 'info.l6' | 71 | 'info.l5' | 72 | 'info.l4' | 73 | 'info.l3' | 74 | 'info.l2' | 75 | 'info.l1' | 76 | 'info.primary' | 77 | 'info.dark1' | 78 | 'info.dark2' | 79 | 'highlight.l6' | 80 | 'highlight.l5' | 81 | 'highlight.l4' | 82 | 'highlight.l3' | 83 | 'highlight.l2' | 84 | 'highlight.l1' | 85 | 'highlight.primary' | 86 | 'highlight.dark1' | 87 | 'highlight.dark2'; 88 | 89 | export interface ColorProps { 90 | color?: ResponsiveValue; 91 | textColor?: ResponsiveValue; 92 | backgroundColor?: ResponsiveValue>; 93 | bg?: ResponsiveValue>; 94 | } 95 | 96 | export interface StrokeProps { 97 | stroke?: ResponsiveValue; 98 | } 99 | 100 | export interface FillProps { 101 | fill?: ResponsiveValue; 102 | } -------------------------------------------------------------------------------- /src/types/postition.types.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveValue } from 'styled-system'; 2 | import CSS from 'csstype'; 3 | 4 | type OrderTypes = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'last' | 'none'; 5 | export interface OrderProps { 6 | order?: ResponsiveValue; 7 | } 8 | 9 | type IndexTypes = 0 | 1 | 2 | 3 | 4 | 5 | 'auto'; 10 | export interface ZIndexProps { 11 | index?: ResponsiveValue; 12 | } 13 | 14 | type FlexTypes = 1 | '1' | 'auto' | 'initial' | 'none'; 15 | export interface FlexProps { 16 | flex?: ResponsiveValue>; 17 | } 18 | 19 | type GrowTypes = '0' | 0 | 'default'; 20 | export interface GrowProps { 21 | flexGrow?: ResponsiveValue; 22 | } 23 | 24 | type ShrinkTypes = '0' | 0 | 'default'; 25 | export interface ShrinkProps { 26 | flexShrink?: ResponsiveValue; 27 | } 28 | 29 | type ObjectPositionTypes = 'bottom' | 'center' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top' | 'top'; 30 | export interface ObjectPositionProps { 31 | objectPosition?: ResponsiveValue>; 32 | } -------------------------------------------------------------------------------- /src/types/size.types.ts: -------------------------------------------------------------------------------- 1 | type SpacingTypes = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 'px'; 2 | 3 | type HeightTypes = 'full' | 'screen'; 4 | 5 | type MaxWidthTypes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | 'full'; 6 | 7 | type MinHeightTypes = '0' | 0 | 'full' | 'screen'; 8 | 9 | type MinWidthTypes = '0' | 0 | 'full'; 10 | 11 | type WidthTypes = 'auto' | '1/2' | '1/3' | '2/3' | '1/4' | '2/4' | '3/4' | '1/5' | '2/5' | '3/5' | '4/5' | '1/6' | '2/6' | '3/6' | '4/6' | '5/6' | '1/12' | '2/12' | '3/12' | '4/12' | '5/12' | '6/12' | '7/12' | '8/12' | '9/12' | '10/12' | '11/12' | 'full' | 'screen' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 'px'; 12 | 13 | type Height = 'auto' | 'full' | 'screen' | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 'px'; 14 | 15 | // TODO: margin 16 | // TODO: padding 17 | // TODO: add general types -------------------------------------------------------------------------------- /src/types/typography.types.ts: -------------------------------------------------------------------------------- 1 | import { ResponsiveValue } from 'styled-system'; 2 | import CSS from 'csstype'; 3 | 4 | type FontFamilyTypes = 'sans' | 'serif' | 'mono'; 5 | export interface FontFamilyProps { 6 | fontFamily?: ResponsiveValue; 7 | } 8 | 9 | type FontSizeTypes = 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl'; 10 | export interface FontSizeProps { 11 | fontSize?: ResponsiveValue>; 12 | } 13 | 14 | type FontWeightTypes = 'hairline' | 'thin' | 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold' | 'black'; 15 | export interface FontWeightProps { 16 | fontWeight?: ResponsiveValue>; 17 | } 18 | 19 | type LetterSpacingTypes = 'tighter' | 'tight' | 'normal' | 'wide' | 'wider' | 'widest'; 20 | export interface LetterSpacingProps { 21 | letterSpacing?: ResponsiveValue>; 22 | } 23 | 24 | type LineHeightTypes = 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'; 25 | export interface LineHeightProps { 26 | lineHeight?: ResponsiveValue>; 27 | } -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | /* Basic Options */ 4 | "target": "esnext", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ 5 | "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ 6 | // "lib": [], /* Specify library files to be included in the compilation. */ 7 | // "allowJs": true, /* Allow javascript files to be compiled. */ 8 | // "checkJs": true, /* Report errors in .js files. */ 9 | // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ 10 | "declaration": true, /* Generates corresponding '.d.ts' file. */ 11 | // "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */ 12 | // "sourceMap": true, /* Generates corresponding '.map' file. */ 13 | // "outFile": "./", /* Concatenate and emit output to single file. */ 14 | "outDir": "lib", /* Redirect output structure to the directory. */ 15 | // "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */ 16 | // "composite": true, /* Enable project compilation */ 17 | // "removeComments": true, /* Do not emit comments to output. */ 18 | // "noEmit": true, /* Do not emit outputs. */ 19 | // "importHelpers": true, /* Import emit helpers from 'tslib'. */ 20 | // "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */ 21 | // "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ 22 | 23 | /* Strict Type-Checking Options */ 24 | "strict": true, /* Enable all strict type-checking options. */ 25 | // "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ 26 | // "strictNullChecks": true, /* Enable strict null checks. */ 27 | // "strictFunctionTypes": true, /* Enable strict checking of function types. */ 28 | // "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */ 29 | // "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ 30 | // "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ 31 | 32 | /* Additional Checks */ 33 | // "noUnusedLocals": true, /* Report errors on unused locals. */ 34 | // "noUnusedParameters": true, /* Report errors on unused parameters. */ 35 | // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ 36 | // "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ 37 | 38 | /* Module Resolution Options */ 39 | // "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */ 40 | // "baseUrl": "./", /* Base directory to resolve non-absolute module names. */ 41 | // "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */ 42 | // "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */ 43 | // "typeRoots": [], /* List of folders to include type definitions from. */ 44 | // "types": [], /* Type declaration files to be included in compilation. */ 45 | "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */ 46 | "esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */ 47 | // "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */ 48 | 49 | /* Source Map Options */ 50 | // "sourceRoot": "./", /* Specify the location where debugger should locate TypeScript files instead of source locations. */ 51 | // "mapRoot": "./", /* Specify the location where debugger should locate map files instead of generated locations. */ 52 | // "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */ 53 | // "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */ 54 | 55 | /* Experimental Options */ 56 | // "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */ 57 | // "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */ 58 | 59 | /* Advanced Options */ 60 | // "declarationDir": "lib" /* Output directory for generated declaration files. */ 61 | }, 62 | "exclude": [ 63 | "node_modules", 64 | "**/*.spec.ts", 65 | "lib", 66 | "**/*.spec.tsx" 67 | ] 68 | } 69 | --------------------------------------------------------------------------------