amis-ui 1.0.0-beta.0

package/scss/themes/_ang-variables.scss

@@ -0,0 +1,132 @@
+@import '../functions';
+
+$ns: 'a-';
+
+$colors: (
+  black: #1c2b36,
+  white: #fff,
+  primary: #7266ba,
+  secondary: #6c757d,
+  success: #27c24c,
+  info: #23b7e5,
+  warning: #fad733,
+  danger: #f05050,
+  light: #edf1f2,
+  dark: #3a3f51,
+  gray: (
+    50: #f9fafb,
+    100: #f3f4f6,
+    200: #e5e7eb,
+    300: #d1d5db,
+    400: #9ca3af,
+    500: #6b7280,
+    600: #4b5563,
+    700: #374151,
+    800: #1f2937,
+    900: #111827
+  ),
+  red: (
+    50: #fef2f2,
+    100: #fee2e2,
+    200: #fecaca,
+    300: #fca5a5,
+    400: #f87171,
+    500: #ef4444,
+    600: #dc2626,
+    700: #b91c1c,
+    800: #991b1b,
+    900: #7f1d1d
+  ),
+  yellow: (
+    50: #fffbeb,
+    100: #fef3c7,
+    200: #fde68a,
+    300: #fcd34d,
+    400: #fbbf24,
+    500: #f59e0b,
+    600: #d97706,
+    700: #b45309,
+    800: #92400e,
+    900: #78350f
+  ),
+  green: (
+    50: #ecfdf5,
+    100: #d1fae5,
+    200: #a7f3d0,
+    300: #6ee7b7,
+    400: #34d399,
+    500: #10b981,
+    600: #059669,
+    700: #047857,
+    800: #065f46,
+    900: #064e3b
+  ),
+  blue: (
+    50: #eff6ff,
+    100: #dbeafe,
+    200: #bfdbfe,
+    300: #93c5fd,
+    400: #60a5fa,
+    500: #3b82f6,
+    600: #2563eb,
+    700: #1d4ed8,
+    800: #1e40af,
+    900: #1e3a8a
+  ),
+  cyan: (
+    50: #ecfeff,
+    100: #cffafe,
+    200: #a5f3fc,
+    300: #67e8f9,
+    400: #22d3ee,
+    500: #06b6d4,
+    600: #0891b2,
+    700: #0e7490,
+    800: #155e75,
+    900: #164e63
+  ),
+  indigo: (
+    50: #eef2ff,
+    100: #e0e7ff,
+    200: #c7d2fe,
+    300: #a5b4fc,
+    400: #818cf8,
+    500: #6366f1,
+    600: #4f46e5,
+    700: #4338ca,
+    800: #3730a3,
+    900: #312e81
+  ),
+  purple: (
+    50: #f5f3ff,
+    100: #ede9fe,
+    200: #ddd6fe,
+    300: #c4b5fd,
+    400: #a78bfa,
+    500: #8b5cf6,
+    600: #7c3aed,
+    700: #6d28d9,
+    800: #5b21b6,
+    900: #4c1d95
+  ),
+  pink: (
+    50: #fdf2f8,
+    100: #fce7f3,
+    200: #fbcfe8,
+    300: #f9a8d4,
+    400: #f472b6,
+    500: #ec4899,
+    600: #db2777,
+    700: #be185d,
+    800: #9d174d,
+    900: #831843
+  )
+);
+
+$text-color: #58666e;
+$link-color: map-get($colors, 'info');
+
+$Form-input-borderColor: #cfdadd;
+
+@import '../variables';
+@import '../properties';

package/scss/themes/_antd-colors.scss

