mirror/insomnia
1
0 Fork 0
mirror of https://github.com/Kong/insomnia.git synced 2026-10-24 23:59:16 -04:00
Code Issues Packages Projects Releases Wiki Activity

Storybook Sidebar Provisioning & WIP Implementation (#2125)

Browse Source 
* Migrating dimensions, latest SVG, stubbing sidebar

* Revert "Migrating dimensions, latest SVG, stubbing sidebar"

This reverts commit 5014a68f52.

* Revert "Revert "Migrating dimensions, latest SVG, stubbing sidebar""

This reverts commit 28c130c8d8.

* Post merge bootstrap & build

* Linting

* Updating Story Heirarchy

* Migrating legacy tooltip component

* Reverting spacing integration into core dimensions

* Cleaning up comments, tweaking CSS var usage

* Removing static height

* Cleaning up static CSS values, re-organizing sliding panel, fixing search icon

* adding flow def for autobind in new SB instance

* PR feedback, removing new vars/updating markup

* Fixing lint > flow error on type
This commit is contained in:
Mike Ellan authored and GitHub committed 2020-05-14 14:00:29 -04:00
1 parent 200c354a3a
commit 4f39486eb7
61 files changed
+2377 -339
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/insomnia-app/.storybook/preview-head.html
+732
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>
packages/insomnia-app/app/ui/css/constants/dimensions.less
+1 -1
View File
@@ -67,4 +67,4 @@ html {
.txt-xxl {
font-size: var(--font-size-xxl) !important;
}
}
packages/insomnia-app/app/ui/css/layout/base.less
+36 -6
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);
packages/insomnia-components/.storybook/main.js
+1
View File
@@ -2,5 +2,6 @@ module.exports = {
addons: [
'@storybook/addon-knobs/register',
'@storybook/addon-contexts/register',
'storybook-addon-designs/register',
]
};
packages/insomnia-components/.storybook/preview-head.html
+500 -284
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;
}
@@ -171,7 +171,8 @@
font-size: 0.8rem;
}
body {
html, body {
}
</style>
@@ -179,16 +180,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: var(--hl-md);
--color-sidebar: var(--color-bg);
--color-text: var(--color-font);
/* Padding */
--padding-md: calc(var(--font-size) * 1.2);
--padding-sm: calc(var(--font-size) * 0.6);
@@ -226,297 +255,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>
packages/insomnia-components/assets/icn-bitbucket-logo.svg
+4
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

packages/insomnia-components/assets/icn-burger-menu.svg
+4
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

packages/insomnia-components/assets/icn-checkmark.svg
+4
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

packages/insomnia-components/assets/icn-cookie.svg
+4
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

packages/insomnia-components/assets/icn-drag-grip.svg
+4
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

packages/insomnia-components/assets/icn-elevator.svg
+5
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

packages/insomnia-components/assets/icn-ellipsis-circle.svg
+7
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

packages/insomnia-components/assets/icn-file.svg
+4
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

packages/insomnia-components/assets/icn-folder-open.svg
+4
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

packages/insomnia-components/assets/icn-folder.svg
+4
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

packages/insomnia-components/assets/icn-gear.svg
+4
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

packages/insomnia-components/assets/icn-gitlab-logo.svg
+4
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

packages/insomnia-components/assets/icn-gui.svg
+4
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

packages/insomnia-components/assets/icn-indentation.svg
+4
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

packages/insomnia-components/assets/icn-minus-circle-fill.svg
+4
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

packages/insomnia-components/assets/icn-minus-circle.svg
+4
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

packages/insomnia-components/assets/icn-placeholder.svg
+12
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

packages/insomnia-components/assets/icn-play.svg
+4
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

packages/insomnia-components/assets/icn-plus.svg
+4
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

packages/insomnia-components/assets/icn-prohibited.svg
+4
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

packages/insomnia-components/assets/icn-question-fill.svg
+4
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

packages/insomnia-components/assets/icn-question.svg
+6
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

packages/insomnia-components/assets/icn-search.svg
+1 -1
View File
@@ -1,4 +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"/>
<rect width="14" height="14" fill="white" fill-opacity="0"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11C7.1099 11 8.13533 10.6384 8.96489 10.0265L12.1161 13.1768C12.3114 13.372 12.628 13.372 12.8232 13.1768L13.1768 12.8232C13.372 12.628 13.372 12.3114 13.1768 12.1161L10.025 8.965L10.1742 8.75348C10.6961 7.96383 11 7.0174 11 6ZM2.5 6C2.5 4.067 4.067 2.5 6 2.5C7.933 2.5 9.5 4.067 9.5 6C9.5 6.94102 9.12863 7.79531 8.52445 8.42429L8.46967 8.46967C8.45192 8.48742 8.43524 8.50584 8.42229 8.52637C7.7935 9.12942 6.94003 9.5 6 9.5C4.067 9.5 2.5 7.933 2.5 6Z" fill="black"/>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 752 B

After

Width:  |  Height:  |  Size: 769 B

packages/insomnia-components/assets/icn-sec-cert.svg
+4
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

packages/insomnia-components/assets/icn-sync.svg
+5
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

packages/insomnia-components/assets/icn-trashcan.svg
+4
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

packages/insomnia-components/assets/icn-triangle.svg
+4
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

packages/insomnia-components/assets/icn-user.svg
+4
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

packages/insomnia-components/assets/icn-warning-circle.svg
+4
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

packages/insomnia-components/assets/icn-x.svg
+4
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

packages/insomnia-components/components/breadcrumb.stories.js
+1 -1
View File
@@ -1,6 +1,6 @@
import React from 'react';
import Breadcrumb from './breadcrumb';
export default { title: 'Breadcrumb' };
export default { title: '1st Party | Breadcrumb' };
export const _default = () => <Breadcrumb className="breadcrumb" crumbs={['Documents', 'Deployment']} />;
packages/insomnia-components/components/button.stories.js
+1 -1
View File
@@ -6,7 +6,7 @@ import styled from 'styled-components';
import SvgIcon, { IconEnum } from './svg-icon';
export default {
title: 'Button',
title: '1st Party | Button',
decorators: [withKnobs],
};
packages/insomnia-components/components/card.stories.js
+1 -1
View File
@@ -6,7 +6,7 @@ import { SvgIcon } from '../index';
import { IconEnum } from './svg-icon';
export default {
title: 'Card',
title: '1st Party | Card',
decorators: [withKnobs],
};
packages/insomnia-components/components/dropdown/dropdown.stories.js
+1 -1
View File
@@ -7,7 +7,7 @@ import SvgIcon from '../svg-icon';
import Button from '../button';
export default {
title: 'Dropdown',
title: '1st Party | Dropdown',
decorators: [withKnobs],
};
packages/insomnia-components/components/gravatar-img.stories.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import GravatarImg from './gravatar-img';
export default { title: 'Gravatar Image' };
export default { title: '1st Party | Gravatar' };
export const _default = () => <GravatarImg email="support@insomnia.rest" size={200} />;
packages/insomnia-components/components/header.stories.js
+1 -1
View File
@@ -4,7 +4,7 @@ import GravatarImg from './gravatar-img';
import Breadcrumb from './breadcrumb';
import Switch from './switch';
export default { title: 'Header' };
export default { title: '1st Party | Header' };
export const _default = () => <Header />;
packages/insomnia-components/components/notice-table.stories.js
+1 -1
View File
@@ -2,7 +2,7 @@
import * as React from 'react';
import NoticeTable from './notice-table';
export default { title: 'NoticeTable' };
export default { title: '1st Party | NoticeTable' };
const notices = [
{ type: 'error', line: 3, message: 'This must be fixed now!' },
packages/insomnia-components/components/radio-button-group.stories.js
+1 -1
View File
@@ -3,7 +3,7 @@ import * as React from 'react';
import RadioButtonGroup from './radio-button-group';
export default { title: 'Radio Button Group' };
export default { title: '1st Party | Radio Button Group' };
export const _default = () => <RadioButtonGroup>
<label><input type="radio" name="specSrc" value="scratch" onClick={() => window.alert('Selected')} /><span>From Scratch</span></label>
packages/insomnia-components/components/sidebar.js
+350
View File
@@ -0,0 +1,350 @@
// @flow
import * as React from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import styled from 'styled-components';
import Tooltip from './tooltip';
import SvgIcon, { IconEnum } from './svg-icon';
type Props = {|
className?: string,
|};
const StyledSidebar: React.ComponentType<{}> = styled.div`
/* To constants */
background-color: var(--color-bg);
border: 1px solid var(--hl-md);
color: var(--color-font);
position: relative;
svg {
font-size: var(--font-size-xl);
fill: var(--hl-lg);
}
.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);
display: flex;
flex-grow: 1;
&:hover {
cursor: default;
}
}
h5 {
font-size: var(--font-size-sm);
}
/* END To constants */
width: 260px;
height: 100%;
`;
const StyledSection: React.ComponentType<{}> = styled(motion.ul)`
overflow: hidden;
box-sizing: border-box;
border-bottom: 1px solid var(--hl-md);
`;
const StyledHeader: React.ComponentType<{}> = styled.li`
display: flex;
justify-content: space-between;
align-items: center;
&:hover {
background-color: var(--hl-xs);
}
& > * {
padding: var(--padding-md) var(--padding-md) var(--padding-md) var(--padding-md);
font-size: var(--font-size-md);
svg {
margin-left: var(--padding-sm);
&:hover {
fill:var(--color-font);
opacity: 1;
}
}
}
`;
const StyledItem: React.ComponentType<{}> = styled.li`
padding: var(--padding-sm) 0 var(--padding-sm) 0;
margin: 0px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--padding-lg), 1fr));
column-gap: var(--padding-sm);
grid-template-rows: 1fr;
align-items: start;
white-space: nowrap;
font-size: var(--font-size-md);
line-height: calc(var(--font-size) * 1.25);
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(--padding-md);
}
`;
const StyledFilter: React.ComponentType<{}> = styled(motion.div)`
padding-left: var(--padding-md);
padding-right: var(--padding-md);
overflow:hidden;
input {
box-sizing:border-box;
width:100%;
font-size: var(--font-size-md);
padding: var(--padding-sm);
margin-top: var(--padding-md);
margin-bottom: var(--padding-sm);
}
`;
const StyledPanel: React.ComponentType<{}> = styled(motion.div)`
height: 0px;
`;
function Sidebar(props: Props) {
// Temp garbage for easing/transition/sequencing dial-in
const [visible, setVisible] = useState(false);
const [visible2, setVisible2] = useState(false);
const [visible3, setVisible3] = useState(true);
const [visible4, setVisible4] = useState(true);
const toggleVisible = () => setVisible(!visible);
const toggleVisible2 = () => setVisible2(!visible2);
const toggleVisible3 = () => setVisible3(!visible3);
const toggleVisible4 = () => setVisible4(!visible4);
return (
<StyledSidebar className="theme--sidebar">
<StyledSection>
<StyledHeader>
<h6>INFO</h6>
</StyledHeader>
</StyledSection>
<StyledSection>
<StyledHeader>
<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 }}>
<Tooltip message="Add" position="top">
<SvgIcon icon={IconEnum.plus} />
</Tooltip>
</motion.span>
</div>
</StyledHeader>
<StyledPanel
initial={{ height: visible2 ? '100%' : '0px' }}
animate={{ height: visible2 ? '100%' : '0px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}
>
<StyledFilter
initial={{ height: visible3 ? '0px' : '100%' }}
animate={{ height: visible3 ? '0px' : '100%' }}
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>
</StyledPanel>
</StyledSection>
<StyledSection>
<StyledHeader>
<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 }}>
<Tooltip message="Add" position="top">
<SvgIcon icon={IconEnum.plus} />
</Tooltip>
</motion.span>
</div>
</StyledHeader>
<StyledPanel
initial={{ height: visible ? '100%' : '0px' }}
animate={{ height: visible ? '100%' : '0px' }}
transition={{ duration: 0.2, ease: 'easeInOut', delay: 0 }}
>
<StyledFilter
initial={{ height: visible4 ? '0px' : '100%' }}
animate={{ height: visible4 ? '0px' : '100%' }}
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>
</StyledPanel>
</StyledSection>
<StyledSection>
<StyledHeader>
<h6>MODELS</h6>
<SvgIcon icon={IconEnum.plus} />
</StyledHeader>
</StyledSection>
<StyledSection>
<StyledHeader>
<h6>SECURITY</h6>
<SvgIcon icon={IconEnum.plus} />
</StyledHeader>
</StyledSection>
</StyledSidebar>
);
}
export default Sidebar;
packages/insomnia-components/components/sidebar.stories.js
+20
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: '1st Party | 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',
},
},
};
packages/insomnia-components/components/svg-icon.js
+109 -21
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() {
packages/insomnia-components/components/svg-icon.stories.js
+1 -1
View File
@@ -6,7 +6,7 @@ import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from '.
import styled from 'styled-components';
export default {
title: 'SvgIcon',
title: '1st Party | SvgIcon',
decorators: [withKnobs],
};
packages/insomnia-components/components/switch.stories.js
+1 -1
View File
@@ -1,7 +1,7 @@
import React from 'react';
import Switch from './switch';
export default { title: 'Sliding Switch' };
export default { title: '1st Party | Sliding Switch' };
export const _design = () => <Switch optionItems={[{ label: 'DESIGN', selected: true }, { label: 'DEBUG', selected: false }]} />;
packages/insomnia-components/components/table.stories.js
+1 -1
View File
@@ -2,7 +2,7 @@
import * as React from 'react';
import { Table, TableBody, TableData, TableHead, TableHeader, TableRow } from './table';
export default { title: 'Table' };
export default { title: '1st Party | Table' };
export const _default = () => (
<Table>
packages/insomnia-components/components/toggle-switch.stories.js
+1 -1
View File
@@ -1,7 +1,7 @@
import * as React from 'react';
import ToggleSwitch from './toggle-switch';
export default { title: '1 | 2 / Toggle Switch' };
export default { title: '3rd Party | Toggle Switch' };
const defaultOnChange = () => {};
packages/insomnia-components/components/tooltip.js
+236
View File
@@ -0,0 +1,236 @@
// @flow
import * as React from 'react';
import autobind from 'autobind-decorator';
import classnames from 'classnames';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
type Props = {
children: React.Node,
message: React.Node,
position?: 'bottom' | 'top' | 'right' | 'left',
// Optional
className?: string,
delay?: number,
selectable?: boolean,
wide?: boolean,
};
type State = {
visible: boolean,
};
const StyledTooltip: React.ComponentType<{}> = styled.div`
position: relative;
display: inline-block;
`;
const StyledTooltipBubble: React.ComponentType<{}> = styled.div`
position: fixed;
left: -999999px;
opacity: 0;
background: var(--color-bg);
border: 1px solid var(--hl-sm);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
color: var(--color-font);
padding: var(--padding-sm) var(--padding-md);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
max-width: 20rem;
text-align: center;
z-index: 10;
white-space: normal !important;
word-wrap: break-word;
&.tooltip__bubble--visible {
opacity: 1;
z-index: 99999;
transition: opacity 200ms;
// Back to normal
height: auto;
line-height: normal;
}
&.tooltip__bubble--wide {
max-width: 30rem;
}
`;
@autobind
class Tooltip extends React.PureComponent<Props, State> {
_showTimeout: TimeoutID;
_hideTimeout: TimeoutID;
// TODO: Figure out what type these should be
_tooltip: ?any;
_bubble: ?any;
_id: string;
constructor(props: any) {
super(props);
this.state = {
left: null,
top: null,
bottom: null,
right: null,
maxWidth: null,
maxHeight: null,
visible: false,
};
this._id = Math.random() + '';
}
_setTooltipRef(n: ?any) {
this._tooltip = n;
}
_setBubbleRef(n: ?any) {
this._bubble = n;
}
_handleStopClick(e: MouseEvent): void {
e.stopPropagation();
}
_handleMouseEnter(e: MouseEvent): void {
clearTimeout(this._showTimeout);
clearTimeout(this._hideTimeout);
this._showTimeout = setTimeout((): void => {
const tooltip = this._tooltip;
const bubble = this._bubble;
if (!tooltip) {
return;
}
if (!bubble) {
return;
}
const tooltipRect = tooltip.getBoundingClientRect();
const bubbleRect = bubble.getBoundingClientRect();
const margin = 3;
let left = 0;
let top = 0;
switch (this.props.position) {
case 'right':
top = tooltipRect.top - bubbleRect.height / 2 + tooltipRect.height / 2;
left = tooltipRect.left + tooltipRect.width + margin;
break;
case 'left':
top = tooltipRect.top - bubbleRect.height / 2 + tooltipRect.height / 2;
left = tooltipRect.left - bubbleRect.width - margin;
break;
case 'bottom':
top = tooltipRect.top + tooltipRect.height + margin;
left = tooltipRect.left - bubbleRect.width / 2 + tooltipRect.width / 2;
break;
case 'top':
default:
top = tooltipRect.top - bubbleRect.height - margin;
left = tooltipRect.left - bubbleRect.width / 2 + tooltipRect.width / 2;
break;
}
bubble.style.left = `${Math.max(0, left)}px`;
bubble.style.top = `${Math.max(0, top)}px`;
this.setState({ visible: true });
}, this.props.delay || 400);
}
_handleMouseLeave(): void {
clearTimeout(this._showTimeout);
clearTimeout(this._hideTimeout);
this._hideTimeout = setTimeout(() => {
this.setState({ visible: false });
const bubble = this._bubble;
if (!bubble) {
return;
}
// Reset positioning stuff
bubble.style.left = '';
bubble.style.top = '';
bubble.style.bottom = '';
bubble.style.right = '';
}, 100);
}
_getContainer(): HTMLElement {
let container = document.querySelector('#tooltips-container');
if (!container) {
container = document.createElement('div');
container.id = 'tooltips-container';
container.style.zIndex = '1000000';
container.style.position = 'relative';
document.body && document.body.appendChild(container);
}
return container;
}
componentDidMount() {
// Move the element to the body so we can position absolutely
if (this._bubble) {
const el = ReactDOM.findDOMNode(this._bubble);
el && this._getContainer().appendChild(el);
}
}
componentWillUnmount() {
// Remove the element from the body
if (this._bubble) {
const el = ReactDOM.findDOMNode(this._bubble);
el && this._getContainer().removeChild(el);
}
}
render() {
const { children, message, className, selectable, wide } = this.props;
const { visible } = this.state;
if (!message) {
return children;
}
const tooltipClasses = classnames(className, 'tooltip');
const bubbleClasses = classnames('tooltip__bubble theme--tooltip', {
'tooltip__bubble--visible': visible,
'tooltip__bubble--wide': wide,
selectable: selectable,
});
return (
<StyledTooltip
className={tooltipClasses}
ref={this._setTooltipRef}
id={this._id}
onMouseEnter={this._handleMouseEnter}
onMouseLeave={this._handleMouseLeave}>
<StyledTooltipBubble
className={bubbleClasses}
onClick={this._handleStopClick}
role="tooltip"
aria-hidden={!visible}
aria-describedby={this._id}
ref={this._setBubbleRef}>
{message}
</StyledTooltipBubble>
{children}
</StyledTooltip>
);
}
}
export default Tooltip;
packages/insomnia-components/components/tooltip.stories.js
+56
View File
@@ -0,0 +1,56 @@
import React from 'react';
import Tooltip from './tooltip';
export default { title: 'Tooltip' };
export const onTop = () => (
<div className="text-center">
<Tooltip message="Here is some extra info on top" position="top">
<button className="btn btn--clicky">Hover Me</button>
</Tooltip>
</div>
);
export const onRight = () => (
<div className="text-center">
<Tooltip message="Here is some extra info on the right" position="right">
<button className="btn btn--clicky">Hover Me</button>
</Tooltip>
</div>
);
export const onLeft = () => (
<div className="text-center">
<Tooltip message="Here is some extra info on the left" position="left">
<button className="btn btn--clicky">Hover Me</button>
</Tooltip>
</div>
);
export const withDelay = () => (
<div className="text-center">
<Tooltip message="This tooltip had a 900ms delay" delay={900}>
<button className="btn btn--clicky">Hover Me</button>
</Tooltip>
</div>
);
export const withChildren = () => {
const message = (
<React.Fragment>
This is a{' '}
<a href="#" onClick={e => e.preventDefault()}>
Link
</a>
.
</React.Fragment>
);
return (
<div className="text-center">
<Tooltip message={message}>
<button className="btn btn--clicky">Hover Me</button>
</Tooltip>
</div>
);
};
packages/insomnia-components/dist/index.js
Vendored
+9 -9
View File
File diff suppressed because one or more lines are too long.
packages/insomnia-components/dist/index.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long.
packages/insomnia-components/flow-typed/@storybook/framer-motion.js
Vendored
+10
View File
@@ -0,0 +1,10 @@
// @flow
declare module 'framer-motion' {
declare module.exports: {
motion: Object,
useCycle: Object,
AnimatePresence: Object,
withKnobs: Object,
}
}
packages/insomnia-components/flow-typed/autobind-decorator.js
Vendored
+5
View File
@@ -0,0 +1,5 @@
// @flow
declare module 'autobind-decorator' {
declare module.exports: *;
}
packages/insomnia-components/index.js
+2
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 _ToggleSwitch from './components/toggle-switch';
import * as table from './components/table';
@@ -25,6 +26,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;
packages/insomnia-components/package-lock.json
Generated
+161 -2
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",
@@ -7613,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",
@@ -8590,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",
@@ -8639,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",
@@ -8776,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",
@@ -9166,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",
@@ -9737,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",
@@ -9830,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",
@@ -10625,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",
@@ -11766,6 +11874,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",
@@ -11931,6 +12048,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",
@@ -11951,6 +12077,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",
@@ -12302,8 +12440,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",
@@ -13062,6 +13199,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",
packages/insomnia-components/package.json
+2
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",
packages/openapi-2-kong/dist/index.js
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long.
packages/openapi-2-kong/dist/index.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long.