@charcoal-ui/theme 3.5.0 → 3.6.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.
- package/dist/index.cjs.js +33 -27
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/package.json +4 -4
- package/src/default.ts +2 -2
- package/theme.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
18
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
25
|
|
|
20
26
|
// src/index.ts
|
|
@@ -26,7 +32,7 @@ __export(src_exports, {
|
|
|
26
32
|
module.exports = __toCommonJS(src_exports);
|
|
27
33
|
|
|
28
34
|
// src/default.ts
|
|
29
|
-
var
|
|
35
|
+
var import_rgba = __toESM(require("polished/lib/color/rgba"));
|
|
30
36
|
var import_foundation = require("@charcoal-ui/foundation");
|
|
31
37
|
var import_utils = require("@charcoal-ui/utils");
|
|
32
38
|
var outlineEffect = {
|
|
@@ -35,8 +41,8 @@ var outlineEffect = {
|
|
|
35
41
|
};
|
|
36
42
|
var assertive = "#ff2b00";
|
|
37
43
|
var brand = "#0096fa";
|
|
38
|
-
var borderForLight = (0,
|
|
39
|
-
var borderForDark = (0,
|
|
44
|
+
var borderForLight = (0, import_rgba.default)("#000000", 0.08);
|
|
45
|
+
var borderForDark = (0, import_rgba.default)("#ffffff", 0.12);
|
|
40
46
|
var common = {
|
|
41
47
|
typography: {
|
|
42
48
|
size: import_foundation.TYPOGRAPHY_SIZE
|
|
@@ -62,8 +68,8 @@ var common = {
|
|
|
62
68
|
},
|
|
63
69
|
gradientColor: {
|
|
64
70
|
surface5: [
|
|
65
|
-
{ color: (0,
|
|
66
|
-
{ color: (0,
|
|
71
|
+
{ color: (0, import_rgba.default)("#000000", 0.32), ratio: 0 },
|
|
72
|
+
{ color: (0, import_rgba.default)("#000000", 0), ratio: 100 }
|
|
67
73
|
],
|
|
68
74
|
callToAction: [
|
|
69
75
|
{ color: "#d1ff1a", ratio: 0 },
|
|
@@ -92,29 +98,29 @@ var light = {
|
|
|
92
98
|
effect: {
|
|
93
99
|
hover: {
|
|
94
100
|
type: "alpha",
|
|
95
|
-
color: (0,
|
|
101
|
+
color: (0, import_rgba.default)("#000000", 0.04)
|
|
96
102
|
},
|
|
97
103
|
press: {
|
|
98
104
|
type: "alpha",
|
|
99
|
-
color: (0,
|
|
105
|
+
color: (0, import_rgba.default)("#000000", 0.16)
|
|
100
106
|
}
|
|
101
107
|
},
|
|
102
108
|
color: {
|
|
103
|
-
transparent: (0,
|
|
109
|
+
transparent: (0, import_rgba.default)("#000000", 0),
|
|
104
110
|
background1: "#ffffff",
|
|
105
111
|
background2: "#f5f5f5",
|
|
106
|
-
icon6: (0,
|
|
112
|
+
icon6: (0, import_rgba.default)("#ffffff", 0.28),
|
|
107
113
|
link1: "#3d7699",
|
|
108
|
-
link2: (0,
|
|
114
|
+
link2: (0, import_rgba.default)("#ffffff", 0.36),
|
|
109
115
|
surface1: "#ffffff",
|
|
110
|
-
surface2: (0,
|
|
111
|
-
surface3: (0,
|
|
112
|
-
surface4: (0,
|
|
113
|
-
surface6: (0,
|
|
114
|
-
surface7: (0,
|
|
115
|
-
surface8: (0,
|
|
116
|
+
surface2: (0, import_rgba.default)("#000000", 0.02),
|
|
117
|
+
surface3: (0, import_rgba.default)("#000000", 0.04),
|
|
118
|
+
surface4: (0, import_rgba.default)("#000000", 0.32),
|
|
119
|
+
surface6: (0, import_rgba.default)("#000000", 0.88),
|
|
120
|
+
surface7: (0, import_rgba.default)("#000000", 0.02),
|
|
121
|
+
surface8: (0, import_rgba.default)("#000000", 0.88),
|
|
116
122
|
surface9: "#ffffff",
|
|
117
|
-
surface10: (0,
|
|
123
|
+
surface10: (0, import_rgba.default)("#000000", 0.16),
|
|
118
124
|
text1: "#1f1f1f",
|
|
119
125
|
text2: "#474747",
|
|
120
126
|
text3: "#858585",
|
|
@@ -124,7 +130,7 @@ var light = {
|
|
|
124
130
|
assertive,
|
|
125
131
|
warning: "#ffaf0f",
|
|
126
132
|
success: "#b1cc29",
|
|
127
|
-
updatedItem: (0,
|
|
133
|
+
updatedItem: (0, import_rgba.default)(0, 150, 250, 0.04),
|
|
128
134
|
border: borderForLight
|
|
129
135
|
},
|
|
130
136
|
border: {
|
|
@@ -138,29 +144,29 @@ var dark = {
|
|
|
138
144
|
effect: {
|
|
139
145
|
hover: {
|
|
140
146
|
type: "alpha",
|
|
141
|
-
color: (0,
|
|
147
|
+
color: (0, import_rgba.default)("#ffffff", 0.12)
|
|
142
148
|
},
|
|
143
149
|
press: {
|
|
144
150
|
type: "alpha",
|
|
145
|
-
color: (0,
|
|
151
|
+
color: (0, import_rgba.default)("#ffffff", 0.2)
|
|
146
152
|
}
|
|
147
153
|
},
|
|
148
154
|
color: {
|
|
149
|
-
transparent: (0,
|
|
155
|
+
transparent: (0, import_rgba.default)("#000000", 0),
|
|
150
156
|
background1: "#1f1f1f",
|
|
151
157
|
background2: "#000000",
|
|
152
158
|
icon6: light.color.icon6,
|
|
153
159
|
link1: "#669FC2",
|
|
154
160
|
link2: light.color.link2,
|
|
155
161
|
surface1: "#1f1f1f",
|
|
156
|
-
surface2: (0,
|
|
157
|
-
surface3: (0,
|
|
162
|
+
surface2: (0, import_rgba.default)("#000000", 0.16),
|
|
163
|
+
surface3: (0, import_rgba.default)("#ffffff", 0.12),
|
|
158
164
|
surface4: light.color.surface4,
|
|
159
|
-
surface6: (0,
|
|
160
|
-
surface7:
|
|
165
|
+
surface6: (0, import_rgba.default)("#ffffff", 0.12),
|
|
166
|
+
surface7: (0, import_rgba.default)("#000000", 0),
|
|
161
167
|
surface8: light.color.surface8,
|
|
162
168
|
surface9: "#333333",
|
|
163
|
-
surface10: (0,
|
|
169
|
+
surface10: (0, import_rgba.default)("#ffffff", 0.2),
|
|
164
170
|
text1: "#f5f5f5",
|
|
165
171
|
text2: "#d6d6d6",
|
|
166
172
|
text3: "#858585",
|
|
@@ -170,7 +176,7 @@ var dark = {
|
|
|
170
176
|
assertive,
|
|
171
177
|
warning: light.color.warning,
|
|
172
178
|
success: light.color.success,
|
|
173
|
-
updatedItem: (0,
|
|
179
|
+
updatedItem: (0, import_rgba.default)(0, 150, 250, 0.12),
|
|
174
180
|
border: borderForDark
|
|
175
181
|
},
|
|
176
182
|
border: {
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/default.ts"],"sourcesContent":["export * from './theme'\nexport * from './abstract-theme'\nexport * from './default'\n","import
|
|
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/lib/color/rgba'\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: rgba('#000000', 0),\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":["rgba"]}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/default.ts
|
|
2
|
-
import
|
|
2
|
+
import rgba from "polished/lib/color/rgba";
|
|
3
3
|
import {
|
|
4
4
|
BORDER_RADIUS,
|
|
5
5
|
BREAKPOINT,
|
|
@@ -137,7 +137,7 @@ var dark = {
|
|
|
137
137
|
surface3: rgba("#ffffff", 0.12),
|
|
138
138
|
surface4: light.color.surface4,
|
|
139
139
|
surface6: rgba("#ffffff", 0.12),
|
|
140
|
-
surface7:
|
|
140
|
+
surface7: rgba("#000000", 0),
|
|
141
141
|
surface8: light.color.surface8,
|
|
142
142
|
surface9: "#333333",
|
|
143
143
|
surface10: rgba("#ffffff", 0.2),
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/default.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"sources":["../src/default.ts"],"sourcesContent":["import rgba from 'polished/lib/color/rgba'\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: rgba('#000000', 0),\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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/theme",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"main": "./dist/index.cjs.js",
|
|
6
6
|
"module": "./dist/index.esm.js",
|
|
@@ -27,8 +27,8 @@
|
|
|
27
27
|
"typescript": "^4.9.5"
|
|
28
28
|
},
|
|
29
29
|
"dependencies": {
|
|
30
|
-
"@charcoal-ui/foundation": "^3.
|
|
31
|
-
"@charcoal-ui/utils": "^3.
|
|
30
|
+
"@charcoal-ui/foundation": "^3.6.0",
|
|
31
|
+
"@charcoal-ui/utils": "^3.6.0",
|
|
32
32
|
"polished": "^4.1.4"
|
|
33
33
|
},
|
|
34
34
|
"files": [
|
|
@@ -44,5 +44,5 @@
|
|
|
44
44
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
45
45
|
"directory": "packages/theme"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "a77b512ae91706be951d5e1fa12265522f1f54e4"
|
|
48
48
|
}
|
package/src/default.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import rgba from 'polished/lib/color/rgba'
|
|
2
2
|
import { CharcoalTheme } from './theme'
|
|
3
3
|
import {
|
|
4
4
|
BORDER_RADIUS,
|
|
@@ -143,7 +143,7 @@ export const dark: CharcoalTheme = {
|
|
|
143
143
|
surface3: rgba('#ffffff', 0.12),
|
|
144
144
|
surface4: light.color.surface4,
|
|
145
145
|
surface6: rgba('#ffffff', 0.12),
|
|
146
|
-
surface7:
|
|
146
|
+
surface7: rgba('#000000', 0),
|
|
147
147
|
surface8: light.color.surface8,
|
|
148
148
|
surface9: '#333333',
|
|
149
149
|
surface10: rgba('#ffffff', 0.2),
|