增加颜色

resources/assets/dcat/sass/_colors.scss

@@ -0,0 +1,149 @@
+
+// 文本颜色
+.text-primary-darker {
+  color: $primary-darker!important;
+}
+.text-danger-darker {
+  color: $red-darker!important;
+}
+.text-blue-darker {
+  color: $blue-darker!important;
+}
+.text-custom {
+  color: $custom!important;
+}
+.text-pink {
+  color: $pink!important;
+}
+.text-yellow {
+  color: $yellow!important;
+}
+.text-light {
+  color: $light!important;
+}
+.text-white50 {
+  color: $white50!important;
+}
+.text-orange {
+  color: $orange!important;
+}
+.text-orange-1 {
+  color: $orange-1!important;
+}
+.text-orange-2 {
+  color: $orange-2!important;
+}
+.text-blue-1 {
+  color: $blue-1!important;
+}
+.text-blue-2 {
+  color: $blue-2!important;
+}
+
+.text-tear {
+  color: $tear!important;
+}
+.text-tear-1 {
+  color: $tear-1!important;
+}
+
+// 深色
+.text-gray {
+  color: $gray!important;
+}
+.text-20 {
+  color: $dark20!important;
+}
+.text-30 {
+  color: $dark30!important;
+}
+.text-40 {
+  color: $dark40!important;
+}
+.text-50 {
+  color: $dark50!important;
+}
+.text-60 {
+  color: $dark60!important;
+}
+.text-70 {
+  color: $dark70!important;
+}
+.text-80 {
+  color: $dark80!important;
+}
+.text-85 {
+  color: $dark85!important;
+}
+
+
+// 背景颜色
+.bg-custom {
+  background: $custom!important;
+}
+.bg-custom {
+  background: $custom!important;
+}
+.bg-pink {
+  background: $pink!important;
+}
+.bg-yellow {
+  background: $yellow!important;
+}
+.bg-light {
+  background: $light!important;
+}
+.bg-white50 {
+  background: $white50!important;
+}
+.bg-orange {
+  background: $orange!important;
+}
+.bg-orange-1 {
+  background: $orange-1!important;
+}
+.bg-orange-2 {
+  background: $orange-2!important;
+}
+.bg-blue-1 {
+  background: $blue-1!important;
+}
+.bg-blue-2 {
+  background: $blue-2!important;
+}
+
+.bg-tear {
+  background: $tear!important;
+}
+.bg-tear-1 {
+  background: $tear-1!important;
+}
+
+// 深色
+.bg-default {
+  background: #d2d6de!important;
+}
+.bg-gray {
+  background: $gray!important;
+}
+.bg-20 {
+  background: $dark20!important;
+}
+.bg-30 {
+  background: $dark30!important;
+}
+.bg-40 {
+  background: $dark40!important;
+}
+.bg-50 {
+  background: $dark50!important;
+}
+.bg-60 {
+  background: $dark60!important;
+}
+.bg-70 {
+  background: $dark70!important;
+}
+.bg-80 {
+  background: $dark80!important;
+}

resources/assets/dcat/sass/dcat-app.scss

