From 38ed225d2bb97274a3145e252118fd6f04e10f60 Mon Sep 17 00:00:00 2001 From: Serhii Bedrytskyi Date: Tue, 15 Nov 2022 13:12:20 +0200 Subject: [PATCH] feat: port main.css (#656) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Yaƫl Guilloux --- app/module.ts | 21 - assets/css/main.css | 184 +---- components/content/Alert.vue | 19 +- components/content/Badge.vue | 21 +- components/content/Callout.vue | 41 +- components/content/CodeGroup.vue | 6 +- components/content/List.vue | 22 +- components/content/Terminal.vue | 1 - components/docs/DocsAsideTree.vue | 10 +- components/docs/DocsPageContent.vue | 7 +- components/docs/DocsPrevNext.vue | 3 +- components/github/PageContributors.vue | 2 +- nuxt.config.ts | 1 + pnpm-lock.yaml | 959 +++++++++++++++++++++---- tokens.config.ts | 194 ++++- 15 files changed, 1105 insertions(+), 386 deletions(-) diff --git a/app/module.ts b/app/module.ts index 974141442..a8e99242b 100644 --- a/app/module.ts +++ b/app/module.ts @@ -16,33 +16,12 @@ export default defineNuxtModule({ configKey: 'docus' }, setup (_, nuxt) { - // Pre-render 404 page - /* - nuxt.hook('nitro:config', (nitroConfig) => { - nitroConfig.prerender = nitroConfig.prerender || {} - nitroConfig.prerender.routes = nitroConfig.prerender.routes || [] - nitroConfig.prerender.routes.push('/404') - nitroConfig.prerender.routes.push('/') - }) - */ - - // TODO: Remove this workaround - // Origin: https://github.com/nuxt/framework/pull/5709 - // Issue: https://github.com/nuxt/framework/issues/5827 - nuxt.hook('nitro:config', (nitroConfig) => { - nuxt.options.nitro.prerender = nuxt.options.nitro.prerender || {} - nuxt.options.nitro.prerender.routes = nuxt.options.nitro.prerender.routes || [] - nuxt.options.nitro.prerender.routes.push(...nitroConfig.prerender.routes) - }) - - // @ts-expect-error - GitHub module might not be installed if (nuxt.options?.github) { addPlugin({ src: resolveThemeDir('integrations/github.ts') }) } - // @ts-expect-error - Algolia module might not be installed if (nuxt.options?.runtimeConfig?.public?.algolia?.docSearch) { addPlugin({ src: resolveThemeDir('integrations/docsearch.ts') diff --git a/assets/css/main.css b/assets/css/main.css index bf831981d..cc5b1b84a 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -16,180 +16,13 @@ } } -@layer utilities { - .u-bg-white { @apply bg-white dark:bg-black; } - .u-bg-gray-50 { @apply bg-gray-50 dark:bg-gray-900; } - .u-bg-gray-100 { @apply bg-gray-100 dark:bg-gray-800; } - .u-bg-gray-200 { @apply bg-gray-200 dark:bg-gray-700; } - .u-bg-gray-300 { @apply bg-gray-300 dark:bg-gray-600; } - .u-bg-gray-400 { @apply bg-gray-400 dark:bg-gray-500; } - .u-bg-gray-500 { @apply bg-gray-500 dark:bg-gray-400; } - .u-bg-gray-600 { @apply bg-gray-600 dark:bg-gray-300; } - .u-bg-gray-700 { @apply bg-gray-700 dark:bg-gray-200; } - .u-bg-gray-800 { @apply bg-gray-800 dark:bg-gray-100; } - .u-bg-gray-900 { @apply bg-gray-900 dark:bg-gray-50; } - .u-bg-black { @apply bg-black dark:bg-white; } - .u-text-white { @apply text-white dark:text-black; } - .u-text-gray-50 { @apply text-gray-50 dark:text-gray-900; } - .u-text-gray-100 { @apply text-gray-100 dark:text-gray-800; } - .u-text-gray-200 { @apply text-gray-200 dark:text-gray-700; } - .u-text-gray-300 { @apply text-gray-300 dark:text-gray-600; } - .u-text-gray-400 { @apply text-gray-400 dark:text-gray-500; } - .u-text-gray-500 { @apply text-gray-500 dark:text-gray-400; } - .u-text-gray-600 { @apply text-gray-600 dark:text-gray-300; } - .u-text-gray-700 { @apply text-gray-700 dark:text-gray-200; } - .u-text-gray-800 { @apply text-gray-800 dark:text-gray-100; } - .u-text-gray-900 { @apply text-gray-900 dark:text-gray-50; } - .u-text-black { @apply text-black dark:text-white; } - .u-border-white { @apply border-white dark:border-black; } - .u-border-gray-100 { @apply border-gray-100 dark:border-gray-900; } - .u-border-gray-200 { @apply border-gray-200 dark:border-gray-800; } - .u-border-gray-300 { @apply border-gray-300 dark:border-gray-700; } - .u-border-gray-400 { @apply border-gray-400 dark:border-gray-600; } - .u-border-gray-500 { @apply border-gray-500 dark:border-gray-500; } - .u-border-gray-600 { @apply border-gray-600 dark:border-gray-400; } - .u-border-gray-700 { @apply border-gray-700 dark:border-gray-300; } - .u-border-gray-800 { @apply border-gray-800 dark:border-gray-200; } - .u-border-gray-900 { @apply border-gray-900 dark:border-gray-100; } - .u-border-black { @apply border-black dark:border-white; } - .u-divide-white { @apply divide-white dark:divide-black; } - .u-divide-gray-100 { @apply divide-gray-100 dark:divide-gray-900; } - .u-divide-gray-200 { @apply divide-gray-200 dark:divide-gray-800; } - .u-divide-gray-300 { @apply divide-gray-300 dark:divide-gray-700; } - .u-divide-gray-400 { @apply divide-gray-400 dark:divide-gray-600; } - .u-divide-gray-500 { @apply divide-gray-500 dark:divide-gray-500; } - .u-divide-gray-600 { @apply divide-gray-600 dark:divide-gray-400; } - .u-divide-gray-700 { @apply divide-gray-700 dark:divide-gray-300; } - .u-divide-gray-800 { @apply divide-gray-800 dark:divide-gray-200; } - .u-divide-gray-900 { @apply divide-gray-900 dark:divide-gray-100; } - .u-divide-black { @apply divide-black dark:divide-white; } - .u-ring-white { @apply ring-white dark:ring-black; } - .u-ring-gray-100 { @apply ring-gray-100 dark:ring-gray-900; } - .u-ring-gray-200 { @apply ring-gray-200 dark:ring-gray-800; } - .u-ring-gray-300 { @apply ring-gray-300 dark:ring-gray-700; } - .u-ring-gray-400 { @apply ring-gray-400 dark:ring-gray-600; } - .u-ring-gray-500 { @apply ring-gray-500 dark:ring-gray-500; } - .u-ring-gray-600 { @apply ring-gray-600 dark:ring-gray-400; } - .u-ring-gray-700 { @apply ring-gray-700 dark:ring-gray-300; } - .u-ring-gray-800 { @apply ring-gray-800 dark:ring-gray-200; } - .u-ring-gray-900 { @apply ring-gray-900 dark:ring-gray-100; } - .u-ring-black { @apply ring-black dark:ring-white; } -} - -.alert, -.badge, -.callout { - /* - Color Schemes - TODO: Improve the usage of these styles across components. - */ - &.base { - @apply border border-gray-200 bg-gray-50 dark:border-gray-900 dark:bg-gray-800 dark:bg-opacity-25 dark:text-gray-50; - - code { - @apply text-current bg-gray-100 border-gray-200 shadow-none dark:border-gray-800 dark:bg-gray-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-gray-400 dark:border-gray-700; - } - } - } - - &.primary { - @apply border border-primary-100 bg-primary-50 text-primary-600 dark:border-primary-900 dark:bg-primary-800 dark:bg-opacity-25 dark:text-primary-200; - - code { - @apply text-current shadow-none border-primary-200 bg-primary-100 dark:border-primary-800 dark:bg-primary-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-primary-400 dark:border-primary-700; - } - } - } - - &.success { - @apply text-green-600 border border-green-100 bg-green-50 dark:border-green-900 dark:bg-green-800 dark:bg-opacity-25 dark:text-green-200; - - code { - @apply text-current bg-green-100 border-green-200 shadow-none dark:border-green-800 dark:bg-green-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-green-400 dark:border-green-700; - } - } - - } - - &.info { - @apply text-blue-600 border border-blue-100 bg-blue-50 dark:border-blue-900 dark:bg-blue-800 dark:bg-opacity-25 dark:text-blue-200; - - code { - @apply text-current bg-blue-100 border-blue-200 shadow-none dark:border-blue-800 dark:bg-blue-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-blue-400 dark:border-blue-700; - } - } - } - - &.warning { - @apply text-yellow-600 border border-yellow-100 bg-yellow-50 dark:border-yellow-900 dark:bg-yellow-800 dark:bg-opacity-25 dark:text-yellow-100; - - code { - @apply text-current bg-yellow-100 border-yellow-200 shadow-none dark:border-yellow-800 dark:bg-yellow-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-yellow-400 dark:border-yellow-700; - } - } - - } - - &.danger { - @apply text-red-600 border border-red-100 bg-red-50 dark:border-red-900 dark:bg-red-800 dark:bg-opacity-25 dark:text-red-100; - - code { - @apply text-current bg-red-100 border-red-200 shadow-none dark:border-red-800 dark:bg-red-900 dark:bg-opacity-50; - } - a:hover { - code { - @apply border-red-400 dark:border-red-700; - } - } - } - - &.blurry { - @apply !backdrop-blur-lg !bg-opacity-20; - } - - a { - @apply !text-current !border-none !font-semibold !underline; - } - - strong { - @apply !font-bold !text-current; - } - - li::before { - @apply !text-current !bg-current; - } - - .prose-code { - @apply my-4; +/* Base */ - code { - @apply !bg-transparent; - } - } +:root { + /* DocSearch */ + --docsearch-primary-color: theme('colors.primary.500') !important; } -/* Base */ - .dark:root { color-scheme: dark; /* DocSearch */ @@ -242,12 +75,3 @@ body { } } -:root { - /* DocSearch */ - --docsearch-primary-color: theme('colors.primary.500') !important; -} - -code, kbd, pre, samp { - font-family: var(--fonts-code); - font-size: 1em; -} diff --git a/components/content/Alert.vue b/components/content/Alert.vue index a01ec0c74..6364f8704 100644 --- a/components/content/Alert.vue +++ b/components/content/Alert.vue @@ -1,5 +1,5 @@