@snack-uikit/counter 0.6.2 → 0.6.3-preview-8898cdde.0
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.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
.counter{
|
|
2
2
|
display:inline-flex;
|
|
3
|
+
flex-shrink:0;
|
|
3
4
|
align-items:center;
|
|
4
5
|
justify-content:center;
|
|
5
6
|
box-sizing:border-box;
|
|
@@ -10,39 +11,39 @@
|
|
|
10
11
|
.counter[data-color=accent][data-appearance=primary]{
|
|
11
12
|
color:var(--sys-primary-on-accent, #fdfbff);
|
|
12
13
|
background-color:var(--sys-primary-accent-default, #794ed3);
|
|
13
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
14
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
14
15
|
}
|
|
15
16
|
.counter[data-color=accent][data-appearance=neutral]{
|
|
16
17
|
color:var(--sys-neutral-on-accent, #ffffff);
|
|
17
|
-
background-color:var(--sys-neutral-accent-default, #
|
|
18
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
18
|
+
background-color:var(--sys-neutral-accent-default, #787b8a);
|
|
19
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
19
20
|
}
|
|
20
21
|
.counter[data-color=accent][data-appearance=red]{
|
|
21
22
|
color:var(--sys-red-on-accent, #fffbf9);
|
|
22
|
-
background-color:var(--sys-red-accent-default, #
|
|
23
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
23
|
+
background-color:var(--sys-red-accent-default, #cb3f3e);
|
|
24
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
24
25
|
}
|
|
25
26
|
.counter[data-color=decor][data-appearance=primary]{
|
|
26
27
|
color:var(--sys-primary-text-main, #382a62);
|
|
27
28
|
background-color:var(--sys-primary-decor-default, #ebdefd);
|
|
28
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
29
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
29
30
|
}
|
|
30
31
|
.counter[data-color=decor][data-appearance=neutral]{
|
|
31
|
-
color:var(--sys-neutral-text-main, #
|
|
32
|
-
background-color:var(--sys-neutral-decor-default, #
|
|
33
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
32
|
+
color:var(--sys-neutral-text-main, #41424e);
|
|
33
|
+
background-color:var(--sys-neutral-decor-default, #dde0ea);
|
|
34
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
34
35
|
}
|
|
35
36
|
.counter[data-color=decor][data-appearance=red]{
|
|
36
|
-
color:var(--sys-red-text-main, #
|
|
37
|
+
color:var(--sys-red-text-main, #7a2d2d);
|
|
37
38
|
background-color:var(--sys-red-decor-default, #fdd6cd);
|
|
38
|
-
border-color:var(--sys-neutral-background1-level, #
|
|
39
|
+
border-color:var(--sys-neutral-background1-level, #fdfdfd);
|
|
39
40
|
}
|
|
40
41
|
.counter[data-size=s]{
|
|
41
42
|
font-family:var(--sans-label-s-font-family, SB Sans Interface);
|
|
42
43
|
font-weight:var(--sans-label-s-font-weight, Semibold);
|
|
43
44
|
line-height:var(--sans-label-s-line-height, 14px);
|
|
44
45
|
font-size:var(--sans-label-s-font-size, 11px);
|
|
45
|
-
letter-spacing:var(--sans-label-s-letter-spacing,
|
|
46
|
+
letter-spacing:var(--sans-label-s-letter-spacing, 0px);
|
|
46
47
|
paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
|
|
47
48
|
border-radius:var(--radius-counter-s, 8px);
|
|
48
49
|
height:var(--size-counter-s-height, 16px);
|
|
@@ -56,7 +57,7 @@
|
|
|
56
57
|
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
57
58
|
line-height:var(--sans-label-l-line-height, 20px);
|
|
58
59
|
font-size:var(--sans-label-l-font-size, 14px);
|
|
59
|
-
letter-spacing:var(--sans-label-l-letter-spacing,
|
|
60
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
60
61
|
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
61
62
|
}
|
|
62
63
|
.counter[data-size=s] .key{
|
|
@@ -64,7 +65,7 @@
|
|
|
64
65
|
font-weight:var(--sans-label-s-font-weight, Semibold);
|
|
65
66
|
line-height:var(--sans-label-s-line-height, 14px);
|
|
66
67
|
font-size:var(--sans-label-s-font-size, 11px);
|
|
67
|
-
letter-spacing:var(--sans-label-s-letter-spacing,
|
|
68
|
+
letter-spacing:var(--sans-label-s-letter-spacing, 0px);
|
|
68
69
|
paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
|
|
69
70
|
}
|
|
70
71
|
.counter[data-size=m]{
|
|
@@ -72,7 +73,7 @@
|
|
|
72
73
|
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
73
74
|
line-height:var(--sans-label-l-line-height, 20px);
|
|
74
75
|
font-size:var(--sans-label-l-font-size, 14px);
|
|
75
|
-
letter-spacing:var(--sans-label-l-letter-spacing,
|
|
76
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
76
77
|
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
77
78
|
border-radius:var(--radius-counter-m, 16px);
|
|
78
79
|
height:var(--size-counter-m-height, 24px);
|
|
@@ -86,7 +87,7 @@
|
|
|
86
87
|
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
87
88
|
line-height:var(--sans-label-l-line-height, 20px);
|
|
88
89
|
font-size:var(--sans-label-l-font-size, 14px);
|
|
89
|
-
letter-spacing:var(--sans-label-l-letter-spacing,
|
|
90
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
90
91
|
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
91
92
|
}
|
|
92
93
|
.counter[data-size=m] .key{
|
|
@@ -94,6 +95,6 @@
|
|
|
94
95
|
font-weight:var(--sans-label-l-font-weight, Semibold);
|
|
95
96
|
line-height:var(--sans-label-l-line-height, 20px);
|
|
96
97
|
font-size:var(--sans-label-l-font-size, 14px);
|
|
97
|
-
letter-spacing:var(--sans-label-l-letter-spacing,
|
|
98
|
+
letter-spacing:var(--sans-label-l-letter-spacing, 0px);
|
|
98
99
|
paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
|
|
99
100
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Counter",
|
|
7
|
-
"version": "0.6.
|
|
7
|
+
"version": "0.6.3-preview-8898cdde.0",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -35,5 +35,5 @@
|
|
|
35
35
|
"@snack-uikit/utils": "3.3.0",
|
|
36
36
|
"classnames": "2.3.2"
|
|
37
37
|
},
|
|
38
|
-
"gitHead": "
|
|
38
|
+
"gitHead": "a0351f376ac28462b847d1bf99ad3f7ba7a1d0cd"
|
|
39
39
|
}
|
|
@@ -7,27 +7,28 @@ $colors: 'accent', 'decor';
|
|
|
7
7
|
|
|
8
8
|
$value-typography: (
|
|
9
9
|
s: $sans-label-s,
|
|
10
|
-
m: $sans-label-l
|
|
10
|
+
m: $sans-label-l,
|
|
11
11
|
);
|
|
12
12
|
$plus-typography: (
|
|
13
13
|
s: $sans-label-l,
|
|
14
|
-
m: $sans-label-l
|
|
14
|
+
m: $sans-label-l,
|
|
15
15
|
);
|
|
16
16
|
$key-typography: (
|
|
17
17
|
s: $sans-label-s,
|
|
18
|
-
m: $sans-label-l
|
|
18
|
+
m: $sans-label-l,
|
|
19
19
|
);
|
|
20
20
|
$text-color: (
|
|
21
21
|
accent: 'on-accent',
|
|
22
|
-
decor: 'text-main'
|
|
22
|
+
decor: 'text-main',
|
|
23
23
|
);
|
|
24
24
|
$bg-color: (
|
|
25
25
|
accent: 'accent-default',
|
|
26
|
-
decor: 'decor-default'
|
|
26
|
+
decor: 'decor-default',
|
|
27
27
|
);
|
|
28
28
|
|
|
29
29
|
.counter {
|
|
30
30
|
display: inline-flex;
|
|
31
|
+
flex-shrink: 0;
|
|
31
32
|
align-items: center;
|
|
32
33
|
justify-content: center;
|
|
33
34
|
|