UNPKG

@kalamazoo/theme/dist/cjs/colors.js

Version:

5.96 kBJavaScriptView Raw

1"use strict";
2Object.defineProperty(exports, "__esModule", { value: true });
3var tslib_1 = require("tslib");
4var themed_1 = tslib_1.__importDefault(require("./utils/themed"));
5// Reds
6exports.R50 = '#FFEBE6';
7exports.R75 = '#FFBDAD';
8exports.R100 = '#FF8F73';
9exports.R200 = '#FF7452';
10exports.R300 = '#FF5630';
11exports.R400 = '#DE350B';
12exports.R500 = '#BF2600';
13// Yellows
14exports.Y50 = '#FFFAE6';
15exports.Y75 = '#FFF0B3';
16exports.Y100 = '#FFE380';
17exports.Y200 = '#FFC400';
18exports.Y300 = '#FFAB00';
19exports.Y400 = '#FF991F';
20exports.Y500 = '#FF8B00';
21// Greens
22exports.G50 = '#E3FCEF';
23exports.G75 = '#ABF5D1';
24exports.G100 = '#79F2C0';
25exports.G200 = '#57D9A3';
26exports.G300 = '#36B37E';
27exports.G400 = '#00875A';
28exports.G500 = '#006644';
29// Blues
30exports.B50 = '#DEEBFF';
31exports.B75 = '#B3D4FF';
32exports.B100 = '#4C9AFF';
33exports.B200 = '#2684FF';
34exports.B300 = '#0065FF';
35exports.B400 = '#0052CC';
36exports.B500 = '#0747A6';
37// Purples
38exports.P50 = '#EAE6FF';
39exports.P75 = '#C0B6F2';
40exports.P100 = '#998DD9';
41exports.P200 = '#8777D9';
42exports.P300 = '#6554C0';
43exports.P400 = '#5243AA';
44exports.P500 = '#403294';
45// Teals
46exports.T50 = '#E6FCFF';
47exports.T75 = '#B3F5FF';
48exports.T100 = '#79E2F2';
49exports.T200 = '#00C7E6';
50exports.T300 = '#00B8D9';
51exports.T400 = '#00A3BF';
52exports.T500 = '#008DA6';
53// Neutrals
54exports.N0 = '#FFFFFF';
55exports.N10 = '#FAFBFC';
56exports.N20 = '#F4F5F7';
57exports.N30 = '#EBECF0';
58exports.N40 = '#DFE1E6';
59exports.N50 = '#C1C7D0';
60exports.N60 = '#B3BAC5';
61exports.N70 = '#A5ADBA';
62exports.N80 = '#97A0AF';
63exports.N90 = '#8993A4';
64exports.N100 = '#7A869A';
65exports.N200 = '#6B778C';
66exports.N300 = '#5E6C84';
67exports.N400 = '#505F79';
68exports.N500 = '#42526E';
69exports.N600 = '#344563';
70exports.N700 = '#253858';
71exports.N800 = '#172B4D';
72// ATTENTION: update the tints if you update this
73exports.N900 = '#091E42';
74// Each tint is made of N900 and an alpha channel
75exports.N10A = 'rgba(9, 30, 66, 0.02)';
76exports.N20A = 'rgba(9, 30, 66, 0.04)';
77exports.N30A = 'rgba(9, 30, 66, 0.08)';
78exports.N40A = 'rgba(9, 30, 66, 0.13)';
79exports.N50A = 'rgba(9, 30, 66, 0.25)';
80exports.N60A = 'rgba(9, 30, 66, 0.31)';
81exports.N70A = 'rgba(9, 30, 66, 0.36)';
82exports.N80A = 'rgba(9, 30, 66, 0.42)';
83exports.N90A = 'rgba(9, 30, 66, 0.48)';
84exports.N100A = 'rgba(9, 30, 66, 0.54)';
85exports.N200A = 'rgba(9, 30, 66, 0.60)';
86exports.N300A = 'rgba(9, 30, 66, 0.66)';
87exports.N400A = 'rgba(9, 30, 66, 0.71)';
88exports.N500A = 'rgba(9, 30, 66, 0.77)';
89exports.N600A = 'rgba(9, 30, 66, 0.82)';
90exports.N700A = 'rgba(9, 30, 66, 0.89)';
91exports.N800A = 'rgba(9, 30, 66, 0.95)';
92// Dark Mode Neutrals
93exports.DN900 = '#E6EDFA';
94exports.DN800 = '#DCE5F5';
95exports.DN700 = '#CED9EB';
96exports.DN600 = '#B8C7E0';
97exports.DN500 = '#ABBBD6';
98exports.DN400 = '#9FB0CC';
99exports.DN300 = '#8C9CB8';
100exports.DN200 = '#7988A3';
101exports.DN100 = '#67758F';
102exports.DN90 = '#56637A';
103exports.DN80 = '#455166';
104exports.DN70 = '#3B475C';
105exports.DN60 = '#313D52';
106exports.DN50 = '#283447';
107exports.DN40 = '#202B3D';
108exports.DN30 = '#1B2638';
109exports.DN20 = '#121A29';
110exports.DN10 = '#0E1624';
111// ATTENTION: update the tints if you update this
112exports.DN0 = '#0D1424';
113// Each dark tint is made of DN0 and an alpha channel
114exports.DN800A = 'rgba(13, 20, 36, 0.06)';
115exports.DN700A = 'rgba(13, 20, 36, 0.14)';
116exports.DN600A = 'rgba(13, 20, 36, 0.18)';
117exports.DN500A = 'rgba(13, 20, 36, 0.29)';
118exports.DN400A = 'rgba(13, 20, 36, 0.36)';
119exports.DN300A = 'rgba(13, 20, 36, 0.40)';
120exports.DN200A = 'rgba(13, 20, 36, 0.47)';
121exports.DN100A = 'rgba(13, 20, 36, 0.53)';
122exports.DN90A = 'rgba(13, 20, 36, 0.63)';
123exports.DN80A = 'rgba(13, 20, 36, 0.73)';
124exports.DN70A = 'rgba(13, 20, 36, 0.78)';
125exports.DN60A = 'rgba(13, 20, 36, 0.81)';
126exports.DN50A = 'rgba(13, 20, 36, 0.85)';
127exports.DN40A = 'rgba(13, 20, 36, 0.89)';
128exports.DN30A = 'rgba(13, 20, 36, 0.92)';
129exports.DN20A = 'rgba(13, 20, 36, 0.95)';
130exports.DN10A = 'rgba(13, 20, 36, 0.97)';
131// Themed colors
132exports.background = themed_1.default({ light: exports.N0, dark: exports.DN30 });
133exports.backgroundActive = themed_1.default({ light: exports.B50, dark: exports.B75 });
134exports.backgroundHover = themed_1.default({ light: exports.N30, dark: exports.DN70 });
135exports.backgroundOnLayer = themed_1.default({ light: exports.N0, dark: exports.DN50 });
136exports.text = themed_1.default({ light: exports.N900, dark: exports.DN600 });
137exports.textHover = themed_1.default({ light: exports.N800, dark: exports.DN600 });
138exports.textActive = themed_1.default({ light: exports.B400, dark: exports.B400 });
139exports.subtleText = themed_1.default({ light: exports.N200, dark: exports.DN300 });
140exports.placeholderText = themed_1.default({ light: exports.N100, dark: exports.DN200 });
141exports.heading = themed_1.default({ light: exports.N800, dark: exports.DN600 });
142exports.subtleHeading = themed_1.default({ light: exports.N200, dark: exports.DN300 });
143exports.codeBlock = themed_1.default({ light: exports.N20, dark: exports.DN50 });
144exports.link = themed_1.default({ light: exports.B400, dark: exports.B100 });
145exports.linkHover = themed_1.default({ light: exports.B300, dark: exports.B200 });
146exports.linkActive = themed_1.default({ light: exports.B500, dark: exports.B100 });
147exports.linkOutline = themed_1.default({ light: exports.B100, dark: exports.B200 });
148exports.primary = themed_1.default({ light: exports.B400, dark: exports.B100 });
149exports.blue = themed_1.default({ light: exports.B400, dark: exports.B100 });
150exports.teal = themed_1.default({ light: exports.T300, dark: exports.T200 });
151exports.purple = themed_1.default({ light: exports.P300, dark: exports.P100 });
152exports.red = themed_1.default({ light: exports.R300, dark: exports.R300 });
153exports.yellow = themed_1.default({ light: exports.Y300, dark: exports.Y300 });
154exports.green = themed_1.default({ light: exports.G300, dark: exports.G300 });
155exports.skeleton = function () { return exports.N20; };
156//# sourceMappingURL=colors.js.map
\No newline at end of file

