@qn-pandora/pandora-component 5.1.0 → 5.1.2

package/lib/components/Tabs/style.css

@@ -393,10 +393,10 @@
   cursor: pointer;
 }
 .ant-tabs-dropdown-menu-item-remove:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-dropdown-menu-item:hover {
-  background: rgba(44, 109, 210, 0.05);
+  background: rgba(67, 107, 255, 0.05);
 }
 .ant-tabs-dropdown-menu-item-disabled,
 .ant-tabs-dropdown-menu-item-disabled:hover {
@@ -415,7 +415,7 @@
 }
 .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
 .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
-  color: #7a869a;
+  color: #436bff;
   background: #ffffff;
 }
 .ant-tabs-card > .ant-tabs-nav .ant-tabs-ink-bar,
@@ -481,7 +481,6 @@
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  overflow: hidden;
 }
 .ant-tabs > .ant-tabs-nav,
 .ant-tabs > div > .ant-tabs-nav {
@@ -583,13 +582,13 @@
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:hover,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:active,
 .ant-tabs > .ant-tabs-nav .ant-tabs-nav-add:focus,
 .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-add:focus {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-extra-content {
   -webkit-box-flex: 0;
@@ -604,7 +603,7 @@
 }
 .ant-tabs-ink-bar {
   position: absolute;
-  background: #2c6dd2;
+  background: #436bff;
   pointer-events: none;
 }
 .ant-tabs-tab {
@@ -626,7 +625,7 @@
 .ant-tabs-tab-remove:focus,
 .ant-tabs-tab-btn:active,
 .ant-tabs-tab-remove:active {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-tab-btn {
   outline: none;
@@ -652,11 +651,11 @@
   color: #333;
 }
 .ant-tabs-tab:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }
 .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
-  color: #2c6dd2;
-  text-shadow: 0 0 0.25px currentColor;
+  color: #436bff;
+  text-shadow: 0 0 0.25px currentcolor;
 }
 .ant-tabs-tab.ant-tabs-tab-disabled {
   color: rgba(0, 0, 0, 0.25);
@@ -678,9 +677,7 @@
   margin: 0 0 0 32px;
 }
 .ant-tabs-content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
+  position: relative;
   width: 100%;
 }
 .ant-tabs-content-holder {
@@ -690,17 +687,41 @@
   min-width: 0;
   min-height: 0;
 }
-.ant-tabs-content-animated {
-  -webkit-transition: margin 0.3s;
-  transition: margin 0.3s;
-}
 .ant-tabs-tabpane {
-  -webkit-box-flex: 0;
-      -ms-flex: none;
-          flex: none;
-  width: 100%;
   outline: none;
 }
+.ant-tabs-tabpane-hidden {
+  display: none;
+}
+.ant-tabs-switch-appear,
+.ant-tabs-switch-enter {
+  -webkit-transition: none;
+  transition: none;
+}
+.ant-tabs-switch-appear-start,
+.ant-tabs-switch-enter-start {
+  opacity: 0;
+}
+.ant-tabs-switch-appear-active,
+.ant-tabs-switch-enter-active {
+  opacity: 1;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
+.ant-tabs-switch-leave {
+  position: absolute;
+  -webkit-transition: none;
+  transition: none;
+  inset: 0;
+}
+.ant-tabs-switch-leave-start {
+  opacity: 1;
+}
+.ant-tabs-switch-leave-active {
+  opacity: 0;
+  -webkit-transition: opacity 0.3s;
+  transition: opacity 0.3s;
+}
 .ant-tooltip {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -719,31 +740,35 @@
   width: -webkit-max-content;
   width: -moz-max-content;
   width: max-content;
+  width: intrinsic;
   max-width: 250px;
   visibility: visible;
 }
+.ant-tooltip-content {
+  position: relative;
+}
 .ant-tooltip-hidden {
   display: none;
 }
 .ant-tooltip-placement-top,
 .ant-tooltip-placement-topLeft,
 .ant-tooltip-placement-topRight {
-  padding-bottom: 8px;
+  padding-bottom: 14.3137085px;
 }
 .ant-tooltip-placement-right,
 .ant-tooltip-placement-rightTop,
 .ant-tooltip-placement-rightBottom {
-  padding-left: 8px;
+  padding-left: 14.3137085px;
 }
 .ant-tooltip-placement-bottom,
 .ant-tooltip-placement-bottomLeft,
 .ant-tooltip-placement-bottomRight {
-  padding-top: 8px;
+  padding-top: 14.3137085px;
 }
 .ant-tooltip-placement-left,
 .ant-tooltip-placement-leftTop,
 .ant-tooltip-placement-leftBottom {
-  padding-right: 8px;
+  padding-right: 14.3137085px;
 }
 .ant-tooltip-inner {
   min-width: 30px;
@@ -760,44 +785,62 @@
 }
 .ant-tooltip-arrow {
   position: absolute;
+  z-index: 2;
   display: block;
-  width: 13.07106781px;
-  height: 13.07106781px;
+  width: 22px;
+  height: 22px;
   overflow: hidden;
   background: transparent;
   pointer-events: none;
 }
 .ant-tooltip-arrow-content {
+  --antd-arrow-background-color: linear-gradient(to right bottom, rgba(35, 44, 59, 0.7), rgba(35, 44, 59, 0.8));
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   display: block;
-  width: 5px;
-  height: 5px;
+  width: 11.3137085px;
+  height: 11.3137085px;
   margin: auto;
-  background-color: rgba(35, 44, 59, 0.8);
   content: '';
   pointer-events: auto;
+  border-radius: 0 0 2px;
+  pointer-events: none;
+}
+.ant-tooltip-arrow-content::before {
+  position: absolute;
+  top: -11.3137085px;
+  left: -11.3137085px;
+  width: 33.9411255px;
+  height: 33.9411255px;
+  background: var(--antd-arrow-background-color);
+  background-repeat: no-repeat;
+  background-position: -10px -10px;
+  content: '';
+  clip-path: inset(33% 33%);
+  clip-path: path('M 9.849242404917499 24.091883092036785 A 5 5 0 0 1 13.384776310850237 22.627416997969522 L 20.627416997969522 22.627416997969522 A 2 2 0 0 0 22.627416997969522 20.627416997969522 L 22.627416997969522 13.384776310850237 A 5 5 0 0 1 24.091883092036785 9.849242404917499 L 23.091883092036785 9.849242404917499 L 9.849242404917499 23.091883092036785 Z');
 }
 .ant-tooltip-placement-top .ant-tooltip-arrow,
 .ant-tooltip-placement-topLeft .ant-tooltip-arrow,
 .ant-tooltip-placement-topRight .ant-tooltip-arrow {
-  bottom: -5.07106781px;
+  bottom: 0;
+  -webkit-transform: translateY(100%);
+          transform: translateY(100%);
 }
 .ant-tooltip-placement-top .ant-tooltip-arrow-content,
 .ant-tooltip-placement-topLeft .ant-tooltip-arrow-content,
 .ant-tooltip-placement-topRight .ant-tooltip-arrow-content {
   -webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
-  -webkit-transform: translateY(-6.53553391px) rotate(45deg);
-          transform: translateY(-6.53553391px) rotate(45deg);
+  -webkit-transform: translateY(-11px) rotate(45deg);
+          transform: translateY(-11px) rotate(45deg);
 }
 .ant-tooltip-placement-top .ant-tooltip-arrow {
   left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  -webkit-transform: translateY(100%) translateX(-50%);
+          transform: translateY(100%) translateX(-50%);
 }
 .ant-tooltip-placement-topLeft .ant-tooltip-arrow {
   left: 13px;
@@ -808,20 +851,22 @@
 .ant-tooltip-placement-right .ant-tooltip-arrow,
 .ant-tooltip-placement-rightTop .ant-tooltip-arrow,
 .ant-tooltip-placement-rightBottom .ant-tooltip-arrow {
-  left: -5.07106781px;
+  left: 0;
+  -webkit-transform: translateX(-100%);
+          transform: translateX(-100%);
 }
 .ant-tooltip-placement-right .ant-tooltip-arrow-content,
 .ant-tooltip-placement-rightTop .ant-tooltip-arrow-content,
 .ant-tooltip-placement-rightBottom .ant-tooltip-arrow-content {
   -webkit-box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
-  -webkit-transform: translateX(6.53553391px) rotate(45deg);
-          transform: translateX(6.53553391px) rotate(45deg);
+  -webkit-transform: translateX(11px) rotate(135deg);
+          transform: translateX(11px) rotate(135deg);
 }
 .ant-tooltip-placement-right .ant-tooltip-arrow {
   top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  -webkit-transform: translateX(-100%) translateY(-50%);
+          transform: translateX(-100%) translateY(-50%);
 }
 .ant-tooltip-placement-rightTop .ant-tooltip-arrow {
   top: 5px;
@@ -832,20 +877,22 @@
 .ant-tooltip-placement-left .ant-tooltip-arrow,
 .ant-tooltip-placement-leftTop .ant-tooltip-arrow,
 .ant-tooltip-placement-leftBottom .ant-tooltip-arrow {
-  right: -5.07106781px;
+  right: 0;
+  -webkit-transform: translateX(100%);
+          transform: translateX(100%);
 }
 .ant-tooltip-placement-left .ant-tooltip-arrow-content,
 .ant-tooltip-placement-leftTop .ant-tooltip-arrow-content,
 .ant-tooltip-placement-leftBottom .ant-tooltip-arrow-content {
   -webkit-box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
-  -webkit-transform: translateX(-6.53553391px) rotate(45deg);
-          transform: translateX(-6.53553391px) rotate(45deg);
+  -webkit-transform: translateX(-11px) rotate(315deg);
+          transform: translateX(-11px) rotate(315deg);
 }
 .ant-tooltip-placement-left .ant-tooltip-arrow {
   top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  -webkit-transform: translateX(100%) translateY(-50%);
+          transform: translateX(100%) translateY(-50%);
 }
 .ant-tooltip-placement-leftTop .ant-tooltip-arrow {
   top: 5px;
@@ -856,20 +903,22 @@
 .ant-tooltip-placement-bottom .ant-tooltip-arrow,
 .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow,
 .ant-tooltip-placement-bottomRight .ant-tooltip-arrow {
-  top: -5.07106781px;
+  top: 0;
+  -webkit-transform: translateY(-100%);
+          transform: translateY(-100%);
 }
 .ant-tooltip-placement-bottom .ant-tooltip-arrow-content,
 .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow-content,
 .ant-tooltip-placement-bottomRight .ant-tooltip-arrow-content {
   -webkit-box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
           box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
-  -webkit-transform: translateY(6.53553391px) rotate(45deg);
-          transform: translateY(6.53553391px) rotate(45deg);
+  -webkit-transform: translateY(11px) rotate(225deg);
+          transform: translateY(11px) rotate(225deg);
 }
 .ant-tooltip-placement-bottom .ant-tooltip-arrow {
   left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+  -webkit-transform: translateY(-100%) translateX(-50%);
+          transform: translateY(-100%) translateX(-50%);
 }
 .ant-tooltip-placement-bottomLeft .ant-tooltip-arrow {
   left: 13px;
@@ -880,80 +929,80 @@
 .ant-tooltip-pink .ant-tooltip-inner {
   background-color: #eb2f96;
 }
-.ant-tooltip-pink .ant-tooltip-arrow-content {
-  background-color: #eb2f96;
+.ant-tooltip-pink .ant-tooltip-arrow-content::before {
+  background: #eb2f96;
 }
 .ant-tooltip-magenta .ant-tooltip-inner {
   background-color: #eb2f96;
 }
-.ant-tooltip-magenta .ant-tooltip-arrow-content {
-  background-color: #eb2f96;
+.ant-tooltip-magenta .ant-tooltip-arrow-content::before {
+  background: #eb2f96;
 }
 .ant-tooltip-red .ant-tooltip-inner {
   background-color: #f5222d;
 }
-.ant-tooltip-red .ant-tooltip-arrow-content {
-  background-color: #f5222d;
+.ant-tooltip-red .ant-tooltip-arrow-content::before {
+  background: #f5222d;
 }
 .ant-tooltip-volcano .ant-tooltip-inner {
   background-color: #fa541c;
 }
-.ant-tooltip-volcano .ant-tooltip-arrow-content {
-  background-color: #fa541c;
+.ant-tooltip-volcano .ant-tooltip-arrow-content::before {
+  background: #fa541c;
 }
 .ant-tooltip-orange .ant-tooltip-inner {
   background-color: #fa8c16;
 }
-.ant-tooltip-orange .ant-tooltip-arrow-content {
-  background-color: #fa8c16;
+.ant-tooltip-orange .ant-tooltip-arrow-content::before {
+  background: #fa8c16;
 }
 .ant-tooltip-yellow .ant-tooltip-inner {
   background-color: #fadb14;
 }
-.ant-tooltip-yellow .ant-tooltip-arrow-content {
-  background-color: #fadb14;
+.ant-tooltip-yellow .ant-tooltip-arrow-content::before {
+  background: #fadb14;
 }
 .ant-tooltip-gold .ant-tooltip-inner {
   background-color: #faad14;
 }
-.ant-tooltip-gold .ant-tooltip-arrow-content {
-  background-color: #faad14;
+.ant-tooltip-gold .ant-tooltip-arrow-content::before {
+  background: #faad14;
 }
 .ant-tooltip-cyan .ant-tooltip-inner {
   background-color: #13c2c2;
 }
-.ant-tooltip-cyan .ant-tooltip-arrow-content {
-  background-color: #13c2c2;
+.ant-tooltip-cyan .ant-tooltip-arrow-content::before {
+  background: #13c2c2;
 }
 .ant-tooltip-lime .ant-tooltip-inner {
   background-color: #a0d911;
 }
-.ant-tooltip-lime .ant-tooltip-arrow-content {
-  background-color: #a0d911;
+.ant-tooltip-lime .ant-tooltip-arrow-content::before {
+  background: #a0d911;
 }
 .ant-tooltip-green .ant-tooltip-inner {
   background-color: #52c41a;
 }
-.ant-tooltip-green .ant-tooltip-arrow-content {
-  background-color: #52c41a;
+.ant-tooltip-green .ant-tooltip-arrow-content::before {
+  background: #52c41a;
 }
 .ant-tooltip-blue .ant-tooltip-inner {
   background-color: #1890ff;
 }
-.ant-tooltip-blue .ant-tooltip-arrow-content {
-  background-color: #1890ff;
+.ant-tooltip-blue .ant-tooltip-arrow-content::before {
+  background: #1890ff;
 }
 .ant-tooltip-geekblue .ant-tooltip-inner {
   background-color: #2f54eb;
 }
-.ant-tooltip-geekblue .ant-tooltip-arrow-content {
-  background-color: #2f54eb;
+.ant-tooltip-geekblue .ant-tooltip-arrow-content::before {
+  background: #2f54eb;
 }
 .ant-tooltip-purple .ant-tooltip-inner {
   background-color: #722ed1;
 }
-.ant-tooltip-purple .ant-tooltip-arrow-content {
-  background-color: #722ed1;
+.ant-tooltip-purple .ant-tooltip-arrow-content::before {
+  background: #722ed1;
 }
 .ant-tooltip-rtl {
   direction: rtl;
@@ -985,5 +1034,5 @@
           transform: translateY(-50%);
 }
 .pandora-sdk-tabs .pandora-sdk-tabs-refresh-icon:hover {
-  color: #2c6dd2;
+  color: #436bff;
 }

package/lib/components/Tabs/style.less

@@ -1,33 +1,33 @@
-@import 'antd/lib/tabs/style/index.less';
-@import 'antd/lib/tooltip/style/index.less';
-@import '../../style/theme.less';
-@import '../../style/mixin.less';
-
-.@{sdk-prefix}-tabs {
-  .@{sdk-prefix}-tabs-tab {
-    position: relative;
-  }
-  .@{sdk-prefix}-tabs-active {
-    .@{sdk-prefix}-tabs-refresh-icon {
-      opacity: 1;
-      pointer-events: auto;
-    }
-  }
-  span.anticon.anticon-reload.@{sdk-prefix}-tabs-refresh-icon {
-    margin-right: 0;
-  }
-  .@{sdk-prefix}-tabs-refresh-icon {
-    margin-left: 8px;
-    font-size: 12px;
-    color: @font-disable-color;
-    transition: color 0.5s, opacity 0.2s;
-    pointer-events: none;
-    opacity: 0;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    &:hover {
-      color: @theme-color;
-    }
-  }
-}
+@import 'antd/lib/tabs/style/index.less';
+@import 'antd/lib/tooltip/style/index.less';
+@import '../../style/theme.less';
+@import '../../style/mixin.less';
+
+.@{sdk-prefix}-tabs {
+  .@{sdk-prefix}-tabs-tab {
+    position: relative;
+  }
+  .@{sdk-prefix}-tabs-active {
+    .@{sdk-prefix}-tabs-refresh-icon {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+  span.anticon.anticon-reload.@{sdk-prefix}-tabs-refresh-icon {
+    margin-right: 0;
+  }
+  .@{sdk-prefix}-tabs-refresh-icon {
+    margin-left: 8px;
+    font-size: 12px;
+    color: @font-disable-color;
+    transition: color 0.5s, opacity 0.2s;
+    pointer-events: none;
+    opacity: 0;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    &:hover {
+      color: @theme-color;
+    }
+  }
+}

package/lib/components/TagList/Tag/style.css

@@ -11,7 +11,7 @@
 .pandora-sdk-root .pandora-sdk-prefix {
   position: relative;
   min-width: 24px;
-  color: rgba(44, 109, 210, 0.6);
+  color: rgba(67, 107, 255, 0.6);
   float: left;
 }
 .pandora-sdk-root .pandora-sdk-prefix::after {
@@ -22,12 +22,12 @@
   margin: auto;
   content: '';
   height: 16px;
-  border-left: 1px solid rgba(44, 109, 210, 0.1);
+  border-left: 1px solid rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root .pandora-sdk-suffix {
   position: relative;
   min-width: 24px;
-  color: rgba(44, 109, 210, 0.6);
+  color: rgba(67, 107, 255, 0.6);
   float: right;
 }
 .pandora-sdk-root .pandora-sdk-suffix::before {
@@ -38,7 +38,7 @@
   margin: auto;
   content: '';
   height: 16px;
-  border-left: 1px solid rgba(44, 109, 210, 0.1);
+  border-left: 1px solid rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root .pandora-sdk-content {
   padding: 0 8px;
@@ -50,7 +50,7 @@
   font-size: 14px;
 }
 .pandora-sdk-root.pandora-sdk-primary {
-  background: rgba(44, 109, 210, 0.1);
+  background: rgba(67, 107, 255, 0.1);
 }
 .pandora-sdk-root.pandora-sdk-green {
   background: rgba(32, 201, 151, 0.1);

package/lib/components/TagList/Tag/style.less

@@ -1,72 +1,72 @@
-@import '../../../style/theme.less';
-
-.@{sdk-prefix}-root {
-  display: inline-block;
-  line-height: 24px;
-  margin-right: 8px;
-  border-radius: 1px;
-  color: @font-color-7;
-  text-align: center;
-  vertical-align: middle;
-  border-radius: @border-radius-base;
-
-  .@{sdk-prefix}-prefix {
-    position: relative;
-    min-width: 24px;
-    color: @theme-color-060;
-    float: left;
-    &::after {
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      right: 0px;
-      margin: auto;
-      content: '';
-      height: 16px;
-      border-left: 1px solid @theme-color-010;
-    }
-  }
-
-  .@{sdk-prefix}-suffix {
-    position: relative;
-    min-width: 24px;
-    color: @theme-color-060;
-    float: right;
-    &::before {
-      position: absolute;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-      margin: auto;
-      content: '';
-      height: 16px;
-      border-left: 1px solid @theme-color-010;
-    }
-  }
-
-  .@{sdk-prefix}-content {
-    padding: 0 8px;
-    max-width: 150px;
-    vertical-align: middle;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    font-size: 14px;
-  }
-
-  &.@{sdk-prefix}-primary {
-    background: fade(@tag-primary, 10%);
-  }
-  &.@{sdk-prefix}-green {
-    background: fade(@tag-green, 10%);
-  }
-  &.@{sdk-prefix}-yellow {
-    background: fade(@tag-yellow, 10%);
-  }
-  &.@{sdk-prefix}-blue {
-    background: fade(@tag-blue, 10%);
-  }
-  &.@{sdk-prefix}-grey {
-    background: @tag-grey;
-  }
-}
+@import '../../../style/theme.less';
+
+.@{sdk-prefix}-root {
+  display: inline-block;
+  line-height: 24px;
+  margin-right: 8px;
+  border-radius: 1px;
+  color: @font-color-7;
+  text-align: center;
+  vertical-align: middle;
+  border-radius: @border-radius-base;
+
+  .@{sdk-prefix}-prefix {
+    position: relative;
+    min-width: 24px;
+    color: @theme-color-060;
+    float: left;
+    &::after {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      right: 0px;
+      margin: auto;
+      content: '';
+      height: 16px;
+      border-left: 1px solid @theme-color-010;
+    }
+  }
+
+  .@{sdk-prefix}-suffix {
+    position: relative;
+    min-width: 24px;
+    color: @theme-color-060;
+    float: right;
+    &::before {
+      position: absolute;
+      top: 0px;
+      bottom: 0px;
+      left: 0px;
+      margin: auto;
+      content: '';
+      height: 16px;
+      border-left: 1px solid @theme-color-010;
+    }
+  }
+
+  .@{sdk-prefix}-content {
+    padding: 0 8px;
+    max-width: 150px;
+    vertical-align: middle;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    font-size: 14px;
+  }
+
+  &.@{sdk-prefix}-primary {
+    background: fade(@tag-primary, 10%);
+  }
+  &.@{sdk-prefix}-green {
+    background: fade(@tag-green, 10%);
+  }
+  &.@{sdk-prefix}-yellow {
+    background: fade(@tag-yellow, 10%);
+  }
+  &.@{sdk-prefix}-blue {
+    background: fade(@tag-blue, 10%);
+  }
+  &.@{sdk-prefix}-grey {
+    background: @tag-grey;
+  }
+}