amis-ui 1.0.0-beta.0

package/scss/components/react-datetime.scss

@@ -0,0 +1,247 @@
+/*!
+ * https://github.com/arqex/react-datetime
+ */
+
+.rdt {
+  position: relative;
+}
+.rdtPicker {
+  display: none;
+  position: absolute;
+  width: 240px;
+  padding: 4px;
+  margin-top: 1px;
+  z-index: 99999 !important;
+  background: #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  border: 1px solid #f9f9f9;
+}
+.rdtOpen .rdtPicker {
+  display: block;
+}
+.rdtStatic .rdtPicker {
+  box-shadow: none;
+  position: static;
+}
+
+.rdtPicker .rdtTimeToggle {
+  text-align: center;
+}
+
+.rdtPicker table {
+  width: 100%;
+  margin: 0;
+  padding: 0 12px;
+  border-spacing: 0 8px;
+}
+
+.rdtMonths,
+.rdtYears {
+  table {
+    border-spacing: 0 12px;
+  }
+  .headerTable {
+    border-spacing: 0;
+    border-bottom: 1px solid #E8E9EB;
+  }
+}
+.rdtPicker td,
+.rdtPicker th {
+  text-align: center;
+  height: 24px;
+  line-height: 24px;
+  width: 24px;
+}
+.rdtPicker td {
+  cursor: pointer;
+  > span {
+    display: inline-block;
+    border-radius: 2px;
+    height: 100%;
+    width: 24px;
+  }
+}
+.rdtPicker td.rdtDay:hover,
+.rdtPicker td.rdtHour:hover,
+.rdtPicker td.rdtMinute:hover,
+.rdtPicker td.rdtSecond:hover,
+.rdtPicker .rdtTimeToggle:hover {
+  background: #eeeeee;
+  cursor: pointer;
+}
+.rdtPicker td.rdtOld,
+.rdtPicker td.rdtNew {
+  color: #B8BABF;
+}
+.rdtPicker td.rdtToday {
+  position: relative;
+  > span {
+    border: 1px solid #2468F2;
+  }
+}
+.rdtPicker td.rdtActive,
+.rdtPicker td.rdtActive:hover {
+  background-color: #428bca;
+  color: #fff;
+  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+}
+.rdtPicker td.rdtActive.rdtToday:before {
+  border-bottom-color: #fff;
+}
+.rdtPicker td.rdtDisabled,
+.rdtPicker td.rdtDisabled:hover {
+  background: none;
+  color: #B8BABF;
+  cursor: not-allowed;
+}
+
+.rdtPicker td span.rdtOld {
+  color: #B8BABF;
+}
+.rdtPicker td span.rdtDisabled,
+.rdtPicker td span.rdtDisabled:hover {
+  background: none;
+  color: #B8BABF;
+  cursor: not-allowed;
+  > span {
+    border-color: #E8E9EB;
+  }
+}
+.rdtPicker th {
+  border-bottom: 1px solid #f9f9f9;
+}
+.rdtPicker .dow {
+  width: 14.2857%;
+  border-bottom: none;
+  cursor: default;
+}
+.rdtPicker th.rdtSwitch {
+  width: 100px;
+  height: 40px;
+  line-height: 40px;
+}
+.rdtPicker th.rdtNext,
+.rdtPicker th.rdtPrev {
+  font-size: 21px;
+  vertical-align: top;
+  height: 40px;
+  line-height: 40px;
+}
+
+.rdtPrev span,
+.rdtNext span {
+  display: block;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+.rdtPicker th.rdtDisabled,
+.rdtPicker th.rdtDisabled:hover {
+  background: none;
+  color: #B8BABF;
+  cursor: not-allowed;
+}
+.rdtPicker thead tr:first-of-type th {
+  cursor: pointer;
+}
+.rdtPicker thead tr:first-of-type th:hover {
+  background: #eeeeee;
+}
+
+.rdtPicker tfoot {
+  border-top: 1px solid #f9f9f9;
+}
+
+.rdtPicker button {
+  border: none;
+  background: none;
+  cursor: pointer;
+}
+.rdtPicker button:hover {
+  background-color: #eee;
+}
+
+.rdtPicker thead button {
+  width: 100%;
+  height: 100%;
+}
+
+td.rdtMonth,
+td.rdtYear,
+td.rdtQuarter {
+  height: 24px;
+  width: 48px;
+  line-height: 24px;
+  text-align: center;
+  cursor: pointer;
+
+  > span {
+    width: 48px;
+  }
+}
+td.rdtMonth:hover,
+td.rdtYear:hover,
+td.rdtQuarter:hover {
+  background: #eee;
+}
+
+.rdtCounters {
+  display: inline-block;
+}
+
+.rdtCounters > div {
+  float: left;
+}
+
+.rdtCounter {
+  height: 100px;
+}
+
+.rdtCounter {
+  width: 40px;
+}
+
+.rdtCounterSeparator {
+  line-height: 100px;
+}
+
+.rdtCounter .rdtBtn {
+  height: 40%;
+  line-height: 40px;
+  cursor: pointer;
+  display: block;
+
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none; /* Chrome/Safari/Opera */
+  -khtml-user-select: none; /* Konqueror */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none;
+}
+.rdtCounter .rdtBtn:hover {
+  background: #eee;
+}
+.rdtCounter .rdtCount {
+  height: 20%;
+  font-size: 1.2em;
+}
+
+.rdtMilli {
+  vertical-align: middle;
+  padding-left: 8px;
+  width: 48px;
+}
+
+.rdtMilli input {
+  width: 100%;
+  font-size: 1.2em;
+  margin-top: 37px;
+}
+
+.rdtTime td {
+  cursor: default;
+}

package/scss/helper/background/_background-color.scss

@@ -0,0 +1,214 @@
+/*!markdown
+
+---
+title: 背景色
+---
+
+| Class       | Properties               |   Demo   |
+| ----------- | ------------------------ | -------- |
+| bg-none | background: none !important | <span  style="background: none !important;" class="w-24 h-6"></div> |
+| bg-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-black | background: #000 | <div style="background: #000;" class="w-24 h-6"></div> |
+| bg-white | background: #fff | <div style="background: #fff;" class="w-24 h-6"></div> |
+| bg-primary | background: #007bff | <div style="background: #007bff;" class="w-24 h-6"></div> |
+| bg-secondary | background: #6c757d | <div style="background: #6c757d;" class="w-24 h-6"></div> |
+| bg-success | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
+| bg-info | background: #007bff | <div style="background: #007bff" class="w-24 h-6"></div> |
+| bg-warning | background: #28a745 | <div style="background: #28a745;" class="w-24 h-6"></div> |
+| bg-danger | background: #dc3545 | <div style="background: #dc3545;" class="w-24 h-6"></div> |
+| bg-light | background: #f8f9fa | <div style="background: #f8f9fa;" class="w-24 h-6"></div> |
+| bg-dark | background: #343a40 | <div style="background: #343a40;" class="w-24 h-6"></div> |
+| bg-gray-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-gray-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-gray-50 | background: #f9fafb | <div style="background: #f9fafb;" class="w-24 h-6"></div> |
+| bg-gray-100 | background: #f3f4f6 | <div style="background: #f3f4f6;" class="w-24 h-6"></div> |
+| bg-gray-200 | background: #e5e7eb | <div style="background: #e5e7eb;" class="w-24 h-6"></div> |
+| bg-gray-300 | background: #d1d5db | <div style="background: #d1d5db;" class="w-24 h-6"></div> |
+| bg-gray-400 | background: #9ca3af | <div style="background: #9ca3af;" class="w-24 h-6"></div> |
+| bg-gray-500 | background: #6b7280 | <div style="background: #6b7280;" class="w-24 h-6"></div> |
+| bg-gray-600 | background: #4b5563 | <div style="background: #4b5563;" class="w-24 h-6"></div> |
+| bg-gray-700 | background: #374151 | <div style="background: #374151;" class="w-24 h-6"></div> |
+| bg-gray-800 | background: #1f2937 | <div style="background: #1f2937;" class="w-24 h-6"></div> |
+| bg-gray-900 | background: #111827 | <div style="background: #111827;" class="w-24 h-6"></div> |
+| bg-red-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-red-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-red-50 | background: #fef2f2 | <div style="background: #fef2f2;" class="w-24 h-6"></div> |
+| bg-red-100 | background: #fee2e2 | <div style="background: #fee2e2;" class="w-24 h-6"></div> |
+| bg-red-200 | background: #fecaca | <div style="background: #fecaca;" class="w-24 h-6"></div> |
+| bg-red-300 | background: #fca5a5 | <div style="background: #fca5a5;" class="w-24 h-6"></div> |
+| bg-red-400 | background: #f87171 | <div style="background: #f87171;" class="w-24 h-6"></div> |
+| bg-red-500 | background: #ef4444 | <div style="background: #ef4444;" class="w-24 h-6"></div> |
+| bg-red-600 | background: #dc2626 | <div style="background: #dc2626;" class="w-24 h-6"></div> |
+| bg-red-700 | background: #b91c1c | <div style="background: #b91c1c;" class="w-24 h-6"></div> |
+| bg-red-800 | background: #991b1b | <div style="background: #991b1b;" class="w-24 h-6"></div> |
+| bg-red-900 | background: #7f1d1d | <div style="background: #7f1d1d;" class="w-24 h-6"></div> |
+| bg-yellow-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-yellow-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-yellow-50 | background: #fffbeb | <div style="background: #fffbeb;" class="w-24 h-6"></div> |
+| bg-yellow-100 | background: #fef3c7 | <div style="background: #fef3c7;" class="w-24 h-6"></div> |
+| bg-yellow-200 | background: #fde68a | <div style="background: #fde68a;" class="w-24 h-6"></div> |
+| bg-yellow-300 | background: #fcd34d | <div style="background: #fcd34d;" class="w-24 h-6"></div> |
+| bg-yellow-400 | background: #fbbf24 | <div style="background: #fbbf24;" class="w-24 h-6"></div> |
+| bg-yellow-500 | background: #f59e0b | <div style="background: #f59e0b;" class="w-24 h-6"></div> |
+| bg-yellow-600 | background: #d97706 | <div style="background: #d97706;" class="w-24 h-6"></div> |
+| bg-yellow-700 | background: #b45309 | <div style="background: #b45309;" class="w-24 h-6"></div> |
+| bg-yellow-800 | background: #92400e | <div style="background: #92400e;" class="w-24 h-6"></div> |
+| bg-yellow-900 | background: #78350f | <div style="background: #78350f;" class="w-24 h-6"></div> |
+| bg-green-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-green-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-green-50 | background: #ecfdf5 | <div style="background: #ecfdf5;" class="w-24 h-6"></div> |
+| bg-green-100 | background: #d1fae5 | <div style="background: #d1fae5;" class="w-24 h-6"></div> |
+| bg-green-200 | background: #a7f3d0 | <div style="background: #a7f3d0;" class="w-24 h-6"></div> |
+| bg-green-300 | background: #6ee7b7 | <div style="background: #6ee7b7;" class="w-24 h-6"></div> |
+| bg-green-400 | background: #34d399 | <div style="background: #34d399;" class="w-24 h-6"></div> |
+| bg-green-500 | background: #10b981 | <div style="background: #10b981;" class="w-24 h-6"></div> |
+| bg-green-600 | background: #059669 | <div style="background: #059669;" class="w-24 h-6"></div> |
+| bg-green-700 | background: #047857 | <div style="background: #047857;" class="w-24 h-6"></div> |
+| bg-green-800 | background: #065f46 | <div style="background: #065f46;" class="w-24 h-6"></div> |
+| bg-green-900 | background: #064e3b | <div style="background: #064e3b;" class="w-24 h-6"></div> |
+| bg-blue-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-blue-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-blue-50 | background: #eff6ff | <div style="background: #eff6ff;" class="w-24 h-6"></div> |
+| bg-blue-100 | background: #dbeafe | <div style="background: #dbeafe;" class="w-24 h-6"></div> |
+| bg-blue-200 | background: #bfdbfe | <div style="background: #bfdbfe;" class="w-24 h-6"></div> |
+| bg-blue-300 | background: #93c5fd | <div style="background: #93c5fd;" class="w-24 h-6"></div> |
+| bg-blue-400 | background: #60a5fa | <div style="background: #60a5fa;" class="w-24 h-6"></div> |
+| bg-blue-500 | background: #3b82f6 | <div style="background: #3b82f6;" class="w-24 h-6"></div> |
+| bg-blue-600 | background: #2563eb | <div style="background: #2563eb;" class="w-24 h-6"></div> |
+| bg-blue-700 | background: #1d4ed8 | <div style="background: #1d4ed8;" class="w-24 h-6"></div> |
+| bg-blue-800 | background: #1e40af | <div style="background: #1e40af;" class="w-24 h-6"></div> |
+| bg-blue-900 | background: #1e3a8a | <div style="background: #1e3a8a;" class="w-24 h-6"></div> |
+| bg-cyan-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-cyan-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-cyan-50 | background: #ecfeff | <div style="background: #ecfeff;" class="w-24 h-6"></div> |
+| bg-cyan-100 | background: #cffafe | <div style="background: #cffafe;" class="w-24 h-6"></div> |
+| bg-cyan-200 | background: #a5f3fc | <div style="background: #a5f3fc;" class="w-24 h-6"></div> |
+| bg-cyan-300 | background: #67e8f9 | <div style="background: #67e8f9;" class="w-24 h-6"></div> |
+| bg-cyan-400 | background: #22d3ee | <div style="background: #22d3ee;" class="w-24 h-6"></div> |
+| bg-cyan-500 | background: #06b6d4 | <div style="background: #06b6d4;" class="w-24 h-6"></div> |
+| bg-cyan-600 | background: #0891b2 | <div style="background: #0891b2;" class="w-24 h-6"></div> |
+| bg-cyan-700 | background: #0e7490 | <div style="background: #0e7490;" class="w-24 h-6"></div> |
+| bg-cyan-800 | background: #155e75 | <div style="background: #155e75;" class="w-24 h-6"></div> |
+| bg-cyan-900 | background: #164e63 | <div style="background: #164e63;" class="w-24 h-6"></div> |
+| bg-indigo-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-indigo-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-indigo-50 | background: #eef2ff | <div style="background: #eef2ff;" class="w-24 h-6"></div> |
+| bg-indigo-100 | background: #e0e7ff | <div style="background: #e0e7ff;" class="w-24 h-6"></div> |
+| bg-indigo-200 | background: #c7d2fe | <div style="background: #c7d2fe;" class="w-24 h-6"></div> |
+| bg-indigo-300 | background: #a5b4fc | <div style="background: #a5b4fc;" class="w-24 h-6"></div> |
+| bg-indigo-400 | background: #818cf8 | <div style="background: #818cf8;" class="w-24 h-6"></div> |
+| bg-indigo-500 | background: #6366f1 | <div style="background: #6366f1;" class="w-24 h-6"></div> |
+| bg-indigo-600 | background: #4f46e5 | <div style="background: #4f46e5;" class="w-24 h-6"></div> |
+| bg-indigo-700 | background: #4338ca | <div style="background: #4338ca;" class="w-24 h-6"></div> |
+| bg-indigo-800 | background: #3730a3 | <div style="background: #3730a3;" class="w-24 h-6"></div> |
+| bg-indigo-900 | background: #312e81 | <div style="background: #312e81;" class="w-24 h-6"></div> |
+| bg-purple-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-purple-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-purple-50 | background: #f5f3ff | <div style="background: #f5f3ff;" class="w-24 h-6"></div> |
+| bg-purple-100 | background: #ede9fe | <div style="background: #ede9fe;" class="w-24 h-6"></div> |
+| bg-purple-200 | background: #ddd6fe | <div style="background: #ddd6fe;" class="w-24 h-6"></div> |
+| bg-purple-300 | background: #c4b5fd | <div style="background: #c4b5fd;" class="w-24 h-6"></div> |
+| bg-purple-400 | background: #a78bfa | <div style="background: #a78bfa;" class="w-24 h-6"></div> |
+| bg-purple-500 | background: #8b5cf6 | <div style="background: #8b5cf6;" class="w-24 h-6"></div> |
+| bg-purple-600 | background: #7c3aed | <div style="background: #7c3aed;" class="w-24 h-6"></div> |
+| bg-purple-700 | background: #6d28d9 | <div style="background: #6d28d9;" class="w-24 h-6"></div> |
+| bg-purple-800 | background: #5b21b6 | <div style="background: #5b21b6;" class="w-24 h-6"></div> |
+| bg-purple-900 | background: #4c1d95 | <div style="background: #4c1d95;" class="w-24 h-6"></div> |
+| bg-pink-transparent | background: transparent | <div style="background: transparent;" class="w-24 h-6"></div> |
+| bg-pink-current | background: currentColor | <div style="background: currentColor;" class="w-24 h-6"></div> |
+| bg-pink-50 | background: #fdf2f8 | <div style="background: #fdf2f8;" class="w-24 h-6"></div> |
+| bg-pink-100 | background: #fce7f3 | <div style="background: #fce7f3;" class="w-24 h-6"></div> |
+| bg-pink-200 | background: #fbcfe8 | <div style="background: #fbcfe8;" class="w-24 h-6"></div> |
+| bg-pink-300 | background: #f9a8d4 | <div style="background: #f9a8d4;" class="w-24 h-6"></div> |
+| bg-pink-400 | background: #f472b6 | <div style="background: #f472b6;" class="w-24 h-6"></div> |
+| bg-pink-500 | background: #ec4899 | <div style="background: #ec4899;" class="w-24 h-6"></div> |
+| bg-pink-600 | background: #db2777 | <div style="background: #db2777;" class="w-24 h-6"></div> |
+| bg-pink-700 | background: #be185d | <div style="background: #be185d;" class="w-24 h-6"></div> |
+| bg-pink-800 | background: #9d174d | <div style="background: #9d174d;" class="w-24 h-6"></div> |
+| bg-pink-900 | background: #831843 | <div style="background: #831843;" class="w-24 h-6"></div> |
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:bg-black`
+
+参考: [tailwindcss](https://tailwindcss.com/docs/background-color)
+
+*/
+
+@mixin bg-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
+  #{$prefix}bg#{$namePrefix}-transparent#{$suffix} {
+    background: transparent;
+  }
+
+  #{$prefix}bg#{$namePrefix}-current#{$suffix} {
+    background: currentColor;
+  }
+
+  @each $name, $color in $colors {
+    @if (is-map($color)) {
+      @include bg-colors-map($color, #{'-' + $name}, $prefix, $suffix);
+    } @else if $suffix == '.is-active' {
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}.is-active,
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}:active {
+        background-color: $color;
+      }
+    } @else if $suffix == '.is-disabled' {
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}.is-disabled,
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}:disabled {
+        background-color: $color;
+      }
+    } @else {
+      #{$prefix}bg#{$namePrefix}-#{'' + $name}#{$suffix} {
+        background-color: $color;
+      }
+    }
+  }
+}
+
+@mixin bg-colors($prefix: '.', $suffix: '') {
+  #{$prefix}bg-transparent#{$suffix} {
+    background: transparent;
+  }
+  #{$prefix}bg-none#{$suffix} {
+    background: none !important;
+  }
+  @include bg-colors-map($colors, '', $prefix, $suffix);
+}
+
+@include bg-colors();
+@include bg-colors('.' + selector-escape('hover:'), ':hover');
+@include bg-colors('.' + selector-escape('active:'), '.is-active');
+@include bg-colors('.' + selector-escape('focus:'), ':focus');
+@include bg-colors('.' + selector-escape('disabled:'), '.is-disabled');
+@include bg-colors('.group:hover .' + selector-escape('group-hover:'));
+
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include bg-colors('.' + selector-escape($deivce + ':'));
+
+    @include bg-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('hover:'),
+      ':hover'
+    );
+    @include bg-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('active:'),
+      '.is-active'
+    );
+    @include bg-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('focus:'),
+      ':focus'
+    );
+    @include bg-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
+      '.is-disabled'
+    );
+    @include bg-colors(
+      '.group:hover .' + selector-escape($deivce + ':') +
+        selector-escape('group-hover:')
+    );
+  }
+}

