@qi-tian-da-sheng/bin-project-ui 1.0.0

package/packages/styles/mixn/_index.less

@@ -0,0 +1,12 @@
+/*
+ * @description: UI 组件混合样式
+ * @author: MC.Yang
+ */
+@import "background";
+@import "border";
+@import "status";
+@import "layout";
+@import "reset";
+@import "tools";
+
+@infinite:999999999999;

package/packages/styles/mixn/background.less

@@ -0,0 +1,65 @@
+/*
+ * @description: UI 组件背景样式
+ * @author: MC.Yang
+ */
+
+.useBGColorGray() {
+  background-color: var(--pixel-color-gray);
+}
+
+.useBGColorGrayLighter() {
+  background-color: var(--pixel-color-gray-fade);
+}
+
+.useBGColorGrayLightest() {
+  background-color: var(--pixel-color-gray-deep-fade);
+}
+
+.useBGColorGrayDarker() {
+  background-color: var(--pixel-color-gray-dark);
+}
+
+.useBGColorGrayDarkest() {
+  background-color: var(--pixel-color-gray-dark);
+}
+
+.useBGScanningLine (@bgColor, @time:1.2s, @deg:100deg) {
+  background: linear-gradient(@deg,
+  rgba(255, 255, 255, 0) 35%,
+  rgba(255, 255, 255, .5) 50%,
+  rgba(255, 255, 255, 0) 65%) @bgColor;
+  background-size: 200% 100%;
+  background-position-x: 180%;
+  animation: @time __bgLine linear infinite;
+}
+
+.usePulse(@bgColor, @time:2s, @deg:90deg) {
+  background: linear-gradient(@deg,
+  @bgColor,
+  rgba(240, 240, 240, 0) 0%,
+  rgba(240, 240, 240, 0.7) 27%,
+  rgba(240, 240, 240, 0) 30%,
+  @bgColor,) black;
+  background-size: 200% 100%;
+  background-position-x: 70%;
+  animation: @time pulse linear infinite;
+}
+
+@keyframes pulse {
+  0% {
+    background-position-x: 70%;
+  }
+  30% {
+    background-position-x: -100%;
+  }
+
+  100% {
+    background-position-x: -100%;
+  }
+}
+
+@keyframes __bgLine {
+  to {
+    background-position-x: -20%;
+  }
+}

package/packages/styles/mixn/border.less

@@ -0,0 +1,31 @@
+/*
+ * @description: UI 组件边界样式
+ * @author: MC.Yang
+ */
+
+.useBorderBox() {
+  box-sizing: border-box;
+  & * {
+    box-sizing: border-box;
+  }
+}
+
+// 设置元素的边界曲率
+.useBorderRadius(@num, @unit:px) {
+  border-radius: ~"@{num}@{unit}";
+}
+
+.useBorderGray() {
+  border: 1px solid var(--pixel-color-gray);
+}
+
+// 默认边框, 灰色边框、怪异盒子、背景色
+.useBorderDft(@num:0) {
+  border: 1px solid var(--pixel-color-gray);
+  background-color: var(--pixel-color-bg);
+  border-radius: ~"@{num}px";
+  box-sizing: border-box;
+  & * {
+    box-sizing: border-box;
+  }
+}

package/packages/styles/mixn/layout.less

