feat: 添加默认主题的 SCSS 变量

gulpfile.js

@@ -31,7 +31,7 @@ const getSassFile = () => {
 
 gulp.task('theme', () => {
   getSassFile().then(() => {
-    gulp.src('./src/theme/**').pipe(gulp.dest('./dist/theme/'))
+    gulp.src('./src/style/theme/**').pipe(gulp.dest('./dist/theme/'))
   })
 })
 
@@ -45,7 +45,7 @@ gulp.task('cleanTheme', () => {
 
 gulp.task('sass', () => {
   gulp
-    .src(['./src/**/*.scss', '!./src/theme/*'])
+    .src(['./src/**/*.scss', '!./src/style/theme/*'])
     .pipe(
       gSass({
         outputStyle: 'compressed'

src/style/global.scss

@@ -1,4 +1,4 @@
 @import "./variables";
 .page-head {
-  color: $default;
+  color: $dark;
 }

src/style/mixins/index.scss

@@ -0,0 +1,11 @@
+/**
+ * Mixins
+ */
+
+/* library */
+@import './lib/absolute-center';
+@import './lib/clearfix';
+@import './lib/ellipsis';
+@import './lib/overlay';
+@import './lib/shade';
+@import './lib/tint';

src/style/mixins/libs/absolute-center.scss

@@ -0,0 +1,9 @@
+/**
+ * 元素居中定位
+ */
+@mixin absolute-center($pos: absolute) {
+  position: $pos;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/style/mixins/libs/clearfix.scss

@@ -0,0 +1,21 @@
+/**
+ * @example scss
+ *
+ * .element {
+ *   @include clearfix;
+ * }
+ *
+ * // CSS Output
+ * .element::after {
+ *   clear: both;
+ *   content: '';
+ *   display: block;
+ * }
+ */
+@mixin clearfix {
+  &::after {
+    clear: both;
+    content: '';
+    display: block;
+  }
+}

src/style/mixins/libs/ellipsis.scss

@@ -0,0 +1,17 @@
+/**
+ * Truncate text and add an ellipsis to represent overflow
+ *
+ * @param {number} $width [Default 100%]
+ * @param {string} $display [Default inline-block] [Sets the display-value of the element]
+ */
+@mixin ellipsis(
+  $width: 100%,
+  $display: inline-block
+) {
+  display: $display;
+  max-width: $width;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  word-wrap: normal;
+}

src/style/mixins.scss → src/style/mixins/libs/overlay.scss

@@ -1,11 +1,6 @@
-@mixin absolute-center($pos: absolute) {
-  top: 50%;
-  left: 50%;
-  position: $pos;
-  transform: translate(-50%, -50%);
-}
-
-// 通用的遮罩
+/**
+ * 通用的遮罩
+ */
 @mixin overlay {
   top: 0;
   left: 0;

src/style/mixins/libs/shade.scss

@@ -0,0 +1,23 @@
+/**
+ * Mixes a color with black. It's different from darken()
+ *
+ * @param {color} $color
+ * @param {number (percentage)} $percent [The amount of black to be mixed in]
+ * @return {color}
+ *
+ * @example
+ *   .element {
+ *     background-color: shade(#ffbb52, 60%);
+ *   }
+ *
+ *   // CSS Output
+ *   .element {
+ *     background-color: #664a20;
+ *   }
+ */
+@function shade(
+  $color,
+  $percent
+) {
+  @return mix(#000, $color, $percent);
+}

src/style/mixins/libs/tint.scss

@@ -0,0 +1,23 @@
+/**
+ * Mixes a color with white. It's different from lighten()
+ *
+ * @param {color} $color
+ * @param {number (percentage)} $percent [The amout of white to be mixed in]
+ * @return {color}
+ *
+ * @example
+ *   .element {
+ *     background-color: tint(#6ecaa6 , 40%);
+ *   }
+ *
+ *   // CSS Output
+ *   .element {
+ *     background-color: #a8dfc9;
+ *   }
+ */
+@function tint(
+  $color,
+  $percent
+) {
+  @return mix(#FFF, $color, $percent);
+}

src/style/theme/default.scss

@@ -0,0 +1,144 @@
+/**
+ * Default Theme
+ */
+@import '../mixins/index.scss';
+
+$hd: 1px; // 基本单位
+
+/* The Color of O2Team Brand */
+$color-brand: #6190E8;
+$color-brand-light: #78A4F4;
+$color-brand-dark: #346FC2;
+
+/* Color */
+$color-success: #13CE66;
+$color-error: #FF4949;
+$color-warning: #FFC82C;
+$color-info: #78A4FA;
+
+/* Color Palette */
+$color-black-0: #000;
+$color-black-1: #333333;
+$color-black-2: #7F7F7F;
+$color-black-3: #B2B2B2;
+
+$color-grey-0: #333333;
+$color-grey-1: #666666;
+$color-grey-2: #999999;
+$color-grey-3: #CCC;
+$color-grey-4: #E5E5E5;
+$color-grey-5: #F0F0F0;
+$color-grey-6: #F7F7F7;
+
+$color-white: #FFF;
+
+/* Text Color */
+$color-text-base: #000; // 文字的基本色
+$color-text-base-inverse: #FFF; // 反色
+$color-text-secondary: #36D57D; // 辅助色
+$color-text-placeholder: #C9C9C9;
+$color-text-disabled: #CCC;
+$color-text-title: #2C405A; // 文章标题
+$color-text-paragraph: #3F536E; // 文章段落
+
+/* Link */
+$color-link: #6190E8;
+$color-link-hover: #79A1EB;
+$color-link-active: #4F7DE2;
+$color-link-disabled: #BFBFBF;
+
+/* 背景色 */
+$color-bg: #FFF;
+$color-bg-base: #FAFBFC;
+$color-bg-light: #ECF5FD;
+$color-bg-lighter: tint($color-bg-light, 50%);
+$color-bg-grey: #F7F7F7;
+
+/* 边框颜色 */
+$color-border-base: #C5D9E8;
+$color-border-split: tint($color-border-base, 20%); // 分割线
+$color-border-light: tint($color-border-base, 30%);
+$color-border-lighter: tint($color-border-base, 50%);
+$color-border-lightest: tint($color-border-base, 80%);
+$color-border-grey: #CCC;
+
+/* 图标颜色 */
+$color-icon-base: #CCC;
+
+/* Border Radius */
+$border-radius-sm: 2px * $hd;
+$border-radius-md: 4px * $hd;
+$border-radius-lg: 6px * $hd;
+$border-radius-circle: 50%;
+
+/* 透明度 */
+$opacity-active: 0.6; // Button 等组件点击态额透明度
+$opacity-disabled: 0.3; // Button 等组件禁用态的透明度
+
+/* Font */
+$font-size-xs: 10px * $hd; // 非常用字号，用于标签
+$font-size-sm: 12px * $hd; // 用于辅助信息
+$font-size-base: 14px * $hd; // 常用字号
+$font-size-lg: 16px * $hd; // 常规标题
+$font-size-xl: 18px * $hd; // 大标题
+$font-size-xxl: 20px * $hd; // 用于大号的数字
+
+/* Line Height */
+$line-height-base: 1; // 单行
+$line-height-en: 1.3; // 英文多行
+$line-height-zh: 1.5; // 中文多行
+
+/* 水平间距 */
+$spacing-h-sm: 5 * $hd;
+$spacing-h-md: 8 * $hd;
+$spacing-h-lg: 16 * $hd;
+
+/* 垂直间距 */
+$spacing-v-xs: 3 * $hd;
+$spacing-v-sm: 6 * $hd;
+$spacing-v-md: 9 * $hd;
+$spacing-v-lg: 12 * $hd;
+$spacing-v-xl: 15 * $hd;
+
+/* 图标尺寸 */
+$icon-size-sm: 18 * $hd;
+$icon-size-md: 22 * $hd;
+$icon-size-lg: 36 * $hd;
+
+/* z-index */
+$zindex-drawer: 900;
+$zindex-modal: 1000;
+$zindex-action-sheet: 1010;
+$zindex-picker: 1010;
+$zindex-toast: 1090;
+
+/**
+ * CSS cubic-bezier timing functions
+ * http://bourbon.io/docs/#timing-functions
+ */
+$ease-in-quad:      cubic-bezier(0.550,  0.085, 0.680, 0.530);
+$ease-in-cubic:     cubic-bezier(0.550,  0.055, 0.675, 0.190);
+$ease-in-quart:     cubic-bezier(0.895,  0.030, 0.685, 0.220);
+$ease-in-quint:     cubic-bezier(0.755,  0.050, 0.855, 0.060);
+$ease-in-sine:      cubic-bezier(0.470,  0.000, 0.745, 0.715);
+$ease-in-expo:      cubic-bezier(0.950,  0.050, 0.795, 0.035);
+$ease-in-circ:      cubic-bezier(0.600,  0.040, 0.980, 0.335);
+$ease-in-back:      cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
+$ease-out-quad:     cubic-bezier(0.250,  0.460, 0.450, 0.940);
+$ease-out-cubic:    cubic-bezier(0.215,  0.610, 0.355, 1.000);
+$ease-out-quart:    cubic-bezier(0.165,  0.840, 0.440, 1.000);
+$ease-out-quint:    cubic-bezier(0.230,  1.000, 0.320, 1.000);
+$ease-out-sine:     cubic-bezier(0.390,  0.575, 0.565, 1.000);
+$ease-out-expo:     cubic-bezier(0.190,  1.000, 0.220, 1.000);
+$ease-out-circ:     cubic-bezier(0.075,  0.820, 0.165, 1.000);
+$ease-out-back:     cubic-bezier(0.175,  0.885, 0.320, 1.275);
+
+$ease-in-out-quad:  cubic-bezier(0.455,  0.030, 0.515, 0.955);
+$ease-in-out-cubic: cubic-bezier(0.645,  0.045, 0.355, 1.000);
+$ease-in-out-quart: cubic-bezier(0.770,  0.000, 0.175, 1.000);
+$ease-in-out-quint: cubic-bezier(0.860,  0.000, 0.070, 1.000);
+$ease-in-out-sine:  cubic-bezier(0.445,  0.050, 0.550, 0.950);
+$ease-in-out-expo:  cubic-bezier(1.000,  0.000, 0.000, 1.000);
+$ease-in-out-circ:  cubic-bezier(0.785,  0.135, 0.150, 0.860);
+$ease-in-out-back:  cubic-bezier(0.680, -0.550, 0.265, 1.550);