@neatui/css 3.0.0 → 3.0.3

package/components/form/form@a/checkbox.scss

@@ -44,7 +44,7 @@ value	       规定输入字段的默认值。
       box-shadow: inset 0 0 0 1px currentColor;
       border-radius: 0.2em;
       flex-shrink: 0;
-      transform: scale3d(0.95, 0.95, 1);
+      // transform: scale3d(0.95, 0.95, 1);
 
       // &.part-selected {
       //   @include theme {

package/core/basic.scss

@@ -468,24 +468,14 @@ code,
 }
 
 // 省略号
-[ui-omit~='1'],
-[ui-omit~='2'],
-[ui-omit~='3'],
-[ui-omit~='4'],
-[ui-omit~='5'],
-[ui-omit~='6'],
-[ui-omit~='7'],
-[ui-omit~='8'],
-[ui-omit~='9'] {
+[ui-omit] {
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-box-orient: vertical;
+  -webkit-text-size-adjust: 100%;
 }
 [ui-omit~='1'] {
-  // overflow: hidden;
-  // white-space: nowrap;
-  // text-overflow: ellipsis;
   -webkit-line-clamp: 1;
 }
 [ui-omit~='2'] {

package/core/media-v2.scss

@@ -0,0 +1,100 @@
+@use 'sass:list';
+@use 'sass:string';
+$level: (
+  mob-s: 320,
+  mob-m: 480,
+  mob-l: 640,
+  pad-s: 800,
+  pad-m: 960,
+  pad-l: 1120,
+  dpc-s: 1280,
+  dpc-m: 1440,
+  dpc-l: 1600
+);
+
+// 桌面
+@mixin dpc() {
+}
+// 平板
+@mixin pad() {
+}
+// 手机
+@mixin mob() {
+}
+
+// 通用
+@mixin med($p) {
+  $this: #{list.nth(&, 1)};
+  $sign: string.slice($p, 1, 1);
+  $size: string.slice($p, 2, -1);
+
+  @each $key, $value in $level {
+    @if ($sign == '>') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @if ($sign == '<') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+    @if ($sign == '=') {
+      @media screen and (max-width: 799px) {
+        @if ($this == '') {
+          @content;
+        } @else {
+          & {
+            @content;
+          }
+        }
+      }
+    }
+  }
+
+  @if ($p == '=mob') {
+    @media screen and (max-width: 799px) {
+      @if ($this == '') {
+        @content;
+      } @else {
+        & {
+          @content;
+        }
+      }
+    }
+  }
+  @if ($p == '=pad') {
+    @media screen and (min-width: 800px) and (max-width: 1119px) {
+      @if ($this == '') {
+        @content;
+      } @else {
+        & {
+          @content;
+        }
+      }
+    }
+  }
+  @if ($p == '=dpc') {
+    @media screen and (min-width: 1120px) {
+      @if ($this == '') {
+        @content;
+      } @else {
+        & {
+          @content;
+        }
+      }
+    }
+  }
+}

package/core/size.scss

@@ -36,17 +36,22 @@
   }
 
   $sz: 0.6;
+  $add: 0.05;
   @each $k in $rank {
     @if ($sz<1.2) {
       $sz: $sz + 0.1;
     } @else if ($sz<1.4) {
       $sz: $sz + 0.2;
+      $add: 0.1;
     } @else if($sz<2.4) {
       $sz: $sz + 0.4;
+      $add: 0.2;
     } @else if($sz<3.4) {
       $sz: $sz + 0.6;
+      $add: 0.3;
     } @else {
       $sz: $sz + 0.8;
+      $add: 0.4;
     }
 
     .#{$d}fs-#{$k},
@@ -64,7 +69,7 @@
     .#{$d}fs-#{$k}\+\:end::after,
     .#{$d}fs-#{$k}-sub\+\:sta > *::before,
     .#{$d}fs-#{$k}-sub\+\:end > *::after {
-      font-size: #{$sz + 0.05}rem;
+      font-size: #{$sz + $add}rem;
     }
 
     // 双倍

package/core/theme.scss

@@ -29,8 +29,6 @@
     @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
     @debug '尝试修复错误...';
     @debug '创建系统默认色卡[theme=_sys]';
-  } @else {
-    @debug '检测到主题色卡[theme=#{$fk}]';
   }
 
   @each $var in $theme {

package/neatui.scss

@@ -2,7 +2,7 @@
 
 // 框架核心
 // 重置
-@forward './core/reset.scss';
+// @forward './core/reset.scss';
 // 主题
 @forward './core/theme.scss';
 // 响应
@@ -31,24 +31,25 @@
 @forward './core/ux.scss';
 
 // 组件
-@forward './components/anim/index.scss';
+// @forward './components/anim/index.scss';
 @forward './components/btns/index.scss';
-@forward './components/card/index.scss';
-@forward './components/form/index.scss';
-@forward './components/icon/index.scss';
-@forward './components/imgs/index.scss';
-@forward './components/line/index.scss';
-@forward './components/list/index.scss';
-@forward './components/load/index.scss';
-@forward './components/menu/index.scss';
-@forward './components/navs/index.scss';
-@forward './components/note/index.scss';
-@forward './components/opts/index.scss';
-@forward './components/path/index.scss';
-@forward './components/side/index.scss';
-@forward './components/steps/index.scss';
-@forward './components/table/index.scss';
-@forward './components/tabs/index.scss';
-@forward './components/tags/index.scss';
+// @forward './components/card/index.scss';
+// @forward './components/form/index.scss';
+// @forward './components/icon/index.scss';
+// @forward './components/imgs/index.scss';
+// @forward './components/line/index.scss';
+// @forward './components/list/index.scss';
+// @forward './components/load/index.scss';
+// @forward './components/menu/index.scss';
+// @forward './components/navs/index.scss';
+// @forward './components/note/index.scss';
+// @forward './components/opts/index.scss';
+// @forward './components/path/index.scss';
+// @forward './components/side/index.scss';
+// @forward './components/steps/index.scss';
+// @forward './components/table/index.scss';
+// @forward './components/tabs/index.scss';
+// @forward './components/tags/index.scss';
 @forward './components/tips/index.scss';
-@forward './components/title/index.scss';
+// @forward './components/title/index.scss';
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neatui/css",
-  "version": "3.0.0",
+  "version": "3.0.3",
   "description": "neatui",
   "main": "./neatui.scss",
   "license": "MIT",

package/core/media copy.scss

@@ -1,270 +0,0 @@
-@use 'sass:list';
-@use 'sass:string';
-$level: (
-  mob-s: 320px,
-  mob-m: 480px,
-  mob-l: 640px,
-  pad-s: 800px,
-  pad-m: 960px,
-  pad-l: 1120px,
-  dpc-s: 1280px,
-  dpc-m: 1440px,
-  dpc-l: 1600px
-);
-
-// 桌面
-@mixin dpc() {
-  $this: #{list.nth(&, 1)};
-  @media screen and (min-width: 1120px) {
-    @if ($this == '') {
-      @content;
-    } @else {
-      & {
-        @content;
-      }
-    }
-  }
-}
-
-// 平板
-@mixin pad() {
-  $this: #{list.nth(&, 1)};
-  @media screen and (max-width: 1119px) {
-    @if ($this == '') {
-      @content;
-    } @else {
-      & {
-        @content;
-      }
-    }
-  }
-}
-
-// 移动
-@mixin mob() {
-  $this: #{list.nth(&, 1)};
-  @media screen and (max-width: 799px) {
-    @if ($this == '') {
-      @content;
-    } @else {
-      & {
-        @content;
-      }
-    }
-  }
-}
-
-// 设备
-@mixin med($p) {
-  $this: #{list.nth(&, 1)};
-
-  $r: string.slice($p, 1, 1);
-  $_n: string.slice($p, 2, -1);
-
-  // 大于某节点时
-  @if ($r == '>') {
-    // 大于平板
-    @if ($p == '>pad') {
-      @media screen and (min-width: 1120px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    // 大于移动
-    @if ($p == '>mob') {
-      @media screen and (min-width: 800px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    @each $sz in $level {
-      $n: #{list.nth($sz, 1)};
-      $v: #{list.nth($sz, 2)};
-      @if ($_n == $n) {
-        @media screen and (min-width: $v) {
-          @if ($this == '') {
-            @content;
-          } @else {
-            & {
-              @content;
-            }
-          }
-        }
-      }
-    }
-  }
-  // 小于某节点时
-  @if ($r == '<') {
-    // 小于桌面
-    @if ($p == '<dpc') {
-      @media screen and (max-width: 1119px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    // 小于平板
-    @if ($p == '<pad') {
-      @media screen and (max-width: 799px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-
-    @each $sz in $level {
-      $n: #{list.nth($sz, 1)};
-      $v: #{list.nth($sz, 2) - 1};
-      @if ($_n == $n) {
-        @media screen and (max-width: $v) {
-          @if ($this == '') {
-            @content;
-          } @else {
-            & {
-              @content;
-            }
-          }
-        }
-      }
-    }
-  }
-  // 仅在某节点时
-  @if ($r == '=') {
-    @if ($p == '=dpc') {
-      @media screen and (min-width: 1120px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    @if ($p == '=pad') {
-      @media screen and (min-width: 800px) and (max-width: 1119px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    @if ($p == '=mob') {
-      @media screen and (max-width: 799px) {
-        @if ($this == '') {
-          @content;
-        } @else {
-          & {
-            @content;
-          }
-        }
-      }
-    }
-    @each $sz in $level {
-      $n: #{list.nth($sz, 1)};
-      $v: #{list.nth($sz, 2)};
-      $m: #{list.nth($sz, 2) + 159};
-      @if ($_n == $n) {
-        @if ($_n == 'mob-s') {
-          @media screen and (max-width: $m) {
-            @content;
-          }
-        } @else if($_n == 'dpc-l') {
-          @media screen and (min-width: $v) {
-            @content;
-          }
-        } @else {
-          @media screen and (min-width: $v) and (max-width: $m) {
-            @content;
-          }
-        }
-      }
-    }
-  }
-}
-
-// 大于某节点时
-@each $sz in $level {
-  $n: #{list.nth($sz, 1)};
-  [ui-hide~='>#{$n}'] {
-    @include med('>#{$n}') {
-      display: none !important;
-    }
-  }
-}
-[ui-hide~='>mob'] {
-  @include med('>mob') {
-    display: none !important;
-  }
-}
-[ui-hide~='>pad'] {
-  @include med('>pad') {
-    display: none !important;
-  }
-}
-
-// 小于某节点时
-@each $sz in $level {
-  $n: #{list.nth($sz, 1)};
-  [ui-hide~='<#{$n}'] {
-    @include med('<#{$n}') {
-      display: none !important;
-    }
-  }
-}
-[ui-hide~='<pad'] {
-  @include med('<pad') {
-    display: none !important;
-  }
-}
-[ui-hide~='<dpc'] {
-  @include med('<dpc') {
-    display: none !important;
-  }
-}
-
-// 等于某节点时
-@each $sz in $level {
-  $n: #{list.nth($sz, 1)};
-  [ui-hide~='=#{$n}'] {
-    @include med('=#{$n}') {
-      display: none !important;
-    }
-  }
-}
-[ui-hide~='=mob'] {
-  @include med('=mob') {
-    display: none !important;
-  }
-}
-[ui-hide~='=pad'] {
-  @include med('=pad') {
-    display: none !important;
-  }
-}
-[ui-hide~='=dpc'] {
-  @include med('=dpc') {
-    display: none !important;
-  }
-}

package/core/neatui.core.scss.backup

@@ -1,34 +0,0 @@
-// neatui.core.scss
-
-@charset "utf-8";
-@use 'sass:math';
-// 主题
-@forward './theme-v3.scss';
-// 色号
-// @use './color.scss';
-// 响应
-// @forward './media.scss';
-// 重置
-// @forward './reset.scss';
-// 基础
-// @forward './base.scss';
-// // 字号
-// @forward './size.scss';
-// // 栅格
-// @forward './cols.scss';
-// // 格子（新）
-// @forward './grid.scss';
-// // 微调
-// @forward './trim.scss';
-// // 边框
-// @forward './border.scss';
-// // 布局
-// @forward './flex.scss';
-// // 缩小
-// @forward './scale.scss';
-// // 滚动条
-// @forward './scroll.scss';
-// // 封面
-// @forward './cover.scss';
-// // 交互
-// @forward './ux.scss';

package/core/theme-v2.scss

@@ -1,378 +0,0 @@
-@use 'sass:list';
-@use 'sass:meta';
-@use 'sass:map';
-@use 'sass:color';
-@use 'sass:string';
-
-// 兜底
-$theme: if(
-  meta.global-variable-exists(theme),
-  $theme,
-  (
-    _sys: (
-      main: #0889e4,
-      text: #000000,
-      fore: #ffffff,
-      back: #f5f5f5,
-      link: #d07950,
-      code: #e23861,
-      well: #4bbc73,
-      warn: #fb9a2a,
-      risk: #f95850,
-      info: #0889e4
-    )
-  )
-) !default;
-
-// 检测
-@if (meta.global-variable-exists(theme)) {
-  $fa: map.keys($theme);
-  $fk: list.nth($fa, 1);
-  @if (list.length($fa) == 1 and $fk == _sys) {
-    @warn '检测到您未定义主题色卡，请遵循 neatui 设计规范建立主题色卡；https://neatui.fekit.cn/#/docs/config';
-    @debug '尝试修复错误...';
-    @debug '创建系统默认色卡[theme=_sys]';
-  } @else {
-    @debug '检测到主题色卡[theme=#{$fk}]';
-  }
-
-  @each $var in $theme {
-    $n: list.nth($var, 1);
-    $s: list.nth($var, 2);
-    @if ($s and meta.type-of($s) == 'map') {
-      $baseColor: 'main', 'text', 'fore', 'back', 'link', 'code', 'well', 'warn', 'risk';
-      @each $baseColorItem in $baseColor {
-        @if (map.has-key($s, $baseColorItem)) {
-        } @else {
-          @warn '[theme=#{$n}]主题缺少一个关键的基础颜色#{$baseColorItem}';
-        }
-      }
-    } @else {
-      @debug '[theme=#{$n}]主题色卡配置错误';
-    }
-  }
-}
-
-// 扩展颜色
-@each $i in $theme {
-  $n: list.nth($i, 1);
-  $s: list.nth($i, 2);
-  @if ($s and meta.type-of($s) == 'map') {
-    $m: (
-      none: transparent,
-      w: #ffffff,
-      b: #000000,
-      read: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 85%),
-      desc: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 55%),
-      note: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 35%),
-      case: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 20%),
-      line: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 10%),
-      weak: color.mix(map.get($s, 'text'), map.get($s, 'fore'), 4%)
-    );
-    // 将扩展颜色加入放题色卡中
-    $theme: map.merge(
-      $theme,
-      (
-        $n: map.merge($m, $s)
-      )
-    );
-  }
-}
-
-// 主题
-// @mixin theme($n: null) {
-//   $hasTheme: map.get($theme, $n);
-//   @if ($n != null) {
-//     @if ($hasTheme != null) {
-//       $t: $hasTheme;
-//       $first: list.nth(list.nth($theme, 1), 1);
-//       $n: $n;
-//       $s: #{list.nth(&, 1)};
-//       @if ($s == 'html' or $s == '' or $s == null) {
-//         @if ($n == $first) {
-//           @at-root html {
-//             @content;
-//           }
-//         } @else {
-//           @at-root [theme='#{$n}'] {
-//             @content;
-//           }
-//         }
-//       } @else {
-//         @if ($n == $first) {
-//           @content;
-//         } @else {
-//           [theme='#{$n}'] & {
-//             @content;
-//           }
-//         }
-//       }
-//     } @else {
-//       @warn '没有指定主题#{$hasTheme}';
-//     }
-//   } @else {
-//     $first: list.nth(list.nth($theme, 1), 1);
-//     @each $t in $theme {
-//       $n: list.nth($t, 1);
-//       $s: #{list.nth(&, 1)};
-
-//       @if ($s == 'html' or $s == ':root' or $s == '' or $s == null) {
-//         @if ($n == $first) {
-//           @at-root html {
-//             @content;
-//           }
-//         } @else {
-//           @at-root [theme='#{$n}'] {
-//             @content;
-//           }
-//         }
-//       } @else {
-//         @if ($n == $first) {
-//           @content;
-//         } @else {
-//           [theme='#{$n}'] & {
-//             @content;
-//           }
-//         }
-//       }
-//     }
-//   }
-// }
-
-// 颜色
-// @function co($a: '') {
-//   @if (& != null) {
-//     $r: list.nth(list.nth(&, 1), 1);
-//     $n: string.slice($r, 8, -2);
-//     $s: map.get($theme, $n);
-//     @if ($s == null) {
-//       $n: list.nth(list.nth($theme, 1), 1);
-//       $s: list.nth(list.nth($theme, 1), 2);
-//     }
-//     @if ($s != null) {
-//       @if (map.has-key($s, $a)) {
-//         $a: map.get($s, $a);
-//       } @else {
-//         @debug '当前主题[theme=#{$n}]没有定义颜色名 #{$a}';
-//       }
-//     }
-//     @return $a;
-//   } @else {
-//     @return transparent;
-//   }
-// }
-
-// 变量
-@mixin vars() {
-  $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
-  $colors: main, text, well, warn, risk;
-
-  $f: list.nth(list.nth($theme, 1), 1);
-  @each $i in $theme {
-    $n: list.nth($i, 1);
-    $s: list.nth($i, 2);
-    @if ($n == $f) {
-      :root,
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          $k: list.nth($c, 1);
-          $v: list.nth($c, 2);
-          --co-#{$k}: #{$v};
-
-          $ls: 0.05;
-          @each $l in $levels {
-            // 透明度
-            @if ($k != 'none') {
-              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-              @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
-              }
-              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
-                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
-              }
-            }
-            @if ($ls <= 0.1 or $ls >= 0.8) {
-              $ls: $ls + 0.05;
-            } @else {
-              $ls: $ls + 0.1;
-            }
-          }
-        }
-      }
-    } @else {
-      [theme~='#{$n}'] {
-        @each $c in $s {
-          $k: list.nth($c, 1);
-          $v: list.nth($c, 2);
-          --co-#{$k}: #{$v};
-
-          $ls: 0.05;
-          @each $l in $levels {
-            // 透明度
-            @if ($k != 'none') {
-              --co-#{$k}-#{$l}: #{rgba($v, $ls)};
-
-              @if ($k != 'w' and $k != 'b') {
-                --co-#{$k}-fore-#{$l}: #{color.mix($v, map.get($s, 'fore'), $ls * 100%)};
-              }
-
-              @if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk') {
-                --co-#{$k}-text-#{$l}: #{color.mix($v, map.get($s, 'text'), $ls * 100%)};
-              }
-            }
-            @if ($ls <= 0.1 or $ls >= 0.8) {
-              $ls: $ls + 0.05;
-            } @else {
-              $ls: $ls + 0.1;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@include vars();
-
-@mixin color() {
-  html,
-  [theme] {
-    color: var(--co-read);
-    fill: var(--co-read);
-    background-color: var(--co-back);
-  }
-
-  // 自动颜色
-  .co-auto,
-  .co-auto\:hover:hover,
-  .co-auto\:active:active {
-    color: currentColor !important;
-    fill: currentColor !important;
-  }
-
-  .bg-auto,
-  .bg-auto\:hover:hover,
-  .bg-auto\:active:active {
-    background-color: currentColor !important;
-  }
-  .bk-auto,
-  .bk-auto\:hover:hover,
-  .bk-auto\:active:active {
-    border-color: currentColor !important;
-  }
-
-  // 随机颜色
-  .bg-0 {
-    background-color: var(--co-main);
-  }
-
-  .bg-1 {
-    background-color: #0084ff;
-  }
-  .bg-2 {
-    background-color: #30d158;
-  }
-  .bg-3 {
-    background-color: #5e5ce6;
-  }
-  .bg-4 {
-    background-color: #ff9f0a;
-  }
-  .bg-5 {
-    background-color: #ff375f;
-  }
-  .bg-6 {
-    background-color: #af52de;
-  }
-  .bg-7 {
-    background-color: #ff453a;
-  }
-  .bg-8 {
-    background-color: #af52de;
-  }
-  .bg-9 {
-    background-color: #5ac8fa;
-  }
-  .bg-10 {
-    background-color: #ffcc00;
-  }
-  .bg-11 {
-    background-color: #8e8e93;
-  }
-  .bg-12 {
-    background-color: #bad80a;
-  }
-  .bg-13 {
-    background-color: #1d6fa3;
-  }
-  .bg-14 {
-    background-color: #fd6585;
-  }
-  .bg-15 {
-    background-color: #df5900;
-  }
-  .bg-16 {
-    background-color: #3388ff;
-  }
-  .bg-17 {
-    background-color: #623aa2;
-  }
-  .bg-18 {
-    background-color: #d939cd;
-  }
-  .bg-19 {
-    background-color: #f55555;
-  }
-  .bg-20 {
-    background-color: #bb4e75;
-  }
-
-  $f: list.nth(list.nth($theme, 1), 1);
-  @each $i in $theme {
-    $s: list.nth($i, 2);
-    @each $c in $s {
-      $n: list.nth($c, 1);
-      $v: list.nth($c, 2);
-      // @include color(list.nth($c, 1), list.nth($c, 2));
-      $levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
-
-      .co-#{$n},
-      .co-#{$n}\:hover:hover,
-      .co-#{$n}\:active:active {
-        color: var(--co-#{$n}) !important;
-        fill: var(--co-#{$n}) !important;
-      }
-      .bg-#{$n},
-      .bg-#{$n}\:hover:hover,
-      .bg-#{$n}\:active:active {
-        background-color: var(--co-#{$n}) !important;
-      }
-      .bk-#{$n},
-      .bk-#{$n}\:hover:hover,
-      .bk-#{$n}\:active:active {
-        border-color: var(--co-#{$n}) !important;
-      }
-
-      @each $i in $levels {
-        .co-#{$n}-#{$i},
-        .co-#{$n}-#{$i}\:hover:hover,
-        .co-#{$n}-#{$i}\:active:active {
-          color: var(--co-#{$n}-#{$i}) !important;
-          fill: var(--co-#{$n}-#{$i}) !important;
-        }
-        .bg-#{$n}-#{$i},
-        .bg-#{$n}-#{$i}\:hover:hover,
-        .bg-#{$n}-#{$i}\:active:active {
-          background-color: var(--co-#{$n}-#{$i}) !important;
-        }
-        .bk-#{$n}-#{$i},
-        .bk-#{$n}-#{$i}\:hover:hover,
-        .bk-#{$n}-#{$i}\:active:active {
-          border-color: var(--co-#{$n}-#{$i}) !important;
-        }
-      }
-    }
-  }
-}
-
-@include color();