@seed-design/lynx-css 0.6.0 → 0.7.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.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/vars/component/date-picker.d.ts +98 -0
  3. package/vars/component/date-picker.mjs +98 -0
  4. package/vars/component/index.d.ts +2 -0
  5. package/vars/component/index.mjs +2 -0
  6. package/vars/component/menu-sheet-item.d.ts +2 -6
  7. package/vars/component/menu-sheet-item.mjs +2 -6
  8. package/vars/component/time-picker.d.ts +27 -0
  9. package/vars/component/time-picker.mjs +27 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/lynx-css",
3
- "version": "0.6.0",
3
+ "version": "0.7.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/vars/component/date-picker.d.ts ADDED
@@ -0,0 +1,98 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-layer-floating)"
6
+ },
7
+ "header": {
8
+ "height": "var(--seed-dimension-x12)"
9
+ },
10
+ "headerLabel": {
11
+ "paddingX": "var(--seed-dimension-x1)",
12
+ "gap": "var(--seed-dimension-x1)",
13
+ "iconSize": "var(--seed-dimension-x5)",
14
+ "fontSize": "var(--seed-font-size-t5)",
15
+ "lineHeight": "var(--seed-line-height-t5)",
16
+ "fontWeight": "var(--seed-font-weight-bold)",
17
+ "color": "var(--seed-color-fg-neutral)"
18
+ },
19
+ "months": {
20
+ "gap": "var(--seed-dimension-x6)"
21
+ },
22
+ "continuousScroll": {
23
+ "fogHeight": "96px"
24
+ },
25
+ "weekday": {
26
+ "height": "var(--seed-dimension-x12)",
27
+ "fontSize": "var(--seed-font-size-t4)",
28
+ "lineHeight": "var(--seed-line-height-t4)",
29
+ "fontWeight": "var(--seed-font-weight-medium)",
30
+ "color": "var(--seed-color-fg-neutral-subtle)"
31
+ },
32
+ "monthLabel": {
33
+ "height": "var(--seed-dimension-x12)",
34
+ "fontSize": "var(--seed-font-size-t5)",
35
+ "lineHeight": "var(--seed-line-height-t5)",
36
+ "fontWeight": "var(--seed-font-weight-bold)",
37
+ "color": "var(--seed-color-fg-neutral)"
38
+ },
39
+ "dateCell": {
40
+ "minHeight": "var(--seed-dimension-x12)"
41
+ },
42
+ "dateVisual": {
43
+ "size": "42px",
44
+ "cornerRadius": "var(--seed-radius-full)",
45
+ "color": "var(--seed-color-bg-transparent)"
46
+ },
47
+ "dateContent": {
48
+ "fontSize": "var(--seed-font-size-t5)",
49
+ "lineHeight": "var(--seed-line-height-t5)",
50
+ "fontWeight": "var(--seed-font-weight-medium)",
51
+ "color": "var(--seed-color-fg-neutral-muted)"
52
+ },
53
+ "rangeBackground": {
54
+ "color": "var(--seed-color-bg-neutral-weak)"
55
+ },
56
+ "wheelSelectionIndicator": {
57
+ "cornerRadius": "var(--seed-radius-r2)",
58
+ "color": "var(--seed-color-bg-neutral-weak)"
59
+ },
60
+ "wheelContainer": {
61
+ "height": "336px"
62
+ },
63
+ "wheelItem": {
64
+ "paddingX": "var(--seed-dimension-x4)",
65
+ "fontSize": "var(--seed-font-size-t10-static)",
66
+ "lineHeight": "var(--seed-line-height-t10-static)",
67
+ "fontWeight": "var(--seed-font-weight-medium)",
68
+ "color": "var(--seed-color-fg-disabled)"
69
+ }
70
+ },
71
+ "pressed": {
72
+ "dateVisual": {
73
+ "color": "var(--seed-color-bg-transparent-pressed)"
74
+ }
75
+ },
76
+ "today": {
77
+ "dateVisual": {
78
+ "color": "var(--seed-color-bg-neutral-weak)"
79
+ }
80
+ },
81
+ "selected": {
82
+ "dateVisual": {
83
+ "color": "var(--seed-color-bg-neutral-inverted)"
84
+ },
85
+ "dateContent": {
86
+ "color": "var(--seed-color-fg-neutral-inverted)"
87
+ },
88
+ "wheelItem": {
89
+ "color": "var(--seed-color-fg-neutral)"
90
+ }
91
+ },
92
+ "disabled": {
93
+ "dateContent": {
94
+ "color": "var(--seed-color-fg-disabled)"
95
+ }
96
+ }
97
+ }
98
+ }
package/vars/component/date-picker.mjs ADDED
@@ -0,0 +1,98 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-layer-floating)"
6
+ },
7
+ "header": {
8
+ "height": "var(--seed-dimension-x12)"
9
+ },
10
+ "headerLabel": {
11
+ "paddingX": "var(--seed-dimension-x1)",
12
+ "gap": "var(--seed-dimension-x1)",
13
+ "iconSize": "var(--seed-dimension-x5)",
14
+ "fontSize": "var(--seed-font-size-t5)",
15
+ "lineHeight": "var(--seed-line-height-t5)",
16
+ "fontWeight": "var(--seed-font-weight-bold)",
17
+ "color": "var(--seed-color-fg-neutral)"
18
+ },
19
+ "months": {
20
+ "gap": "var(--seed-dimension-x6)"
21
+ },
22
+ "continuousScroll": {
23
+ "fogHeight": "96px"
24
+ },
25
+ "weekday": {
26
+ "height": "var(--seed-dimension-x12)",
27
+ "fontSize": "var(--seed-font-size-t4)",
28
+ "lineHeight": "var(--seed-line-height-t4)",
29
+ "fontWeight": "var(--seed-font-weight-medium)",
30
+ "color": "var(--seed-color-fg-neutral-subtle)"
31
+ },
32
+ "monthLabel": {
33
+ "height": "var(--seed-dimension-x12)",
34
+ "fontSize": "var(--seed-font-size-t5)",
35
+ "lineHeight": "var(--seed-line-height-t5)",
36
+ "fontWeight": "var(--seed-font-weight-bold)",
37
+ "color": "var(--seed-color-fg-neutral)"
38
+ },
39
+ "dateCell": {
40
+ "minHeight": "var(--seed-dimension-x12)"
41
+ },
42
+ "dateVisual": {
43
+ "size": "42px",
44
+ "cornerRadius": "var(--seed-radius-full)",
45
+ "color": "var(--seed-color-bg-transparent)"
46
+ },
47
+ "dateContent": {
48
+ "fontSize": "var(--seed-font-size-t5)",
49
+ "lineHeight": "var(--seed-line-height-t5)",
50
+ "fontWeight": "var(--seed-font-weight-medium)",
51
+ "color": "var(--seed-color-fg-neutral-muted)"
52
+ },
53
+ "rangeBackground": {
54
+ "color": "var(--seed-color-bg-neutral-weak)"
55
+ },
56
+ "wheelSelectionIndicator": {
57
+ "cornerRadius": "var(--seed-radius-r2)",
58
+ "color": "var(--seed-color-bg-neutral-weak)"
59
+ },
60
+ "wheelContainer": {
61
+ "height": "336px"
62
+ },
63
+ "wheelItem": {
64
+ "paddingX": "var(--seed-dimension-x4)",
65
+ "fontSize": "var(--seed-font-size-t10-static)",
66
+ "lineHeight": "var(--seed-line-height-t10-static)",
67
+ "fontWeight": "var(--seed-font-weight-medium)",
68
+ "color": "var(--seed-color-fg-disabled)"
69
+ }
70
+ },
71
+ "pressed": {
72
+ "dateVisual": {
73
+ "color": "var(--seed-color-bg-transparent-pressed)"
74
+ }
75
+ },
76
+ "today": {
77
+ "dateVisual": {
78
+ "color": "var(--seed-color-bg-neutral-weak)"
79
+ }
80
+ },
81
+ "selected": {
82
+ "dateVisual": {
83
+ "color": "var(--seed-color-bg-neutral-inverted)"
84
+ },
85
+ "dateContent": {
86
+ "color": "var(--seed-color-fg-neutral-inverted)"
87
+ },
88
+ "wheelItem": {
89
+ "color": "var(--seed-color-fg-neutral)"
90
+ }
91
+ },
92
+ "disabled": {
93
+ "dateContent": {
94
+ "color": "var(--seed-color-fg-disabled)"
95
+ }
96
+ }
97
+ }
98
+ }
package/vars/component/index.d.ts CHANGED
@@ -27,6 +27,7 @@ export { vars as chip } from "./chip";
27
27
  export { vars as contentPlaceholder } from "./content-placeholder";
