@seed-design/css 0.0.12 → 0.0.13

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.
Files changed (8) hide show
  1. package/all.css +77 -53
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/avatar.css +70 -51
  5. package/recipes/avatar.d.ts +4 -0
  6. package/recipes/avatar.mjs +8 -1
  7. package/vars/component/avatar.d.ts +41 -13
  8. package/vars/component/avatar.mjs +41 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "0.0.12",
3
+ "version": "0.0.13",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/avatar.css CHANGED
@@ -6,6 +6,8 @@
6
6
  justify-content: center;
7
7
  vertical-align: top;
8
8
  border-radius: var(--seed-radius-full);
9
+ width: var(--avatar-size);
10
+ height: var(--avatar-size);
9
11
  }
10
12
  .seed-avatar__image {
11
13
  display: block;
@@ -13,7 +15,11 @@
13
15
  height: 100%;
14
16
  object-fit: cover;
15
17
  overflow: hidden;
16
- border-radius: var(--seed-radius-full);
18
+ -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>'), var(--svg-mask-uri);
19
+ -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
20
+ -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
21
+ -webkit-mask-repeat: no-repeat;
22
+ -webkit-mask-composite: source-out;
17
23
  }
18
24
  .seed-avatar__image:not([data-loading-state='loaded']) {
19
25
  display: none;
@@ -27,6 +33,11 @@
27
33
  object-fit: cover;
28
34
  overflow: hidden;
29
35
  border-radius: var(--seed-radius-full);
36
+ -webkit-mask-image: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>'), var(--svg-mask-uri);
37
+ -webkit-mask-size: 100% 100%, var(--badge-mask-size) var(--badge-mask-size);
38
+ -webkit-mask-position: 0 0, var(--badge-mask-offset) var(--badge-mask-offset);
39
+ -webkit-mask-repeat: no-repeat;
40
+ -webkit-mask-composite: source-out;
30
41
  }
31
42
  .seed-avatar__fallback[data-loading-state='loaded'] {
32
43
  display: none;
@@ -38,86 +49,94 @@
38
49
  align-items: center;
39
50
  justify-content: center;
40
51
  z-index: 1;
41
- background: var(--seed-color-bg-layer-default);
42
- border-radius: var(--seed-radius-full);
52
+ top: var(--badge-offset);
53
+ left: var(--badge-offset);
54
+ width: var(--badge-size);
55
+ height: var(--badge-size);
43
56
  }
44
57
  .seed-avatar__root--size_20 {
45
- width: 20px;
46
- height: 20px;
58
+ --avatar-size: 20px;
59
+ --badge-mask-size: 0px;
60
+ --badge-mask-offset: 0px;
47
61
  }
48
62
  .seed-avatar__badge--size_20 {
49
- width: 10px;
50
- height: 10px;
51
- top: calc(20px / 2 + 20px / 2.828 - 10px / 2);
52
- left: calc(20px / 2 + 20px / 2.828 - 10px / 2);
63
+ display: none;
53
64
  }
54
65
  .seed-avatar__root--size_24 {
55
- width: 24px;
56
- height: 24px;
66
+ --avatar-size: 24px;
67
+ --badge-mask-size: 12px;
68
+ --badge-mask-offset: 14px;
57
69
  }
58
70
  .seed-avatar__badge--size_24 {
59
- width: 12px;
60
- height: 12px;
61
- top: calc(24px / 2 + 24px / 2.828 - 12px / 2);
62
- left: calc(24px / 2 + 24px / 2.828 - 12px / 2);
71
+ --badge-size: 10px;
72
+ --badge-offset: 15px;
63
73
  }
64
74
  .seed-avatar__root--size_36 {
65
- width: 36px;
66
- height: 36px;
75
+ --avatar-size: 36px;
76
+ --badge-mask-size: 18px;
77
+ --badge-mask-offset: 20px;
67
78
  }
68
79
  .seed-avatar__badge--size_36 {
69
- width: 16px;
70
- height: 16px;
71
- top: calc(36px / 2 + 36px / 2.828 - 16px / 2);
72
- left: calc(36px / 2 + 36px / 2.828 - 16px / 2);
80
+ --badge-size: 14px;
81
+ --badge-offset: 22px;
73
82
  }
74
83
  .seed-avatar__root--size_42 {
75
- width: 42px;
76
- height: 42px;
84
+ --avatar-size: 42px;
85
+ --badge-mask-size: 20px;
86
+ --badge-mask-offset: 24px;
77
87
  }
