@pareto-engineering/design-system 2.0.0-alpha.3 → 2.0.0-alpha.4
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.
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1em 1em .84em;
|
|
6
6
|
$compact-padding: .6em .6em .48em;
|
|
7
|
-
$default-border-radius:2em;
|
|
8
7
|
$default-color:primary;
|
|
9
8
|
$font-weight:bold;
|
|
10
9
|
|
|
11
10
|
.#{bem.$base}.button {
|
|
12
11
|
background: var(--x, var(--#{$default-color}));
|
|
13
12
|
border: transparent;
|
|
14
|
-
|
|
15
|
-
border-radius: $default-border-radius;
|
|
13
|
+
border-radius: var(--theme-border-radius);
|
|
16
14
|
color: var(--on-x, var(--on-#{$default-color}));
|
|
17
15
|
font-weight: 600;
|
|
18
16
|
padding: $default-padding;
|
|
@@ -24,6 +22,9 @@ $font-weight:bold;
|
|
|
24
22
|
&:hover {
|
|
25
23
|
background: var(--light-x, var(--light-#{$default-color}));
|
|
26
24
|
}
|
|
25
|
+
&:focus {
|
|
26
|
+
background: var(--dark-x, var(--dark-#{$default-color}));
|
|
27
|
+
}
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
|
|
@@ -36,21 +37,28 @@ $font-weight:bold;
|
|
|
36
37
|
border: 1px solid var(--x, var(--#{$default-color}));
|
|
37
38
|
color: var(--x, var(--#{$default-color}));
|
|
38
39
|
|
|
39
|
-
&:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus,
|
|
42
|
+
&:disabled{
|
|
43
|
+
background: transparent;
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
+
&:not(:disabled) {
|
|
46
47
|
&:hover {
|
|
47
|
-
|
|
48
|
+
border: 1px solid var(--light-x, var(--light-#{$default-color}));
|
|
49
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
&:focus {
|
|
51
|
-
|
|
53
|
+
border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
|
|
54
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
52
55
|
}
|
|
53
56
|
}
|
|
57
|
+
|
|
58
|
+
&:disabled{
|
|
59
|
+
border: 1px solid var(--x, var(--#{$default-color}));
|
|
60
|
+
color: var(--x, var(--#{$default-color}));
|
|
61
|
+
}
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
&.#{bem.$modifier-simple} {
|
|
@@ -58,19 +66,30 @@ $font-weight:bold;
|
|
|
58
66
|
border: 1px solid transparent;
|
|
59
67
|
color: var(--x, var(--#{$default-color}));
|
|
60
68
|
|
|
69
|
+
&:disabled,
|
|
70
|
+
&:hover,
|
|
71
|
+
&:focus {
|
|
72
|
+
background: transparent;
|
|
73
|
+
}
|
|
74
|
+
|
|
61
75
|
&:not(:disabled) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
&:hover {
|
|
77
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:focus {
|
|
81
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:disabled {
|
|
86
|
+
color: var(--x, var(--#{$default-color}));
|
|
68
87
|
}
|
|
69
88
|
}
|
|
70
89
|
|
|
71
90
|
&:disabled {
|
|
72
|
-
background: var(--
|
|
73
|
-
filter: brightness(
|
|
91
|
+
background: var(--x);
|
|
92
|
+
filter: brightness(125%);
|
|
74
93
|
}
|
|
75
94
|
}
|
|
76
95
|
|
|
@@ -4,15 +4,13 @@
|
|
|
4
4
|
|
|
5
5
|
$default-padding: 1em 1em .84em;
|
|
6
6
|
$compact-padding: .6em .6em .48em;
|
|
7
|
-
$default-border-radius:2em;
|
|
8
7
|
$default-color:primary;
|
|
9
8
|
$font-weight:bold;
|
|
10
9
|
|
|
11
10
|
.#{bem.$base}.button {
|
|
12
11
|
background: var(--x, var(--#{$default-color}));
|
|
13
12
|
border: transparent;
|
|
14
|
-
|
|
15
|
-
border-radius: $default-border-radius;
|
|
13
|
+
border-radius: var(--theme-border-radius);
|
|
16
14
|
color: var(--on-x, var(--on-#{$default-color}));
|
|
17
15
|
font-weight: 600;
|
|
18
16
|
padding: $default-padding;
|
|
@@ -24,6 +22,9 @@ $font-weight:bold;
|
|
|
24
22
|
&:hover {
|
|
25
23
|
background: var(--light-x, var(--light-#{$default-color}));
|
|
26
24
|
}
|
|
25
|
+
&:focus {
|
|
26
|
+
background: var(--dark-x, var(--dark-#{$default-color}));
|
|
27
|
+
}
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
|
|
@@ -36,21 +37,28 @@ $font-weight:bold;
|
|
|
36
37
|
border: 1px solid var(--x, var(--#{$default-color}));
|
|
37
38
|
color: var(--x, var(--#{$default-color}));
|
|
38
39
|
|
|
39
|
-
&:
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
}
|
|
40
|
+
&:hover,
|
|
41
|
+
&:focus,
|
|
42
|
+
&:disabled{
|
|
43
|
+
background: transparent;
|
|
44
|
+
}
|
|
45
45
|
|
|
46
|
+
&:not(:disabled) {
|
|
46
47
|
&:hover {
|
|
47
|
-
|
|
48
|
+
border: 1px solid var(--light-x, var(--light-#{$default-color}));
|
|
49
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
&:focus {
|
|
51
|
-
|
|
53
|
+
border: 1px solid var(--dark-x, var(--dark-#{$default-color}));
|
|
54
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
52
55
|
}
|
|
53
56
|
}
|
|
57
|
+
|
|
58
|
+
&:disabled{
|
|
59
|
+
border: 1px solid var(--x, var(--#{$default-color}));
|
|
60
|
+
color: var(--x, var(--#{$default-color}));
|
|
61
|
+
}
|
|
54
62
|
}
|
|
55
63
|
|
|
56
64
|
&.#{bem.$modifier-simple} {
|
|
@@ -58,19 +66,30 @@ $font-weight:bold;
|
|
|
58
66
|
border: 1px solid transparent;
|
|
59
67
|
color: var(--x, var(--#{$default-color}));
|
|
60
68
|
|
|
69
|
+
&:disabled,
|
|
70
|
+
&:hover,
|
|
71
|
+
&:focus {
|
|
72
|
+
background: transparent;
|
|
73
|
+
}
|
|
74
|
+
|
|
61
75
|
&:not(:disabled) {
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
76
|
+
&:hover {
|
|
77
|
+
color: var(--light-x, var(--light-#{$default-color}));
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
&:focus {
|
|
81
|
+
color: var(--dark-x, var(--dark-#{$default-color}));
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
&:disabled {
|
|
86
|
+
color: var(--x, var(--#{$default-color}));
|
|
68
87
|
}
|
|
69
88
|
}
|
|
70
89
|
|
|
71
90
|
&:disabled {
|
|
72
|
-
background: var(--
|
|
73
|
-
filter: brightness(
|
|
91
|
+
background: var(--x);
|
|
92
|
+
filter: brightness(125%);
|
|
74
93
|
}
|
|
75
94
|
}
|
|
76
95
|
|