mirror of
https://github.com/Kong/insomnia.git
synced 2026-04-20 22:27:24 -04:00
Add multi-switch component, refactor radio group, and add success icon (#2324)
* Add multi-switch component, refactor radio group, and add succeess icon * Fix dark theme for storybook Co-authored-by: Mike Ellan <52717970+sonicyeti@users.noreply.github.com>
This commit is contained in:
Gregory Schier
@@ -255,484 +255,239 @@
|
||||
}
|
||||
</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;
|
||||
<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: 96, 48, 191;
|
||||
--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--dropdown__menu,
|
||||
[subtheme="studio-light"] .theme--dropdown__menu--sub {
|
||||
/* Background */
|
||||
--color-info: rgb(0, 91, 158);
|
||||
--color-info-rgb: 0, 91, 158;
|
||||
}
|
||||
|
||||
/* Foreground */
|
||||
--color-font: rgb(255, 255, 255);
|
||||
--color-font-rgb: 255, 255, 255;
|
||||
[theme="studio-light"] .theme--tooltip,
|
||||
[subtheme="studio-light"] .theme--tooltip--sub {
|
||||
/* Background */
|
||||
--color-info: rgb(0, 91, 158);
|
||||
--color-info-rgb: 0, 91, 158;
|
||||
}
|
||||
|
||||
/* 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--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--dropdown__menu,
|
||||
[subtheme='studio-light'] .theme--dropdown__menu--sub {
|
||||
/* Background */
|
||||
--color-info: rgb(0, 91, 158);
|
||||
--color-info-rgb: 0, 91, 158;
|
||||
}
|
||||
/* Foreground */
|
||||
--color-font: rgb(85, 85, 85);
|
||||
--color-font-rgb: 85, 85, 85;
|
||||
}
|
||||
|
||||
[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--dialog,
|
||||
[subtheme="studio-light"] .theme--dialog--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--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(96, 48, 191);
|
||||
--color-surprise-rgb: 96, 48, 191;
|
||||
--color-info: rgb(1, 132, 188);
|
||||
--color-info-rgb: 1, 132, 188;
|
||||
|
||||
/* Foreground */
|
||||
--color-font: rgb(85, 85, 85);
|
||||
--color-font-rgb: 85, 85, 85;
|
||||
}
|
||||
/* Foreground */
|
||||
--color-font: rgb(68, 68, 68);
|
||||
--color-font-rgb: 68, 68, 68;
|
||||
|
||||
[theme='studio-light'] .theme--dialog,
|
||||
[subtheme='studio-light'] .theme--dialog--sub {
|
||||
/* Background */
|
||||
--color-info: rgb(0, 91, 158);
|
||||
--color-info-rgb: 0, 91, 158;
|
||||
}
|
||||
/* Highlight */
|
||||
}
|
||||
|
||||
[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--link,
|
||||
[subtheme="studio-light"] .theme--link--sub {
|
||||
/* Foreground */
|
||||
--color-font: rgb(104, 169, 162);
|
||||
--color-font-rgb: 104, 169, 162;
|
||||
}
|
||||
|
||||
/* Foreground */
|
||||
--color-font: rgb(68, 68, 68);
|
||||
--color-font-rgb: 68, 68, 68;
|
||||
[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(96, 48, 191);
|
||||
--color-info-rgb: 96, 48, 191;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
[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--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;
|
||||
}
|
||||
</style>
|
||||
|
||||
5
packages/insomnia-components/assets/icn-success.svg
Normal file
5
packages/insomnia-components/assets/icn-success.svg
Normal file
@@ -0,0 +1,5 @@
|
||||
<svg width="100%" height="100%" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="6" cy="6" r="6" opacity="0.9" fill="black"/>
|
||||
<path fill="white"
|
||||
d="M8.336,3.811l0.902,0.902l-4.288,4.287c-1.368,-1.326 -2.325,-2.326 -2.325,-2.326l0.902,-0.901l1.424,1.423l3.385,-3.385Z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 328 B |
40
packages/insomnia-components/components/multi-switch.js
Normal file
40
packages/insomnia-components/components/multi-switch.js
Normal file
@@ -0,0 +1,40 @@
|
||||
// @flow
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import type { Props as RadioButtonGroupProps } from './radio-button-group';
|
||||
import RadioButtonGroup from './radio-button-group';
|
||||
|
||||
const ThemedButtonGroup: React.ComponentType<RadioButtonGroupProps> = styled(RadioButtonGroup)`
|
||||
font-weight: bold;
|
||||
background: var(--hl-xs);
|
||||
color: var(--color-font);
|
||||
border: 0;
|
||||
border-radius: 100px;
|
||||
align-content: space-evenly;
|
||||
|
||||
label {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
text-transform: uppercase;
|
||||
padding: var(--padding-xs) var(--padding-md);
|
||||
color: var(--hl);
|
||||
background: transparent;
|
||||
font-size: var(--font-size-sm);
|
||||
margin: 0 auto;
|
||||
min-width: 4rem;
|
||||
}
|
||||
|
||||
input:checked + span {
|
||||
color: var(--color-font);
|
||||
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
|
||||
background: var(--color-bg);
|
||||
}
|
||||
`;
|
||||
|
||||
const MultiSwitch = (props: RadioButtonGroupProps) => {
|
||||
return <ThemedButtonGroup {...props} />;
|
||||
};
|
||||
|
||||
export default MultiSwitch;
|
||||
@@ -0,0 +1,17 @@
|
||||
import * as React from 'react';
|
||||
import MultiSwitch from './multi-switch';
|
||||
|
||||
export default { title: '1st Party | Multi Switch' };
|
||||
|
||||
export const _default = () => (
|
||||
<MultiSwitch
|
||||
name="activity"
|
||||
defaultValue="debug"
|
||||
onChange={v => console.log(v)}
|
||||
choices={[
|
||||
{ label: 'Design', value: 'design' },
|
||||
{ label: 'Debug', value: 'debug' },
|
||||
{ label: 'Test', value: 'test' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
@@ -2,31 +2,44 @@
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
export type Props = {
|
||||
name: string,
|
||||
defaultValue: string,
|
||||
onChange: (value: string) => any,
|
||||
choices: Array<{
|
||||
label: string,
|
||||
value: string,
|
||||
}>,
|
||||
className?: string,
|
||||
};
|
||||
|
||||
const StyledRadioButtonGroup: React.ComponentType<{}> = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: var(--padding-xs);
|
||||
border: 1px solid var(--hl-xs);
|
||||
border-radius: var(--radius--sm);
|
||||
|
||||
& > * :not(:last-child) {
|
||||
margin-right: var(--padding-xs);
|
||||
}
|
||||
`;
|
||||
|
||||
label {
|
||||
cursor: pointer;
|
||||
color: var(--color-font);
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
const StyledRadioButtonBtn: React.ComponentType<{}> = styled.label`
|
||||
cursor: pointer;
|
||||
color: var(--color-font);
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
padding: var(--padding-sm) var(--padding-xs);
|
||||
display: block;
|
||||
}
|
||||
span {
|
||||
text-align: center;
|
||||
padding: var(--padding-sm) var(--padding-xs);
|
||||
display: block;
|
||||
border-radius: var(--line-height-sm);
|
||||
}
|
||||
|
||||
input:checked + span {
|
||||
@@ -34,10 +47,35 @@ const StyledRadioButtonGroup: React.ComponentType<{}> = styled.div`
|
||||
}
|
||||
`;
|
||||
|
||||
class RadioButtonGroup extends React.Component<{}> {
|
||||
render() {
|
||||
return <StyledRadioButtonGroup {...this.props} />;
|
||||
}
|
||||
}
|
||||
export default function RadioButtonGroup({
|
||||
name,
|
||||
choices,
|
||||
defaultValue,
|
||||
onChange,
|
||||
className,
|
||||
}: Props) {
|
||||
const handleChange = e => {
|
||||
if (typeof onChange !== 'function') {
|
||||
return;
|
||||
}
|
||||
|
||||
export default RadioButtonGroup;
|
||||
onChange(e.currentTarget.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledRadioButtonGroup className={className}>
|
||||
{choices.map(({ label, value }) => (
|
||||
<StyledRadioButtonBtn key={value}>
|
||||
<input
|
||||
type="radio"
|
||||
name={name}
|
||||
value={value}
|
||||
defaultChecked={defaultValue === value}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</StyledRadioButtonBtn>
|
||||
))}
|
||||
</StyledRadioButtonGroup>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -6,37 +6,15 @@ import RadioButtonGroup from './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>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="specSrc"
|
||||
value="repository"
|
||||
onClick={() => window.alert('Selected')}
|
||||
/>
|
||||
<span>From Repository</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="specSrc"
|
||||
value="clipboard"
|
||||
onClick={() => window.alert('Selected')}
|
||||
/>
|
||||
<span>From Clipboard</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="specSrc"
|
||||
value="wherever"
|
||||
onClick={() => window.alert('Selected')}
|
||||
/>
|
||||
<span>From Wherever</span>
|
||||
</label>
|
||||
</RadioButtonGroup>
|
||||
<RadioButtonGroup
|
||||
name="dummy"
|
||||
defaultValue="scratch"
|
||||
onChange={v => console.log(v)}
|
||||
choices={[
|
||||
{ label: 'From Scratch', value: 'scratch' },
|
||||
{ label: 'From Repository', value: 'repo' },
|
||||
{ label: 'From Clipboard', value: 'clip' },
|
||||
{ label: 'From Spec', value: 'spec' },
|
||||
]}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -35,6 +35,7 @@ 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 MemoSvgIcnSuccess from '../assets/svgr/IcnSuccess';
|
||||
import MemoSvgIcnSync from '../assets/svgr/IcnSync';
|
||||
import MemoSvgIcnTrashcan from '../assets/svgr/IcnTrashcan';
|
||||
import MemoSvgIcnTriangle from '../assets/svgr/IcnTriangle';
|
||||
@@ -93,6 +94,7 @@ export const IconEnum = {
|
||||
questionFill: 'question-fill',
|
||||
question: 'question',
|
||||
secCert: 'sec-cert',
|
||||
success: 'success',
|
||||
sync: 'sync',
|
||||
trashcan: 'trashcan',
|
||||
triangle: 'triangle',
|
||||
@@ -181,6 +183,7 @@ class SvgIcon extends React.Component<Props> {
|
||||
[IconEnum.question]: [ThemeEnum.default, MemoSvgIcnQuestion],
|
||||
[IconEnum.questionFill]: [ThemeEnum.default, MemoSvgIcnQuestionFill],
|
||||
[IconEnum.secCert]: [ThemeEnum.default, MemoSvgIcnSecCert],
|
||||
[IconEnum.success]: [ThemeEnum.success, MemoSvgIcnSuccess],
|
||||
[IconEnum.sync]: [ThemeEnum.default, MemoSvgIcnSync],
|
||||
[IconEnum.trashcan]: [ThemeEnum.default, MemoSvgIcnTrashcan],
|
||||
[IconEnum.triangle]: [ThemeEnum.default, MemoSvgIcnTriangle],
|
||||
@@ -194,7 +197,7 @@ class SvgIcon extends React.Component<Props> {
|
||||
|
||||
if (!SvgIcon.icons[icon]) {
|
||||
throw new Error(
|
||||
`Invalid icon "${icon}" used. Must be one of ${Object.values(SvgIcon.icons).join('|')}`,
|
||||
`Invalid icon "${icon}" used. Must be one of ${Object.values(IconEnum).join('|')}`,
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user