28
28
  export { vars as contextualFloatingButton } from "./contextual-floating-button";
29
29
  export { vars as controlChip } from "./control-chip";
30
+ export { vars as datePicker } from "./date-picker";
30
31
  export { vars as dialogCloseButton } from "./dialog-close-button";
31
32
  export { vars as dialog } from "./dialog";
32
33
  export { vars as divider } from "./divider";
@@ -90,6 +91,7 @@ export { vars as tagGroupItem } from "./tag-group-item";
90
91
  export { vars as tagGroup } from "./tag-group";
91
92
  export { vars as textButton } from "./text-button";
92
93
  export { vars as textInput } from "./text-input";
94
+ export { vars as timePicker } from "./time-picker";
93
95
  export { vars as toggleButton } from "./toggle-button";
94
96
  export { vars as topNavigationIconButton } from "./top-navigation-icon-button";
95
97
  export { vars as topNavigationTextButton } from "./top-navigation-text-button";
package/vars/component/index.mjs CHANGED
@@ -27,6 +27,7 @@ export { vars as chip } from "./chip.mjs";
27
27
  export { vars as contentPlaceholder } from "./content-placeholder.mjs";
28
28
  export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
29
29
  export { vars as controlChip } from "./control-chip.mjs";
30
+ export { vars as datePicker } from "./date-picker.mjs";
30
31
  export { vars as dialogCloseButton } from "./dialog-close-button.mjs";
