@scalar/themes
Version:
the default CSS variables for all Scalar packages
461 lines (395 loc) • 13.4 kB
CSS
@layer scalar-base, scalar-theme;
/* Import core stylesheets */
/*
Custom reset (loosely) based on Tailwind Preflight
@see https://github.com/tailwindlabs/tailwindcss/blob/3.3/src/css/preflight.css
*/
/* Reset <body> in a layer */
@layer scalar-base {
body {
margin: 0;
line-height: inherit;
}
}
/* Use :where to lower specificity */
:where(.scalar-app) {
/* Apply styles that are normally applied to `html`. */
font-family: var(--scalar-font);
line-height: 1.15;
color: var(--scalar-color-1);
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
*,
*:before,
*:after {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: var(--scalar-border-color);
outline-width: 1px;
outline-style: none;
outline-color: var(--scalar-color-accent);
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: inherit;
font-weight: inherit;
font-style: inherit;
text-decoration: inherit;
line-height: inherit;
color: inherit;
margin: unset;
padding: unset;
/** Smooth text rendering */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::before,
::after {
--tw-content: "";
}
/** Remove the default background color. */
button,
input,
optgroup,
select,
textarea,
::file-selector-button {
background: transparent;
}
/** Remove the default list style */
ol,
ul,
menu {
list-style: none;
}
/** Bring back a basic border style and focus outline for form controls */
input:where(:not([type="button"], [type="reset"], [type="submit"])),
select,
textarea {
border-radius: var(--scalar-radius);
border-width: 1px;
}
/** Style placeholder text */
input::placeholder {
color: var(--scalar-color-3);
font-family: var(--scalar-font);
}
/** Remove chrome search input decorations */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
appearance: none;
}
/* Fix for Safari displaying default caret next to `<summary>` */
summary::-webkit-details-marker {
display: none;
}
/** Remove yellow/blue autofill indicator */
input:-webkit-autofill {
background-clip: text ;
}
/** Add outline for focus visible */
:focus-visible {
outline-style: solid;
border-radius: var(--scalar-radius);
}
/** Set outline offset for buttons */
button:focus-visible,
[role="button"]:focus-visible {
outline-offset: -1px;
}
/** Set the default cursor for buttons. */
button,
[role="button"] {
cursor: pointer;
}
/** Make sure disabled buttons don't get the pointer cursor. */
:disabled {
cursor: default;
}
/**
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block; /* 1 */
vertical-align: middle; /* 2 */
}
/** Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
}
.scalar-app {
.cm-scroller,
.custom-scroll {
overflow-y: auto;
scrollbar-color: transparent transparent;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.custom-scroll-self-contain-overflow {
overscroll-behavior: contain;
}
.cm-scroller:hover,
.custom-scroll:hover {
scrollbar-color: var(--scalar-scrollbar-color, transparent) transparent;
}
/* Force Obtrusive Scrollbars */
&.scalar-scrollbars-obtrusive {
.cm-scroller,
.custom-scroll {
scrollbar-color: var(--scalar-scrollbar-color, transparent) transparent;
}
}
.cm-scroller:hover::-webkit-scrollbar-thumb,
.custom-scroll:hover::-webkit-scrollbar-thumb {
background: var(--scalar-scrollbar-color);
background-clip: content-box;
border: 3px solid transparent;
}
.cm-scroller::-webkit-scrollbar-thumb:active,
.custom-scroll::-webkit-scrollbar-thumb:active {
background: var(--scalar-scrollbar-color-active);
background-clip: content-box;
border: 3px solid transparent;
}
.cm-scroller::-webkit-scrollbar-corner,
.custom-scroll::-webkit-scrollbar-corner {
background: transparent;
}
.cm-scroller::-webkit-scrollbar,
.custom-scroll::-webkit-scrollbar {
height: 12px;
width: 12px;
}
.cm-scroller::-webkit-scrollbar-track,
.custom-scroll::-webkit-scrollbar-track {
background: transparent;
}
.cm-scroller::-webkit-scrollbar-thumb,
.custom-scroll::-webkit-scrollbar-thumb {
border-radius: 20px;
background: transparent;
background-clip: content-box;
border: 3px solid transparent;
}
@media (pointer: coarse) {
.cm-scroller,
.custom-scroll {
padding-right: 12px;
}
}
}
/* Import a copy of the base variables and default theme */
@layer scalar-base{
:root {
--scalar-border-width: 0.5px;
--scalar-radius: 3px;
--scalar-radius-lg: 6px;
--scalar-radius-xl: 8px;
/* TYPOGRAPHY ------------------------------------ */
--scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
"Helvetica Neue", sans-serif;
--scalar-font-code:
"JetBrains Mono", ui-monospace, Menlo, Monaco,
"Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono",
"Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono",
"Courier New", monospace;
/** Font sizes for rendered text content (editor styles or static content) */
--scalar-heading-1: 24px; /* Editor Page heading */
--scalar-page-description: 16px;
--scalar-heading-2: 20px; /* Editor section headings */
--scalar-heading-3: 20px;
--scalar-heading-4: 16px;
--scalar-heading-5: 16px;
--scalar-heading-6: 16px;
--scalar-paragraph: 16px;
--scalar-small: 14px;
--scalar-mini: 13px;
--scalar-micro: 12px;
--scalar-bold: 600;
--scalar-semibold: 500;
--scalar-regular: 400;
/* Font sizes for interactive applications (not rendered text content) */
--scalar-font-size-1: 21px;
--scalar-font-size-2: 16px;
--scalar-font-size-3: 14px;
--scalar-font-size-4: 13px;
--scalar-font-size-5: 12px;
--scalar-font-size-6: 12px;
--scalar-font-size-7: 10px;
--scalar-line-height-1: 32px;
--scalar-line-height-2: 24px;
--scalar-line-height-3: 20px;
--scalar-line-height-4: 18px;
--scalar-line-height-5: 16px;
--scalar-font-normal: 400;
--scalar-font-medium: 500;
--scalar-font-bold: 700;
--scalar-text-decoration: none;
--scalar-text-decoration-hover: underline;
--scalar-link-font-weight: inherit;
--scalar-sidebar-indent: 20px;
}
.dark-mode {
color-scheme: dark;
--scalar-scrollbar-color: rgba(255, 255, 255, 0.18);
--scalar-scrollbar-color-active: rgba(255, 255, 255, 0.36);
--scalar-button-1: rgba(255, 255, 255, 1);
--scalar-button-1-hover: rgba(255, 255, 255, 0.9);
--scalar-button-1-color: black;
--scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1);
--scalar-shadow-2: 0 0 0 0.5px var(--scalar-border-color), rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4)
0px 9px 24px;
--scalar-lifted-brightness: 1.45;
--scalar-backdrop-brightness: 0.5;
--scalar-text-decoration-color: currentColor;
--scalar-text-decoration-color-hover: currentColor;
}
.light-mode {
color-scheme: light;
--scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36);
--scalar-scrollbar-color: rgba(0, 0, 0, 0.18);
--scalar-button-1: rgba(0, 0, 0, 1);
--scalar-button-1-hover: rgba(0, 0, 0, 0.8);
--scalar-button-1-color: rgba(255, 255, 255, 0.9);
--scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11);
--scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px, rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 0.5px;
--scalar-lifted-brightness: 1;
--scalar-backdrop-brightness: 1;
--scalar-text-decoration-color: currentColor;
--scalar-text-decoration-color-hover: currentColor;
}
/* On some browsers, the light color scheme takes precedence when the light mode is active */
.light-mode .dark-mode {
color-scheme: dark ;
}
@media (max-width: 460px) {
:root {
--scalar-font-size-1: 22px;
--scalar-font-size-2: 14px;
--scalar-font-size-3: 12px;
}
}
@media (max-width: 720px) {
:root {
--scalar-heading-1: 24px;
--scalar-page-description: 20px;
}
}
}
@layer scalar-base{
/* basic theme */
:root {
--scalar-text-decoration: underline;
--scalar-text-decoration-hover: underline;
}
.light-mode {
--scalar-background-1: #fff;
--scalar-background-2: #f6f6f6;
--scalar-background-3: #e7e7e7;
--scalar-background-accent: #8ab4f81f;
--scalar-color-1: #2a2f45;
--scalar-color-2: #757575;
--scalar-color-3: #8e8e8e;
--scalar-color-accent: #0099ff;
--scalar-border-color: #dfdfdf;
}
.dark-mode {
--scalar-background-1: #0f0f0f;
--scalar-background-2: #1a1a1a;
--scalar-background-3: #272727;
--scalar-color-1: #e7e7e7;
--scalar-color-2: #a4a4a4;
--scalar-color-3: #797979;
--scalar-color-accent: #00aeff;
--scalar-background-accent: #3ea6ff1f;
--scalar-border-color: #2d2d2d;
}
/* Document Sidebar */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
--scalar-sidebar-background-1: var(--scalar-background-1);
--scalar-sidebar-color-1: var(--scalar-color-1);
--scalar-sidebar-color-2: var(--scalar-color-2);
--scalar-sidebar-border-color: var(--scalar-border-color);
--scalar-sidebar-item-hover-background: var(--scalar-background-2);
--scalar-sidebar-item-hover-color: currentColor;
--scalar-sidebar-item-active-background: var(--scalar-background-2);
--scalar-sidebar-color-active: var(--scalar-color-1);
--scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
--scalar-sidebar-indent-border-hover: var(--scalar-sidebar-border-color);
--scalar-sidebar-indent-border-active: var(--scalar-sidebar-border-color);
--scalar-sidebar-search-background: transparent;
--scalar-sidebar-search-color: var(--scalar-color-3);
--scalar-sidebar-search-border-color: var(--scalar-border-color);
}
/* advanced */
.light-mode {
--scalar-color-green: #069061;
--scalar-color-red: #ef0006;
--scalar-color-yellow: #edbe20;
--scalar-color-blue: #0082d0;
--scalar-color-orange: #ff5800;
--scalar-color-purple: #5203d1;
--scalar-link-color: var(--scalar-color-1);
--scalar-link-color-hover: var(--scalar-link-color);
--scalar-button-1: rgba(0, 0, 0, 1);
--scalar-button-1-hover: rgba(0, 0, 0, 0.8);
--scalar-button-1-color: rgba(255, 255, 255, 0.9);
--scalar-tooltip-background: color-mix(in srgb, #1a1a1a, transparent 10%);
--scalar-tooltip-color: color-mix(in srgb, #fff, transparent 15%);
--scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%);
--scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%);
--scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
--scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}
.dark-mode {
--scalar-color-green: #00b648;
--scalar-color-red: #dc1b19;
--scalar-color-yellow: #ffc90d;
--scalar-color-blue: #4eb3ec;
--scalar-color-orange: #ff8d4d;
--scalar-color-purple: #b191f9;
--scalar-link-color: var(--scalar-color-1);
--scalar-link-color-hover: var(--scalar-link-color);
--scalar-button-1: rgba(255, 255, 255, 1);
--scalar-button-1-hover: rgba(255, 255, 255, 0.9);
--scalar-button-1-color: black;
--scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), #fff 10%);
--scalar-tooltip-color: color-mix(in srgb, #fff, transparent 5%);
--scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 20%);
--scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%);
--scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%);
}
@supports (color: color(display-p3 1 1 1)) {
.light-mode {
--scalar-color-accent: color(display-p3 0.0 0.6 1.0 / 1.0);
--scalar-color-green: color(display-p3 0.023529 0.564706 0.380392 / 1.0);
--scalar-color-red: color(display-p3 0.937255 0.0 0.023529 / 1.0);
--scalar-color-yellow: color(display-p3 0.929412 0.745098 0.12549 / 1.0);
--scalar-color-blue: color(display-p3 0.0 0.509804 0.815686 / 1.0);
--scalar-color-orange: color(display-p3 1.0 0.4 0.02);
--scalar-color-purple: color(display-p3 0.321569 0.011765 0.819608 / 1.0);
}
.dark-mode {
--scalar-color-accent: color(display-p3 0.07 0.67 1);
--scalar-color-green: color(display-p3 0.0 0.713725 0.282353 / 1.0);
--scalar-color-red: color(display-p3 0.862745 0.105882 0.098039 / 1.0);
--scalar-color-yellow: color(display-p3 1.0 0.788235 0.05098 / 1.0);
--scalar-color-blue: color(display-p3 0.305882 0.701961 0.92549 / 1.0);
--scalar-color-orange: color(display-p3 1.0 0.552941 0.301961 / 1.0);
--scalar-color-purple: color(display-p3 0.694118 0.568627 0.976471 / 1.0);
}
}
}