@seed-design/css 0.0.17 → 0.0.21

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 (20) hide show
  1. package/all.css +35 -13
  2. package/all.min.css +1 -1
  3. package/package.json +7 -3
  4. package/recipes/action-button.css +9 -0
  5. package/recipes/action-chip.css +3 -1
  6. package/recipes/app-bar.css +8 -8
  7. package/recipes/bottom-sheet.css +1 -1
  8. package/recipes/control-chip.css +3 -1
  9. package/recipes/dialog.css +1 -1
  10. package/recipes/extended-fab.css +2 -0
  11. package/recipes/reaction-button.css +3 -1
  12. package/recipes/toggle-button.css +5 -0
  13. package/vars/component/bottom-sheet.d.ts +1 -1
  14. package/vars/component/bottom-sheet.mjs +1 -1
  15. package/vars/component/control-chip.d.ts +4 -2
  16. package/vars/component/control-chip.mjs +4 -2
  17. package/vars/component/dialog.d.ts +1 -1
  18. package/vars/component/dialog.mjs +1 -1
  19. package/vars/component/top-navigation.d.ts +2 -2
  20. package/vars/component/top-navigation.mjs +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "0.0.17",
3
+ "version": "0.0.21",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
@@ -18,6 +18,10 @@
18
18
  "type": "module",