@@ -0,0 +1,149 @@
+/**
+ * @file 使用 extract-antd-color.py 转换
+ */
+
+$blue-base: #1890ff;
+$blue-1: #e6f7ff;
+$blue-2: #bae7ff;
+$blue-3: #91d5ff;
+$blue-4: #69c0ff;
+$blue-5: #40a9ff;
+$blue-6: #1890ff;
+$blue-7: #096dd9;
+$blue-8: #0050b3;
+$blue-9: #003a8c;
+$blue-10: #002766;
+$purple-base: #722ed1;
+$purple-1: #f9f0ff;
+$purple-2: #efdbff;
+$purple-3: #d3adf7;
+$purple-4: #b37feb;
+$purple-5: #9254de;
+$purple-6: #722ed1;
+$purple-7: #531dab;
+$purple-8: #391085;
+$purple-9: #22075e;
+$purple-10: #120338;
+$cyan-base: #13c2c2;
+$cyan-1: #e6fffb;
+$cyan-2: #b5f5ec;
+$cyan-3: #87e8de;
+$cyan-4: #5cdbd3;
+$cyan-5: #36cfc9;
+$cyan-6: #13c2c2;
+$cyan-7: #08979c;
+$cyan-8: #006d75;
+$cyan-9: #00474f;
+$cyan-10: #002329;
+$green-base: #52c41a;
+$green-1: #f6ffed;
+$green-2: #d9f7be;
+$green-3: #b7eb8f;
+$green-4: #95de64;
+$green-5: #73d13d;
+$green-6: #52c41a;
+$green-7: #389e0d;
+$green-8: #237804;
+$green-9: #135200;
+$green-10: #092b00;
+$magenta-base: #eb2f96;
+$magenta-1: #fff0f6;
+$magenta-2: #ffd6e7;
+$magenta-3: #ffadd2;
+$magenta-4: #ff85c0;
+$magenta-5: #f759ab;
+$magenta-6: #eb2f96;
+$magenta-7: #c41d7f;
+$magenta-8: #9e1068;
+$magenta-9: #780650;
+$magenta-10: #520339;
+$pink-base: #eb2f96;
+$pink-1: #fff0f6;
+$pink-2: #ffd6e7;
+$pink-3: #ffadd2;
+$pink-4: #ff85c0;
+$pink-5: #f759ab;
+$pink-6: #eb2f96;
+$pink-7: #c41d7f;
+$pink-8: #9e1068;
+$pink-9: #780650;
+$pink-10: #520339;
+$red-base: #f5222d;
+$red-1: #fff1f0;
+$red-2: #ffccc7;
+$red-3: #ffa39e;
+$red-4: #ff7875;
+$red-5: #ff4d4f;
+$red-6: #f5222d;
+$red-7: #cf1322;
+$red-8: #a8071a;
+$red-9: #820014;
+$red-10: #5c0011;
+$orange-base: #fa8c16;
+$orange-1: #fff7e6;
+$orange-2: #ffe7ba;
+$orange-3: #ffd591;
+$orange-4: #ffc069;
+$orange-5: #ffa940;
+$orange-6: #fa8c16;
+$orange-7: #d46b08;
+$orange-8: #ad4e00;
+$orange-9: #873800;
+$orange-10: #612500;
+$yellow-base: #fadb14;
+$yellow-1: #feffe6;
+$yellow-2: #ffffb8;
+$yellow-3: #fffb8f;
+$yellow-4: #fff566;
+$yellow-5: #ffec3d;
+$yellow-6: #fadb14;
+$yellow-7: #d4b106;
+$yellow-8: #ad8b00;
+$yellow-9: #876800;
+$yellow-10: #614700;
+$volcano-base: #fa541c;
+$volcano-1: #fff2e8;
+$volcano-2: #ffd8bf;
+$volcano-3: #ffbb96;
+$volcano-4: #ff9c6e;
+$volcano-5: #ff7a45;
+$volcano-6: #fa541c;
+$volcano-7: #d4380d;
+$volcano-8: #ad2102;
+$volcano-9: #871400;
+$volcano-10: #610b00;
+$geekblue-base: #2f54eb;
+$geekblue-1: #f0f5ff;
+$geekblue-2: #d6e4ff;
+$geekblue-3: #adc6ff;
+$geekblue-4: #85a5ff;
+$geekblue-5: #597ef7;
+$geekblue-6: #2f54eb;
+$geekblue-7: #1d39c4;
+$geekblue-8: #10239e;
+$geekblue-9: #061178;
+$geekblue-10: #030852;
+$lime-base: #a0d911;
+$lime-1: #fcffe6;
+$lime-2: #f4ffb8;
+$lime-3: #eaff8f;
+$lime-4: #d3f261;
+$lime-5: #bae637;
+$lime-6: #a0d911;
+$lime-7: #7cb305;
+$lime-8: #5b8c00;
+$lime-9: #3f6600;
+$lime-10: #254000;
+$gold-base: #faad14;
+$gold-1: #fffbe6;
+$gold-2: #fff1b8;
+$gold-3: #ffe58f;
+$gold-4: #ffd666;
+$gold-5: #ffc53d;
+$gold-6: #faad14;
+$gold-7: #d48806;
+$gold-8: #ad6800;
+$gold-9: #874d00;
+$gold-10: #613400;
+$preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime,
+  green, blue, geekblue, purple;

