@oceanbase/codemod 1.0.0-alpha.1 → 1.0.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +158 -0
- package/bin/cli.js +196 -30
- package/package.json +7 -6
- package/transforms/__testfixtures__/less-to-cssvar/basic.input.less +16 -0
- package/transforms/__testfixtures__/less-to-cssvar/basic.output.less +14 -0
- package/transforms/__testfixtures__/less-to-cssvar/color-scales.input.less +23 -0
- package/transforms/__testfixtures__/less-to-cssvar/color-scales.output.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/complex-values.input.less +22 -0
- package/transforms/__testfixtures__/less-to-cssvar/complex-values.output.less +20 -0
- package/transforms/__testfixtures__/less-to-cssvar/control-tokens.input.less +29 -0
- package/transforms/__testfixtures__/less-to-cssvar/control-tokens.output.less +27 -0
- package/transforms/__testfixtures__/less-to-cssvar/css-modules-global.input.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/css-modules-global.output.less +19 -0
- package/transforms/__testfixtures__/less-to-cssvar/custom-prefix.input.less +9 -0
- package/transforms/__testfixtures__/less-to-cssvar/custom-prefix.output.less +7 -0
- package/transforms/__testfixtures__/less-to-cssvar/fill-tokens.input.less +36 -0
- package/transforms/__testfixtures__/less-to-cssvar/fill-tokens.output.less +34 -0
- package/transforms/__testfixtures__/less-to-cssvar/mixed-values.input.less +21 -0
- package/transforms/__testfixtures__/less-to-cssvar/mixed-values.output.less +19 -0
- package/transforms/__testfixtures__/less-to-cssvar/multiple-imports.input.less +9 -0
- package/transforms/__testfixtures__/less-to-cssvar/multiple-imports.output.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/nested-selectors.input.less +24 -0
- package/transforms/__testfixtures__/less-to-cssvar/nested-selectors.output.less +22 -0
- package/transforms/__testfixtures__/less-to-cssvar/no-transform.input.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/no-transform.output.less +8 -0
- package/transforms/__testfixtures__/less-to-cssvar/obui-import.input.less +7 -0
- package/transforms/__testfixtures__/less-to-cssvar/obui-import.output.less +5 -0
- package/transforms/__testfixtures__/less-to-cssvar/status-colors.input.less +25 -0
- package/transforms/__testfixtures__/less-to-cssvar/status-colors.output.less +23 -0
- package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.input.less +2 -0
- package/transforms/__testfixtures__/less-to-token/antd-v4-less-to-token.output.less +2 -0
- package/transforms/__testfixtures__/less-to-token/case-insensitive.input.less +4 -0
- package/transforms/__testfixtures__/less-to-token/case-insensitive.output.less +4 -0
- package/transforms/__testfixtures__/less-to-token/exist-import-url.input.less +10 -0
- package/transforms/__testfixtures__/less-to-token/exist-import-url.output.less +10 -0
- package/transforms/__testfixtures__/less-to-token/exist-import.input.less +10 -0
- package/transforms/__testfixtures__/less-to-token/exist-import.output.less +10 -0
- package/transforms/__testfixtures__/sass-to-cssvar/basic.input.scss +18 -0
- package/transforms/__testfixtures__/sass-to-cssvar/basic.output.scss +18 -0
- package/transforms/__testfixtures__/sass-to-cssvar/custom-prefix.input.scss +5 -0
- package/transforms/__testfixtures__/sass-to-cssvar/custom-prefix.output.scss +5 -0
- package/transforms/__testfixtures__/sass-to-cssvar/no-transform.input.scss +6 -0
- package/transforms/__testfixtures__/sass-to-cssvar/no-transform.output.scss +6 -0
- package/transforms/__testfixtures__/style-to-token/antd-style.input.js +1 -0
- package/transforms/__testfixtures__/style-to-token/antd-style.output.js +1 -0
- package/transforms/__testfixtures__/style-to-token/function-component.input.js +2 -2
- package/transforms/__testfixtures__/style-to-token/function-component.output.js +2 -2
- package/transforms/__testfixtures__/style-to-token/nested-object.input.js +12 -0
- package/transforms/__testfixtures__/style-to-token/nested-object.output.js +13 -0
- package/transforms/__testfixtures__/style-to-token/single-function.output.js +1 -2
- package/transforms/__testfixtures__/style-to-token/template-string.input.js +23 -0
- package/transforms/__testfixtures__/style-to-token/template-string.output.js +25 -0
- package/transforms/__tests__/less-to-cssvar.test.ts +180 -0
- package/transforms/__tests__/less-to-token.test.ts +2 -0
- package/transforms/__tests__/sass-to-cssvar.test.ts +67 -0
- package/transforms/__tests__/style-to-token.test.ts +2 -0
- package/transforms/less-to-cssvar.js +505 -0
- package/transforms/less-to-token.js +47 -7
- package/transforms/obui-to-oceanbase-design-and-ui.js +0 -4
- package/transforms/sass-to-cssvar.js +194 -0
- package/transforms/style-to-token.js +183 -12
- package/transforms/utils/path-utils.js +40 -0
- package/transforms/utils/token.js +24 -2
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
.button {
|
|
2
|
+
height: var(--ant-control-height);
|
|
3
|
+
background: var(--ant-color-bg-container);
|
|
4
|
+
|
|
5
|
+
&:hover {
|
|
6
|
+
background: var(--ant-control-item-bg-hover);
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&:active {
|
|
10
|
+
background: var(--ant-control-item-bg-active);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
&.disabled {
|
|
14
|
+
background: var(--ant-control-item-bg-active-disabled);
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.input {
|
|
19
|
+
height: var(--ant-control-height-sm);
|
|
20
|
+
padding: 0 var(--ant-control-padding-horizontal);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.select {
|
|
24
|
+
height: var(--ant-control-height-lg);
|
|
25
|
+
padding: 0 var(--ant-control-padding-horizontal-sm);
|
|
26
|
+
}
|
|
27
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
color: @colorText;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
:global {
|
|
8
|
+
.ant-btn {
|
|
9
|
+
background: @colorPrimary;
|
|
10
|
+
border-radius: @borderRadius;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
:global(.ant-modal) {
|
|
15
|
+
background: @colorBgElevated;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.local :global(.external) {
|
|
19
|
+
color: @colorTextSecondary;
|
|
20
|
+
}
|
|
21
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: var(--ant-color-text);
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
:global {
|
|
6
|
+
.ant-btn {
|
|
7
|
+
background: var(--ant-color-primary);
|
|
8
|
+
border-radius: var(--ant-border-radius);
|
|
9
|
+
}
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
:global(.ant-modal) {
|
|
13
|
+
background: var(--ant-color-bg-elevated);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.local :global(.external) {
|
|
17
|
+
color: var(--ant-color-text-secondary);
|
|
18
|
+
}
|
|
19
|
+
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.fill-example {
|
|
4
|
+
background: @colorFill;
|
|
5
|
+
|
|
6
|
+
&.secondary {
|
|
7
|
+
background: @colorFillSecondary;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
&.tertiary {
|
|
11
|
+
background: @colorFillTertiary;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&.quaternary {
|
|
15
|
+
background: @colorFillQuaternary;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&.content {
|
|
19
|
+
background: @colorFillContent;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.alter {
|
|
23
|
+
background: @colorFillAlter;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.text-bg {
|
|
28
|
+
&:hover {
|
|
29
|
+
background: @colorBgTextHover;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
&:active {
|
|
33
|
+
background: @colorBgTextActive;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
.fill-example {
|
|
2
|
+
background: var(--ant-color-fill);
|
|
3
|
+
|
|
4
|
+
&.secondary {
|
|
5
|
+
background: var(--ant-color-fill-secondary);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
&.tertiary {
|
|
9
|
+
background: var(--ant-color-fill-tertiary);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&.quaternary {
|
|
13
|
+
background: var(--ant-color-fill-quaternary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
&.content {
|
|
17
|
+
background: var(--ant-color-fill-content);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
&.alter {
|
|
21
|
+
background: var(--ant-color-fill-alter);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.text-bg {
|
|
26
|
+
&:hover {
|
|
27
|
+
background: var(--ant-color-bg-text-hover);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&:active {
|
|
31
|
+
background: var(--ant-color-bg-text-active);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.card {
|
|
4
|
+
// Mixed with fixed values
|
|
5
|
+
padding: 8px @paddingSM 16px @paddingLG;
|
|
6
|
+
margin: @marginXS auto;
|
|
7
|
+
border: 1px solid @colorBorder;
|
|
8
|
+
border-radius: @borderRadius 0 0 @borderRadius;
|
|
9
|
+
|
|
10
|
+
// Transition with tokens
|
|
11
|
+
transition: all @motionDurationMid @motionEaseInOut;
|
|
12
|
+
|
|
13
|
+
// Box shadow
|
|
14
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), @boxShadowTertiary;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.text {
|
|
18
|
+
font: @fontWeight @fontSize/@lineHeight @fontFamily;
|
|
19
|
+
color: @colorText;
|
|
20
|
+
}
|
|
21
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
.card {
|
|
2
|
+
// Mixed with fixed values
|
|
3
|
+
padding: 8px var(--ant-padding-sm) 16px var(--ant-padding-lg);
|
|
4
|
+
margin: var(--ant-margin-xs) auto;
|
|
5
|
+
border: 1px solid var(--ant-color-border);
|
|
6
|
+
border-radius: var(--ant-border-radius) 0 0 var(--ant-border-radius);
|
|
7
|
+
|
|
8
|
+
// Transition with tokens
|
|
9
|
+
transition: all var(--ant-motion-duration-mid) var(--ant-motion-ease-in-out);
|
|
10
|
+
|
|
11
|
+
// Box shadow
|
|
12
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1), var(--ant-box-shadow-tertiary);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.text {
|
|
16
|
+
font: var(--ant-font-weight) var(--ant-font-size)/var(--ant-line-height) var(--ant-font-family);
|
|
17
|
+
color: var(--ant-color-text);
|
|
18
|
+
}
|
|
19
|
+
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.wrapper {
|
|
4
|
+
background: @colorBgContainer;
|
|
5
|
+
|
|
6
|
+
.header {
|
|
7
|
+
color: @colorText;
|
|
8
|
+
font-size: @fontSizeLG;
|
|
9
|
+
|
|
10
|
+
&:hover {
|
|
11
|
+
color: @colorPrimary;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.body {
|
|
16
|
+
padding: @padding;
|
|
17
|
+
border: 1px solid @colorBorder;
|
|
18
|
+
|
|
19
|
+
> .content {
|
|
20
|
+
margin: @marginSM;
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
.wrapper {
|
|
2
|
+
background: var(--ant-color-bg-container);
|
|
3
|
+
|
|
4
|
+
.header {
|
|
5
|
+
color: var(--ant-color-text);
|
|
6
|
+
font-size: var(--ant-font-size-lg);
|
|
7
|
+
|
|
8
|
+
&:hover {
|
|
9
|
+
color: var(--ant-color-primary);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.body {
|
|
14
|
+
padding: var(--ant-padding);
|
|
15
|
+
border: 1px solid var(--ant-color-border);
|
|
16
|
+
|
|
17
|
+
> .content {
|
|
18
|
+
margin: var(--ant-margin-sm);
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.status {
|
|
4
|
+
&.success {
|
|
5
|
+
color: @colorSuccess;
|
|
6
|
+
background: @colorSuccessBg;
|
|
7
|
+
border-color: @colorSuccessBorder;
|
|
8
|
+
}
|
|
9
|
+
&.warning {
|
|
10
|
+
color: @colorWarning;
|
|
11
|
+
background: @colorWarningBg;
|
|
12
|
+
border-color: @colorWarningBorder;
|
|
13
|
+
}
|
|
14
|
+
&.error {
|
|
15
|
+
color: @colorError;
|
|
16
|
+
background: @colorErrorBg;
|
|
17
|
+
border-color: @colorErrorBorder;
|
|
18
|
+
}
|
|
19
|
+
&.info {
|
|
20
|
+
color: @colorInfo;
|
|
21
|
+
background: @colorInfoBg;
|
|
22
|
+
border-color: @colorInfoBorder;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
.status {
|
|
2
|
+
&.success {
|
|
3
|
+
color: var(--ant-color-success);
|
|
4
|
+
background: var(--ant-color-success-bg);
|
|
5
|
+
border-color: var(--ant-color-success-border);
|
|
6
|
+
}
|
|
7
|
+
&.warning {
|
|
8
|
+
color: var(--ant-color-warning);
|
|
9
|
+
background: var(--ant-color-warning-bg);
|
|
10
|
+
border-color: var(--ant-color-warning-border);
|
|
11
|
+
}
|
|
12
|
+
&.error {
|
|
13
|
+
color: var(--ant-color-error);
|
|
14
|
+
background: var(--ant-color-error-bg);
|
|
15
|
+
border-color: var(--ant-color-error-border);
|
|
16
|
+
}
|
|
17
|
+
&.info {
|
|
18
|
+
color: var(--ant-color-info);
|
|
19
|
+
background: var(--ant-color-info-bg);
|
|
20
|
+
border-color: var(--ant-color-info-border);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
border-color: #ff4d4f;
|
|
6
6
|
scrollbar-color: #ffffff;
|
|
7
7
|
font-size: 14px;
|
|
8
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03),
|
|
9
|
+
0 1px 6px -1px @colorFillQuaternary, 0 2px 4px 0 rgba(0, 0, 0, 0.02);
|
|
8
10
|
.content {
|
|
9
11
|
color: rgba(0, 0, 0, 0.85);
|
|
10
12
|
background: rgba(0, 0, 0,0.65);
|
|
@@ -6,6 +6,8 @@
|
|
|
6
6
|
border-color: @colorError;
|
|
7
7
|
scrollbar-color: @colorBgContainer;
|
|
8
8
|
font-size: @fontSize;
|
|
9
|
+
box-shadow: 0 1px 2px 0 @colorFillQuaternary,
|
|
10
|
+
0 1px 6px -1px @colorFillQuaternary, 0 2px 4px 0 @colorFillQuaternary;
|
|
9
11
|
.content {
|
|
10
12
|
color: @colorText;
|
|
11
13
|
background: @colorTextSecondary;
|
|
@@ -5,11 +5,15 @@
|
|
|
5
5
|
border-color: #FF4D4F;
|
|
6
6
|
scrollbar-color: #FFFFFF;
|
|
7
7
|
font-size: 14px;
|
|
8
|
+
font-weight: 400;
|
|
9
|
+
border-radius: 4px;
|
|
8
10
|
.content {
|
|
9
11
|
color: rgba(0, 0, 0, 0.85);
|
|
10
12
|
background: rgba(0, 0, 0,0.65);
|
|
11
13
|
background-color: rgba(0,0,0,0.45);
|
|
12
14
|
border: 1px solid #D9D9D9;
|
|
13
15
|
font-size: 12px;
|
|
16
|
+
font-weight: 500;
|
|
17
|
+
border-radius: 6px;
|
|
14
18
|
}
|
|
15
19
|
}
|
|
@@ -6,11 +6,15 @@
|
|
|
6
6
|
border-color: @colorError;
|
|
7
7
|
scrollbar-color: @colorBgContainer;
|
|
8
8
|
font-size: @fontSize;
|
|
9
|
+
font-weight: @fontWeight;
|
|
10
|
+
border-radius: @borderRadius;
|
|
9
11
|
.content {
|
|
10
12
|
color: @colorText;
|
|
11
13
|
background: @colorTextSecondary;
|
|
12
14
|
background-color: @colorTextTertiary;
|
|
13
15
|
border: 1px solid @colorBorder;
|
|
14
16
|
font-size: @fontSizeSM;
|
|
17
|
+
font-weight: @fontWeightStrong;
|
|
18
|
+
border-radius: @borderRadiusMD;
|
|
15
19
|
}
|
|
16
20
|
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
@import url('~@oceanbase/design/es/theme/index.less');
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
color: @colorText;
|
|
5
|
+
background: @colorTextSecondary;
|
|
6
|
+
background-color: @colorTextTertiary;
|
|
7
|
+
border-color: @colorTextTertiary;
|
|
8
|
+
border: 1px solid @colorBorder;
|
|
9
|
+
font-size: @fontSize;
|
|
10
|
+
}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
@import '~@oceanbase/design/es/theme/index.less';
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
color: @colorText;
|
|
5
|
+
background: @colorTextSecondary;
|
|
6
|
+
background-color: @colorTextTertiary;
|
|
7
|
+
border-color: @colorTextTertiary;
|
|
8
|
+
border: 1px solid @colorBorder;
|
|
9
|
+
font-size: @fontSize;
|
|
10
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: $colorPrimary;
|
|
3
|
+
background: $colorBgContainer;
|
|
4
|
+
border-color: $colorBorder;
|
|
5
|
+
font-size: $fontSize;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.status {
|
|
9
|
+
&.success {
|
|
10
|
+
color: $colorSuccess;
|
|
11
|
+
background: $colorSuccessBg;
|
|
12
|
+
}
|
|
13
|
+
&.error {
|
|
14
|
+
color: $colorError;
|
|
15
|
+
background: $colorErrorBg;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
color: var(--ant-color-primary);
|
|
3
|
+
background: var(--ant-color-bg-container);
|
|
4
|
+
border-color: var(--ant-color-border);
|
|
5
|
+
font-size: var(--ant-font-size);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.status {
|
|
9
|
+
&.success {
|
|
10
|
+
color: var(--ant-color-success);
|
|
11
|
+
background: var(--ant-color-success-bg);
|
|
12
|
+
}
|
|
13
|
+
&.error {
|
|
14
|
+
color: var(--ant-color-error);
|
|
15
|
+
background: var(--ant-color-error-bg);
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
|
|
@@ -9,6 +9,7 @@ const useStyle1 = createStyles((
|
|
|
9
9
|
main: {
|
|
10
10
|
background: token.colorInfo,
|
|
11
11
|
fontSize: token.fontSize,
|
|
12
|
+
boxShadow: `0 1px 2px 0 ${token.colorFillQuaternary}, 0 1px 6px -1px ${token.colorFillQuaternary}, 0 2px 4px 0 ${token.colorFillQuaternary}`,
|
|
12
13
|
},
|
|
13
14
|
};
|
|
14
15
|
});
|
|
@@ -5,8 +5,8 @@ function Demo1() {
|
|
|
5
5
|
const tokenList = ['rgb(0 0 0 / 45%)', '#006AFF', '#f3f6fc'];
|
|
6
6
|
return (
|
|
7
7
|
<div>
|
|
8
|
-
<Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14 }} />
|
|
9
|
-
<Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px' }}></Button>
|
|
8
|
+
<Alert style={{ color: 'rgba(0, 0, 0, 0.85)', background: 'rgba(0, 0, 0,0.65)', backgroundColor: 'rgba(0,0,0,0.45)', border: '1px solid #d9d9d9', fontSize: 14, fontWeight: 400, borderRadius: 4 }} />
|
|
9
|
+
<Button style={{ color: '#1890ff', background: '#52c41a', backgroundColor: '#faad14', borderColor: '#ff4D4F', fontSize: '12px', fontWeight: 500, borderRadius: 6 }}></Button>
|
|
10
10
|
<Tooltip color="#ffffff" backgroundColor="#fff1f0" borderColor="#fafafa" border="1px solid #fafafa" />
|
|
11
11
|
</div>
|
|
12
12
|
);
|
|
@@ -6,8 +6,8 @@ function Demo1() {
|
|
|
6
6
|
const tokenList = [token.colorTextTertiary, token.colorInfo, token.colorBgLayout];
|
|
7
7
|
return (
|
|
8
8
|
<div>
|
|
9
|
-
<Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize }} />
|
|
10
|
-
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM }}></Button>
|
|
9
|
+
<Alert style={{ color: token.colorText, background: token.colorTextSecondary, backgroundColor: token.colorTextTertiary, border: `1px solid ${token.colorBorder}`, fontSize: token.fontSize, fontWeight: token.fontWeight, borderRadius: token.borderRadius }} />
|
|
10
|
+
<Button style={{ color: token.colorInfo, background: token.colorSuccess, backgroundColor: token.colorWarning, borderColor: token.colorError, fontSize: token.fontSizeSM, fontWeight: token.fontWeightStrong, borderRadius: token.borderRadiusMD }}></Button>
|
|
11
11
|
<Tooltip color={token.colorBgContainer} backgroundColor={token.colorErrorBg} borderColor={token.colorBgLayout} border={`1px solid ${token.colorBgLayout}`} />
|
|
12
12
|
</div>
|
|
13
13
|
);
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
const Component = () => {
|
|
4
|
+
return (
|
|
5
|
+
<div
|
|
6
|
+
style={{
|
|
7
|
+
border: `1px solid #5c6b8a`,
|
|
8
|
+
}}
|
|
9
|
+
/>
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
const getComponent = () => {
|
|
14
|
+
return (
|
|
15
|
+
<div
|
|
16
|
+
style={{
|
|
17
|
+
border: `1px solid #5c6b8a`,
|
|
18
|
+
}}
|
|
19
|
+
/>
|
|
20
|
+
);
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
export default Component;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { theme, token } from '@oceanbase/design';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
const Component = () => {
|
|
5
|
+
const { token } = theme.useToken();
|
|
6
|
+
return (
|
|
7
|
+
<div
|
|
8
|
+
style={{
|
|
9
|
+
border: `1px solid ${token.colorTextSecondary}`,
|
|
10
|
+
}}
|
|
11
|
+
/>
|
|
12
|
+
);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
const getComponent = () => {
|
|
16
|
+
return (
|
|
17
|
+
<div
|
|
18
|
+
style={{
|
|
19
|
+
border: `1px solid ${token.colorTextSecondary}`,
|
|
20
|
+
}}
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export default Component;
|