@@ -0,0 +1,80 @@
+/*
+ * @description: UI 组件布局样式
+ * @author: MC.Yang
+ */
+
+.list-style-none() {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.flex-row-center-center() {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+}
+
+.flex-row-start-center() {
+    .flex-row-center-center();
+    justify-content: flex-start;
+}
+
+.filter-overflow() {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+
+// 使用 flex 布局，center center
+.useFlexRCC(@gap:0, @unit:px) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    gap: ~"@{gap}@{unit}";
+}
+
+.useModal(){
+    position: fixed;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+}
+
+// 使用 flex 布局，center center
+.useIFlexRCC(@gap:0, @unit:px) {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    gap: ~"@{gap}@{unit}";
+}
+
+.useSizeLarge(@a:12, @b:19.5, @u:px) {
+    height: var(--pixel-component-height-large);
+    font-size: 16px;
+    padding: ~"@{a}@{u} @{b}@{u}";
+}
+
+.useSizeDft(@a:9, @b:14.5, @u:px) {
+    min-height: var(--pixel-component-height);
+    font-size: 15px;
+    padding: ~"@{a}@{u} @{b}@{u}";
+}
+
+.useSizeSmall(@a:6, @b:9.5, @u:px) {
+    min-height: var(--pixel-component-height-small);
+    font-size: var(--pixel-font-size-small);
+    padding: ~"@{a}@{u} @{b}@{u}";
+}
+
+.useSizeMini(@a:5, @b:8, @u:px) {
+    min-height: var(--pixel-component-height-mini);
+    font-size: var(--pixel-font-size-small);
+    padding: ~"@{a}@{u} @{b}@{u}";
+}

package/packages/styles/mixn/reset.less

@@ -0,0 +1,13 @@
+/*
+ * @description: UI 组件重置样式
+ * @author: MC.Yang
+ */
+
+.reset() {
+  font: var(--pixel-font-size-body-medium) var(--pixel-line-height-body-medium) var(--pixel-font-family);
+  color: var(--pixel-color-font-gray-1);
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}

package/packages/styles/mixn/status.less

@@ -0,0 +1,95 @@
+/*
+ * @description: UI 组件状态样式
+ * @author: MC.Yang
+ */
+
+.is-visible {
+  visibility: visible !important;
+}
+
+.is-invisible {
+  visibility: hidden !important;
+}
+
+.is-round {
+  border-radius: 9999px !important;
+
+  &:after,
+  &:before {
+    border-radius: 9999px !important;
+  }
+}
+
+.is-circle {
+  height: 35px;
+  width: 35px;
+  border-radius: 50% !important;
+  padding: 9px;
+
+  &:after,
+  &:before {
+    border-radius: 50% !important;
+  }
+}
+
+.is-relative {
+  position: relative !important;
+}
+
+.is-rotating {
+  animation: rotate 2s infinite linear !important;
+}
+
+.is-disabled {
+  cursor: not-allowed;
+  user-select: none;
+  opacity: 0.6;
+  animation: none !important;
+  -webkit-animation: none !important;
+  transition: none !important;
+
+  & * {
+    pointer-events: none;
+  }
+}
+
+.is-loading {
+  user-select: none;
+  animation: none !important;
+  -webkit-animation: none !important;
+  transition: none !important;
+
+  & * {
+    pointer-events: none;
+  }
+
+  cursor: wait;
+  opacity: 0.7;
+}
+
+.is-underline {
+  position: relative;
+  text-decoration: none;
+
+  &:after {
+    transition: all .1s ease-in;
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleX(0);
+    transform-origin: center center;
+  }
+
+  &:hover:after {
+    content: "";
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleX(1);
+  }
+}

package/packages/styles/mixn/tools.less

@@ -0,0 +1,111 @@
+/*
+ * @description: UI 组件样式工具
+ * @author: MC.Yang
+ */
+
+@variablePrefix: pixel;
+@componentPrefix: p;
+
+.with(@v, @r:{}) {
+  &.@{v} {
+    @r();
+  }
+}
+
+.is(@s, @r:{}) {
+  .is-@{s}& {
+    @r();
+  }
+}
+
+.d(@b, @r:{}, @ns:never) {
+  & when (@ns = never) {
+    .@{b} {
+      @r();
+    }
+  }
+  & when not (@ns = never) {
+    .@{ns}-@{b} {
+      @r();
+    }
+  }
+
+}
+
+.b(@b, @r:{}, @ns:never) {
+  & when not (@ns = never) {
+    .@{ns}-@{b} {
+      @r();
+    }
+  }
+  & when (@ns = never) {
+    &-@{b} {
+      @r();
+    }
+  }
+}
+
+.e(@e, @r:{}, @ns:never) {
+  & when not (@ns = never) {
+    .@{ns}__@{e} {
+      @r();
+    }
+  }
+  & when (@ns = never) {
+    &__@{e} {
+      @r();
+    }
+  }
+}
+
+.m(@m, @r:{}, @ns:never) when (isruleset(@r)) {
+  & when not (@ns = never) {
+    .@{ns}--@{m} {
+      @r();
+    }
+  }
+  & when (@ns = never) {
+    &--@{m} {
+      @r();
+    }
+  }
+}
+
+.m(@m1, @m2, @r:{}, @ns:never) when (isruleset(@r)) {
+  & when not (@ns = never) {
+    .@{ns}--@{m1}.@{ns}--@{m2} {
+      @r();
+    }
+  }
+  & when (@ns = never) {
+    &--@{m1}&--@{m2} {
+      @r();
+    }
+  }
+}
+
+.bm(@b, @m, @r:{}) {
+  &-@{b}--@{m} {
+    @r();
+  }
+}
+
+.be(@b, @e, @r:{}) {
+  &-@{b}__@{e} {
+    @r();
+  }
+}
+
+.em(@e, @m, @r:{}) {
+  &__@{e}--@{m} {
+    @r();
+  }
+}
+
+.mIs(@modifier, @status, @rules:{}) {
+  &--@{modifier}.is-@{status} {
+    @rules();
+  }
+}
+
+

package/packages/styles/package.json

@@ -0,0 +1,5 @@
+{
+  "name": "@bin-ui/styles",
+  "private": true,
+  "dependencies": {}
+}

package/packages/styles/plugin/index.js

@@ -0,0 +1,79 @@
+/*
+ * @description: UI 组件样式插件
+ * @author: MC.Yang
+ */
+
+const getVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-${str})`;
+}
+
+const getClrVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str})`;
+}
+
+const getClrFadeVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str}-fade)`;
+}
+
+const getClrLightVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str}-light)`;
+}
+
+const getClrHoverVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str}-hover)`;
+}
+
+const getClrFocusVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str}-focus)`;
+}
+
+const getClrActiveVar = function (...args) {
+    const strList = Array.from(args.map(item => item.value));
+    const str = strList.join('-');
+    return `var(--pixel-color-${str}-active)`;
+}
+
+const b = function (b) {
+    return b.value;
+}
+
+const be = function (b, e) {
+    return `${b.value}__${e.value}`
+}
+
+const bm = function (b, m) {
+    return `${b.value}--${m.value}`
+}
+
+const is = function (s) {
+    return `is-${s.value}`;
+}
+
+module.exports = {
+    install: function (less, pluginManager, functions) {
+        functions.add('getVar', getVar);
+        functions.add('getClrVar', getClrVar);
+        functions.add('getClrFadeVar', getClrFadeVar);
+        functions.add('getClrLightVar', getClrLightVar);
+        functions.add('getClrHoverVar', getClrHoverVar);
+        functions.add('getClrFocusVar', getClrFocusVar);
+        functions.add('getClrActiveVar', getClrActiveVar);
+        functions.add('b', b);
+        functions.add('be', be);
+        functions.add('bm', bm);
+        functions.add('is', is);
+    },
+
+};

package/packages/styles/theme/_index.less

@@ -0,0 +1,9 @@
+/*
+ * @description: UI 组件 size/margin/padding 相关样式
+ * @author: MC.Yang
+ */
+@import "radius";
+@import "light";
+@import "dark";
+@import "font";
+@import "size";