feat: rebuild theme-default

.stylelintrc.yml

@@ -14,6 +14,18 @@ rules:
   declaration-block-no-redundant-longhand-properties: true
   media-feature-range-notation: prefix
   no-descending-specificity: null
+  custom-property-empty-line-before: null
+  selector-max-class: null
+  selector-max-attribute: null
+  selector-pseudo-class-no-unknown:
+    - true
+    - ignorePseudoClasses:
+        - input-placeholder
+
+  selector-pseudo-element-no-unknown:
+    - true
+    - ignorePseudoElements:
+        - input-placeholder
   # workaround for mixed-declarations
   no-duplicate-selectors: null
 
@@ -48,3 +60,18 @@ overrides:
             - v-deep
             - v-global
             - v-slotted
+
+      declaration-block-no-redundant-longhand-properties: null
+      scss/operator-no-newline-after: null
+
+  - files:
+      - 'themes/theme-next/src/client/styles/vars.css'
+
+    rules:
+      no-duplicate-selectors: null
+
+  - files:
+      - 'themes/theme-next/src/client/styles/compat.css'
+
+    rules:
+      selector-class-pattern: null

docs-next/.vuepress/client.ts

@@ -0,0 +1,9 @@
+import { defineClientConfig } from 'vuepress/client'
+import CommentPage from './layouts/CommentPage.vue'
+
+export default defineClientConfig({
+  layouts: {
+    // We override the default layout to provide comment service
+    CommentPage,
+  },
+})

docs-next/.vuepress/components/NpmBadge.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** package name */
+    package: string
+    /** dist tag */
+    distTag?: string
+  }>(),
+  {
+    distTag: 'next',
+  },
+)
+
+const badgeLink = computed(
+  () => `https://www.npmjs.com/package/${props.package}/v/next`,
+)
+const badgeLabel = computed(() => {
+  if (props.distTag) {
+    return `${props.package}@${props.distTag}`
+  }
+  return props.package
+})
+const badgeImg = computed(
+  () =>
+    `https://badgen.net/npm/v/${props.package}/${
+      props.distTag
+    }?label=${encodeURIComponent(badgeLabel.value)}`,
+)
+</script>
+
+<template>
+  <a
+    class="npm-badge"
+    :href="badgeLink"
+    :title="package"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <img :src="badgeImg" :alt="package" />
+  </a>
+</template>
+
+<style lang="scss" scoped>
+.npm-badge {
+  margin-right: 0.5rem;
+
+  &::after {
+    display: none !important;
+  }
+}
+</style>

