@charcoal-ui/theme 2.5.0 → 2.7.0

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 (17) hide show
  1. package/dist/abstract-theme.d.ts +51 -51
  2. package/dist/abstract-theme.d.ts.map +1 -1
  3. package/dist/default.d.ts +3 -3
  4. package/dist/index.cjs.js +187 -0
  5. package/dist/index.cjs.js.map +1 -0
  6. package/dist/index.d.ts +3 -3
  7. package/dist/index.esm.js +166 -0
  8. package/dist/index.esm.js.map +1 -0
  9. package/dist/theme.d.ts +89 -89
  10. package/dist/theme.d.ts.map +1 -1
  11. package/package.json +18 -17
  12. package/dist/index.cjs +0 -184
  13. package/dist/index.cjs.map +0 -1
  14. package/dist/index.modern.js +0 -183
  15. package/dist/index.modern.js.map +0 -1
  16. package/dist/index.module.js +0 -183
  17. package/dist/index.module.js.map +0 -1
package/dist/abstract-theme.d.ts CHANGED
@@ -1,52 +1,52 @@
1
- import { GradientMaterial, Material, TypographyDescriptor, Effect, OpacityEffect } from '@charcoal-ui/foundation';
2
- export declare type EffectType = 'hover' | 'press' | 'disabled';
3
- export declare type Key = string | number | symbol;
4
- export declare type ColorStyleTheme = {
5
- [key in Key]: Material;
6
- };
7
- export interface CharcoalAbstractTheme {
8
- color: ColorStyleTheme;
9
- gradientColor: {
10
- [key in Key]: GradientMaterial;
11
- };
12
- effect: {
13
- [key in EffectType]?: Effect;
14
- };
15
- elementEffect: {
16
- [key in EffectType]?: OpacityEffect;
17
- };
18
- spacing: {
19
- [key in Key]: number;
20
- };
21
- typography: {
22
- size: {
23
- [key in Key]: TypographyDescriptor;
24
- };
25
- };
26
- borderRadius: {
27
- [key in Key]: number;
28
- };
29
- border: {
30
- [key in Key]: {
31
- color: Material;
32
- };
33
- };
34
- outline: {
35
- [key in Key]: {
36
- color: Material;
37
- weight: number;
38
- };
39
- };
40
- grid: {
41
- unit: {
42
- column: number;
43
- gutter: number;
44
- };
45
- };
46
- transition: {
47
- [key in Key]: {
48
- duration: number;
49
- };
50
- };
51
- }
1
+ import { GradientMaterial, Material, TypographyDescriptor, Effect, OpacityEffect } from '@charcoal-ui/foundation';
2
+ export type EffectType = 'hover' | 'press' | 'disabled';
3
+ export type Key = string | number | symbol;
4
+ export type ColorStyleTheme = {
5
+ [key in Key]: Material;
6
+ };
7
+ export interface CharcoalAbstractTheme {
8
+ color: ColorStyleTheme;
9
+ gradientColor: {
10
+ [key in Key]: GradientMaterial;
11
+ };
12
+ effect: {
13
+ [key in EffectType]?: Effect;
14
+ };
15
+ elementEffect: {
16
+ [key in EffectType]?: OpacityEffect;
17
+ };
18
+ spacing: {
19
+ [key in Key]: number;
20
+ };
21
+ typography: {
22
+ size: {
23
+ [key in Key]: TypographyDescriptor;
24
+ };
25
+ };
26
+ borderRadius: {
27
+ [key in Key]: number;
28
+ };
29
+ border: {
30
+ [key in Key]: {
31
+ color: Material;
32
+ };
33
+ };
34
+ outline: {
35
+ [key in Key]: {
36
+ color: Material;
37
+ weight: number;
38
+ };
39
+ };
40
+ grid: {
41
+ unit: {
42
+ column: number;
43
+ gutter: number;
44
+ };
45
+ };
46
+ transition: {
47
+ [key in Key]: {
48
+ duration: number;
49
+ };
50
+ };
51
+ }
52
52
  //# sourceMappingURL=abstract-theme.d.ts.map
