@omegagrid/core 0.9.26 → 0.9.27
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/themes/helpers.js
CHANGED
|
@@ -14,7 +14,7 @@ export function createThemeVariables(theme) {
|
|
|
14
14
|
vars.set(`--${constants.PREFIX}-${k}`, definition[k]);
|
|
15
15
|
}
|
|
16
16
|
transformations.forEach(t => {
|
|
17
|
-
const tranformedValue = t.transform(definition[t.from]);
|
|
17
|
+
const tranformedValue = t.transform(definition[t.from], theme);
|
|
18
18
|
definition[t.to] = tranformedValue;
|
|
19
19
|
vars.set(`--${constants.PREFIX}-${t.to}`, tranformedValue);
|
|
20
20
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/themes/helpers.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAa,SAAS,EAAE,MAAM,KAAK,CAAC;AAE3C,MAAM,UAAU,eAAe;IAC9B,OAAO,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAC1G,CAAC;AAGD,MAAM,UAAU,oBAAoB,CAAC,KAAY;IAChD,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;IACvC,MAAM,UAAU,GAAG,EAAC,GAAG,KAAK,CAAC,UAAU,EAAC,CAAC;IAEzC,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACvB,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,CAAC;IAED,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAC3B,MAAM,eAAe,GAAG,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/themes/helpers.ts"],"names":[],"mappings":"AACA,OAAO,SAAS,MAAM,cAAc,CAAC;AACrC,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAa,SAAS,EAAE,MAAM,KAAK,CAAC;AAE3C,MAAM,UAAU,eAAe;IAC9B,OAAO,MAAM,CAAC,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAC1G,CAAC;AAGD,MAAM,UAAU,oBAAoB,CAAC,KAAY;IAChD,MAAM,IAAI,GAAG,IAAI,GAAG,EAAkB,CAAC;IACvC,MAAM,UAAU,GAAG,EAAC,GAAG,KAAK,CAAC,UAAU,EAAC,CAAC;IAEzC,IAAI,KAAK,CAAC,WAAW,EAAE,CAAC;QACvB,UAAU,CAAC,cAAc,CAAC,GAAG,KAAK,CAAC,WAAW,CAAC;IAChD,CAAC;IAED,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE,CAAC;QAC5B,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,MAAM,IAAI,CAAC,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,eAAe,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;QAC3B,MAAM,eAAe,GAAG,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;QAC/D,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,eAAe,CAAC;QACnC,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,MAAM,IAAI,CAAC,CAAC,EAAE,EAAE,EAAE,eAAe,CAAC,CAAC;IAC5D,CAAC,CAAC,CAAC;IAEH,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,MAAM,KAAK,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IACnF,IAAI,CAAC,GAAG,CAAC,KAAK,SAAS,CAAC,MAAM,cAAc,EAAE,KAAK,CAAC,IAAI,IAAI,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAE5F,OAAO,IAAI,CAAC;AACb,CAAC;AAED,MAAM,UAAW,uBAAuB,CAAC,KAAY;IACpD,MAAM,IAAI,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACzC,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACvE,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC;AACvB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAA0B,EAAE,SAAyB;IACtF,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;IACrD,OAAO,KAAK,CAAC;AACd,CAAC","sourcesContent":["import { Theme, ThemeType, ThemeVariables } from \"../types\";\nimport constants from \"../constants\";\nimport transformations from \"./transformations\";\nimport { CSSResult, unsafeCSS } from \"lit\";\n\nexport function detectThemeType(): ThemeType {\n\treturn window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n}\n\n\nexport function createThemeVariables(theme: Theme) : ThemeVariables {\n\tconst vars = new Map<string, string>();\n\tconst definition = {...theme.definition};\n\n\tif (theme.accentColor) {\n\t\tdefinition['accent-color'] = theme.accentColor;\n\t}\n\n\tfor (const k in definition) {\n\t\tvars.set(`--${constants.PREFIX}-${k}`, definition[k]);\n\t}\n\n\ttransformations.forEach(t => {\n\t\tconst tranformedValue = t.transform(definition[t.from], theme);\n\t\tdefinition[t.to] = tranformedValue;\n\t\tvars.set(`--${constants.PREFIX}-${t.to}`, tranformedValue);\n\t});\n\n\tvars.set(`--${constants.PREFIX}-bw`, theme.type == 'dark' ? '#000000' : '#ffffff');\n\tvars.set(`--${constants.PREFIX}-bw-inverted`, theme.type == 'dark' ? '#ffffff' : '#000000');\n\n\treturn vars;\n}\n\nexport function createThemeVariablesCss(theme: Theme) : CSSResult {\n\tconst vars = createThemeVariables(theme);\n\tconst css = Array.from(vars).map(([k, v]) => `${k}: ${v};`).join(\"\\n\");\n\treturn unsafeCSS(css);\n}\n\nexport function addThemeVariables(style: CSSStyleDeclaration, variables: ThemeVariables) {\n\tvariables.forEach((v, k) => style.setProperty(k, v));\n\treturn style;\n}\n"]}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
+
import { Theme } from "../types";
|
|
2
|
+
type TransformFunction = (v: string, theme: Theme) => string;
|
|
1
3
|
declare const transformations: {
|
|
2
4
|
from: string;
|
|
3
5
|
to: string;
|
|
4
|
-
transform:
|
|
6
|
+
transform: TransformFunction;
|
|
5
7
|
}[];
|
|
6
8
|
export default transformations;
|
|
7
9
|
//# sourceMappingURL=transformations.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transformations.d.ts","sourceRoot":"","sources":["../../src/themes/transformations.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"transformations.d.ts","sourceRoot":"","sources":["../../src/themes/transformations.ts"],"names":[],"mappings":"AACA,OAAO,EAAc,KAAK,EAAE,MAAM,UAAU,CAAC;AAI7C,KAAK,iBAAiB,GAAG,CAAC,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,KAAK,MAAM,CAAC;AAE7D,QAAA,MAAM,eAAe,EAAE;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,iBAAiB,CAAA;CAC5B,EA0CI,CAAC;AAEN,eAAe,eAAe,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { alpha, darken } from "../common/colors";
|
|
1
|
+
import { alpha, darken, lighten } from "../common/colors";
|
|
2
2
|
import { ColorTypes } from "../types";
|
|
3
3
|
const scale = Array.from({ length: 19 }, (_, i) => (i + 1) * 5);
|
|
4
4
|
const transformations = [{
|
|
@@ -33,6 +33,16 @@ const transformations = [{
|
|
|
33
33
|
from: `colortype-${clr}-background-color`,
|
|
34
34
|
to: `colortype-${clr}-background-color-dark-${amount}`,
|
|
35
35
|
transform: (v) => darken(v, amount / 100)
|
|
36
|
+
}))), ...Object.values(ColorTypes).flatMap(clr => scale.map(amount => ({
|
|
37
|
+
from: `colortype-${clr}-background-color`,
|
|
38
|
+
to: `colortype-${clr}-background-color-light-${amount}`,
|
|
39
|
+
transform: (v) => lighten(v, amount / 100)
|
|
40
|
+
}))), ...Object.values(ColorTypes).flatMap(clr => scale.map(amount => ({
|
|
41
|
+
from: `colortype-${clr}-background-color`,
|
|
42
|
+
to: `colortype-${clr}-background-color-soft-${amount}`,
|
|
43
|
+
transform: (v, theme) => theme.type === 'dark' // darker for dark themes, lighter for light themes
|
|
44
|
+
? darken(v, amount / 100)
|
|
45
|
+
: lighten(v, amount / 100)
|
|
36
46
|
})))];
|
|
37
47
|
export default transformations;
|
|
38
48
|
//# sourceMappingURL=transformations.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"transformations.js","sourceRoot":"","sources":["../../src/themes/transformations.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"transformations.js","sourceRoot":"","sources":["../../src/themes/transformations.ts"],"names":[],"mappings":"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","sourcesContent":["import { alpha, darken, lighten } from \"../common/colors\";\nimport { ColorTypes, Theme } from \"../types\";\n\nconst scale = Array.from({ length: 19 }, (_, i) => (i + 1) * 5);\n\ntype TransformFunction = (v: string, theme: Theme) => string;\n\nconst transformations: {\n\tfrom: string, \n\tto: string, \n\ttransform: TransformFunction\n}[] = [{\n\tfrom: `accent-color`,\n\tto: `colortype-accent-background-color`,\n\ttransform: (v: string) => v\n}, {\n\tfrom: `accent-color`,\n\tto: `colortype-accent-border-color`,\n\ttransform: (v: string) => v //lighten(v, 0.3)\n}, {\n\tfrom: `accent-color`,\n\tto: `accent-color-alpha`,\n\ttransform: (v: string) => alpha(v)\n}, {\n\tfrom: `accent-color`,\n\tto: `accent-color-alpha-15`,\n\ttransform: (v: string) => alpha(v, 0.15)\n}, {\n\tfrom: `accent-color`,\n\tto: `accent-color-alpha-30`,\n\ttransform: (v: string) => alpha(v, 0.30)\n}, {\n\tfrom: `accent-color`,\n\tto: `accent-color-alpha-70`,\n\ttransform: (v: string) => alpha(v, 0.70)\n}, {\n\tfrom: `accent-color`,\n\tto: `accent-color-highlight`,\n\ttransform: (v: string) => darken(v)\n}, ...Object.values(ColorTypes).flatMap(clr =>scale.map(amount => ({\n\tfrom: `colortype-${clr}-background-color`,\n\tto: `colortype-${clr}-background-color-dark-${amount}`,\n\ttransform: (v: string) => darken(v, amount / 100)\n}))), ...Object.values(ColorTypes).flatMap(clr =>scale.map(amount => ({\n\tfrom: `colortype-${clr}-background-color`,\n\tto: `colortype-${clr}-background-color-light-${amount}`,\n\ttransform: (v: string) => lighten(v, amount / 100)\n}))), ...Object.values(ColorTypes).flatMap(clr =>scale.map(amount => ({\n\tfrom: `colortype-${clr}-background-color`,\n\tto: `colortype-${clr}-background-color-soft-${amount}`,\n\ttransform: (v: string, theme: Theme) => theme.type === 'dark' // darker for dark themes, lighter for light themes\n\t\t? darken(v, amount / 100) \n\t\t: lighten(v, amount / 100)\n})))];\n\nexport default transformations;"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@omegagrid/core",
|
|
3
|
-
"version": "0.9.
|
|
3
|
+
"version": "0.9.27",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"description": "Core components",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -36,7 +36,7 @@
|
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
38
|
"@fortawesome/fontawesome-svg-core": "^7.0.1",
|
|
39
|
-
"@omegagrid/localize": "^0.9.
|
|
39
|
+
"@omegagrid/localize": "^0.9.27",
|
|
40
40
|
"color": "^4.2.3",
|
|
41
41
|
"date-fns": "^3.2.0",
|
|
42
42
|
"lit": "^3.1.1",
|