@indfnd/common-m 0.0.5

package/src/styles/variables/base.less

@@ -0,0 +1,143 @@
+/*
+ * 一些基础变量的定义，分为配色、边距长度、字体、边框圆角、阴影、动画
+ * 配色和边距不建议直接使用，而是在 theme 中定义具有业务意义的变量
+ *
+ * --Author: huxuetong 
+ * --Date: 2023-08-16 16:23:06 
+ * --Last Modified by: huxuetong
+ * --Last Modified time: 2023-08-19 16:48:38
+ */
+
+@ind-blue: #488aff;
+
+:root {
+  // 基础样式修改
+  // Color Palette
+  --ind-white: #fff;
+  --ind-white-1: var(--ind-white);
+  --ind-white-2: rgba(255, 255, 255, 0.85);
+  --ind-white-3: rgba(255, 255, 255, 0.7);
+  --ind-white-4: rgba(255, 255, 255, 0.5);
+  --ind-white-5: rgba(255, 255, 255, 0.3);
+  --ind-white-6: rgba(255, 255, 255, 0.1);
+
+  --ind-black: #333;
+  --ind-gray: #333;
+  --ind-gray-1: #f5f7f9;
+  --ind-gray-2: #efefef;
+  --ind-gray-3: #e6e6e6;
+  --ind-gray-4: var(--ind-gray);
+  --ind-gray-5: #999;
+  --ind-gray-6: #555;
+  --ind-gray-7: var(--ind-black);
+
+  --ind-blue: @ind-blue;
+  --ind-blue-1: #a3ccfe;
+  --ind-blue-2: #81b1ff;
+  --ind-blue-3: #79adff;
+  --ind-blue-4: #1d70f5;
+  --ind-blue-5: var(--ind-blue);
+  --ind-blue-6: #02328f;
+  --ind-blue-7: #002b7b;
+  --ind-blue-8: #0c3d98;
+  --ind-blue-9: #001d55;
+  --ind-blue-10: #002874;
+
+  --ind-green: #34b11c;
+  --ind-green-1: #c8fbcb;
+  --ind-green-2: #94f7a2;
+  --ind-green-3: #5ce87e;
+  --ind-green-4: #34d169;
+  --ind-green-5: var(--ind-green);
+  --ind-green-6: #009953;
+  --ind-green-7: #008052;
+  --ind-green-8: #00674c;
+  --ind-green-9: #005548;
+
+  --ind-orange: #ff976a;
+  --ind-orange-1: #fffbe8;
+  --ind-orange-2: #fbcd65;
+  --ind-orange-3: #fbcd65;
+  --ind-orange-4: #f7b73e;
+  --ind-orange-5: var(--ind-orange);
+  --ind-orange-6: #ed6a0c;
+  --ind-orange-8: #ae5e00;
+  --ind-orange-8: #8c4600;
+  --ind-orange-9: #743500;
+  --ind-orange-light: var(--ind-orange-1);
+  --ind-orange-dark: var(--ind-orange-6);
+
+  --ind-red: #d32913;
+  --ind-red-1: #fce2ce;
+  --ind-red-2: #fabf9f;
+  --ind-red-3: #f1926d;
+  --ind-red-4: #e46648;
+  --ind-red-5: var(--ind-red);
+  --ind-red-6: #b5130d;
+  --ind-red-7: #970910;
+  --ind-red-8: #7a0614;
+  --ind-red-9: #650317;
+
+  // Gradient Colors
+  --ind-gradient-blue-linear: linear-gradient(to right, #548eff, #6bc5ff);
+  --ind-gradient-green-linear: linear-gradient(to right, #32c67c, #4edda1);
+  --ind-gradient-orange-linear: linear-gradient(to right, #ffa724, #e0ac5e);
+  --ind-gradient-red-linear: linear-gradient(to right, #ff5e67, #ff8fa4);
+  --ind-gradient-blue-radial: radial-gradient(circle at 50% 84%, #225ed2 0%, #083da3 109%);
+
+  // Padding
+  --ind-padding-base: 4px;
+  --ind-padding-xs: 8px;
+  --ind-padding-sm: 16px;
+  --ind-padding-md: 24px;
+  --ind-padding-lg: 32px;
+  --ind-padding-xl: 48px;
+
+  // Font
+  --ind-font-size-xs: 10px;
+  --ind-font-size-sm: 12px;
+  --ind-font-size-md: 14px;
+  --ind-font-size-lg: 16px;
+  --ind-font-size-xl: 18px;
+  --ind-font-size-xxl: 20px;
+  --ind-font-weight-normal: 400;
+  --ind-font-weight-bold: 600;
+  --ind-font-weight-bolder: 900;
+  --ind-line-height-xs: 14px;
+  --ind-line-height-sm: 18px;
+  --ind-line-height-md: 22px;
+  --ind-line-height-lg: 24px;
+  // --ind-base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+  //   Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui',
+  //   'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
+  // --ind-price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue,
+  //   Arial, sans-serif;
+
+  // Border
+  --ind-border-width-base: 1px;
+  --ind-border-radius-xs: 2px;
+  --ind-border-radius-sm: 4px;
+  --ind-border-radius-md: 8px;
+  --ind-border-radius-lg: 14px;
+  --ind-border-radius-xl: 20px;
+  --ind-border-radius-xxl: 32px;
+  --ind-border-radius-max: 999px;
+  --ind-border-radius-round: 50%;
+
+  // Box Shadow
+  --ind-box-shadow-sm-1: 0px 1px 2px -2px rgba(0, 0, 0, 0.16);
+  --ind-box-shadow-md-1: 0px 3px 6px 0px rgba(0, 0, 0, 0.12);
+  --ind-box-shadow-lg-1: 0px 5px 12px 4px rgba(0, 0, 0, 0.09);
+  --ind-box-shadow-sm-2: 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
+  --ind-box-shadow-md-2: 0px 6px 16px 0px rgba(0, 0, 0, 0.08);
+  --ind-box-shadow-lg-2: 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
+  --ind-box-shadow-sm-3: 0px 6px 6px -8px rgba(0, 0, 0, 0.08);
+  --ind-box-shadow-md-3: 0px 9px 28px 0px rgba(0, 0, 0, 0.05);
+  --ind-box-shadow-lg-3: 0px 12px 48px 16px rgba(0, 0, 0, 0.03);
+
+  // Animation
+  --ind-animation-duration-base: 0.3s;
+  --ind-animation-duration-fast: 0.2s;
+  --ind-animation-timing-function-enter: ease-out;
+  --ind-animation-timing-function-leave: ease-in;
+}

package/src/styles/variables/index.less

@@ -0,0 +1,4 @@
+// 基础变量
+@import './base.less';
+// 主题变量
+@import './theme/index.less';