System-End/github-readme-stats
1
0
Fork 0
mirror of https://github.com/System-End/github-readme-stats.git synced 2026-04-19 21:05:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: firefox text overflow issue (#1492)

Browse source 
* Fixed Firefox text overflow / overwriting issue

Tests currently don't work becouse it appears that '@supports' is not supported by cssToObject used within the tests. I currently have no idea how to fix that test but the cards themself appear to not be broken

Fixes anuraghazra/github-readme-stats#664

Fixes anuraghazra/github-readme-stats#1134

* Fixed tests by moving to other css-to-object

Moved the `css-to-object` package to @uppercod's version for test fix. This doesn't seem to have the same issues as the older package

* chore: cleanup test

Co-authored-by: Anurag <hazru.anurag@gmail.com>
This commit is contained in:
T. de Kimpe 2021-12-13 15:42:03 +01:00 • committed by GitHub
parent 798bf72dee
commit b6c184e8ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 115 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -16,10 +16,10 @@
"@actions/github": "^4.0.0", "@actions/github": "^4.0.0",
"@testing-library/dom": "^7.20.0", "@testing-library/dom": "^7.20.0",
"@testing-library/jest-dom": "^5.11.0", "@testing-library/jest-dom": "^5.11.0",
"@uppercod/css-to-object": "^1.1.1",
"axios": "^0.24.0", "axios": "^0.24.0",
"axios-mock-adapter": "^1.18.1", "axios-mock-adapter": "^1.18.1",
"color-contrast-checker": "^2.1.0", "color-contrast-checker": "^2.1.0",
"css-to-object": "^1.1.0",
"hjson": "^3.2.2", "hjson": "^3.2.2",
"husky": "^4.2.5", "husky": "^4.2.5",
"jest": "^26.1.0", "jest": "^26.1.0",

4
src/common/Card.js
View file

