@yh-ui/theme 0.1.0

package/dist/tokens/index.mjs

@@ -0,0 +1,238 @@
+export const colorTokens = {
+  primary: {
+    DEFAULT: "#409eff",
+    light: {
+      1: "#53a8ff",
+      2: "#66b1ff",
+      3: "#79bbff",
+      4: "#8cc5ff",
+      5: "#a0cfff",
+      6: "#b3d8ff",
+      7: "#c6e2ff",
+      8: "#d9ecff",
+      9: "#ecf5ff"
+    },
+    dark: {
+      2: "#337ecc"
+    }
+  },
+  success: {
+    DEFAULT: "#67c23a",
+    light: {
+      3: "#95d475",
+      5: "#b3e19d",
+      7: "#d1edc4",
+      9: "#f0f9eb"
+    },
+    dark: {
+      2: "#529b2e"
+    }
+  },
+  warning: {
+    DEFAULT: "#e6a23c",
+    light: {
+      3: "#eebe77",
+      5: "#f3d19e",
+      7: "#f8e3c5",
+      9: "#fdf6ec"
+    },
+    dark: {
+      2: "#b88230"
+    }
+  },
+  danger: {
+    DEFAULT: "#f56c6c",
+    light: {
+      3: "#f89898",
+      5: "#fab6b6",
+      7: "#fcd3d3",
+      9: "#fef0f0"
+    },
+    dark: {
+      2: "#c45656"
+    }
+  },
+  info: {
+    DEFAULT: "#909399",
+    light: {
+      3: "#b1b3b8",
+      5: "#c8c9cc",
+      7: "#dedfe0",
+      9: "#f4f4f5"
+    },
+    dark: {
+      2: "#73767a"
+    }
+  }
+};
+export const textColorTokens = {
+  primary: "#303133",
+  regular: "#606266",
+  secondary: "#909399",
+  placeholder: "#a8abb2",
+  disabled: "#c0c4cc"
+};
+export const borderColorTokens = {
+  DEFAULT: "#dcdfe6",
+  light: "#e4e7ed",
+  lighter: "#ebeef5",
+  extraLight: "#f2f6fc",
+  dark: "#d4d7de",
+  darker: "#cdd0d6"
+};
+export const fillColorTokens = {
+  DEFAULT: "#f0f2f5",
+  light: "#f5f7fa",
+  lighter: "#fafafa",
+  extraLight: "#fafcff",
+  dark: "#ebedf0",
+  darker: "#e6e8eb",
+  blank: "#ffffff"
+};
+export const bgColorTokens = {
+  DEFAULT: "#ffffff",
+  page: "#f2f3f5",
+  overlay: "#ffffff"
+};
+export const spacingTokens = {
+  none: "0",
+  xs: "4px",
+  sm: "8px",
+  md: "16px",
+  lg: "24px",
+  xl: "32px",
+  xxl: "48px"
+};
+export const radiusTokens = {
+  none: "0",
+  sm: "2px",
+  base: "4px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  round: "20px",
+  circle: "50%"
+};
+export const fontSizeTokens = {
+  xs: "12px",
+  sm: "13px",
+  base: "14px",
+  md: "16px",
+  lg: "18px",
+  xl: "20px",
+  xxl: "24px"
+};
+export const lineHeightTokens = {
+  none: "1",
+  tight: "1.25",
+  snug: "1.375",
+  normal: "1.5",
+  relaxed: "1.625",
+  loose: "2"
+};
+export const fontWeightTokens = {
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700"
+};
+export const shadowTokens = {
+  sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+  base: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)",
+  md: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
+  lg: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+  xl: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+};
+export const durationTokens = {
+  fast: "150ms",
+  base: "200ms",
+  slow: "300ms"
+};
+export const timingTokens = {
+  ease: "ease",
+  easeIn: "cubic-bezier(0.4, 0, 1, 1)",
+  easeOut: "cubic-bezier(0, 0, 0.2, 1)",
+  easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)",
+  linear: "linear"
+};
+export const zIndexTokens = {
+  normal: "1",
+  top: "1000",
+  popper: "2000",
+  overlay: "2001",
+  modal: "2002",
+  popover: "2003",
+  tooltip: "2004",
+  loading: "2005"
+};
+export const breakpointTokens = {
+  xs: "0",
+  sm: "576px",
+  md: "768px",
+  lg: "992px",
+  xl: "1200px",
+  xxl: "1400px"
+};
+export const fontFamilyTokens = {
+  base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif",
+  monospace: "'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",
+  serif: "Georgia, Cambria, 'Times New Roman', Times, serif"
+};
+export const accessibilityTokens = {
+  focusRingColor: "#409eff",
+  focusRingWidth: "2px",
+  focusRingOffset: "2px",
+  focusRingOpacity: "0.2"
+};
+export const maskTokens = {
+  DEFAULT: "rgba(0, 0, 0, 0.5)",
+  light: "rgba(0, 0, 0, 0.3)",
+  extraLight: "rgba(0, 0, 0, 0.1)"
+};
+export const scrollbarTokens = {
+  width: "6px",
+  thumbColor: "#c0c4cc",
+  thumbHoverColor: "#909399",
+  trackColor: "transparent",
+  thumbRadius: "3px"
+};
+export const componentSizeTokens = {
+  large: {
+    height: "40px",
+    fontSize: "14px",
+    paddingX: "20px"
+  },
+  default: {
+    height: "32px",
+    fontSize: "14px",
+    paddingX: "16px"
+  },
+  small: {
+    height: "24px",
+    fontSize: "12px",
+    paddingX: "12px"
+  }
+};
+export const designTokens = {
+  colors: colorTokens,
+  textColors: textColorTokens,
+  borderColors: borderColorTokens,
+  fillColors: fillColorTokens,
+  bgColors: bgColorTokens,
+  spacing: spacingTokens,
+  radius: radiusTokens,
+  fontSize: fontSizeTokens,
+  lineHeight: lineHeightTokens,
+  fontWeight: fontWeightTokens,
+  fontFamily: fontFamilyTokens,
+  shadow: shadowTokens,
+  duration: durationTokens,
+  timing: timingTokens,
+  zIndex: zIndexTokens,
+  componentSize: componentSizeTokens,
+  breakpoints: breakpointTokens,
+  accessibility: accessibilityTokens,
+  mask: maskTokens,
+  scrollbar: scrollbarTokens
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@yh-ui/theme",
+  "version": "0.1.0",
+  "description": "YH-UI theme and design tokens",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    },
+    "./styles/*": "./src/styles/*",
+    "./*": {
+      "types": "./dist/*.d.ts",
+      "import": "./dist/*.mjs",
+      "require": "./dist/*.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "src/styles"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/1079161148/yh-ui.git",
+    "directory": "packages/theme"
+  },
+  "keywords": [
+    "yh-ui",
+    "theme",
+    "design-tokens"
+  ],
+  "homepage": "https://yh-ui.dev",
+  "author": "YH-UI Team",
+  "peerDependencies": {
+    "vue": "^3.5.27"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "viewerjs": "^1.11.7"
+  },
+  "scripts": {
+    "build": "unbuild",
+    "dev": "unbuild --stub"
+  }
+}

