btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

fix: color contrast

Browse Source
This commit is contained in:
liyasthomas
2021-08-01 23:03:54 +05:30
parent fd3b5ecf08
commit 2ee65e69dc
28 changed files with 112 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
assets/scss/styles.scss
View File

@@ -85,7 +85,6 @@ a {
@apply text-current;
@apply no-underline;
@apply outline-none;
@apply focus-visible:(ring ring-inset ring-accent);
@apply transition;
&.link {
@@ -94,6 +93,7 @@ a {
@apply -mx-2 -my-1;
@apply text-accent;
@apply hover:text-accentDark;
@apply focus-visible:(ring ring-inset ring-accent);
}
}
@@ -265,19 +265,19 @@ input[type="checkbox"] {
}
.info-response {
@apply text-pink-400;
@apply text-pink-500;
}
.success-response {
@apply text-green-400;
@apply text-green-500;
}
.redir-response {
@apply text-yellow-400;
@apply text-yellow-500;
}
.cl-error-response {
@apply text-red-400;
@apply text-red-500;
}
.sv-error-response {

74
assets/scss/themes.scss
View File

@@ -85,21 +85,6 @@
--editor-theme: "twilight";
}
@mixin blueTheme {
// Accent color
--accent-color: theme("colors.blue.500");
// Light Accent color
--accent-light-color: theme("colors.blue.400");
// Dark Accent color
--accent-dark-color: theme("colors.blue.600");
// Gradient from
--gradient-from-color: theme("colors.blue.200");
// Gradient via
--gradient-via-color: theme("colors.blue.400");
// Gradient to
--gradient-to-color: theme("colors.blue.600");
}
@mixin greenTheme {
// Accent color
--accent-color: theme("colors.green.500");
@@ -130,6 +115,21 @@
--gradient-to-color: theme("colors.teal.600");
}
@mixin blueTheme {
// Accent color
--accent-color: theme("colors.blue.500");
// Light Accent color
--accent-light-color: theme("colors.blue.400");
// Dark Accent color
--accent-dark-color: theme("colors.blue.600");
// Gradient from
--gradient-from-color: theme("colors.blue.200");
// Gradient via
--gradient-via-color: theme("colors.blue.400");
// Gradient to
--gradient-to-color: theme("colors.blue.600");
}
@mixin indigoTheme {
// Accent color
--accent-color: theme("colors.indigo.500");
@@ -160,6 +160,21 @@
--gradient-to-color: theme("colors.purple.600");
}
@mixin yellowTheme {
// Accent color
--accent-color: theme("colors.yellow.500");
// Light Accent color
--accent-light-color: theme("colors.yellow.400");
// Dark Accent color
--accent-dark-color: theme("colors.yellow.600");
// Gradient from
--gradient-from-color: theme("colors.yellow.200");
// Gradient via
--gradient-via-color: theme("colors.yellow.400");
// Gradient to
--gradient-to-color: theme("colors.yellow.600");
}
@mixin orangeTheme {
// Accent color
--accent-color: theme("colors.orange.500");
@@ -175,21 +190,6 @@
--gradient-to-color: theme("colors.orange.600");
}
@mixin pinkTheme {
// Accent color
--accent-color: theme("colors.pink.500");
// Light Accent color
--accent-light-color: theme("colors.pink.400");
// Dark Accent color
--accent-dark-color: theme("colors.pink.600");
// Gradient from
--gradient-from-color: theme("colors.pink.200");
// Gradient via
--gradient-via-color: theme("colors.pink.400");
// Gradient to
--gradient-to-color: theme("colors.pink.600");
}
@mixin redTheme {
// Accent color
--accent-color: theme("colors.red.500");
@@ -205,19 +205,19 @@
--gradient-to-color: theme("colors.red.600");
}
@mixin yellowTheme {
@mixin pinkTheme {
// Accent color
--accent-color: theme("colors.yellow.500");
--accent-color: theme("colors.pink.500");
// Light Accent color
--accent-light-color: theme("colors.yellow.400");
--accent-light-color: theme("colors.pink.400");
// Dark Accent color
--accent-dark-color: theme("colors.yellow.600");
--accent-dark-color: theme("colors.pink.600");
// Gradient from
--gradient-from-color: theme("colors.yellow.200");
--gradient-from-color: theme("colors.pink.200");
// Gradient via
--gradient-via-color: theme("colors.yellow.400");
--gradient-via-color: theme("colors.pink.400");
// Gradient to
--gradient-to-color: theme("colors.yellow.600");
--gradient-to-color: theme("colors.pink.600");
}
:root {