feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076)
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com> Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin <nivedinp@gmail.com>
This commit is contained in:
Anwarul Islam
GitHub
@@ -1,7 +1,91 @@
|
||||
/*
|
||||
* Write hoppscotch-sh-admin related custom styles in this file.
|
||||
* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file.
|
||||
*/
|
||||
|
||||
@mixin base-theme {
|
||||
--font-sans: 'Inter Variable', sans-serif;
|
||||
--font-icon: 'Material Symbols Rounded Variable';
|
||||
--font-mono: 'Roboto Mono Variable', monospace;
|
||||
--font-size-body: 0.75rem;
|
||||
--font-size-tiny: 0.688rem;
|
||||
--line-height-body: 1rem;
|
||||
--upper-primary-sticky-fold: 4.125rem;
|
||||
--upper-secondary-sticky-fold: 6.188rem;
|
||||
--upper-tertiary-sticky-fold: 8.25rem;
|
||||
--upper-fourth-sticky-fold: 10.2rem;
|
||||
--upper-mobile-primary-sticky-fold: 6.625rem;
|
||||
--upper-mobile-secondary-sticky-fold: 8.688rem;
|
||||
--upper-mobile-sticky-fold: 10.75rem;
|
||||
--upper-mobile-tertiary-sticky-fold: 8.25rem;
|
||||
--lower-primary-sticky-fold: 3rem;
|
||||
--lower-secondary-sticky-fold: 5.063rem;
|
||||
--lower-tertiary-sticky-fold: 7.125rem;
|
||||
--lower-fourth-sticky-fold: 9.188rem;
|
||||
--sidebar-primary-sticky-fold: 2rem;
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--primary-color: #181818;
|
||||
--primary-light-color: #1c1c1e;
|
||||
--primary-dark-color: #262626;
|
||||
--primary-contrast-color: #171717;
|
||||
|
||||
--secondary-color: #a3a3a3;
|
||||
--secondary-light-color: #737373;
|
||||
--secondary-dark-color: #fafafa;
|
||||
|
||||
--divider-color: #262626;
|
||||
--divider-light-color: #1f1f1f;
|
||||
--divider-dark-color: #2d2d2d;
|
||||
|
||||
--error-color: #292524;
|
||||
--tooltip-color: #f5f5f5;
|
||||
--popover-color: #1b1b1b;
|
||||
}
|
||||
|
||||
@mixin green-theme {
|
||||
--accent-color: #10b981;
|
||||
--accent-light-color: #34d399;
|
||||
--accent-dark-color: #059669;
|
||||
--accent-contrast-color: #fff;
|
||||
--gradient-from-color: #a7f3d0;
|
||||
--gradient-via-color: #34d399;
|
||||
--gradient-to-color: #059669;
|
||||
}
|
||||
|
||||
:root {
|
||||
@include base-theme;
|
||||
@include dark-theme;
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-accent='green'] {
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply backface-hidden;
|
||||
@apply before:backface-hidden;
|
||||
@apply after:backface-hidden;
|
||||
backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
|
||||
&::before {
|
||||
backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
&::after {
|
||||
backface-visibility: hidden;
|
||||
-moz-backface-visibility: hidden;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
||||
@apply selection:bg-accentDark;
|
||||
@apply selection:text-accentContrast;
|
||||
@apply overscroll-none;
|
||||
@@ -11,17 +95,25 @@
|
||||
@apply antialiased;
|
||||
accent-color: var(--accent-color);
|
||||
font-variant-ligatures: common-ligatures;
|
||||
|
||||
// Colors
|
||||
--info-color: #ec4899;
|
||||
--success-color: #10b981;
|
||||
--blue-color: #3b82f6;
|
||||
--warning-color: #f59e0b;
|
||||
--cl-error-color: #ef4444;
|
||||
--sv-error-color: #dc2626;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-transparent;
|
||||
@apply border-solid border-l border-dividerLight border-t-0 border-b-0 border-r-0;
|
||||
@apply border-b-0 border-l border-r-0 border-t-0 border-solid border-dividerLight;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-divider bg-clip-content;
|
||||
@apply rounded-full;
|
||||
@apply border-solid border-transparent border-4;
|
||||
@apply border-4 border-solid border-transparent;
|
||||
@apply hover:bg-dividerDark;
|
||||
@apply hover:bg-clip-content;
|
||||
}
|
||||
@@ -54,7 +146,7 @@ html {
|
||||
|
||||
body {
|
||||
@apply bg-primary;
|
||||
@apply text-secondary text-body;
|
||||
@apply text-body text-secondary;
|
||||
@apply font-medium;
|
||||
@apply select-none;
|
||||
@apply overflow-x-hidden;
|
||||
@@ -124,8 +216,8 @@ a {
|
||||
|
||||
&.link {
|
||||
@apply items-center;
|
||||
@apply py-0.5 px-1;
|
||||
@apply -my-0.5 -mx-1;
|
||||
@apply px-1 py-0.5;
|
||||
@apply -mx-1 -my-0.5;
|
||||
@apply text-accent;
|
||||
@apply rounded;
|
||||
@apply hover:text-accentDark;
|
||||
@@ -140,7 +232,7 @@ a {
|
||||
@apply shadow-none #{!important};
|
||||
@apply fixed;
|
||||
@apply inline-flex;
|
||||
@apply -mt-7.5;
|
||||
@apply -mt-8;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -154,7 +246,7 @@ a {
|
||||
@apply flex;
|
||||
@apply text-tiny text-primary;
|
||||
@apply font-semibold;
|
||||
@apply py-1 px-2;
|
||||
@apply px-2 py-1;
|
||||
@apply truncate;
|
||||
@apply leading-normal;
|
||||
@apply items-center;
|
||||
@@ -162,7 +254,7 @@ a {
|
||||
kbd {
|
||||
@apply hidden;
|
||||
@apply font-sans;
|
||||
@apply bg-gray-500/45;
|
||||
background-color: rgba(107, 114, 128, 0.45);
|
||||
@apply text-primaryLight;
|
||||
@apply rounded-sm;
|
||||
@apply px-1;
|
||||
@@ -170,6 +262,12 @@ a {
|
||||
@apply truncate;
|
||||
@apply sm:inline-flex;
|
||||
}
|
||||
|
||||
.env-icon {
|
||||
@apply transition;
|
||||
@apply inline-flex;
|
||||
@apply items-center;
|
||||
}
|
||||
}
|
||||
|
||||
.tippy-svg-arrow {
|
||||
@@ -195,7 +293,7 @@ a {
|
||||
@apply max-h-[45vh];
|
||||
@apply items-stretch;
|
||||
@apply overflow-y-auto;
|
||||
@apply text-secondary text-body;
|
||||
@apply text-body text-secondary;
|
||||
@apply p-2;
|
||||
@apply leading-normal;
|
||||
@apply focus:outline-none;
|
||||
@@ -234,7 +332,7 @@ hr {
|
||||
|
||||
.heading {
|
||||
@apply font-bold;
|
||||
@apply text-secondaryDark text-lg;
|
||||
@apply text-lg text-secondaryDark;
|
||||
@apply tracking-tight;
|
||||
}
|
||||
|
||||
@@ -243,7 +341,7 @@ hr {
|
||||
.textarea {
|
||||
@apply flex;
|
||||
@apply w-full;
|
||||
@apply py-2 px-4;
|
||||
@apply px-4 py-2;
|
||||
@apply bg-transparent;
|
||||
@apply rounded;
|
||||
@apply text-secondaryDark;
|
||||
@@ -284,7 +382,7 @@ button {
|
||||
@apply transform;
|
||||
@apply origin-top-left;
|
||||
@apply scale-75;
|
||||
@apply translate-x-1 -translate-y-4;
|
||||
@apply -translate-y-4 translate-x-1;
|
||||
}
|
||||
|
||||
.floating-input:focus-within ~ label {
|
||||
@@ -293,7 +391,7 @@ button {
|
||||
|
||||
.floating-input ~ .end-actions {
|
||||
@apply absolute;
|
||||
@apply right-0.2;
|
||||
@apply right-[.05rem];
|
||||
@apply inset-y-0;
|
||||
@apply flex;
|
||||
@apply items-center;
|
||||
@@ -335,23 +433,23 @@ pre.ace_editor {
|
||||
}
|
||||
|
||||
.info-response {
|
||||
@apply text-pink-500;
|
||||
color: var(--info-color);
|
||||
}
|
||||
|
||||
.success-response {
|
||||
@apply text-green-500;
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.redir-response {
|
||||
@apply text-yellow-500;
|
||||
color: var(--warning-color);
|
||||
}
|
||||
|
||||
.cl-error-response {
|
||||
@apply text-red-500;
|
||||
color: var(--cl-error-color);
|
||||
}
|
||||
|
||||
.sv-error-response {
|
||||
@apply text-red-600;
|
||||
color: var(--sv-error-color);
|
||||
}
|
||||
|
||||
.missing-data-response {
|
||||
@@ -366,7 +464,7 @@ pre.ace_editor {
|
||||
@apply px-4 py-2;
|
||||
@apply bg-tooltip;
|
||||
@apply border-secondaryDark;
|
||||
@apply text-primary text-body;
|
||||
@apply text-body text-primary;
|
||||
@apply justify-between;
|
||||
@apply shadow-lg;
|
||||
@apply font-semibold;
|
||||
@@ -394,7 +492,7 @@ pre.ace_editor {
|
||||
@apply before:opacity-10;
|
||||
@apply before:inset-0;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply before:content-[''];
|
||||
@apply hover:no-underline;
|
||||
@apply hover:before:opacity-20;
|
||||
}
|
||||
@@ -428,7 +526,7 @@ pre.ace_editor {
|
||||
@apply before:opacity-0;
|
||||
@apply before:z-20;
|
||||
@apply before:transition;
|
||||
@apply before:content-DEFAULT;
|
||||
@apply before:content-[''];
|
||||
@apply hover:before:opacity-100;
|
||||
}
|
||||
|
||||
|
||||
3
packages/hoppscotch-sh-admin/assets/scss/tailwind.scss
Normal file
3
packages/hoppscotch-sh-admin/assets/scss/tailwind.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@@ -1,272 +0,0 @@
|
||||
@mixin base-theme {
|
||||
--font-sans: 'Inter Variable', sans-serif;
|
||||
--font-icon: 'Material Symbols Rounded Variable';
|
||||
--font-mono: 'Roboto Mono Variable', monospace;
|
||||
--font-size-body: 0.75rem;
|
||||
--font-size-tiny: 0.688rem;
|
||||
--line-height-body: 1rem;
|
||||
--upper-primary-sticky-fold: 4.125rem;
|
||||
--upper-secondary-sticky-fold: 6.188rem;
|
||||
--upper-tertiary-sticky-fold: 8.25rem;
|
||||
--upper-mobile-primary-sticky-fold: 6.625rem;
|
||||
--upper-mobile-secondary-sticky-fold: 8.688rem;
|
||||
--upper-mobile-sticky-fold: 10.75rem;
|
||||
--upper-mobile-tertiary-sticky-fold: 8.25rem;
|
||||
--lower-primary-sticky-fold: 3rem;
|
||||
--lower-secondary-sticky-fold: 5.063rem;
|
||||
--lower-tertiary-sticky-fold: 7.125rem;
|
||||
--sidebar-primary-sticky-fold: 2rem;
|
||||
}
|
||||
|
||||
@mixin dark-theme {
|
||||
--primary-color: theme('colors.dark.800');
|
||||
--primary-light-color: theme('colors.dark.600');
|
||||
--primary-dark-color: theme('colors.neutral.800');
|
||||
--primary-contrast-color: theme('colors.neutral.900');
|
||||
|
||||
--secondary-color: theme('colors.neutral.400');
|
||||
--secondary-light-color: theme('colors.neutral.500');
|
||||
--secondary-dark-color: theme('colors.neutral.50');
|
||||
|
||||
--divider-color: theme('colors.neutral.800');
|
||||
--divider-light-color: theme('colors.dark.500');
|
||||
--divider-dark-color: theme('colors.dark.300');
|
||||
|
||||
--error-color: theme('colors.stone.800');
|
||||
--tooltip-color: theme('colors.neutral.100');
|
||||
--popover-color: theme('colors.dark.700');
|
||||
--editor-theme: 'merbivore_soft';
|
||||
}
|
||||
|
||||
@mixin light-theme {
|
||||
--primary-color: theme('colors.white');
|
||||
--primary-light-color: theme('colors.gray.50');
|
||||
--primary-dark-color: theme('colors.gray.100');
|
||||
--primary-contrast-color: theme('colors.light.50');
|
||||
|
||||
--secondary-color: theme('colors.gray.500');
|
||||
--secondary-light-color: theme('colors.gray.400');
|
||||
--secondary-dark-color: theme('colors.gray.900');
|
||||
|
||||
--divider-color: theme('colors.gray.100');
|
||||
--divider-light-color: theme('colors.gray.100');
|
||||
--divider-dark-color: theme('colors.gray.300');
|
||||
|
||||
--error-color: theme('colors.yellow.100');
|
||||
--tooltip-color: theme('colors.neutral.800');
|
||||
--popover-color: theme('colors.white');
|
||||
--editor-theme: 'textmate';
|
||||
}
|
||||
|
||||
@mixin black-theme {
|
||||
--primary-color: theme('colors.dark.900');
|
||||
--primary-light-color: theme('colors.neutral.900');
|
||||
--primary-dark-color: theme('colors.dark.800');
|
||||
--primary-contrast-color: theme('colors.dark.900');
|
||||
|
||||
--secondary-color: theme('colors.neutral.400');
|
||||
--secondary-light-color: theme('colors.neutral.500');
|
||||
--secondary-dark-color: theme('colors.neutral.100');
|
||||
|
||||
--divider-color: theme('colors.dark.600');
|
||||
--divider-light-color: theme('colors.dark.800');
|
||||
--divider-dark-color: theme('colors.dark.200');
|
||||
|
||||
--error-color: theme('colors.stone.900');
|
||||
--tooltip-color: theme('colors.neutral.100');
|
||||
--popover-color: theme('colors.dark.900');
|
||||
--editor-theme: 'twilight';
|
||||
}
|
||||
|
||||
@mixin dark-editor-theme {
|
||||
--editor-type-color: theme('colors.purple.400');
|
||||
--editor-name-color: theme('colors.blue.400');
|
||||
--editor-operator-color: theme('colors.indigo.400');
|
||||
--editor-invalid-color: theme('colors.red.400');
|
||||
--editor-separator-color: theme('colors.gray.400');
|
||||
--editor-meta-color: theme('colors.gray.400');
|
||||
--editor-variable-color: theme('colors.green.400');
|
||||
--editor-link-color: theme('colors.cyan.400');
|
||||
--editor-process-color: theme('colors.fuchsia.400');
|
||||
--editor-constant-color: theme('colors.violet.400');
|
||||
--editor-keyword-color: theme('colors.pink.400');
|
||||
}
|
||||
|
||||
@mixin light-editor-theme {
|
||||
--editor-type-color: theme('colors.purple.600');
|
||||
--editor-name-color: theme('colors.red.600');
|
||||
--editor-operator-color: theme('colors.indigo.600');
|
||||
--editor-invalid-color: theme('colors.red.600');
|
||||
--editor-separator-color: theme('colors.gray.600');
|
||||
--editor-meta-color: theme('colors.gray.600');
|
||||
--editor-variable-color: theme('colors.green.600');
|
||||
--editor-link-color: theme('colors.cyan.600');
|
||||
--editor-process-color: theme('colors.blue.600');
|
||||
--editor-constant-color: theme('colors.fuchsia.600');
|
||||
--editor-keyword-color: theme('colors.pink.600');
|
||||
}
|
||||
|
||||
@mixin black-editor-theme {
|
||||
--editor-type-color: theme('colors.purple.400');
|
||||
--editor-name-color: theme('colors.fuchsia.400');
|
||||
--editor-operator-color: theme('colors.indigo.400');
|
||||
--editor-invalid-color: theme('colors.red.400');
|
||||
--editor-separator-color: theme('colors.gray.400');
|
||||
--editor-meta-color: theme('colors.gray.400');
|
||||
--editor-variable-color: theme('colors.green.400');
|
||||
--editor-link-color: theme('colors.cyan.400');
|
||||
--editor-process-color: theme('colors.violet.400');
|
||||
--editor-constant-color: theme('colors.blue.400');
|
||||
--editor-keyword-color: theme('colors.pink.400');
|
||||
}
|
||||
|
||||
@mixin green-theme {
|
||||
--accent-color: theme('colors.green.500');
|
||||
--accent-light-color: theme('colors.green.400');
|
||||
--accent-dark-color: theme('colors.green.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.green.200');
|
||||
--gradient-via-color: theme('colors.green.400');
|
||||
--gradient-to-color: theme('colors.green.600');
|
||||
}
|
||||
|
||||
@mixin teal-theme {
|
||||
--accent-color: theme('colors.teal.500');
|
||||
--accent-light-color: theme('colors.teal.400');
|
||||
--accent-dark-color: theme('colors.teal.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.teal.200');
|
||||
--gradient-via-color: theme('colors.teal.400');
|
||||
--gradient-to-color: theme('colors.teal.600');
|
||||
}
|
||||
|
||||
@mixin blue-theme {
|
||||
--accent-color: theme('colors.blue.500');
|
||||
--accent-light-color: theme('colors.blue.400');
|
||||
--accent-dark-color: theme('colors.blue.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.blue.200');
|
||||
--gradient-via-color: theme('colors.blue.400');
|
||||
--gradient-to-color: theme('colors.blue.600');
|
||||
}
|
||||
|
||||
@mixin indigo-theme {
|
||||
--accent-color: theme('colors.indigo.500');
|
||||
--accent-light-color: theme('colors.indigo.400');
|
||||
--accent-dark-color: theme('colors.indigo.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.indigo.200');
|
||||
--gradient-via-color: theme('colors.indigo.400');
|
||||
--gradient-to-color: theme('colors.indigo.600');
|
||||
}
|
||||
|
||||
@mixin purple-theme {
|
||||
--accent-color: theme('colors.purple.500');
|
||||
--accent-light-color: theme('colors.purple.400');
|
||||
--accent-dark-color: theme('colors.purple.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.purple.200');
|
||||
--gradient-via-color: theme('colors.purple.400');
|
||||
--gradient-to-color: theme('colors.purple.600');
|
||||
}
|
||||
|
||||
@mixin yellow-theme {
|
||||
--accent-color: theme('colors.yellow.500');
|
||||
--accent-light-color: theme('colors.yellow.400');
|
||||
--accent-dark-color: theme('colors.yellow.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.yellow.200');
|
||||
--gradient-via-color: theme('colors.yellow.400');
|
||||
--gradient-to-color: theme('colors.yellow.600');
|
||||
}
|
||||
|
||||
@mixin orange-theme {
|
||||
--accent-color: theme('colors.orange.500');
|
||||
--accent-light-color: theme('colors.orange.400');
|
||||
--accent-dark-color: theme('colors.orange.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.orange.200');
|
||||
--gradient-via-color: theme('colors.orange.400');
|
||||
--gradient-to-color: theme('colors.orange.600');
|
||||
}
|
||||
|
||||
@mixin red-theme {
|
||||
--accent-color: theme('colors.red.500');
|
||||
--accent-light-color: theme('colors.red.400');
|
||||
--accent-dark-color: theme('colors.red.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.red.200');
|
||||
--gradient-via-color: theme('colors.red.400');
|
||||
--gradient-to-color: theme('colors.red.600');
|
||||
}
|
||||
|
||||
@mixin pink-theme {
|
||||
--accent-color: theme('colors.pink.500');
|
||||
--accent-light-color: theme('colors.pink.400');
|
||||
--accent-dark-color: theme('colors.pink.600');
|
||||
--accent-contrast-color: theme('colors.white');
|
||||
--gradient-from-color: theme('colors.pink.200');
|
||||
--gradient-via-color: theme('colors.pink.400');
|
||||
--gradient-to-color: theme('colors.pink.600');
|
||||
}
|
||||
|
||||
:root {
|
||||
@include base-theme;
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
:root.light {
|
||||
@include light-theme;
|
||||
@include light-editor-theme;
|
||||
color-scheme: light;
|
||||
}
|
||||
|
||||
:root.dark {
|
||||
@include dark-theme;
|
||||
@include dark-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root.black {
|
||||
@include black-theme;
|
||||
@include black-editor-theme;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
:root[data-accent='blue'] {
|
||||
@include blue-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='green'] {
|
||||
@include green-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='teal'] {
|
||||
@include teal-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='indigo'] {
|
||||
@include indigo-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='purple'] {
|
||||
@include purple-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='orange'] {
|
||||
@include orange-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='pink'] {
|
||||
@include pink-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='red'] {
|
||||
@include red-theme;
|
||||
}
|
||||
|
||||
:root[data-accent='yellow'] {
|
||||
@include yellow-theme;
|
||||
}
|
||||
Reference in New Issue
Block a user