2019-11-26 17:22:21 +00:00
|
|
|
<script>
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
document.body.setAttribute('theme', 'default');
|
|
|
|
|
};
|
|
|
|
|
</script>
|
Storybook Sidebar Provisioning & WIP Implementation (#2125)
* Migrating dimensions, latest SVG, stubbing sidebar
* Revert "Migrating dimensions, latest SVG, stubbing sidebar"
This reverts commit 5014a68f52ac50fc62db5d42d2b49abda28efaea.
* Revert "Revert "Migrating dimensions, latest SVG, stubbing sidebar""
This reverts commit 28c130c8d8b3993f91f072de106d3ff223d6c55b.
* Post merge bootstrap & build
* Linting
* Updating Story Heirarchy
* Migrating legacy tooltip component
* Reverting spacing integration into core dimensions
* Cleaning up comments, tweaking CSS var usage
* Removing static height
* Cleaning up static CSS values, re-organizing sliding panel, fixing search icon
* adding flow def for autobind in new SB instance
* PR feedback, removing new vars/updating markup
* Fixing lint > flow error on type
2020-05-14 18:00:29 +00:00
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
/* reset.css */
|
|
|
|
|
html,
|
|
|
|
|
body,
|
|
|
|
|
div,
|
|
|
|
|
span,
|
|
|
|
|
applet,
|
|
|
|
|
object,
|
|
|
|
|
iframe,
|
|
|
|
|
h1,
|
|
|
|
|
h2,
|
|
|
|
|
h3,
|
|
|
|
|
h4,
|
|
|
|
|
h5,
|
|
|
|
|
h6,
|
|
|
|
|
p,
|
|
|
|
|
blockquote,
|
|
|
|
|
pre,
|
|
|
|
|
a,
|
|
|
|
|
abbr,
|
|
|
|
|
acronym,
|
|
|
|
|
address,
|
|
|
|
|
big,
|
|
|
|
|
cite,
|
|
|
|
|
code,
|
|
|
|
|
del,
|
|
|
|
|
dfn,
|
|
|
|
|
em,
|
|
|
|
|
img,
|
|
|
|
|
ins,
|
|
|
|
|
kbd,
|
|
|
|
|
q,
|
|
|
|
|
s,
|
|
|
|
|
samp,
|
|
|
|
|
small,
|
|
|
|
|
strike,
|
|
|
|
|
strong,
|
|
|
|
|
sub,
|
|
|
|
|
sup,
|
|
|
|
|
tt,
|
|
|
|
|
var,
|
|
|
|
|
b,
|
|
|
|
|
u,
|
|
|
|
|
i,
|
|
|
|
|
center,
|
|
|
|
|
dl,
|
|
|
|
|
dt,
|
|
|
|
|
dd,
|
|
|
|
|
ol,
|
|
|
|
|
ul,
|
|
|
|
|
li,
|
|
|
|
|
fieldset,
|
|
|
|
|
form,
|
|
|
|
|
label,
|
|
|
|
|
legend,
|
|
|
|
|
table,
|
|
|
|
|
caption,
|
|
|
|
|
tbody,
|
|
|
|
|
tfoot,
|
|
|
|
|
thead,
|
|
|
|
|
tr,
|
|
|
|
|
th,
|
|
|
|
|
td,
|
|
|
|
|
article,
|
|
|
|
|
aside,
|
|
|
|
|
canvas,
|
|
|
|
|
details,
|
|
|
|
|
embed,
|
|
|
|
|
figure,
|
|
|
|
|
figcaption,
|
|
|
|
|
footer,
|
|
|
|
|
header,
|
|
|
|
|
hgroup,
|
|
|
|
|
menu,
|
|
|
|
|
nav,
|
|
|
|
|
output,
|
|
|
|
|
ruby,
|
|
|
|
|
section,
|
|
|
|
|
summary,
|
|
|
|
|
time,
|
|
|
|
|
mark,
|
|
|
|
|
audio,
|
|
|
|
|
video {
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
vertical-align: baseline;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* HTML5 display-role reset for older browsers */
|
|
|
|
|
|
|
|
|
|
article,
|
|
|
|
|
aside,
|
|
|
|
|
details,
|
|
|
|
|
figcaption,
|
|
|
|
|
figure,
|
|
|
|
|
footer,
|
|
|
|
|
header,
|
|
|
|
|
hgroup,
|
|
|
|
|
menu,
|
|
|
|
|
nav,
|
|
|
|
|
section {
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
line-height: normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ol,
|
|
|
|
|
ul {
|
|
|
|
|
list-style: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
blockquote,
|
|
|
|
|
q {
|
|
|
|
|
quotes: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
border-spacing: 0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
html {
|
|
|
|
|
--font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
|
|
|
|
|
'Droid Sans Fallback';
|
|
|
|
|
--font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
|
|
|
|
|
'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
|
|
|
|
|
--font-ligatures: normal;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
overflow: auto;
|
|
|
|
|
padding: 0.5rem 40px;
|
|
|
|
|
font-family: var(--font-default);
|
|
|
|
|
font-size: var(--font-size);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#root {
|
|
|
|
|
max-width: 70rem;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#story-root,
|
|
|
|
|
#dropdowns-container {
|
|
|
|
|
background-color: var(--color-bg);
|
|
|
|
|
color: var(--color-font);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#story-root {
|
|
|
|
|
padding: 0.5rem 40px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.storybook-skinny {
|
|
|
|
|
max-width: 40rem;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
margin-right: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.simplebar-content pre {
|
|
|
|
|
font-size: 0.8rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<!-- Default Theme Variables -->
|
|
|
|
|
<style>
|
|
|
|
|
html {
|
|
|
|
|
/* Font Size */
|
|
|
|
|
--font-size-xxs: 10px;
|
|
|
|
|
--font-size-xs: 11px;
|
|
|
|
|
--font-size-sm: 12px;
|
|
|
|
|
--font-size-md: 13px;
|
|
|
|
|
--font-size-lg: 14px;
|
|
|
|
|
--font-size-xl: 16px;
|
|
|
|
|
--font-size-xxl: 18px;
|
|
|
|
|
--font-size-xxxl: 22px;
|
|
|
|
|
--font-size: var(--font-size-md);
|
|
|
|
|
|
|
|
|
|
/* Font Weight */
|
|
|
|
|
--font-weight-regular: 400;
|
|
|
|
|
--font-weight-medium: 600;
|
|
|
|
|
--font-weight-bold: 700;
|
|
|
|
|
|
|
|
|
|
/* Line Height */
|
|
|
|
|
--font-line-height-sm: calc(var(--font-size) * 1);
|
|
|
|
|
--font-line-height-md: calc(var(--font-size) * 1.25);
|
|
|
|
|
--font-line-height-lg: calc(var(--font-size) * 1.4);
|
|
|
|
|
--font-line-height-xl: calc(var(--font-size) * 1.75);
|
|
|
|
|
--font-line-height-xxl: calc(var(--font-size) * 2);
|
|
|
|
|
--font-line-height-xxxl: calc(var(--font-size) * 2.25);
|
|
|
|
|
|
|
|
|
|
/* Spacing */
|
|
|
|
|
--spacing-xs: calc(var(--font-size) * 0.4);
|
|
|
|
|
--spacing-sm: calc(var(--font-size) * 0.6);
|
|
|
|
|
--spacing-md: calc(var(--font-size) * 1);
|
|
|
|
|
--spacing-lg: calc(var(--font-size) * 1.25);
|
|
|
|
|
--spacing-xl: calc(var(--font-size) * 1.5);
|
|
|
|
|
--spacing-xxl: calc(var(--font-size) * 2);
|
|
|
|
|
--spacing-xxxl: calc(var(--font-size) * 3);
|
|
|
|
|
--spacing-xxxxl: calc(var(--font-size) * 4);
|
|
|
|
|
|
|
|
|
|
/* Colors */
|
|
|
|
|
--color-border: #d9d9d9;
|
|
|
|
|
--color-sidebar: #fafafa;
|
|
|
|
|
--color-text: #404040;
|
|
|
|
|
|
|
|
|
|
/* Padding */
|
|
|
|
|
--padding-md: calc(var(--font-size) * 1.2);
|
|
|
|
|
--padding-sm: calc(var(--font-size) * 0.6);
|
|
|
|
|
--padding-xs: calc(var(--font-size) * 0.4);
|
|
|
|
|
--padding-xxs: calc(var(--font-size) * 0.2);
|
|
|
|
|
--padding-lg: calc(var(--font-size) * 2.5);
|
|
|
|
|
--padding-xl: calc(var(--font-size) * 5);
|
|
|
|
|
|
|
|
|
|
/* Wrapper */
|
|
|
|
|
--line-height-md: calc(var(--font-size) * 3.6);
|
|
|
|
|
--line-height-sm: calc(var(--font-size) * 2.88);
|
|
|
|
|
--line-height-xs: calc(var(--font-size) * 2.448);
|
|
|
|
|
--line-height-xxs: calc(var(--font-size) * 2.08);
|
|
|
|
|
|
|
|
|
|
/* Breakpoints */
|
|
|
|
|
--breakpoint-lg: 1100px;
|
|
|
|
|
--breakpoint-md: 880px;
|
|
|
|
|
--breakpoint-sm: 660px;
|
|
|
|
|
|
|
|
|
|
/* Radius */
|
|
|
|
|
--radius-sm: calc(var(--font-size) * 0.2);
|
|
|
|
|
--radius-md: calc(var(--font-size) * 0.3);
|
|
|
|
|
|
|
|
|
|
/* Scrollbars */
|
|
|
|
|
--scrollbar-width: calc(var(--font-size) * 0.6);
|
|
|
|
|
|
|
|
|
|
/* Modals */
|
|
|
|
|
--modal-width: calc(var(--font-size) * 60);
|
|
|
|
|
--modal-width-wide: calc(var(--font-size) * 70);
|
|
|
|
|
--modal-width-skinny: calc(var(--font-size) * 30);
|
|
|
|
|
|
|
|
|
|
/* Other */
|
|
|
|
|
--drag-width: calc(var(--font-size) * 0.5);
|
|
|
|
|
--height-nav: var(--line-height-md);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style data-theme-name="studio-light">
|
|
|
|
|
[theme='studio-light'],
|
|
|
|
|
[subtheme='studio-light'] {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(255, 255, 255);
|
|
|
|
|
--color-bg-rgb: 255, 255, 255;
|
|
|
|
|
--color-success: rgb(61, 156, 98);
|
|
|
|
|
--color-success-rgb: 61, 156, 98;
|
|
|
|
|
--color-notice: rgb(187, 151, 0);
|
|
|
|
|
--color-notice-rgb: 187, 151, 0;
|
|
|
|
|
--color-warning: rgb(214, 128, 62);
|
|
|
|
|
--color-warning-rgb: 214, 128, 62;
|
|
|
|
|
--color-danger: rgb(218, 91, 86);
|
|
|
|
|
--color-danger-rgb: 218, 91, 86;
|
|
|
|
|
--color-surprise: rgb(132, 103, 195);
|
|
|
|
|
--color-surprise-rgb: 132, 103, 195;
|
|
|
|
|
--color-info: rgb(0, 48, 82);
|
|
|
|
|
--color-info-rgb: 0, 48, 82;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(85, 85, 85);
|
|
|
|
|
--color-font-rgb: 85, 85, 85;
|
|
|
|
|
--color-font-success: rgb(255, 255, 255);
|
|
|
|
|
--color-font-success-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-notice: rgb(255, 255, 255);
|
|
|
|
|
--color-font-notice-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-warning: rgb(255, 255, 255);
|
|
|
|
|
--color-font-warning-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-danger: rgb(255, 255, 255);
|
|
|
|
|
--color-font-danger-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-surprise: rgb(255, 255, 255);
|
|
|
|
|
--color-font-surprise-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-info: rgb(255, 255, 255);
|
|
|
|
|
--color-font-info-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(130, 130, 130);
|
|
|
|
|
--hl-rgb: 130, 130, 130;
|
|
|
|
|
--hl-xxs: rgba(130, 130, 130, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 130, 130, 130, 0.05;
|
|
|
|
|
--hl-xs: rgba(130, 130, 130, 0.1);
|
|
|
|
|
--hl-xs-rgb: 130, 130, 130, 0.1;
|
|
|
|
|
--hl-sm: rgba(130, 130, 130, 0.25);
|
|
|
|
|
--hl-sm-rgb: 130, 130, 130, 0.25;
|
|
|
|
|
--hl-md: rgba(130, 130, 130, 0.35);
|
|
|
|
|
--hl-md-rgb: 130, 130, 130, 0.35;
|
|
|
|
|
--hl-lg: rgba(130, 130, 130, 0.5);
|
|
|
|
|
--hl-lg-rgb: 130, 130, 130, 0.5;
|
|
|
|
|
--hl-xl: rgba(130, 130, 130, 0.8);
|
|
|
|
|
--hl-xl-rgb: 130, 130, 130, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--activity-bar,
|
|
|
|
|
[subtheme='studio-light'] .theme--activity-bar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 48, 82);
|
|
|
|
|
--color-bg-rgb: 0, 48, 82;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(23, 130, 207);
|
|
|
|
|
--hl-rgb: 23, 130, 207;
|
|
|
|
|
--hl-xxs: rgba(23, 130, 207, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 23, 130, 207, 0.05;
|
|
|
|
|
--hl-xs: rgba(23, 130, 207, 0.1);
|
|
|
|
|
--hl-xs-rgb: 23, 130, 207, 0.1;
|
|
|
|
|
--hl-sm: rgba(23, 130, 207, 0.2);
|
|
|
|
|
--hl-sm-rgb: 23, 130, 207, 0.2;
|
|
|
|
|
--hl-md: rgba(23, 130, 207, 0.3);
|
|
|
|
|
--hl-md-rgb: 23, 130, 207, 0.3;
|
|
|
|
|
--hl-lg: rgba(23, 130, 207, 0.5);
|
|
|
|
|
--hl-lg-rgb: 23, 130, 207, 0.5;
|
|
|
|
|
--hl-xl: rgba(23, 130, 207, 0.8);
|
|
|
|
|
--hl-xl-rgb: 23, 130, 207, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--dropdown__menu,
|
|
|
|
|
[subtheme='studio-light'] .theme--dropdown__menu--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--tooltip,
|
|
|
|
|
[subtheme='studio-light'] .theme--tooltip--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--transparent-overlay,
|
|
|
|
|
[subtheme='studio-light'] .theme--transparent-overlay--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgba(230, 240, 250, 0.8);
|
|
|
|
|
--color-bg-rgb: 230, 240, 250, 0.8;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(85, 85, 85);
|
|
|
|
|
--color-font-rgb: 85, 85, 85;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--dialog,
|
|
|
|
|
[subtheme='studio-light'] .theme--dialog--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--sidebar,
|
|
|
|
|
[subtheme='studio-light'] .theme--sidebar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(247, 250, 252);
|
|
|
|
|
--color-bg-rgb: 247, 250, 252;
|
|
|
|
|
--color-success: rgb(80, 161, 79);
|
|
|
|
|
--color-success-rgb: 80, 161, 79;
|
|
|
|
|
--color-notice: rgb(193, 132, 1);
|
|
|
|
|
--color-notice-rgb: 193, 132, 1;
|
|
|
|
|
--color-warning: rgb(193, 132, 1);
|
|
|
|
|
--color-warning-rgb: 193, 132, 1;
|
|
|
|
|
--color-danger: rgb(228, 86, 73);
|
|
|
|
|
--color-danger-rgb: 228, 86, 73;
|
|
|
|
|
--color-surprise: rgb(166, 38, 164);
|
|
|
|
|
--color-surprise-rgb: 166, 38, 164;
|
|
|
|
|
--color-info: rgb(1, 132, 188);
|
|
|
|
|
--color-info-rgb: 1, 132, 188;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(68, 68, 68);
|
|
|
|
|
--color-font-rgb: 68, 68, 68;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--link,
|
|
|
|
|
[subtheme='studio-light'] .theme--link--sub {
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(104, 169, 162);
|
|
|
|
|
--color-font-rgb: 104, 169, 162;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--editor,
|
|
|
|
|
[subtheme='studio-light'] .theme--editor--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-surprise: rgb(0, 48, 82);
|
|
|
|
|
--color-surprise-rgb: 0, 48, 82;
|
|
|
|
|
--color-info: rgb(132, 103, 195);
|
|
|
|
|
--color-info-rgb: 132, 103, 195;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .CodeMirror-info,
|
|
|
|
|
[subtheme='studio-light'] .CodeMirror-info--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--activity-bar,
|
|
|
|
|
[subtheme='studio-light'] .theme--activity-bar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 48, 82);
|
|
|
|
|
--color-bg-rgb: 0, 48, 82;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(23, 130, 207);
|
|
|
|
|
--hl-rgb: 23, 130, 207;
|
|
|
|
|
--hl-xxs: rgba(23, 130, 207, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 23, 130, 207, 0.05;
|
|
|
|
|
--hl-xs: rgba(23, 130, 207, 0.1);
|
|
|
|
|
--hl-xs-rgb: 23, 130, 207, 0.1;
|
|
|
|
|
--hl-sm: rgba(23, 130, 207, 0.2);
|
|
|
|
|
--hl-sm-rgb: 23, 130, 207, 0.2;
|
|
|
|
|
--hl-md: rgba(23, 130, 207, 0.3);
|
|
|
|
|
--hl-md-rgb: 23, 130, 207, 0.3;
|
|
|
|
|
--hl-lg: rgba(23, 130, 207, 0.5);
|
|
|
|
|
--hl-lg-rgb: 23, 130, 207, 0.5;
|
|
|
|
|
--hl-xl: rgba(23, 130, 207, 0.8);
|
|
|
|
|
--hl-xl-rgb: 23, 130, 207, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--dropdown__menu,
|
|
|
|
|
[subtheme='studio-light'] .theme--dropdown__menu--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--tooltip,
|
|
|
|
|
[subtheme='studio-light'] .theme--tooltip--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--transparent-overlay,
|
|
|
|
|
[subtheme='studio-light'] .theme--transparent-overlay--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgba(230, 240, 250, 0.8);
|
|
|
|
|
--color-bg-rgb: 230, 240, 250, 0.8;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(85, 85, 85);
|
|
|
|
|
--color-font-rgb: 85, 85, 85;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--dialog,
|
|
|
|
|
[subtheme='studio-light'] .theme--dialog--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--sidebar,
|
|
|
|
|
[subtheme='studio-light'] .theme--sidebar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(247, 250, 252);
|
|
|
|
|
--color-bg-rgb: 247, 250, 252;
|
|
|
|
|
--color-success: rgb(80, 161, 79);
|
|
|
|
|
--color-success-rgb: 80, 161, 79;
|
|
|
|
|
--color-notice: rgb(193, 132, 1);
|
|
|
|
|
--color-notice-rgb: 193, 132, 1;
|
|
|
|
|
--color-warning: rgb(193, 132, 1);
|
|
|
|
|
--color-warning-rgb: 193, 132, 1;
|
|
|
|
|
--color-danger: rgb(228, 86, 73);
|
|
|
|
|
--color-danger-rgb: 228, 86, 73;
|
|
|
|
|
--color-surprise: rgb(166, 38, 164);
|
|
|
|
|
--color-surprise-rgb: 166, 38, 164;
|
|
|
|
|
--color-info: rgb(1, 132, 188);
|
|
|
|
|
--color-info-rgb: 1, 132, 188;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(68, 68, 68);
|
|
|
|
|
--color-font-rgb: 68, 68, 68;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--link,
|
|
|
|
|
[subtheme='studio-light'] .theme--link--sub {
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(104, 169, 162);
|
|
|
|
|
--color-font-rgb: 104, 169, 162;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--editor,
|
|
|
|
|
[subtheme='studio-light'] .theme--editor--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-surprise: rgb(0, 48, 82);
|
|
|
|
|
--color-surprise-rgb: 0, 48, 82;
|
|
|
|
|
--color-info: rgb(132, 103, 195);
|
|
|
|
|
--color-info-rgb: 132, 103, 195;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .CodeMirror-info,
|
|
|
|
|
[subtheme='studio-light'] .CodeMirror-info--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<style data-theme-name='studio-colorful' > [theme='studio-colorful'],
|
|
|
|
|
[subtheme='studio-colorful'] {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 48, 82);
|
|
|
|
|
--color-bg-rgb: 0, 48, 82;
|
|
|
|
|
--color-success: rgb(105, 199, 144);
|
|
|
|
|
--color-success-rgb: 105, 199, 144;
|
|
|
|
|
--color-notice: rgb(237, 203, 2);
|
|
|
|
|
--color-notice-rgb: 237, 203, 2;
|
|
|
|
|
--color-warning: rgb(232, 156, 66);
|
|
|
|
|
--color-warning-rgb: 232, 156, 66;
|
|
|
|
|
--color-danger: rgb(239, 110, 110);
|
|
|
|
|
--color-danger-rgb: 239, 110, 110;
|
|
|
|
|
--color-surprise: rgb(191, 163, 249);
|
|
|
|
|
--color-surprise-rgb: 191, 163, 249;
|
|
|
|
|
--color-info: rgb(106, 199, 230);
|
|
|
|
|
--color-info-rgb: 106, 199, 230;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(230, 239, 245);
|
|
|
|
|
--color-font-rgb: 230, 239, 245;
|
|
|
|
|
--color-font-success: rgb(255, 255, 255);
|
|
|
|
|
--color-font-success-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-notice: rgb(255, 255, 255);
|
|
|
|
|
--color-font-notice-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-warning: rgb(255, 255, 255);
|
|
|
|
|
--color-font-warning-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-danger: rgb(255, 255, 255);
|
|
|
|
|
--color-font-danger-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-surprise: rgb(255, 255, 255);
|
|
|
|
|
--color-font-surprise-rgb: 255, 255, 255;
|
|
|
|
|
--color-font-info: rgb(255, 255, 255);
|
|
|
|
|
--color-font-info-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(133, 157, 176);
|
|
|
|
|
--hl-rgb: 133, 157, 176;
|
|
|
|
|
--hl-xxs: rgba(133, 157, 176, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 133, 157, 176, 0.05;
|
|
|
|
|
--hl-xs: rgba(133, 157, 176, 0.1);
|
|
|
|
|
--hl-xs-rgb: 133, 157, 176, 0.1;
|
|
|
|
|
--hl-sm: rgba(133, 157, 176, 0.2);
|
|
|
|
|
--hl-sm-rgb: 133, 157, 176, 0.2;
|
|
|
|
|
--hl-md: rgba(133, 157, 176, 0.3);
|
|
|
|
|
--hl-md-rgb: 133, 157, 176, 0.3;
|
|
|
|
|
--hl-lg: rgba(133, 157, 176, 0.5);
|
|
|
|
|
--hl-lg-rgb: 133, 157, 176, 0.5;
|
|
|
|
|
--hl-xl: rgba(133, 157, 176, 0.8);
|
|
|
|
|
--hl-xl-rgb: 133, 157, 176, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--activity-bar,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--activity-bar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 69, 114);
|
|
|
|
|
--color-bg-rgb: 0, 69, 114;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(23, 130, 207);
|
|
|
|
|
--hl-rgb: 23, 130, 207;
|
|
|
|
|
--hl-xxs: rgba(23, 130, 207, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 23, 130, 207, 0.05;
|
|
|
|
|
--hl-xs: rgba(23, 130, 207, 0.1);
|
|
|
|
|
--hl-xs-rgb: 23, 130, 207, 0.1;
|
|
|
|
|
--hl-sm: rgba(23, 130, 207, 0.2);
|
|
|
|
|
--hl-sm-rgb: 23, 130, 207, 0.2;
|
|
|
|
|
--hl-md: rgba(23, 130, 207, 0.3);
|
|
|
|
|
--hl-md-rgb: 23, 130, 207, 0.3;
|
|
|
|
|
--hl-lg: rgba(23, 130, 207, 0.5);
|
|
|
|
|
--hl-lg-rgb: 23, 130, 207, 0.5;
|
|
|
|
|
--hl-xl: rgba(23, 130, 207, 0.8);
|
|
|
|
|
--hl-xl-rgb: 23, 130, 207, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--dropdown__menu,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--dropdown__menu--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 70, 114);
|
|
|
|
|
--color-bg-rgb: 0, 70, 114;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--tooltip,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--tooltip--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 70, 114);
|
|
|
|
|
--color-bg-rgb: 0, 70, 114;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--transparent-overlay,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--transparent-overlay--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgba(0, 37, 64, 0.8);
|
|
|
|
|
--color-bg-rgb: 0, 37, 64, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--dialog,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--dialog--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 70, 114);
|
|
|
|
|
--color-bg-rgb: 0, 70, 114;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--sidebar,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--sidebar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 57, 97);
|
|
|
|
|
--color-bg-rgb: 0, 57, 97;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .theme--link,
|
|
|
|
|
[subtheme='studio-colorful'] .theme--link--sub {
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(104, 169, 162);
|
|
|
|
|
--color-font-rgb: 104, 169, 162;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-colorful'] .CodeMirror-info,
|
|
|
|
|
[subtheme='studio-colorful'] .CodeMirror-info--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 70, 114);
|
|
|
|
|
--color-bg-rgb: 0, 70, 114;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--pane__header,
|
|
|
|
|
[subtheme='studio-light'] .theme--pane__header--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(240, 249, 255);
|
|
|
|
|
--color-bg-rgb: 240, 249, 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--sidebar,
|
|
|
|
|
[subtheme='studio-light'] .theme--sidebar--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-bg: rgb(0, 60, 102);
|
|
|
|
|
--color-bg-rgb: 0, 60, 102;
|
|
|
|
|
--color-success: rgb(116, 212, 156);
|
|
|
|
|
--color-success-rgb: 116, 212, 156;
|
|
|
|
|
--color-notice: rgb(255, 219, 2);
|
|
|
|
|
--color-notice-rgb: 255, 219, 2;
|
|
|
|
|
--color-warning: rgb(255, 172, 73);
|
|
|
|
|
--color-warning-rgb: 255, 172, 73;
|
|
|
|
|
--color-danger: rgb(255, 117, 117);
|
|
|
|
|
--color-danger-rgb: 255, 117, 117;
|
|
|
|
|
--color-surprise: rgb(191, 163, 249);
|
|
|
|
|
--color-surprise-rgb: 191, 163, 249;
|
|
|
|
|
--color-info: rgb(117, 221, 255);
|
|
|
|
|
--color-info-rgb: 117, 221, 255;
|
|
|
|
|
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
|
|
|
|
|
/* Highlight */
|
|
|
|
|
--hl: rgb(133, 157, 176);
|
|
|
|
|
--hl-rgb: 133, 157, 176;
|
|
|
|
|
--hl-xxs: rgba(133, 157, 176, 0.05);
|
|
|
|
|
--hl-xxs-rgb: 133, 157, 176, 0.05;
|
|
|
|
|
--hl-xs: rgba(133, 157, 176, 0.1);
|
|
|
|
|
--hl-xs-rgb: 133, 157, 176, 0.1;
|
|
|
|
|
--hl-sm: rgba(133, 157, 176, 0.2);
|
|
|
|
|
--hl-sm-rgb: 133, 157, 176, 0.2;
|
|
|
|
|
--hl-md: rgba(133, 157, 176, 0.3);
|
|
|
|
|
--hl-md-rgb: 133, 157, 176, 0.3;
|
|
|
|
|
--hl-lg: rgba(133, 157, 176, 0.5);
|
|
|
|
|
--hl-lg-rgb: 133, 157, 176, 0.5;
|
|
|
|
|
--hl-xl: rgba(133, 157, 176, 0.8);
|
|
|
|
|
--hl-xl-rgb: 133, 157, 176, 0.8;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--sidebar__header,
|
|
|
|
|
[subtheme='studio-light'] .theme--sidebar__header--sub {
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(255, 255, 255);
|
|
|
|
|
--color-font-rgb: 255, 255, 255;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--link,
|
|
|
|
|
[subtheme='studio-light'] .theme--link--sub {
|
|
|
|
|
/* Foreground */
|
|
|
|
|
--color-font: rgb(104, 169, 162);
|
|
|
|
|
--color-font-rgb: 104, 169, 162;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .theme--editor,
|
|
|
|
|
[subtheme='studio-light'] .theme--editor--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-success: rgb(61, 156, 98);
|
|
|
|
|
--color-success-rgb: 61, 156, 98;
|
|
|
|
|
--color-notice: rgb(187, 151, 0);
|
|
|
|
|
--color-notice-rgb: 187, 151, 0;
|
|
|
|
|
--color-warning: rgb(214, 136, 83);
|
|
|
|
|
--color-warning-rgb: 214, 136, 83;
|
|
|
|
|
--color-danger: rgb(230, 92, 87);
|
|
|
|
|
--color-danger-rgb: 230, 92, 87;
|
|
|
|
|
--color-surprise: rgb(0, 95, 157);
|
|
|
|
|
--color-surprise-rgb: 0, 95, 157;
|
|
|
|
|
--color-info: rgb(132, 103, 195);
|
|
|
|
|
--color-info-rgb: 132, 103, 195;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
[theme='studio-light'] .CodeMirror-info,
|
|
|
|
|
[subtheme='studio-light'] .CodeMirror-info--sub {
|
|
|
|
|
/* Background */
|
|
|
|
|
--color-info: rgb(0, 91, 158);
|
|
|
|
|
--color-info-rgb: 0, 91, 158;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