package/src/styles/components.scss

@@ -0,0 +1,9 @@
+/**
+ * YH-UI 组件全局样式
+ * 注意：组件样式已由各 Vue SFC <style> 块自行携带
+ * 此文件仅保留基础变量和 mixin 的引用，供外部按需导入
+ */
+
+@use 'variables' as *;
+@use 'mixins/mixins' as *;
+@use 'reset' as *;

package/src/styles/index.scss

@@ -0,0 +1,8 @@
+/**
+ * YH-UI Base Styles
+ * 主入口文件 —— 仅包含基础主题层
+ * 组件样式由各组件的 Vue SFC <style> 块自行携带
+ */
+
+@use 'variables';
+@use 'reset';

package/src/styles/mixins/mixins.scss

@@ -0,0 +1,96 @@
+@use 'sass:string';
+@use 'sass:list';
+@use 'sass:meta';
+@use '../variables' as *;
+
+// BEM
+$namespace: 'yh' !default;
+$state-prefix: 'is-' !default;
+$modifier-separator: '--' !default;
+$element-separator: '__' !default;
+
+// 声明全局变量
+$B: null;
+$E: null;
+
+@function containsSpecial($selector) {
+  $selector: meta.inspect($selector);
+  // 如果选择器包含修饰符、状态前缀或冒号（伪类）
+  @if string.index($selector, $modifier-separator) or
+    string.index($selector, '.' + $state-prefix) or
+    string.index($selector, ':')
+  {
+    @return true;
+  }
+  @return false;
+}
+
+@mixin b($block) {
+  $B: $namespace + '-' + $block !global;
+  .#{$B} {
+    @content;
+  }
+}
+
+@mixin e($element) {
+  $E: $element !global;
+  $selector: &;
+  $currentSelector: '';
+
+  @each $unit in $element {
+    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit};
+    @if $unit != list.nth($element, list.length($element)) {
+      $currentSelector: #{$currentSelector + ','};
+    }
+  }
+
+  @if containsSpecial($selector) {
+    @at-root {
+      #{$selector} {
+        #{$currentSelector} {
+          @content;
+        }
+      }
+    }
+  } @else {
+    @at-root {
+      #{$currentSelector} {
+        @content;
+      }
+    }
+  }
+}
+
+@mixin m($modifier) {
+  $selector: &;
+  $currentSelector: '';
+
+  @each $unit in $modifier {
+    $currentSelector: #{$currentSelector + $selector + $modifier-separator + $unit};
+    @if $unit != list.nth($modifier, list.length($modifier)) {
+      $currentSelector: #{$currentSelector + ','};
+    }
+  }
+
+  @at-root {
+    #{$currentSelector} {
+      @content;
+    }
+  }
+}
+
+@mixin when($state) {
+  @at-root {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}
+
+@mixin is($state, $condition: true) {
+  @if $condition {
+    &.#{$state-prefix + $state} {
+      @content;
+    }
+  }
+}

