├── .babelrc ├── .editorconfig ├── .eslintrc ├── .gitignore ├── .storybook ├── addons.js └── config.js ├── .stylelintrc ├── .travis.yml ├── README.md ├── package.json ├── src ├── GradientButton.js ├── __stories__ │ └── GradientButton.story.js ├── __tests__ │ ├── GrandientButton.spec.js │ ├── __snapshots__ │ │ └── GrandientButton.spec.js.snap │ └── index.spec.js ├── index.js └── utils │ ├── __tests__ │ ├── gradients.spec.js │ └── index.spec.js │ ├── gradients.js │ └── index.js └── yarn.lock /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["babel-plugin-styled-components"], 4 | "env": { 5 | "production": { 6 | "plugins": [ 7 | "@babel/plugin-transform-react-constant-elements", 8 | "@babel/plugin-transform-react-inline-elements" 9 | ] 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_style = space 5 | end_of_line = lf 6 | charset = utf-8 7 | trim_trailing_whitespace = true 8 | insert_final_newline = true 9 | indent_size = 2 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "extends": ["yoctol", "prettier"], 4 | "env": { 5 | "browser": true, 6 | "node": true, 7 | "jest": true 8 | }, 9 | "plugins": ["prettier"] 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | npm-debug.log 4 | yarn-error.log 5 | lib 6 | coverage 7 | -------------------------------------------------------------------------------- /.storybook/addons.js: -------------------------------------------------------------------------------- 1 | import '@storybook/addon-backgrounds/register'; 2 | import '@storybook/addon-knobs/register'; 3 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | import { injectGlobal } from 'styled-components'; 3 | import styledNormalize from 'styled-normalize'; 4 | 5 | injectGlobal` 6 | ${styledNormalize} 7 | 8 | * { 9 | font-family: 'Oswald', Arial, sans-serif; 10 | } 11 | 12 | button { 13 | padding: 0; 14 | } 15 | `; 16 | 17 | const req = require.context('../src', true, /.story.js$/); 18 | 19 | function loadStories() { 20 | req.keys().forEach(filename => req(filename)); 21 | } 22 | 23 | configure(loadStories, module); 24 | -------------------------------------------------------------------------------- /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "processors": ["stylelint-processor-styled-components"], 3 | "extends": [ 4 | "stylelint-config-yoctol", 5 | "stylelint-config-styled-components" 6 | ], 7 | "rules": { 8 | "comment-empty-line-before": null, 9 | "declaration-block-semicolon-newline-after": null, 10 | "declaration-colon-newline-after": null, 11 | "declaration-empty-line-before": null, 12 | "value-list-max-empty-lines": null, 13 | "rule-empty-line-before": null, 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | 3 | node_js: 4 | - "9" 5 | - "8" 6 | - "6" 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 |
3 | 4 |

react-linear-gradient-button

5 |

React linear gradient button component

6 |

7 |

8 | 9 | 10 | 11 | 12 | 13 | 14 | code style: prettier 15 | 16 |

17 | 18 | **[DEMO](https://xxhomey19.github.io/react-linear-gradient-button/)** 19 | 20 | ## Install 21 | 22 | ``` 23 | $ npm install react-linear-gradient-button 24 | ``` 25 | 26 | ## Usage 27 | 28 | ```js 29 | import React, { Component } from 'react'; 30 | import ReactDOM from 'react-dom'; 31 | import GradientButton from 'react-linear-gradient-button'; 32 | 33 | class Basic extends Component { 34 | render() { 35 | return BUTTON; 36 | } 37 | } 38 | 39 | ReactDOM.render(, document.getElementById('root')); 40 | ``` 41 | 42 | ## Features 43 | 44 | * No external CSS file. 45 | * Built with [**styled-components**](https://github.com/styled-components/styled-components) 💅 46 | 47 | ## Props 48 | 49 | | Props | Type | Default | Description | 50 | | :------------------------ | :----------------------------------------------------: | :-------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | 51 | | children | `String` \|\| `Node` | **Required** | Content of the button. | 52 | | theme | `String` | `"Vanusa"` | Gradient theme from [uigradients](https://uigradients.com/). | 53 | | disabled | `Bool` | `false` | Should render a disabled button. | 54 | | gradient | `[String]` | `null` | Array of colors (e.g., `['#f00b47', '#0f6bb6']`, `[rgba(255,0,0,0), rgba(255,0,0,1)]`).
**NOTE**: this props has higher level then `theme`. | 55 | | angle | `String` | `"right"` | The angle or direction of linear gradient (e.g., `"bottom"`, `"30deg"`).
Check **Using Angles** section on [w3schools/css3_gradients](https://www.w3schools.com/css/css3_gradients.asp) for more information. | 56 | | padding | `Number` \|\| `String` \|\| `[Number]` \|\| `[String]` | `10` | The CSS `padding` argument of the button. Could be an array of four sides, just like CSS.
Unit is **px**. | 57 | | borderRadius | `Number` | `20` | The CSS `border-radius` argument of the button.
Unit is **px**. | 58 | | borderWidth | `Number` | `2` | The CSS `border-width` argument of the button.
Unit is **px**. | 59 | | background | `String` | `"#fff"` | The CSS `background-color` argument of the button. | 60 | | color | `String` | `"#ae3560"` | The CSS `color` argument of the button. | 61 | | fontSize | `Number` | `16` | The CSS `font-size` argument of the button. | 62 | | transition | `Object` | See following | The CSS `transition` argument of the button. | 63 | | transition.property | `String` | `"all"` | The CSS `transition-property` argument of the button. | 64 | | transition.duration | `Number` | `0.2` | The CSS `transition-duration` argument of the button.
Unit is **second**. | 65 | | transition.timingFunction | `String` | `"ease-in-out"` | The CSS `transition-timing-function` argument of the button. | 66 | | transition.delay | `Number` | `0` | The CSS `transition-delay` argument of the button.
Unit is **second**. | 67 | 68 | ## License 69 | 70 | MIT © [xxhomey19](https://github.com/xxhomey19) 71 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-linear-gradient-button", 3 | "description": "React linear gradient button component.", 4 | "license": "MIT", 5 | "author": "xxhomey19", 6 | "homepage": 7 | "https://github.com/xxhomey19/react-linear-gradient-button#readme", 8 | "repository": { 9 | "type": "git", 10 | "url": "git+https://github.com/xxhomey19/react-linear-gradient-button.git" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/xxhomey19/react-linear-gradient-button/issues" 14 | }, 15 | "version": "1.1.1", 16 | "main": "lib/index.js", 17 | "files": ["lib"], 18 | "scripts": { 19 | "build": 20 | "npm run clean && cross-env NODE_ENV=production babel src -d lib --ignore **/__tests__,**/__stories__", 21 | "clean": "rimraf lib", 22 | "precommit": "lint-staged", 23 | "deploy:storybook": "storybook-to-ghpages", 24 | "lint": "eslint src", 25 | "lint:css": "stylelint './src/**/*.js'", 26 | "lint:fix": "npm run lint -- --fix", 27 | "lint:staged": "lint-staged", 28 | "prepublish": "npm run build", 29 | "storybook": "start-storybook -p 9001 -c .storybook", 30 | "test": "npm run lint:fix && npm run testonly", 31 | "testonly": "jest", 32 | "testonly:cov": "jest --coverage --runInBand --forceExit", 33 | "testonly:watch": "jest --watch", 34 | "preversion": "npm test" 35 | }, 36 | "dependencies": { 37 | "prop-types": "^15.6.1", 38 | "react": "^16.3.2", 39 | "react-dom": "^16.3.2", 40 | "styled-components": "^3.2.6", 41 | "styled-system": "^2.2.5", 42 | "styled-tools": "^0.5.0" 43 | }, 44 | "peerDependencies": { 45 | "react": "^16.3.2" 46 | }, 47 | "devDependencies": { 48 | "@babel/cli": "^7.0.0-beta.46", 49 | "@babel/core": "^7.0.0-beta.46", 50 | "@babel/plugin-transform-react-constant-elements": "^7.0.0-beta.46", 51 | "@babel/plugin-transform-react-inline-elements": "^7.0.0-beta.46", 52 | "@babel/preset-env": "^7.0.0-beta.46", 53 | "@babel/preset-react": "^7.0.0-beta.46", 54 | "@storybook/addon-backgrounds": "^3.4.3", 55 | "@storybook/addon-centered": "^3.4.3", 56 | "@storybook/addon-knobs": "^3.4.3", 57 | "@storybook/addons": "^3.4.3", 58 | "@storybook/react": "^3.4.3", 59 | "@storybook/storybook-deployer": "^2.3.0", 60 | "babel-core": "^7.0.0-0", 61 | "babel-eslint": "^8.2.3", 62 | "babel-jest": "^22.4.3", 63 | "babel-plugin-styled-components": "^1.5.1", 64 | "cross-env": "^5.1.5", 65 | "eslint": "^4.19.1", 66 | "eslint-config-prettier": "^2.9.0", 67 | "eslint-config-yoctol": "^0.16.1", 68 | "eslint-plugin-import": "^2.11.0", 69 | "eslint-plugin-jsx-a11y": "^6.0.3", 70 | "eslint-plugin-prettier": "^2.6.0", 71 | "eslint-plugin-react": "^7.7.0", 72 | "husky": "^0.14.3", 73 | "jest": "^22.4.3", 74 | "jest-styled-components": "^5.0.1", 75 | "lint-staged": "^7.1.0", 76 | "prettier": "^1.12.1", 77 | "prettier-package-json": "^1.6.0", 78 | "react-test-renderer": "^16.3.2", 79 | "rimraf": "^2.6.2", 80 | "styled-normalize": "^4.0.0", 81 | "stylelint": "9.1.3", 82 | "stylelint-config-styled-components": "^0.1.1", 83 | "stylelint-config-yoctol": "^0.8.0", 84 | "stylelint-processor-styled-components": "^1.3.1" 85 | }, 86 | "keywords": [ 87 | "button", 88 | "component", 89 | "gradient", 90 | "linear-gradient", 91 | "react", 92 | "react-component" 93 | ], 94 | "jest": { 95 | "collectCoverageFrom": ["src/**/*.js", "!src/**/__stories__/*"], 96 | "testPathIgnorePatterns": ["/node_modules/", "/lib"], 97 | "resetModules": true, 98 | "resetMocks": true 99 | }, 100 | "lint-staged": { 101 | "*.js$": ["eslint --fix", "npm run lint:css", "git add"], 102 | "*.{json,md}": ["prettier --write", "git add"], 103 | "package.json": [ 104 | "prettier-package-json --write", 105 | "prettier package.json --write", 106 | "git add" 107 | ], 108 | ".babelrc": ["prettier .babelrc --write", "git add"] 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /src/GradientButton.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import styled, { css } from 'styled-components'; 4 | import { color, fontSize, borderRadius } from 'styled-system'; 5 | import { prop, ifProp } from 'styled-tools'; 6 | 7 | import { getLinearGradient, getPadding } from './utils'; 8 | 9 | const GradientBackground = styled.button` 10 | position: relative; 11 | display: flex; 12 | box-sizing: border-box; 13 | padding: ${props => props.borderWidth}px; 14 | border: 0; 15 | outline: 0; 16 | background-image: linear-gradient( 17 | ${ifProp( 18 | ({ angle }) => angle.includes('deg'), 19 | prop('angle'), 20 | props => `to ${prop('angle')(props)}` 21 | )}, 22 | ${props => getLinearGradient(props.theme, props.gradient)} 23 | ); 24 | cursor: pointer; 25 | 26 | ${ifProp( 27 | 'disabled', 28 | css` 29 | cursor: not-allowed; 30 | opacity: 0.65; 31 | ` 32 | )}; 33 | 34 | ${borderRadius}; 35 | ${color}; 36 | ${fontSize}; 37 | 38 | text-decoration: none; 39 | `; 40 | 41 | GradientBackground.propTypes = { 42 | angle: PropTypes.string.isRequired, 43 | borderWidth: PropTypes.number.isRequired, 44 | gradient: PropTypes.arrayOf(PropTypes.string), 45 | theme: PropTypes.string.isRequired, 46 | ...borderRadius.propTypes, 47 | ...color.propTypes, 48 | ...fontSize.propTypes, 49 | }; 50 | 51 | GradientBackground.defaultProps = { 52 | color: '#ae3560', 53 | fontSize: 16, 54 | }; 55 | 56 | const Inner = styled.div` 57 | width: 100%; 58 | height: 100%; 59 | padding: ${props => getPadding(props.padding)}; 60 | outline: 0; 61 | 62 | ${ifProp( 63 | { disabled: false }, 64 | css` 65 | transition: ${prop('transition.property')} ${prop('transition.duration')}s 66 | ${prop('transition.timingFunction')} ${prop('transition.delay')}s; 67 | 68 | &:hover { 69 | background: transparent; 70 | color: #fff; 71 | } 72 | ` 73 | )}; 74 | 75 | ${borderRadius}; 76 | ${color}; 77 | `; 78 | 79 | Inner.propTypes = { 80 | padding: PropTypes.oneOfType([ 81 | PropTypes.number, 82 | PropTypes.string, 83 | PropTypes.array, 84 | ]).isRequired, 85 | transition: PropTypes.objectOf( 86 | PropTypes.oneOfType([PropTypes.number, PropTypes.string]) 87 | ).isRequired, 88 | ...borderRadius.propTypes, 89 | }; 90 | 91 | const GradientButton = ({ 92 | angle, 93 | background: _bg, 94 | borderRadius: _borderRadius, 95 | borderWidth, 96 | children, 97 | disabled, 98 | gradient, 99 | padding, 100 | theme, 101 | transition, 102 | ...props 103 | }) => ( 104 | 113 | 120 | {children} 121 | 122 | 123 | ); 124 | 125 | GradientButton.propTypes = { 126 | angle: PropTypes.string, 127 | background: PropTypes.string, 128 | borderRadius: PropTypes.number, 129 | borderWidth: PropTypes.number, 130 | children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired, 131 | disabled: PropTypes.bool, 132 | gradient: PropTypes.arrayOf(PropTypes.string), 133 | padding: PropTypes.oneOfType([ 134 | PropTypes.number, 135 | PropTypes.string, 136 | PropTypes.array, 137 | ]), 138 | theme: PropTypes.string, 139 | transition: PropTypes.objectOf( 140 | PropTypes.oneOfType([PropTypes.number, PropTypes.string]) 141 | ), 142 | ...color.propTypes, 143 | ...fontSize.propTypes, 144 | }; 145 | 146 | GradientButton.defaultProps = { 147 | angle: 'right', 148 | background: '#fff', 149 | borderRadius: 20, 150 | borderWidth: 2, 151 | disabled: false, 152 | gradient: null, 153 | padding: 10, 154 | theme: 'Vanusa', 155 | transition: { 156 | property: 'all', 157 | duration: 0.2, 158 | timingFunction: 'ease-in-out', 159 | delay: 0, 160 | }, 161 | }; 162 | 163 | export default GradientButton; 164 | -------------------------------------------------------------------------------- /src/__stories__/GradientButton.story.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { storiesOf } from '@storybook/react'; 3 | import centered from '@storybook/addon-centered'; 4 | import backgrounds from '@storybook/addon-backgrounds'; 5 | import { 6 | withKnobs, 7 | text, 8 | number, 9 | array, 10 | object, 11 | boolean, 12 | } from '@storybook/addon-knobs/react'; 13 | import styled from 'styled-components'; 14 | 15 | import GradientButton from '../'; 16 | 17 | const Container = styled.div` 18 | display: flex; 19 | justify-content: center; 20 | align-items: center; 21 | `; 22 | 23 | storiesOf('GradientButton', module) 24 | .addDecorator(withKnobs) 25 | .addDecorator(centered) 26 | .addDecorator( 27 | backgrounds([ 28 | { name: 'white', value: '#fff' }, 29 | { name: 'gray', value: '#e0e0e0', default: true }, 30 | ]) 31 | ) 32 | .add('Default', () => ) 33 | .add('Cutomized gradient', () => ( 34 | ARRAY', ['#f00b47', '#0f6bb6'])} 36 | content={text('content', 'BUTTON')} 37 | /> 38 | )) 39 | .add('Playground', () => ( 40 | 41 |

Update props in {`"KNOBS"`} section below

42 | STRING', 'BUTTON')} 44 | theme={text('theme => STRING', 'Vanusa')} 45 | angle={text('angle => STRING', 'right')} 46 | padding={array('padding => ARRAY', [15, 30])} 47 | borderRadius={number('borderRadius => NUMBER', 20)} 48 | borderWith={number('borderWith => NUMBER', 2)} 49 | background={text('background => STRING', '#fff')} 50 | color={text('color => STRING', '#ae3560')} 51 | fontSize={number('fontSize => NUMBER', 16)} 52 | transition={object('transition => OBJECT', { 53 | property: 'all', 54 | duration: 0.2, 55 | timingFunction: 'ease-in-out', 56 | delay: 0, 57 | })} 58 | disabled={boolean('disabled => BOOL', false)} 59 | /> 60 | 61 | )); 62 | -------------------------------------------------------------------------------- /src/__tests__/GrandientButton.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import TestRenderer from 'react-test-renderer'; 3 | import 'jest-styled-components'; 4 | 5 | import GradientButton from '../GradientButton'; 6 | 7 | describe('GradientButton', () => { 8 | it('should render correctly with default style', () => { 9 | const tree = TestRenderer.create( 10 | test button 11 | ).toJSON(); 12 | 13 | expect(tree).toMatchSnapshot(); 14 | expect(tree.type).toBe('button'); 15 | expect(tree).toHaveStyleRule('padding', '2px'); 16 | expect(tree).toHaveStyleRule('border-radius', '20px'); 17 | expect(tree).toHaveStyleRule('color', '#ae3560'); 18 | expect(tree).toHaveStyleRule('font-size', '16px'); 19 | expect(tree).toHaveStyleRule( 20 | 'background-image', 21 | 'linear-gradient( to right,#DA4453 0%,#89216B 100% )' 22 | ); 23 | }); 24 | 25 | it('should render correctly with disabled props', () => { 26 | const tree = TestRenderer.create( 27 | test button 28 | ).toJSON(); 29 | 30 | expect(tree).toHaveStyleRule('cursor', 'not-allowed'); 31 | expect(tree).toHaveStyleRule('opacity', '0.65'); 32 | }); 33 | 34 | it('should render correctly with fancy props', () => { 35 | const tree = TestRenderer.create( 36 | 45 | test button 46 | 47 | ).toJSON(); 48 | 49 | expect(tree).toMatchSnapshot(); 50 | expect(tree).toHaveStyleRule( 51 | 'background-image', 52 | 'linear-gradient( 30deg,#f00b47 0%,#0f6bb6 100% )' 53 | ); 54 | }); 55 | }); 56 | -------------------------------------------------------------------------------- /src/__tests__/__snapshots__/GrandientButton.spec.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`GradientButton should render correctly with default style 1`] = ` 4 | .c0 { 5 | position: relative; 6 | display: -webkit-box; 7 | display: -webkit-flex; 8 | display: -ms-flexbox; 9 | display: flex; 10 | box-sizing: border-box; 11 | padding: 2px; 12 | border: 0; 13 | outline: 0; 14 | background-image: linear-gradient( to right,#DA4453 0%,#89216B 100% ); 15 | cursor: pointer; 16 | border-radius: 20px; 17 | color: #ae3560; 18 | font-size: 16px; 19 | -webkit-text-decoration: none; 20 | text-decoration: none; 21 | } 22 | 23 | .c1 { 24 | width: 100%; 25 | height: 100%; 26 | padding: 10px; 27 | outline: 0; 28 | -webkit-transition: all 0.2s ease-in-out 0s; 29 | transition: all 0.2s ease-in-out 0s; 30 | border-radius: 17px; 31 | background-color: #fff; 32 | } 33 | 34 | .c1:hover { 35 | background: transparent; 36 | color: #fff; 37 | } 38 | 39 | 52 | `; 53 | 54 | exports[`GradientButton should render correctly with fancy props 1`] = ` 55 | .c0 { 56 | position: relative; 57 | display: -webkit-box; 58 | display: -webkit-flex; 59 | display: -ms-flexbox; 60 | display: flex; 61 | box-sizing: border-box; 62 | padding: 3px; 63 | border: 0; 64 | outline: 0; 65 | background-image: linear-gradient( 30deg,#f00b47 0%,#0f6bb6 100% ); 66 | cursor: pointer; 67 | border-radius: 10px; 68 | color: #123456; 69 | font-size: 12px; 70 | -webkit-text-decoration: none; 71 | text-decoration: none; 72 | } 73 | 74 | .c1 { 75 | width: 100%; 76 | height: 100%; 77 | padding: 10px 20px; 78 | outline: 0; 79 | -webkit-transition: all 0.2s ease-in-out 0s; 80 | transition: all 0.2s ease-in-out 0s; 81 | border-radius: 6px; 82 | background-color: #fff; 83 | } 84 | 85 | .c1:hover { 86 | background: transparent; 87 | color: #fff; 88 | } 89 | 90 | 103 | `; 104 | -------------------------------------------------------------------------------- /src/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { renderToString } from 'react-dom/server'; 4 | 5 | import GradientButton from '../'; 6 | 7 | describe('index', () => { 8 | it('should not break render', () => { 9 | const node = document.createElement('div'); 10 | 11 | expect(() => { 12 | render(client-rendering, node); 13 | }).not.toThrow(); 14 | }); 15 | 16 | it('should not break renderToString', () => { 17 | global.window = undefined; 18 | 19 | expect(() => 20 | renderToString(server-rendering) 21 | ).not.toThrow(); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import GradientButton from './GradientButton'; 2 | 3 | export default GradientButton; 4 | -------------------------------------------------------------------------------- /src/utils/__tests__/gradients.spec.js: -------------------------------------------------------------------------------- 1 | import { getGradientColors } from '../gradients'; 2 | 3 | describe('gradients', () => { 4 | it("getGradientColors should return default colors if theme isn't matched", () => { 5 | const theme = 'Avengers'; 6 | const colors = getGradientColors(theme); 7 | 8 | expect(colors).toEqual(['#fff', '#fff']); 9 | }); 10 | 11 | it('getGradientColors should return correct colors if theme is matched', () => { 12 | const theme = 'Vanusa'; 13 | const colors = getGradientColors(theme); 14 | 15 | expect(colors).toEqual(['#DA4453', '#89216B']); 16 | }); 17 | 18 | it("getGradientColors should ignore theme's uppercase/lowercase", () => { 19 | const theme = 'vAnUsA'; 20 | const colors = getGradientColors(theme); 21 | 22 | expect(colors).toEqual(['#DA4453', '#89216B']); 23 | }); 24 | }); 25 | -------------------------------------------------------------------------------- /src/utils/__tests__/index.spec.js: -------------------------------------------------------------------------------- 1 | import { getGradientColors } from '../gradients'; 2 | import { getLinearGradient, getPadding } from '../'; 3 | 4 | jest.mock('../gradients'); 5 | 6 | describe('utils', () => { 7 | describe('getLinearGradient', () => { 8 | beforeEach(() => { 9 | getGradientColors.mockReturnValue(['#DA4453', '#89216B']); 10 | }); 11 | 12 | it('should work with only theme', () => { 13 | expect(getLinearGradient('Vanusa')).toBe('#DA4453 0%, #89216B 100%'); 14 | }); 15 | 16 | it('should work with customized gradient', () => { 17 | expect(getLinearGradient('Vanusa', ['#111', '#222'])).toBe( 18 | '#111 0%, #222 100%' 19 | ); 20 | expect(getLinearGradient('Vanusa', ['#111', '#222', '#333'])).toBe( 21 | '#111 0%, #222 50%, #333 100%' 22 | ); 23 | }); 24 | }); 25 | 26 | describe('getPadding', () => { 27 | beforeEach(() => { 28 | console.warn = jest.fn(); 29 | console.error = jest.fn(); 30 | }); 31 | 32 | it('should work with string and number prop', () => { 33 | expect(getPadding(10)).toBe('10px'); 34 | expect(getPadding('10')).toBe('10px'); 35 | }); 36 | 37 | it('should work with array prop', () => { 38 | expect(getPadding([10, 20])).toBe('10px 20px'); 39 | expect(getPadding(['10', '20'])).toBe('10px 20px'); 40 | }); 41 | 42 | it('should call console.warn when passing an array prop over four values', () => { 43 | expect(getPadding([10, 20, 30, 40, 50])).toBe('10px 20px 30px 40px'); 44 | expect(console.warn).toBeCalledWith( 45 | 'Warning: padding property should have maximum four values.' 46 | ); 47 | }); 48 | 49 | it('should call console.error when passing an error type prop', () => { 50 | getPadding(jest.fn()); 51 | 52 | expect(console.error).toBeCalledWith( 53 | 'Warning: Type of padding property should be either "String", "Number" or "Array"' 54 | ); 55 | }); 56 | }); 57 | }); 58 | -------------------------------------------------------------------------------- /src/utils/gradients.js: -------------------------------------------------------------------------------- 1 | // copied from https://github.com/ghosh/uiGradients/blob/master/gradients.json 2 | 3 | const gradients = [ 4 | { 5 | name: 'Berimbolo', 6 | colors: ['#02111D', '#037BB5', '#02111D'], 7 | }, 8 | { 9 | name: 'Mango', 10 | colors: ['#ffe259', '#ffa751'], 11 | }, 12 | { 13 | name: 'Windy', 14 | colors: ['#acb6e5', '#86fde8'], 15 | }, 16 | { 17 | name: 'Royal Blue', 18 | colors: ['#536976', '#292E49'], 19 | }, 20 | { 21 | name: 'Royal Blue + Petrol', 22 | colors: ['#BBD2C5', '#536976', '#292E49'], 23 | }, 24 | { 25 | name: 'Copper', 26 | colors: ['#B79891', '#94716B'], 27 | }, 28 | { 29 | name: 'Petrol', 30 | colors: ['#BBD2C5', '#536976'], 31 | }, 32 | { 33 | name: 'Sky', 34 | colors: ['#076585', '#fff'], 35 | }, 36 | { 37 | name: 'Sel', 38 | colors: ['#00467F', '#A5CC82'], 39 | }, 40 | { 41 | name: 'Skyline', 42 | colors: ['#1488CC', '#2B32B2'], 43 | }, 44 | { 45 | name: 'DIMIGO', 46 | colors: ['#ec008c', '#fc6767'], 47 | }, 48 | { 49 | name: 'Purple Love', 50 | colors: ['#cc2b5e', '#753a88'], 51 | }, 52 | { 53 | name: 'Sexy Blue', 54 | colors: ['#2193b0', '#6dd5ed'], 55 | }, 56 | { 57 | name: 'Blooker20', 58 | colors: ['#e65c00', '#F9D423'], 59 | }, 60 | { 61 | name: 'Sea Blue', 62 | colors: ['#2b5876', '#4e4376'], 63 | }, 64 | { 65 | name: 'Nimvelo', 66 | colors: ['#314755', '#26a0da'], 67 | }, 68 | { 69 | name: 'Hazel', 70 | colors: ['#77A1D3', '#79CBCA', '#E684AE'], 71 | }, 72 | { 73 | name: 'Noon to Dusk', 74 | colors: ['#ff6e7f', '#bfe9ff'], 75 | }, 76 | { 77 | name: 'YouTube', 78 | colors: ['#e52d27', '#b31217'], 79 | }, 80 | { 81 | name: 'Cool Brown', 82 | colors: ['#603813', '#b29f94'], 83 | }, 84 | { 85 | name: 'Harmonic Energy', 86 | colors: ['#16A085', '#F4D03F'], 87 | }, 88 | { 89 | name: 'Playing with Reds', 90 | colors: ['#D31027', '#EA384D'], 91 | }, 92 | { 93 | name: 'Sunny Days', 94 | colors: ['#EDE574', '#E1F5C4'], 95 | }, 96 | { 97 | name: 'Green Beach', 98 | colors: ['#02AAB0', '#00CDAC'], 99 | }, 100 | { 101 | name: 'Intuitive Purple', 102 | colors: ['#DA22FF', '#9733EE'], 103 | }, 104 | { 105 | name: 'Emerald Water', 106 | colors: ['#348F50', '#56B4D3'], 107 | }, 108 | { 109 | name: 'Lemon Twist', 110 | colors: ['#3CA55C', '#B5AC49'], 111 | }, 112 | { 113 | name: 'Monte Carlo', 114 | colors: ['#CC95C0', '#DBD4B4', '#7AA1D2'], 115 | }, 116 | { 117 | name: 'Horizon', 118 | colors: ['#003973', '#E5E5BE'], 119 | }, 120 | { 121 | name: 'Rose Water', 122 | colors: ['#E55D87', '#5FC3E4'], 123 | }, 124 | { 125 | name: 'Frozen', 126 | colors: ['#403B4A', '#E7E9BB'], 127 | }, 128 | { 129 | name: 'Mango Pulp', 130 | colors: ['#F09819', '#EDDE5D'], 131 | }, 132 | { 133 | name: 'Bloody Mary', 134 | colors: ['#FF512F', '#DD2476'], 135 | }, 136 | { 137 | name: 'Aubergine', 138 | colors: ['#AA076B', '#61045F'], 139 | }, 140 | { 141 | name: 'Aqua Marine', 142 | colors: ['#1A2980', '#26D0CE'], 143 | }, 144 | { 145 | name: 'Sunrise', 146 | colors: ['#FF512F', '#F09819'], 147 | }, 148 | { 149 | name: 'Purple Paradise', 150 | colors: ['#1D2B64', '#F8CDDA'], 151 | }, 152 | { 153 | name: 'Stripe', 154 | colors: ['#1FA2FF', '#12D8FA', '#A6FFCB'], 155 | }, 156 | { 157 | name: 'Sea Weed', 158 | colors: ['#4CB8C4', '#3CD3AD'], 159 | }, 160 | { 161 | name: 'Pinky', 162 | colors: ['#DD5E89', '#F7BB97'], 163 | }, 164 | { 165 | name: 'Cherry', 166 | colors: ['#EB3349', '#F45C43'], 167 | }, 168 | { 169 | name: 'Mojito', 170 | colors: ['#1D976C', '#93F9B9'], 171 | }, 172 | { 173 | name: 'Juicy Orange', 174 | colors: ['#FF8008', '#FFC837'], 175 | }, 176 | { 177 | name: 'Mirage', 178 | colors: ['#16222A', '#3A6073'], 179 | }, 180 | { 181 | name: 'Steel Gray', 182 | colors: ['#1F1C2C', '#928DAB'], 183 | }, 184 | { 185 | name: 'Kashmir', 186 | colors: ['#614385', '#516395'], 187 | }, 188 | { 189 | name: 'Electric Violet', 190 | colors: ['#4776E6', '#8E54E9'], 191 | }, 192 | { 193 | name: 'Venice Blue', 194 | colors: ['#085078', '#85D8CE'], 195 | }, 196 | { 197 | name: 'Bora Bora', 198 | colors: ['#2BC0E4', '#EAECC6'], 199 | }, 200 | { 201 | name: 'Moss', 202 | colors: ['#134E5E', '#71B280'], 203 | }, 204 | { 205 | name: 'Shroom Haze', 206 | colors: ['#5C258D', '#4389A2'], 207 | }, 208 | { 209 | name: 'Mystic', 210 | colors: ['#757F9A', '#D7DDE8'], 211 | }, 212 | { 213 | name: 'Midnight City', 214 | colors: ['#232526', '#414345'], 215 | }, 216 | { 217 | name: 'Sea Blizz', 218 | colors: ['#1CD8D2', '#93EDC7'], 219 | }, 220 | { 221 | name: 'Opa', 222 | colors: ['#3D7EAA', '#FFE47A'], 223 | }, 224 | { 225 | name: 'Titanium', 226 | colors: ['#283048', '#859398'], 227 | }, 228 | { 229 | name: 'Mantle', 230 | colors: ['#24C6DC', '#514A9D'], 231 | }, 232 | { 233 | name: 'Dracula', 234 | colors: ['#DC2424', '#4A569D'], 235 | }, 236 | { 237 | name: 'Peach', 238 | colors: ['#ED4264', '#FFEDBC'], 239 | }, 240 | { 241 | name: 'Moonrise', 242 | colors: ['#DAE2F8', '#D6A4A4'], 243 | }, 244 | { 245 | name: 'Clouds', 246 | colors: ['#ECE9E6', '#FFFFFF'], 247 | }, 248 | { 249 | name: 'Stellar', 250 | colors: ['#7474BF', '#348AC7'], 251 | }, 252 | { 253 | name: 'Bourbon', 254 | colors: ['#EC6F66', '#F3A183'], 255 | }, 256 | { 257 | name: 'Calm Darya', 258 | colors: ['#5f2c82', '#49a09d'], 259 | }, 260 | { 261 | name: 'Influenza', 262 | colors: ['#C04848', '#480048'], 263 | }, 264 | { 265 | name: 'Shrimpy', 266 | colors: ['#e43a15', '#e65245'], 267 | }, 268 | { 269 | name: 'Army', 270 | colors: ['#414d0b', '#727a17'], 271 | }, 272 | { 273 | name: 'Miaka', 274 | colors: ['#FC354C', '#0ABFBC'], 275 | }, 276 | { 277 | name: 'Pinot Noir', 278 | colors: ['#4b6cb7', '#182848'], 279 | }, 280 | { 281 | name: 'Day Tripper', 282 | colors: ['#f857a6', '#ff5858'], 283 | }, 284 | { 285 | name: 'Namn', 286 | colors: ['#a73737', '#7a2828'], 287 | }, 288 | { 289 | name: 'Blurry Beach', 290 | colors: ['#d53369', '#cbad6d'], 291 | }, 292 | { 293 | name: 'Vasily', 294 | colors: ['#e9d362', '#333333'], 295 | }, 296 | { 297 | name: 'A Lost Memory', 298 | colors: ['#DE6262', '#FFB88C'], 299 | }, 300 | { 301 | name: 'Petrichor', 302 | colors: ['#666600', '#999966'], 303 | }, 304 | { 305 | name: 'Jonquil', 306 | colors: ['#FFEEEE', '#DDEFBB'], 307 | }, 308 | { 309 | name: 'Sirius Tamed', 310 | colors: ['#EFEFBB', '#D4D3DD'], 311 | }, 312 | { 313 | name: 'Kyoto', 314 | colors: ['#c21500', '#ffc500'], 315 | }, 316 | { 317 | name: 'Misty Meadow', 318 | colors: ['#215f00', '#e4e4d9'], 319 | }, 320 | { 321 | name: 'Aqualicious', 322 | colors: ['#50C9C3', '#96DEDA'], 323 | }, 324 | { 325 | name: 'Moor', 326 | colors: ['#616161', '#9bc5c3'], 327 | }, 328 | { 329 | name: 'Almost', 330 | colors: ['#ddd6f3', '#faaca8'], 331 | }, 332 | { 333 | name: 'Forever Lost', 334 | colors: ['#5D4157', '#A8CABA'], 335 | }, 336 | { 337 | name: 'Winter', 338 | colors: ['#E6DADA', '#274046'], 339 | }, 340 | { 341 | name: 'Autumn', 342 | colors: ['#DAD299', '#B0DAB9'], 343 | }, 344 | { 345 | name: 'Candy', 346 | colors: ['#D3959B', '#BFE6BA'], 347 | }, 348 | { 349 | name: 'Reef', 350 | colors: ['#00d2ff', '#3a7bd5'], 351 | }, 352 | { 353 | name: 'The Strain', 354 | colors: ['#870000', '#190A05'], 355 | }, 356 | { 357 | name: 'Dirty Fog', 358 | colors: ['#B993D6', '#8CA6DB'], 359 | }, 360 | { 361 | name: 'Earthly', 362 | colors: ['#649173', '#DBD5A4'], 363 | }, 364 | { 365 | name: 'Virgin', 366 | colors: ['#C9FFBF', '#FFAFBD'], 367 | }, 368 | { 369 | name: 'Ash', 370 | colors: ['#606c88', '#3f4c6b'], 371 | }, 372 | { 373 | name: 'Shadow Night', 374 | colors: ['#000000', '#53346D'], 375 | }, 376 | { 377 | name: 'Cherryblossoms', 378 | colors: ['#FBD3E9', '#BB377D'], 379 | }, 380 | { 381 | name: 'Parklife', 382 | colors: ['#ADD100', '#7B920A'], 383 | }, 384 | { 385 | name: 'Dance To Forget', 386 | colors: ['#FF4E50', '#F9D423'], 387 | }, 388 | { 389 | name: 'Starfall', 390 | colors: ['#F0C27B', '#4B1248'], 391 | }, 392 | { 393 | name: 'Red Mist', 394 | colors: ['#000000', '#e74c3c'], 395 | }, 396 | { 397 | name: 'Teal Love', 398 | colors: ['#AAFFA9', '#11FFBD'], 399 | }, 400 | { 401 | name: 'Neon Life', 402 | colors: ['#B3FFAB', '#12FFF7'], 403 | }, 404 | { 405 | name: 'Man of Steel', 406 | colors: ['#780206', '#061161'], 407 | }, 408 | { 409 | name: 'Amethyst', 410 | colors: ['#9D50BB', '#6E48AA'], 411 | }, 412 | { 413 | name: 'Cheer Up Emo Kid', 414 | colors: ['#556270', '#FF6B6B'], 415 | }, 416 | { 417 | name: 'Shore', 418 | colors: ['#70e1f5', '#ffd194'], 419 | }, 420 | { 421 | name: 'Facebook Messenger', 422 | colors: ['#00c6ff', '#0072ff'], 423 | }, 424 | { 425 | name: 'SoundCloud', 426 | colors: ['#fe8c00', '#f83600'], 427 | }, 428 | { 429 | name: 'Behongo', 430 | colors: ['#52c234', '#061700'], 431 | }, 432 | { 433 | name: 'ServQuick', 434 | colors: ['#485563', '#29323c'], 435 | }, 436 | { 437 | name: 'Friday', 438 | colors: ['#83a4d4', '#b6fbff'], 439 | }, 440 | { 441 | name: 'Martini', 442 | colors: ['#FDFC47', '#24FE41'], 443 | }, 444 | { 445 | name: 'Metallic Toad', 446 | colors: ['#abbaab', '#ffffff'], 447 | }, 448 | { 449 | name: 'Between The Clouds', 450 | colors: ['#73C8A9', '#373B44'], 451 | }, 452 | { 453 | name: 'Crazy Orange I', 454 | colors: ['#D38312', '#A83279'], 455 | }, 456 | { 457 | name: 'Hersheys', 458 | colors: ['#1e130c', '#9a8478'], 459 | }, 460 | { 461 | name: 'Talking To Mice Elf', 462 | colors: ['#948E99', '#2E1437'], 463 | }, 464 | { 465 | name: 'Purple Bliss', 466 | colors: ['#360033', '#0b8793'], 467 | }, 468 | { 469 | name: 'Predawn', 470 | colors: ['#FFA17F', '#00223E'], 471 | }, 472 | { 473 | name: 'Endless River', 474 | colors: ['#43cea2', '#185a9d'], 475 | }, 476 | { 477 | name: 'Pastel Orange at the Sun', 478 | colors: ['#ffb347', '#ffcc33'], 479 | }, 480 | { 481 | name: 'Twitch', 482 | colors: ['#6441A5', '#2a0845'], 483 | }, 484 | { 485 | name: 'Atlas', 486 | colors: ['#FEAC5E', '#C779D0', '#4BC0C8'], 487 | }, 488 | { 489 | name: 'Instagram', 490 | colors: ['#833ab4', '#fd1d1d', '#fcb045'], 491 | }, 492 | { 493 | name: 'Flickr', 494 | colors: ['#ff0084', '#33001b'], 495 | }, 496 | { 497 | name: 'Vine', 498 | colors: ['#00bf8f', '#001510'], 499 | }, 500 | { 501 | name: 'Turquoise flow', 502 | colors: ['#136a8a', '#267871'], 503 | }, 504 | { 505 | name: 'Portrait', 506 | colors: ['#8e9eab', '#eef2f3'], 507 | }, 508 | { 509 | name: 'Virgin America', 510 | colors: ['#7b4397', '#dc2430'], 511 | }, 512 | { 513 | name: 'Koko Caramel', 514 | colors: ['#D1913C', '#FFD194'], 515 | }, 516 | { 517 | name: 'Fresh Turboscent', 518 | colors: ['#F1F2B5', '#135058'], 519 | }, 520 | { 521 | name: 'Green to dark', 522 | colors: ['#6A9113', '#141517'], 523 | }, 524 | { 525 | name: 'Ukraine', 526 | colors: ['#004FF9', '#FFF94C'], 527 | }, 528 | { 529 | name: 'Curiosity blue', 530 | colors: ['#525252', '#3d72b4'], 531 | }, 532 | { 533 | name: 'Dark Knight', 534 | colors: ['#BA8B02', '#181818'], 535 | }, 536 | { 537 | name: 'Piglet', 538 | colors: ['#ee9ca7', '#ffdde1'], 539 | }, 540 | { 541 | name: 'Lizard', 542 | colors: ['#304352', '#d7d2cc'], 543 | }, 544 | { 545 | name: 'Sage Persuasion', 546 | colors: ['#CCCCB2', '#757519'], 547 | }, 548 | { 549 | name: 'Between Night and Day', 550 | colors: ['#2c3e50', '#3498db'], 551 | }, 552 | { 553 | name: 'Timber', 554 | colors: ['#fc00ff', '#00dbde'], 555 | }, 556 | { 557 | name: 'Passion', 558 | colors: ['#e53935', '#e35d5b'], 559 | }, 560 | { 561 | name: 'Clear Sky', 562 | colors: ['#005C97', '#363795'], 563 | }, 564 | { 565 | name: 'Master Card', 566 | colors: ['#f46b45', '#eea849'], 567 | }, 568 | { 569 | name: 'Back To Earth', 570 | colors: ['#00C9FF', '#92FE9D'], 571 | }, 572 | { 573 | name: 'Deep Purple', 574 | colors: ['#673AB7', '#512DA8'], 575 | }, 576 | { 577 | name: 'Little Leaf', 578 | colors: ['#76b852', '#8DC26F'], 579 | }, 580 | { 581 | name: 'Netflix', 582 | colors: ['#8E0E00', '#1F1C18'], 583 | }, 584 | { 585 | name: 'Light Orange', 586 | colors: ['#FFB75E', '#ED8F03'], 587 | }, 588 | { 589 | name: 'Green and Blue', 590 | colors: ['#c2e59c', '#64b3f4'], 591 | }, 592 | { 593 | name: 'Poncho', 594 | colors: ['#403A3E', '#BE5869'], 595 | }, 596 | { 597 | name: 'Back to the Future', 598 | colors: ['#C02425', '#F0CB35'], 599 | }, 600 | { 601 | name: 'Blush', 602 | colors: ['#B24592', '#F15F79'], 603 | }, 604 | { 605 | name: 'Inbox', 606 | colors: ['#457fca', '#5691c8'], 607 | }, 608 | { 609 | name: 'Purplin', 610 | colors: ['#6a3093', '#a044ff'], 611 | }, 612 | { 613 | name: 'Pale Wood', 614 | colors: ['#eacda3', '#d6ae7b'], 615 | }, 616 | { 617 | name: 'Haikus', 618 | colors: ['#fd746c', '#ff9068'], 619 | }, 620 | { 621 | name: 'Pizelex', 622 | colors: ['#114357', '#F29492'], 623 | }, 624 | { 625 | name: 'Joomla', 626 | colors: ['#1e3c72', '#2a5298'], 627 | }, 628 | { 629 | name: 'Christmas', 630 | colors: ['#2F7336', '#AA3A38'], 631 | }, 632 | { 633 | name: 'Minnesota Vikings', 634 | colors: ['#5614B0', '#DBD65C'], 635 | }, 636 | { 637 | name: 'Miami Dolphins', 638 | colors: ['#4DA0B0', '#D39D38'], 639 | }, 640 | { 641 | name: 'Forest', 642 | colors: ['#5A3F37', '#2C7744'], 643 | }, 644 | { 645 | name: 'Nighthawk', 646 | colors: ['#2980b9', '#2c3e50'], 647 | }, 648 | { 649 | name: 'Superman', 650 | colors: ['#0099F7', '#F11712'], 651 | }, 652 | { 653 | name: 'Suzy', 654 | colors: ['#834d9b', '#d04ed6'], 655 | }, 656 | { 657 | name: 'Dark Skies', 658 | colors: ['#4B79A1', '#283E51'], 659 | }, 660 | { 661 | name: 'Deep Space', 662 | colors: ['#000000', '#434343'], 663 | }, 664 | { 665 | name: 'Decent', 666 | colors: ['#4CA1AF', '#C4E0E5'], 667 | }, 668 | { 669 | name: 'Colors Of Sky', 670 | colors: ['#E0EAFC', '#CFDEF3'], 671 | }, 672 | { 673 | name: 'Purple White', 674 | colors: ['#BA5370', '#F4E2D8'], 675 | }, 676 | { 677 | name: 'Ali', 678 | colors: ['#ff4b1f', '#1fddff'], 679 | }, 680 | { 681 | name: 'Alihossein', 682 | colors: ['#f7ff00', '#db36a4'], 683 | }, 684 | { 685 | name: 'Shahabi', 686 | colors: ['#a80077', '#66ff00'], 687 | }, 688 | { 689 | name: 'Red Ocean', 690 | colors: ['#1D4350', '#A43931'], 691 | }, 692 | { 693 | name: 'Tranquil', 694 | colors: ['#EECDA3', '#EF629F'], 695 | }, 696 | { 697 | name: 'Transfile', 698 | colors: ['#16BFFD', '#CB3066'], 699 | }, 700 | 701 | { 702 | name: 'Sylvia', 703 | colors: ['#ff4b1f', '#ff9068'], 704 | }, 705 | { 706 | name: 'Sweet Morning', 707 | colors: ['#FF5F6D', '#FFC371'], 708 | }, 709 | { 710 | name: 'Politics', 711 | colors: ['#2196f3', '#f44336'], 712 | }, 713 | { 714 | name: 'Bright Vault', 715 | colors: ['#00d2ff', '#928DAB'], 716 | }, 717 | { 718 | name: 'Solid Vault', 719 | colors: ['#3a7bd5', '#3a6073'], 720 | }, 721 | { 722 | name: 'Sunset', 723 | colors: ['#0B486B', '#F56217'], 724 | }, 725 | { 726 | name: 'Grapefruit Sunset', 727 | colors: ['#e96443', '#904e95'], 728 | }, 729 | { 730 | name: 'Deep Sea Space', 731 | colors: ['#2C3E50', '#4CA1AF'], 732 | }, 733 | { 734 | name: 'Dusk', 735 | colors: ['#2C3E50', '#FD746C'], 736 | }, 737 | { 738 | name: 'Minimal Red', 739 | colors: ['#F00000', '#DC281E'], 740 | }, 741 | { 742 | name: 'Royal', 743 | colors: ['#141E30', '#243B55'], 744 | }, 745 | { 746 | name: 'Mauve', 747 | colors: ['#42275a', '#734b6d'], 748 | }, 749 | { 750 | name: 'Frost', 751 | colors: ['#000428', '#004e92'], 752 | }, 753 | { 754 | name: 'Lush', 755 | colors: ['#56ab2f', '#a8e063'], 756 | }, 757 | { 758 | name: 'Firewatch', 759 | colors: ['#cb2d3e', '#ef473a'], 760 | }, 761 | { 762 | name: 'Sherbert', 763 | colors: ['#f79d00', '#64f38c'], 764 | }, 765 | { 766 | name: 'Blood Red', 767 | colors: ['#f85032', '#e73827'], 768 | }, 769 | { 770 | name: 'Sun on the Horizon', 771 | colors: ['#fceabb', '#f8b500'], 772 | }, 773 | { 774 | name: 'IIIT Delhi', 775 | colors: ['#808080', '#3fada8'], 776 | }, 777 | { 778 | name: 'Dusk', 779 | colors: ['#ffd89b', '#19547b'], 780 | }, 781 | { 782 | name: '50 Shades of Grey', 783 | colors: ['#bdc3c7', '#2c3e50'], 784 | }, 785 | { 786 | name: 'Dania', 787 | colors: ['#BE93C5', '#7BC6CC'], 788 | }, 789 | { 790 | name: 'Limeade', 791 | colors: ['#A1FFCE', '#FAFFD1'], 792 | }, 793 | { 794 | name: 'Disco', 795 | colors: ['#4ECDC4', '#556270'], 796 | }, 797 | { 798 | name: 'Love Couple', 799 | colors: ['#3a6186', '#89253e'], 800 | }, 801 | { 802 | name: 'Azure Pop', 803 | colors: ['#ef32d9', '#89fffd'], 804 | }, 805 | { 806 | name: 'Nepal', 807 | colors: ['#de6161', '#2657eb'], 808 | }, 809 | { 810 | name: 'Cosmic Fusion', 811 | colors: ['#ff00cc', '#333399'], 812 | }, 813 | { 814 | name: 'Snapchat', 815 | colors: ['#fffc00', '#ffffff'], 816 | }, 817 | { 818 | name: "Ed's Sunset Gradient", 819 | colors: ['#ff7e5f', '#feb47b'], 820 | }, 821 | { 822 | name: 'Brady Brady Fun Fun', 823 | colors: ['#00c3ff', '#ffff1c'], 824 | }, 825 | { 826 | name: 'Black Rosé', 827 | colors: ['#f4c4f3', '#fc67fa'], 828 | }, 829 | { 830 | name: "80's Purple", 831 | colors: ['#41295a', '#2F0743'], 832 | }, 833 | { 834 | name: 'Radar', 835 | colors: ['#A770EF', '#CF8BF3', '#FDB99B'], 836 | }, 837 | { 838 | name: 'Ibiza Sunset', 839 | colors: ['#ee0979', '#ff6a00'], 840 | }, 841 | { 842 | name: 'Dawn', 843 | colors: ['#F3904F', '#3B4371'], 844 | }, 845 | { 846 | name: 'Mild', 847 | colors: ['#67B26F', '#4ca2cd'], 848 | }, 849 | { 850 | name: 'Vice City', 851 | colors: ['#3494E6', '#EC6EAD'], 852 | }, 853 | { 854 | name: 'Jaipur', 855 | colors: ['#DBE6F6', '#C5796D'], 856 | }, 857 | { 858 | name: 'Jodhpur', 859 | colors: ['#9CECFB', '#65C7F7', '#0052D4'], 860 | }, 861 | { 862 | name: 'Cocoaa Ice', 863 | colors: ['#c0c0aa', '#1cefff'], 864 | }, 865 | { 866 | name: 'EasyMed', 867 | colors: ['#DCE35B', '#45B649'], 868 | }, 869 | { 870 | name: 'Rose Colored Lenses', 871 | colors: ['#E8CBC0', '#636FA4'], 872 | }, 873 | { 874 | name: 'What lies Beyond', 875 | colors: ['#F0F2F0', '#000C40'], 876 | }, 877 | { 878 | name: 'Roseanna', 879 | colors: ['#FFAFBD', '#ffc3a0'], 880 | }, 881 | { 882 | name: 'Honey Dew', 883 | colors: ['#43C6AC', '#F8FFAE'], 884 | }, 885 | { 886 | name: 'Under the Lake', 887 | colors: ['#093028', '#237A57'], 888 | }, 889 | { 890 | name: 'The Blue Lagoon', 891 | colors: ['#43C6AC', '#191654'], 892 | }, 893 | { 894 | name: 'Can You Feel The Love Tonight', 895 | colors: ['#4568DC', '#B06AB3'], 896 | }, 897 | { 898 | name: 'Very Blue', 899 | colors: ['#0575E6', '#021B79'], 900 | }, 901 | { 902 | name: 'Love and Liberty', 903 | colors: ['#200122', '#6f0000'], 904 | }, 905 | { 906 | name: 'Orca', 907 | colors: ['#44A08D', '#093637'], 908 | }, 909 | { 910 | name: 'Venice', 911 | colors: ['#6190E8', '#A7BFE8'], 912 | }, 913 | { 914 | name: 'Pacific Dream', 915 | colors: ['#34e89e', '#0f3443'], 916 | }, 917 | { 918 | name: 'Learning and Leading', 919 | colors: ['#F7971E', '#FFD200'], 920 | }, 921 | { 922 | name: 'Celestial', 923 | colors: ['#C33764', '#1D2671'], 924 | }, 925 | { 926 | name: 'Purplepine', 927 | colors: ['#20002c', '#cbb4d4'], 928 | }, 929 | { 930 | name: 'Sha la la', 931 | colors: ['#D66D75', '#E29587'], 932 | }, 933 | { 934 | name: 'Mini', 935 | colors: ['#30E8BF', '#FF8235'], 936 | }, 937 | { 938 | name: 'Maldives', 939 | colors: ['#B2FEFA', '#0ED2F7'], 940 | }, 941 | { 942 | name: 'Cinnamint', 943 | colors: ['#4AC29A', '#BDFFF3'], 944 | }, 945 | { 946 | name: 'Html', 947 | colors: ['#E44D26', '#F16529'], 948 | }, 949 | { 950 | name: 'Coal', 951 | colors: ['#EB5757', '#000000'], 952 | }, 953 | { 954 | name: 'Sunkist', 955 | colors: ['#F2994A', '#F2C94C'], 956 | }, 957 | { 958 | name: 'Blue Skies', 959 | colors: ['#56CCF2', '#2F80ED'], 960 | }, 961 | { 962 | name: 'Chitty Chitty Bang Bang', 963 | colors: ['#007991', '#78ffd6'], 964 | }, 965 | { 966 | name: 'Visions of Grandeur', 967 | colors: ['#000046', '#1CB5E0'], 968 | }, 969 | { 970 | name: 'Crystal Clear', 971 | colors: ['#159957', '#155799'], 972 | }, 973 | { 974 | name: 'Mello', 975 | colors: ['#c0392b', '#8e44ad'], 976 | }, 977 | { 978 | name: 'Compare Now', 979 | colors: ['#EF3B36', '#FFFFFF'], 980 | }, 981 | { 982 | name: 'Meridian', 983 | colors: ['#283c86', '#45a247'], 984 | }, 985 | { 986 | name: 'Relay', 987 | colors: ['#3A1C71', '#D76D77', '#FFAF7B'], 988 | }, 989 | { 990 | name: 'Alive', 991 | colors: ['#CB356B', '#BD3F32'], 992 | }, 993 | { 994 | name: 'Scooter', 995 | colors: ['#36D1DC', '#5B86E5'], 996 | }, 997 | { 998 | name: 'Terminal', 999 | colors: ['#000000', '#0f9b0f'], 1000 | }, 1001 | { 1002 | name: 'Telegram', 1003 | colors: ['#1c92d2', '#f2fcfe'], 1004 | }, 1005 | { 1006 | name: 'Crimson Tide', 1007 | colors: ['#642B73', '#C6426E'], 1008 | }, 1009 | { 1010 | name: 'Socialive', 1011 | colors: ['#06beb6', '#48b1bf'], 1012 | }, 1013 | { 1014 | name: 'Subu', 1015 | colors: ['#0cebeb', '#20e3b2', '#29ffc6'], 1016 | }, 1017 | { 1018 | name: 'Shift', 1019 | colors: ['#000000', '#E5008D', '#FF070B'], 1020 | }, 1021 | { 1022 | name: 'Clot', 1023 | colors: ['#070000', '#4C0001', '#070000'], 1024 | }, 1025 | { 1026 | name: 'Broken Hearts', 1027 | colors: ['#d9a7c7', '#fffcdc'], 1028 | }, 1029 | { 1030 | name: 'Kimoby Is The New Blue', 1031 | colors: ['#396afc', '#2948ff'], 1032 | }, 1033 | { 1034 | name: 'Dull', 1035 | colors: ['#C9D6FF', '#E2E2E2'], 1036 | }, 1037 | { 1038 | name: 'Purpink', 1039 | colors: ['#7F00FF', '#E100FF'], 1040 | }, 1041 | { 1042 | name: 'Orange Coral', 1043 | colors: ['#ff9966', '#ff5e62'], 1044 | }, 1045 | { 1046 | name: 'Summer', 1047 | colors: ['#22c1c3', '#fdbb2d'], 1048 | }, 1049 | { 1050 | name: 'King Yna', 1051 | colors: ['#1a2a6c', '#b21f1f', '#fdbb2d'], 1052 | }, 1053 | { 1054 | name: 'Velvet Sun', 1055 | colors: ['#e1eec3', '#f05053'], 1056 | }, 1057 | { 1058 | name: 'Zinc', 1059 | colors: ['#ADA996', '#F2F2F2', '#DBDBDB', '#EAEAEA'], 1060 | }, 1061 | { 1062 | name: 'Hydrogen', 1063 | colors: ['#667db6', '#0082c8', '#0082c8', '#667db6'], 1064 | }, 1065 | { 1066 | name: 'Argon', 1067 | colors: ['#03001e', '#7303c0', '#ec38bc', '#fdeff9'], 1068 | }, 1069 | { 1070 | name: 'Lithium', 1071 | colors: ['#6D6027', '#D3CBB8'], 1072 | }, 1073 | { 1074 | name: 'Digital Water', 1075 | colors: ['#74ebd5', '#ACB6E5'], 1076 | }, 1077 | { 1078 | name: 'Velvet Sun', 1079 | colors: ['#e1eec3', '#f05053'], 1080 | }, 1081 | { 1082 | name: 'Orange Fun', 1083 | colors: ['#fc4a1a', '#f7b733'], 1084 | }, 1085 | { 1086 | name: 'Rainbow Blue', 1087 | colors: ['#00F260', '#0575E6'], 1088 | }, 1089 | { 1090 | name: 'Pink Flavour', 1091 | colors: ['#800080', '#ffc0cb'], 1092 | }, 1093 | { 1094 | name: 'Sulphur', 1095 | colors: ['#CAC531', '#F3F9A7'], 1096 | }, 1097 | { 1098 | name: 'Selenium', 1099 | colors: ['#3C3B3F', '#605C3C'], 1100 | }, 1101 | { 1102 | name: 'Delicate', 1103 | colors: ['#D3CCE3', '#E9E4F0'], 1104 | }, 1105 | { 1106 | name: 'Ohhappiness', 1107 | colors: ['#00b09b', '#96c93d'], 1108 | }, 1109 | { 1110 | name: 'Lawrencium', 1111 | colors: ['#0f0c29', '#302b63', '#24243e'], 1112 | }, 1113 | { 1114 | name: 'Relaxing red', 1115 | colors: ['#fffbd5', '#b20a2c'], 1116 | }, 1117 | { 1118 | name: 'Taran Tado', 1119 | colors: ['#23074d', '#cc5333'], 1120 | }, 1121 | { 1122 | name: 'Bighead', 1123 | colors: ['#c94b4b', '#4b134f'], 1124 | }, 1125 | { 1126 | name: 'Sublime Vivid', 1127 | colors: ['#FC466B', '#3F5EFB'], 1128 | }, 1129 | { 1130 | name: 'Sublime Light', 1131 | colors: ['#FC5C7D', '#6A82FB'], 1132 | }, 1133 | { 1134 | name: 'Pun Yeta', 1135 | colors: ['#108dc7', '#ef8e38'], 1136 | }, 1137 | { 1138 | name: 'Quepal', 1139 | colors: ['#11998e', '#38ef7d'], 1140 | }, 1141 | { 1142 | name: 'Sand to Blue', 1143 | colors: ['#3E5151', '#DECBA4'], 1144 | }, 1145 | { 1146 | name: 'Wedding Day Blues', 1147 | colors: ['#40E0D0', '#FF8C00', '#FF0080'], 1148 | }, 1149 | { 1150 | name: 'Shifter', 1151 | colors: ['#bc4e9c', '#f80759'], 1152 | }, 1153 | { 1154 | name: 'Red Sunset', 1155 | colors: ['#355C7D', '#6C5B7B', '#C06C84'], 1156 | }, 1157 | { 1158 | name: 'Moon Purple', 1159 | colors: ['#4e54c8', '#8f94fb'], 1160 | }, 1161 | { 1162 | name: 'Pure Lust', 1163 | colors: ['#333333', '#dd1818'], 1164 | }, 1165 | { 1166 | name: 'Slight Ocean View', 1167 | colors: ['#a8c0ff', '#3f2b96'], 1168 | }, 1169 | { 1170 | name: 'eXpresso', 1171 | colors: ['#ad5389', '#3c1053'], 1172 | }, 1173 | { 1174 | name: 'Shifty', 1175 | colors: ['#636363', '#a2ab58'], 1176 | }, 1177 | { 1178 | name: 'Vanusa', 1179 | colors: ['#DA4453', '#89216B'], 1180 | }, 1181 | { 1182 | name: 'Evening Night', 1183 | colors: ['#005AA7', '#FFFDE4'], 1184 | }, 1185 | ]; 1186 | 1187 | const getGradientColors = theme => { 1188 | let _gradient = gradients.find( 1189 | gradient => gradient.name.toLowerCase() === theme.toLowerCase() 1190 | ); 1191 | 1192 | if (!_gradient) { 1193 | _gradient = { 1194 | colors: ['#fff', '#fff'], 1195 | }; 1196 | } 1197 | 1198 | return _gradient.colors; 1199 | }; 1200 | 1201 | export { getGradientColors }; 1202 | -------------------------------------------------------------------------------- /src/utils/index.js: -------------------------------------------------------------------------------- 1 | import { getGradientColors } from './gradients'; 2 | 3 | const getLinearGradient = (theme, cutomizedGradient) => { 4 | const [firstColor, ...elseColors] = 5 | cutomizedGradient || getGradientColors(theme); 6 | 7 | const str = elseColors 8 | .map((color, index) => `${color} ${100 / elseColors.length * (index + 1)}%`) 9 | .join(', '); 10 | 11 | return `${firstColor} 0%, ${str}`; 12 | }; 13 | 14 | const getPadding = prop => { 15 | if (typeof prop === 'string' || typeof prop === 'number') { 16 | return `${prop}px`; 17 | } else if (Array.isArray(prop)) { 18 | if (prop.length > 4) { 19 | console.warn( 20 | 'Warning: padding property should have maximum four values.' 21 | ); 22 | } 23 | 24 | return prop 25 | .slice(0, 4) 26 | .map(p => `${p}px`) 27 | .join(' '); 28 | } 29 | 30 | console.error( 31 | 'Warning: Type of padding property should be either "String", "Number" or "Array"' 32 | ); 33 | }; 34 | 35 | export { getLinearGradient, getPadding }; 36 | --------------------------------------------------------------------------------