@seed-design/css 0.1.8 → 0.1.9

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 (11) hide show
  1. package/all.css +74 -25
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/chip.css +1 -0
  5. package/recipes/control-chip.css +1 -0
  6. package/recipes/select-box.css +1 -0
  7. package/recipes/switch.css +60 -23
  8. package/recipes/switch.d.ts +2 -2
  9. package/recipes/switch.mjs +4 -3
  10. package/vars/component/switch.d.ts +41 -7
  11. package/vars/component/switch.mjs +41 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/chip.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .seed-chip__root {
2
+ position: relative;
2
3
  display: inline-flex;
3
4
  justify-content: center;
4
5
  align-items: center;
package/recipes/control-chip.css CHANGED
@@ -1,4 +1,5 @@
1
1
  .seed-control-chip {
2
+ position: relative;
2
3
  display: inline-flex;
3
4
  justify-content: center;
4
5
  align-items: center;
package/recipes/select-box.css CHANGED
@@ -22,6 +22,7 @@
22
22
  .seed-select-box__content {
23
23
  display: flex;
24
24
  flex-direction: column;
25
+ flex-grow: 1;
25
26
  gap: var(--seed-dimension-x0_5);
26
27
  }
27
28
  .seed-select-box__checkboxControl {
package/recipes/switch.css CHANGED
@@ -6,11 +6,9 @@
6
6
  position: relative;
7
7
  vertical-align: top;
8
8
  isolation: isolate;
9
- opacity: 1;
10
9
  cursor: pointer;
11
10
  }
12
11
  .seed-switch__root:is(:disabled, [disabled], [data-disabled]) {
13
- opacity: 0.38;
14
12
  cursor: not-allowed;
15
13
  }
16
14
  .seed-switch__control {
@@ -21,6 +19,9 @@
21
19
  background: var(--seed-color-palette-gray-600);
22
20
  transition: background-color 50ms cubic-bezier(0.35, 0, 0.35, 1) 20ms;
23
21
  }
22
+ .seed-switch__control:is(:disabled, [disabled], [data-disabled]) {
23
+ opacity: 0.38;
24
+ }
24
25
  .seed-switch__control:is(:checked, [data-checked]) {
25
26
  background: var(--seed-color-bg-brand-solid);
26
27
  }
@@ -29,42 +30,78 @@
29
30
  background: var(--seed-color-palette-static-white);
30
31
  transition: transform 150ms cubic-bezier(0.35, 0, 0.35, 1);
31
32
  }
32
- .seed-switch__root--size_medium {
33
- min-height: 32px;
34
- }
35
- .seed-switch__control--size_medium {
36
- min-inline-size: 52px;
37
- min-block-size: 32px;
38
- padding: 2px 2px;
39
- }
40
- .seed-switch__thumb--size_medium {
41
- width: 28px;
42
- height: 28px;
43
- box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
33
+ .seed-switch__label {
34
+ font-weight: var(--seed-font-weight-medium);
35
+ color: var(--seed-color-fg-neutral);
44
36
  }
45
- .seed-switch__thumb--size_medium:is(:checked, [data-checked]) {
46
- transform: translateX(calc(52px - 32px));
37
+ .seed-switch__label:is(:disabled, [disabled], [data-disabled]) {
38
+ color: var(--seed-color-fg-disabled);
47
39
  }
48
- .seed-switch__root--size_small {
40
+ .seed-switch__root--size_16 {
49
41
  min-height: 24px;
50
- gap: var(--seed-dimension-x2);
42
+ gap: var(--seed-dimension-x1_5);
51
43
  }
52
- .seed-switch__control--size_small {
44
+ .seed-switch__control--size_16 {
53
45
  min-inline-size: 26px;
54
46
  min-block-size: 16px;
55
47
  padding: 2px 2px;
56
48
  margin: calc((24px - 16px) / 2) 0;
57
49
  }
58
- .seed-switch__thumb--size_small {
50
+ .seed-switch__thumb--size_16 {
59
51
  width: 12px;
60
52
  height: 12px;
61
53
  }
62
- .seed-switch__thumb--size_small:is(:checked, [data-checked]) {
54
+ .seed-switch__thumb--size_16:is(:checked, [data-checked]) {
63
55
  transform: translateX(calc(26px - 16px));
64
56
  }
65
- .seed-switch__label--size_small {
57
+ .seed-switch__label--size_16 {
58
+ font-size: var(--seed-font-size-t3);
59
+ line-height: var(--seed-line-height-t3);
60
+ margin-top: calc(12px - 0.5625rem);
61
+ }
62
+ .seed-switch__root--size_24 {
63
+ min-height: 24px;
64
+ gap: var(--seed-dimension-x2);
65
+ }
66
+ .seed-switch__control--size_24 {
67
+ min-inline-size: 38px;
68
+ min-block-size: 24px;
69
+ padding: 2px 2px;
70
+ margin: calc((24px - 24px) / 2) 0;
71
+ }
72
+ .seed-switch__thumb--size_24 {
73
+ width: 20px;
74
+ height: 20px;
75
+ box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
76
+ }
77
+ .seed-switch__thumb--size_24:is(:checked, [data-checked]) {
78
+ transform: translateX(calc(38px - 24px));
79
+ }
80
+ .seed-switch__label--size_24 {
66
81
  font-size: var(--seed-font-size-t4);
67
82
  line-height: var(--seed-line-height-t4);
68
- font-weight: var(--seed-font-weight-regular);
69
83
  margin-top: calc(12px - 0.59375rem);
84
+ }
85
+ .seed-switch__root--size_32 {
86
+ min-height: 32px;
87
+ gap: var(--seed-dimension-x2_5);
88
+ }
89
+ .seed-switch__control--size_32 {
90
+ min-inline-size: 52px;
91
+ min-block-size: 32px;
92
+ padding: 2px 2px;
93
+ margin: calc((32px - 32px) / 2) 0;
94
+ }
95
+ .seed-switch__thumb--size_32 {
96
+ width: 28px;
97
+ height: 28px;
98
+ box-shadow: 0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f;
99
+ }
100
+ .seed-switch__thumb--size_32:is(:checked, [data-checked]) {
101
+ transform: translateX(calc(52px - 32px));
102
+ }
103
+ .seed-switch__label--size_32 {
104
+ font-size: var(--seed-font-size-t5);
105
+ line-height: var(--seed-line-height-t5);
106
+ margin-top: calc(16px - 0.6875rem);
70
107
  }
package/recipes/switch.d.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  declare interface SwitchVariant {
2
2
  /**
3
- * @default medium
3
+ * @default 32
4
4
  */
5
- size: "medium" | "small";
5
+ size: "16" | "24" | "32";
6
6
  }
7
7
 
8
8
  declare type SwitchVariantMap = {
package/recipes/switch.mjs CHANGED
@@ -21,15 +21,16 @@ const switchSlotNames = [
21
21
  ];
22
22
 
23
23
  const defaultVariant = {
24
- "size": "medium"
24
+ "size": 32
25
25
  };
26
26
 
27
27
  const compoundVariants = [];
28
28
 
29
29
  export const switchVariantMap = {
30
30
  "size": [
31
- "medium",
32
- "small"
31
+ "16",
32
+ "24",
33
+ "32"
33
34
  ]
34
35
  };
35
36
 
package/vars/component/switch.d.ts CHANGED
@@ -8,6 +8,10 @@ export declare const vars: {
8
8
  "thumb": {
9
9
  "color": "var(--seed-color-palette-static-white)",
10
10
  "cornerRadius": "var(--seed-radius-full)"
11
+ },
12
+ "label": {
13
+ "color": "var(--seed-color-fg-neutral)",
14
+ "fontWeight": "var(--seed-font-weight-medium)"
11
15
  }
12
16
  },
13
17
  "enabledSelected": {
@@ -16,15 +20,19 @@ export declare const vars: {
16
20
  }
17
21
  },
18
22
  "disabled": {
19
- "root": {
23
+ "control": {
20
24
  "opacity": "0.38"
25
+ },
26
+ "label": {
27
+ "color": "var(--seed-color-fg-disabled)"
21
28
  }
22
29
  }
23
30
  },
24
- "sizeMedium": {
31
+ "size32": {
25
32
  "enabled": {
26
33
  "root": {
27
- "height": "32px"
34
+ "height": "32px",
35
+ "gap": "var(--seed-dimension-x2_5)"
28
36
  },
29
37
  "control": {
30
38
  "height": "32px",
@@ -36,15 +44,42 @@ export declare const vars: {
36
44
  "height": "28px",
37
45
  "width": "28px",
38
46
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
+ },
48
+ "label": {
49
+ "fontSize": "var(--seed-font-size-t5)",
50
+ "lineHeight": "var(--seed-line-height-t5)"
39
51
  }
40
52
  }
41
53
  },
42
- "sizeSmall": {
54
+ "size24": {
43
55
  "enabled": {
44
56
  "root": {
45
57
  "height": "24px",
46
58
  "gap": "var(--seed-dimension-x2)"
47
59
  },
60
+ "control": {
61
+ "height": "24px",
62
+ "width": "38px",
63
+ "paddingX": "2px",
64
+ "paddingY": "2px"
65
+ },
66
+ "thumb": {
67
+ "height": "20px",
68
+ "width": "20px",
69
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
70
+ },
71
+ "label": {
72
+ "fontSize": "var(--seed-font-size-t4)",
73
+ "lineHeight": "var(--seed-line-height-t4)"
74
+ }
75
+ }
76
+ },
77
+ "size16": {
78
+ "enabled": {
79
+ "root": {
80
+ "height": "24px",
81
+ "gap": "var(--seed-dimension-x1_5)"
82
+ },
48
83
  "control": {
49
84
  "height": "16px",
50
85
  "width": "26px",
@@ -56,9 +91,8 @@ export declare const vars: {
56
91
  "width": "12px"
57
92
  },
58
93
  "label": {
59
- "fontSize": "var(--seed-font-size-t4)",
60
- "lineHeight": "var(--seed-line-height-t4)",
61
- "fontWeight": "var(--seed-font-weight-regular)"
94
+ "fontSize": "var(--seed-font-size-t3)",
95
+ "lineHeight": "var(--seed-line-height-t3)"
62
96
  }
63
97
  }
64
98
  }
package/vars/component/switch.mjs CHANGED
@@ -8,6 +8,10 @@ export const vars = {
8
8
  "thumb": {
9
9
  "color": "var(--seed-color-palette-static-white)",
10
10
  "cornerRadius": "var(--seed-radius-full)"
11
+ },
12
+ "label": {
13
+ "color": "var(--seed-color-fg-neutral)",
14
+ "fontWeight": "var(--seed-font-weight-medium)"
11
15
  }
12
16
  },
13
17
  "enabledSelected": {
@@ -16,15 +20,19 @@ export const vars = {
16
20
  }
17
21
  },
18
22
  "disabled": {
19
- "root": {
23
+ "control": {
20
24
  "opacity": "0.38"
25
+ },
26
+ "label": {
27
+ "color": "var(--seed-color-fg-disabled)"
21
28
  }
22
29
  }
23
30
  },
24
- "sizeMedium": {
31
+ "size32": {
25
32
  "enabled": {
26
33
  "root": {
27
- "height": "32px"
34
+ "height": "32px",
35
+ "gap": "var(--seed-dimension-x2_5)"
28
36
  },
29
37
  "control": {
30
38
  "height": "32px",
@@ -36,15 +44,42 @@ export const vars = {
36
44
  "height": "28px",
37
45
  "width": "28px",
38
46
  "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
47
+ },
48
+ "label": {
49
+ "fontSize": "var(--seed-font-size-t5)",
50
+ "lineHeight": "var(--seed-line-height-t5)"
39
51
  }
40
52
  }
41
53
  },
42
- "sizeSmall": {
54
+ "size24": {
43
55
  "enabled": {
44
56
  "root": {
45
57
  "height": "24px",
46
58
  "gap": "var(--seed-dimension-x2)"
47
59
  },
60
+ "control": {
61
+ "height": "24px",
62
+ "width": "38px",
63
+ "paddingX": "2px",
64
+ "paddingY": "2px"
65
+ },
66
+ "thumb": {
67
+ "height": "20px",
68
+ "width": "20px",
69
+ "shadow": "0px 3px 8px 0px #00000026, 0px 1px 3px 0px #0000000f"
70
+ },
71
+ "label": {
72
+ "fontSize": "var(--seed-font-size-t4)",
73
+ "lineHeight": "var(--seed-line-height-t4)"
74
+ }
75
+ }
76
+ },
77
+ "size16": {
78
+ "enabled": {
79
+ "root": {
80
+ "height": "24px",
81
+ "gap": "var(--seed-dimension-x1_5)"
82
+ },
48
83
  "control": {
49
84
  "height": "16px",
50
85
  "width": "26px",
@@ -56,9 +91,8 @@ export const vars = {
56
91
  "width": "12px"
57
92
  },
58
93
  "label": {
59
- "fontSize": "var(--seed-font-size-t4)",
60
- "lineHeight": "var(--seed-line-height-t4)",
61
- "fontWeight": "var(--seed-font-weight-regular)"
94
+ "fontSize": "var(--seed-font-size-t3)",
95
+ "lineHeight": "var(--seed-line-height-t3)"
62
96
  }
63
97
  }
64
98
  }