19
19
  "exports": {
20
20
  "./*.css": "./*.css",
21
+ "./base.css": "./base.css",
22
+ "./base.min.css": "./base.min.css",
23
+ "./all.css": "./all.css",
24
+ "./all.min.css": "./all.min.css",
21
25
  "./recipes/*.css": "./recipes/*.css",
22
26
  "./recipes/*": {
23
27
  "types": "./recipes/*.d.ts",
@@ -54,8 +58,8 @@
54
58
  "*.css"
55
59
  ],
56
60
  "devDependencies": {
57
- "@seed-design/qvism-preset": "0.0.0",
58
- "@seed-design/qvism-cli": "0.0.0"
61
+ "@seed-design/qvism-cli": "0.0.0",
62
+ "@seed-design/qvism-preset": "0.0.0"
59
63
  },
60
64
  "publishConfig": {
61
65
  "access": "public"
package/recipes/action-button.css CHANGED
@@ -1,11 +1,14 @@
1
1
  .seed-action-button {
2
2
  display: inline-flex;
3
+ position: relative;
3
4
  box-sizing: border-box;
4
5
  align-items: center;
5
6
  justify-content: center;
6
7
  cursor: pointer;
7
8
  border: none;
8
9
  text-transform: none;
10
+ white-space: nowrap;
11
+ vertical-align: middle;
9
12
  -webkit-font-smoothing: antialiased;
10
13
  -moz-osx-font-smoothing: grayscale;
11
14
  text-decoration: none;
@@ -13,6 +16,8 @@
13
16
  font-family: inherit;
14
17
  --seed-box-flex-grow: initial;
15
18
  flex-grow: var(--seed-box-flex-grow);
19
+ --seed-box-min-width: var(--seed-box-min-width);
20
+ min-width: var(--seed-box-min-width);
16
21
  }
17
22
  .seed-action-button:is(:focus, [data-focus]) {
18
23
  outline: none;
@@ -207,6 +212,7 @@
207
212
  padding-inline: var(--seed-dimension-x3_5);
208
213
  padding-block: var(--seed-dimension-x1_5);
209
214
  font-size: var(--seed-font-size-t4);
215
+ line-height: var(--seed-line-height-t4);
210
216
  }
211
217
  .seed-action-button--size_xsmall-layout_iconOnly {
212
218
  min-width: var(--seed-dimension-x8);
@@ -218,6 +224,7 @@
218
224
  padding-inline: var(--seed-dimension-x3_5);
219
225
  padding-block: var(--seed-dimension-x2);
220
226
  font-size: var(--seed-font-size-t4);
227
+ line-height: var(--seed-line-height-t4);
221
228
  }
222
229
  .seed-action-button--size_small-layout_iconOnly {
223
230
  min-width: var(--seed-dimension-x9);
@@ -229,6 +236,7 @@
229
236
  padding-inline: var(--seed-dimension-x4);
230
237
  padding-block: var(--seed-dimension-x2_5);
231
238
  font-size: var(--seed-font-size-t4);
239
+ line-height: var(--seed-line-height-t4);
232
240
  }
233
241
  .seed-action-button--size_medium-layout_iconOnly {
234
242
  min-width: var(--seed-dimension-x10);
@@ -240,6 +248,7 @@
240
248
  padding-inline: var(--seed-dimension-x5);
241
249
  padding-block: var(--seed-dimension-x3_5);
242
250
  font-size: var(--seed-font-size-t6);
251
+ line-height: var(--seed-line-height-t6);
243
252
  }
244
253
  .seed-action-button--size_large-layout_iconOnly {
245
254
  min-width: var(--seed-dimension-x13);
package/recipes/action-chip.css CHANGED
@@ -7,6 +7,7 @@
7
7
  border: none;
8
8
  text-transform: none;
9
9
  text-align: start;
10
+ white-space: nowrap;
10
11
  -webkit-font-smoothing: antialiased;
11
12
  -moz-osx-font-smoothing: grayscale;
12
13
  flex-shrink: 0;
@@ -19,7 +20,6 @@
19
20
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
20
21
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
21
22
  --seed-icon-color: var(--seed-color-fg-neutral);
22
- --seed-count-line-height: 1px;
23
23
  --seed-count-font-weight: var(--seed-font-weight-medium);
24
24
  --seed-count-color: var(--seed-color-fg-neutral-muted);
25
25
  }
@@ -42,6 +42,7 @@
42
42
  padding-block: var(--seed-dimension-x2);
43
43
  gap: var(--seed-dimension-x1);
44
44
  font-size: var(--seed-font-size-t4);
45
+ line-height: var(--seed-line-height-t4);
45
46
  --seed-count-font-size: var(--seed-font-size-t4);
46
47
  --seed-prefix-icon-size: var(--seed-dimension-x4);
47
48
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
@@ -52,6 +53,7 @@
52
53
  padding-block: var(--seed-dimension-x1_5);
53
54
  gap: var(--seed-dimension-x1);
54
55
  font-size: var(--seed-font-size-t4);
56
+ line-height: var(--seed-line-height-t4);
55
57
  --seed-count-font-size: var(--seed-font-size-t4);
56
58
  --seed-prefix-icon-size: var(--seed-dimension-x4);
57
59
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
package/recipes/app-bar.css CHANGED
@@ -39,14 +39,14 @@
39
39
  padding-inline: var(--seed-dimension-x4);
40
40
  }
41
41
  .seed-app-bar__iconButton--theme_cupertino {
42
- width: 40px;
43
- height: 40px;
42
+ width: 44px;
43
+ height: 44px;
44
44
  }
45
45
  .seed-app-bar__iconButton--theme_cupertino:first-child {
46
- margin-left: calc(-1 * (40px - 24px) / 2);
46
+ margin-left: calc(-1 * (44px - 24px) / 2);
47
47
  }
48
48
  .seed-app-bar__iconButton--theme_cupertino:last-child {
49
- margin-right: calc(-1 * (40px - 24px) / 2);
49
+ margin-right: calc(-1 * (44px - 24px) / 2);
50
50
  }
51
51
  .seed-app-bar__icon--theme_cupertino {
52
52
  width: 24px;
@@ -57,14 +57,14 @@
57
57
  padding-inline: var(--seed-dimension-x4);
58
58
  }
59
59
  .seed-app-bar__iconButton--theme_android {
60
- width: 40px;
61
- height: 40px;
60
+ width: 44px;
61
+ height: 44px;
62
62
  }
63
63
  .seed-app-bar__iconButton--theme_android:first-child {
64
- margin-left: calc(-1 * (40px - 24px) / 2);
64
+ margin-left: calc(-1 * (44px - 24px) / 2);
65
65
  }
66
66
  .seed-app-bar__iconButton--theme_android:last-child {
67
- margin-right: calc(-1 * (40px - 24px) / 2);
67
+ margin-right: calc(-1 * (44px - 24px) / 2);
68
68
  }
69
69
  .seed-app-bar__icon--theme_android {
70
70
  width: 24px;
package/recipes/bottom-sheet.css CHANGED
@@ -41,7 +41,7 @@
41
41
  box-sizing: border-box;
42
42
  word-break: break-all;
43
43
  z-index: calc(var(--sheet-z-index) + var(--layer-index, 0));
44
- background: var(--seed-color-bg-layer-default);
44
+ background: var(--seed-color-bg-layer-floating);
45
45
  border-top-left-radius: var(--seed-radius-r6);
46
46
  border-top-right-radius: var(--seed-radius-r6);
47
47
  }
package/recipes/control-chip.css CHANGED
@@ -7,6 +7,7 @@
7
7
  border: none;
8
8
  text-transform: none;
9
9
  text-align: start;
10
+ white-space: nowrap;
10
11
  -webkit-font-smoothing: antialiased;
11
12
  -moz-osx-font-smoothing: grayscale;
12
13
  flex-shrink: 0;
@@ -18,7 +19,6 @@
18
19
  --seed-prefix-icon-color: var(--seed-color-fg-neutral);
19
20
  --seed-suffix-icon-color: var(--seed-color-fg-neutral-subtle);
20
21
  --seed-icon-color: var(--seed-color-fg-neutral);
21
- --seed-count-line-height: 1px;
22
22
  --seed-count-font-weight: var(--seed-font-weight-medium);
23
23
  --seed-count-color: var(--seed-color-fg-neutral-muted);
24
24
  }