docs-next/.vuepress/components/PaletteDemo.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import { useLocaleConfig } from '@vuepress/helper/client'
+
+const locale = useLocaleConfig({
+  '/': {
+    text: 'Text Colors',
+    accent: 'Accent Colors',
+    border: 'Border Colors',
+    shadow: 'Shadow Colors',
+    control: 'Control Colors',
+  },
+  '/zh/': {
+    text: '文字颜色',
+    accent: '强调色',
+    border: '边框颜色',
+    shadow: '阴影色',
+    control: '控件颜色',
+  },
+})
+</script>
+
+<template>
+  <div class="header">{{ locale.text }}</div>
+  <div class="demo">
+    <div class="text">text</div>
+    <div class="text-mute">text mute</div>
+    <div class="text-subtle">text subtle</div>
+  </div>
+  <div class="header">{{ locale.border }}</div>
+  <div class="demo">
+    <div class="border-display border">border</div>
+    <div class="border-display border-hard">border hard</div>
+    <div class="border-display gutter">gutter</div>
+  </div>
+  <div class="header">{{ locale.accent }}</div>
+  <div class="demo">
+    <button type="button" class="button-reset accent">accent</button>
+    <button type="button" class="button-reset accent-bg">accent bg</button>
+    <button type="button" class="button-reset accent-hover">
+      accent hover
+    </button>
+    <button type="button" class="button-reset accent-soft">accent soft</button>
+  </div>
+  <div class="header">{{ locale.shadow }}</div>
+  <div class="demo">
+    <button type="button" class="button-reset bg shadow">shadow with bg</button>
+    <button type="button" class="button-reset bg-alt shadow">
+      shadow with bg alt
+    </button>
+    <button type="button" class="button-reset accent-bg shadow">
+      shadow with accent
+    </button>
+    <button type="button" class="button-reset accent-hover shadow">
+      shadow with accent hover
+    </button>
+  </div>
+  <div class="header">{{ locale.control }}</div>
+  <div class="demo">
+    <div class="item">
+      <label class="label">
+        control
+        <input class="input-reset border control" />
+      </label>
+    </div>
+    <div class="item">
+      <label class="label">
+        control hover
+        <input class="input-reset control-hover" />
+      </label>
+    </div>
+    <div class="item">
+      <label class="label">
+        control disabled
+        <input class="input-reset control-disabled" disabled />
+      </label>
+    </div>
+    <div class="item">
+      <button type="button" class="button-reset control">control</button>
+      <button type="button" class="button-reset control-hover">
+        control hover
+      </button>
+      <button type="button" class="button-reset control-disabled">
+        control disabled
+      </button>
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+.header {
+  margin: 0.75rem 0 0.25rem;
+  font-size: 1.25rem;
+}
+
+.button-reset {
+  margin: 4px;
+  padding: 4px 8px;
+  border: none;
+  border-radius: 8px;
+
+  background: transparent;
+  outline: none;
+}
+
+.border-display {
+  position: relative;
+  text-align: center;
+
+  &::before {
+    content: ' ';
+
+    position: absolute;
+    top: 100%;
+    right: 0%;
+    left: 0%;
+
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
+  }
+}
+
+.input-reset {
+  margin: 4px;
+  padding: 2px 8px;
+  border-radius: 8px;
+
+  background: transparent;
+  outline: none;
+
+  line-height: 1.5;
+}
+
+.bg {
+  background: var(--vp-c-bg);
+}
+
+.bg-alt {
+  background: var(--vp-c-bg-alt);
+}
+
+.border {
+  border-color: var(--vp-c-border);
+}
+
+.border-hard {
+  border-color: var(--vp-c-border-hard);
+}
+
+.gutter {
+  border-color: var(--vp-c-gutter);
+}
+
+.shadow {
+  box-shadow: 1px 2px 4px 2px var(--vp-c-shadow);
+}
+
+.text {
+  color: var(--vp-c-text);
+}
+
+.text-mute {
+  color: var(--vp-c-text-mute);
+}
+
+.text-subtle {
+  color: var(--vp-c-text-subtle);
+}
+
+.accent {
+  color: var(--vp-c-accent);
+}
+
+.accent-bg {
+  background: var(--vp-c-accent-bg);
+  color: var(--vp-c-accent-text);
+}
+
+.accent-hover {
+  background: var(--vp-c-accent-hover);
+  color: var(--vp-c-accent-text);
+}
+
+.accent-soft {
+  background: var(--vp-c-accent-soft);
+  color: var(--vp-c-accent);
+}
+
+.control {
+  border: 1px solid var(--vp-c-border);
+  background: var(--vp-c-control);
+}
+
+.control-hover {
+  border: 1px solid var(--vp-c-border);
+  background: var(--vp-c-control-hover);
+}
+
+.control-disabled {
+  border: 1px solid var(--vp-c-border);
+  background: var(--vp-c-control-disabled);
+}
+</style>

docs-next/.vuepress/components/PaletteDisplay.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import PaletteDemo from './PaletteDemo.vue'
+</script>
+
+<template>
+  <div class="bg border bg-wrapper">
+    <div class="bg-hint">bg</div>
+    <PaletteDemo />
+  </div>
+  <div class="bg-alt border bg-wrapper">
+    <div class="bg-hint">bg alt</div>
+    <PaletteDemo />
+  </div>
+</template>
+
+<style>
+.bg-wrapper {
+  margin: 0.5rem 0;
+  padding: 0.5rem;
+  border-radius: 8px;
+}
+
+.bg-hint {
+  float: right;
+  font-size: 0.75rem;
+}
+</style>

docs-next/.vuepress/components/VPAutoLink.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import type { VNode } from 'vue'
+import type { AutoLinkConfig } from 'vuepress/client'
+import { AutoLink } from 'vuepress/client'
+
+export interface AutoLinkConfigWithIcon extends AutoLinkConfig {
+  icon?: string
+}
+
+defineProps<{
+  /**
+   * The auto link config
+   */
+  config: AutoLinkConfigWithIcon
+}>()
+
+defineSlots<{
+  default?: (config: AutoLinkConfigWithIcon) => VNode | VNode[]
+  before?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+  after?: (config: AutoLinkConfigWithIcon) => VNode | VNode[] | null
+}>()
+</script>
+
+<template>
+  <AutoLink :config="config">
+    <template v-if="$slots.default" #default>
+      <slot v-bind="config" />
+    </template>
+    <template #before>
+      <slot name="before" v-bind="config">
+        <VPIcon v-if="config.icon" class="auto-link-icon" :icon="config.icon" />
+      </slot>
+    </template>
+    <template #after>
+      <slot name="after" v-bind="config" />
+    </template>
+  </AutoLink>
+</template>
+
+<style>
+.auto-link-icon {
+  margin-inline-end: 0.25em;
+}
+</style>