@activecollab/components 2.0.380 → 2.0.381
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/cjs/utils/themes.js +3 -3
- package/dist/cjs/utils/themes.js.map +1 -1
- package/dist/cjs/utils/themes.swatch.test.js +1 -1
- package/dist/cjs/utils/themes.swatch.test.js.map +1 -1
- package/dist/esm/utils/themes.js +3 -3
- package/dist/esm/utils/themes.js.map +1 -1
- package/dist/esm/utils/themes.swatch.test.js +1 -1
- package/dist/esm/utils/themes.swatch.test.js.map +1 -1
- package/dist/index.js +3 -3
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/utils/themes.js
CHANGED
|
@@ -17,7 +17,7 @@ var THEMES = exports.THEMES = [{
|
|
|
17
17
|
name: "cupcake",
|
|
18
18
|
title: "Cupcake",
|
|
19
19
|
dark: false,
|
|
20
|
-
swatch: ["#
|
|
20
|
+
swatch: ["#fe6fa7", "#29bcdd", "#f4f5f7"]
|
|
21
21
|
}, {
|
|
22
22
|
name: "classic",
|
|
23
23
|
title: "Classic",
|
|
@@ -32,12 +32,12 @@ var THEMES = exports.THEMES = [{
|
|
|
32
32
|
name: "dracula",
|
|
33
33
|
title: "Dracula",
|
|
34
34
|
dark: true,
|
|
35
|
-
swatch: ["#
|
|
35
|
+
swatch: ["#ff79c6", "#bd93f9", "#282a36"]
|
|
36
36
|
}, {
|
|
37
37
|
name: "one-dark",
|
|
38
38
|
title: "One Dark",
|
|
39
39
|
dark: true,
|
|
40
|
-
swatch: ["#
|
|
40
|
+
swatch: ["#c678dd", "#61afef", "#282c34"]
|
|
41
41
|
}];
|
|
42
42
|
var THEME_NAMES = exports.THEME_NAMES = THEMES.map(function (theme) {
|
|
43
43
|
return theme.name;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","names":["THEMES","exports","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","concat","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [
|
|
1
|
+
{"version":3,"file":"themes.js","names":["THEMES","exports","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","concat","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [secondary, primary, page background] — accents lead so the swatch reads as the theme's colour.\n // Mirrors GlobalStyle; themes.swatch.test.ts fails if the two drift apart.\n swatch: [string, string, string];\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n {\n name: \"indigo\",\n title: \"Indigo\",\n dark: false,\n swatch: [\"#5d2bff\", \"#5d2bff\", \"#f4f5f7\"],\n },\n {\n name: \"cupcake\",\n title: \"Cupcake\",\n dark: false,\n swatch: [\"#fe6fa7\", \"#29bcdd\", \"#f4f5f7\"],\n },\n {\n name: \"classic\",\n title: \"Classic\",\n dark: false,\n swatch: [\"#4182f2\", \"#4182f2\", \"#f4f5f7\"],\n },\n {\n name: \"neon\",\n title: \"Neon\",\n dark: true,\n swatch: [\"#67ffc8\", \"#67ffc8\", \"#2c2e38\"],\n },\n {\n name: \"dracula\",\n title: \"Dracula\",\n dark: true,\n swatch: [\"#ff79c6\", \"#bd93f9\", \"#282a36\"],\n },\n {\n name: \"one-dark\",\n title: \"One Dark\",\n dark: true,\n swatch: [\"#c678dd\", \"#61afef\", \"#282c34\"],\n },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const LIGHT_THEME_NAMES = THEMES.filter((theme) => !theme.dark).map(\n (theme) => theme.name\n);\n\nexport const DEFAULT_THEME = \"indigo\";\nexport const DEFAULT_DARK_THEME = \"neon\";\n\nexport const THEME_MODE_SINGLE = \"single\";\nexport const THEME_MODE_SYSTEM = \"system\";\n\nexport interface ThemeSelection {\n mode?: string | null;\n theme?: string | null;\n themeLight?: string | null;\n themeDark?: string | null;\n}\n\nexport const isDarkTheme = (name?: string | null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\nconst knownTheme = (\n name: string | null | undefined,\n fallback: string\n): string => (name && THEME_NAMES.includes(name) ? name : fallback);\n\n// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.\nexport const resolveTheme = (\n { mode, theme, themeLight, themeDark }: ThemeSelection,\n prefersDark: boolean\n): string => {\n if (mode !== THEME_MODE_SYSTEM) {\n return knownTheme(theme, DEFAULT_THEME);\n }\n\n return prefersDark\n ? knownTheme(themeDark, DEFAULT_DARK_THEME)\n : knownTheme(themeLight, DEFAULT_THEME);\n};\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `*${DARK_THEME_MATCH}`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -4,7 +4,7 @@ var _fs = require("fs");
|
|
|
4
4
|
var _path = require("path");
|
|
5
5
|
var _themes = require("./themes");
|
|
6
6
|
var GLOBAL_STYLE = (0, _fs.readFileSync)((0, _path.join)(__dirname, "../components/GlobalStyle.ts"), "utf-8");
|
|
7
|
-
var SWATCH_VARS = ["color-
|
|
7
|
+
var SWATCH_VARS = ["color-secondary", "color-primary", "body-bg-main"];
|
|
8
8
|
var collectBlocks = function collectBlocks(selector) {
|
|
9
9
|
var re = new RegExp("".concat(selector, "\\s*\\{([^}]*)\\}"), "g");
|
|
10
10
|
var declarations = "";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.swatch.test.js","names":["_fs","require","_path","_themes","GLOBAL_STYLE","readFileSync","join","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","concat","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","THEMES","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-
|
|
1
|
+
{"version":3,"file":"themes.swatch.test.js","names":["_fs","require","_path","_themes","GLOBAL_STYLE","readFileSync","join","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","concat","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","THEMES","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-secondary\", \"color-primary\", \"body-bg-main\"];\n\nconst collectBlocks = (selector: string): string => {\n const re = new RegExp(`${selector}\\\\s*\\\\{([^}]*)\\\\}`, \"g\");\n let declarations = \"\";\n let match;\n while ((match = re.exec(GLOBAL_STYLE))) declarations += `${match[1]};`;\n return declarations;\n};\n\nconst readVar = (block: string, name: string): string | undefined =>\n block.match(new RegExp(`--${name}\\\\s*:\\\\s*([^;}]+)`))?.[1].trim();\n\nconst toHex = (value: string): string => {\n const rgb = value.match(/rgb\\(\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\\s*\\)/);\n if (!rgb) return value.toLowerCase();\n return `#${rgb\n .slice(1)\n .map((channel) => Number(channel).toString(16).padStart(2, \"0\"))\n .join(\"\")}`;\n};\n\n// indigo has no class block of its own — it is the :root default every other theme overrides.\nconst declarationsFor = (name: string): string =>\n (name === \"indigo\" ? \"\" : collectBlocks(`\\\\.${name}`)) +\n collectBlocks(\":root\");\n\ndescribe(\"theme swatches\", () => {\n it(\"should match the colours GlobalStyle defines for each theme\", () => {\n const fromStylesheet = THEMES.map(({ name }) => {\n const block = declarationsFor(name);\n return [\n name,\n SWATCH_VARS.map((cssVar) => toHex(readVar(block, cssVar) as string)),\n ];\n });\n\n expect(fromStylesheet).toEqual(\n THEMES.map(({ name, swatch }) => [name, swatch])\n );\n });\n});\n"],"mappings":";;AAAA,IAAAA,GAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAEA,IAAAE,OAAA,GAAAF,OAAA;AAEA,IAAMG,YAAY,GAAG,IAAAC,gBAAY,EAC/B,IAAAC,UAAI,EAACC,SAAS,EAAE,8BAA8B,CAAC,EAC/C,OACF,CAAC;AAED,IAAMC,WAAW,GAAG,CAAC,iBAAiB,EAAE,eAAe,EAAE,cAAc,CAAC;AAExE,IAAMC,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,QAAgB,EAAa;EAClD,IAAMC,EAAE,GAAG,IAAIC,MAAM,IAAAC,MAAA,CAAIH,QAAQ,wBAAqB,GAAG,CAAC;EAC1D,IAAII,YAAY,GAAG,EAAE;EACrB,IAAIC,KAAK;EACT,OAAQA,KAAK,GAAGJ,EAAE,CAACK,IAAI,CAACZ,YAAY,CAAC,EAAGU,YAAY,OAAAD,MAAA,CAAOE,KAAK,CAAC,CAAC,CAAC,MAAG;EACtE,OAAOD,YAAY;AACrB,CAAC;AAED,IAAMG,OAAO,GAAG,SAAVA,OAAOA,CAAIC,KAAa,EAAEC,IAAY;EAAA,IAAAC,YAAA;EAAA,QAAAA,YAAA,GAC1CF,KAAK,CAACH,KAAK,CAAC,IAAIH,MAAM,MAAAC,MAAA,CAAMM,IAAI,sBAAmB,CAAC,CAAC,cAAAC,YAAA,uBAArDA,YAAA,CAAwD,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;AAAA;AAEnE,IAAMC,KAAK,GAAG,SAARA,KAAKA,CAAIC,KAAa,EAAa;EACvC,IAAMC,GAAG,GAAGD,KAAK,CAACR,KAAK,CAAC,0CAA0C,CAAC;EACnE,IAAI,CAACS,GAAG,EAAE,OAAOD,KAAK,CAACE,WAAW,CAAC,CAAC;EACpC,WAAAZ,MAAA,CAAWW,GAAG,CACXE,KAAK,CAAC,CAAC,CAAC,CACRC,GAAG,CAAC,UAACC,OAAO;IAAA,OAAKC,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAAA,EAAC,CAC/DzB,IAAI,CAAC,EAAE,CAAC;AACb,CAAC;;AAED;AACA,IAAM0B,eAAe,GAAG,SAAlBA,eAAeA,CAAIb,IAAY;EAAA,OACnC,CAACA,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAGV,aAAa,OAAAI,MAAA,CAAOM,IAAI,CAAE,CAAC,IACrDV,aAAa,CAAC,OAAO,CAAC;AAAA;AAExBwB,QAAQ,CAAC,gBAAgB,EAAE,YAAM;EAC/BC,EAAE,CAAC,6DAA6D,EAAE,YAAM;IACtE,IAAMC,cAAc,GAAGC,cAAM,CAACT,GAAG,CAAC,UAAAU,IAAA,EAAc;MAAA,IAAXlB,IAAI,GAAAkB,IAAA,CAAJlB,IAAI;MACvC,IAAMD,KAAK,GAAGc,eAAe,CAACb,IAAI,CAAC;MACnC,OAAO,CACLA,IAAI,EACJX,WAAW,CAACmB,GAAG,CAAC,UAACW,MAAM;QAAA,OAAKhB,KAAK,CAACL,OAAO,CAACC,KAAK,EAAEoB,MAAM,CAAW,CAAC;MAAA,EAAC,CACrE;IACH,CAAC,CAAC;IAEFC,MAAM,CAACJ,cAAc,CAAC,CAACK,OAAO,CAC5BJ,cAAM,CAACT,GAAG,CAAC,UAAAc,KAAA;MAAA,IAAGtB,IAAI,GAAAsB,KAAA,CAAJtB,IAAI;QAAEuB,MAAM,GAAAD,KAAA,CAANC,MAAM;MAAA,OAAO,CAACvB,IAAI,EAAEuB,MAAM,CAAC;IAAA,EACjD,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
package/dist/esm/utils/themes.js
CHANGED
|
@@ -11,7 +11,7 @@ export const THEMES = [{
|
|
|
11
11
|
name: "cupcake",
|
|
12
12
|
title: "Cupcake",
|
|
13
13
|
dark: false,
|
|
14
|
-
swatch: ["#
|
|
14
|
+
swatch: ["#fe6fa7", "#29bcdd", "#f4f5f7"]
|
|
15
15
|
}, {
|
|
16
16
|
name: "classic",
|
|
17
17
|
title: "Classic",
|
|
@@ -26,12 +26,12 @@ export const THEMES = [{
|
|
|
26
26
|
name: "dracula",
|
|
27
27
|
title: "Dracula",
|
|
28
28
|
dark: true,
|
|
29
|
-
swatch: ["#
|
|
29
|
+
swatch: ["#ff79c6", "#bd93f9", "#282a36"]
|
|
30
30
|
}, {
|
|
31
31
|
name: "one-dark",
|
|
32
32
|
title: "One Dark",
|
|
33
33
|
dark: true,
|
|
34
|
-
swatch: ["#
|
|
34
|
+
swatch: ["#c678dd", "#61afef", "#282c34"]
|
|
35
35
|
}];
|
|
36
36
|
export const THEME_NAMES = THEMES.map(theme => theme.name);
|
|
37
37
|
export const DARK_THEME_NAMES = THEMES.filter(theme => theme.dark).map(theme => theme.name);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.js","names":["THEMES","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [
|
|
1
|
+
{"version":3,"file":"themes.js","names":["THEMES","name","title","dark","swatch","THEME_NAMES","map","theme","DARK_THEME_NAMES","filter","LIGHT_THEME_NAMES","DEFAULT_THEME","DEFAULT_DARK_THEME","THEME_MODE_SINGLE","THEME_MODE_SYSTEM","isDarkTheme","Boolean","includes","knownTheme","fallback","resolveTheme","_ref","prefersDark","mode","themeLight","themeDark","DARK_THEME_MATCH","join","DARK_THEME_SELECTOR"],"sources":["../../../src/utils/themes.ts"],"sourcesContent":["// Single source of truth for theme identity. The theme name is the only class put on <html>;\n// styling that targets \"any dark theme\" uses DARK_THEME_SELECTOR, which is derived from this list\n// so a new theme never needs the selector updating by hand.\nexport interface ThemeDescriptor {\n name: string;\n title: string;\n dark: boolean;\n // [secondary, primary, page background] — accents lead so the swatch reads as the theme's colour.\n // Mirrors GlobalStyle; themes.swatch.test.ts fails if the two drift apart.\n swatch: [string, string, string];\n}\n\nexport const THEMES: ThemeDescriptor[] = [\n {\n name: \"indigo\",\n title: \"Indigo\",\n dark: false,\n swatch: [\"#5d2bff\", \"#5d2bff\", \"#f4f5f7\"],\n },\n {\n name: \"cupcake\",\n title: \"Cupcake\",\n dark: false,\n swatch: [\"#fe6fa7\", \"#29bcdd\", \"#f4f5f7\"],\n },\n {\n name: \"classic\",\n title: \"Classic\",\n dark: false,\n swatch: [\"#4182f2\", \"#4182f2\", \"#f4f5f7\"],\n },\n {\n name: \"neon\",\n title: \"Neon\",\n dark: true,\n swatch: [\"#67ffc8\", \"#67ffc8\", \"#2c2e38\"],\n },\n {\n name: \"dracula\",\n title: \"Dracula\",\n dark: true,\n swatch: [\"#ff79c6\", \"#bd93f9\", \"#282a36\"],\n },\n {\n name: \"one-dark\",\n title: \"One Dark\",\n dark: true,\n swatch: [\"#c678dd\", \"#61afef\", \"#282c34\"],\n },\n];\n\nexport const THEME_NAMES = THEMES.map((theme) => theme.name);\n\nexport const DARK_THEME_NAMES = THEMES.filter((theme) => theme.dark).map(\n (theme) => theme.name\n);\n\nexport const LIGHT_THEME_NAMES = THEMES.filter((theme) => !theme.dark).map(\n (theme) => theme.name\n);\n\nexport const DEFAULT_THEME = \"indigo\";\nexport const DEFAULT_DARK_THEME = \"neon\";\n\nexport const THEME_MODE_SINGLE = \"single\";\nexport const THEME_MODE_SYSTEM = \"system\";\n\nexport interface ThemeSelection {\n mode?: string | null;\n theme?: string | null;\n themeLight?: string | null;\n themeDark?: string | null;\n}\n\nexport const isDarkTheme = (name?: string | null): boolean =>\n Boolean(name) && DARK_THEME_NAMES.includes(name as string);\n\nconst knownTheme = (\n name: string | null | undefined,\n fallback: string\n): string => (name && THEME_NAMES.includes(name) ? name : fallback);\n\n// Resolution is derived per render, never persisted — writing it back would destroy the user's pick.\nexport const resolveTheme = (\n { mode, theme, themeLight, themeDark }: ThemeSelection,\n prefersDark: boolean\n): string => {\n if (mode !== THEME_MODE_SYSTEM) {\n return knownTheme(theme, DEFAULT_THEME);\n }\n\n return prefersDark\n ? knownTheme(themeDark, DEFAULT_DARK_THEME)\n : knownTheme(themeLight, DEFAULT_THEME);\n};\n\n// :is() and not :where() — :where() is zero-specificity and would silently lose to the light\n// declarations it is meant to override.\n\n// Compound onto an element that carries the theme class itself: `html${DARK_THEME_MATCH}`.\nexport const DARK_THEME_MATCH = `:is(${DARK_THEME_NAMES.map(\n (name) => `.${name}`\n).join(\", \")})`;\n\n// Stand-alone ancestor selector: `${DARK_THEME_SELECTOR} &`. The leading `*` adds no specificity\n// but stops stylis from reading a leading `:` as \"attach to the parent\" and gluing it onto `&`.\nexport const DARK_THEME_SELECTOR = `*${DARK_THEME_MATCH}`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import { readFileSync } from "fs";
|
|
|
2
2
|
import { join } from "path";
|
|
3
3
|
import { THEMES } from "./themes";
|
|
4
4
|
const GLOBAL_STYLE = readFileSync(join(__dirname, "../components/GlobalStyle.ts"), "utf-8");
|
|
5
|
-
const SWATCH_VARS = ["color-
|
|
5
|
+
const SWATCH_VARS = ["color-secondary", "color-primary", "body-bg-main"];
|
|
6
6
|
const collectBlocks = selector => {
|
|
7
7
|
const re = new RegExp(selector + "\\s*\\{([^}]*)\\}", "g");
|
|
8
8
|
let declarations = "";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"themes.swatch.test.js","names":["readFileSync","join","THEMES","GLOBAL_STYLE","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-
|
|
1
|
+
{"version":3,"file":"themes.swatch.test.js","names":["readFileSync","join","THEMES","GLOBAL_STYLE","__dirname","SWATCH_VARS","collectBlocks","selector","re","RegExp","declarations","match","exec","readVar","block","name","_block$match","trim","toHex","value","rgb","toLowerCase","slice","map","channel","Number","toString","padStart","declarationsFor","describe","it","fromStylesheet","_ref","cssVar","expect","toEqual","_ref2","swatch"],"sources":["../../../src/utils/themes.swatch.test.ts"],"sourcesContent":["import { readFileSync } from \"fs\";\nimport { join } from \"path\";\n\nimport { THEMES } from \"./themes\";\n\nconst GLOBAL_STYLE = readFileSync(\n join(__dirname, \"../components/GlobalStyle.ts\"),\n \"utf-8\"\n);\n\nconst SWATCH_VARS = [\"color-secondary\", \"color-primary\", \"body-bg-main\"];\n\nconst collectBlocks = (selector: string): string => {\n const re = new RegExp(`${selector}\\\\s*\\\\{([^}]*)\\\\}`, \"g\");\n let declarations = \"\";\n let match;\n while ((match = re.exec(GLOBAL_STYLE))) declarations += `${match[1]};`;\n return declarations;\n};\n\nconst readVar = (block: string, name: string): string | undefined =>\n block.match(new RegExp(`--${name}\\\\s*:\\\\s*([^;}]+)`))?.[1].trim();\n\nconst toHex = (value: string): string => {\n const rgb = value.match(/rgb\\(\\s*(\\d+)[,\\s]+(\\d+)[,\\s]+(\\d+)\\s*\\)/);\n if (!rgb) return value.toLowerCase();\n return `#${rgb\n .slice(1)\n .map((channel) => Number(channel).toString(16).padStart(2, \"0\"))\n .join(\"\")}`;\n};\n\n// indigo has no class block of its own — it is the :root default every other theme overrides.\nconst declarationsFor = (name: string): string =>\n (name === \"indigo\" ? \"\" : collectBlocks(`\\\\.${name}`)) +\n collectBlocks(\":root\");\n\ndescribe(\"theme swatches\", () => {\n it(\"should match the colours GlobalStyle defines for each theme\", () => {\n const fromStylesheet = THEMES.map(({ name }) => {\n const block = declarationsFor(name);\n return [\n name,\n SWATCH_VARS.map((cssVar) => toHex(readVar(block, cssVar) as string)),\n ];\n });\n\n expect(fromStylesheet).toEqual(\n THEMES.map(({ name, swatch }) => [name, swatch])\n );\n });\n});\n"],"mappings":"AAAA,SAASA,YAAY,QAAQ,IAAI;AACjC,SAASC,IAAI,QAAQ,MAAM;AAE3B,SAASC,MAAM,QAAQ,UAAU;AAEjC,MAAMC,YAAY,GAAGH,YAAY,CAC/BC,IAAI,CAACG,SAAS,EAAE,8BAA8B,CAAC,EAC/C,OACF,CAAC;AAED,MAAMC,WAAW,GAAG,CAAC,iBAAiB,EAAE,eAAe,EAAE,cAAc,CAAC;AAExE,MAAMC,aAAa,GAAIC,QAAgB,IAAa;EAClD,MAAMC,EAAE,GAAG,IAAIC,MAAM,CAAIF,QAAQ,wBAAqB,GAAG,CAAC;EAC1D,IAAIG,YAAY,GAAG,EAAE;EACrB,IAAIC,KAAK;EACT,OAAQA,KAAK,GAAGH,EAAE,CAACI,IAAI,CAACT,YAAY,CAAC,EAAGO,YAAY,IAAOC,KAAK,CAAC,CAAC,CAAC,MAAG;EACtE,OAAOD,YAAY;AACrB,CAAC;AAED,MAAMG,OAAO,GAAGA,CAACC,KAAa,EAAEC,IAAY;EAAA,IAAAC,YAAA;EAAA,QAAAA,YAAA,GAC1CF,KAAK,CAACH,KAAK,CAAC,IAAIF,MAAM,QAAMM,IAAI,sBAAmB,CAAC,CAAC,qBAArDC,YAAA,CAAwD,CAAC,CAAC,CAACC,IAAI,CAAC,CAAC;AAAA;AAEnE,MAAMC,KAAK,GAAIC,KAAa,IAAa;EACvC,MAAMC,GAAG,GAAGD,KAAK,CAACR,KAAK,CAAC,0CAA0C,CAAC;EACnE,IAAI,CAACS,GAAG,EAAE,OAAOD,KAAK,CAACE,WAAW,CAAC,CAAC;EACpC,aAAWD,GAAG,CACXE,KAAK,CAAC,CAAC,CAAC,CACRC,GAAG,CAAEC,OAAO,IAAKC,MAAM,CAACD,OAAO,CAAC,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAC/D1B,IAAI,CAAC,EAAE,CAAC;AACb,CAAC;;AAED;AACA,MAAM2B,eAAe,GAAIb,IAAY,IACnC,CAACA,IAAI,KAAK,QAAQ,GAAG,EAAE,GAAGT,aAAa,SAAOS,IAAM,CAAC,IACrDT,aAAa,CAAC,OAAO,CAAC;AAExBuB,QAAQ,CAAC,gBAAgB,EAAE,MAAM;EAC/BC,EAAE,CAAC,6DAA6D,EAAE,MAAM;IACtE,MAAMC,cAAc,GAAG7B,MAAM,CAACqB,GAAG,CAACS,IAAA,IAAc;MAAA,IAAXjB,IAAI,GAAAiB,IAAA,CAAJjB,IAAI;MACvC,MAAMD,KAAK,GAAGc,eAAe,CAACb,IAAI,CAAC;MACnC,OAAO,CACLA,IAAI,EACJV,WAAW,CAACkB,GAAG,CAAEU,MAAM,IAAKf,KAAK,CAACL,OAAO,CAACC,KAAK,EAAEmB,MAAM,CAAW,CAAC,CAAC,CACrE;IACH,CAAC,CAAC;IAEFC,MAAM,CAACH,cAAc,CAAC,CAACI,OAAO,CAC5BjC,MAAM,CAACqB,GAAG,CAACa,KAAA;MAAA,IAAGrB,IAAI,GAAAqB,KAAA,CAAJrB,IAAI;QAAEsB,MAAM,GAAAD,KAAA,CAANC,MAAM;MAAA,OAAO,CAACtB,IAAI,EAAEsB,MAAM,CAAC;IAAA,EACjD,CAAC;EACH,CAAC,CAAC;AACJ,CAAC,CAAC","ignoreList":[]}
|
package/dist/index.js
CHANGED
|
@@ -632,7 +632,7 @@
|
|
|
632
632
|
name: "cupcake",
|
|
633
633
|
title: "Cupcake",
|
|
634
634
|
dark: false,
|
|
635
|
-
swatch: ["#
|
|
635
|
+
swatch: ["#fe6fa7", "#29bcdd", "#f4f5f7"]
|
|
636
636
|
}, {
|
|
637
637
|
name: "classic",
|
|
638
638
|
title: "Classic",
|
|
@@ -647,12 +647,12 @@
|
|
|
647
647
|
name: "dracula",
|
|
648
648
|
title: "Dracula",
|
|
649
649
|
dark: true,
|
|
650
|
-
swatch: ["#
|
|
650
|
+
swatch: ["#ff79c6", "#bd93f9", "#282a36"]
|
|
651
651
|
}, {
|
|
652
652
|
name: "one-dark",
|
|
653
653
|
title: "One Dark",
|
|
654
654
|
dark: true,
|
|
655
|
-
swatch: ["#
|
|
655
|
+
swatch: ["#c678dd", "#61afef", "#282c34"]
|
|
656
656
|
}];
|
|
657
657
|
var THEME_NAMES = THEMES.map(function (theme) {
|
|
658
658
|
return theme.name;
|