mirrors/insomnia
1
0
Fork 0
mirror of https://github.com/Kong/insomnia synced 2024-11-07 22:30:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrating dimensions, latest SVG, stubbing sidebar

Browse Source
This commit is contained in:
MikeEllanKong 2020-05-05 10:40:00 -04:00
parent 486f4b5881
commit 5014a68f52
43 changed files with 2178 additions and 339 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

732
packages/insomnia-app/.storybook/preview-head.html
View File

@ -3,3 +3,735 @@
document.body.setAttribute('theme', 'default');
};
</script>
<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>

35
packages/insomnia-app/app/ui/css/constants/dimensions.less
View File

@ -1,15 +1,38 @@
html {
/* Font Size */
--font-size-xxs: 8px;
--font-size-xs: 10px;
--font-size-xxs: 10px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-lg: 15px;
--font-size-xl: 19px;
--font-size-xxl: 21px;
--font-size-xxxl: 24px;
--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.40);
--spacing-sm: calc(var(--font-size) * 0.60);
--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);
/* Padding */
--padding-md: calc(var(--font-size) * 1.2);
--padding-sm: calc(var(--font-size) * 0.6);

42
packages/insomnia-app/app/ui/css/layout/base.less
View File

@ -27,16 +27,50 @@ body {
padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
line-height: var(--font-line-height-md);
}
h1 {
font-size: var(--font-size-xxl);
font-size: var(--font-size-xxxl);
font-weight: var(--font-weight-regular);
}
h2 {
font-size: var(--font-size-xl);
font-size: var(--font-size-xxl);
font-weight: var(--font-weight-regular);
}
h3 {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-medium);
}
h4 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
}
h5 {
font-size: var(--font-size-md);
font-weight: var(--font-weight-medium);
}
h6 {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
}
p {
font-size: var(--font-size-md);
font-weight: var(--font-weight-regular);
line-height: var(--font-line-height-lg);
}
p,
@ -68,10 +102,6 @@ label {
padding-top: var(--padding-xs);
}
p {
line-height: 1.7em;
}
ul.ul--pretty {
list-style: disc;
padding-left: var(--padding-lg);

1
packages/insomnia-components/.storybook/main.js
View File

@ -2,5 +2,6 @@ module.exports = {
addons: [
'@storybook/addon-knobs/register',
'@storybook/addon-contexts/register',
'storybook-addon-designs/register',
]
};

781
packages/insomnia-components/.storybook/preview-head.html
View File

@ -132,9 +132,9 @@
<style>
html {
--font-monospace: Menlo, Monaco, Consolas, 'Droid Sans Mono', 'Courier New', monospace,
'Droid Sans Fallback';
'Droid Sans Fallback';
--font-default: -apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI',
'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
'HelveticaNeue-Light', 'Ubuntu', 'Droid Sans', sans-serif;
--font-ligatures: normal;
}
@ -179,16 +179,44 @@
<style>
html {
/* Font Size */
--font-size-xxs: 8px;
--font-size-xs: 10px;
--font-size-xxs: 10px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-lg: 15px;
--font-size-xl: 19px;
--font-size-xxl: 21px;
--font-size-xxxl: 24px;
--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);
@ -226,297 +254,484 @@
}
</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(96, 48, 191);
--color-surprise-rgb: 132, 103, 195;
--color-info: rgb(0, 48, 82);
--color-info-rgb: 0, 48, 82;
<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;
/* 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;
}
/* 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;
[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;
/* 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;
}
/* 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--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--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;
[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;
}
/* 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--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;
[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;
/* Foreground */
--color-font: rgb(68, 68, 68);
--color-font-rgb: 68, 68, 68;
/* Highlight */
}
/* 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--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'] .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>
<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'] .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>

4
packages/insomnia-components/assets/icn-bitbucket-logo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2.07773 3.11132C2.13954 3.03956 2.22988 2.99883 2.32454 3.00005L11.6755 3.00166C11.7701 3.00043 11.8605 3.04117 11.9223 3.11292C11.9841 3.18468 12.011 3.28012 11.9959 3.37364L10.6358 11.7306C10.6104 11.8874 10.4741 12.002 10.3154 11.9999H3.79037C3.5789 11.9982 3.39922 11.8447 3.36424 11.636L2.00413 3.37204C1.98898 3.27852 2.01592 3.18308 2.07773 3.11132ZM5.64308 9.54385H8.39685L9.06411 5.45294H4.89744L5.64308 9.54385Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 652 B

4
packages/insomnia-components/assets/icn-burger-menu.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 10C11.7761 10 12 10.2239 12 10.5V11.5C12 11.7761 11.7761 12 11.5 12H2.5C2.22386 12 2 11.7761 2 11.5V10.5C2 10.2239 2.22386 10 2.5 10H11.5ZM11.5 6C11.7761 6 12 6.22386 12 6.5V7.5C12 7.77614 11.7761 8 11.5 8H2.5C2.22386 8 2 7.77614 2 7.5V6.5C2 6.22386 2.22386 6 2.5 6H11.5ZM11.5 2C11.7761 2 12 2.22386 12 2.5V3.5C12 3.77614 11.7761 4 11.5 4H2.5C2.22386 4 2 3.77614 2 3.5V2.5C2 2.22386 2.22386 2 2.5 2H11.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 640 B

4
packages/insomnia-components/assets/icn-checkmark.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M11.7527 2L12.9973 3.23021L4.62233 11.7032L1 8.08091L2.23744 6.84348L4.61372 9.22019L11.7527 2Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 285 B

4
packages/insomnia-components/assets/icn-cookie.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C7.42954 0 7.83694 0.0147603 8.22283 0.0449149C8.27534 0.0490179 8.66367 0.157438 8.77771 0.408203C8.88919 0.653338 8.72755 1.04033 8.68119 1.09672C8.25547 1.61448 8 2.27741 8 3C8 4.65685 9.34315 6 11 6C11.7589 6 12.4519 5.71823 12.9803 5.25361C13.2954 4.97649 13.9269 5.32862 13.9674 5.94898C13.9893 6.28346 14 6.63368 14 7C14 12 12 14 7 14C2 14 0 12 0 7C0 2 2 0 7 0ZM6.756 1.501L6.25078 1.51594C2.74719 1.67358 1.55308 3.02701 1.50174 6.74296L1.5 7C1.5 11.1716 2.82843 12.5 7 12.5C10.9108 12.5 12.3228 11.3324 12.4841 7.74922L12.498 7.243C12.0876 7.38799 11.6611 7.47317 11.2211 7.49462L11 7.5C8.51472 7.5 6.5 5.48528 6.5 3C6.5 2.56797 6.56148 2.14709 6.67735 1.74704L6.756 1.501ZM8 10C8 10.5523 7.55228 11 7 11C6.44772 11 6 10.5523 6 10C6 9.44771 6.44772 9 7 9C7.55228 9 8 9.44771 8 10ZM4 8C4.55228 8 5 7.55228 5 7C5 6.44772 4.55228 6 4 6C3.44772 6 3 6.44772 3 7C3 7.55228 3.44772 8 4 8ZM4.5 4C4.77614 4 5 3.77614 5 3.5C5 3.22386 4.77614 3 4.5 3C4.22386 3 4 3.22386 4 3.5C4 3.77614 4.22386 4 4.5 4ZM10.5 10C10.7761 10 11 9.77614 11 9.5C11 9.22386 10.7761 9 10.5 9C10.2239 9 10 9.22386 10 9.5C10 9.77614 10.2239 10 10.5 10Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

4
packages/insomnia-components/assets/icn-drag-grip.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.5 3C10.3284 3 11 2.32843 11 1.5C11 0.671573 10.3284 0 9.5 0C8.67157 0 8 0.671573 8 1.5C8 2.32843 8.67157 3 9.5 3ZM11 7C11 7.82843 10.3284 8.5 9.5 8.5C8.67157 8.5 8 7.82843 8 7C8 6.17157 8.67157 5.5 9.5 5.5C10.3284 5.5 11 6.17157 11 7ZM11 12.5C11 13.3284 10.3284 14 9.5 14C8.67157 14 8 13.3284 8 12.5C8 11.6716 8.67157 11 9.5 11C10.3284 11 11 11.6716 11 12.5ZM6 7C6 7.82843 5.32843 8.5 4.5 8.5C3.67157 8.5 3 7.82843 3 7C3 6.17157 3.67157 5.5 4.5 5.5C5.32843 5.5 6 6.17157 6 7ZM4.5 14C5.32843 14 6 13.3284 6 12.5C6 11.6716 5.32843 11 4.5 11C3.67157 11 3 11.6716 3 12.5C3 13.3284 3.67157 14 4.5 14ZM6 1.5C6 2.32843 5.32843 3 4.5 3C3.67157 3 3 2.32843 3 1.5C3 0.671573 3.67157 0 4.5 0C5.32843 0 6 0.671573 6 1.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 941 B

5
packages/insomnia-components/assets/icn-elevator.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 6L7 1L12 6H2Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8L7 13L2 8H12Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 330 B

7
packages/insomnia-components/assets/icn-ellipsis-circle.svg Normal file
View File

@ -0,0 +1,7 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M8 7C8 7.55228 7.55228 8 7 8C6.44772 8 6 7.55228 6 7C6 6.44772 6.44772 6 7 6C7.55228 6 8 6.44772 8 7Z" fill="black"/>
<path d="M10 8C10.5523 8 11 7.55228 11 7C11 6.44772 10.5523 6 10 6C9.44771 6 9 6.44772 9 7C9 7.55228 9.44771 8 10 8Z" fill="black"/>
<path d="M5 7C5 7.55228 4.55228 8 4 8C3.44772 8 3 7.55228 3 7C3 6.44772 3.44772 6 4 6C4.55228 6 5 6.44772 5 7Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 853 B

4
packages/insomnia-components/assets/icn-file.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4L9 1H3C2.44772 1 2 1.44772 2 2V12C2 12.5523 2.44772 13 3 13H11C11.5523 13 12 12.5523 12 12V4ZM3.5 2.5H8V5H10.5V11.5H3.5V2.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 359 B

4
packages/insomnia-components/assets/icn-folder-open.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00014 1L8.00014 2.5H12.0001C12.5524 2.5 13.0001 2.94772 13.0001 3.5L13 6H13.4948C13.5187 6 13.5426 6.00168 13.5663 6.00503C13.8119 6.03974 13.991 6.24371 14 6.4806L13.9952 6.57071L13.1906 12.1414C13.1249 12.5962 12.7564 12.943 12.3043 12.9936L12.1897 13H1.81062C1.34616 13 0.946947 12.6882 0.832311 12.2528L0.809707 12.1414L0.00508089 6.57071L0 6.5C0 6.25454 0.178833 6.05039 0.414665 6.00806L0.505536 6H1L1.00014 2C1.00014 1.44772 1.44786 1 2.00014 1H7.00014ZM12.3285 7.5H1.67079L2.24912 11.5H11.7502L12.3285 7.5ZM2.50014 2.5H6.19615L7.19737 4H11.5001L11.5 6H2.5L2.50014 2.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 809 B

4
packages/insomnia-components/assets/icn-folder.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M13 12C13 12.5523 12.5523 13 12 13H2C1.44772 13 1 12.5523 1 12V2C1 1.44772 1.44772 1 2 1H7L8 2.5H12C12.5523 2.5 13 2.94772 13 3.5V12ZM2.5 6.5V11.5H11.5V6.5H2.5ZM2.5 2.5H6.196L7.19722 4H11.5V5H2.5V2.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 430 B

4
packages/insomnia-components/assets/icn-gear.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.30769 11.5638C5.55002 11.4498 4.85267 11.1517 4.26267 10.7164L3.24689 11.7322L2.26782 10.7531L3.2836 9.73733C2.84832 9.14733 2.55016 8.44998 2.43619 7.69231H1V6.30769H2.43619C2.55016 5.55002 2.84832 4.85267 3.2836 4.26267L2.26782 3.24689L3.24689 2.26782L4.26267 3.2836C4.85267 2.84832 5.55002 2.55016 6.30769 2.43619V1H7.69231V2.43619C8.44998 2.55016 9.14733 2.84832 9.73733 3.2836L10.7531 2.26782L11.7322 3.24689L10.7164 4.26267C11.1517 4.85267 11.4498 5.55002 11.5638 6.30769H13V7.69231H11.5638C11.4498 8.44998 11.1517 9.14733 10.7164 9.73733L11.7322 10.7531L10.7531 11.7322L9.73733 10.7164C9.14733 11.1517 8.44998 11.4498 7.69231 11.5638V13H6.30769V11.5638ZM7 3.76923C5.2157 3.76923 3.76923 5.2157 3.76923 7C3.76923 8.7843 5.2157 10.2308 7 10.2308C8.7843 10.2308 10.2308 8.7843 10.2308 7C10.2308 5.2157 8.7843 3.76923 7 3.76923Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
packages/insomnia-components/assets/icn-gitlab-logo.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M12.3349 5.78135C12.3316 5.76355 12.3265 5.74611 12.3197 5.72931L11.057 1.84235C10.988 1.63664 10.7946 1.49855 10.5776 1.50002C10.3611 1.49871 10.1691 1.63868 10.104 1.84518L8.90036 5.54913H5.10154L3.89615 1.84518C3.83131 1.63943 3.64034 1.49964 3.42462 1.50002H3.42179C3.20464 1.50006 3.01199 1.63934 2.94388 1.84553L1.68009 5.7371C1.68009 5.74064 1.67725 5.74347 1.67619 5.74701L1.03544 7.71563C0.938848 8.01184 1.04422 8.33654 1.29634 8.51958L6.83227 12.5421C6.93225 12.6145 7.06759 12.6138 7.1668 12.5404L12.7038 8.51958C12.956 8.33647 13.0613 8.01151 12.9643 7.71528L12.3349 5.78135Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 778 B

4
packages/insomnia-components/assets/icn-gui.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 0C13.1046 0 14 0.89543 14 2V12C14 13.1046 13.1046 14 12 14H2C0.89543 14 0 13.1046 0 12V2C0 0.89543 0.89543 0 2 0H12ZM12.5 4.5H1.5V12C1.5 12.2455 1.67688 12.4496 1.91012 12.4919L2 12.5H12C12.2455 12.5 12.4496 12.3231 12.4919 12.0899L12.5 12V4.5ZM2 1.5H3V3H1.5V2L1.50806 1.91012C1.55039 1.67688 1.75454 1.5 2 1.5ZM6 1.5H4.5V3H6V1.5ZM7.5 1.5H12L12.0899 1.50806C12.3231 1.55039 12.5 1.75454 12.5 2V3H7.5V1.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 638 B

4
packages/insomnia-components/assets/icn-indentation.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M4.5 0V9.5H14V11H4.5C3.67157 11 3 10.3284 3 9.5V0H4.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 244 B

4
packages/insomnia-components/assets/icn-minus-circle-fill.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM10 6.5C10 6.22386 9.77614 6 9.5 6H4.5C4.22386 6 4 6.22386 4 6.5V7.5C4 7.77614 4.22386 8 4.5 8H9.5C9.77614 8 10 7.77614 10 7.5V6.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 465 B

4
packages/insomnia-components/assets/icn-minus-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5ZM10 6.5C10 6.22386 9.77614 6 9.5 6H4.5C4.22386 6 4 6.22386 4 6.5V7.5C4 7.77614 4.22386 8 4.5 8H9.5C9.77614 8 10 7.77614 10 7.5V6.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 597 B

12
packages/insomnia-components/assets/icn-placeholder.svg Normal file
View File

@ -0,0 +1,12 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M0 1.5C0 0.671573 0.671573 0 1.5 0H4V1.5H1.5V4H0V1.5Z" fill="black"/>
<path d="M7 5.93934L5.53033 4.46967L4.46967 5.53033L5.93934 7L4.46967 8.46967L5.53033 9.53033L7 8.06066L8.46967 9.53033L9.53033 8.46967L8.06066 7L9.53033 5.53033L8.46967 4.46967L7 5.93934Z" fill="black"/>
<path d="M1.5 6H0V8H1.5V6Z" fill="black"/>
<path d="M12.5 6H14V8H12.5V6Z" fill="black"/>
<path d="M1.5 14C0.671573 14 0 13.3284 0 12.5V10H1.5V12.5H4V14H1.5Z" fill="black"/>
<path d="M12.5 0C13.3284 0 14 0.671573 14 1.5V4H12.5V1.5H10V0H12.5Z" fill="black"/>
<path d="M14 12.5C14 13.3284 13.3284 14 12.5 14H10V12.5H12.5V10H14V12.5Z" fill="black"/>
<path d="M6 0H8V1.5H6V0Z" fill="black"/>
<path d="M8 14V12.5H6V14H8Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 879 B

4
packages/insomnia-components/assets/icn-play.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.5145 1.9087C2.84797 1.50879 2 1.9889 2 2.76619V11.2338C2 12.0111 2.84797 12.4912 3.5145 12.0913L10.5708 7.8575C11.2182 7.46909 11.2182 6.53091 10.5708 6.14251L3.5145 1.9087Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 406 B

4
packages/insomnia-components/assets/icn-plus.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M7.5 1C7.63807 1 7.75 1.11193 7.75 1.25V6.25H12.75C12.8881 6.25 13 6.36193 13 6.5V7.5C13 7.63807 12.8881 7.75 12.75 7.75H7.75V12.75C7.75 12.8881 7.63807 13 7.5 13H6.5C6.36193 13 6.25 12.8881 6.25 12.75V7.75H1.25C1.11193 7.75 1 7.63807 1 7.5V6.5C1 6.36193 1.11193 6.25 1.25 6.25H6.25V1.25C6.25 1.11193 6.36193 1 6.5 1H7.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 511 B

4
packages/insomnia-components/assets/icn-prohibited.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C8.24832 12.5 9.39951 12.0841 10.3226 11.3834L2.61664 3.67743C1.91588 4.60049 1.5 5.75168 1.5 7ZM3.67743 2.61664C4.60049 1.91588 5.75168 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 8.24832 12.0841 9.39951 11.3834 10.3226L3.67743 2.61664Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 611 B

4
packages/insomnia-components/assets/icn-question-fill.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM8 9.5H6.25V11H8V9.5ZM8.5 5.5C8.5 5.88186 8.19084 6.2815 7.57253 6.43485C7.49731 6.4535 6.96017 6.65182 6.96017 6.65182C6.52112 6.79938 6.26623 7.21298 6.25 7.6268V8.49989L8.00318 8.5C8.00318 8.5 8 8 8.00318 7.85681C9.16671 7.51286 10 6.58753 10 5.5C10 4.11929 8.65685 3 7 3C5.34315 3 4 4.11929 4 5.5H5.5C5.5 5.01437 6.11725 4.5 7 4.5C7.88275 4.5 8.5 5.01437 8.5 5.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 701 B

6
packages/insomnia-components/assets/icn-question.svg Normal file
View File

@ -0,0 +1,6 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M8.00342 9.5H6.25V11H8.00342V9.5Z" fill="black"/>
<path d="M8.5 5.5C8.5 5.88187 8.19084 6.2815 7.57253 6.43485C7.49731 6.4535 6.96017 6.65182 6.96017 6.65182C6.52112 6.79938 6.26623 7.21298 6.25 7.6268V8.49989L8.00342 8.5C8.00342 8.5 8 8 8.00342 7.85673C9.16683 7.51273 10 6.58745 10 5.5C10 4.11929 8.65685 3 7 3C5.34315 3 4 4.11929 4 5.5H5.5C5.5 5.01437 6.11725 4.5 7 4.5C7.88275 4.5 8.5 5.01437 8.5 5.5Z" fill="black"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M7 0C10.866 0 14 3.13401 14 7C14 10.866 10.866 14 7 14C3.13401 14 0 10.866 0 7C0 3.13401 3.13401 0 7 0ZM7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 897 B

4
packages/insomnia-components/assets/icn-sec-cert.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0C12.1046 0 13 0.89543 13 2V12C13 13.1046 12.1046 14 11 14H3C1.89543 14 1 13.1046 1 12V2C1 0.89543 1.89543 0 3 0H11ZM11 1.5H3C2.72386 1.5 2.5 1.72386 2.5 2V12C2.5 12.2761 2.72386 12.5 3 12.5H11C11.2761 12.5 11.5 12.2761 11.5 12V2C11.5 1.72386 11.2761 1.5 11 1.5ZM7 4.5C7.7797 4.5 8.42045 5.09489 8.49313 5.85554L8.5 6V7H9V9C9 9.55229 8.55228 10 8 10H6C5.44772 10 5 9.55229 5 9V7H5.5V6C5.5 5.17157 6.17157 4.5 7 4.5ZM7 5.5C6.75454 5.5 6.55039 5.67688 6.50806 5.91012L6.5 6V7H7.5V6C7.5 5.72386 7.27614 5.5 7 5.5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 744 B

5
packages/insomnia-components/assets/icn-sync.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M14.0001 5L13.0001 0L11.5262 1.65994C10.3058 0.62454 8.72588 0 7.00008 0C3.30199 0 0.273692 2.86768 0.0176168 6.50061L1.52246 6.50039C1.77489 3.69696 4.13092 1.5 7.00008 1.5C8.34287 1.5 9.57327 1.9812 10.5282 2.78057L9.00008 4.5L14.0001 5Z" fill="black"/>
<path d="M0.0175781 9L1.01758 14L2.49146 12.3401C3.71184 13.3755 5.29177 14 7.01758 14C10.7157 14 13.744 11.1323 14 7.49939L12.4952 7.49961C12.2428 10.303 9.88673 12.5 7.01758 12.5C5.67479 12.5 4.44439 12.0188 3.48942 11.2194L5.01758 9.5L0.0175781 9Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 696 B

4
packages/insomnia-components/assets/icn-trashcan.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C10 0.447715 9.55229 0 9 0H5C4.44772 0 4 0.447715 4 1V2.5H1.5C1.22386 2.5 1 2.72386 1 3V4H13V3C13 2.72386 12.7761 2.5 12.5 2.5H10V1ZM5.5 1.5H8.5V2.5H5.5V1.5ZM10.5 12.5H3.5V5H2V12.5C2 13.3284 2.67157 14 3.5 14H10.5C11.3284 14 12 13.3284 12 12.5V5H10.5V12.5ZM6 11V6H5V11H6ZM8 11V6H9V11H8Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 521 B

4
packages/insomnia-components/assets/icn-triangle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5L7 10L2 5L12 5Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 250 B

4
packages/insomnia-components/assets/icn-user.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.75 5.75C10.75 2.63056 9.33364 1 7 1C4.66636 1 3.25 2.63056 3.25 5.75C3.25 6.78254 3.40518 7.65195 3.69674 8.35205C2.46174 9.28112 1.6307 10.7183 1.51443 12.3528C1.50497 12.4004 1.5 12.4496 1.5 12.5L1.504 12.568L1.5 12.75L1.54281 12.7504C1.64587 13.0415 1.92358 13.25 2.25 13.25C2.57642 13.25 2.85413 13.0415 2.95719 12.7504L3 12.75L3.0049 12.5504C3.06374 11.3532 3.64892 10.2944 4.53411 9.603C5.15912 10.1972 5.99439 10.5 7 10.5C8.00614 10.5 8.84176 10.1969 9.4671 9.60122C10.4004 10.3335 11 12.5 11 12.75C11 13 11.4236 13.25 11.75 13.25C12.0764 13.25 12.3541 13.0415 12.4572 12.7504L12.5 12.75L12.4975 12.5619L12.5 12.5C12.5 12.45 12.4951 12.4011 12.486 12.3544C12.3697 10.7185 11.538 9.2804 10.3026 8.3531C10.5948 7.65195 10.75 6.78254 10.75 5.75ZM4.75 5.75C4.75 3.41572 5.54542 2.5 7 2.5C8.45458 2.5 9.25 3.41572 9.25 5.75C9.25 8.08428 8.45458 9 7 9C5.54542 9 4.75 8.08428 4.75 5.75Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

4
packages/insomnia-components/assets/icn-warning-circle.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14C10.866 14 14 10.866 14 7ZM1.5 7C1.5 3.96243 3.96243 1.5 7 1.5C10.0376 1.5 12.5 3.96243 12.5 7C12.5 10.0376 10.0376 12.5 7 12.5C3.96243 12.5 1.5 10.0376 1.5 7ZM8 3.5L7.75 8H6.25L6 3.5H8ZM7.75 10.5V9H6.25V10.5H7.75Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

4
packages/insomnia-components/assets/icn-x.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path d="M11.9 1L12.996 2.09602L8.094 6.998L12.996 11.9L11.9 12.996L6.998 8.094L2.09602 12.996L1 11.9L5.902 6.998L1 2.09602L2.09602 1L6.998 5.902L11.9 1Z" fill="black"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 334 B

407
packages/insomnia-components/components/sidebar.js Normal file
View File

@ -0,0 +1,407 @@
// @flow
import * as React from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
import SvgIcon, { IconEnum } from './svg-icon';
import Dropdown from '../components/dropdown/dropdown';
import DropdownItem from '../components/dropdown/dropdown-item';
type Props = {|
className?: string,
|};
const StyledSidebar: React.ComponentType<{}> = styled.div`
/* To constants */
background-color: #fafafa;
border: 1px solid var(--color-border);
color: var(--color-text);
position: relative;
svg {
font-size: var(--font-size-xl);
fill: #737373;
}
.method {
h6 {
font-size: var(--font-size-xxs);
}
}
.method-post {
color: var(--color-success);
}
.method-get {
color: var(--color-surprise);
}
.method-del {
color: var(--color-danger);
}
.method-options-head,
.method-custom {
color: var(--color-info);
}
.method-patch {
color: var(--color-notice);
}
.method-put {
color: var(--color-warning);
}
h6 {
font-size: var(--font-size-xs);
}
h5 {
font-size: var(--font-size-sm);
}
/* END To constants */
width: 260px;
height: 100%;
min-height: 1100px;
`;
const StyledSection: React.ComponentType<{}> = styled(motion.ul)`
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid var(--color-border);
/* Header */
li:nth-child(1) {
display: flex;
justify-content: space-between;
align-items: center;
& > * {
padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-md);
font-size: var(--font-size-md);
svg {
margin-left: var(--spacing-sm);
&:hover {
fill:#000;
opacity: 1;
}
}
}
}
/* Footer */
&:last-child {
border-top: 1px solid var(--color-border);
border-bottom: none;
position: absolute;
bottom: 0;
width: 100%;
li {
justify-content: start;
line-height: var(--font-line-height-sm);
& > * {
padding: var(--spacing-md) 0 var(--spacing-md) var(--spacing-sm);
margin-left: 0px;
font-weight: var(--font-weight-regular);
}
}
}
}
`;
const StyledItem: React.ComponentType<{}> = styled.li`
padding: var(--spacing-sm) 0 var(--spacing-sm) 0;
margin: 0px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--spacing-xxl), 1fr));
column-gap: var(--spacing-sm);
grid-template-rows: 1fr;
align-items: start;
white-space: nowrap;
font-size: var(--font-size-md);
line-height: var(--font-line-height-md);
.inline-icon {
svg {
font-size: var(--font-line-height-sm);
margin-left: var(--spacing-xs);
}
}
a {
color: var(--hl-xl);
}
div:nth-child(1) {
text-align: right;
}
&:hover {
background-color: var(--hl-xxs);
cursor: default;
}
&:last-child {
margin-bottom: var(--spacing-md);
}
`;
const StyledFilter: React.ComponentType<{}> = styled(motion.div)`
text-align: left;
padding: 0;
width:100%;
display:block;
overflow:hidden;
input {
box-sizing:border-box;
font-size: var(--font-size-md);
min-width: 88%;
padding: var(--padding-sm);
margin: 0 var(--padding-md);
}
`;
function Sidebar(props: Props) {
// Temp garbage for easing/transition/sequencing dial-in
const toggleVisible = () => setVisible(!visible);
const toggleVisible2 = () => setVisible2(!visible2);
const [visible, setVisible] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(true);
const toggleVisible3 = () => setVisible3(!visible3);
const [visible4, setVisible4] = useState(true);
const toggleVisible4 = () => setVisible4(!visible4);
return (
<StyledSidebar>
{/*
<StyledSection>
<li>
<h6>DOCUMENT</h6><SvgIcon icon={IconEnum.chevronUp} />
</li>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.gui} />
</div>
<div className="inline-icon">
No Environment
<Dropdown renderButton={() => <SvgIcon icon={IconEnum.triangle} />}>
<DropdownItem>Item 1</DropdownItem>
<DropdownItem>Item 2</DropdownItem>
<DropdownItem>Item 3</DropdownItem>
</Dropdown>
</div>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.cookie} />
</div>
<div>
No Cookies (<a href="#">Add</a>)
</div>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.secCert} />
</div>
<div>
No Client Certificates (<a href="#">Add</a>)
</div>
</StyledItem>
</StyledSection>
*/}
<StyledSection>
<li>
<h6>INFO</h6>
<SvgIcon icon={IconEnum.plus} />
</li>
</StyledSection>
<StyledSection
initial={{ height: visible2 ? '100%' : '45px' }}
animate={{ height: visible2 ? '100%' : '45px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
<li>
<h6 onClick={toggleVisible2}>SERVERS</h6>
<div>
<motion.span
initial={{ opacity: visible2 ? 0.6 : 0 }}
animate={{ opacity: visible2 ? 0.6 : 0 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.2 }}>
<SvgIcon icon={IconEnum.trashcan} />
</motion.span>
<motion.span
onClick={toggleVisible3}
initial={{ opacity: visible2 ? 0.6 : 0 }}
animate={{ opacity: visible2 ? 0.6 : 0 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.15 }}>
<SvgIcon icon={IconEnum.search} />
</motion.span>
<motion.span
initial={{ opacity: visible2 ? 0.6 : 0.4 }}
animate={{ opacity: visible2 ? 0.6 : 0.4 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.1 }}>
<SvgIcon icon={IconEnum.plus} />
</motion.span>
</div>
</li>
<StyledFilter
initial={{ height: visible3 ? '0px' : '45px' }}
animate={{ height: visible3 ? '0px' : '45px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
<input placeholder='Filter...' />
</StyledFilter>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.indentation} />
</div>
<div>development.konghq.com</div>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.indentation} />
</div>
<div>staging.konghq.com</div>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.indentation} />
</div>
<div>production.konghq.com</div>
</StyledItem>
</StyledSection>
<StyledSection
initial={{ height: visible ? '100%' : '45px' }}
animate={{ height: visible ? '100%' : '45px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
<li>
<h6 onClick={toggleVisible}>PATHS</h6>
<div>
<motion.span
initial={{ opacity: visible ? 0.6 : 0 }}
animate={{ opacity: visible ? 0.6 : 0 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.2 }}>
<SvgIcon icon={IconEnum.trashcan} />
</motion.span>
<motion.span
onClick={toggleVisible4}
initial={{ opacity: visible ? 0.6 : 0 }}
animate={{ opacity: visible ? 0.6 : 0 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.15 }}>
<SvgIcon icon={IconEnum.search} />
</motion.span>
<motion.span
initial={{ opacity: visible ? 0.6 : 0.4 }}
animate={{ opacity: visible ? 0.6 : 0.4 }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0.1 }}>
<SvgIcon icon={IconEnum.plus} />
</motion.span>
</div>
</li>
<StyledFilter
initial={{ height: visible4 ? '0px' : '45px' }}
animate={{ height: visible4 ? '0px' : '45px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}>
<input placeholder='Filter...' />
</StyledFilter>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.folderOpen} />
</div>
<h5>pet</h5>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-post">POST</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-get">GET</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-put">PUT</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-del">DEL</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-post">POST</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-put">PUT</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.folderOpen} />
</div>
<h5>store</h5>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-put">PUT</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-del">DEL</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-post">POST</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div></div>
<h6 className="method-put">PUT</h6>
<p>/store/inventory/(orderId)</p>
</StyledItem>
<StyledItem>
<div>
<SvgIcon icon={IconEnum.folder} />
</div>
<h5>user</h5>
</StyledItem>
</StyledSection>
<StyledSection>
<li>
<h6>MODELS</h6>
<SvgIcon icon={IconEnum.plus} />
</li>
</StyledSection>
<StyledSection>
<li>
<h6>SECURITY</h6>
<SvgIcon icon={IconEnum.plus} />
</li>
</StyledSection>
<StyledSection>
<li>
<div>
<SvgIcon icon={IconEnum.gear} />
</div>
<h5>Settings</h5>
</li>
</StyledSection>
</StyledSidebar>
);
}
export default Sidebar;

20
packages/insomnia-components/components/sidebar.stories.js Normal file
View File

@ -0,0 +1,20 @@
import React from 'react';
import Sidebar from './sidebar';
import { withKnobs } from '@storybook/addon-knobs';
import { withDesign } from 'storybook-addon-designs';
export default {
title: 'Sidebar',
decorators: [withKnobs, withDesign],
};
export const _default = () => <Sidebar />;
_default.story = {
parameters: {
design: {
type: 'figma',
url: 'https://www.figma.com/file/sS7oBbKmDvhtq5lXyTckVe/Style-Guide-Components?node-id=0%3A2',
},
},
};

130
packages/insomnia-components/components/svg-icon.js
View File

@ -5,14 +5,43 @@ import MemoSvgIcnArrowRight from '../assets/svgr/IcnArrowRight';
import MemoSvgIcnChevronDown from '../assets/svgr/IcnChevronDown';
import MemoSvgIcnChevronUp from '../assets/svgr/IcnChevronUp';
import MemoSvgIcnClock from '../assets/svgr/IcnClock';
import MemoSvgIcnEllipsis from '../assets/svgr/IcnEllipsis';
import MemoSvgIcnEmpty from '../assets/svgr/IcnEmpty';
import MemoSvgIcnErrors from '../assets/svgr/IcnErrors';
import MemoSvgIcnGitBranch from '../assets/svgr/IcnGitBranch';
import MemoSvgIcnGithubLogo from '../assets/svgr/IcnGithubLogo';
import MemoSvgIcnInfo from '../assets/svgr/IcnInfo';
import MemoSvgIcnSearch from '../assets/svgr/IcnSearch';
import MemoSvgIcnBitbucketLogo from '../assets/svgr/IcnBitbucketLogo';
import MemoSvgIcnWarning from '../assets/svgr/IcnWarning';
import MemoSvgIcnEllipsis from '../assets/svgr/IcnEllipsis';
import MemoSvgIcnBurgerMenu from '../assets/svgr/IcnBurgerMenu';
import MemoSvgIcnCheckmark from '../assets/svgr/IcnCheckmark';
import MemoSvgIcnCookie from '../assets/svgr/IcnCookie';
import MemoSvgIcnDragGrip from '../assets/svgr/IcnDragGrip';
import MemoSvgIcnElevator from '../assets/svgr/IcnElevator';
import MemoSvgIcnEllipsisCircle from '../assets/svgr/IcnEllipsisCircle';
import MemoSvgIcnFile from '../assets/svgr/IcnFile';
import MemoSvgIcnFolderOpen from '../assets/svgr/IcnFolderOpen';
import MemoSvgIcnFolder from '../assets/svgr/IcnFolder';
import MemoSvgIcnGear from '../assets/svgr/IcnGear';
import MemoSvgIcnGitlabLogo from '../assets/svgr/IcnGitlabLogo';
import MemoSvgIcnGUI from '../assets/svgr/IcnGui';
import MemoSvgIcnIndendation from '../assets/svgr/IcnIndentation';
import MemoSvgIcnMinusCircleFill from '../assets/svgr/IcnMinusCircleFill';
import MemoSvgIcnMinusCircle from '../assets/svgr/IcnMinusCircle';
import MemoSvgIcnPlaceholder from '../assets/svgr/IcnPlaceholder';
import MemoSvgIcnPlay from '../assets/svgr/IcnPlay';
import MemoSvgIcnPlus from '../assets/svgr/IcnPlus';
import MemoSvgIcnProhibited from '../assets/svgr/IcnProhibited';
import MemoSvgIcnQuestionFill from '../assets/svgr/IcnQuestionFill';
import MemoSvgIcnQuestion from '../assets/svgr/IcnQuestion';
import MemoSvgIcnSearch from '../assets/svgr/IcnSearch';
import MemoSvgIcnSecCert from '../assets/svgr/IcnSecCert';
import MemoSvgIcnSync from '../assets/svgr/IcnSync';
import MemoSvgIcnTrashcan from '../assets/svgr/IcnTrashcan';
import MemoSvgIcnTriangle from '../assets/svgr/IcnTriangle';
import MemoSvgIcnUser from '../assets/svgr/IcnUser';
import MemoSvgIcnWarningCircle from '../assets/svgr/IcnWarningCircle';
import MemoSvgIcnX from '../assets/svgr/IcnX';
import MemoSvgIcnInfo from '../assets/svgr/IcnInfo';
export const ThemeEnum = {
default: 'default',
@ -38,9 +67,38 @@ export const IconEnum = {
error: 'error',
gitBranch: 'git-branch',
github: 'github',
bitbucket: 'bitbucket',
info: 'info',
search: 'search',
warning: 'warning',
burgerMenu: 'burger-menu',
checkmark: 'checkmark',
cookie: 'cookie',
dragGrip: 'drag-grip',
elevator: 'elevator',
ellipsesCircle: 'ellipses-circle',
file: 'file',
folder: 'folder',
folderOpen: 'folder-open',
gear: 'gear',
gitlabLogo: 'gitlab-logo',
gui: 'gui',
indentation: 'indentation',
minusCircle: 'minus-circle',
minusCircleFill: 'minus-circle-fill',
placeholder: 'placeholder',
play: 'play',
plus: 'plus',
prohibited: 'prohibited',
questionFill: 'question-fill',
question: 'question',
secCert: 'sec-cert',
sync: 'sync',
trashcan: 'trashcan',
triangle: 'triangle',
user: 'user',
warningCircle: 'warning-circle',
x: 'x',
// Blank icon
empty: 'empty',
@ -49,7 +107,7 @@ export const IconEnum = {
type IconKeys = $Values<typeof IconEnum>;
type Props = {
icon: IconKeys;
icon: IconKeys,
label?: React.Node,
};
@ -63,27 +121,27 @@ const SvgIconStyled: React.ComponentType<{ theme: ThemeKeys, hasLabel: boolean }
user-select: none;
${({ hasLabel }) => (hasLabel ? 'margin-right: var(--padding-xs);' : null)}
${({ theme }) => {
switch (theme) {
case ThemeEnum.danger:
case ThemeEnum.info:
case ThemeEnum.notice:
case ThemeEnum.success:
case ThemeEnum.surprise:
case ThemeEnum.warning:
return `fill: var(--color-${theme}); color: var(--color-font-${theme});`;
case ThemeEnum.highlight:
return 'fill: var(--hl); color: var(--color-font-danger);';
case ThemeEnum.default:
default:
return 'fill: var(--color-font); color: var(--color-font);';
}
}}
switch (theme) {
case ThemeEnum.danger:
case ThemeEnum.info:
case ThemeEnum.notice:
case ThemeEnum.success:
case ThemeEnum.surprise:
case ThemeEnum.warning:
return `fill: var(--color-${theme}); color: var(--color-font-${theme});`;
case ThemeEnum.highlight:
return 'fill: var(--hl); color: var(--color-font-danger);';
case ThemeEnum.default:
default:
return 'fill: var(--color-font); color: var(--color-font);';
}
}}
}
`;
type IconDictionary = {
[IconKeys]: [ThemeKeys, React.ComponentType<any>];
}
[IconKeys]: [ThemeKeys, React.ComponentType<any>],
};
class SvgIcon extends React.Component<Props> {
static icons: IconDictionary = {
@ -96,9 +154,39 @@ class SvgIcon extends React.Component<Props> {
[IconEnum.error]: [ThemeEnum.danger, MemoSvgIcnErrors],
[IconEnum.gitBranch]: [ThemeEnum.default, MemoSvgIcnGitBranch],
[IconEnum.github]: [ThemeEnum.default, MemoSvgIcnGithubLogo],
[IconEnum.bitbucket]: [ThemeEnum.default, MemoSvgIcnBitbucketLogo],
[IconEnum.info]: [ThemeEnum.highlight, MemoSvgIcnInfo],
[IconEnum.search]: [ThemeEnum.default, MemoSvgIcnSearch],
[IconEnum.warning]: [ThemeEnum.notice, MemoSvgIcnWarning],
[IconEnum.burgerMenu]: [ThemeEnum.default, MemoSvgIcnBurgerMenu],
[IconEnum.checkmark]: [ThemeEnum.default, MemoSvgIcnCheckmark],
[IconEnum.cookie]: [ThemeEnum.default, MemoSvgIcnCookie],
[IconEnum.dragGrip]: [ThemeEnum.default, MemoSvgIcnDragGrip],
[IconEnum.elevator]: [ThemeEnum.default, MemoSvgIcnElevator],
[IconEnum.ellipsesCircle]: [ThemeEnum.default, MemoSvgIcnEllipsisCircle],
[IconEnum.elevator]: [ThemeEnum.default, MemoSvgIcnElevator],
[IconEnum.file]: [ThemeEnum.default, MemoSvgIcnFile],
[IconEnum.folder]: [ThemeEnum.default, MemoSvgIcnFolder],
[IconEnum.folderOpen]: [ThemeEnum.default, MemoSvgIcnFolderOpen],
[IconEnum.gear]: [ThemeEnum.default, MemoSvgIcnGear],
[IconEnum.gitlabLogo]: [ThemeEnum.default, MemoSvgIcnGitlabLogo],
[IconEnum.gui]: [ThemeEnum.default, MemoSvgIcnGUI],
[IconEnum.indentation]: [ThemeEnum.default, MemoSvgIcnIndendation],
[IconEnum.minusCircle]: [ThemeEnum.default, MemoSvgIcnMinusCircle],
[IconEnum.minusCircleFill]: [ThemeEnum.default, MemoSvgIcnMinusCircleFill],
[IconEnum.placeholder]: [ThemeEnum.default, MemoSvgIcnPlaceholder],
[IconEnum.play]: [ThemeEnum.default, MemoSvgIcnPlay],
[IconEnum.plus]: [ThemeEnum.default, MemoSvgIcnPlus],
[IconEnum.prohibited]: [ThemeEnum.default, MemoSvgIcnProhibited],
[IconEnum.question]: [ThemeEnum.default, MemoSvgIcnQuestion],
[IconEnum.questionFill]: [ThemeEnum.default, MemoSvgIcnQuestionFill],
[IconEnum.secCert]: [ThemeEnum.default, MemoSvgIcnSecCert],
[IconEnum.sync]: [ThemeEnum.default, MemoSvgIcnSync],
[IconEnum.trashcan]: [ThemeEnum.default, MemoSvgIcnTrashcan],
[IconEnum.triangle]: [ThemeEnum.default, MemoSvgIcnTriangle],
[IconEnum.user]: [ThemeEnum.default, MemoSvgIcnUser],
[IconEnum.warningCircle]: [ThemeEnum.default, MemoSvgIcnWarningCircle],
[IconEnum.x]: [ThemeEnum.default, MemoSvgIcnX],
};
render() {

18
packages/insomnia-components/dist/index.js vendored
View File

File diff suppressed because one or more lines are too long

2
packages/insomnia-components/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long

10
packages/insomnia-components/flow-typed/@storybook/framer-motion.js vendored Normal file
View File

@ -0,0 +1,10 @@
// @flow
declare module 'framer-motion' {
declare module.exports: {
motion: Object,
useCycle: Object,
AnimatePresence: Object,
withKnobs: Object,
}
}

2
packages/insomnia-components/index.js
View File

@ -9,6 +9,7 @@ import _GravatarImg from './components/gravatar-img';
import _Header from './components/header';
import _NoticeTable from './components/notice-table';
import _SvgIcon from './components/svg-icon';
import _Sidebar from './components/sidebar';
import _Switch from './components/switch';
import * as table from './components/table';
@ -24,6 +25,7 @@ export const Header = _Header;
export const NoticeTable = _NoticeTable;
export const SvgIcon = _SvgIcon;
export const Switch = _Switch;
export const Sidebar = _Sidebar;
export const Table = table.Table;
export const TableBody = table.TableBody;
export const TableData = table.TableData;

204
packages/insomnia-components/package-lock.json generated
View File

@ -1367,6 +1367,23 @@
"integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==",
"dev": true
},
"@popmotion/easing": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/@popmotion/easing/-/easing-1.0.2.tgz",
"integrity": "sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw=="
},
"@popmotion/popcorn": {
"version": "0.4.4",
"resolved": "https://registry.npmjs.org/@popmotion/popcorn/-/popcorn-0.4.4.tgz",
"integrity": "sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==",
"requires": {
"@popmotion/easing": "^1.0.1",
"framesync": "^4.0.1",
"hey-listen": "^1.0.8",
"style-value-types": "^3.1.7",
"tslib": "^1.10.0"
}
},
"@reach/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz",
@ -6624,6 +6641,31 @@
"map-cache": "^0.2.2"
}
},
"framer-motion": {
"version": "1.10.3",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-1.10.3.tgz",
"integrity": "sha512-VooCzGWg7brSO4Gc0YwpY5AadJe4OPS74ZyOlOHWll5rMXCoOc6Ia3uDQ6RfOJlwCP/D9TQuRGtboyJiVXjVcw==",
"requires": {
"@emotion/is-prop-valid": "^0.8.2",
"@popmotion/easing": "^1.0.2",
"@popmotion/popcorn": "^0.4.2",
"framesync": "^4.0.4",
"hey-listen": "^1.0.8",
"popmotion": "9.0.0-beta-8",
"style-value-types": "^3.1.6",
"stylefire": "^7.0.2",
"tslib": "^1.10.0"
}
},
"framesync": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-4.0.4.tgz",
"integrity": "sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==",
"requires": {
"hey-listen": "^1.0.8",
"tslib": "^1.10.0"
}
},
"fresh": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
@ -6710,7 +6752,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.2.0",
@ -6731,12 +6774,14 @@
"balanced-match": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"brace-expansion": {
"version": "1.1.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^1.0.0",
"concat-map": "0.0.1"
@ -6751,17 +6796,20 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
@ -6878,7 +6926,8 @@
"inherits": {
"version": "2.0.4",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.5",
@ -6890,6 +6939,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
@ -6904,6 +6954,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
@ -6911,12 +6962,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"minipass": {
"version": "2.9.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.1.2",
"yallist": "^3.0.0"
@ -6935,6 +6988,7 @@
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
@ -7024,7 +7078,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"object-assign": {
"version": "4.1.1",
@ -7036,6 +7091,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
@ -7121,7 +7177,8 @@
"safe-buffer": {
"version": "5.1.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"safer-buffer": {
"version": "2.1.2",
@ -7157,6 +7214,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
@ -7176,6 +7234,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
@ -7219,12 +7278,14 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"yallist": {
"version": "3.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
@ -7594,6 +7655,11 @@
"integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
"dev": true
},
"hey-listen": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
},
"highlight.js": {
"version": "9.13.1",
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.13.1.tgz",
@ -8571,6 +8637,12 @@
"integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
"dev": true
},
"lodash.once": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz",
"integrity": "sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=",
"dev": true
},
"lodash.throttle": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz",
@ -8620,6 +8692,12 @@
"semver": "^5.6.0"
}
},
"make-event-props": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.2.0.tgz",
"integrity": "sha512-BmWFkm/jZzVH9A0tEBdkjAARUz/eha+5IRyfOndeSMKRadkgR5DawoBHoRwLxkYmjJOI5bHkXKpaZocxj+dKgg==",
"dev": true
},
"map-age-cleaner": {
"version": "0.1.3",
"resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
@ -8757,6 +8835,12 @@
"is-what": "^3.3.1"
}
},
"merge-class-names": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/merge-class-names/-/merge-class-names-1.3.0.tgz",
"integrity": "sha512-k0Qaj36VBpKgdc8c188LEZvo6v/zzry/FUufwopWbMSp6/knfVFU/KIB55/hJjeIpg18IH2WskXJCRnM/1BrdQ==",
"dev": true
},
"merge-deep": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/merge-deep/-/merge-deep-3.0.2.tgz",
@ -9147,6 +9231,12 @@
"minimatch": "^3.0.2"
}
},
"node-ensure": {
"version": "0.0.0",
"resolved": "https://registry.npmjs.org/node-ensure/-/node-ensure-0.0.0.tgz",
"integrity": "sha1-7K52QVDemYYexcgQ/V0Jaxg5Mqc=",
"dev": true
},
"node-fetch": {
"version": "1.7.3",
"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
@ -9718,6 +9808,16 @@
"sha.js": "^2.4.8"
}
},
"pdfjs-dist": {
"version": "2.1.266",
"resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.1.266.tgz",
"integrity": "sha512-Jy7o1wE3NezPxozexSbq4ltuLT0Z21ew/qrEiAEeUZzHxMHGk4DUV1D7RuCXg5vJDvHmjX1YssN+we9QfRRgXQ==",
"dev": true,
"requires": {
"node-ensure": "^0.0.0",
"worker-loader": "^2.0.0"
}
},
"picomatch": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.1.tgz",
@ -9811,6 +9911,19 @@
"@babel/runtime": "^7.6.3"
}
},
"popmotion": {
"version": "9.0.0-beta-8",
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-9.0.0-beta-8.tgz",
"integrity": "sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==",
"requires": {
"@popmotion/easing": "^1.0.1",
"@popmotion/popcorn": "^0.4.2",
"framesync": "^4.0.4",
"hey-listen": "^1.0.8",
"style-value-types": "^3.1.6",
"tslib": "^1.10.0"
}
},
"popper.js": {
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
@ -10606,6 +10719,20 @@
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
"dev": true
},
"react-pdf": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-4.1.0.tgz",
"integrity": "sha512-SYwkWc+vRQHfrpDls3DOgn4G+wT0mYGJRor20e28GPRW8VB+6o8WqZ4QZxsl50z+dKM7UscXFnK/02eN3NXi2g==",
"dev": true,
"requires": {
"@babel/runtime": "^7.0.0",
"lodash.once": "^4.1.1",
"make-event-props": "^1.1.0",
"merge-class-names": "^1.1.1",
"pdfjs-dist": "2.1.266",
"prop-types": "^15.6.2"
}
},
"react-popper": {
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
@ -11739,6 +11866,15 @@
"integrity": "sha512-tWEpK0snS2RPUq1i3R6OahfJNjWCQYNxq0+by1amCSuw0mXtymJpzmZIeYpA1UAa+7B0grCpNYIbDcd7AgTbFg==",
"dev": true
},
"storybook-addon-designs": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/storybook-addon-designs/-/storybook-addon-designs-5.2.0.tgz",
"integrity": "sha512-53+d15uqoAaNQffbpvuSkcgubZh7cKNC+44azS+aDMzQubgHj9hQZ255XSmtXGxfyVsngGpK1QnHCCZ+13KH/Q==",
"dev": true,
"requires": {
"react-pdf": "^4.0.5"
}
},
"stream-browserify": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/stream-browserify/-/stream-browserify-2.0.2.tgz",
@ -11904,6 +12040,15 @@
}
}
},
"style-value-types": {
"version": "3.1.7",
"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-3.1.7.tgz",
"integrity": "sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg==",
"requires": {
"hey-listen": "^1.0.8",
"tslib": "^1.10.0"
}
},
"styled-components": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.4.1.tgz",
@ -11924,6 +12069,18 @@
"supports-color": "^5.5.0"
}
},
"stylefire": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/stylefire/-/stylefire-7.0.3.tgz",
"integrity": "sha512-Q0l7NSeFz/OkX+o6/7Zg3VZxSAZeQzQpYomWmIpOehFM/rJNMSLVX5fgg6Q48ut2ETNKwdhm97mPNU643EBCoQ==",
"requires": {
"@popmotion/popcorn": "^0.4.4",
"framesync": "^4.0.0",
"hey-listen": "^1.0.8",
"style-value-types": "^3.1.7",
"tslib": "^1.10.0"
}
},
"stylis": {
"version": "3.5.4",
"resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz",
@ -12275,8 +12432,7 @@
"tslib": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.10.0.tgz",
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==",
"dev": true
"integrity": "sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ=="
},
"tty-browserify": {
"version": "0.0.0",
@ -13035,6 +13191,28 @@
"errno": "~0.1.7"
}
},
"worker-loader": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/worker-loader/-/worker-loader-2.0.0.tgz",
"integrity": "sha512-tnvNp4K3KQOpfRnD20m8xltE3eWh89Ye+5oj7wXEEHKac1P4oZ6p9oTj8/8ExqoSBnk9nu5Pr4nKfQ1hn2APJw==",
"dev": true,
"requires": {
"loader-utils": "^1.0.0",
"schema-utils": "^0.4.0"
},
"dependencies": {
"schema-utils": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.7.tgz",
"integrity": "sha512-v/iwU6wvwGK8HbU9yi3/nhGzP0yGSuhQMzL6ySiec1FSrZZDkhm4noOSWzrNFo/jEc+SJY6jRTwuwbSXJPDUnQ==",
"dev": true,
"requires": {
"ajv": "^6.1.0",
"ajv-keywords": "^3.1.0"
}
}
}
},
"worker-rpc": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/worker-rpc/-/worker-rpc-0.1.1.tgz",

2
packages/insomnia-components/package.json
View File

@ -24,6 +24,7 @@
"@storybook/addon-contexts": "^5.3.10",
"@storybook/addon-info": "^5.3.9",
"@storybook/addon-knobs": "^5.3.10",
"storybook-addon-designs": "^5.2.0",
"@storybook/react": "^5.3.9",
"@svgr/cli": "^5.3.0",
"babel-loader": "^8.0.6",
@ -35,6 +36,7 @@
"autobind-decorator": "^2.4.0",
"classnames": "^2.2.6",
"fuzzysort": "^1.1.4",
"framer-motion": "^1.10.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",