1	`"use strict";`
2	`Object.defineProperty(exports, "__esModule", { value: true });`
3	`var tslib_1 = require("tslib");`
4	`var themed_1 = tslib_1.__importDefault(require("./utils/themed"));`
5	`// Reds`
6	`exports.R50 = '#FFEBE6';`
7	`exports.R75 = '#FFBDAD';`
8	`exports.R100 = '#FF8F73';`
9	`exports.R200 = '#FF7452';`
10	`exports.R300 = '#FF5630';`
11	`exports.R400 = '#DE350B';`
12	`exports.R500 = '#BF2600';`
13	`// Yellows`
14	`exports.Y50 = '#FFFAE6';`
15	`exports.Y75 = '#FFF0B3';`
16	`exports.Y100 = '#FFE380';`
17	`exports.Y200 = '#FFC400';`
18	`exports.Y300 = '#FFAB00';`
19	`exports.Y400 = '#FF991F';`
20	`exports.Y500 = '#FF8B00';`
21	`// Greens`
22	`exports.G50 = '#E3FCEF';`
23	`exports.G75 = '#ABF5D1';`
24	`exports.G100 = '#79F2C0';`
25	`exports.G200 = '#57D9A3';`
26	`exports.G300 = '#36B37E';`
27	`exports.G400 = '#00875A';`
28	`exports.G500 = '#006644';`
29	`// Blues`
30	`exports.B50 = '#DEEBFF';`
31	`exports.B75 = '#B3D4FF';`
32	`exports.B100 = '#4C9AFF';`
33	`exports.B200 = '#2684FF';`
34	`exports.B300 = '#0065FF';`
35	`exports.B400 = '#0052CC';`
36	`exports.B500 = '#0747A6';`
37	`// Purples`
38	`exports.P50 = '#EAE6FF';`
39	`exports.P75 = '#C0B6F2';`
40	`exports.P100 = '#998DD9';`
41	`exports.P200 = '#8777D9';`
42	`exports.P300 = '#6554C0';`
43	`exports.P400 = '#5243AA';`
44	`exports.P500 = '#403294';`
45	`// Teals`
46	`exports.T50 = '#E6FCFF';`
47	`exports.T75 = '#B3F5FF';`
48	`exports.T100 = '#79E2F2';`
49	`exports.T200 = '#00C7E6';`
50	`exports.T300 = '#00B8D9';`
51	`exports.T400 = '#00A3BF';`
52	`exports.T500 = '#008DA6';`
53	`// Neutrals`
54	`exports.N0 = '#FFFFFF';`
55	`exports.N10 = '#FAFBFC';`
56	`exports.N20 = '#F4F5F7';`
57	`exports.N30 = '#EBECF0';`
58	`exports.N40 = '#DFE1E6';`
59	`exports.N50 = '#C1C7D0';`
60	`exports.N60 = '#B3BAC5';`
61	`exports.N70 = '#A5ADBA';`
62	`exports.N80 = '#97A0AF';`
63	`exports.N90 = '#8993A4';`
64	`exports.N100 = '#7A869A';`
65	`exports.N200 = '#6B778C';`
66	`exports.N300 = '#5E6C84';`
67	`exports.N400 = '#505F79';`
68	`exports.N500 = '#42526E';`
69	`exports.N600 = '#344563';`
70	`exports.N700 = '#253858';`
71	`exports.N800 = '#172B4D';`
72	`// ATTENTION: update the tints if you update this`
73	`exports.N900 = '#091E42';`
74	`// Each tint is made of N900 and an alpha channel`
75	`exports.N10A = 'rgba(9, 30, 66, 0.02)';`
76	`exports.N20A = 'rgba(9, 30, 66, 0.04)';`
77	`exports.N30A = 'rgba(9, 30, 66, 0.08)';`
78	`exports.N40A = 'rgba(9, 30, 66, 0.13)';`
79	`exports.N50A = 'rgba(9, 30, 66, 0.25)';`
80	`exports.N60A = 'rgba(9, 30, 66, 0.31)';`
81	`exports.N70A = 'rgba(9, 30, 66, 0.36)';`
82	`exports.N80A = 'rgba(9, 30, 66, 0.42)';`
83	`exports.N90A = 'rgba(9, 30, 66, 0.48)';`
84	`exports.N100A = 'rgba(9, 30, 66, 0.54)';`
85	`exports.N200A = 'rgba(9, 30, 66, 0.60)';`
86	`exports.N300A = 'rgba(9, 30, 66, 0.66)';`
87	`exports.N400A = 'rgba(9, 30, 66, 0.71)';`
88	`exports.N500A = 'rgba(9, 30, 66, 0.77)';`
89	`exports.N600A = 'rgba(9, 30, 66, 0.82)';`
90	`exports.N700A = 'rgba(9, 30, 66, 0.89)';`
91	`exports.N800A = 'rgba(9, 30, 66, 0.95)';`
92	`// Dark Mode Neutrals`
93	`exports.DN900 = '#E6EDFA';`
94	`exports.DN800 = '#DCE5F5';`
95	`exports.DN700 = '#CED9EB';`
96	`exports.DN600 = '#B8C7E0';`
97	`exports.DN500 = '#ABBBD6';`
98	`exports.DN400 = '#9FB0CC';`
99	`exports.DN300 = '#8C9CB8';`
100	`exports.DN200 = '#7988A3';`
101	`exports.DN100 = '#67758F';`
102	`exports.DN90 = '#56637A';`
103	`exports.DN80 = '#455166';`
104	`exports.DN70 = '#3B475C';`
105	`exports.DN60 = '#313D52';`
106	`exports.DN50 = '#283447';`
107	`exports.DN40 = '#202B3D';`
108	`exports.DN30 = '#1B2638';`
109	`exports.DN20 = '#121A29';`
110	`exports.DN10 = '#0E1624';`
111	`// ATTENTION: update the tints if you update this`
112	`exports.DN0 = '#0D1424';`
113	`// Each dark tint is made of DN0 and an alpha channel`
114	`exports.DN800A = 'rgba(13, 20, 36, 0.06)';`
115	`exports.DN700A = 'rgba(13, 20, 36, 0.14)';`
116	`exports.DN600A = 'rgba(13, 20, 36, 0.18)';`
117	`exports.DN500A = 'rgba(13, 20, 36, 0.29)';`
118	`exports.DN400A = 'rgba(13, 20, 36, 0.36)';`
119	`exports.DN300A = 'rgba(13, 20, 36, 0.40)';`
120	`exports.DN200A = 'rgba(13, 20, 36, 0.47)';`
121	`exports.DN100A = 'rgba(13, 20, 36, 0.53)';`
122	`exports.DN90A = 'rgba(13, 20, 36, 0.63)';`
123	`exports.DN80A = 'rgba(13, 20, 36, 0.73)';`
124	`exports.DN70A = 'rgba(13, 20, 36, 0.78)';`
125	`exports.DN60A = 'rgba(13, 20, 36, 0.81)';`
126	`exports.DN50A = 'rgba(13, 20, 36, 0.85)';`
127	`exports.DN40A = 'rgba(13, 20, 36, 0.89)';`
128	`exports.DN30A = 'rgba(13, 20, 36, 0.92)';`
129	`exports.DN20A = 'rgba(13, 20, 36, 0.95)';`
130	`exports.DN10A = 'rgba(13, 20, 36, 0.97)';`
131	`// Themed colors`
132	`exports.background = themed_1.default({ light: exports.N0, dark: exports.DN30 });`
133	`exports.backgroundActive = themed_1.default({ light: exports.B50, dark: exports.B75 });`
134	`exports.backgroundHover = themed_1.default({ light: exports.N30, dark: exports.DN70 });`
135	`exports.backgroundOnLayer = themed_1.default({ light: exports.N0, dark: exports.DN50 });`
136	`exports.text = themed_1.default({ light: exports.N900, dark: exports.DN600 });`
137	`exports.textHover = themed_1.default({ light: exports.N800, dark: exports.DN600 });`
138	`exports.textActive = themed_1.default({ light: exports.B400, dark: exports.B400 });`
139	`exports.subtleText = themed_1.default({ light: exports.N200, dark: exports.DN300 });`
140	`exports.placeholderText = themed_1.default({ light: exports.N100, dark: exports.DN200 });`
141	`exports.heading = themed_1.default({ light: exports.N800, dark: exports.DN600 });`
142	`exports.subtleHeading = themed_1.default({ light: exports.N200, dark: exports.DN300 });`
143	`exports.codeBlock = themed_1.default({ light: exports.N20, dark: exports.DN50 });`
144	`exports.link = themed_1.default({ light: exports.B400, dark: exports.B100 });`
145	`exports.linkHover = themed_1.default({ light: exports.B300, dark: exports.B200 });`
146	`exports.linkActive = themed_1.default({ light: exports.B500, dark: exports.B100 });`
147	`exports.linkOutline = themed_1.default({ light: exports.B100, dark: exports.B200 });`
148	`exports.primary = themed_1.default({ light: exports.B400, dark: exports.B100 });`
149	`exports.blue = themed_1.default({ light: exports.B400, dark: exports.B100 });`
150	`exports.teal = themed_1.default({ light: exports.T300, dark: exports.T200 });`
151	`exports.purple = themed_1.default({ light: exports.P300, dark: exports.P100 });`
152	`exports.red = themed_1.default({ light: exports.R300, dark: exports.R300 });`
153	`exports.yellow = themed_1.default({ light: exports.Y300, dark: exports.Y300 });`
154	`exports.green = themed_1.default({ light: exports.G300, dark: exports.G300 });`
155	`exports.skeleton = function () { return exports.N20; };`
156	`//# sourceMappingURL=colors.js.map`
\	No newline at end of file