78
88
  .seed-avatar__badge--size_42 {
79
- width: 24px;
80
- height: 24px;
81
- top: calc(42px / 2 + 42px / 2.828 - 24px / 2);
82
- left: calc(42px / 2 + 42px / 2.828 - 24px / 2);
89
+ --badge-size: 16px;
90
+ --badge-offset: 26px;
83
91
  }
84
92
  .seed-avatar__root--size_48 {
85
- width: 48px;
86
- height: 48px;
93
+ --avatar-size: 48px;
94
+ --badge-mask-size: 22px;
95
+ --badge-mask-offset: 28px;
87
96
  }
88
97
  .seed-avatar__badge--size_48 {
89
- width: 24px;
90
- height: 24px;
91
- top: calc(48px / 2 + 48px / 2.828 - 24px / 2);
92
- left: calc(48px / 2 + 48px / 2.828 - 24px / 2);
98
+ --badge-size: 18px;
99
+ --badge-offset: 30px;
93
100
  }
94
101
  .seed-avatar__root--size_64 {
95
- width: 64px;
96
- height: 64px;
102
+ --avatar-size: 64px;
103
+ --badge-mask-size: 26px;
104
+ --badge-mask-offset: 40px;
97
105
  }
98
106
  .seed-avatar__badge--size_64 {
99
- width: 24px;
100
- height: 24px;
101
- top: calc(64px / 2 + 64px / 2.828 - 24px / 2);
102
- left: calc(64px / 2 + 64px / 2.828 - 24px / 2);
107
+ --badge-size: 22px;
108
+ --badge-offset: 42px;
103
109
  }
104
110
  .seed-avatar__root--size_80 {
105
- width: 80px;
106
- height: 80px;
111
+ --avatar-size: 80px;
112
+ --badge-mask-size: 32px;
113
+ --badge-mask-offset: 52px;
107
114
  }
108
115
  .seed-avatar__badge--size_80 {
109
- width: 24px;
110
- height: 24px;
111
- top: calc(80px / 2 + 80px / 2.828 - 24px / 2);
112
- left: calc(80px / 2 + 80px / 2.828 - 24px / 2);
116
+ --badge-size: 28px;
117
+ --badge-offset: 54px;
113
118
  }
114
119
  .seed-avatar__root--size_96 {
115
- width: 96px;
116
- height: 96px;
120
+ --avatar-size: 96px;
121
+ --badge-mask-size: 38px;
122
+ --badge-mask-offset: 62px;
117
123
  }
118
124
  .seed-avatar__badge--size_96 {
119
- width: 32px;
120
- height: 32px;
121
- top: calc(96px / 2 + 96px / 2.828 - 32px / 2);
122
- left: calc(96px / 2 + 96px / 2.828 - 32px / 2);
125
+ --badge-size: 32px;
126
+ --badge-offset: 65px;
127
+ }
128
+ .seed-avatar__root--badgeMask_none {
129
+ --svg-mask-uri: url('data:image/svg+xml;utf8,<svg />');
130
+ }
131
+ .seed-avatar__root--badgeMask_circle {
132
+ --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="16" cy="16" r="16" fill="white"/></svg>');
133
+ }
134
+ .seed-avatar__badge--badgeMask_circle {
135
+ border-radius: 9999px;
136
+ }
137
+ .seed-avatar__root--badgeMask_flower {
138
+ --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path shape-rendering="crispEdges" fill-rule="evenodd" clip-rule="evenodd" d="M29.9115 8C28.4089 5.42609 25.682 4.02087 22.8994 4.10435C21.5637 1.68348 19.0037 0 15.9985 0C12.9933 0 10.4333 1.65565 9.09762 4.10435C6.32893 4.03478 3.60197 5.42609 2.09936 8C0.596754 10.5739 0.76371 13.6348 2.19675 16C0.749797 18.3652 0.596754 21.4261 2.09936 24C3.60197 26.5739 6.32893 27.9791 9.11154 27.8957C10.4472 30.3165 13.0072 32 16.0124 32C19.0176 32 21.5776 30.3443 22.9133 27.8957C25.682 27.9652 28.4089 26.5739 29.9115 24C31.4141 21.4261 31.2472 18.3652 29.8141 16C31.2611 13.6348 31.4141 10.5739 29.9115 8Z" fill="white"/></svg>');
139
+ }
140
+ .seed-avatar__root--badgeMask_shield {
141
+ --svg-mask-uri: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M18.137 31.4527C18.1171 31.4616 18.0943 31.4721 18.0531 31.491C18.046 31.4943 18.0356 31.4994 18.0221 31.5059C17.8282 31.5996 16.9959 32.0019 16.0001 32C15.0096 32.002 14.1895 31.6075 13.986 31.5096L13.8629 31.4527C13.5452 31.3105 13.1039 31.1059 12.5795 30.8436C11.541 30.3242 10.1273 29.554 8.68691 28.5676C7.2706 27.5976 5.67543 26.3154 4.39746 24.7323C3.12739 23.159 1.92743 20.9794 1.92743 18.3179V7.77468C1.92743 6.02645 3.02031 4.4647 4.66276 3.86583L14.5747 0.25173C15.4953 -0.0839101 16.5047 -0.0839101 17.4252 0.25173L27.3372 3.86583C28.9796 4.4647 30.0725 6.02646 30.0725 7.77468V18.3179C30.0725 20.9794 28.8726 23.159 27.6025 24.7323C26.3245 26.3154 24.7294 27.5976 23.313 28.5676C21.8727 29.554 20.4589 30.3242 19.4205 30.8436C18.8961 31.1059 18.4547 31.3106 18.137 31.4527Z" fill="white"/></svg>');
123
142
  }