package/scss/themes/_antd-variables.scss

@@ -0,0 +1,171 @@
+@import './antd-colors';
+@import '../functions';
+
+$remFactor: 16px;
+
+$ns: 'antd-';
+
+$primary: $blue-6;
+$info: $primary;
+$success: $green-6;
+$warning: $gold-6;
+$danger: $red-5;
+$light: #d9d9d9;
+$white: #fff;
+$black: #000;
+
+$info-bg: #eaf6fe;
+$success-bg: #f1fdeb;
+$warning-bg: #fcf7f1;
+$danger-bg: #fff5f5;
+
+// Border color
+$border-color-base: #d9d9d9; // base border outline a component
+$border-color-split: #5d5d5d; // split border inside a component
+$border-color-inverse: $white;
+$border-width-base: 1px; // width of the border for a component
+$border-style-base: solid; // style of a components border
+
+$text-color: rgba(0, 0, 0, 0.85);
+
+$text--muted-color: #6c6c6c;
+$text--loud-color: lighten($text-color, 10%);
+
+$link-color: $info;
+
+@import '../variables';
+@import '../properties';
+
+:root {
+  --fontFamilyBase: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+
+  --lineHeightBase: 1.57;
+
+  --borderColor: #d9d9d9;
+  --text-color: #{$text-color};
+
+  --text--muted-color: #999;
+  --text--loud-color: #333;
+  --link-onHover-decoration: none;
+
+  --icon-color: inherit;
+  --icon-onHover-color: var(--primary);
+
+  --body-bg: #f0f2f5;
+
+  --borderRadius: 2px;
+
+  --Page-header-bg: #fff;
+
+  --Button-boxShadow: none;
+  --Button-onActive-boxShadow: none;
+  --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  // --Button-textShadow: 0 -1px 0 rgb(0 0 0 / 12%);
+  --Button--default-border: #d9d9d9;
+  --Button--default-onHover-border: #{$blue-5};
+  --Button--default-onHover-bg: #fff;
+  --Button--default-onHover-color: #{$blue-5};
+  --Button--default-onActive-bg: #fff;
+  --Button--default-onActive-border: #{$blue-7};
+  --Button--default-onActive-color: #{$blue-7};
+  --Button-onDisabled-borderColor: #d9d9d9;
+
+  --Button--primary-onHover-bg: #{$blue-5};
+  --Button--primary-onHover-border: #{$blue-5};
+
+  --Card-onChecked-bg: #{$blue-1};
+  --Card-onChecked-color: var(--body-color);
+  --Card-onChecked-fieldLabel-color: var(--text--muted-color);
+  --Card-onChecked-borderColor: #{$blue-5};
+
+  --Calendar-btnCancel-bg: #fff;
+  --Calendar-btnCancel-border: var(--Button--default-border);
+
+  --Checkbox-onDisabled-color: #d9d9d9;
+  --Checkbox-onDisabled-bg: #f5f5f5;
+
+  --Radio-onDisabled-color: #c4c4c4;
+  --Radio-onDisabled-bg: #f5f5f5;
+  --Radio-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);
+
+  --Rating-onActive-color: #fadb14;
+
+  --Panel--default-bg: #fff;
+
+  --Layout-aside-bg: #001529;
+  --Layout-brand-bg: #001529;
+  --Layout-aside-color: hsla(0, 0%, 100%, 0.65);
+  --Layout-aside-subList-bg: #000c17;
+  --Layout-aside-onHover-bg: none;
+  --Layout-aside-onAcitve-bg: #1890ff;
+
+  --ListControl-item-onHover-color: var(--primary);
+  --ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
+  --ListControl-item-onHover-borderColor: var(--primary);
+
+  --ListItem-onChecked-bg: #{$blue-1};
+  --ListItem--strip-bg: #fff;
+
+  --Nav-item-onActive-borderLeft: 0;
+
+  --Modal-header-bg: #fff;
+  --Modal-title-fontWeight: 500;
+
+  --Form-item-fontSize: var(--fontSizeBase);
+  --Form-item-fontColor: var(--body-color);
+  --Form-input-onFocused-borderColor: #{$blue-5};
+  --Form-input-borderColor: #{$border-color-base};
+  --Form-input-boxShadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+  --Form-select-borderWidth: #{px2rem(1px)};
+  --Form-select-borderRadius: 0;
+  --Form-select-borderColor: #{$border-color-base};
+  --Form-select-bg: var(--white);
+  --Form-select-onHover-bg: var(--white);
+  --Form-select-onHover-borderColor: #{$blue-5};
+  --Form-select-placeholderColor: #999;
+  --Form-select-color: #000;
+  --Form-select-caret-iconColor: #999;
+  --Form-select-caret-onHover-iconColor: var(--primary);
+  --Form-select-caret-fontSize: #{px2rem(12px)};
+  --Form-select-outer-borderWidth: 0;
+  --Form-select-outer-top: #{px2rem(32px)};
+  --Form-select-outer-boxShadow: 0 3px 6px -4px rgb(0 0 0 / 12%),
+    0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
+  --Form-select-menu-color: #333;
+  --Form-select-menu-onHover-color: #000;
+  --Form-select-menu-onHover-bg: #f5f5f5;
+  --Form-select-menu-height: #{px2rem(24px)};
+  --Form-select-popoverGap: #{px2rem(3px)};
+  --Form-select-search-height: #{px2rem(30px)};
+  --Form-selectValue-color: var(--primary);
+  --Form-select-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);
+
+  --Page-aside-bg: #ffffff;
+
+  --Pagination-onActive-backgroundColor: #fff;
+  --Pagination-onActive-color: rgb(24, 144, 255);
+  --Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);
+
+  --Transfer-title-bg: #f0f2f5;
+  // Tabs
+  --Tabs-linkFontSize: #{px2rem(14px)};
+  --Tabs--card-bg: var(--Table-thead-bg);
+  --Tabs--radio-bg: var(--white);
+  --Tabs--vertical-onActive-bg: #e7f7ff;
+  --Tabs--vertical-onActive-borderWidth: 0 3px 0 0;
+  --Tabs--vertical-onActive-container-bg: #fff;
+  --Tabs--vertical-onActive-container-borderRight: 1px solid #f0f0f0;
+
+  $Table-strip-bg: transparent;
+  --Table-strip-bg: transparent;
+  --Table-thead-bg: #fafafa;
+  --Table-onHover-bg: rgb(250, 250, 250);
+  --Table-onHover-borderColor: var(--Table-borderColor);
+  --Table-onChecked-bg: #{$blue-1};
+  --Table-onChecked-color: var(--Table-color);
+  --Table-onChecked-borderColor: var(--Table-borderColor);
+
+  --Switch-bgColor: #bfbfbf;
+}