package/scss/helper/border/_border-color.scss

@@ -0,0 +1,178 @@
+/*!markdown
+
+---
+title: 边框颜色
+---
+
+| Class       | Properties               |
+| ----------- | ------------------------ |
+| border-black | border-color: #000 |
+| border-white | border-color: #fff |
+| border-primary | border-color: #007bff |
+| border-secondary | border-color: #6c757d |
+| border-success | border-color: #28a745 |
+| border-info | border-color: #007bff |
+| border-warning | border-color: #28a745 |
+| border-danger | border-color: #dc3545 |
+| border-light | border-color: #f8f9fa |
+| border-dark | border-color: #343a40 |
+| border-gray-50 | border-color: #f9fafb |
+| border-gray-100 | border-color: #f3f4f6 |
+| border-gray-200 | border-color: #e5e7eb |
+| border-gray-300 | border-color: #d1d5db |
+| border-gray-400 | border-color: #9ca3af |
+| border-gray-500 | border-color: #6b7280 |
+| border-gray-600 | border-color: #4b5563 |
+| border-gray-700 | border-color: #374151 |
+| border-gray-800 | border-color: #1f2937 |
+| border-gray-900 | border-color: #111827 |
+| border-red-50 | border-color: #fef2f2 |
+| border-red-100 | border-color: #fee2e2 |
+| border-red-200 | border-color: #fecaca |
+| border-red-300 | border-color: #fca5a5 |
+| border-red-400 | border-color: #f87171 |
+| border-red-500 | border-color: #ef4444 |
+| border-red-600 | border-color: #dc2626 |
+| border-red-700 | border-color: #b91c1c |
+| border-red-800 | border-color: #991b1b |
+| border-red-900 | border-color: #7f1d1d |
+| border-yellow-50 | border-color: #fffbeb |
+| border-yellow-100 | border-color: #fef3c7 |
+| border-yellow-200 | border-color: #fde68a |
+| border-yellow-300 | border-color: #fcd34d |
+| border-yellow-400 | border-color: #fbbf24 |
+| border-yellow-500 | border-color: #f59e0b |
+| border-yellow-600 | border-color: #d97706 |
+| border-yellow-700 | border-color: #b45309 |
+| border-yellow-800 | border-color: #92400e |
+| border-yellow-900 | border-color: #78350f |
+| border-green-50 | border-color: #ecfdf5 |
+| border-green-100 | border-color: #d1fae5 |
+| border-green-200 | border-color: #a7f3d0 |
+| border-green-300 | border-color: #6ee7b7 |
+| border-green-400 | border-color: #34d399 |
+| border-green-500 | border-color: #10b981 |
+| border-green-600 | border-color: #059669 |
+| border-green-700 | border-color: #047857 |
+| border-green-800 | border-color: #065f46 |
+| border-green-900 | border-color: #064e3b |
+| border-blue-50 | border-color: #eff6ff |
+| border-blue-100 | border-color: #dbeafe |
+| border-blue-200 | border-color: #bfdbfe |
+| border-blue-300 | border-color: #93c5fd |
+| border-blue-400 | border-color: #60a5fa |
+| border-blue-500 | border-color: #3b82f6 |
+| border-blue-600 | border-color: #2563eb |
+| border-blue-700 | border-color: #1d4ed8 |
+| border-blue-800 | border-color: #1e40af |
+| border-blue-900 | border-color: #1e3a8a |
+| border-cyan-50 | border-color: #ecfeff |
+| border-cyan-100 | border-color: #cffafe |
+| border-cyan-200 | border-color: #a5f3fc |
+| border-cyan-300 | border-color: #67e8f9 |
+| border-cyan-400 | border-color: #22d3ee |
+| border-cyan-500 | border-color: #06b6d4 |
+| border-cyan-600 | border-color: #0891b2 |
+| border-cyan-700 | border-color: #0e7490 |
+| border-cyan-800 | border-color: #155e75 |
+| border-cyan-900 | border-color: #164e63 |
+| border-indigo-50 | border-color: #eef2ff |
+| border-indigo-100 | border-color: #e0e7ff |
+| border-indigo-200 | border-color: #c7d2fe |
+| border-indigo-300 | border-color: #a5b4fc |
+| border-indigo-400 | border-color: #818cf8 |
+| border-indigo-500 | border-color: #6366f1 |
+| border-indigo-600 | border-color: #4f46e5 |
+| border-indigo-700 | border-color: #4338ca |
+| border-indigo-800 | border-color: #3730a3 |
+| border-indigo-900 | border-color: #312e81 |
+| border-purple-50 | border-color: #f5f3ff |
+| border-purple-100 | border-color: #ede9fe |
+| border-purple-200 | border-color: #ddd6fe |
+| border-purple-300 | border-color: #c4b5fd |
+| border-purple-400 | border-color: #a78bfa |
+| border-purple-500 | border-color: #8b5cf6 |
+| border-purple-600 | border-color: #7c3aed |
+| border-purple-700 | border-color: #6d28d9 |
+| border-purple-800 | border-color: #5b21b6 |
+| border-purple-900 | border-color: #4c1d95 |
+| border-pink-50 | border-color: #fdf2f8 |
+| border-pink-100 | border-color: #fce7f3 |
+| border-pink-200 | border-color: #fbcfe8 |
+| border-pink-300 | border-color: #f9a8d4 |
+| border-pink-400 | border-color: #f472b6 |
+| border-pink-500 | border-color: #ec4899 |
+| border-pink-600 | border-color: #db2777 |
+| border-pink-700 | border-color: #be185d |
+| border-pink-800 | border-color: #9d174d |
+| border-pink-900 | border-color: #831843 |
+
+
+还有 hover、active、focus、disabled 扩展，比如 `hover:border-black`
+
+*/
+
+@mixin border-colors-map(
+  $colors: $colors,
+  $namePrefix: '',
+  $prefix: '.',
+  $suffix: ''
+) {
+  @each $name, $color in $colors {
+    @if (is-map($color)) {
+      @include border-colors-map($color, #{'-' + $name}, $prefix, $suffix);
+    } @else if $suffix == '.is-active' {
+      #{$prefix}border#{$namePrefix}-#{'' + $name}.is-active,
+      #{$prefix}border#{$namePrefix}-#{'' + $name}:active {
+        border-color: $color;
+      }
+    } @else if $suffix == '.is-disabled' {
+      #{$prefix}border#{$namePrefix}-#{'' + $name}.is-disabled,
+      #{$prefix}border#{$namePrefix}-#{'' + $name}:disabled {
+        border-color: $color;
+      }
+    } @else {
+      #{$prefix}border#{$namePrefix}-#{'' + $name}#{$suffix} {
+        border-color: $color;
+      }
+    }
+  }
+}
+
+@mixin border-colors($prefix: '.', $suffix: '') {
+  @include border-colors-map($colors, '', $prefix, $suffix);
+}
+
+@include border-colors();
+@include border-colors('.' + selector-escape('hover:'), ':hover');
+@include border-colors('.' + selector-escape('active:'), '.is-active');
+@include border-colors('.' + selector-escape('focus:'), ':focus');
+@include border-colors('.' + selector-escape('disabled:'), '.is-disabled');
+@include border-colors('.group:hover .' + selector-escape('group-hover:'));
+
+@each $deivce in map-keys($devices) {
+  @include media-device($deivce) {
+    @include border-colors('.' + selector-escape($deivce + ':'));
+
+    @include border-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('hover:'),
+      ':hover'
+    );
+    @include border-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('active:'),
+      '.is-active'
+    );
+    @include border-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('focus:'),
+      ':focus'
+    );
+    @include border-colors(
+      '.' + selector-escape($deivce + ':') + selector-escape('disabled:'),
+      '.is-disabled'
+    );
+    @include border-colors(
+      '.group:hover .' + selector-escape($deivce + ':') +
+        selector-escape('group-hover:')
+    );
+  }
+}