@@ -32,6 +32,10 @@ html body .content .content-wrapper {
 ol, ul, dl {
   margin-bottom: 0;
 }
+.testcolor {
+  color: #00b5b5;
+  color: #01847f;
+}
 
 // 阴影
 .shadow-0 {
@@ -47,26 +51,8 @@ ol, ul, dl {
   box-shadow: $shadow-200!important;
 }
 
-// 颜色
-.bg-default {
-  background-color: #d2d6de;
-}
-
-.bg-custom {
-  background: $custom;
-}
-
-.text-danger-darker {
-  color: $red-darker;
-}
-
-.text-primary-darker {
-  color: $primary-darker;
-}
-
-.bg-primary-gradient {
-  background: linear-gradient(118deg, $primary, rgba($primary, .7));
-}
+// 颜色class定义
+@import "./colors";
 
 // 布局
 @import "./components/layout";

resources/assets/dcat/sass/variables/_colors.scss

@@ -5,11 +5,16 @@ $dark: #22292f;
 $white: #fff;
 $white50: hsla(0,0%,100%,.5);
 
-// 淡黄色
-$orange-1: #ffcc80;
+// 灰色
+$gray: #b9c3cd;
 
+// 橘色
+$orange-1: #ffcc80;
 $orange-2: #F99037;
 
+// 黄色
+$yellow: #edc30e;
+
 // 深红
 $red-darker: #bd4147;
 
@@ -20,6 +25,10 @@ $primary-darker: darken($primary, 5%);
 $blue: #3085d6;
 $blue-darker: #236bb0;
 
+// 水鸭色
+$tear: #01847f;
+$tear-1: #00b5b5;
+
 // 其他蓝色
 $blue-1: #007ee5;
 $blue-2: #4199de;
@@ -29,6 +38,7 @@ $pink: #ff8acc;
 // cyan
 $cyan-darker: #6355ee;
 
+$light: #F7F7F9;
 
 // 深色
 $dark20: #f6fbff;

resources/dist/dcat/css/dcat-app.css

@@ -109,6 +109,11 @@ dl {
   margin-bottom: 0;
 }
 
+.testcolor {
+  color: #00b5b5;
+  color: #01847f;
+}
+
 .shadow-0 {
   box-shadow: none !important;
 }
@@ -125,24 +130,188 @@ dl {
   box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 1px 5px 1px rgba(0, 0, 0, 0.1) !important;
 }
 
-.bg-default {
-  background-color: #d2d6de;
+.text-primary-darker {
+  color: #495abf !important;
+}
+
+.text-danger-darker {
+  color: #bd4147 !important;
+}
+
+.text-blue-darker {
+  color: #236bb0 !important;
+}
+
+.text-custom {
+  color: #59a9f8 !important;
+}
+
+.text-pink {
+  color: #ff8acc !important;
+}
+
+.text-yellow {
+  color: #edc30e !important;
+}
+
+.text-light {
+  color: #F7F7F9 !important;
+}
+
+.text-white50 {
+  color: rgba(255, 255, 255, 0.5) !important;
+}
+
+.text-orange {
+  color: #dda451 !important;
+}
+
+.text-orange-1 {
+  color: #ffcc80 !important;
+}
+
+.text-orange-2 {
+  color: #F99037 !important;
+}
+
+.text-blue-1 {
+  color: #007ee5 !important;
+}
+
+.text-blue-2 {
+  color: #4199de !important;
+}
+
+.text-tear {
+  color: #01847f !important;
+}
+
+.text-tear-1 {
+  color: #00b5b5 !important;
+}
+
+.text-gray {
+  color: #b9c3cd !important;
+}
+
+.text-20 {
+  color: #f6fbff !important;
+}
+
+.text-30 {
+  color: #f4f7fa !important;
+}
+
+.text-40 {
+  color: #ebf0f3 !important;
+}
+
+.text-50 {
+  color: #d3dde5 !important;
+}
+
+.text-60 {
+  color: #bacad6 !important;
+}
+
+.text-70 {
+  color: #b3b9bf !important;
+}
+
+.text-80 {
+  color: #7c858e !important;
+}
+
+.text-85 {
+  color: #5c7089 !important;
 }
 
 .bg-custom {
-  background: #59a9f8;
+  background: #59a9f8 !important;
 }
 
-.text-danger-darker {
-  color: #bd4147;
+.bg-custom {
+  background: #59a9f8 !important;
 }
 
-.text-primary-darker {
-  color: #495abf;
+.bg-pink {
+  background: #ff8acc !important;
+}
+
+.bg-yellow {
+  background: #edc30e !important;
+}
+
+.bg-light {
+  background: #F7F7F9 !important;
+}
+
+.bg-white50 {
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+.bg-orange {
+  background: #dda451 !important;
+}
+
+.bg-orange-1 {
+  background: #ffcc80 !important;
+}
+
+.bg-orange-2 {
+  background: #F99037 !important;
+}
+
+.bg-blue-1 {
+  background: #007ee5 !important;
+}
+
+.bg-blue-2 {
+  background: #4199de !important;
+}
+
+.bg-tear {
+  background: #01847f !important;
+}
+
+.bg-tear-1 {
+  background: #00b5b5 !important;
+}
+
+.bg-default {
+  background: #d2d6de !important;
+}
+
+.bg-gray {
+  background: #b9c3cd !important;
+}
+
+.bg-20 {
+  background: #f6fbff !important;
+}
+
+.bg-30 {
+  background: #f4f7fa !important;
+}
+
+.bg-40 {
+  background: #ebf0f3 !important;
+}
+
+.bg-50 {
+  background: #d3dde5 !important;
+}
+
+.bg-60 {
+  background: #bacad6 !important;
+}
+
+.bg-70 {
+  background: #b3b9bf !important;
 }
 
-.bg-primary-gradient {
-  background: linear-gradient(118deg, #5c6bc6, rgba(92, 107, 198, 0.7));
+.bg-80 {
+  background: #7c858e !important;
 }
 
 .pin,

src/Color.php

@@ -32,10 +32,15 @@ use Dcat\Admin\Support\Helper;
  * @method string blue2(int $amt = 0)
  * @method string orange1(int $amt = 0)
  * @method string orange2(int $amt = 0)
+ * @method string yellow(int $amt = 0)
  * @method string indigoDarker(int $amt = 0)
  * @method string redDarker(int $amt = 0)
  * @method string blueDarker(int $amt = 0)
  * @method string cyanDarker(int $amt = 0)
+ * @method string gray(int $amt = 0)
+ * @method string light(int $amt = 0)
+ * @method string tear(int $amt = 0)
+ * @method string tear1(int $amt = 0)
  * @method string dark20(int $amt = 0)
  * @method string dark30(int $amt = 0)
  * @method string dark40(int $amt = 0)
@@ -107,15 +112,27 @@ class Color
         'blue1' => '#007ee5',
         'blue2' => '#4199de',
 
-        // 淡橘色
+        // 橘色
         'orange1' => '#ffcc80',
         'orange2' => '#F99037',
 
+        // 黄色
+        'yellow' => '#edc30e',
+
         'indigo-darker' => '#495abf',
         'red-darker'    => '#bd4147',
         'blue-darker'   => '#236bb0',
         'cyan-darker'   => '#6355ee',
 
+        // 灰色
+        'gray' => '#b9c3cd',
+        // 轻灰
+        'light' => '#f7f7f9',
+
+        // 水鸭色
+        'tear'  => '#01847f',
+        'tear1' => '#00b5b5',
+
         // 深色
         'dark20' => '#f6fbff',
         'dark30' => '#f4f7fa',