package/dist/abstract-theme.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"abstract-theme.d.ts","sourceRoot":"","sources":["../src/abstract-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC,oBAAY,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAA;AAEvD,oBAAY,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,oBAAY,eAAe,GAAG;KAC3B,GAAG,IAAI,GAAG,GAAG,QAAQ;CACvB,CAAA;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,eAAe,CAAA;IACtB,aAAa,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,gBAAgB;KAAE,CAAA;IACjD,MAAM,EAAE;SAAG,GAAG,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM;KAAE,CAAA;IACxC,aAAa,EAAE;SAAG,GAAG,IAAI,UAAU,CAAC,CAAC,EAAE,aAAa;KAAE,CAAA;IACtD,OAAO,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,MAAM;KAAE,CAAA;IACjC,UAAU,EAAE;QACV,IAAI,EAAE;aAAG,GAAG,IAAI,GAAG,GAAG,oBAAoB;SAAE,CAAA;KAI7C,CAAA;IACD,YAAY,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,MAAM;KAAE,CAAA;IACtC,MAAM,EAAE;SACL,GAAG,IAAI,GAAG,GAAG;YACZ,KAAK,EAAE,QAAQ,CAAA;SAGhB;KACF,CAAA;IACD,OAAO,EAAE;SACN,GAAG,IAAI,GAAG,GAAG;YACZ,KAAK,EAAE,QAAQ,CAAA;YACf,MAAM,EAAE,MAAM,CAAA;SACf;KACF,CAAA;IACD,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAA;YACd,MAAM,EAAE,MAAM,CAAA;SACf,CAAA;KACF,CAAA;IACD,UAAU,EAAE;SACT,GAAG,IAAI,GAAG,GAAG;YACZ,QAAQ,EAAE,MAAM,CAAA;SAGjB;KACF,CAAA;CACF"}
1
+ {"version":3,"file":"abstract-theme.d.ts","sourceRoot":"","sources":["../src/abstract-theme.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,gBAAgB,EAChB,QAAQ,EACR,oBAAoB,EACpB,MAAM,EACN,aAAa,EACd,MAAM,yBAAyB,CAAA;AAEhC,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,CAAA;AAEvD,MAAM,MAAM,GAAG,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAA;AAE1C,MAAM,MAAM,eAAe,GAAG;KAC3B,GAAG,IAAI,GAAG,GAAG,QAAQ;CACvB,CAAA;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,EAAE,eAAe,CAAA;IACtB,aAAa,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,gBAAgB;KAAE,CAAA;IACjD,MAAM,EAAE;SAAG,GAAG,IAAI,UAAU,CAAC,CAAC,EAAE,MAAM;KAAE,CAAA;IACxC,aAAa,EAAE;SAAG,GAAG,IAAI,UAAU,CAAC,CAAC,EAAE,aAAa;KAAE,CAAA;IACtD,OAAO,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,MAAM;KAAE,CAAA;IACjC,UAAU,EAAE;QACV,IAAI,EAAE;aAAG,GAAG,IAAI,GAAG,GAAG,oBAAoB;SAAE,CAAA;KAI7C,CAAA;IACD,YAAY,EAAE;SAAG,GAAG,IAAI,GAAG,GAAG,MAAM;KAAE,CAAA;IACtC,MAAM,EAAE;SACL,GAAG,IAAI,GAAG,GAAG;YACZ,KAAK,EAAE,QAAQ,CAAA;SAGhB;KACF,CAAA;IACD,OAAO,EAAE;SACN,GAAG,IAAI,GAAG,GAAG;YACZ,KAAK,EAAE,QAAQ,CAAA;YACf,MAAM,EAAE,MAAM,CAAA;SACf;KACF,CAAA;IACD,IAAI,EAAE;QACJ,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAA;YACd,MAAM,EAAE,MAAM,CAAA;SACf,CAAA;KACF,CAAA;IACD,UAAU,EAAE;SACT,GAAG,IAAI,GAAG,GAAG;YACZ,QAAQ,EAAE,MAAM,CAAA;SAGjB;KACF,CAAA;CACF"}
package/dist/default.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CharcoalTheme } from './theme';
2
- export declare const light: CharcoalTheme;
3
- export declare const dark: CharcoalTheme;
1
+ import { CharcoalTheme } from './theme';
2
+ export declare const light: CharcoalTheme;
3
+ export declare const dark: CharcoalTheme;
4
4
  //# sourceMappingURL=default.d.ts.map
