From f7b5617fa92cd7f739bd170f74fd6fb84aaca11c Mon Sep 17 00:00:00 2001 From: "@andatoshiki" Date: Tue, 19 Sep 2023 10:53:20 -0700 Subject: [PATCH] fix(style): remove deprecated customlayout vue template entry for redesgining original component styles & full migrate to custom component slot preseved & lint and remove overrided error styling from twoslash & roll overall site color pallete back to match deafult styles provided by vitepress as temporary color schemes until new overrides are being written --- docs/.vitepress/theme/index.ts | 2 +- .../theme/styles/component/twoslash.scss | 28 ++++---- docs/.vitepress/theme/styles/index.scss | 3 + docs/.vitepress/theme/styles/tweak.scss | 69 +++++++++++++++++++ 4 files changed, 87 insertions(+), 15 deletions(-) create mode 100644 docs/.vitepress/theme/styles/tweak.scss diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index c90567cc..ba520a03 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -59,7 +59,7 @@ export default { ...DefaultTheme, Layout: () => { // custom layout migrated to custom slots - CustomLayout + // CustomLayout const props: Record = {} // get frontmatter data via vitepress builtin diff --git a/docs/.vitepress/theme/styles/component/twoslash.scss b/docs/.vitepress/theme/styles/component/twoslash.scss index 67f2e3d8..8cb6bdc6 100644 --- a/docs/.vitepress/theme/styles/component/twoslash.scss +++ b/docs/.vitepress/theme/styles/component/twoslash.scss @@ -1,18 +1,18 @@ /* Dark/light theme */ -:root:not(.dark) { - --vp-code-block-bg: rgba(125, 125, 125, 0.04); - --vp-code-copy-code-active-text: var(--vp-c-text-2); - --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.1); - --vp-code-tab-divider: var(--vp-c-mute-dark); - --vp-code-tab-hover-text-color: var(--vp-c-text-1); - /* fix contrast: lang name on gray code block */ - --vp-c-text-dark-3: rgba(180, 180, 180, 0.7); -} -:root.dark { - --vp-code-block-bg: rgba(0, 0, 0, 0.2); - /* fix lang name: check the same above (this is the default) */ - --vp-c-text-dark-3: rgba(235, 235, 235, 0.38); -} +// :root:not(.dark) { +// --vp-code-block-bg: rgba(125, 125, 125, 0.04); +// --vp-code-copy-code-active-text: var(--vp-c-text-2); +// --vp-code-copy-code-hover-bg: rgba(125, 125, 125, 0.1); +// --vp-code-tab-divider: var(--vp-c-mute-dark); +// --vp-code-tab-hover-text-color: var(--vp-c-text-1); +// /* fix contrast: lang name on gray code block */ +// --vp-c-text-dark-3: rgba(180, 180, 180, 0.7); +// } +// :root.dark { +// --vp-code-block-bg: rgba(0, 0, 0, 0.2); +// /* fix lang name: check the same above (this is the default) */ +// --vp-c-text-dark-3: rgba(235, 235, 235, 0.38); +// } /* Hide block based on theme */ html:not(.dark) pre.shiki[class*='dark'] { diff --git a/docs/.vitepress/theme/styles/index.scss b/docs/.vitepress/theme/styles/index.scss index 83fb6082..00e96959 100644 --- a/docs/.vitepress/theme/styles/index.scss +++ b/docs/.vitepress/theme/styles/index.scss @@ -1,2 +1,5 @@ @import './custom.scss'; @import './vars.scss'; + +// vitepress site color palete tweak option with more flavorful color profiles +@import './tweak.scss'; diff --git a/docs/.vitepress/theme/styles/tweak.scss b/docs/.vitepress/theme/styles/tweak.scss new file mode 100644 index 00000000..2f492b60 --- /dev/null +++ b/docs/.vitepress/theme/styles/tweak.scss @@ -0,0 +1,69 @@ +:root { + --vp-c-default-1: var(--vp-c-gray-1); + --vp-c-default-2: var(--vp-c-gray-2); + --vp-c-default-3: var(--vp-c-gray-3); + --vp-c-default-soft: var(--vp-c-gray-soft); + + --vp-c-brand-1: var(--vp-c-indigo-1); + --vp-c-brand-2: var(--vp-c-indigo-2); + --vp-c-brand-3: var(--vp-c-indigo-3); + --vp-c-brand-soft: var(--vp-c-indigo-soft); + + --vp-c-tip-1: var(--vp-c-brand-1); + --vp-c-tip-2: var(--vp-c-brand-2); + --vp-c-tip-3: var(--vp-c-brand-3); + --vp-c-tip-soft: var(--vp-c-brand-soft); + + --vp-c-warning-1: var(--vp-c-yellow-1); + --vp-c-warning-2: var(--vp-c-yellow-2); + --vp-c-warning-3: var(--vp-c-yellow-3); + --vp-c-warning-soft: var(--vp-c-yellow-soft); + + --vp-c-danger-1: var(--vp-c-red-1); + --vp-c-danger-2: var(--vp-c-red-2); + --vp-c-danger-3: var(--vp-c-red-3); + --vp-c-danger-soft: var(--vp-c-red-soft); +} + +:root { + --vp-button-brand-border: transparent; + --vp-button-brand-text: var(--vp-c-white); + --vp-button-brand-bg: var(--vp-c-brand-3); + --vp-button-brand-hover-border: transparent; + --vp-button-brand-hover-text: var(--vp-c-white); + --vp-button-brand-hover-bg: var(--vp-c-brand-2); + --vp-button-brand-active-border: transparent; + --vp-button-brand-active-text: var(--vp-c-white); + --vp-button-brand-active-bg: var(--vp-c-brand-1); +} + +:root { + --vp-home-hero-name-color: transparent; + --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff); + + --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%); + --vp-home-hero-image-filter: blur(40px); +} + +@media (min-width: 640px) { + :root { + --vp-home-hero-image-filter: blur(56px); + } +} + +@media (min-width: 960px) { + :root { + --vp-home-hero-image-filter: blur(72px); + } +} + +:root { + --vp-custom-block-tip-border: transparent; + --vp-custom-block-tip-text: var(--vp-c-text-1); + --vp-custom-block-tip-bg: var(--vp-c-brand-soft); + --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft); +} + +.DocSearch { + --docsearch-primary-color: var(--vp-c-brand-1) !important; +}