mirror of
https://github.com/Snigdha-OS/documentation.git
synced 2025-09-12 20:04:57 +02:00
160 lines
5.2 KiB
Plaintext
160 lines
5.2 KiB
Plaintext
/**
|
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
:root {
|
|
--ifm-color-scheme: light;
|
|
|
|
/* Colors. */
|
|
--ifm-dark-value: 10%;
|
|
--ifm-darker-value: 15%;
|
|
--ifm-darkest-value: 30%;
|
|
--ifm-light-value: 15%;
|
|
--ifm-lighter-value: 30%;
|
|
--ifm-lightest-value: 50%;
|
|
|
|
/*
|
|
This seems like a lot, but we want to ensure enough contrast.
|
|
Goal is to have a min score of 3 on https://www.myndex.com/APCA/fullmatrix
|
|
For fontWeight 400 + score 3, the cell must show a value < 16px (fontsize we use in places like alerts)
|
|
See also https://github.com/facebookincubator/infima/issues/55#issuecomment-884023075
|
|
*/
|
|
--ifm-contrast-background-value: 90%;
|
|
--ifm-contrast-foreground-value: 70%;
|
|
/* Using slightly different values for dark mode */
|
|
--ifm-contrast-background-dark-value: 70%;
|
|
--ifm-contrast-foreground-dark-value: 90%;
|
|
|
|
--ifm-color-primary: #3578e5;
|
|
--ifm-color-secondary: #ebedf0;
|
|
--ifm-color-success: #00a400;
|
|
--ifm-color-info: #54c7ec;
|
|
--ifm-color-warning: #ffba00;
|
|
--ifm-color-danger: #fa383e;
|
|
|
|
@each $color in (primary, secondary, success, info, warning, danger) {
|
|
--ifm-color-$(color)-dark: color-mod(
|
|
var(--ifm-color-$(color)) shade(var(--ifm-dark-value))
|
|
);
|
|
--ifm-color-$(color)-darker: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
shade(var(--ifm-darker-value))
|
|
);
|
|
--ifm-color-$(color)-darkest: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
shade(var(--ifm-darkest-value))
|
|
);
|
|
--ifm-color-$(color)-light: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
tint(var(--ifm-light-value))
|
|
);
|
|
--ifm-color-$(color)-lighter: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
tint(var(--ifm-lighter-value))
|
|
);
|
|
--ifm-color-$(color)-lightest: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
tint(var(--ifm-lightest-value))
|
|
);
|
|
--ifm-color-$(color)-contrast-background: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
tint(var(--ifm-contrast-background-value))
|
|
);
|
|
--ifm-color-$(color)-contrast-foreground: color-mod(
|
|
var(--ifm-color-$(color)),
|
|
shade(var(--ifm-contrast-foreground-value))
|
|
);
|
|
}
|
|
|
|
--ifm-color-white: #fff;
|
|
--ifm-color-black: #000;
|
|
|
|
--ifm-color-gray-0: var(--ifm-color-white);
|
|
--ifm-color-gray-100: #f5f6f7;
|
|
--ifm-color-gray-200: #ebedf0;
|
|
--ifm-color-gray-300: #dadde1;
|
|
--ifm-color-gray-400: #ccd0d5;
|
|
--ifm-color-gray-500: #bec3c9;
|
|
--ifm-color-gray-600: #8d949e;
|
|
--ifm-color-gray-700: #606770;
|
|
--ifm-color-gray-800: #444950;
|
|
--ifm-color-gray-900: #1c1e21;
|
|
--ifm-color-gray-1000: var(--ifm-color-black);
|
|
|
|
--ifm-color-emphasis-0: var(--ifm-color-gray-0);
|
|
--ifm-color-emphasis-100: var(--ifm-color-gray-100);
|
|
--ifm-color-emphasis-200: var(--ifm-color-gray-200);
|
|
--ifm-color-emphasis-300: var(--ifm-color-gray-300);
|
|
--ifm-color-emphasis-400: var(--ifm-color-gray-400);
|
|
--ifm-color-emphasis-500: var(--ifm-color-gray-500);
|
|
--ifm-color-emphasis-600: var(--ifm-color-gray-600);
|
|
--ifm-color-emphasis-700: var(--ifm-color-gray-700);
|
|
--ifm-color-emphasis-800: var(--ifm-color-gray-800);
|
|
--ifm-color-emphasis-900: var(--ifm-color-gray-900);
|
|
--ifm-color-emphasis-1000: var(--ifm-color-gray-1000);
|
|
|
|
/* Base. */
|
|
--ifm-color-content: var(--ifm-color-emphasis-900);
|
|
--ifm-color-content-inverse: var(--ifm-color-emphasis-0);
|
|
--ifm-color-content-secondary: #525860;
|
|
|
|
--ifm-background-color: transparent; /* Body's background. */
|
|
--ifm-background-surface-color: var(--ifm-color-content-inverse);
|
|
--ifm-global-border-width: 1px;
|
|
--ifm-global-radius: 0.4rem;
|
|
|
|
--ifm-hover-overlay: rgba(0, 0, 0, 0.05);
|
|
|
|
/* Typography. */
|
|
--ifm-font-color-base: var(--ifm-color-content);
|
|
--ifm-font-color-base-inverse: var(--ifm-color-content-inverse);
|
|
--ifm-font-color-secondary: var(--ifm-color-content-secondary);
|
|
--ifm-font-family-base: system-ui, -apple-system, BlinkMacSystemFont,
|
|
'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
|
|
'Segoe UI Emoji', 'Segoe UI Symbol';
|
|
--ifm-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
|
|
'Liberation Mono', 'Courier New', monospace;
|
|
--ifm-font-size-base: 100%;
|
|
|
|
--ifm-font-weight-light: 300;
|
|
--ifm-font-weight-normal: 400;
|
|
--ifm-font-weight-semibold: 500;
|
|
--ifm-font-weight-bold: 700;
|
|
|
|
--ifm-font-weight-base: var(--ifm-font-weight-normal);
|
|
--ifm-line-height-base: 1.65;
|
|
|
|
/* Spacing. */
|
|
--ifm-global-spacing: 1rem;
|
|
--ifm-spacing-vertical: var(--ifm-global-spacing);
|
|
--ifm-spacing-horizontal: var(--ifm-global-spacing);
|
|
|
|
/* Transitions. */
|
|
--ifm-transition-fast: 200ms;
|
|
--ifm-transition-slow: 400ms;
|
|
--ifm-transition-timing-default: cubic-bezier(0.08, 0.52, 0.52, 1);
|
|
|
|
/* Shadows. */
|
|
--ifm-global-shadow-lw: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
|
|
--ifm-global-shadow-md: 0 5px 40px rgba(0, 0, 0, 0.2);
|
|
--ifm-global-shadow-tl: 0 12px 28px 0 rgba(0, 0, 0, 0.2),
|
|
0 2px 4px 0 rgba(0, 0, 0, 0.1);
|
|
|
|
/* Z-index. */
|
|
--ifm-z-index-dropdown: 100;
|
|
--ifm-z-index-fixed: 200;
|
|
--ifm-z-index-overlay: 400;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
:root {
|
|
--ifm-transition-fast: 0ms;
|
|
--ifm-transition-slow: 0ms;
|
|
}
|
|
}
|
|
|
|
@custom-media --ifm-narrow-window (max-width: 996px);
|