package/recipes/avatar.d.ts CHANGED
@@ -3,6 +3,10 @@ declare interface AvatarVariant {
3
3
  * @default 48
4
4
  */
5
5
  size: "20" | "24" | "36" | "42" | "48" | "64" | "80" | "96";
6
+ /**
7
+ * @default none
8
+ */
9
+ badgeMask: "none" | "circle" | "flower" | "shield";
6
10
  }
7
11
 
8
12
  declare type AvatarVariantMap = {
package/recipes/avatar.mjs CHANGED
@@ -20,7 +20,8 @@ const avatarSlotNames = [
20
20
  ];
21
21
 
22
22
  const defaultVariant = {
23
- "size": 48
23
+ "size": 48,
24
+ "badgeMask": "none"
24
25
  };
25
26
 
26
27
  const compoundVariants = [];
@@ -35,6 +36,12 @@ export const avatarVariantMap = {
35
36
  "64",
36
37
  "80",
37
38
  "96"
39
+ ],
40
+ "badgeMask": [
41
+ "none",
42
+ "circle",
43
+ "flower",
44
+ "shield"
38
45
  ]
39
46
  };
40
47
 
package/vars/component/avatar.d.ts CHANGED
@@ -3,10 +3,6 @@ export declare const vars: {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-full)"
6
- },
7
- "badge": {
8
- "cornerRadius": "var(--seed-radius-full)",
9
- "color": "var(--seed-color-bg-layer-default)"
10
6
  }
11
7
  }
12
8
  },
@@ -14,9 +10,6 @@ export declare const vars: {
14
10
  "enabled": {
15
11
  "root": {
16
12
  "size": "20px"
17
- },
18
- "badge": {
19
- "size": "10px"
20
13
  }
21
14
  }
22
15
  },
@@ -25,8 +18,13 @@ export declare const vars: {
25
18
  "root": {
26
19
  "size": "24px"
27
20
  },
28
- "badge": {
21
+ "badgeMask": {
22
+ "offset": "14px",
29
23
  "size": "12px"
24
+ },
25
+ "badge": {
26
+ "offset": "15px",
27
+ "size": "10px"
30
28
  }
31
29
  }
32
30
  },
@@ -35,8 +33,13 @@ export declare const vars: {
35
33
  "root": {
36
34
  "size": "36px"
37
35
  },
36
+ "badgeMask": {
37
+ "offset": "20px",
38
+ "size": "18px"
39
+ },
38
40
  "badge": {
39
- "size": "16px"
41
+ "offset": "22px",
42
+ "size": "14px"
40
43
  }
41
44
  }
42
45
  },
@@ -45,8 +48,13 @@ export declare const vars: {
45
48
  "root": {
46
49
  "size": "42px"
47
50
  },
51
+ "badgeMask": {
52
+ "offset": "24px",
53
+ "size": "20px"
54
+ },
48
55
  "badge": {
49
- "size": "24px"
56
+ "offset": "26px",
57
+ "size": "16px"
50
58
  }
51
59
  }
52
60
  },
@@ -55,8 +63,13 @@ export declare const vars: {
55
63
  "root": {
56
64
  "size": "48px"
57
65
  },
66
+ "badgeMask": {
67
+ "offset": "28px",
68
+ "size": "22px"
69
+ },
58
70
  "badge": {
59
- "size": "24px"
71
+ "offset": "30px",
72
+ "size": "18px"
60
73
  }
61
74
  }
62
75
  },
