mirror of
https://github.com/mastodon/mastodon.git
synced 2025-11-27 18:10:58 +00:00
229 lines
6.8 KiB
SCSS
229 lines
6.8 KiB
SCSS
@use 'theme_utils' as utils;
|
|
|
|
:root {
|
|
--color-black: #000;
|
|
--color-grey-950: #181821;
|
|
--color-grey-800: #292938;
|
|
--color-grey-700: #444664;
|
|
--color-grey-600: #545778;
|
|
--color-grey-500: #696d91;
|
|
--color-grey-400: #8b8dac;
|
|
--color-grey-300: #b4b6cb;
|
|
--color-grey-200: #d8d9e3;
|
|
--color-grey-100: #f0f0f5;
|
|
--color-grey-50: #f0f1ff;
|
|
--color-white: #fff;
|
|
--color-indigo-600: #6147e6;
|
|
--color-indigo-400: #8886ff;
|
|
--color-indigo-300: #a5abfd;
|
|
--color-indigo-200: #c8cdfe;
|
|
--color-indigo-100: #e0e3ff;
|
|
--color-indigo-50: #f0f1ff;
|
|
--color-red-500: #ff637e;
|
|
--color-red-600: #ec003f;
|
|
--color-yellow-400: #ffb900;
|
|
--color-yellow-600: #e17100;
|
|
--color-green-400: #05df72;
|
|
--color-green-600: #00a63e;
|
|
|
|
/* TEXT TOKENS */
|
|
|
|
--color-text-primary: var(--color-grey-50);
|
|
--color-text-secondary: var(--color-grey-400);
|
|
--color-text-tertiary: var(--color-grey-500);
|
|
--color-text-on-inverted: var(--color-grey-950);
|
|
--color-text-brand: var(--color-indigo-400);
|
|
--color-text-brand-soft: color-mix(
|
|
in oklab,
|
|
var(--color-text-primary),
|
|
var(--color-text-brand)
|
|
);
|
|
--color-text-on-brand-base: var(--color-white);
|
|
--color-text-error: var(--color-red-500);
|
|
--color-text-on-error-base: var(--color-white);
|
|
--color-text-warning: var(--color-yellow-400);
|
|
--color-text-on-warning-base: var(--color-white);
|
|
--color-text-success: var(--color-green-400);
|
|
--color-text-on-success-base: var(--color-white);
|
|
--color-text-disabled: var(--color-grey-600);
|
|
--color-text-on-disabled: var(--color-grey-400);
|
|
--color-text-bookmark-highlight: var(--color-text-error);
|
|
--color-text-favourite-highlight: var(--color-text-warning);
|
|
--color-text-on-media: var(--color-white);
|
|
--color-text-status-links: color-mix(
|
|
in oklab,
|
|
var(--color-text-primary),
|
|
var(--color-text-secondary)
|
|
);
|
|
|
|
/* BACKGROUND TOKENS */
|
|
|
|
// Neutrals
|
|
--color-bg-primary: var(--color-grey-950);
|
|
--overlay-strength-secondary: 10%;
|
|
--color-bg-secondary-base: var(--color-indigo-200);
|
|
--color-bg-secondary: #{utils.css-alpha(
|
|
var(--color-bg-secondary-base),
|
|
var(--overlay-strength-secondary)
|
|
)};
|
|
--color-bg-secondary-solid: color-mix(
|
|
in srgb,
|
|
var(--color-bg-primary),
|
|
var(--color-bg-secondary-base) var(--overlay-strength-secondary)
|
|
);
|
|
--color-bg-tertiary: color-mix(
|
|
in oklab,
|
|
var(--color-bg-primary),
|
|
var(--color-bg-secondary-base) calc(2 * var(--overlay-strength-secondary))
|
|
);
|
|
|
|
// Utility
|
|
--color-bg-ambient: var(--color-bg-primary);
|
|
--color-bg-elevated: var(--color-bg-primary);
|
|
--color-bg-inverted: var(--color-grey-50);
|
|
--color-bg-media-base: var(--color-black);
|
|
--color-bg-media-strength: 65%;
|
|
--color-bg-media: #{utils.css-alpha(
|
|
var(--color-bg-media-base),
|
|
var(--color-bg-media-strength)
|
|
)};
|
|
--color-bg-overlay: var(--color-black);
|
|
--color-bg-disabled: var(--color-grey-700);
|
|
|
|
// Brand
|
|
--overlay-strength-brand: 10%;
|
|
--color-bg-brand-base: var(--color-indigo-600);
|
|
--color-bg-brand-base-hover: color-mix(
|
|
in oklab,
|
|
var(--color-bg-brand-base),
|
|
black var(--overlay-strength-brand)
|
|
);
|
|
--color-bg-brand-soft: #{utils.css-alpha(
|
|
var(--color-bg-brand-base),
|
|
calc(var(--overlay-strength-brand) * 1.5)
|
|
)};
|
|
--color-bg-brand-softer: #{utils.css-alpha(
|
|
var(--color-bg-brand-base),
|
|
var(--overlay-strength-brand)
|
|
)};
|
|
|
|
// Error
|
|
--overlay-strength-error: 12%;
|
|
--color-bg-error-base: var(--color-red-600);
|
|
--color-bg-error-base-hover: color-mix(
|
|
in oklab,
|
|
var(--color-bg-error-base),
|
|
black var(--overlay-strength-error)
|
|
);
|
|
--color-bg-error-soft: #{utils.css-alpha(
|
|
var(--color-bg-error-base),
|
|
calc(var(--overlay-strength-error) * 1.5)
|
|
)};
|
|
--color-bg-error-softer: #{utils.css-alpha(
|
|
var(--color-bg-error-base),
|
|
var(--overlay-strength-error)
|
|
)};
|
|
|
|
// Warning
|
|
--overlay-strength-warning: 10%;
|
|
--color-bg-warning-base: var(--color-yellow-600);
|
|
--color-bg-warning-base-hover: color-mix(
|
|
in oklab,
|
|
var(--color-bg-warning-base),
|
|
black var(--overlay-strength-warning)
|
|
);
|
|
--color-bg-warning-soft: #{utils.css-alpha(
|
|
var(--color-bg-warning-base),
|
|
calc(var(--overlay-strength-warning) * 1.5)
|
|
)};
|
|
--color-bg-warning-softer: #{utils.css-alpha(
|
|
var(--color-bg-warning-base),
|
|
var(--overlay-strength-warning)
|
|
)};
|
|
|
|
// Success
|
|
--overlay-strength-success: 15%;
|
|
--color-bg-success-base: var(--color-green-600);
|
|
--color-bg-success-base-hover: color-mix(
|
|
in oklab,
|
|
var(--color-bg-success-base),
|
|
black var(--overlay-strength-success)
|
|
);
|
|
--color-bg-success-soft: #{utils.css-alpha(
|
|
var(--color-bg-success-base),
|
|
calc(var(--overlay-strength-success) * 1.5)
|
|
)};
|
|
--color-bg-success-softer: #{utils.css-alpha(
|
|
var(--color-bg-success-base),
|
|
var(--overlay-strength-success)
|
|
)};
|
|
|
|
/* BORDER TOKENS */
|
|
|
|
--border-strength-primary: 18%;
|
|
--color-border-primary: #{utils.css-alpha(
|
|
var(--color-indigo-200),
|
|
var(--border-strength-primary)
|
|
)};
|
|
--color-border-media: rgb(252 248 255 / 15%);
|
|
--color-border-on-bg-secondary: #{utils.css-alpha(
|
|
var(--color-indigo-200),
|
|
calc(var(--border-strength-primary) / 1.5)
|
|
)};
|
|
--color-border-on-bg-brand-softer: var(--color-border-primary);
|
|
--color-border-on-bg-error-softer: #{utils.css-alpha(
|
|
var(--color-text-error),
|
|
50%
|
|
)};
|
|
--color-border-on-bg-warning-softer: #{utils.css-alpha(
|
|
var(--color-text-warning),
|
|
50%
|
|
)};
|
|
--color-border-on-bg-success-softer: #{utils.css-alpha(
|
|
var(--color-text-success),
|
|
50%
|
|
)};
|
|
--color-border-on-bg-inverted: var(--color-border-primary);
|
|
|
|
/* SHADOW TOKENS */
|
|
|
|
--shadow-strength-primary: 80%;
|
|
--color-shadow-primary: #{utils.css-alpha(
|
|
var(--color-black),
|
|
var(--shadow-strength-primary)
|
|
)};
|
|
--dropdown-shadow:
|
|
0 20px 25px -5px var(--color-shadow-primary),
|
|
0 8px 10px -6px var(--color-shadow-primary);
|
|
--overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));
|
|
|
|
/* GRAPHS/CHARTS TOKENS */
|
|
|
|
--color-graph-primary-stroke: var(--color-text-brand);
|
|
--color-graph-primary-fill: var(--color-bg-brand-softer);
|
|
--color-graph-warning-stroke: var(--color-text-warning);
|
|
--color-graph-warning-fill: var(--color-bg-warning-softer);
|
|
--color-graph-disabled-stroke: var(--color-text-disabled);
|
|
--color-graph-disabled-fill: var(--color-bg-disabled);
|
|
|
|
/* LEGACY TOKENS */
|
|
|
|
--rich-text-container-color: rgb(87 24 60 / 100%);
|
|
--rich-text-text-color: rgb(255 175 212 / 100%);
|
|
--rich-text-decorations-color: rgb(128 58 95 / 100%);
|
|
|
|
/* MISCELLANEOUS */
|
|
|
|
--outline-focus-default: 2px solid var(--color-text-brand);
|
|
--avatar-border-radius: 8px;
|
|
}
|
|
|
|
body {
|
|
// Variable for easily inverting directional UI elements,
|
|
--text-x-direction: 1;
|
|
|
|
&.rtl {
|
|
--text-x-direction: -1;
|
|
}
|
|
}
|