@hero-design/colors 0.0.1-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/.eslintrc +16 -0
  2. package/.prettierrc +7 -0
  3. package/es/index.js +113 -0
  4. package/lib/index.js +118 -0
  5. package/package.json +33 -0
  6. package/rollup.config.js +26 -0
  7. package/src/index.ts +115 -0
  8. package/tsconfig.json +17 -0
  9. package/types/index.d.ts +112 -0
package/.eslintrc ADDED
@@ -0,0 +1,16 @@
1
+ {
2
+ "env": {
3
+ "browser": true,
4
+ "es2021": true
5
+ },
6
+ "extends": ["plugin:react/recommended", "airbnb", "prettier"],
7
+ "parser": "@typescript-eslint/parser",
8
+ "parserOptions": {
9
+ "ecmaFeatures": {
10
+ "jsx": true
11
+ },
12
+ "ecmaVersion": "latest",
13
+ "sourceType": "module"
14
+ },
15
+ "plugins": ["react", "@typescript-eslint"],
16
+ }
package/.prettierrc ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "printWidth": 80,
3
+ "semi": true,
4
+ "singleQuote": true,
5
+ "trailingComma": "es5",
6
+ "arrowParens": "avoid"
7
+ }
package/es/index.js ADDED
@@ -0,0 +1,113 @@
1
+ const palette = {
2
+ black: '#000000',
3
+ blue: '#1dbeee',
4
+ blueDark30: '#1485a7',
5
+ blueDark75: '#07303c',
6
+ blueLight30: '#61d2f3',
7
+ blueLight75: '#c7effb',
8
+ blueLight90: '#e8f9fd',
9
+ dodgerBlue: '#4568fb',
10
+ dodgerBlueDark30: '#3049b0',
11
+ dodgerBlueLight30: '#7d95fc',
12
+ dodgerBlueLight90: '#ecf0ff',
13
+ green: '#01b39c',
14
+ greenDark15: '#019885',
15
+ greenDark30: '#017d6d',
16
+ greenDark75: '#002d27',
17
+ greenLight30: '#4dcaba',
18
+ greenLight90: '#e6f7f5',
19
+ grey: '#a3a6ac',
20
+ greyDark30: '#727478',
21
+ greyDark45: '#5a5b5f',
22
+ greyDark60: '#414245',
23
+ greyDark75: '#292a2b',
24
+ greyLight45: '#ccced1',
25
+ greyLight60: '#dadbde',
26
+ greyLight75: '#e8e9ea',
27
+ greyLight85: '#f1f2f3',
28
+ greyLight90: '#f6f6f7',
29
+ grotesqueGreen: '#6af293',
30
+ grotesqueGreenDark45: '#3a8551',
31
+ grotesqueGreenLight60: '#c3fad4',
32
+ grotesqueGreenLight75: '#dafce4',
33
+ grotesqueGreenLight90: '#f0fef4',
34
+ orange: '#ffa234',
35
+ orangeDark15: '#d98a2c',
36
+ orangeDark30: '#b37124',
37
+ orangeDark75: '#40290d',
38
+ orangeLight30: '#ffbe71',
39
+ orangeLight75: '#ffe8cc',
40
+ orangeLight90: '#fff6eb',
41
+ pink: '#fe56aa',
42
+ pinkDark15: '#cf4991',
43
+ pinkDark30: '#b23c77',
44
+ pinkDark45: '#8c2f5e',
45
+ pinkDark75: '#40162b',
46
+ pinkLight30: '#fe89c4',
47
+ pinkLight45: '#fea2d0',
48
+ pinkLight75: '#fcd5ea',
49
+ pinkLight90: '#ffeef7',
50
+ purple: '#be83cf',
51
+ red: '#de350b',
52
+ redDark15: '#bd2d09',
53
+ redDark30: '#9b2508',
54
+ redDark75: '#380d03',
55
+ redLight30: '#e87254',
56
+ redLight75: '#f7cdc2',
57
+ redLight90: '#fcebe7',
58
+ smalt: '#003580',
59
+ smaltDark75: '#000d20',
60
+ smaltLight30: '#4d72a6',
61
+ smaltLight45: '#7390b9',
62
+ smaltLight90: '#e6ebf2',
63
+ violet: '#7622d7',
64
+ violetDark30: '#531897',
65
+ violetDark45: '#411376',
66
+ violetDark75: '#1e0936',
67
+ violetLight30: '#9f64e3',
68
+ violetLight60: '#c8a7ef',
69
+ violetLight75: '#ddc8f5',
70
+ violetLight90: '#f1e9fb',
71
+ white: '#ffffff',
72
+ yellow: '#fadb14',
73
+ yellowDark75: '#3f3705',
74
+ yellowLight60: '#fdf1a1',
75
+ yellowLight90: '#fffbe8'
76
+ };
77
+ const systemPalette = {
78
+ primary: palette.violet,
79
+ primaryDark: palette.violetDark30,
80
+ primaryLight: palette.violetLight30,
81
+ primaryBackground: palette.violetLight90,
82
+ platformBackground: palette.greyLight85,
83
+ backgroundDark: palette.black,
84
+ backgroundLight: palette.white,
85
+ info: palette.dodgerBlue,
86
+ infoDark: palette.dodgerBlueDark30,
87
+ infoLight: palette.dodgerBlueLight30,
88
+ infoBackground: palette.dodgerBlueLight90,
89
+ success: palette.green,
90
+ successDark: palette.greenDark30,
91
+ successLight: palette.greenLight30,
92
+ successBackground: palette.greenLight90,
93
+ danger: palette.red,
94
+ dangerDark: palette.redDark30,
95
+ dangerLight: palette.redLight30,
96
+ dangerBackground: palette.redLight90,
97
+ warning: palette.orange,
98
+ warningDark: palette.orangeDark30,
99
+ warningLight: palette.orangeLight30,
100
+ warningBackground: palette.orangeLight90,
101
+ error: palette.pink,
102
+ errorDark: palette.pinkDark30,
103
+ errorLight: palette.pinkLight30,
104
+ errorBackground: palette.pinkLight90,
105
+ headingText: palette.black,
106
+ text: palette.greyDark45,
107
+ subduedText: palette.greyDark30,
108
+ disabledText: palette.grey,
109
+ outline: palette.greyLight60,
110
+ disabledBackground: palette.greyLight90
111
+ };
112
+
113
+ export { palette, systemPalette };
package/lib/index.js ADDED
@@ -0,0 +1,118 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ const palette = {
6
+ black: '#000000',
7
+ blue: '#1dbeee',
8
+ blueDark30: '#1485a7',
9
+ blueDark75: '#07303c',
10
+ blueLight30: '#61d2f3',
11
+ blueLight75: '#c7effb',
12
+ blueLight90: '#e8f9fd',
13
+ dodgerBlue: '#4568fb',
14
+ dodgerBlueDark30: '#3049b0',
15
+ dodgerBlueLight30: '#7d95fc',
16
+ dodgerBlueLight90: '#ecf0ff',
17
+ green: '#01b39c',
18
+ greenDark15: '#019885',
19
+ greenDark30: '#017d6d',
20
+ greenDark75: '#002d27',
21
+ greenLight30: '#4dcaba',
22
+ greenLight90: '#e6f7f5',
23
+ grey: '#a3a6ac',
24
+ greyDark30: '#727478',
25
+ greyDark45: '#5a5b5f',
26
+ greyDark60: '#414245',
27
+ greyDark75: '#292a2b',
28
+ greyLight45: '#ccced1',
29
+ greyLight60: '#dadbde',
30
+ greyLight75: '#e8e9ea',
31
+ greyLight85: '#f1f2f3',
32
+ greyLight90: '#f6f6f7',
33
+ grotesqueGreen: '#6af293',
34
+ grotesqueGreenDark45: '#3a8551',
35
+ grotesqueGreenLight60: '#c3fad4',
36
+ grotesqueGreenLight75: '#dafce4',
37
+ grotesqueGreenLight90: '#f0fef4',
38
+ orange: '#ffa234',
39
+ orangeDark15: '#d98a2c',
40
+ orangeDark30: '#b37124',
41
+ orangeDark75: '#40290d',
42
+ orangeLight30: '#ffbe71',
43
+ orangeLight75: '#ffe8cc',
44
+ orangeLight90: '#fff6eb',
45
+ pink: '#fe56aa',
46
+ pinkDark15: '#cf4991',
47
+ pinkDark30: '#b23c77',
48
+ pinkDark45: '#8c2f5e',
49
+ pinkDark75: '#40162b',
50
+ pinkLight30: '#fe89c4',
51
+ pinkLight45: '#fea2d0',
52
+ pinkLight75: '#fcd5ea',
53
+ pinkLight90: '#ffeef7',
54
+ purple: '#be83cf',
55
+ red: '#de350b',
56
+ redDark15: '#bd2d09',
57
+ redDark30: '#9b2508',
58
+ redDark75: '#380d03',
59
+ redLight30: '#e87254',
60
+ redLight75: '#f7cdc2',
61
+ redLight90: '#fcebe7',
62
+ smalt: '#003580',
63
+ smaltDark75: '#000d20',
64
+ smaltLight30: '#4d72a6',
65
+ smaltLight45: '#7390b9',
66
+ smaltLight90: '#e6ebf2',
67
+ violet: '#7622d7',
68
+ violetDark30: '#531897',
69
+ violetDark45: '#411376',
70
+ violetDark75: '#1e0936',
71
+ violetLight30: '#9f64e3',
72
+ violetLight60: '#c8a7ef',
73
+ violetLight75: '#ddc8f5',
74
+ violetLight90: '#f1e9fb',
75
+ white: '#ffffff',
76
+ yellow: '#fadb14',
77
+ yellowDark75: '#3f3705',
78
+ yellowLight60: '#fdf1a1',
79
+ yellowLight90: '#fffbe8'
80
+ };
81
+ const systemPalette = {
82
+ primary: palette.violet,
83
+ primaryDark: palette.violetDark30,
84
+ primaryLight: palette.violetLight30,
85
+ primaryBackground: palette.violetLight90,
86
+ platformBackground: palette.greyLight85,
87
+ backgroundDark: palette.black,
88
+ backgroundLight: palette.white,
89
+ info: palette.dodgerBlue,
90
+ infoDark: palette.dodgerBlueDark30,
91
+ infoLight: palette.dodgerBlueLight30,
92
+ infoBackground: palette.dodgerBlueLight90,
93
+ success: palette.green,
94
+ successDark: palette.greenDark30,
95
+ successLight: palette.greenLight30,
96
+ successBackground: palette.greenLight90,
97
+ danger: palette.red,
98
+ dangerDark: palette.redDark30,
99
+ dangerLight: palette.redLight30,
100
+ dangerBackground: palette.redLight90,
101
+ warning: palette.orange,
102
+ warningDark: palette.orangeDark30,
103
+ warningLight: palette.orangeLight30,
104
+ warningBackground: palette.orangeLight90,
105
+ error: palette.pink,
106
+ errorDark: palette.pinkDark30,
107
+ errorLight: palette.pinkLight30,
108
+ errorBackground: palette.pinkLight90,
109
+ headingText: palette.black,
110
+ text: palette.greyDark45,
111
+ subduedText: palette.greyDark30,
112
+ disabledText: palette.grey,
113
+ outline: palette.greyLight60,
114
+ disabledBackground: palette.greyLight90
115
+ };
116
+
117
+ exports.palette = palette;
118
+ exports.systemPalette = systemPalette;
package/package.json ADDED
@@ -0,0 +1,33 @@
1
+ {
2
+ "name": "@hero-design/colors",
3
+ "version": "0.0.1-1",
4
+ "license": "MIT",
5
+ "main": "lib/index.js",
6
+ "module": "es/index.js",
7
+ "types": "types/index.d.ts",
8
+ "scripts": {
9
+ "lint": "eslint src --ext .js,.jsx,.ts,.tsx --ignore-path ../../.gitignore",
10
+ "type-check": "tsc --noEmit",
11
+ "dev": "rollup -c -w",
12
+ "build:js": "rollup -c",
13
+ "build:types": "tsc --emitDeclarationOnly",
14
+ "build": "yarn build:js && yarn build:types"
15
+ },
16
+ "devDependencies": {
17
+ "@rollup/plugin-babel": "^5.3.1",
18
+ "@rollup/plugin-node-resolve": "^13.1.3",
19
+ "@typescript-eslint/eslint-plugin": "^5.14.0",
20
+ "@typescript-eslint/parser": "^5.14.0",
21
+ "eslint": "^8.10.0",
22
+ "eslint-config-airbnb": "^19.0.4",
23
+ "eslint-config-prettier": "^8.5.0",
24
+ "eslint-plugin-import": "^2.25.4",
25
+ "eslint-plugin-jsx-a11y": "^6.5.1",
26
+ "eslint-plugin-prettier": "^4.0.0",
27
+ "eslint-plugin-react": "^7.29.4",
28
+ "eslint-plugin-react-hooks": "^4.3.0",
29
+ "prettier": "^2.5.1",
30
+ "rollup": "^2.70.1",
31
+ "typescript": "^4.6.2"
32
+ }
33
+ }
package/rollup.config.js ADDED
@@ -0,0 +1,26 @@
1
+ import { nodeResolve } from '@rollup/plugin-node-resolve';
2
+ import { babel } from '@rollup/plugin-babel';
3
+ import typescript from '@rollup/plugin-typescript';
4
+
5
+ import pkg from './package.json';
6
+
7
+ const extensions = ['.js', '.jsx', '.ts', '.tsx'];
8
+
9
+ export default {
10
+ input: 'src/index.ts',
11
+ output: [
12
+ {
13
+ file: pkg.main,
14
+ format: 'cjs',
15
+ },
16
+ {
17
+ file: pkg.module,
18
+ format: 'esm',
19
+ },
20
+ ],
21
+ plugins: [
22
+ nodeResolve({ extensions }),
23
+ typescript(),
24
+ babel({ extensions, babelHelpers: 'bundled' }),
25
+ ],
26
+ };
package/src/index.ts ADDED
@@ -0,0 +1,115 @@
1
+ const palette = {
2
+ black: '#000000',
3
+ blue: '#1dbeee',
4
+ blueDark30: '#1485a7',
5
+ blueDark75: '#07303c',
6
+ blueLight30: '#61d2f3',
7
+ blueLight75: '#c7effb',
8
+ blueLight90: '#e8f9fd',
9
+ dodgerBlue: '#4568fb',
10
+ dodgerBlueDark30: '#3049b0',
11
+ dodgerBlueLight30: '#7d95fc',
12
+ dodgerBlueLight90: '#ecf0ff',
13
+ green: '#01b39c',
14
+ greenDark15: '#019885',
15
+ greenDark30: '#017d6d',
16
+ greenDark75: '#002d27',
17
+ greenLight30: '#4dcaba',
18
+ greenLight90: '#e6f7f5',
19
+ grey: '#a3a6ac',
20
+ greyDark30: '#727478',
21
+ greyDark45: '#5a5b5f',
22
+ greyDark60: '#414245',
23
+ greyDark75: '#292a2b',
24
+ greyLight45: '#ccced1',
25
+ greyLight60: '#dadbde',
26
+ greyLight75: '#e8e9ea',
27
+ greyLight85: '#f1f2f3',
28
+ greyLight90: '#f6f6f7',
29
+ grotesqueGreen: '#6af293',
30
+ grotesqueGreenDark45: '#3a8551',
31
+ grotesqueGreenLight60: '#c3fad4',
32
+ grotesqueGreenLight75: '#dafce4',
33
+ grotesqueGreenLight90: '#f0fef4',
34
+ orange: '#ffa234',
35
+ orangeDark15: '#d98a2c',
36
+ orangeDark30: '#b37124',
37
+ orangeDark75: '#40290d',
38
+ orangeLight30: '#ffbe71',
39
+ orangeLight75: '#ffe8cc',
40
+ orangeLight90: '#fff6eb',
41
+ pink: '#fe56aa',
42
+ pinkDark15: '#cf4991',
43
+ pinkDark30: '#b23c77',
44
+ pinkDark45: '#8c2f5e',
45
+ pinkDark75: '#40162b',
46
+ pinkLight30: '#fe89c4',
47
+ pinkLight45: '#fea2d0',
48
+ pinkLight75: '#fcd5ea',
49
+ pinkLight90: '#ffeef7',
50
+ purple: '#be83cf',
51
+ red: '#de350b',
52
+ redDark15: '#bd2d09',
53
+ redDark30: '#9b2508',
54
+ redDark75: '#380d03',
55
+ redLight30: '#e87254',
56
+ redLight75: '#f7cdc2',
57
+ redLight90: '#fcebe7',
58
+ smalt: '#003580',
59
+ smaltDark75: '#000d20',
60
+ smaltLight30: '#4d72a6',
61
+ smaltLight45: '#7390b9',
62
+ smaltLight90: '#e6ebf2',
63
+ violet: '#7622d7',
64
+ violetDark30: '#531897',
65
+ violetDark45: '#411376',
66
+ violetDark75: '#1e0936',
67
+ violetLight30: '#9f64e3',
68
+ violetLight60: '#c8a7ef',
69
+ violetLight75: '#ddc8f5',
70
+ violetLight90: '#f1e9fb',
71
+ white: '#ffffff',
72
+ yellow: '#fadb14',
73
+ yellowDark75: '#3f3705',
74
+ yellowLight60: '#fdf1a1',
75
+ yellowLight90: '#fffbe8',
76
+ };
77
+
78
+ const systemPalette = {
79
+ primary: palette.violet,
80
+ primaryDark: palette.violetDark30,
81
+ primaryLight: palette.violetLight30,
82
+ primaryBackground: palette.violetLight90,
83
+ platformBackground: palette.greyLight85,
84
+ backgroundDark: palette.black,
85
+ backgroundLight: palette.white,
86
+ info: palette.dodgerBlue,
87
+ infoDark: palette.dodgerBlueDark30,
88
+ infoLight: palette.dodgerBlueLight30,
89
+ infoBackground: palette.dodgerBlueLight90,
90
+ success: palette.green,
91
+ successDark: palette.greenDark30,
92
+ successLight: palette.greenLight30,
93
+ successBackground: palette.greenLight90,
94
+ danger: palette.red,
95
+ dangerDark: palette.redDark30,
96
+ dangerLight: palette.redLight30,
97
+ dangerBackground: palette.redLight90,
98
+ warning: palette.orange,
99
+ warningDark: palette.orangeDark30,
100
+ warningLight: palette.orangeLight30,
101
+ warningBackground: palette.orangeLight90,
102
+ error: palette.pink,
103
+ errorDark: palette.pinkDark30,
104
+ errorLight: palette.pinkLight30,
105
+ errorBackground: palette.pinkLight90,
106
+ headingText: palette.black,
107
+ text: palette.greyDark45,
108
+ subduedText: palette.greyDark30,
109
+ disabledText: palette.grey,
110
+ outline: palette.greyLight60,
111
+ disabledBackground: palette.greyLight90,
112
+ };
113
+
114
+
115
+ export { palette, systemPalette };
package/tsconfig.json ADDED
@@ -0,0 +1,17 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "esnext",
4
+ "declaration": true,
5
+ "outDir": "types",
6
+ "moduleResolution": "node",
7
+ "esModuleInterop": true,
8
+ "strict": true,
9
+ "noImplicitReturns": true,
10
+ "noUnusedLocals": true,
11
+ "skipLibCheck": true
12
+ },
13
+ "include": ["src"],
14
+ "exclude": [
15
+ "node_modules"
16
+ ]
17
+ }
package/types/index.d.ts ADDED
@@ -0,0 +1,112 @@
1
+ declare const palette: {
2
+ black: string;
3
+ blue: string;
4
+ blueDark30: string;
5
+ blueDark75: string;
6
+ blueLight30: string;
7
+ blueLight75: string;
8
+ blueLight90: string;
9
+ dodgerBlue: string;
10
+ dodgerBlueDark30: string;
11
+ dodgerBlueLight30: string;
12
+ dodgerBlueLight90: string;
13
+ green: string;
14
+ greenDark15: string;
15
+ greenDark30: string;
16
+ greenDark75: string;
17
+ greenLight30: string;
18
+ greenLight90: string;
19
+ grey: string;
20
+ greyDark30: string;
21
+ greyDark45: string;
22
+ greyDark60: string;
23
+ greyDark75: string;
24
+ greyLight45: string;
25
+ greyLight60: string;
26
+ greyLight75: string;
27
+ greyLight85: string;
28
+ greyLight90: string;
29
+ grotesqueGreen: string;
30
+ grotesqueGreenDark45: string;
31
+ grotesqueGreenLight60: string;
32
+ grotesqueGreenLight75: string;
33
+ grotesqueGreenLight90: string;
34
+ orange: string;
35
+ orangeDark15: string;
36
+ orangeDark30: string;
37
+ orangeDark75: string;
38
+ orangeLight30: string;
39
+ orangeLight75: string;
40
+ orangeLight90: string;
41
+ pink: string;
42
+ pinkDark15: string;
43
+ pinkDark30: string;
44
+ pinkDark45: string;
45
+ pinkDark75: string;
46
+ pinkLight30: string;
47
+ pinkLight45: string;
48
+ pinkLight75: string;
49
+ pinkLight90: string;
50
+ purple: string;
51
+ red: string;
52
+ redDark15: string;
53
+ redDark30: string;
54
+ redDark75: string;
55
+ redLight30: string;
56
+ redLight75: string;
57
+ redLight90: string;
58
+ smalt: string;
59
+ smaltDark75: string;
60
+ smaltLight30: string;
61
+ smaltLight45: string;
62
+ smaltLight90: string;
63
+ violet: string;
64
+ violetDark30: string;
65
+ violetDark45: string;
66
+ violetDark75: string;
67
+ violetLight30: string;
68
+ violetLight60: string;
69
+ violetLight75: string;
70
+ violetLight90: string;
71
+ white: string;
72
+ yellow: string;
73
+ yellowDark75: string;
74
+ yellowLight60: string;
75
+ yellowLight90: string;
76
+ };
77
+ declare const systemPalette: {
78
+ primary: string;
79
+ primaryDark: string;
80
+ primaryLight: string;
81
+ primaryBackground: string;
82
+ platformBackground: string;
83
+ backgroundDark: string;
84
+ backgroundLight: string;
85
+ info: string;
86
+ infoDark: string;
87
+ infoLight: string;
88
+ infoBackground: string;
89
+ success: string;
90
+ successDark: string;
91
+ successLight: string;
92
+ successBackground: string;
93
+ danger: string;
94
+ dangerDark: string;
95
+ dangerLight: string;
96
+ dangerBackground: string;
97
+ warning: string;
98
+ warningDark: string;
99
+ warningLight: string;
100
+ warningBackground: string;
101
+ error: string;
102
+ errorDark: string;
103
+ errorLight: string;
104
+ errorBackground: string;
105
+ headingText: string;
106
+ text: string;
107
+ subduedText: string;
108
+ disabledText: string;
109
+ outline: string;
110
+ disabledBackground: string;
111
+ };
112
+ export { palette, systemPalette };