@@ -65,8 +78,13 @@ export declare const vars: {
65
78
  "root": {
66
79
  "size": "64px"
67
80
  },
81
+ "badgeMask": {
82
+ "offset": "40px",
83
+ "size": "26px"
84
+ },
68
85
  "badge": {
69
- "size": "24px"
86
+ "offset": "42px",
87
+ "size": "22px"
70
88
  }
71
89
  }
72
90
  },
@@ -75,8 +93,13 @@ export declare const vars: {
75
93
  "root": {
76
94
  "size": "80px"
77
95
  },
96
+ "badgeMask": {
97
+ "offset": "52px",
98
+ "size": "32px"
99
+ },
78
100
  "badge": {
79
- "size": "24px"
101
+ "offset": "54px",
102
+ "size": "28px"
80
103
  }
81
104
  }
82
105
  },
@@ -85,7 +108,12 @@ export declare const vars: {
85
108
  "root": {
86
109
  "size": "96px"
87
110
  },
111
+ "badgeMask": {
112
+ "offset": "62px",
113
+ "size": "38px"
114
+ },
88
115
  "badge": {
116
+ "offset": "65px",
89
117
  "size": "32px"
90
118
  }
91
119
  }
package/vars/component/avatar.mjs CHANGED
@@ -3,10 +3,6 @@ export const vars = {
3
3
  "enabled": {
4
4
  "root": {
5
5
  "cornerRadius": "var(--seed-radius-full)"
6
- },
7
- "badge": {
8
- "cornerRadius": "var(--seed-radius-full)",
9
- "color": "var(--seed-color-bg-layer-default)"
10
6
  }
11
7
  }
12
8
  },
@@ -14,9 +10,6 @@ export const vars = {
14
10
  "enabled": {
15
11
  "root": {
16
12
  "size": "20px"
17
- },
18
- "badge": {
19
- "size": "10px"
20
13
  }
21
14
  }
22
15
  },
@@ -25,8 +18,13 @@ export const vars = {
25
18
  "root": {
26
19
  "size": "24px"
27
20
  },
28
- "badge": {
21
+ "badgeMask": {
22
+ "offset": "14px",
29
23
  "size": "12px"
24
+ },
25
+ "badge": {
26
+ "offset": "15px",
27
+ "size": "10px"
30
28
  }
31
29
  }
32
30
  },
@@ -35,8 +33,13 @@ export const vars = {
35
33
  "root": {
36
34
  "size": "36px"
37
35
  },
36
+ "badgeMask": {
37
+ "offset": "20px",
38
+ "size": "18px"
39
+ },
38
40
  "badge": {
39
- "size": "16px"
41
+ "offset": "22px",
42
+ "size": "14px"
40
43
  }
41
44
  }
42
45
  },
@@ -45,8 +48,13 @@ export const vars = {
45
48
  "root": {
46
49
  "size": "42px"
47
50
  },
51
+ "badgeMask": {
52
+ "offset": "24px",
53
+ "size": "20px"
54
+ },
48
55
  "badge": {
49
- "size": "24px"
56
+ "offset": "26px",
57
+ "size": "16px"
50
58
  }
51
59
  }
52
60
  },
@@ -55,8 +63,13 @@ export const vars = {
55
63
  "root": {
56
64
  "size": "48px"
57
65
  },
66
+ "badgeMask": {
67
+ "offset": "28px",
68
+ "size": "22px"
69
+ },
58
70
  "badge": {
59
- "size": "24px"
71
+ "offset": "30px",
72
+ "size": "18px"
60
73
  }
61
74
  }
62
75
  },
@@ -65,8 +78,13 @@ export const vars = {
65
78
  "root": {
66
79
  "size": "64px"
67
80
  },
81
+ "badgeMask": {
82
+ "offset": "40px",
83
+ "size": "26px"
84
+ },
68
85
  "badge": {
69
- "size": "24px"
86
+ "offset": "42px",
87
+ "size": "22px"
70
88
  }
71
89
  }
72
90
  },
@@ -75,8 +93,13 @@ export const vars = {
75
93
  "root": {
76
94
  "size": "80px"
77
95
  },
96
+ "badgeMask": {
97
+ "offset": "52px",
98
+ "size": "32px"
99
+ },
78
100
  "badge": {
79
- "size": "24px"
101
+ "offset": "54px",
102
+ "size": "28px"
80
103
  }
81
104
  }
82
105
  },
@@ -85,7 +108,12 @@ export const vars = {
85
108
  "root": {
86
109
  "size": "96px"
87
110
  },
111
+ "badgeMask": {
112
+ "offset": "62px",
113
+ "size": "38px"
114
+ },
88
115
  "badge": {
116
+ "offset": "65px",
89
117
  "size": "32px"
90
118
  }
91
119
  }