feat(stylesheet): add less variables & mixins (#1357)

Co-authored-by: ZhaoChen <ittisennsinn@gmail.com>

src/stylesheet/demos/style.less

@@ -0,0 +1,31 @@
+@import '../mixin/border.less';
+@import '../mixin/elevation.less';
+@import '../variables/index.less';
+
+.mixin-demo-border {
+  .border(2);
+}
+
+.mixin-demo-elevation {
+  .elevation(@level:2);
+}
+
+.mixin-demo-blue-1 {
+  background-color: @blue-1;
+}
+.mixin-demo-blue-2 {
+  background-color: @blue-2;
+}
+.mixin-demo-blue-3 {
+  background-color: @blue-3;
+}
+
+.mixin-demo-green-1 {
+  background-color: @green-1;
+}
+.mixin-demo-green-2 {
+  background-color: @green-2;
+}
+.mixin-demo-green-3 {
+  background-color: @green-3;
+}

src/stylesheet/demos/stylesheet.mdx

@@ -0,0 +1,6 @@
+import { Subtitle, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
+
+<Meta title="MDX/less-variables" />
+
+# border mixin

src/stylesheet/demos/stylesheet.stories.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import './style.less';
+
+export const Demo = () => (
+  <div>
+    <div className="mixin-demo-border">border</div>
+    <div className="mixin-demo-elevation">elevation</div>
+    <div className="mixin-demo-blue-1">color blue-1</div>
+    <div className="mixin-demo-blue-2">color blue-2</div>
+    <div className="mixin-demo-blue-3">color blue-3</div>
+    <div className="mixin-demo-green-1">color green-1</div>
+    <div className="mixin-demo-green-2">color green-2</div>
+    <div className="mixin-demo-green-3">color green-3</div>
+  </div>
+);
+
+export default {
+  title: 'stylesheet/less-variables',
+  component: Demo,
+};

src/stylesheet/mixin/border.less

@@ -0,0 +1,8 @@
+@import '../variables/index.less';
+
+.border(@radius: 2, @color: @gray-2) {
+  border: 1px solid @color;
+  -webkit-border-radius: @radius * 2px;
+  -moz-border-radius: @radius * 2px;
+  border-radius: @radius * 2px;
+}

src/stylesheet/mixin/elevation.less

@@ -0,0 +1,4 @@
+@elevations: 0px 3px 8px rgba(36, 46, 89, 0.05), 0px 8px 24px rgba(36, 46, 89, 0.1);
+.elevation(@level: 1) {
+  box-shadow: if(@level > 0 and @level < 3, extract(@elevations, @level), none);
+}

src/stylesheet/variables/index.less

@@ -0,0 +1,19 @@
+@white: var(--white, #ffffff);
+@gray-1: var(--gray-1, #f7f8fc);
+@gray-2: var(--gray-2, #dfe4ee);
+@gray-3: var(--gray-3, #adb2c2);
+@gray-4: var(--gray-4, #7b819c);
+@gray-5: var(--gray-5, #313e75);
+@gray-6: var(--gray-6, #242e59);
+@blue-1: var(--blue-1, #edf2fc);
+@blue-2: var(--blue-2, #3867f4);
+@blue-3: var(--blue-3, #1248e9);
+@green-1: var(--green-1, #e3fff0);
+@green-2: var(--green-2, #60ea97);
+@green-3: var(--green-3, #16cb79);
+@yellow-1: var(--yellow-1, #fffae6);
+@yellow-2: var(--yellow-2, #ffd15b);
+@yellow-3: var(--yellow-3, #faa937);
+@red-1: var(--red-1, #ffebe6);
+@red-2: var(--red-2, #ff90ad);
+@red-3: var(--red-3, #ec134b);