package/src/styles/reset.scss

@@ -0,0 +1,131 @@
+/**
+ * YH-UI Reset Styles
+ * 基础样式重置
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  /* 仅在变量未定义时应用默认值，防止干扰宿主框架 */
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-family: var(--yh-font-family);
+  font-size: var(--yh-font-size-base);
+  line-height: var(--yh-line-height-normal);
+  color: var(--yh-text-color-primary);
+  /* 移除强制背景色，允许 VitePress 暗黑模式控制 */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+a {
+  color: var(--yh-color-primary);
+  text-decoration: none;
+  cursor: pointer;
+
+  &:hover {
+    color: var(--yh-color-primary-light-3);
+  }
+
+  &:active {
+    color: var(--yh-color-primary-dark-2);
+  }
+}
+
+button {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+input,
+textarea,
+select {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  color: inherit;
+  background: transparent;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: var(--yh-text-color-placeholder);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+ul,
+ol {
+  list-style: none;
+}
+
+img,
+svg {
+  display: block;
+  max-width: 100%;
+  height: auto;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+hr {
+  border: none;
+  border-top: 1px solid var(--yh-border-color);
+}
+
+/* 滚动条样式 */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--yh-fill-color-light);
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--yh-text-color-disabled);
+  border-radius: 3px;
+
+  &:hover {
+    background: var(--yh-text-color-secondary);
+  }
+}
+
+/* Firefox 滚动条 */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--yh-text-color-disabled) var(--yh-fill-color-light);
+}