package/scss/themes/_common.scss

@@ -0,0 +1,138 @@
+@import '../thirds';
+
+@import '../mixins';
+@import '../base/reset';
+@import '../base/normalize';
+@import '../base/typography';
+@import '../base/common';
+
+@import '../layout/layout';
+@import '../layout/grid';
+@import '../layout/aside';
+@import '../layout/hbox';
+@import '../layout/vbox';
+@import '../components/button'; // 这个要放在最前面
+@import '../components/avatar';
+@import '../components/breadcrumb';
+@import '../components/badge';
+@import '../components/modal';
+@import '../components/drawer';
+@import '../components/tooltip';
+@import '../components/tpl';
+@import '../components/popover';
+@import '../components/popup';
+@import '../components/picker-columns';
+@import '../components/toast';
+@import '../components/alert';
+@import '../components/app';
+@import '../components/array-input';
+@import '../components/tabs';
+@import '../components/nav';
+@import '../components/page';
+@import '../components/remark';
+@import '../components/chart';
+@import '../components/video';
+@import '../components/audio';
+@import '../components/panel';
+@import '../components/service';
+@import '../components/sparkline';
+@import '../components/spinner';
+@import '../components/button-group';
+@import '../components/dropdown';
+@import '../components/each';
+@import '../components/calendar';
+@import '../components/collapse';
+@import '../components/collapse-group';
+@import '../components/color';
+@import '../components/condition-builder';
+@import '../components/context-menu';
+@import '../components/wizard';
+@import '../components/crud';
+@import '../components/table';
+@import '../components/table-v2';
+@import '../components/column-toggler';
+@import '../components/list';
+@import '../components/cards';
+@import '../components/card';
+@import '../components/card2';
+@import '../components/quick-edit';
+@import '../components/popoverable';
+@import '../components/progress';
+@import '../components/property';
+@import '../components/copyable';
+@import '../components/divider';
+@import '../components/pagination';
+@import '../components/wrapper';
+@import '../components/status';
+@import '../components/carousel';
+@import '../components/image-gallery';
+@import '../components/images';
+@import '../components/input-box';
+@import '../components/json-schema';
+@import '../components/json-schema-editor';
+@import '../components/result-box';
+@import '../components/search-box';
+@import '../components/list-menu';
+@import '../components/log';
+@import '../components/json';
+@import '../components/icon';
+@import '../components/steps';
+@import '../components/portlet';
+@import '../components/grid-nav';
+
+@import '../components/form/fieldset';
+@import '../components/form/group';
+@import '../components/form/input-group';
+@import '../components/form/text';
+@import '../components/form/textarea';
+@import '../components/form/checks';
+@import '../components/form/selection';
+@import '../components/form/city';
+@import '../components/city-area';
+@import '../components/form/switch';
+@import '../components/form/number';
+@import '../components/form/select';
+@import '../components/form/result-list';
+@import '../components/form/list';
+@import '../components/form/location';
+@import '../components/form/matrix';
+@import '../components/form/color';
+@import '../components/form/date';
+@import '../components/form/date-range';
+@import '../components/form/image';
+
+@import '../components/form/file';
+@import '../components/form/excel';
+@import '../components/form/editor';
+@import '../components/form/rich-text';
+@import '../components/form/tinymce';
+@import '../components/form/range';
+@import '../components/form/repeat';
+@import '../components/form/tree';
+@import '../components/form/tree-select';
+@import '../components/form/combo';
+@import '../components/form/sub-form';
+@import '../components/form/chained-select';
+@import '../components/form/picker';
+@import '../components/form/qr-code';
+@import '../components/form/tag';
+@import '../components/form/rating';
+@import '../components/form/transfer';
+@import '../components/form/nested-select';
+@import '../components/cascader';
+@import '../components/form/icon-picker';
+@import '../components/form/form';
+@import '../components/form/user-select';
+@import '../components/anchor-nav';
+@import '../components/markdown';
+@import '../components/link';
+@import '../components/mapping';
+@import '../components/formula';
+@import '../components/timeline';
+@import '../components/barcode';
+@import '../components/tag';
+@import '../components/pull-refresh';
+
+@import '../components/debug';
+
+@import '../utilities';

