forked from mirrors/gecko-dev
Backed out 2 changesets (bug 1846846) for mochitest failures on test_moz_card.html.
Backed out changeset f5c77e0e2f77 (bug 1846846) Backed out changeset 54af6f5764b9 (bug 1846846)
This commit is contained in:
Cosmin Sabou
parent
f35f3f7628
commit
12f136baca
9 changed files with 5 additions and 566 deletions
|
|
@ -830,8 +830,6 @@
|
|||
);
|
||||
case "moz-toggle":
|
||||
return import("chrome://global/content/elements/moz-toggle.mjs");
|
||||
case "moz-card":
|
||||
return import("chrome://global/content/elements/moz-card.mjs");
|
||||
}
|
||||
throw new Error(`Unknown custom element name (${name})`);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -90,8 +90,6 @@ toolkit.jar:
|
|||
content/global/elements/menupopup.js (widgets/menupopup.js)
|
||||
content/global/elements/moz-button-group.css (widgets/moz-button-group/moz-button-group.css)
|
||||
content/global/elements/moz-button-group.mjs (widgets/moz-button-group/moz-button-group.mjs)
|
||||
content/global/elements/moz-card.css (widgets/moz-card/moz-card.css)
|
||||
content/global/elements/moz-card.mjs (widgets/moz-card/moz-card.mjs)
|
||||
content/global/elements/moz-five-star.css (widgets/moz-five-star/moz-five-star.css)
|
||||
content/global/elements/moz-five-star.mjs (widgets/moz-five-star/moz-five-star.mjs)
|
||||
content/global/elements/moz-input-box.js (widgets/moz-input-box.js)
|
||||
|
|
|
|||
|
|
@ -24,8 +24,6 @@ skip-if = ["os == 'mac'"]
|
|||
|
||||
["test_moz_button_group.html"]
|
||||
|
||||
["test_moz_card.html"]
|
||||
|
||||
["test_moz_five_star.html"]
|
||||
|
||||
["test_moz_label.html"]
|
||||
|
|
|
|||
|
|
@ -1,162 +0,0 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>moz-card tests</title>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
|
||||
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
|
||||
<script type="module" src="chrome://global/content/elements/moz-card.mjs"></script>
|
||||
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<p id="display"></p>
|
||||
<div id="content">
|
||||
<moz-card id="default-card" data-l10n-id="test-id-1" data-l10n-attrs="heading">
|
||||
<div>TEST</div>
|
||||
</moz-card>
|
||||
<hr />
|
||||
|
||||
<moz-card id="accordion-card" data-l10n-id="test-id-2" data-l10n-attrs="heading" heading="accordion heading"
|
||||
type="accordion">
|
||||
<div>accordion test content</div>
|
||||
</moz-card>
|
||||
<hr />
|
||||
|
||||
</div>
|
||||
<pre id="test"></pre>
|
||||
<script>
|
||||
let generatedSlotText = "generated slotted element";
|
||||
let testHeading = "test heading";
|
||||
|
||||
function assertBasicProperties(card, expectedValues) {
|
||||
info(`Testing card with ID: ${card.id}`);
|
||||
ok(card, "The card element should exist");
|
||||
is(card.localName, "moz-card", "The card should have the correct tag");
|
||||
let l10nId = card.getAttribute("data-l10n-id");
|
||||
let l10nAttrs = card.getAttribute("data-l10n-attrs");
|
||||
if (expectedValues["data-l10n-id"]) {
|
||||
is(l10nId, expectedValues["data-l10n-id"], "l10n id should be unchanged");
|
||||
}
|
||||
if (expectedValues["data-l10n-attrs"]) {
|
||||
is(l10nAttrs, expectedValues["data-l10n-attrs"], "l10n attrs should be unchanged");
|
||||
}
|
||||
let cardContent = card.firstElementChild;
|
||||
ok(cardContent, "The content should exist");
|
||||
is(cardContent.textContent, expectedValues.contentText, "The content should be unchanged");
|
||||
is(card.contentSlotEl.id, "content", "The content container should have the correct ID");
|
||||
if (card.type != "accordion") {
|
||||
is(card.contentSlotEl.getAttribute("aria-describedby"), "content", "The content container should be described by the 'content' slot");
|
||||
}
|
||||
|
||||
if (expectedValues.headingText) {
|
||||
ok(card.headingEl, "Heading should exist");
|
||||
is(card.headingEl.textContent, expectedValues.headingText, "Heading should match the 'heading' attribute value");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function assertAccordionCardProperties(card, expectedValues) {
|
||||
if (expectedValues.headingText) {
|
||||
ok(card.headingButtonEl, "Button should exist in the heading wrapper");
|
||||
is(card.headingButtonEl.getAttribute("tabindex"), "-1", "Button should not be tab navigable by default");
|
||||
}
|
||||
|
||||
ok(card.detailsEl, "The details element should exist");
|
||||
ok(card.detailsEl.querySelector("summary"), "There should be a summary element within the details element");
|
||||
}
|
||||
|
||||
async function generateCard(values) {
|
||||
let card = document.createElement("moz-card");
|
||||
for (let [key, value] of Object.entries(values)) {
|
||||
card.setAttribute(key, value);
|
||||
}
|
||||
let div = document.createElement("div");
|
||||
div.innerText = generatedSlotText;
|
||||
card.appendChild(div);
|
||||
document.body.appendChild(card);
|
||||
await card.updateComplete;
|
||||
document.body.appendChild(document.createElement("hr"));
|
||||
return card;
|
||||
}
|
||||
|
||||
add_task(async function testDefaultCard() {
|
||||
assertBasicProperties(document.getElementById("default-card"),
|
||||
{
|
||||
"data-l10n-id": "test-id-1",
|
||||
"data-l10n-attrs": "heading",
|
||||
contentText: "TEST"
|
||||
}
|
||||
);
|
||||
|
||||
let defaultCard = await generateCard(
|
||||
{
|
||||
"data-l10n-id": "generated-id-1",
|
||||
"data-l10n-attrs": "heading",
|
||||
heading: testHeading,
|
||||
id: "generated-default-card"
|
||||
}
|
||||
);
|
||||
|
||||
assertBasicProperties(defaultCard,
|
||||
{
|
||||
"data-l10n-id": "generated-id-1",
|
||||
"data-l10n-attrs": "heading",
|
||||
contentText: generatedSlotText,
|
||||
heading: testHeading
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
add_task(async function testAccordionCard() {
|
||||
assertBasicProperties(document.getElementById("accordion-card"),
|
||||
{
|
||||
"data-l10n-id": "test-id-2",
|
||||
"data-l10n-attrs": "heading",
|
||||
contentText: "accordion test content",
|
||||
headingText: "accordion heading",
|
||||
}
|
||||
);
|
||||
assertAccordionCardProperties(document.getElementById("accordion-card"),
|
||||
{
|
||||
"data-l10n-id": "test-id-2",
|
||||
"data-l10n-attrs": "heading",
|
||||
contentText: "accordion test content",
|
||||
headingText: "accordion heading",
|
||||
}
|
||||
);
|
||||
|
||||
let accordionCard = await generateCard(
|
||||
{
|
||||
type: "accordion",
|
||||
id: "generated-accordion-card",
|
||||
"data-l10n-id": "generated-id-2",
|
||||
"data-l10n-attrs": "heading",
|
||||
heading: testHeading
|
||||
}
|
||||
);
|
||||
|
||||
assertBasicProperties(accordionCard,
|
||||
{
|
||||
"data-l10n-id": "generated-id-2",
|
||||
"data-l10n-attrs": "heading",
|
||||
headingText: testHeading,
|
||||
contentText: generatedSlotText,
|
||||
}
|
||||
);
|
||||
assertAccordionCardProperties(accordionCard,
|
||||
{
|
||||
"data-l10n-id": "generated-id-2",
|
||||
"data-l10n-attrs": "heading",
|
||||
headingText: testHeading,
|
||||
contentText: generatedSlotText,
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
:host {
|
||||
--card-border-color: color-mix(in srgb, currentColor 41%, transparent);
|
||||
--card-border-radius: var(--border-radius-medium);
|
||||
--card-border-width: var(--border-width);
|
||||
--card-border: var(--card-border-width) solid var(--card-border-color);
|
||||
--card-background-color: var(--box-background-color);
|
||||
--card-focus-outline: var(--focus-outline);
|
||||
--card-text-color: var(--text-color);
|
||||
--card-box-shadow: var(--box-shadow-10);
|
||||
/* Bug 1791816, 1839523: replace with spacing tokens */
|
||||
--card-padding: 1em;
|
||||
--card-gap: var(--card-padding);
|
||||
--card-article-gap: 0.45em;
|
||||
|
||||
/* Bug 1791816: replace with button tokens */
|
||||
@media (prefers-contrast) {
|
||||
--button-border-color: var(--border-interactive-color);
|
||||
--button-border-color-hover: var(--border-interactive-color-hover);
|
||||
--button-border-color-active: var(--border-interactive-color-active);
|
||||
}
|
||||
/* Bug 1791816: replace with button tokens */
|
||||
@media (forced-colors) {
|
||||
--button-background-color: ButtonFace;
|
||||
--button-background-color-hover: SelectedItemText;
|
||||
--button-background-color-active: SelectedItemText;
|
||||
--button-border-color: var(--border-interactive-color);
|
||||
--button-border-color-hover: var(--border-interactive-color-hover);
|
||||
--button-border-color-active: var(--border-interactive-color-active);
|
||||
--button-text-color: ButtonText;
|
||||
--button-text-color-hover: SelectedItem;
|
||||
--button-text-color-active: SelectedItem;
|
||||
}
|
||||
}
|
||||
|
||||
:host {
|
||||
display: block;
|
||||
border-radius: var(--card-border-radius);
|
||||
background-color: var(--card-background-color);
|
||||
box-shadow: var(--card-box-shadow);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:host([type=accordion]) {
|
||||
summary {
|
||||
padding-block: var(--card-padding);
|
||||
}
|
||||
#content {
|
||||
padding-block-end: var(--card-padding);
|
||||
}
|
||||
}
|
||||
:host(:not([type=accordion])) {
|
||||
@media (prefers-contrast) {
|
||||
border: var(--card-border);
|
||||
}
|
||||
|
||||
.moz-card {
|
||||
padding-block: var(--card-padding);
|
||||
}
|
||||
}
|
||||
|
||||
.moz-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: var(--card-article-gap);
|
||||
}
|
||||
|
||||
#moz-card-details {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
summary {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#heading-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: var(--card-gap);
|
||||
padding-inline: var(--card-padding);
|
||||
border-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
#heading {
|
||||
font-size: var(--font-size-root);
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
#content {
|
||||
align-self: stretch;
|
||||
padding-inline: var(--card-padding);
|
||||
border-end-start-radius: var(--card-border-radius);
|
||||
border-end-end-radius: var(--card-border-radius);
|
||||
|
||||
@media (prefers-contrast) {
|
||||
:host([type=accordion]) & {
|
||||
border: var(--card-border);
|
||||
border-block-start: 0;
|
||||
padding-block-start: var(--card-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
details {
|
||||
> summary {
|
||||
list-style: none;
|
||||
border-radius: var(--card-border-radius);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-background-color-hover);
|
||||
}
|
||||
@media (prefers-contrast) {
|
||||
border: var(--card-border-width) solid var(--button-border-color);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--button-border-color-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
border-color: var(--button-border-color-active);
|
||||
}
|
||||
}
|
||||
|
||||
@media (forced-colors) {
|
||||
color: var(--button-text-color);
|
||||
background-color: var(--button-background-color);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--button-background-color-hover);
|
||||
color: var(--button-text-color-hover);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var(--button-background-color-active);
|
||||
color: var(--button-text-color-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&[open] {
|
||||
summary {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
@media not (prefers-contrast) {
|
||||
#content {
|
||||
/*
|
||||
There is a border shown above this element in prefers-contrast.
|
||||
When there isn't a border, there's no need for the extra space.
|
||||
*/
|
||||
padding-block-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: var(--card-focus-outline);
|
||||
}
|
||||
}
|
||||
|
||||
.chevron-icon {
|
||||
background-image: url("chrome://global/skin/icons/arrow-down.svg");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
-moz-context-properties: fill;
|
||||
fill: currentColor;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
align-self: flex-start;
|
||||
|
||||
details[open] & {
|
||||
background-image: url("chrome://global/skin/icons/arrow-up.svg");
|
||||
}
|
||||
}
|
||||
|
|
@ -1,113 +0,0 @@
|
|||
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*-
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
import { html, ifDefined } from "chrome://global/content/vendor/lit.all.mjs";
|
||||
import { MozLitElement } from "chrome://global/content/lit-utils.mjs";
|
||||
|
||||
/**
|
||||
* Cards contain content and actions about a single subject.
|
||||
* There are two card types:
|
||||
* The default type where no type attribute is required and the card
|
||||
* will have no extra functionality.
|
||||
*
|
||||
* The "accordion" type will initially not show any content. The card
|
||||
* will contain an arrow to expand the card so that all of the content
|
||||
* is visible.
|
||||
*
|
||||
*
|
||||
* @property {string} heading - The heading text that will be used for the card.
|
||||
* @property {string} type - (optional) The type of card. No type specified
|
||||
* will be the default card. The other available type is "accordion"
|
||||
* @slot content - The content to show inside of the card.
|
||||
*/
|
||||
export default class MozCard extends MozLitElement {
|
||||
static queries = {
|
||||
detailsEl: "#moz-card-details",
|
||||
headingEl: "#heading",
|
||||
headingButtonEl: "#heading-wrapper button",
|
||||
contentSlotEl: "#content",
|
||||
};
|
||||
|
||||
static properties = {
|
||||
heading: { type: String },
|
||||
type: { type: String, reflect: true },
|
||||
expanded: { type: Boolean },
|
||||
};
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
this.expanded = false;
|
||||
this.type = "default";
|
||||
}
|
||||
|
||||
headingTemplate() {
|
||||
if (!this.heading) {
|
||||
return "";
|
||||
}
|
||||
return html`
|
||||
<div id="heading-wrapper">
|
||||
${this.type == "accordion"
|
||||
? html` <div class="chevron-icon"></div>`
|
||||
: ""}
|
||||
<span id="heading">${this.heading}</span>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
cardTemplate() {
|
||||
if (this.type === "accordion") {
|
||||
return html`
|
||||
<details id="moz-card-details">
|
||||
<summary>${this.headingTemplate()}</summary>
|
||||
<div id="content"><slot></slot></div>
|
||||
</details>
|
||||
`;
|
||||
}
|
||||
|
||||
return html`
|
||||
${this.headingTemplate()}
|
||||
<div id="content" aria-describedby="content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
/**
|
||||
* Handles the click event on the chevron icon.
|
||||
*
|
||||
* Without this, the click event would be passed to
|
||||
* toggleDetails which would force the details element
|
||||
* to stay open.
|
||||
*
|
||||
* @memberof MozCard
|
||||
*/
|
||||
onDetailsClick() {
|
||||
this.toggleDetails();
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {boolean} force - Used to force open or force close the
|
||||
* details element.
|
||||
* @memberof MozCard
|
||||
*/
|
||||
toggleDetails(force) {
|
||||
this.detailsEl.open = force ?? !this.detailsEl.open;
|
||||
}
|
||||
|
||||
render() {
|
||||
return html`
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="chrome://global/content/elements/moz-card.css"
|
||||
/>
|
||||
<article
|
||||
class="moz-card"
|
||||
aria-labelledby=${ifDefined(this.heading ? "heading" : undefined)}
|
||||
>
|
||||
${this.cardTemplate()}
|
||||
</article>
|
||||
`;
|
||||
}
|
||||
}
|
||||
customElements.define("moz-card", MozCard);
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
/* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
||||
|
||||
// eslint-disable-next-line import/no-unresolved
|
||||
import { html, ifDefined } from "lit.all.mjs";
|
||||
// eslint-disable-next-line import/no-unassigned-import
|
||||
import "./moz-card.mjs";
|
||||
|
||||
export default {
|
||||
title: "UI Widgets/Card",
|
||||
component: "moz-card",
|
||||
parameters: {
|
||||
status: "in-development",
|
||||
fluent: `
|
||||
moz-card-heading =
|
||||
.heading = This is the label
|
||||
`,
|
||||
},
|
||||
argTypes: {
|
||||
type: {
|
||||
options: ["default", "accordion"],
|
||||
control: { type: "select" },
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const Template = ({ l10nId, content, type }) => html`
|
||||
<main style="max-width: 400px">
|
||||
<moz-card
|
||||
type=${ifDefined(type)}
|
||||
data-l10n-id=${ifDefined(l10nId)}
|
||||
data-l10n-attrs="heading"
|
||||
>
|
||||
<div>${content}</div>
|
||||
</moz-card>
|
||||
</main>
|
||||
`;
|
||||
|
||||
export const DefaultCard = Template.bind({});
|
||||
DefaultCard.args = {
|
||||
l10nId: "moz-card-heading",
|
||||
content: "This is the content",
|
||||
};
|
||||
|
||||
export const CardOnlyContent = Template.bind({});
|
||||
CardOnlyContent.args = {
|
||||
content: "This card only contains content",
|
||||
};
|
||||
|
||||
export const CardTypeAccordion = Template.bind({});
|
||||
CardTypeAccordion.args = {
|
||||
...DefaultCard.args,
|
||||
content: `Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Nunc velit turpis, mollis a ultricies vitae, accumsan ut augue.
|
||||
In a eros ac dolor hendrerit varius et at mauris.`,
|
||||
type: "accordion",
|
||||
};
|
||||
CardTypeAccordion.parameters = {
|
||||
a11y: {
|
||||
config: {
|
||||
rules: [
|
||||
/*
|
||||
The accordion card can be expanded either by the chevron icon
|
||||
button or by activating the details element. Mouse users can
|
||||
click on the chevron button or the details element, while
|
||||
keyboard users can tab to the details element and have a
|
||||
focus ring around the details element in the card.
|
||||
Additionally, the details element is announced as a button
|
||||
so I don't believe we are providing a degraded experience
|
||||
to non-mouse users.
|
||||
|
||||
Bug 1854008: We should probably make the accordion button a
|
||||
clickable div or something that isn't announced to screen
|
||||
readers.
|
||||
*/
|
||||
{
|
||||
id: "button-name",
|
||||
reviewOnFail: true,
|
||||
},
|
||||
{
|
||||
id: "nested-interactive",
|
||||
reviewOnFail: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
/* Do not use base tokens directly as they don't carry any meaning and are used to set our base. Refer to Application tokens below. */
|
||||
/** Color **/
|
||||
--color-white: #ffffff;
|
||||
--color-black-a10: rgba(0, 0, 0, 0.1);
|
||||
--color-blue-05: #deeafc;
|
||||
--color-blue-30: #73a7f3;
|
||||
--color-blue-50: #0060df;
|
||||
|
|
@ -22,7 +21,6 @@
|
|||
--color-gray-50: #bfbfc9;
|
||||
--color-gray-60: #8f8f9d;
|
||||
--color-gray-70: #5b5b66;
|
||||
--color-gray-80: #23222b;
|
||||
--color-gray-90: #1c1b22;
|
||||
--color-gray-100: #15141a;
|
||||
--color-green-05: #d8eedc;
|
||||
|
|
@ -42,14 +40,9 @@
|
|||
/** Border **/
|
||||
--border-radius-circle: 9999px;
|
||||
--border-radius-small: 4px;
|
||||
--border-radius-medium: 8px;
|
||||
--border-width: 1px;
|
||||
--border-interactive-color: unset;
|
||||
|
||||
/** Box **/
|
||||
--box-background-color: light-dark(var(--color-white), var(--color-gray-80));
|
||||
--box-shadow-10: 0 1px 4px var(--color-black-a10);
|
||||
|
||||
/** Color **/
|
||||
--color-accent-primary: unset;
|
||||
--color-accent-primary-hover: unset;
|
||||
|
|
@ -123,9 +116,6 @@
|
|||
--border-interactive-color-active: AccentColor;
|
||||
--border-interactive-color-disabled: GrayText;
|
||||
|
||||
/** Box **/
|
||||
--box-background-color: var(--color-canvas);
|
||||
|
||||
/* Button */
|
||||
--button-background-color: ButtonFace;
|
||||
--button-background-color-hover: ButtonFace;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
--in-content-page-color: rgb(21, 20, 26);
|
||||
--in-content-page-background: #fff;
|
||||
--in-content-text-color: var(--in-content-page-color);
|
||||
--in-content-box-background: var(--box-background-color);
|
||||
--in-content-box-background: #fff;
|
||||
--in-content-box-background-odd: rgba(12, 12, 13, 0.05); /* grey 90 a05 */
|
||||
--in-content-box-border-color: color-mix(in srgb, currentColor 41%, transparent);
|
||||
--in-content-box-info-background: #f0f0f4;
|
||||
|
|
@ -136,6 +136,7 @@
|
|||
--in-content-page-background: rgb(28,27,34);
|
||||
--in-content-page-color: rgb(251,251,254);
|
||||
|
||||
--in-content-box-background: rgb(35, 34, 43);
|
||||
--in-content-box-background-odd: rgba(249,249,250,0.05);
|
||||
--in-content-box-info-background: rgba(249,249,250,0.15);
|
||||
|
||||
|
|
@ -183,9 +184,10 @@
|
|||
--in-content-page-color: CanvasText;
|
||||
--in-content-page-background: Canvas;
|
||||
|
||||
--in-content-box-background-odd: var(--in-content-box-background);
|
||||
--in-content-box-background: -moz-Dialog;
|
||||
--in-content-box-background-odd: -moz-Dialog;
|
||||
--in-content-box-border-color: -moz-DialogText;
|
||||
--in-content-box-info-background: var(--in-content-box-background);
|
||||
--in-content-box-info-background: -moz-Dialog;
|
||||
|
||||
--in-content-item-hover: SelectedItem;
|
||||
--in-content-item-hover-text: SelectedItemText;
|
||||
|
|
|
|||
Loading…
Reference in a new issue