@charcoal-ui/theme 2.3.0 → 2.4.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 +1 -2
- package/dist/index.cjs.map +1 -1
- package/dist/index.modern.js +1 -2
- package/dist/index.modern.js.map +1 -1
- package/dist/index.module.js +1 -2
- package/dist/index.module.js.map +1 -1
- package/package.json +4 -4
package/dist/index.cjs
CHANGED
|
@@ -3,7 +3,7 @@ var foundation = require('@charcoal-ui/foundation');
|
|
|
3
3
|
var utils = require('@charcoal-ui/utils');
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
|
-
_extends = Object.assign
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
7
|
for (var i = 1; i < arguments.length; i++) {
|
|
8
8
|
var source = arguments[i];
|
|
9
9
|
|
|
@@ -16,7 +16,6 @@ function _extends() {
|
|
|
16
16
|
|
|
17
17
|
return target;
|
|
18
18
|
};
|
|
19
|
-
|
|
20
19
|
return _extends.apply(this, arguments);
|
|
21
20
|
}
|
|
22
21
|
|
package/dist/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"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"}
|
package/dist/index.modern.js
CHANGED
|
@@ -3,7 +3,7 @@ import { TYPOGRAPHY_SIZE, SPACING, COLUMN_UNIT, GUTTER_UNIT, BORDER_RADIUS, BREA
|
|
|
3
3
|
import { applyEffect } from '@charcoal-ui/utils';
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
|
-
_extends = Object.assign
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
7
|
for (var i = 1; i < arguments.length; i++) {
|
|
8
8
|
var source = arguments[i];
|
|
9
9
|
|
|
@@ -16,7 +16,6 @@ function _extends() {
|
|
|
16
16
|
|
|
17
17
|
return target;
|
|
18
18
|
};
|
|
19
|
-
|
|
20
19
|
return _extends.apply(this, arguments);
|
|
21
20
|
}
|
|
22
21
|
|
package/dist/index.modern.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.modern.js","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","default","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.modern.js","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","default","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"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"}
|
package/dist/index.module.js
CHANGED
|
@@ -3,7 +3,7 @@ import { TYPOGRAPHY_SIZE, SPACING, COLUMN_UNIT, GUTTER_UNIT, BORDER_RADIUS, BREA
|
|
|
3
3
|
import { applyEffect } from '@charcoal-ui/utils';
|
|
4
4
|
|
|
5
5
|
function _extends() {
|
|
6
|
-
_extends = Object.assign
|
|
6
|
+
_extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
7
7
|
for (var i = 1; i < arguments.length; i++) {
|
|
8
8
|
var source = arguments[i];
|
|
9
9
|
|
|
@@ -16,7 +16,6 @@ function _extends() {
|
|
|
16
16
|
|
|
17
17
|
return target;
|
|
18
18
|
};
|
|
19
|
-
|
|
20
19
|
return _extends.apply(this, arguments);
|
|
21
20
|
}
|
|
22
21
|
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.module.js","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.module.js","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"],"names":["outlineEffect","type","opacity","assertive","brand","borderForLight","rgba","borderForDark","common","typography","size","TYPOGRAPHY_SIZE","spacing","SPACING","grid","unit","column","COLUMN_UNIT","gutter","GUTTER_UNIT","borderRadius","BORDER_RADIUS","transition","duration","breakpoint","screen1","BREAKPOINT","screen2","screen3","screen4","gradientColor","surface5","color","ratio","callToAction","outline","applyEffect","weight","elementEffect","disabled","light","effect","hover","press","transparent","background1","background2","icon6","link1","link2","surface1","surface2","surface3","surface4","surface6","surface7","surface8","surface9","surface10","text1","text2","text3","text4","text5","warning","success","updatedItem","border","dark"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@charcoal-ui/theme",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.4.0",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"source": "./src/index.ts",
|
|
@@ -26,8 +26,8 @@
|
|
|
26
26
|
"typescript": "^4.5.5"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@charcoal-ui/foundation": "^2.
|
|
30
|
-
"@charcoal-ui/utils": "^2.
|
|
29
|
+
"@charcoal-ui/foundation": "^2.4.0",
|
|
30
|
+
"@charcoal-ui/utils": "^2.4.0",
|
|
31
31
|
"polished": "^4.1.4"
|
|
32
32
|
},
|
|
33
33
|
"files": [
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"url": "https://github.com/pixiv/charcoal.git",
|
|
44
44
|
"directory": "packages/theme"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "db58bc1a8e14d5f1ccb6e1e275fa29cfb3ec4972"
|
|
47
47
|
}
|