@ -154,6 +154,10 @@ class Card {
fill: ${this.colors.titleColor}; fill: ${this.colors.titleColor};
animation: fadeInAnimation 0.8s ease-in-out forwards; animation: fadeInAnimation 0.8s ease-in-out forwards;
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
${this.css} ${this.css}
${process.env.NODE_ENV === "test" ? "" : getAnimations()} ${process.env.NODE_ENV === "test" ? "" : getAnimations()}

4
src/getStyles.js
View file

@ -71,6 +71,10 @@ const getStyles = ({
.stat { .stat {
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor}; font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger { .stagger {
opacity: 0; opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards; animation: fadeInAnimation 0.3s ease-in-out forwards;

16
tests/__snapshots__/renderWakatimeCard.test.js.snap
View file

@ -15,11 +15,19 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
fill: #2f80ed; fill: #2f80ed;
animation: fadeInAnimation 0.8s ease-in-out forwards; animation: fadeInAnimation 0.8s ease-in-out forwards;
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
.stat { .stat {
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333; font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger { .stagger {
opacity: 0; opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards; animation: fadeInAnimation 0.3s ease-in-out forwards;
@ -164,11 +172,19 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
fill: #2f80ed; fill: #2f80ed;
animation: fadeInAnimation 0.8s ease-in-out forwards; animation: fadeInAnimation 0.8s ease-in-out forwards;
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
.stat { .stat {
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333; font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
} }
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger { .stagger {
opacity: 0; opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards; animation: fadeInAnimation 0.3s ease-in-out forwards;

6
tests/card.test.js
View file

@ -1,5 +1,5 @@
require("@testing-library/jest-dom"); require("@testing-library/jest-dom");
const cssToObject = require("css-to-object"); const cssToObject = require("@uppercod/css-to-object").cssToObject;
const Card = require("../src/common/Card"); const Card = require("../src/common/Card");
const icons = require("../src/common/icons"); const icons = require("../src/common/icons");
const { getCardColors } = require("../src/common/utils"); const { getCardColors } = require("../src/common/utils");
@ -137,9 +137,9 @@ describe("Card", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
expect(headerClassStyles.fill).toBe("#f00"); expect(headerClassStyles["fill"].trim()).toBe("#f00");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#fff", "#fff",

66
tests/renderRepoCard.test.js
View file

@ -1,5 +1,5 @@
require("@testing-library/jest-dom"); require("@testing-library/jest-dom");
const cssToObject = require("css-to-object"); const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderRepoCard = require("../src/cards/repo-card"); const renderRepoCard = require("../src/cards/repo-card");
const { queryByTestId } = require("@testing-library/dom"); const { queryByTestId } = require("@testing-library/dom");
@ -130,13 +130,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[".description"]; const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe("#2f80ed"); expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
expect(descClassStyles.fill).toBe("#333"); expect(descClassStyles.fill.trim()).toBe("#333");
expect(iconClassStyles.fill).toBe("#586069"); expect(iconClassStyles.fill.trim()).toBe("#586069");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#fffefe", "#fffefe",
@ -158,13 +158,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[".description"]; const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`); expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(descClassStyles.fill).toBe(`#${customColors.text_color}`); expect(descClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`); expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#252525", "#252525",
@ -180,13 +180,15 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[".description"]; const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`); expect(headerClassStyles.fill.trim()).toBe(
expect(descClassStyles.fill).toBe(`#${themes[name].text_color}`); `#${themes[name].title_color}`,
expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`); );
expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes[name].bg_color}`, `#${themes[name].bg_color}`,
@ -203,13 +205,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[".description"]; const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe("#5a0"); expect(headerClassStyles.fill.trim()).toBe("#5a0");
expect(descClassStyles.fill).toBe(`#${themes.radical.text_color}`); expect(descClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes.radical.bg_color}`, `#${themes.radical.bg_color}`,
@ -226,13 +228,15 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[".description"]; const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`); expect(headerClassStyles.fill.trim()).toBe(
expect(descClassStyles.fill).toBe(`#${themes.default.text_color}`); `#${themes.default.title_color}`,
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); );
expect(descClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes.radical.bg_color}`, `#${themes.radical.bg_color}`,

66
tests/renderStatsCard.test.js
View file

@ -1,5 +1,5 @@
require("@testing-library/jest-dom"); require("@testing-library/jest-dom");
const cssToObject = require("css-to-object"); const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderStatsCard = require("../src/cards/stats-card"); const renderStatsCard = require("../src/cards/stats-card");
const { const {
@ -81,13 +81,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.textContent); const stylesObject = cssToObject(styleTag.textContent);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[".stat"]; const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe("#2f80ed"); expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
expect(statClassStyles.fill).toBe("#333"); expect(statClassStyles.fill.trim()).toBe("#333");
expect(iconClassStyles.fill).toBe("#4c71f2"); expect(iconClassStyles.fill.trim()).toBe("#4c71f2");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#fffefe", "#fffefe",
@ -107,13 +107,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[".stat"]; const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`); expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(statClassStyles.fill).toBe(`#${customColors.text_color}`); expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`); expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#252525", "#252525",
@ -129,13 +129,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[".stat"]; const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe("#5a0"); expect(headerClassStyles.fill.trim()).toBe("#5a0");
expect(statClassStyles.fill).toBe(`#${themes.radical.text_color}`); expect(statClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes.radical.bg_color}`, `#${themes.radical.bg_color}`,
@ -151,13 +151,15 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[".stat"]; const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`); expect(headerClassStyles.fill.trim()).toBe(
expect(statClassStyles.fill).toBe(`#${themes[name].text_color}`); `#${themes[name].title_color}`,
expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`); );
expect(statClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes[name].bg_color}`, `#${themes[name].bg_color}`,
@ -175,13 +177,15 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"]; const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[".stat"]; const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[".icon"]; const iconClassStyles = stylesObject[":host"][".icon "];
expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`); expect(headerClassStyles.fill.trim()).toBe(
expect(statClassStyles.fill).toBe(`#${themes.default.text_color}`); `#${themes.default.title_color}`,
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`); );
expect(statClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes.radical.bg_color}`, `#${themes.radical.bg_color}`,

34
tests/renderTopLanguages.test.js
View file

@ -1,5 +1,5 @@
require("@testing-library/jest-dom"); require("@testing-library/jest-dom");
const cssToObject = require("css-to-object"); const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderTopLanguages = require("../src/cards/top-languages-card"); const renderTopLanguages = require("../src/cards/top-languages-card");
const { queryByTestId, queryAllByTestId } = require("@testing-library/dom"); const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");
@ -109,11 +109,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.textContent); const stylesObject = cssToObject(styleTag.textContent);
const headerStyles = stylesObject[".header"]; const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[".lang-name"]; const langNameStyles = stylesObject[":host"][".lang-name "];
expect(headerStyles.fill).toBe("#2f80ed"); expect(headerStyles.fill.trim()).toBe("#2f80ed");
expect(langNameStyles.fill).toBe("#333"); expect(langNameStyles.fill.trim()).toBe("#333");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#fffefe", "#fffefe",
@ -133,11 +133,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerStyles = stylesObject[".header"]; const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[".lang-name"]; const langNameStyles = stylesObject[":host"][".lang-name "];
expect(headerStyles.fill).toBe(`#${customColors.title_color}`); expect(headerStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(langNameStyles.fill).toBe(`#${customColors.text_color}`); expect(langNameStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
"#252525", "#252525",
@ -153,11 +153,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerStyles = stylesObject[".header"]; const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[".lang-name"]; const langNameStyles = stylesObject[":host"][".lang-name "];
expect(headerStyles.fill).toBe("#5a0"); expect(headerStyles.fill.trim()).toBe("#5a0");
expect(langNameStyles.fill).toBe(`#${themes.radical.text_color}`); expect(langNameStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes.radical.bg_color}`, `#${themes.radical.bg_color}`,
@ -173,11 +173,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style"); const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML); const stylesObject = cssToObject(styleTag.innerHTML);
const headerStyles = stylesObject[".header"]; const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[".lang-name"]; const langNameStyles = stylesObject[":host"][".lang-name "];
expect(headerStyles.fill).toBe(`#${themes[name].title_color}`); expect(headerStyles.fill.trim()).toBe(`#${themes[name].title_color}`);
expect(langNameStyles.fill).toBe(`#${themes[name].text_color}`); expect(langNameStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute( expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill", "fill",
`#${themes[name].bg_color}`, `#${themes[name].bg_color}`,