@@ -54,6 +54,7 @@
54
54
  padding-block: var(--seed-dimension-x2);
55
55
  gap: var(--seed-dimension-x1);
56
56
  font-size: var(--seed-font-size-t4);
57
+ line-height: var(--seed-line-height-t4);
57
58
  --seed-prefix-icon-size: var(--seed-dimension-x4);
58
59
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
59
60
  --seed-icon-size: var(--seed-dimension-x4);
@@ -64,6 +65,7 @@
64
65
  padding-block: var(--seed-dimension-x1_5);
65
66
  gap: var(--seed-dimension-x1);
66
67
  font-size: var(--seed-font-size-t4);
68
+ line-height: var(--seed-line-height-t4);
67
69
  --seed-prefix-icon-size: var(--seed-dimension-x4);
68
70
  --seed-suffix-icon-size: var(--seed-dimension-x3_5);
69
71
  --seed-icon-size: var(--seed-dimension-x4);
package/recipes/dialog.css CHANGED
@@ -41,7 +41,7 @@
41
41
  box-sizing: border-box;
42
42
  word-break: break-all;
43
43
  z-index: calc(var(--dialog-z-index) + var(--layer-index, 0));
44
- background: var(--seed-color-bg-layer-default);
44
+ background: var(--seed-color-bg-layer-floating);
45
45
  max-width: 272px;
46
46
  margin: auto var(--seed-dimension-x8);
47
47
  border-radius: var(--seed-radius-r5);
package/recipes/extended-fab.css CHANGED
@@ -6,6 +6,8 @@
6
6
  cursor: pointer;
7
7
  border: none;
8
8
  text-transform: none;
9
+ white-space: nowrap;
10
+ vertical-align: middle;
9
11
  -webkit-font-smoothing: antialiased;
10
12
  -moz-osx-font-smoothing: grayscale;
11
13
  text-decoration: none;
package/recipes/reaction-button.css CHANGED
@@ -1,11 +1,14 @@
1
1
  .seed-reaction-button {
2
2
  display: inline-flex;
3
+ position: relative;
3
4
  box-sizing: border-box;
4
5
  align-items: center;
5
6
  justify-content: center;
6
7
  cursor: pointer;
7
8
  border: none;
8
9
  text-transform: none;
10
+ white-space: nowrap;
11
+ vertical-align: middle;
9
12
  -webkit-font-smoothing: antialiased;
10
13
  -moz-osx-font-smoothing: grayscale;
11
14
  text-decoration: none;
@@ -22,7 +25,6 @@
22
25
  color: var(--seed-color-fg-neutral);
23
26
  --track-color: var(--seed-color-palette-gray-500);
24
27
  --range-color: var(--seed-color-fg-neutral);
25
- --seed-count-line-height: 1px;
26
28
  --seed-count-font-weight: var(--seed-font-weight-bold);
27
29
  --seed-count-color: var(--seed-color-fg-neutral);
28
30
  }
