@spscommerce/ds-colors 0.0.0-20260319-8230915ce

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 (11) hide show
  1. package/README.md +79 -0
  2. package/colors.cjs +27 -0
  3. package/colors.css +25 -0
  4. package/colors.js +27 -0
  5. package/colors.json +25 -0
  6. package/colors.less +23 -0
  7. package/colors.md +113 -0
  8. package/colors.scss +23 -0
  9. package/colors.yml +23 -0
  10. package/package.json +51 -0
  11. package/tsconfig.json +14 -0
package/README.md ADDED
@@ -0,0 +1,79 @@
1
+ # @spscommerce/ds-colors
2
+
3
+ > Design approved colors distributed in various formats
4
+
5
+ ```
6
+ npm install --save @spscommerce/ds-colors
7
+
8
+ # OR
9
+
10
+ yarn add @spscommerce/ds-colors
11
+ ```
12
+
13
+ Now choose a format that you'd like to use. The following formats are available:
14
+
15
+ * [CommonJS](#commonjs)
16
+ * [CSS Variables](#css-variables)
17
+ * [JSON](#json)
18
+ * [Less](#less)
19
+ * [SCSS](#scss)
20
+ * [YAML](#yaml)
21
+
22
+ If you want more formats please open a pull request.
23
+
24
+ ### CommonJS
25
+
26
+ ```js
27
+ const colors, { red100 } = require('@spscommerce/ds-colors');
28
+ console.log(colors.red100); // > #ffeaec
29
+ console.log(red100); // > #ffeaec
30
+ ```
31
+
32
+ ### ES Modules
33
+
34
+ ```js
35
+ import { colors } from '@spscommerce/ds-colors';
36
+ console.log(colors.red100); // > #ffeaec
37
+ ```
38
+
39
+ ### CSS Variables
40
+
41
+ ```css
42
+ @import 'path/to/node_modules/@spscommerce/ds-colors/colors.css';
43
+
44
+ .myclass {
45
+ color: var(--gray400);
46
+ }
47
+ ```
48
+
49
+ ### JSON
50
+
51
+ ```bash
52
+ ln -s path/to/node_modules/@spscommerce/ds-colors/colors.json colors.json
53
+ ```
54
+
55
+ ### Less
56
+
57
+ ```less
58
+ @import 'path/to/node_modules/@spscommerce/ds-colors/colors.less';
59
+
60
+ .myclass {
61
+ color: @gray400;
62
+ }
63
+ ```
64
+
65
+ ### SCSS
66
+
67
+ ```scss
68
+ @import '@spscommerce/ds-colors/colors.scss';
69
+
70
+ .myclass {
71
+ color: $gray400;
72
+ }
73
+ ```
74
+
75
+ ### YAML
76
+
77
+ ```bash
78
+ ln -s path/to/node_modules/@spscommerce/ds-colors/colors.yml colors.yml
79
+ ```
package/colors.cjs ADDED
@@ -0,0 +1,27 @@
1
+ module.exports = {
2
+ colors: {
3
+ red100: "#FBE6EA",
4
+ red200: "#DE002E",
5
+ red300: "#A30D2D",
6
+ blue100: "#E6F2F8",
7
+ blue200: "#007DB8",
8
+ blue300: "#09638D",
9
+ green100: "#E7F3EC",
10
+ green200: "#0B8940",
11
+ green300: "#106B39",
12
+ purple100: "#F4ECF2",
13
+ purple200: "#91467F",
14
+ purple300: "#6E3C65",
15
+ orange100: "#FCF1E7",
16
+ orange200: "#E7760B",
17
+ orange300: "#AA5E14",
18
+ white: "#FFFFFF",
19
+ gray100: "#F3F4F4",
20
+ gray200: "#E9E9EA",
21
+ gray300: "#D2D4D4",
22
+ gray400: "#717779",
23
+ gray500: "#4B5356",
24
+ gray600: "#1F282C",
25
+ black: "#000000",
26
+ }
27
+ };
package/colors.css ADDED
@@ -0,0 +1,25 @@
1
+ :root {
2
+ --red100: #FBE6EA;
3
+ --red200: #DE002E;
4
+ --red300: #A30D2D;
5
+ --blue100: #E6F2F8;
6
+ --blue200: #007DB8;
7
+ --blue300: #09638D;
8
+ --green100: #E7F3EC;
9
+ --green200: #0B8940;
10
+ --green300: #106B39;
11
+ --purple100: #F4ECF2;
12
+ --purple200: #91467F;
13
+ --purple300: #6E3C65;
14
+ --orange100: #FCF1E7;
15
+ --orange200: #E7760B;
16
+ --orange300: #AA5E14;
17
+ --white: #FFFFFF;
18
+ --gray100: #F3F4F4;
19
+ --gray200: #E9E9EA;
20
+ --gray300: #D2D4D4;
21
+ --gray400: #717779;
22
+ --gray500: #4B5356;
23
+ --gray600: #1F282C;
24
+ --black: #000000;
25
+ }
package/colors.js ADDED
@@ -0,0 +1,27 @@
1
+ const colors = {
2
+ red100: "#FBE6EA",
3
+ red200: "#DE002E",
4
+ red300: "#A30D2D",
5
+ blue100: "#E6F2F8",
6
+ blue200: "#007DB8",
7
+ blue300: "#09638D",
8
+ green100: "#E7F3EC",
9
+ green200: "#0B8940",
10
+ green300: "#106B39",
11
+ purple100: "#F4ECF2",
12
+ purple200: "#91467F",
13
+ purple300: "#6E3C65",
14
+ orange100: "#FCF1E7",
15
+ orange200: "#E7760B",
16
+ orange300: "#AA5E14",
17
+ white: "#FFFFFF",
18
+ gray100: "#F3F4F4",
19
+ gray200: "#E9E9EA",
20
+ gray300: "#D2D4D4",
21
+ gray400: "#717779",
22
+ gray500: "#4B5356",
23
+ gray600: "#1F282C",
24
+ black: "#000000",
25
+ };
26
+
27
+ export { colors };
package/colors.json ADDED
@@ -0,0 +1,25 @@
1
+ {
2
+ "red100": "#FBE6EA",
3
+ "red200": "#DE002E",
4
+ "red300": "#A30D2D",
5
+ "blue100": "#E6F2F8",
6
+ "blue200": "#007DB8",
7
+ "blue300": "#09638D",
8
+ "green100": "#E7F3EC",
9
+ "green200": "#0B8940",
10
+ "green300": "#106B39",
11
+ "purple100": "#F4ECF2",
12
+ "purple200": "#91467F",
13
+ "purple300": "#6E3C65",
14
+ "orange100": "#FCF1E7",
15
+ "orange200": "#E7760B",
16
+ "orange300": "#AA5E14",
17
+ "white": "#FFFFFF",
18
+ "gray100": "#F3F4F4",
19
+ "gray200": "#E9E9EA",
20
+ "gray300": "#D2D4D4",
21
+ "gray400": "#717779",
22
+ "gray500": "#4B5356",
23
+ "gray600": "#1F282C",
24
+ "black": "#000000"
25
+ }
package/colors.less ADDED
@@ -0,0 +1,23 @@
1
+ @red100: #FBE6EA;
2
+ @red200: #DE002E;
3
+ @red300: #A30D2D;
4
+ @blue100: #E6F2F8;
5
+ @blue200: #007DB8;
6
+ @blue300: #09638D;
7
+ @green100: #E7F3EC;
8
+ @green200: #0B8940;
9
+ @green300: #106B39;
10
+ @purple100: #F4ECF2;
11
+ @purple200: #91467F;
12
+ @purple300: #6E3C65;
13
+ @orange100: #FCF1E7;
14
+ @orange200: #E7760B;
15
+ @orange300: #AA5E14;
16
+ @white: #FFFFFF;
17
+ @gray100: #F3F4F4;
18
+ @gray200: #E9E9EA;
19
+ @gray300: #D2D4D4;
20
+ @gray400: #717779;
21
+ @gray500: #4B5356;
22
+ @gray600: #1F282C;
23
+ @black: #000000;
package/colors.md ADDED
@@ -0,0 +1,113 @@
1
+ **red100**
2
+
3
+ ![red100: #FBE6EA](https://dummyimage.com/100x100/FBE6EA/000000.jpg&text=+")
4
+
5
+
6
+ **red200**
7
+
8
+ ![red200: #DE002E](https://dummyimage.com/100x100/DE002E/000000.jpg&text=+")
9
+
10
+
11
+ **red300**
12
+
13
+ ![red300: #A30D2D](https://dummyimage.com/100x100/A30D2D/000000.jpg&text=+")
14
+
15
+
16
+ **blue100**
17
+
18
+ ![blue100: #E6F2F8](https://dummyimage.com/100x100/E6F2F8/000000.jpg&text=+")
19
+
20
+
21
+ **blue200**
22
+
23
+ ![blue200: #007DB8](https://dummyimage.com/100x100/007DB8/000000.jpg&text=+")
24
+
25
+
26
+ **blue300**
27
+
28
+ ![blue300: #09638D](https://dummyimage.com/100x100/09638D/000000.jpg&text=+")
29
+
30
+
31
+ **green100**
32
+
33
+ ![green100: #E7F3EC](https://dummyimage.com/100x100/E7F3EC/000000.jpg&text=+")
34
+
35
+
36
+ **green200**
37
+
38
+ ![green200: #0B8940](https://dummyimage.com/100x100/0B8940/000000.jpg&text=+")
39
+
40
+
41
+ **green300**
42
+
43
+ ![green300: #106B39](https://dummyimage.com/100x100/106B39/000000.jpg&text=+")
44
+
45
+
46
+ **purple100**
47
+
48
+ ![purple100: #F4ECF2](https://dummyimage.com/100x100/F4ECF2/000000.jpg&text=+")
49
+
50
+
51
+ **purple200**
52
+
53
+ ![purple200: #91467F](https://dummyimage.com/100x100/91467F/000000.jpg&text=+")
54
+
55
+
56
+ **purple300**
57
+
58
+ ![purple300: #6E3C65](https://dummyimage.com/100x100/6E3C65/000000.jpg&text=+")
59
+
60
+
61
+ **orange100**
62
+
63
+ ![orange100: #FCF1E7](https://dummyimage.com/100x100/FCF1E7/000000.jpg&text=+")
64
+
65
+
66
+ **orange200**
67
+
68
+ ![orange200: #E7760B](https://dummyimage.com/100x100/E7760B/000000.jpg&text=+")
69
+
70
+
71
+ **orange300**
72
+
73
+ ![orange300: #AA5E14](https://dummyimage.com/100x100/AA5E14/000000.jpg&text=+")
74
+
75
+
76
+ **white**
77
+
78
+ ![white: #FFFFFF](https://dummyimage.com/100x100/FFFFFF/000000.jpg&text=+")
79
+
80
+
81
+ **gray100**
82
+
83
+ ![gray100: #F3F4F4](https://dummyimage.com/100x100/F3F4F4/000000.jpg&text=+")
84
+
85
+
86
+ **gray200**
87
+
88
+ ![gray200: #E9E9EA](https://dummyimage.com/100x100/E9E9EA/000000.jpg&text=+")
89
+
90
+
91
+ **gray300**
92
+
93
+ ![gray300: #D2D4D4](https://dummyimage.com/100x100/D2D4D4/000000.jpg&text=+")
94
+
95
+
96
+ **gray400**
97
+
98
+ ![gray400: #717779](https://dummyimage.com/100x100/717779/000000.jpg&text=+")
99
+
100
+
101
+ **gray500**
102
+
103
+ ![gray500: #4B5356](https://dummyimage.com/100x100/4B5356/000000.jpg&text=+")
104
+
105
+
106
+ **gray600**
107
+
108
+ ![gray600: #1F282C](https://dummyimage.com/100x100/1F282C/000000.jpg&text=+")
109
+
110
+
111
+ **black**
112
+
113
+ ![black: #000000](https://dummyimage.com/100x100/000000/000000.jpg&text=+")
package/colors.scss ADDED
@@ -0,0 +1,23 @@
1
+ $red100: #FBE6EA;
2
+ $red200: #DE002E;
3
+ $red300: #A30D2D;
4
+ $blue100: #E6F2F8;
5
+ $blue200: #007DB8;
6
+ $blue300: #09638D;
7
+ $green100: #E7F3EC;
8
+ $green200: #0B8940;
9
+ $green300: #106B39;
10
+ $purple100: #F4ECF2;
11
+ $purple200: #91467F;
12
+ $purple300: #6E3C65;
13
+ $orange100: #FCF1E7;
14
+ $orange200: #E7760B;
15
+ $orange300: #AA5E14;
16
+ $white: #FFFFFF;
17
+ $gray100: #F3F4F4;
18
+ $gray200: #E9E9EA;
19
+ $gray300: #D2D4D4;
20
+ $gray400: #717779;
21
+ $gray500: #4B5356;
22
+ $gray600: #1F282C;
23
+ $black: #000000;
package/colors.yml ADDED
@@ -0,0 +1,23 @@
1
+ red100: '#FBE6EA'
2
+ red200: '#DE002E'
3
+ red300: '#A30D2D'
4
+ blue100: '#E6F2F8'
5
+ blue200: '#007DB8'
6
+ blue300: '#09638D'
7
+ green100: '#E7F3EC'
8
+ green200: '#0B8940'
9
+ green300: '#106B39'
10
+ purple100: '#F4ECF2'
11
+ purple200: '#91467F'
12
+ purple300: '#6E3C65'
13
+ orange100: '#FCF1E7'
14
+ orange200: '#E7760B'
15
+ orange300: '#AA5E14'
16
+ white: '#FFFFFF'
17
+ gray100: '#F3F4F4'
18
+ gray200: '#E9E9EA'
19
+ gray300: '#D2D4D4'
20
+ gray400: '#717779'
21
+ gray500: '#4B5356'
22
+ gray600: '#1F282C'
23
+ black: '#000000'
package/package.json ADDED
@@ -0,0 +1,51 @@
1
+ {
2
+ "name": "@spscommerce/ds-colors",
3
+ "description": "Design sanctioned colors for SPS Commerce libraries and applications compiled into various formats.",
4
+ "version": "0.0.0-20260319-8230915ce",
5
+ "author": "SPS Commerce",
6
+ "license": "UNLICENSED",
7
+ "repository": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-colors",
8
+ "homepage": "https://github.com/spscommerce/woodland/tree/main/packages/@spscommerce/ds-colors#readme",
9
+ "module": "./colors.js",
10
+ "type": "module",
11
+ "main": "./colors.cjs",
12
+ "exports": {
13
+ ".": {
14
+ "types": "./lib/index.d.ts",
15
+ "require": "./colors.cjs",
16
+ "import": "./colors.js",
17
+ "default": "./colors.cjs"
18
+ },
19
+ "./colors.json": "./colors.json",
20
+ "./colors.css": "./colors.css",
21
+ "./colors.scss": "./colors.scss",
22
+ "./colors.less": "./colors.less",
23
+ "./colors.yml": "./colors.yml",
24
+ "./colors.md": "./colors.md",
25
+ "./colors.cjs": "./colors.cjs",
26
+ "./colors.js": "./colors.js"
27
+ },
28
+ "publishConfig": {
29
+ "access": "public"
30
+ },
31
+ "keywords": [
32
+ "colors",
33
+ "color",
34
+ "sass",
35
+ "scss",
36
+ "less",
37
+ "json",
38
+ "js",
39
+ "css variables"
40
+ ],
41
+ "devDependencies": {
42
+ "fs-extra": "^7.0.1",
43
+ "sections": "^1.0.0"
44
+ },
45
+ "scripts": {
46
+ "build": "tsc && node ./dist/scripts/build.js",
47
+ "clean": "git clean -fdX",
48
+ "pub": "node ../../scripts/publish-package.mjs",
49
+ "test": "pnpm run build && node dist/scripts/test.js"
50
+ }
51
+ }
package/tsconfig.json ADDED
@@ -0,0 +1,14 @@
1
+ {
2
+ "extends": "../../tsconfig.base.json",
3
+ "compilerOptions": {
4
+ "baseUrl": "tsconfig",
5
+ "rootDir": "./",
6
+ "outDir": "./dist",
7
+ "target": "esnext",
8
+ "esModuleInterop": true,
9
+ "declaration": true,
10
+ "resolveJsonModule": true
11
+ },
12
+ "include": ["scripts/**/*", "global.d.ts"],
13
+ "exclude": ["node_modules", "dist", "**/*.test-*.ts", "**/*.test-*.tsx"]
14
+ }