package/dist/index.cjs.js ADDED
@@ -0,0 +1,187 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
6
+ var __export = (target, all) => {
7
+ for (var name in all)
8
+ __defProp(target, name, { get: all[name], enumerable: true });
9
+ };
10
+ var __copyProps = (to, from, except, desc) => {
11
+ if (from && typeof from === "object" || typeof from === "function") {
12
+ for (let key of __getOwnPropNames(from))
13
+ if (!__hasOwnProp.call(to, key) && key !== except)
14
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
+ }
16
+ return to;
17
+ };
18
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
19
+
20
+ // src/index.ts
21
+ var src_exports = {};
22
+ __export(src_exports, {
23
+ dark: () => dark,
24
+ light: () => light
25
+ });
26
+ module.exports = __toCommonJS(src_exports);
27
+
28
+ // src/default.ts
29
+ var import_polished = require("polished");
30
+ var import_foundation = require("@charcoal-ui/foundation");
31
+ var import_utils = require("@charcoal-ui/utils");
32
+ var outlineEffect = {
33
+ type: "opacity",
34
+ opacity: 0.32
35
+ };
36
+ var assertive = "#ff2b00";
37
+ var brand = "#0096fa";
38
+ var borderForLight = (0, import_polished.rgba)("#000000", 0.08);
39
+ var borderForDark = (0, import_polished.rgba)("#ffffff", 0.12);
40
+ var common = {
41
+ typography: {
42
+ size: import_foundation.TYPOGRAPHY_SIZE
43
+ },
44
+ spacing: import_foundation.SPACING,
45
+ grid: {
46
+ unit: {
47
+ column: import_foundation.COLUMN_UNIT,
48
+ gutter: import_foundation.GUTTER_UNIT
49
+ }
50
+ },
51
+ borderRadius: import_foundation.BORDER_RADIUS,
52
+ transition: {
53
+ default: {
54
+ duration: 0.2
55
+ }
56
+ },
57
+ breakpoint: {
58
+ screen1: import_foundation.BREAKPOINT[6],
59
+ screen2: import_foundation.BREAKPOINT[8],
60
+ screen3: import_foundation.BREAKPOINT[10],
61
+ screen4: import_foundation.BREAKPOINT[12]
62
+ },
63
+ gradientColor: {
64
+ surface5: [
65
+ { color: (0, import_polished.rgba)("#000000", 0.32), ratio: 0 },
66
+ { color: (0, import_polished.rgba)("#000000", 0), ratio: 100 }
67
+ ],
68
+ callToAction: [
69
+ { color: "#d1ff1a", ratio: 0 },
70
+ { color: "#1ad1ff", ratio: 100 }
71
+ ]
72
+ },
73
+ outline: {
74
+ default: {
75
+ color: (0, import_utils.applyEffect)(brand, outlineEffect),
76
+ weight: 4
77
+ },
78
+ assertive: {
79
+ color: (0, import_utils.applyEffect)(assertive, outlineEffect),
80
+ weight: 4
81
+ }
82
+ },
83
+ elementEffect: {
84
+ disabled: {
85
+ type: "opacity",
86
+ opacity: 0.32
87
+ }
88
+ }
89
+ };
90
+ var light = {
91
+ ...common,
92
+ effect: {
93
+ hover: {
94
+ type: "alpha",
95
+ color: (0, import_polished.rgba)("#000000", 0.04)
96
+ },
97
+ press: {
98
+ type: "alpha",
99
+ color: (0, import_polished.rgba)("#000000", 0.16)
100
+ }
101
+ },
102
+ color: {
103
+ transparent: (0, import_polished.rgba)("#000000", 0),
104
+ background1: "#ffffff",
105
+ background2: "#f5f5f5",
106
+ icon6: (0, import_polished.rgba)("#ffffff", 0.28),
107
+ link1: "#3d7699",
108
+ link2: (0, import_polished.rgba)("#ffffff", 0.36),
109
+ surface1: "#ffffff",
110
+ surface2: (0, import_polished.rgba)("#000000", 0.02),
111
+ surface3: (0, import_polished.rgba)("#000000", 0.04),
112
+ surface4: (0, import_polished.rgba)("#000000", 0.32),
113
+ surface6: (0, import_polished.rgba)("#000000", 0.88),
114
+ surface7: (0, import_polished.rgba)("#000000", 0.02),
115
+ surface8: (0, import_polished.rgba)("#000000", 0.88),
116
+ surface9: "#ffffff",
117
+ surface10: (0, import_polished.rgba)("#000000", 0.16),
118
+ text1: "#1f1f1f",
119
+ text2: "#474747",
120
+ text3: "#858585",
121
+ text4: "#adadad",
122
+ text5: "#ffffff",
123
+ brand,
124
+ assertive,
125
+ warning: "#ffaf0f",
126
+ success: "#b1cc29",
127
+ updatedItem: (0, import_polished.rgba)(0, 150, 250, 0.04),
128
+ border: borderForLight
129
+ },
130
+ border: {
131
+ default: {
132
+ color: borderForLight
133
+ }
134
+ }
135
+ };
136
+ var dark = {
137
+ ...common,
138
+ effect: {
139
+ hover: {
140
+ type: "alpha",
141
+ color: (0, import_polished.rgba)("#ffffff", 0.12)
142
+ },
143
+ press: {
144
+ type: "alpha",
145
+ color: (0, import_polished.rgba)("#ffffff", 0.2)
146
+ }
147
+ },
148
+ color: {
149
+ transparent: (0, import_polished.rgba)("#000000", 0),
150
+ background1: "#1f1f1f",
151
+ background2: "#000000",
152
+ icon6: light.color.icon6,
153
+ link1: "#669FC2",
154
+ link2: light.color.link2,
155
+ surface1: "#1f1f1f",
156
+ surface2: (0, import_polished.rgba)("#000000", 0.16),
157
+ surface3: (0, import_polished.rgba)("#ffffff", 0.12),
158
+ surface4: light.color.surface4,
159
+ surface6: (0, import_polished.rgba)("#ffffff", 0.12),
160
+ surface7: light.color.surface7,
161
+ surface8: light.color.surface8,
162
+ surface9: "#333333",
163
+ surface10: (0, import_polished.rgba)("#ffffff", 0.2),
164
+ text1: "#f5f5f5",
165
+ text2: "#d6d6d6",
166
+ text3: "#858585",
167
+ text4: "#5c5c5c",
168
+ text5: "#f5f5f5",
169
+ brand,
170
+ assertive,
171
+ warning: light.color.warning,
172
+ success: light.color.success,
173
+ updatedItem: (0, import_polished.rgba)(0, 150, 250, 0.12),
174
+ border: borderForDark
175
+ },
176
+ border: {
177
+ default: {
178
+ color: borderForDark
179
+ }
180
+ }
181
+ };
182
+ // Annotate the CommonJS export names for ESM import in node:
183
+ 0 && (module.exports = {
184
+ dark,
185
+ light
186
+ });
187
+ //# sourceMappingURL=index.cjs.js.map
package/dist/index.cjs.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/index.ts","../src/default.ts"],"sourcesContent":["export * from './theme'\nexport * from './abstract-theme'\nexport * from './default'\n","import { rgba } from 'polished'\nimport { CharcoalTheme } from './theme'\nimport {\n BORDER_RADIUS,\n BREAKPOINT,\n COLUMN_UNIT,\n GUTTER_UNIT,\n SPACING,\n TYPOGRAPHY_SIZE,\n} from '@charcoal-ui/foundation'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nconst outlineEffect = {\n type: 'opacity',\n opacity: 0.32,\n} as const\n\nconst assertive = '#ff2b00'\nconst brand = '#0096fa'\nconst borderForLight = rgba('#000000', 0.08)\nconst borderForDark = rgba('#ffffff', 0.12)\n\nconst common = {\n typography: {\n size: TYPOGRAPHY_SIZE,\n },\n spacing: SPACING,\n grid: {\n unit: {\n column: COLUMN_UNIT,\n gutter: GUTTER_UNIT,\n },\n },\n borderRadius: BORDER_RADIUS,\n transition: {\n default: {\n duration: 0.2,\n },\n },\n breakpoint: {\n screen1: BREAKPOINT[6],\n screen2: BREAKPOINT[8],\n screen3: BREAKPOINT[10],\n screen4: BREAKPOINT[12],\n },\n gradientColor: {\n surface5: [\n { color: rgba('#000000', 0.32), ratio: 0 },\n { color: rgba('#000000', 0), ratio: 100 },\n ],\n callToAction: [\n { color: '#d1ff1a', ratio: 0 },\n { color: '#1ad1ff', ratio: 100 },\n ],\n },\n outline: {\n default: {\n color: applyEffect(brand, outlineEffect),\n weight: 4,\n },\n assertive: {\n color: applyEffect(assertive, outlineEffect),\n weight: 4,\n },\n },\n elementEffect: {\n disabled: {\n type: 'opacity',\n opacity: 0.32,\n },\n },\n} as const\n\nexport const light: CharcoalTheme = {\n ...common,\n effect: {\n hover: {\n type: 'alpha',\n color: rgba('#000000', 0.04), // surface3\n },\n press: {\n type: 'alpha',\n color: rgba('#000000', 0.16), // surface10\n },\n },\n color: {\n // TODO: colors should be picked from foundation color palette\n transparent: rgba('#000000', 0),\n background1: '#ffffff',\n background2: '#f5f5f5',\n icon6: rgba('#ffffff', 0.28),\n link1: '#3d7699',\n link2: rgba('#ffffff', 0.36),\n surface1: '#ffffff',\n surface2: rgba('#000000', 0.02),\n surface3: rgba('#000000', 0.04),\n surface4: rgba('#000000', 0.32),\n surface6: rgba('#000000', 0.88),\n surface7: rgba('#000000', 0.02),\n surface8: rgba('#000000', 0.88),\n surface9: '#ffffff',\n surface10: rgba('#000000', 0.16),\n text1: '#1f1f1f',\n text2: '#474747',\n text3: '#858585',\n text4: '#adadad',\n text5: '#ffffff',\n brand,\n assertive,\n warning: '#ffaf0f',\n success: '#b1cc29',\n updatedItem: rgba(0, 150, 250, 0.04),\n border: borderForLight,\n },\n border: {\n default: {\n color: borderForLight,\n },\n },\n}\n\nexport const dark: CharcoalTheme = {\n ...common,\n effect: {\n hover: {\n type: 'alpha',\n color: rgba('#ffffff', 0.12), // surface3\n },\n press: {\n type: 'alpha',\n color: rgba('#ffffff', 0.2), // surface10\n },\n },\n color: {\n transparent: rgba('#000000', 0),\n background1: '#1f1f1f',\n background2: '#000000',\n icon6: light.color.icon6,\n link1: '#669FC2',\n link2: light.color.link2,\n surface1: '#1f1f1f',\n surface2: rgba('#000000', 0.16),\n surface3: rgba('#ffffff', 0.12),\n surface4: light.color.surface4,\n surface6: rgba('#ffffff', 0.12),\n surface7: light.color.surface7,\n surface8: light.color.surface8,\n surface9: '#333333',\n surface10: rgba('#ffffff', 0.2),\n text1: '#f5f5f5',\n text2: '#d6d6d6',\n text3: '#858585',\n text4: '#5c5c5c',\n text5: '#f5f5f5',\n brand,\n assertive,\n warning: light.color.warning,\n success: light.color.success,\n updatedItem: rgba(0, 150, 250, 0.12),\n border: borderForDark,\n },\n border: {\n default: {\n color: borderForDark,\n },\n },\n}\n"],"mappings":"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","names":[]}
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from './theme';
2
- export * from './abstract-theme';
3
- export * from './default';
1
+ export * from './theme';
2
+ export * from './abstract-theme';
3
+ export * from './default';
4
4
  //# sourceMappingURL=index.d.ts.map
package/dist/index.esm.js ADDED
@@ -0,0 +1,166 @@
1
+ // src/default.ts
2
+ import { rgba } from "polished";
3
+ import {
4
+ BORDER_RADIUS,
5
+ BREAKPOINT,
6
+ COLUMN_UNIT,
7
+ GUTTER_UNIT,
8
+ SPACING,
9
+ TYPOGRAPHY_SIZE
10
+ } from "@charcoal-ui/foundation";
11
+ import { applyEffect } from "@charcoal-ui/utils";
12
+ var outlineEffect = {
13
+ type: "opacity",
14
+ opacity: 0.32
15
+ };
16
+ var assertive = "#ff2b00";
17
+ var brand = "#0096fa";
18
+ var borderForLight = rgba("#000000", 0.08);
19
+ var borderForDark = rgba("#ffffff", 0.12);
20
+ var common = {
21
+ typography: {
22
+ size: TYPOGRAPHY_SIZE
23
+ },
24
+ spacing: SPACING,
25
+ grid: {
26
+ unit: {
27
+ column: COLUMN_UNIT,
28
+ gutter: GUTTER_UNIT
29
+ }
30
+ },
31
+ borderRadius: BORDER_RADIUS,
32
+ transition: {
33
+ default: {
34
+ duration: 0.2
35
+ }
36
+ },
37
+ breakpoint: {
38
+ screen1: BREAKPOINT[6],
39
+ screen2: BREAKPOINT[8],
40
+ screen3: BREAKPOINT[10],
41
+ screen4: BREAKPOINT[12]
42
+ },
43
+ gradientColor: {
44
+ surface5: [
45
+ { color: rgba("#000000", 0.32), ratio: 0 },
46
+ { color: rgba("#000000", 0), ratio: 100 }
47
+ ],
48
+ callToAction: [
49
+ { color: "#d1ff1a", ratio: 0 },
50
+ { color: "#1ad1ff", ratio: 100 }
51
+ ]
52
+ },
53
+ outline: {
54
+ default: {
55
+ color: applyEffect(brand, outlineEffect),
56
+ weight: 4
57
+ },
58
+ assertive: {
59
+ color: applyEffect(assertive, outlineEffect),
60
+ weight: 4
61
+ }
62
+ },
63
+ elementEffect: {
64
+ disabled: {
65
+ type: "opacity",
66
+ opacity: 0.32
67
+ }
68
+ }
69
+ };
70
+ var light = {
71
+ ...common,
72
+ effect: {
73
+ hover: {
74
+ type: "alpha",
75
+ color: rgba("#000000", 0.04)
76
+ },
77
+ press: {
78
+ type: "alpha",
79
+ color: rgba("#000000", 0.16)
80
+ }
81
+ },
82
+ color: {
83
+ transparent: rgba("#000000", 0),
84
+ background1: "#ffffff",
85
+ background2: "#f5f5f5",
86
+ icon6: rgba("#ffffff", 0.28),
87
+ link1: "#3d7699",
88
+ link2: rgba("#ffffff", 0.36),
89
+ surface1: "#ffffff",
90
+ surface2: rgba("#000000", 0.02),
91
+ surface3: rgba("#000000", 0.04),
92
+ surface4: rgba("#000000", 0.32),
93
+ surface6: rgba("#000000", 0.88),
94
+ surface7: rgba("#000000", 0.02),
95
+ surface8: rgba("#000000", 0.88),
96
+ surface9: "#ffffff",
97
+ surface10: rgba("#000000", 0.16),
98
+ text1: "#1f1f1f",
99
+ text2: "#474747",
100
+ text3: "#858585",
101
+ text4: "#adadad",
102
+ text5: "#ffffff",
103
+ brand,
104
+ assertive,
105
+ warning: "#ffaf0f",
106
+ success: "#b1cc29",
107
+ updatedItem: rgba(0, 150, 250, 0.04),
108
+ border: borderForLight
109
+ },
110
+ border: {
111
+ default: {
112
+ color: borderForLight
113
+ }
114
+ }
115
+ };
116
+ var dark = {
117
+ ...common,
118
+ effect: {
119
+ hover: {
120
+ type: "alpha",
121
+ color: rgba("#ffffff", 0.12)
122
+ },
123
+ press: {
124
+ type: "alpha",
125
+ color: rgba("#ffffff", 0.2)
126
+ }
127
+ },
128
+ color: {
129
+ transparent: rgba("#000000", 0),
130
+ background1: "#1f1f1f",
131
+ background2: "#000000",
132
+ icon6: light.color.icon6,
133
+ link1: "#669FC2",
134
+ link2: light.color.link2,
135
+ surface1: "#1f1f1f",
136
+ surface2: rgba("#000000", 0.16),
137
+ surface3: rgba("#ffffff", 0.12),
138
+ surface4: light.color.surface4,
139
+ surface6: rgba("#ffffff", 0.12),
140
+ surface7: light.color.surface7,
141
+ surface8: light.color.surface8,
142
+ surface9: "#333333",
143
+ surface10: rgba("#ffffff", 0.2),
144
+ text1: "#f5f5f5",
145
+ text2: "#d6d6d6",
146
+ text3: "#858585",
147
+ text4: "#5c5c5c",
148
+ text5: "#f5f5f5",
149
+ brand,
150
+ assertive,
151
+ warning: light.color.warning,
152
+ success: light.color.success,
153
+ updatedItem: rgba(0, 150, 250, 0.12),
154
+ border: borderForDark
155
+ },
156
+ border: {
157
+ default: {
158
+ color: borderForDark
159
+ }
160
+ }
161
+ };
162
+ export {
163
+ dark,
164
+ light
165
+ };
166
+ //# sourceMappingURL=index.esm.js.map
package/dist/index.esm.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/default.ts"],"sourcesContent":["import { rgba } from 'polished'\nimport { CharcoalTheme } from './theme'\nimport {\n BORDER_RADIUS,\n BREAKPOINT,\n COLUMN_UNIT,\n GUTTER_UNIT,\n SPACING,\n TYPOGRAPHY_SIZE,\n} from '@charcoal-ui/foundation'\nimport { applyEffect } from '@charcoal-ui/utils'\n\nconst outlineEffect = {\n type: 'opacity',\n opacity: 0.32,\n} as const\n\nconst assertive = '#ff2b00'\nconst brand = '#0096fa'\nconst borderForLight = rgba('#000000', 0.08)\nconst borderForDark = rgba('#ffffff', 0.12)\n\nconst common = {\n typography: {\n size: TYPOGRAPHY_SIZE,\n },\n spacing: SPACING,\n grid: {\n unit: {\n column: COLUMN_UNIT,\n gutter: GUTTER_UNIT,\n },\n },\n borderRadius: BORDER_RADIUS,\n transition: {\n default: {\n duration: 0.2,\n },\n },\n breakpoint: {\n screen1: BREAKPOINT[6],\n screen2: BREAKPOINT[8],\n screen3: BREAKPOINT[10],\n screen4: BREAKPOINT[12],\n },\n gradientColor: {\n surface5: [\n { color: rgba('#000000', 0.32), ratio: 0 },\n { color: rgba('#000000', 0), ratio: 100 },\n ],\n callToAction: [\n { color: '#d1ff1a', ratio: 0 },\n { color: '#1ad1ff', ratio: 100 },\n ],\n },\n outline: {\n default: {\n color: applyEffect(brand, outlineEffect),\n weight: 4,\n },\n assertive: {\n color: applyEffect(assertive, outlineEffect),\n weight: 4,\n },\n },\n elementEffect: {\n disabled: {\n type: 'opacity',\n opacity: 0.32,\n },\n },\n} as const\n\nexport const light: CharcoalTheme = {\n ...common,\n effect: {\n hover: {\n type: 'alpha',\n color: rgba('#000000', 0.04), // surface3\n },\n press: {\n type: 'alpha',\n color: rgba('#000000', 0.16), // surface10\n },\n },\n color: {\n // TODO: colors should be picked from foundation color palette\n transparent: rgba('#000000', 0),\n background1: '#ffffff',\n background2: '#f5f5f5',\n icon6: rgba('#ffffff', 0.28),\n link1: '#3d7699',\n link2: rgba('#ffffff', 0.36),\n surface1: '#ffffff',\n surface2: rgba('#000000', 0.02),\n surface3: rgba('#000000', 0.04),\n surface4: rgba('#000000', 0.32),\n surface6: rgba('#000000', 0.88),\n surface7: rgba('#000000', 0.02),\n surface8: rgba('#000000', 0.88),\n surface9: '#ffffff',\n surface10: rgba('#000000', 0.16),\n text1: '#1f1f1f',\n text2: '#474747',\n text3: '#858585',\n text4: '#adadad',\n text5: '#ffffff',\n brand,\n assertive,\n warning: '#ffaf0f',\n success: '#b1cc29',\n updatedItem: rgba(0, 150, 250, 0.04),\n border: borderForLight,\n },\n border: {\n default: {\n color: borderForLight,\n },\n },\n}\n\nexport const dark: CharcoalTheme = {\n ...common,\n effect: {\n hover: {\n type: 'alpha',\n color: rgba('#ffffff', 0.12), // surface3\n },\n press: {\n type: 'alpha',\n color: rgba('#ffffff', 0.2), // surface10\n },\n },\n color: {\n transparent: rgba('#000000', 0),\n background1: '#1f1f1f',\n background2: '#000000',\n icon6: light.color.icon6,\n link1: '#669FC2',\n link2: light.color.link2,\n surface1: '#1f1f1f',\n surface2: rgba('#000000', 0.16),\n surface3: rgba('#ffffff', 0.12),\n surface4: light.color.surface4,\n surface6: rgba('#ffffff', 0.12),\n surface7: light.color.surface7,\n surface8: light.color.surface8,\n surface9: '#333333',\n surface10: rgba('#ffffff', 0.2),\n text1: '#f5f5f5',\n text2: '#d6d6d6',\n text3: '#858585',\n text4: '#5c5c5c',\n text5: '#f5f5f5',\n brand,\n assertive,\n warning: light.color.warning,\n success: light.color.success,\n updatedItem: rgba(0, 150, 250, 0.12),\n border: borderForDark,\n },\n border: {\n default: {\n color: borderForDark,\n },\n },\n}\n"],"mappings":"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","names":[]}