31
32
  export { vars as dialog } from "./dialog.mjs";
32
33
  export { vars as divider } from "./divider.mjs";
@@ -90,6 +91,7 @@ export { vars as tagGroupItem } from "./tag-group-item.mjs";
90
91
  export { vars as tagGroup } from "./tag-group.mjs";
91
92
  export { vars as textButton } from "./text-button.mjs";
92
93
  export { vars as textInput } from "./text-input.mjs";
94
+ export { vars as timePicker } from "./time-picker.mjs";
93
95
  export { vars as toggleButton } from "./toggle-button.mjs";
94
96
  export { vars as topNavigationIconButton } from "./top-navigation-icon-button.mjs";
95
97
  export { vars as topNavigationTextButton } from "./top-navigation-text-button.mjs";
package/vars/component/menu-sheet-item.d.ts CHANGED
@@ -61,13 +61,9 @@ export declare const vars: {
61
61
  /**
62
62
  * 라벨을 왼쪽 정렬합니다.
63
63
  */
64
- "labelAlignLeft": {
65
- "enabled": {}
66
- },
64
+ "labelAlignLeft": {},
67
65
  /**
68
66
  * 라벨을 중앙 정렬합니다.
69
67
  */
70
- "labelAlignCenter": {
71
- "enabled": {}
72
- }
68
+ "labelAlignCenter": {}
73
69
  }
package/vars/component/menu-sheet-item.mjs CHANGED
@@ -52,10 +52,6 @@ export const vars = {
52
52
  }
53
53
  }
54
54
  },
55
- "labelAlignLeft": {
56
- "enabled": {}
57
- },
58
- "labelAlignCenter": {
59
- "enabled": {}
60
- }
55
+ "labelAlignLeft": {},
56
+ "labelAlignCenter": {}
61
57
  }
package/vars/component/time-picker.d.ts ADDED
@@ -0,0 +1,27 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "height": "220px"
6
+ },
7
+ "selectionIndicator": {
8
+ "height": "44px",
9
+ "cornerRadius": "var(--seed-radius-r2)",
10
+ "color": "var(--seed-color-bg-neutral-weak)"
11
+ },
12
+ "item": {
13
+ "height": "44px",
14
+ "paddingX": "var(--seed-dimension-x4)",
15
+ "fontSize": "var(--seed-font-size-t10-static)",
16
+ "lineHeight": "var(--seed-line-height-t10-static)",
17
+ "fontWeight": "var(--seed-font-weight-medium)",
18
+ "color": "var(--seed-color-fg-disabled)"
19
+ }
20
+ },
21
+ "selected": {
22
+ "item": {
23
+ "color": "var(--seed-color-fg-neutral)"
24
+ }
25
+ }
26
+ }
27
+ }
package/vars/component/time-picker.mjs ADDED
@@ -0,0 +1,27 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "height": "220px"
6
+ },
7
+ "selectionIndicator": {
8
+ "height": "44px",
9
+ "cornerRadius": "var(--seed-radius-r2)",
10
+ "color": "var(--seed-color-bg-neutral-weak)"
11
+ },
12
+ "item": {
13
+ "height": "44px",
14
+ "paddingX": "var(--seed-dimension-x4)",
15
+ "fontSize": "var(--seed-font-size-t10-static)",
16
+ "lineHeight": "var(--seed-line-height-t10-static)",
17
+ "fontWeight": "var(--seed-font-weight-medium)",
18
+ "color": "var(--seed-color-fg-disabled)"
19
+ }
20
+ },
21
+ "selected": {
22
+ "item": {
23
+ "color": "var(--seed-color-fg-neutral)"
24
+ }
25
+ }
26
+ }
27
+ }