@type-dom/ui 0.0.1

package/src/styles/var.js

@@ -0,0 +1,250 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.$buttonPaddingHorizontal = exports.$buttonPaddingVertical = exports.$buttonBorderRadius = exports.$buttonFontSize = exports.$buttonTextColor = exports.$buttonBgColor = exports.$buttonBorderColor = exports.$buttonActiveShadePercent = exports.$buttonHoverTintPercent = exports.$buttonBorderWidth = exports.$button = exports.setColorMixLevel = exports.$colorInfo = exports.$colorError = exports.$colorDanger = exports.$colorWarning = exports.$colorSuccess = exports.$colorPrimary = exports.$colorBlack = exports.$colorWhite = exports.$colors = exports.$overlayColor = exports.$commonComponentSize = exports.$disabled = exports.$zIndex = exports.$fontSizes = exports.fontFamily = exports.$boxShadow = exports.$borderRadius = exports.$borderColorHover = exports.$borderStyle = exports.$borderWidth = exports.$bgColors = exports.$fillColors = exports.$borderColors = exports.$textColors = exports.$types = exports.$fontLineHeightPrimary = exports.$fontWeightPrimary = void 0;
+/**
+ * scss/var
+ */
+exports.$fontWeightPrimary = 500;
+exports.$fontLineHeightPrimary = '24px';
+exports.$types = ['primary', 'success', 'warning', 'danger', 'error', 'info'];
+exports.$textColors = {
+    primary: '#303133',
+    regular: '#606266',
+    secondary: '#909399',
+    placeholder: '#a8abb2',
+    disabled: '#c0c4cc',
+};
+exports.$borderColors = {
+    '': '#dcdfe6',
+    light: '#e4e7ed',
+    lighter: '#ebeef5',
+    extraLight: '#f2f6fc',
+    dark: '#d4d7de',
+    darker: '#cdd0d6',
+};
+exports.$fillColors = {
+    '': '#f0f2f5',
+    light: '#f5f7fa',
+    lighter: '#fafafa',
+    extraLight: '#fafcff',
+    dark: '#ebedf0',
+    darker: '#e6e8eb',
+    blank: '#ffffff',
+};
+// Background
+exports.$bgColors = {
+    '': '#ffffff',
+    page: '#f2f3f5',
+    overlay: '#ffffff',
+};
+// Border
+exports.$borderWidth = '1px';
+exports.$borderStyle = 'solid';
+exports.$borderColorHover = exports.$textColors.disabled;
+exports.$borderRadius = {
+    base: '4px',
+    small: '2px',
+    round: '20px',
+    circle: '100%',
+};
+// Box-shadow
+exports.$boxShadow = {
+    '': `0px 12px 32px 4px rgba(0, 0, 0, 0.04), 0px 8px 20px rgba(0, 0, 0, 0.08)`,
+    light: '0px 0px 12px rgba(0, 0, 0, 0.12)',
+    lighter: '0px 0px 6px rgba(0, 0, 0, 0.12)',
+    dark: '0px 16px 48px 16px rgba(0, 0, 0, 0.08),0px 12px 32px rgba(0, 0, 0, 0.12),0px 8px 16px -8px rgba(0, 0, 0, 0.16)',
+};
+// Typography （排版）
+exports.fontFamily = {
+    '': "'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif"
+};
+exports.$fontSizes = {
+    extraLarge: '20px',
+    large: '18px',
+    medium: '16px',
+    base: '14px',
+    small: '13px',
+    extraSmall: '12px',
+};
+// zIndex
+exports.$zIndex = {
+    normal: 1,
+    top: 1000,
+    popper: 2000,
+};
+// Disable default
+exports.$disabled = {
+    bgColor: exports.$fillColors.light,
+    textColor: exports.$textColors.placeholder,
+    borderColor: exports.$borderColors.light
+};
+exports.$commonComponentSize = {
+    large: '40px',
+    default: '32px',
+    small: '24px',
+};
+// overlay
+exports.$overlayColor = {
+    '': 'rgba(0, 0, 0, 0.8)',
+    light: 'rgba(0, 0, 0, 0.7)',
+    lighter: 'rgba(0, 0, 0, 0.5)'
+};
+// mask
+const $maskColor = {
+    '': 'rgba(255, 255, 255, 0.9)',
+    'extra-light': 'rgba(255, 255, 255, 0.3)',
+};
+exports.$colors = {
+    white: '#ffffff',
+    black: '#000000',
+    default: { base: exports.$textColors.regular },
+    primary: { base: '#409eff' },
+    success: { base: '#67c23a' },
+    warning: { base: '#e6a23c' },
+    danger: { base: '#f56c6c' },
+    error: { base: '#f56c6c' },
+    info: { base: '#909399' },
+};
+exports.$colorWhite = exports.$colors.white;
+exports.$colorBlack = exports.$colors.black;
+exports.$colorPrimary = exports.$colors.primary.base;
+exports.$colorSuccess = exports.$colors.success.base;
+exports.$colorWarning = exports.$colors.warning.base;
+exports.$colorDanger = exports.$colors.danger.base;
+exports.$colorError = exports.$colors.error.base;
+exports.$colorInfo = exports.$colors.info.base;
+function blendColors(color1, color2, mixRatio) {
+    // console.log('blenderColors . color1 is ', color1, ' color2 is ', color2, ' mixRation is ', mixRatio);
+    // 将颜色转换为RGB格式
+    const rgb1 = rgbStringToRgbArray(color1);
+    const rgb2 = rgbStringToRgbArray(color2);
+    // 根据比例混合RGB值
+    // let mixedRgb = mixColorsRgb(rgb1, rgb2, mixRatio);
+    const mixedRgb = [];
+    for (let i = 0; i < 3; i++) {
+        mixedRgb[i] = Math.round(mixRatio * rgb1[i] + (1 - mixRatio) * rgb2[i]);
+    }
+    // 将混合后的RGB值转回颜色字符串
+    return rgbArrayToColorString(mixedRgb);
+}
+function rgbStringToRgbArray(colorString) {
+    if (colorString.length < 5) {
+        throw Error('colorString is error . ');
+    }
+    const r = parseInt(colorString.substring(1, 3), 16);
+    const g = parseInt(colorString.substring(3, 5), 16);
+    const b = parseInt(colorString.substring(5, 7), 16);
+    return [r, g, b];
+}
+function rgbArrayToColorString(rgbArray) {
+    const redHex = padStart(rgbArray[0].toString(16), 2, '0');
+    const greenHex = padStart(rgbArray[1].toString(16), 2, '0');
+    const blueHex = padStart(rgbArray[2].toString(16), 2, '0');
+    // console.log('rgbArrayToColorString color is ', '#' + redHex + greenHex + blueHex);
+    return '#' + redHex + greenHex + blueHex;
+}
+function padStart(str, targetLength, padString) {
+    str = str.toString();
+    padString = padString ? String(padString) : '0';
+    return (str.length >= targetLength) ? str : str.padStart(targetLength, padString);
+}
+function setColorMixLevel($type, $number, $mode = 'light', $mixColor = exports.$colorWhite) {
+    // $colors[$type][$mode] = {};
+    // $colors[$type][$mode + '-' + $number] = mix($mixColor, $colors[$type].base, Math.round($number * 10) / 100);
+    exports.$colors[$type][$mode + '-' + $number] = blendColors($mixColor, exports.$colors[$type].base, Math.round($number * 10) / 100);
+    // $colors =  map.deepMerge(
+    //     $type: (
+    //       '#{$mode}-#{$number}':
+    //       mix(
+    //         $mixColor,
+    //         $colors[$type].base,
+    //         math.percentage(math.div($number, 10))
+    //       ),
+    //     )
+    // );
+    // return $colors;
+}
+exports.setColorMixLevel = setColorMixLevel;
+// $colors.primary.light-i
+// --el-color-primary-light-i
+// 10% 53a8ff
+// 20% 66b1ff
+// 30% 79bbff
+// 40% 8cc5ff
+// 50% a0cfff
+// 60% b3d8ff
+// 70% c6e2ff
+// 80% d9ecff
+// 90% ecf5ff
+for (const $type of exports.$types) {
+    for (let $i = 1; $i < 10; $i++) {
+        setColorMixLevel($type, $i, 'light', exports.$colorWhite);
+    }
+    // --el-color-primary-dark-2
+    setColorMixLevel($type, 2, 'dark', exports.$colorBlack);
+}
+console.log('$colors is ', exports.$colors);
+// Button
+// css3 var in packages/theme-chalk/src/button.scss
+exports.$button = {
+    fontWeight: exports.$fontWeightPrimary,
+    borderColor: exports.$borderColors[''],
+    bgColor: exports.$fillColors.blank,
+    textColor: exports.$textColors.regular,
+    disabled: {
+        textColor: exports.$disabled.textColor,
+        bgColor: exports.$fillColors.blank,
+        borderColor: exports.$borderColors.light,
+    },
+    divide: {
+        borderColor: 'rgba(' + exports.$colorWhite + ', 0.5)'
+    },
+    hover: {
+        textColor: exports.$colorPrimary,
+        bgColor: exports.$colors.primary['light-9'],
+        borderColor: exports.$colors.primary['light-7'],
+        link: {
+            textColor: exports.$colors.info.base, // getCssVar('color-info'),
+        },
+    },
+    active: {
+        textColor: exports.$colorPrimary,
+        borderColor: exports.$colorPrimary,
+        bgColor: exports.$colors.primary['light-9'],
+        color: exports.$textColors.primary, // getCssVar('text-color', 'primary'),
+    },
+    outline: {
+        Color: exports.$colors.primary['light-5'], // getCssVar('color-primary', 'light-5'),}
+    }
+};
+exports.$buttonBorderWidth = exports.$borderWidth;
+// need mix, so do not use css var
+exports.$buttonHoverTintPercent = '20%';
+exports.$buttonActiveShadePercent = '10%';
+exports.$buttonBorderColor = {};
+exports.$buttonBgColor = {};
+exports.$buttonTextColor = {};
+for (const $type of exports.$types) {
+    exports.$buttonBorderColor[$type] = exports.$colors[$type].base;
+    exports.$buttonBgColor[$type] = exports.$colors[$type].base;
+}
+exports.$buttonFontSize = {
+    large: exports.$fontSizes.base,
+    default: exports.$fontSizes.base,
+    small: '12px',
+};
+exports.$buttonBorderRadius = {
+    large: exports.$borderRadius.base,
+    default: exports.$borderRadius.base,
+    small: (parseInt(exports.$borderRadius.base, 10) - 1) + 'px',
+};
+exports.$buttonPaddingVertical = {
+    large: '13px',
+    default: '9px',
+    small: '6px',
+};
+exports.$buttonPaddingHorizontal = {
+    large: '20px',
+    default: '16px',
+    small: '12px',
+};