package/recipes/toggle-button.css CHANGED
@@ -1,11 +1,14 @@
1
1
  .seed-toggle-button {
2
2
  display: inline-flex;
3
+ position: relative;
3
4
  box-sizing: border-box;
4
5
  align-items: center;
5
6
  justify-content: center;
6
7
  cursor: pointer;
7
8
  border: none;
8
9
  text-transform: none;
10
+ white-space: nowrap;
11
+ vertical-align: middle;
9
12
  -webkit-font-smoothing: antialiased;
10
13
  -moz-osx-font-smoothing: grayscale;
11
14
  text-decoration: none;
@@ -101,6 +104,7 @@
101
104
  padding-inline: var(--seed-dimension-x3_5);
102
105
  padding-block: var(--seed-dimension-x1_5);
103
106
  font-size: var(--seed-font-size-t4);
107
+ line-height: var(--seed-line-height-t4);
104
108
  --size: 14px;
105
109
  --thickness: 2px;
106
110
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
@@ -113,6 +117,7 @@
113
117
  padding-inline: var(--seed-dimension-x4);
114
118
  padding-block: var(--seed-dimension-x2);
115
119
  font-size: var(--seed-font-size-t4);
120
+ line-height: var(--seed-line-height-t4);
116
121
  --size: 14px;
117
122
  --thickness: 2px;
118
123
  --seed-prefix-icon-size: var(--seed-dimension-x3_5);
package/vars/component/bottom-sheet.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const vars: {
11
11
  "exitOpacity": "0"
12
12
  },
13
13
  "content": {
14
- "color": "var(--seed-color-bg-layer-default)",
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
15
  "maxWidth": "640px",
16
16
  "topCornerRadius": "var(--seed-radius-r6)",
17
17
  "enterDuration": "var(--seed-duration-d6)",
package/vars/component/bottom-sheet.mjs CHANGED
@@ -11,7 +11,7 @@ export const vars = {
11
11
  "exitOpacity": "0"
12
12
  },
13
13
  "content": {
14
- "color": "var(--seed-color-bg-layer-default)",
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
15
  "maxWidth": "640px",
16
16
  "topCornerRadius": "var(--seed-radius-r6)",
17
17
  "enterDuration": "var(--seed-duration-d6)",
package/vars/component/control-chip.d.ts CHANGED
@@ -85,7 +85,8 @@ export declare const vars: {
85
85
  "gap": "var(--seed-dimension-x1)"
86
86
  },
87
87
  "label": {
88
- "fontSize": "var(--seed-font-size-t4)"
88
+ "fontSize": "var(--seed-font-size-t4)",
89
+ "lineHeight": "var(--seed-line-height-t4)"
89
90
  },
90
91
  "prefixIcon": {
91
92
  "size": "var(--seed-dimension-x4)"
@@ -106,7 +107,8 @@ export declare const vars: {
106
107
  "gap": "var(--seed-dimension-x1)"
107
108
  },
108
109
  "label": {
109
- "fontSize": "var(--seed-font-size-t4)"
110
+ "fontSize": "var(--seed-font-size-t4)",
111
+ "lineHeight": "var(--seed-line-height-t4)"
110
112
  },
111
113
  "prefixIcon": {
112
114
  "size": "var(--seed-dimension-x4)"
package/vars/component/control-chip.mjs CHANGED
@@ -85,7 +85,8 @@ export const vars = {
85
85
  "gap": "var(--seed-dimension-x1)"
86
86
  },
87
87
  "label": {
88
- "fontSize": "var(--seed-font-size-t4)"
88
+ "fontSize": "var(--seed-font-size-t4)",
89
+ "lineHeight": "var(--seed-line-height-t4)"
89
90
  },
90
91
  "prefixIcon": {
91
92
  "size": "var(--seed-dimension-x4)"
@@ -106,7 +107,8 @@ export const vars = {
106
107
  "gap": "var(--seed-dimension-x1)"
107
108
  },
108
109
  "label": {
109
- "fontSize": "var(--seed-font-size-t4)"
110
+ "fontSize": "var(--seed-font-size-t4)",
111
+ "lineHeight": "var(--seed-line-height-t4)"
110
112
  },
111
113
  "prefixIcon": {
112
114
  "size": "var(--seed-dimension-x4)"
package/vars/component/dialog.d.ts CHANGED
@@ -11,7 +11,7 @@ export declare const vars: {
11
11
  "exitOpacity": "0"
12
12
  },
13
13
  "content": {
14
- "color": "var(--seed-color-bg-layer-default)",
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
15
  "cornerRadius": "var(--seed-radius-r5)",
16
16
  "marginX": "var(--seed-dimension-x8)",
17
17
  "marginY": "var(--seed-dimension-x16)",
package/vars/component/dialog.mjs CHANGED
@@ -11,7 +11,7 @@ export const vars = {
11
11
  "exitOpacity": "0"
12
12
  },
13
13
  "content": {
14
- "color": "var(--seed-color-bg-layer-default)",
14
+ "color": "var(--seed-color-bg-layer-floating)",
15
15
  "cornerRadius": "var(--seed-radius-r5)",
16
16
  "marginX": "var(--seed-dimension-x8)",
17
17
  "marginY": "var(--seed-dimension-x16)",
package/vars/component/top-navigation.d.ts CHANGED
@@ -7,7 +7,7 @@ export declare const vars: {
7
7
  },
8
8
  "icon": {
9
9
  "size": "24px",
10
- "targetSize": "40px"
10
+ "targetSize": "44px"
11
11
  }
12
12
  }
13
13
  },
@@ -19,7 +19,7 @@ export declare const vars: {
19
19
  },
20
20
  "icon": {
21
21
  "size": "24px",
22
- "targetSize": "40px"
22
+ "targetSize": "44px"
23
23
  }
24
24
  }
25
25
  },
package/vars/component/top-navigation.mjs CHANGED
@@ -7,7 +7,7 @@ export const vars = {
7
7
  },
8
8
  "icon": {
9
9
  "size": "24px",
10
- "targetSize": "40px"
10
+ "targetSize": "44px"
11
11
  }
12
12
  }
13
13
  },
@@ -19,7 +19,7 @@ export const vars = {
19
19
  },
20
20
  "icon": {
21
21
  "size": "24px",
22
- "targetSize": "40px"
22
+ "targetSize": "44px"
23
23
  }
24
24
  }
25
25
  },