@yqg/slimfit 0.0.1 → 0.0.2

package/lib/esm/color/style.css

@@ -0,0 +1,364 @@
+/* 颜色面板主容器 */
+.ant-slimfit-color-palette {
+  background: #fff;
+  padding: 10px;
+  border-radius: 8px;
+}
+
+/* 颜色组样式 */
+.ant-slimfit-color-group {
+  margin-bottom: 80px;
+}
+
+.ant-slimfit-color-group:last-child {
+  margin-bottom: 0;
+}
+
+/* 添加分隔线 */
+.ant-slimfit-color-group:not(:last-child)::after {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 1px;
+  background-color: #e7eaef;
+  margin-top: 80px;
+}
+
+.ant-slimfit-color-group-header {
+  margin-bottom: 40px;
+}
+
+.ant-slimfit-color-group-title {
+  font-size: 32px;
+  font-weight: 600;
+  color: #171435;
+  margin: 0 0 8px 0;
+  line-height: 1.25;
+}
+
+.ant-slimfit-color-group-description {
+  font-size: 14px;
+  color: #7e7e99;
+  margin: 0;
+  line-height: 1.57;
+}
+
+/* 子标题区域 */
+.ant-slimfit-color-group-subtitle-section {
+  margin-bottom: 16px;
+}
+
+.ant-slimfit-color-group-subtitle {
+  font-size: 22px;
+  font-weight: 600;
+  color: #171435;
+  margin: 0 0 8px 0;
+  line-height: 1.36;
+}
+
+.ant-slimfit-color-group-subtitle-description {
+  font-size: 14px;
+  color: #7e7e99;
+  margin: 0;
+  line-height: 1.57;
+}
+
+/* 颜色块容器 */
+.ant-slimfit-color-group-colors {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0;
+  width: 100%;
+}
+
+/* 品牌色布局 - 10个颜色块一行 */
+.ant-slimfit-color-group-colors-10-per-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+.ant-slimfit-color-group-colors-10-per-row .ant-slimfit-color-block {
+  flex: 1;
+}
+
+/* 中性色布局 - 12个颜色块一行 */
+.ant-slimfit-color-group-colors-12-per-row {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  border: 1px solid #e7eaef;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.ant-slimfit-color-group-colors-12-per-row .ant-slimfit-color-block {
+  flex: 1;
+  border: none;
+  border-radius: 0;
+  border-right: 1px solid #e7eaef;
+}
+
+.ant-slimfit-color-group-colors-12-per-row .ant-slimfit-color-block:last-child {
+  border-right: none;
+}
+
+/* 功能色布局 - 4个颜色块一行 */
+.ant-slimfit-color-group-colors-function {
+  display: flex;
+  gap: 0.5rem;
+  width: 100%;
+}
+
+.ant-slimfit-color-group-colors-function .ant-slimfit-color-block {
+  flex: 1;
+  height: 4rem;
+}
+
+/* 扩展色布局 - 10个颜色块一行 */
+.ant-slimfit-color-group-colors-extended {
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+}
+
+/* 颜色块样式 */
+.ant-slimfit-color-block {
+  position: relative;
+  background: #fff;
+  border: none;
+  border-radius: 0;
+  padding: 12px 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+/* 品牌色和扩展色颜色块 */
+.ant-slimfit-color-group-colors-10-per-row .ant-slimfit-color-block,
+.ant-slimfit-color-group-colors-extended .ant-slimfit-color-block {
+  flex: 1;
+  height: 3rem;
+}
+
+/* 功能色颜色块 */
+.ant-slimfit-color-group-colors-function .ant-slimfit-color-block {
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+}
+
+.ant-slimfit-color-block:hover {
+  background-color: #f8f9fa;
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* 颜色色块 - 隐藏，直接使用背景色 */
+.ant-slimfit-color-block-swatch {
+  display: none;
+}
+
+/* 颜色信息 */
+.ant-slimfit-color-block-info {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+/* 颜色描述区域 */
+.ant-slimfit-color-block-info > div:first-child {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.ant-slimfit-color-block-name {
+  font-size: 12px;
+  font-weight: 600;
+  margin: 0;
+  line-height: 1.5;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 功能色的名称样式 */
+.ant-slimfit-color-group-colors-function .ant-slimfit-color-block-name {
+  font-size: 18px;
+  line-height: 1.67;
+  text-align: left;
+}
+
+/* 颜色值区域 */
+.ant-slimfit-color-block-info > div:last-child {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+}
+
+.ant-slimfit-color-block-value {
+  font-size: 10px;
+  font-family: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
+  font-weight: 400;
+  line-height: 1.57;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin: 0;
+}
+
+.ant-slimfit-color-block-description {
+  display: none;
+}
+
+/* 响应式适配 */
+@media (max-width: 1200px) {
+  .ant-slimfit-color-palette {
+    padding: 40px;
+  }
+
+  .ant-slimfit-color-group {
+    margin-bottom: 60px;
+  }
+
+  .ant-slimfit-color-group:not(:last-child)::after {
+    margin-top: 60px;
+  }
+
+  .ant-slimfit-color-group-header {
+    margin-bottom: 32px;
+  }
+
+  .ant-slimfit-color-group-title {
+    font-size: 28px;
+  }
+
+  /* 调整颜色块布局为响应式 */
+  .ant-slimfit-color-group-colors-10-per-row,
+  .ant-slimfit-color-group-colors-12-per-row,
+  .ant-slimfit-color-group-colors-extended {
+    flex-wrap: wrap;
+    gap: 2px;
+  }
+
+  .ant-slimfit-color-group-colors-10-per-row .ant-slimfit-color-block,
+  .ant-slimfit-color-group-colors-extended .ant-slimfit-color-block {
+    flex: 1 1 20%;
+    height: 2.5rem;
+  }
+
+  .ant-slimfit-color-group-colors-12-per-row .ant-slimfit-color-block {
+    flex: 1 1 16.66%;
+    height: 2.5rem;
+    border: 1px solid #e7eaef;
+    border-radius: 4px;
+  }
+
+  .ant-slimfit-color-group-colors-12-per-row {
+    border: none;
+    gap: 2px;
+  }
+
+  .ant-slimfit-color-group-colors-function {
+    flex-wrap: wrap;
+    gap: 6px;
+  }
+
+  .ant-slimfit-color-group-colors-function .ant-slimfit-color-block {
+    flex: 1 1 50%;
+    height: 3rem;
+  }
+}
+
+@media (max-width: 768px) {
+  .ant-slimfit-color-palette {
+    padding: 24px;
+  }
+
+  .ant-slimfit-color-group {
+    margin-bottom: 40px;
+  }
+
+  .ant-slimfit-color-group:not(:last-child)::after {
+    margin-top: 40px;
+  }
+
+  .ant-slimfit-color-group-header {
+    margin-bottom: 24px;
+  }
+
+  .ant-slimfit-color-group-title {
+    font-size: 24px;
+  }
+
+  .ant-slimfit-color-group-colors-10-per-row .ant-slimfit-color-block,
+  .ant-slimfit-color-group-colors-extended .ant-slimfit-color-block {
+    flex: 1 1 25%;
+    height: 2rem;
+  }
+
+  .ant-slimfit-color-group-colors-12-per-row .ant-slimfit-color-block {
+    flex: 1 1 25%;
+    height: 2rem;
+  }
+
+  .ant-slimfit-color-group-colors-function .ant-slimfit-color-block {
+    flex: 1 1 100%;
+    height: 2.5rem;
+  }
+
+  .ant-slimfit-color-block-name {
+    font-size: 11px;
+  }
+
+  .ant-slimfit-color-group-colors-function .ant-slimfit-color-block-name {
+    font-size: 16px;
+  }
+
+  .ant-slimfit-color-block-value {
+    font-size: 9px;
+  }
+}
+
+@media (max-width: 480px) {
+  .ant-slimfit-color-palette {
+    padding: 16px;
+  }
+
+  .ant-slimfit-color-group-colors-10-per-row .ant-slimfit-color-block,
+  .ant-slimfit-color-group-colors-extended .ant-slimfit-color-block {
+    flex: 1 1 33.33%;
+    height: 1.8rem;
+  }
+
+  .ant-slimfit-color-group-colors-12-per-row .ant-slimfit-color-block {
+    flex: 1 1 33.33%;
+    height: 1.8rem;
+  }
+
+  .ant-slimfit-color-block {
+    padding: 8px 12px;
+  }
+
+  .ant-slimfit-color-block-name {
+    font-size: 10px;
+  }
+
+  .ant-slimfit-color-group-colors-function .ant-slimfit-color-block-name {
+    font-size: 14px;
+  }
+
+  .ant-slimfit-color-block-value {
+    font-size: 8px;
+  }
+}

package/lib/esm/color/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export interface ColorItem {
+    name: string;
+    value: string;
+    cssVar: string;
+    description?: string;
+}
+export interface ColorSubGroup {
+    title: string;
+    colors: ColorItem[];
+}
+export interface ColorGroup {
+    title: string;
+    description?: string;
+    subtitle?: string;
+    subtitleDescription?: string;
+    colors: ColorItem[];
+    subGroups?: ColorSubGroup[];
+}
+export type CopyMode = 'css-var' | 'hex' | 'tailwind';
+export interface ColorPaletteProps {
+    copyMode?: CopyMode;
+    showCopyButton?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    onColorClick?: (color: ColorItem, mode: CopyMode) => void;
+}
+export interface ColorBlockProps {
+    color: ColorItem;
+    copyMode: CopyMode;
+    onClick: () => void;
+}

package/lib/esm/color/types.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/config-provider/config-provider.d.ts

@@ -0,0 +1,3 @@
+import { type ConfigProviderProps as AntdConfigProviderProps } from 'antd';
+export type ConfigProviderProps = AntdConfigProviderProps;
+export default function CommonProvider(props: ConfigProviderProps): import("react/jsx-runtime").JSX.Element;

package/lib/esm/config-provider/config-provider.js

@@ -0,0 +1,11 @@
+import { mergeDeep } from '@yqg/beetle';
+import { ConfigProvider } from 'antd';
+import { Theme } from "../themes";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function CommonProvider(props) {
+  var mergedTheme = mergeDeep(Theme, props.theme || {});
+  return /*#__PURE__*/_jsx(ConfigProvider, {
+    theme: mergedTheme,
+    children: props.children
+  });
+}

package/lib/esm/config-provider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ConfigProvider } from './config-provider';
+export type { ConfigProviderProps } from './config-provider';

package/lib/esm/config-provider/index.js

@@ -0,0 +1 @@
+export { default as ConfigProvider } from "./config-provider";