package/scss/themes/_cxd-colors.scss

@@ -0,0 +1,56 @@
+// yunshe4.1
+$B1: #e6f0ff;
+$B2: #d4e5ff;
+$B3: #a7c2f9;
+$B4: #a8caff;
+$B5: #528eff;
+$B6: #2468f2;
+$B7: #144bcc;
+$B8: #153e91;
+$B9: #0e2960;
+$B10: #091a3c;
+
+$E1: #ffe8e6;
+$E2: #ffdbd9;
+$E3: #ffb6b3;
+$E4: #ff908c;
+$E5: #ff6966;
+$E6: #f33e3e;
+$E7: #cc292e;
+$E8: #a61922;
+$E9: #800d18;
+$E10: #590410;
+
+$S1: #ecffe6;
+$S2: #d1f2c7;
+$S3: #a5e693;
+$S4: #7bd964;
+$S5: #54cc39;
+$S6: #30bf13;
+$S7: #1b9908;
+$S8: #0b7300;
+$S9: #054d00;
+$S10: #012600;
+
+$W1: #fff4e6;
+$W2: #ffecd4;
+$W3: #ffd8a8;
+$W4: #ffc27d;
+$W5: #ffab52;
+$W6: #ff9326;
+$W7: #d97116;
+$W8: #b35209;
+$W9: #8c3800;
+$W10: #662500;
+
+$G1: #070c14;
+$G2: #151b26;
+$G3: #303540;
+$G4: #5c5f66;
+$G5: #84868c;
+$G6: #b8babf;
+$G7: #d4d6d9;
+$G8: #e8e9eb;
+$G9: #f2f2f4;
+$G10: #f7f7f9;
+$G11: #ffffff;