From a215860782efbeec40af30ab166357f3fcdeef10 Mon Sep 17 00:00:00 2001 From: Anwarul Islam Date: Wed, 1 Nov 2023 21:25:08 +0600 Subject: [PATCH] feat: replacing windicss by tailwindcss in hoppscotch-ui (#3076) Co-authored-by: Andrew Bastin Co-authored-by: Joel Jacob Stephen <70131076+JoelJacobStephen@users.noreply.github.com> Co-authored-by: nivedin --- packages/hoppscotch-common/.prettierrc.js | 3 +- .../hoppscotch-common/assets/scss/styles.scss | 96 +- .../assets/scss/tailwind.scss | 3 + .../hoppscotch-common/assets/scss/themes.scss | 274 - .../assets/themes/accent-themes.scss | 89 + .../assets/themes/base-themes.scss | 81 + .../assets/themes/editor-themes.scss | 41 + .../assets/themes/themes.scss | 64 + packages/hoppscotch-common/package.json | 9 +- packages/hoppscotch-common/src/App.vue | 2 +- .../hoppscotch-common/src/components.d.ts | 1 - .../src/components/app/Announcement.vue | 2 +- .../src/components/app/ContextMenu.vue | 2 +- .../src/components/app/DeveloperOptions.vue | 2 +- .../src/components/app/Footer.vue | 2 +- .../src/components/app/Header.vue | 26 +- .../src/components/app/Inspection.vue | 18 +- .../src/components/app/Options.vue | 4 +- .../src/components/app/Share.vue | 12 +- .../src/components/app/Shortcuts.vue | 12 +- .../src/components/app/ShortcutsEntry.vue | 2 +- .../src/components/app/ShortcutsPrompt.vue | 10 +- .../src/components/app/Sidenav.vue | 32 +- .../src/components/app/spotlight/Entry.vue | 8 +- .../app/spotlight/entry/GQLHistory.vue | 2 +- .../app/spotlight/entry/GQLRequest.vue | 2 +- .../app/spotlight/entry/RESTHistory.vue | 2 +- .../app/spotlight/entry/RESTRequest.vue | 4 +- .../src/components/app/spotlight/index.vue | 12 +- .../src/components/collections/Collection.vue | 12 +- .../components/collections/ImportExport.vue | 10 +- .../components/collections/MyCollections.vue | 12 +- .../src/components/collections/Request.vue | 17 +- .../collections/TeamCollections.vue | 8 +- .../collections/graphql/Collection.vue | 10 +- .../components/collections/graphql/Folder.vue | 10 +- .../collections/graphql/Request.vue | 12 +- .../components/collections/graphql/index.vue | 12 +- .../src/components/collections/index.vue | 6 +- .../src/components/environments/Add.vue | 18 +- .../src/components/environments/Selector.vue | 34 +- .../src/components/environments/index.vue | 2 +- .../components/environments/my/Details.vue | 8 +- .../environments/my/Environment.vue | 8 +- .../src/components/environments/my/index.vue | 6 +- .../components/environments/teams/Details.vue | 8 +- .../environments/teams/Environment.vue | 6 +- .../components/environments/teams/index.vue | 8 +- .../src/components/firebase/Login.vue | 10 +- .../src/components/graphql/Authorization.vue | 10 +- .../src/components/graphql/Field.vue | 10 +- .../src/components/graphql/Headers.vue | 12 +- .../src/components/graphql/Query.vue | 8 +- .../src/components/graphql/Request.vue | 4 +- .../src/components/graphql/RequestOptions.vue | 2 +- .../src/components/graphql/Response.vue | 12 +- .../src/components/graphql/Sidebar.vue | 8 +- .../components/graphql/SubscriptionLog.vue | 6 +- .../src/components/graphql/TabHead.vue | 4 +- .../src/components/graphql/Type.vue | 10 +- .../src/components/graphql/Variable.vue | 8 +- .../src/components/history/graphql/Card.vue | 8 +- .../src/components/history/index.vue | 12 +- .../src/components/history/rest/Card.vue | 10 +- .../src/components/http/Authorization.vue | 10 +- .../src/components/http/Body.vue | 14 +- .../src/components/http/BodyParameters.vue | 12 +- .../src/components/http/CodegenModal.vue | 14 +- .../src/components/http/Headers.vue | 16 +- .../src/components/http/ImportCurl.vue | 6 +- .../src/components/http/Parameters.vue | 12 +- .../src/components/http/PreRequestScript.vue | 8 +- .../src/components/http/RawBody.vue | 8 +- .../src/components/http/Request.vue | 16 +- .../src/components/http/Response.vue | 2 +- .../src/components/http/ResponseMeta.vue | 12 +- .../src/components/http/TabHead.vue | 8 +- .../src/components/http/TestResult.vue | 32 +- .../src/components/http/TestResultEntry.vue | 8 +- .../src/components/http/TestResultEnv.vue | 12 +- .../src/components/http/Tests.vue | 8 +- .../src/components/http/URLEncodedParams.vue | 12 +- .../components/http/authorization/ApiKey.vue | 2 +- .../src/components/lenses/HeadersRenderer.vue | 4 +- .../lenses/HeadersRendererEntry.vue | 12 +- .../lenses/ResponseBodyRenderer.vue | 6 +- .../lenses/renderers/AudioLensRenderer.vue | 6 +- .../lenses/renderers/HTMLLensRenderer.vue | 10 +- .../lenses/renderers/ImageLensRenderer.vue | 6 +- .../lenses/renderers/JSONLensRenderer.vue | 26 +- .../lenses/renderers/PDFLensRenderer.vue | 6 +- .../lenses/renderers/RawLensRenderer.vue | 8 +- .../lenses/renderers/VideoLensRenderer.vue | 6 +- .../lenses/renderers/XMLLensRenderer.vue | 8 +- .../src/components/profile/Shortcode.vue | 8 +- .../src/components/profile/Shortcodes.vue | 12 +- .../src/components/profile/UserDelete.vue | 8 +- .../src/components/realtime/Communication.vue | 18 +- .../components/realtime/ConnectionConfig.vue | 14 +- .../src/components/realtime/Log.vue | 8 +- .../src/components/realtime/LogEntry.vue | 20 +- .../src/components/realtime/Subscription.vue | 10 +- .../src/components/settings/Extension.vue | 4 +- .../src/components/settings/Proxy.vue | 4 +- .../src/components/smart/ChangeLanguage.vue | 2 +- .../src/components/smart/EnvInput.vue | 10 +- .../src/components/tab/Primary.vue | 8 +- .../src/components/tab/Secondary.vue | 6 +- .../src/components/teams/Edit.vue | 12 +- .../src/components/teams/Invite.vue | 48 +- .../src/components/teams/MemberStack.vue | 6 +- .../src/components/teams/Team.vue | 8 +- .../src/components/teams/index.vue | 2 +- .../src/components/workspace/Current.vue | 2 +- .../src/components/workspace/Selector.vue | 6 +- .../src/helpers/rest/labelColoring.ts | 10 +- packages/hoppscotch-common/src/index.ts | 4 +- .../hoppscotch-common/src/layouts/default.vue | 10 +- packages/hoppscotch-common/src/pages/_.vue | 4 +- .../hoppscotch-common/src/pages/enter.vue | 4 +- .../hoppscotch-common/src/pages/graphql.vue | 2 +- .../hoppscotch-common/src/pages/index.vue | 2 +- .../hoppscotch-common/src/pages/join-team.vue | 26 +- .../hoppscotch-common/src/pages/profile.vue | 20 +- .../hoppscotch-common/src/pages/r/_id.vue | 16 +- .../src/pages/realtime/mqtt.vue | 24 +- .../src/pages/realtime/socketio.vue | 16 +- .../src/pages/realtime/sse.vue | 8 +- .../src/pages/realtime/websocket.vue | 12 +- .../hoppscotch-common/src/pages/settings.vue | 10 +- packages/hoppscotch-selfhost-web/package.json | 9 +- .../postcss.config.cjs | 7 + .../tailwind.config.ts | 10 + .../hoppscotch-selfhost-web/vite.config.ts | 12 +- packages/hoppscotch-sh-admin/.prettierignore | 10 + packages/hoppscotch-sh-admin/.prettierrc.cjs | 4 + .../assets/scss/styles.scss | 146 +- .../assets/scss/tailwind.scss | 3 + .../assets/scss/themes.scss | 272 - packages/hoppscotch-sh-admin/package.json | 7 +- .../hoppscotch-sh-admin/postcss.config.cjs | 7 + .../hoppscotch-sh-admin/src/components.d.ts | 61 +- .../src/components/app/Header.vue | 4 +- .../src/components/app/Login.vue | 2 +- .../src/components/app/Sidebar.vue | 30 +- .../src/components/dashboard/MetricsCard.vue | 2 +- packages/hoppscotch-sh-admin/src/main.ts | 4 +- .../hoppscotch-sh-admin/src/pages/index.vue | 2 +- .../src/pages/users/_id.vue | 18 +- .../hoppscotch-sh-admin/tailwind.config.ts | 7 + packages/hoppscotch-sh-admin/vite.config.ts | 6 +- packages/hoppscotch-sh-admin/windi.config.ts | 65 - packages/hoppscotch-ui/.prettierrc.cjs | 3 +- packages/hoppscotch-ui/histoire.setup.ts | 5 +- packages/hoppscotch-ui/package.json | 34 +- packages/hoppscotch-ui/postcss.config.cjs | 6 + .../src/assets/scss/histoire.scss | 676 ++ .../hoppscotch-ui/src/assets/scss/styles.scss | 589 +- .../src/assets/scss/tailwind.scss | 3 + .../hoppscotch-ui/src/assets/scss/themes.scss | 272 - .../src/components/button/Primary.vue | 14 +- .../src/components/smart/Checkbox.vue | 2 +- .../src/components/smart/Modal.vue | 13 +- .../src/components/smart/Tab.vue | 2 +- .../src/components/smart/Tabs.vue | 38 +- .../src/components/smart/Toggle.vue | 8 +- .../src/components/smart/TreeBranch.vue | 8 +- .../src/components/smart/Windows.vue | 70 +- packages/hoppscotch-ui/src/plugin.ts | 2 +- packages/hoppscotch-ui/tailwind.config.ts | 6 + .../{windi.config.ts => ui-preset.ts} | 72 +- packages/hoppscotch-ui/vite.config.ts | 15 +- pnpm-lock.yaml | 7719 +++++++++++------ tailwind.config.ts | 9 + 174 files changed, 6921 insertions(+), 5185 deletions(-) create mode 100644 packages/hoppscotch-common/assets/scss/tailwind.scss delete mode 100644 packages/hoppscotch-common/assets/scss/themes.scss create mode 100644 packages/hoppscotch-common/assets/themes/accent-themes.scss create mode 100644 packages/hoppscotch-common/assets/themes/base-themes.scss create mode 100644 packages/hoppscotch-common/assets/themes/editor-themes.scss create mode 100644 packages/hoppscotch-common/assets/themes/themes.scss create mode 100644 packages/hoppscotch-selfhost-web/postcss.config.cjs create mode 100644 packages/hoppscotch-selfhost-web/tailwind.config.ts create mode 100644 packages/hoppscotch-sh-admin/.prettierignore create mode 100644 packages/hoppscotch-sh-admin/.prettierrc.cjs create mode 100644 packages/hoppscotch-sh-admin/assets/scss/tailwind.scss delete mode 100644 packages/hoppscotch-sh-admin/assets/scss/themes.scss create mode 100644 packages/hoppscotch-sh-admin/postcss.config.cjs create mode 100644 packages/hoppscotch-sh-admin/tailwind.config.ts delete mode 100644 packages/hoppscotch-sh-admin/windi.config.ts create mode 100644 packages/hoppscotch-ui/postcss.config.cjs create mode 100644 packages/hoppscotch-ui/src/assets/scss/histoire.scss create mode 100644 packages/hoppscotch-ui/src/assets/scss/tailwind.scss delete mode 100644 packages/hoppscotch-ui/src/assets/scss/themes.scss create mode 100644 packages/hoppscotch-ui/tailwind.config.ts rename packages/hoppscotch-ui/{windi.config.ts => ui-preset.ts} (57%) create mode 100644 tailwind.config.ts diff --git a/packages/hoppscotch-common/.prettierrc.js b/packages/hoppscotch-common/.prettierrc.js index 40c0e8dba..0635c0ef0 100644 --- a/packages/hoppscotch-common/.prettierrc.js +++ b/packages/hoppscotch-common/.prettierrc.js @@ -4,5 +4,6 @@ module.exports = { singleQuote: false, printWidth: 80, useTabs: false, - tabWidth: 2 + tabWidth: 2, + plugins: ["prettier-plugin-tailwindcss"], } diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss index ad9e46e78..c9d4641ba 100644 --- a/packages/hoppscotch-common/assets/scss/styles.scss +++ b/packages/hoppscotch-common/assets/scss/styles.scss @@ -1,7 +1,25 @@ +/* +* Write hoppscotch-common related custom styles in this file. +* If styles are sharable across all package then write into hoppscotch-ui/assets/scss/styles.scss file. +*/ + * { - @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 +29,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 +80,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 +150,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 +166,7 @@ a { @apply shadow-none #{!important}; @apply fixed; @apply inline-flex; - @apply -mt-7.5; + @apply -mt-8; } } @@ -154,7 +180,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 +188,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 +196,12 @@ a { @apply truncate; @apply sm:inline-flex; } + + .env-icon { + @apply transition; + @apply inline-flex; + @apply items-center; + } } .tippy-svg-arrow { @@ -195,7 +227,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 +266,7 @@ hr { .heading { @apply font-bold; - @apply text-secondaryDark text-lg; + @apply text-lg text-secondaryDark; @apply tracking-tight; } @@ -243,7 +275,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 +316,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 +325,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 +367,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 +398,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 +426,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 +460,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; } @@ -501,22 +533,6 @@ pre.ace_editor { } } -.cm-panel.cm-search [name="close"] { - @apply flex; - @apply items-center; - @apply justify-center; - @apply min-h-5; - @apply min-w-5; - @apply bg-primaryDark #{!important}; - @apply sticky #{!important}; - @apply right-0 #{!important}; - @apply ml-auto #{!important}; - @apply my-auto #{!important}; - @apply rounded #{!important}; - @apply outline #{!important}; - @apply outline-divider #{!important}; -} - .shortcut-key { @apply inline-flex; @apply font-sans; diff --git a/packages/hoppscotch-common/assets/scss/tailwind.scss b/packages/hoppscotch-common/assets/scss/tailwind.scss new file mode 100644 index 000000000..b5c61c956 --- /dev/null +++ b/packages/hoppscotch-common/assets/scss/tailwind.scss @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/packages/hoppscotch-common/assets/scss/themes.scss b/packages/hoppscotch-common/assets/scss/themes.scss deleted file mode 100644 index 79024aa17..000000000 --- a/packages/hoppscotch-common/assets/scss/themes.scss +++ /dev/null @@ -1,274 +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-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: 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; -} diff --git a/packages/hoppscotch-common/assets/themes/accent-themes.scss b/packages/hoppscotch-common/assets/themes/accent-themes.scss new file mode 100644 index 000000000..4460fe7c4 --- /dev/null +++ b/packages/hoppscotch-common/assets/themes/accent-themes.scss @@ -0,0 +1,89 @@ +@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; +} + +@mixin teal-theme { + --accent-color: #14b8a6; + --accent-light-color: #2dd4bf; + --accent-dark-color: #0d9488; + --accent-contrast-color: #fff; + --gradient-from-color: #99f6e4; + --gradient-via-color: #2dd4bf; + --gradient-to-color: #0d9488; +} + +@mixin blue-theme { + --accent-color: #3b82f6; + --accent-light-color: #60a5fa; + --accent-dark-color: #2563eb; + --accent-contrast-color: #fff; + --gradient-from-color: #bfdbfe; + --gradient-via-color: #60a5fa; + --gradient-to-color: #2563eb; +} + +@mixin indigo-theme { + --accent-color: #6366f1; + --accent-light-color: #818cf8; + --accent-dark-color: #4f46e5; + --accent-contrast-color: #fff; + --gradient-from-color: #c7d2fe; + --gradient-via-color: #818cf8; + --gradient-to-color: #4f46e5; +} + +@mixin purple-theme { + --accent-color: #8b5cf6; + --accent-light-color: #a78bfa; + --accent-dark-color: #7c3aed; + --accent-contrast-color: #fff; + --gradient-from-color: #ddd6fe; + --gradient-via-color: #a78bfa; + --gradient-to-color: #7c3aed; +} + +@mixin yellow-theme { + --accent-color: #f59e0b; + --accent-light-color: #fbbf24; + --accent-dark-color: #d97706; + --accent-contrast-color: #fff; + --gradient-from-color: #fde68a; + --gradient-via-color: #fbbf24; + --gradient-to-color: #d97706; +} + +@mixin orange-theme { + --accent-color: #f97316; + --accent-light-color: #fb923c; + --accent-dark-color: #ea580c; + --accent-contrast-color: #fff; + --gradient-from-color: #fed7aa; + --gradient-via-color: #fb923c; + --gradient-to-color: #ea580c; +} + +@mixin red-theme { + --accent-color: #ef4444; + --accent-light-color: #f87171; + --accent-dark-color: #dc2626; + --accent-contrast-color: #fff; + --gradient-from-color: #fecaca; + --gradient-via-color: #f87171; + --gradient-to-color: #dc2626; +} + +@mixin pink-theme { + --accent-color: #ec4899; + --accent-light-color: #f472b6; + --accent-dark-color: #db2777; + --accent-contrast-color: #fff; + --gradient-from-color: #fbcfe8; + --gradient-via-color: #f472b6; + --gradient-to-color: #db2777; +} diff --git a/packages/hoppscotch-common/assets/themes/base-themes.scss b/packages/hoppscotch-common/assets/themes/base-themes.scss new file mode 100644 index 000000000..4852ce9b3 --- /dev/null +++ b/packages/hoppscotch-common/assets/themes/base-themes.scss @@ -0,0 +1,81 @@ +@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; + --editor-theme: "merbivore_soft"; +} + +@mixin light-theme { + --primary-color: #ffffff; + --primary-light-color: #f9fafb; + --primary-dark-color: #f3f4f6; + --primary-contrast-color: #fdfdfd; + + --secondary-color: #6b7280; + --secondary-light-color: #9ca3af; + --secondary-dark-color: #111827; + + --divider-color: #f3f4f6; + --divider-light-color: #f3f4f6; + --divider-dark-color: #d1d5db; + + --error-color: #fef3c7; + --tooltip-color: #262626; + --popover-color: #ffffff; + --editor-theme: "textmate"; +} + +@mixin black-theme { + --primary-color: #0f0f0f; + --primary-light-color: #171717; + --primary-dark-color: #181818; + --primary-contrast-color: #0f0f0f; + + --secondary-color: #a3a3a3; + --secondary-light-color: #737373; + --secondary-dark-color: #f5f5f5; + + --divider-color: #1c1c1e; + --divider-light-color: #181818; + --divider-dark-color: #323232; + + --error-color: #1c1917; + --tooltip-color: #f5f5f5; + --popover-color: #0f0f0f; + --editor-theme: "twilight"; +} diff --git a/packages/hoppscotch-common/assets/themes/editor-themes.scss b/packages/hoppscotch-common/assets/themes/editor-themes.scss new file mode 100644 index 000000000..f191c6a04 --- /dev/null +++ b/packages/hoppscotch-common/assets/themes/editor-themes.scss @@ -0,0 +1,41 @@ +@mixin dark-editor-theme { + --editor-type-color: #a78bfa; + --editor-name-color: #60a5fa; + --editor-operator-color: #818cf8; + --editor-invalid-color: #f87171; + --editor-separator-color: #9ca3af; + --editor-meta-color: #9ca3af; + --editor-variable-color: #34d399; + --editor-link-color: #22d3ee; + --editor-process-color: #e879f9; + --editor-constant-color: #a78bfa; + --editor-keyword-color: #f472b6; +} + +@mixin light-editor-theme { + --editor-type-color: #7c3aed; + --editor-name-color: #dc2626; + --editor-operator-color: #4f46e5; + --editor-invalid-color: #dc2626; + --editor-separator-color: #4b5563; + --editor-meta-color: #4b5563; + --editor-variable-color: #059669; + --editor-link-color: #0891b2; + --editor-process-color: #2563eb; + --editor-constant-color: #c026d3; + --editor-keyword-color: #db2777; +} + +@mixin black-editor-theme { + --editor-type-color: #a78bfa; + --editor-name-color: #e879f9; + --editor-operator-color: #818cf8; + --editor-invalid-color: #f87171; + --editor-separator-color: #9ca3af; + --editor-meta-color: #9ca3af; + --editor-variable-color: #34d399; + --editor-link-color: #22d3ee; + --editor-process-color: #a78bfa; + --editor-constant-color: #60a5fa; + --editor-keyword-color: #f472b6; +} diff --git a/packages/hoppscotch-common/assets/themes/themes.scss b/packages/hoppscotch-common/assets/themes/themes.scss new file mode 100644 index 000000000..f6401e210 --- /dev/null +++ b/packages/hoppscotch-common/assets/themes/themes.scss @@ -0,0 +1,64 @@ +@import "./base-themes.scss"; +@import "./editor-themes.scss"; +@import "./accent-themes.scss"; + +:root { + @include base-theme; + @include dark-theme; + @include green-theme; + @include dark-editor-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; +} diff --git a/packages/hoppscotch-common/package.json b/packages/hoppscotch-common/package.json index 7fc437de1..18f95957e 100644 --- a/packages/hoppscotch-common/package.json +++ b/packages/hoppscotch-common/package.json @@ -133,12 +133,17 @@ "@vue/compiler-sfc": "^3.3.4", "@vue/eslint-config-typescript": "^11.0.3", "@vue/runtime-core": "^3.3.4", + "autoprefixer": "^10.4.14", "cross-env": "^7.0.3", "dotenv": "^16.3.1", "eslint": "^8.47.0", "eslint-plugin-prettier": "^5.0.0", "eslint-plugin-vue": "^9.17.0", "npm-run-all": "^4.1.5", + "postcss": "^8.4.23", + "prettier-plugin-tailwindcss": "^0.5.6", + "tailwindcss": "^3.3.2", + "vite-plugin-fonts": "^0.6.0", "openapi-types": "^12.1.3", "rollup-plugin-polyfill-node": "^0.12.0", "sass": "^1.66.0", @@ -154,9 +159,7 @@ "vite-plugin-pages-sitemap": "^1.6.1", "vite-plugin-pwa": "^0.16.4", "vite-plugin-vue-layouts": "^0.8.0", - "vite-plugin-windicss": "^1.9.1", "vitest": "^0.34.2", - "vue-tsc": "^1.8.8", - "windicss": "^3.5.6" + "vue-tsc": "^1.8.8" } } diff --git a/packages/hoppscotch-common/src/App.vue b/packages/hoppscotch-common/src/App.vue index 02dc8613b..47a086935 100644 --- a/packages/hoppscotch-common/src/App.vue +++ b/packages/hoppscotch-common/src/App.vue @@ -2,7 +2,7 @@
diff --git a/packages/hoppscotch-common/src/components.d.ts b/packages/hoppscotch-common/src/components.d.ts index f7d8352a2..f4d4b2e39 100644 --- a/packages/hoppscotch-common/src/components.d.ts +++ b/packages/hoppscotch-common/src/components.d.ts @@ -189,7 +189,6 @@ declare module 'vue' { SmartEnvInput: typeof import('./components/smart/EnvInput.vue')['default'] SmartExpand: typeof import('./../../hoppscotch-ui/src/components/smart/Expand.vue')['default'] SmartFileChip: typeof import('./../../hoppscotch-ui/src/components/smart/FileChip.vue')['default'] - SmartFontSizePicker: typeof import('./components/smart/FontSizePicker.vue')['default'] SmartInput: typeof import('./../../hoppscotch-ui/src/components/smart/Input.vue')['default'] SmartIntersection: typeof import('./../../hoppscotch-ui/src/components/smart/Intersection.vue')['default'] SmartItem: typeof import('./../../hoppscotch-ui/src/components/smart/Item.vue')['default'] diff --git a/packages/hoppscotch-common/src/components/app/Announcement.vue b/packages/hoppscotch-common/src/components/app/Announcement.vue index 87fbb9b5c..0f458c325 100644 --- a/packages/hoppscotch-common/src/components/app/Announcement.vue +++ b/packages/hoppscotch-common/src/components/app/Announcement.vue @@ -1,6 +1,6 @@