summaryrefslogtreecommitdiffstats
path: root/toolkit/themes/shared/design-tokens-brand.css
diff options
context:
space:
mode:
Diffstat (limited to 'toolkit/themes/shared/design-tokens-brand.css')
-rw-r--r--toolkit/themes/shared/design-tokens-brand.css53
1 files changed, 53 insertions, 0 deletions
diff --git a/toolkit/themes/shared/design-tokens-brand.css b/toolkit/themes/shared/design-tokens-brand.css
new file mode 100644
index 0000000000..801348fe81
--- /dev/null
+++ b/toolkit/themes/shared/design-tokens-brand.css
@@ -0,0 +1,53 @@
+/* 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 url("chrome://global/skin/design-tokens-shared.css");
+
+:root {
+ /* Typography */
+ /** Font size **/
+ --in-content-font-body-size-base: 15px;
+ --in-content-font-body-size-small: 0.867rem;
+}
+
+@media not (prefers-contrast) {
+ :root {
+ /* Border */
+ --border-interactive-color: var(--color-gray-60);
+
+ /* Button */
+ /* TODO Bug 1821203 - Gray use needs to be consolidated */
+ --button-background-color: color-mix(in srgb, currentColor 7%, transparent);
+ --button-background-color-hover: color-mix(in srgb, currentColor 14%, transparent);
+ --button-background-color-active: color-mix(in srgb, currentColor 21%, transparent);
+
+ /* Color */
+ --color-accent-primary: var(--brand-color-accent);
+ --color-accent-primary-hover: var(--brand-color-accent-hover);
+ --color-accent-primary-active: var(--brand-color-accent-active);
+ --brand-color-accent: var(--color-blue-50);
+ --brand-color-accent-hover: var(--color-blue-60);
+ --brand-color-accent-active: var(--color-blue-70);
+ --color-canvas: var(--color-white);
+
+ /* Text */
+ --text-color-deemphasized: color-mix(in srgb, currentColor 69%, transparent);
+ }
+}
+
+@media (prefers-contrast: no-preference) and (prefers-color-scheme: dark) {
+ :root {
+ /* Border */
+ --border-interactive-color: var(--color-gray-50);
+
+ /* Color */
+ --brand-color-accent: var(--color-blue-20);
+ --brand-color-accent-hover: var(--color-blue-10);
+ --brand-color-accent-active: var(--color-blue-05);
+ --color-canvas: var(--color-gray-90);
+
+ /* Text */
+ --text-color-deemphasized: color-mix(in srgb, currentColor 75%, transparent);
+ }
+}