@seed-design/css 0.0.28 → 0.0.30

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 (19) hide show
  1. package/all.css +201 -1
  2. package/all.min.css +1 -1
  3. package/base.css +4 -0
  4. package/base.min.css +1 -1
  5. package/package.json +1 -1
  6. package/recipes/action-button.css +1 -1
  7. package/recipes/contextual-floating-button.css +94 -0
  8. package/recipes/contextual-floating-button.d.ts +26 -0
  9. package/recipes/contextual-floating-button.mjs +34 -0
  10. package/recipes/floating-action-button.css +76 -0
  11. package/recipes/floating-action-button.d.ts +24 -0
  12. package/recipes/floating-action-button.mjs +47 -0
  13. package/recipes/shared.mjs +1 -1
  14. package/vars/component/contextual-floating-button.d.ts +132 -0
  15. package/vars/component/contextual-floating-button.mjs +132 -0
  16. package/vars/component/floating-action-button.d.ts +54 -0
  17. package/vars/component/floating-action-button.mjs +54 -0
  18. package/vars/component/index.d.ts +2 -0
  19. package/vars/component/index.mjs +2 -0
package/vars/component/contextual-floating-button.mjs ADDED
@@ -0,0 +1,132 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "cornerRadius": "var(--seed-radius-full)",
6
+ "shadow": "0px 2px 6px 0px #00000026",
7
+ "colorDuration": "var(--seed-duration-d4)",
8
+ "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ },
10
+ "progressCircle": {
11
+ "size": "16px",
12
+ "thickness": "2px"
13
+ }
14
+ }
15
+ },
16
+ "variantSolid": {
17
+ "enabled": {
18
+ "root": {
19
+ "color": "var(--seed-color-bg-neutral-inverted)"
20
+ },
21
+ "progressCircle": {
22
+ "trackColor": "var(--seed-color-palette-gray-700)",
23
+ "rangeColor": "var(--seed-color-fg-neutral-inverted)"
24
+ },
25
+ "label": {
26
+ "color": "var(--seed-color-fg-neutral-inverted)"
27
+ },
28
+ "prefixIcon": {
29
+ "color": "var(--seed-color-fg-neutral-inverted)"
30
+ },
31
+ "icon": {
32
+ "color": "var(--seed-color-fg-neutral-inverted)"
33
+ }
34
+ },
35
+ "pressed": {
36
+ "root": {
37
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
38
+ }
39
+ },
40
+ "disabled": {
41
+ "root": {
42
+ "color": "var(--seed-color-bg-disabled)"
43
+ },
44
+ "label": {
45
+ "color": "var(--seed-color-fg-disabled)"
46
+ },
47
+ "prefixIcon": {
48
+ "color": "var(--seed-color-fg-disabled)"
49
+ },
50
+ "icon": {
51
+ "color": "var(--seed-color-fg-disabled)"
52
+ }
53
+ },
54
+ "loading": {
55
+ "root": {
56
+ "color": "var(--seed-color-bg-neutral-inverted-pressed)"
57
+ }
58
+ }
59
+ },
60
+ "variantLayer": {
61
+ "enabled": {
62
+ "root": {
63
+ "color": "var(--seed-color-bg-layer-floating)"
64
+ },
65
+ "progressCircle": {
66
+ "trackColor": "var(--seed-color-palette-gray-500)",
67
+ "rangeColor": "var(--seed-color-fg-neutral)"
68
+ },
69
+ "label": {
70
+ "color": "var(--seed-color-fg-neutral)"
71
+ },
72
+ "prefixIcon": {
73
+ "color": "var(--seed-color-fg-neutral)"
74
+ },
75
+ "icon": {
76
+ "color": "var(--seed-color-fg-neutral)"
77
+ }
78
+ },
79
+ "pressed": {
80
+ "root": {
81
+ "color": "var(--seed-color-bg-layer-floating-pressed)"
82
+ }
83
+ },
84
+ "disabled": {
85
+ "root": {
86
+ "color": "var(--seed-color-bg-disabled)"
87
+ },
88
+ "label": {
89
+ "color": "var(--seed-color-fg-disabled)"
90
+ },
91
+ "prefixIcon": {
92
+ "color": "var(--seed-color-fg-disabled)"
93
+ },
94
+ "icon": {
95
+ "color": "var(--seed-color-fg-disabled)"
96
+ }
97
+ },
98
+ "loading": {
99
+ "root": {
100
+ "color": "var(--seed-color-bg-layer-floating-pressed)"
101
+ }
102
+ }
103
+ },
104
+ "layoutWithText": {
105
+ "enabled": {
106
+ "root": {
107
+ "minHeight": "36px",
108
+ "paddingX": "var(--seed-dimension-x3_5)",
109
+ "paddingY": "var(--seed-dimension-x2)",
110
+ "gap": "var(--seed-dimension-x1)"
111
+ },
112
+ "label": {
113
+ "fontSize": "var(--seed-font-size-t4)",
114
+ "lineHeight": "var(--seed-line-height-t4)",
115
+ "fontWeight": "var(--seed-font-weight-medium)"
116
+ },
117
+ "prefixIcon": {
118
+ "size": "16px"
119
+ }
120
+ }
121
+ },
122
+ "layoutIconOnly": {
123
+ "enabled": {
124
+ "root": {
125
+ "size": "44px"
126
+ },
127
+ "icon": {
128
+ "size": "22px"
129
+ }
130
+ }
131
+ }
132
+ }
package/vars/component/floating-action-button.d.ts ADDED
@@ -0,0 +1,54 @@
1
+ export declare const vars: {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-brand-solid)",
6
+ "cornerRadius": "var(--seed-radius-full)",
7
+ "shadow": "0px 2px 6px 0px #00000026",
8
+ "colorDuration": "var(--seed-duration-d4)",
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "layoutDuration": "var(--seed-duration-d4)",
11
+ "layoutTimingFunction": "var(--seed-timing-function-easing)"
12
+ },
13
+ "icon": {
14
+ "color": "var(--seed-color-palette-static-white)",
15
+ "sizeDuration": "var(--seed-duration-d4)",
16
+ "sizeTimingFunction": "var(--seed-timing-function-easing)"
17
+ }
18
+ },
19
+ "pressed": {
20
+ "root": {
21
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
22
+ }
23
+ }
24
+ },
25
+ "extendedTrue": {
26
+ "enabled": {
27
+ "root": {
28
+ "gap": "var(--seed-dimension-x1)",
29
+ "paddingX": "var(--seed-dimension-x4_5)",
30
+ "paddingY": "var(--seed-dimension-x3)",
31
+ "minHeight": "48px"
32
+ },
33
+ "icon": {
34
+ "size": "var(--seed-dimension-x5)"
35
+ },
36
+ "label": {
37
+ "color": "var(--seed-color-palette-static-white)",
38
+ "fontSize": "var(--seed-font-size-t5)",
39
+ "lineHeight": "var(--seed-line-height-t5)",
40
+ "fontWeight": "var(--seed-font-weight-bold)"
41
+ }
42
+ }
43
+ },
44
+ "extendedFalse": {
45
+ "enabled": {
46
+ "root": {
47
+ "size": "56px"
48
+ },
49
+ "icon": {
50
+ "size": "var(--seed-dimension-x6)"
51
+ }
52
+ }
53
+ }
54
+ }
package/vars/component/floating-action-button.mjs ADDED
@@ -0,0 +1,54 @@
1
+ export const vars = {
2
+ "base": {
3
+ "enabled": {
4
+ "root": {
5
+ "color": "var(--seed-color-bg-brand-solid)",
6
+ "cornerRadius": "var(--seed-radius-full)",
7
+ "shadow": "0px 2px 6px 0px #00000026",
8
+ "colorDuration": "var(--seed-duration-d4)",
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "layoutDuration": "var(--seed-duration-d4)",
11
+ "layoutTimingFunction": "var(--seed-timing-function-easing)"
12
+ },
13
+ "icon": {
14
+ "color": "var(--seed-color-palette-static-white)",
15
+ "sizeDuration": "var(--seed-duration-d4)",
16
+ "sizeTimingFunction": "var(--seed-timing-function-easing)"
17
+ }
18
+ },
19
+ "pressed": {
20
+ "root": {
21
+ "color": "var(--seed-color-bg-brand-solid-pressed)"
22
+ }
23
+ }
24
+ },
25
+ "extendedTrue": {
26
+ "enabled": {
27
+ "root": {
28
+ "gap": "var(--seed-dimension-x1)",
29
+ "paddingX": "var(--seed-dimension-x4_5)",
30
+ "paddingY": "var(--seed-dimension-x3)",
31
+ "minHeight": "48px"
32
+ },
33
+ "icon": {
34
+ "size": "var(--seed-dimension-x5)"
35
+ },
36
+ "label": {
37
+ "color": "var(--seed-color-palette-static-white)",
38
+ "fontSize": "var(--seed-font-size-t5)",
39
+ "lineHeight": "var(--seed-line-height-t5)",
40
+ "fontWeight": "var(--seed-font-weight-bold)"
41
+ }
42
+ }
43
+ },
44
+ "extendedFalse": {
45
+ "enabled": {
46
+ "root": {
47
+ "size": "56px"
48
+ },
49
+ "icon": {
50
+ "size": "var(--seed-dimension-x6)"
51
+ }
52
+ }
53
+ }
54
+ }
package/vars/component/index.d.ts CHANGED
@@ -12,6 +12,7 @@ export { vars as callout } from "./callout";
12
12
  export { vars as checkbox } from "./checkbox";
13
13
  export { vars as chipTab } from "./chip-tab";
14
14
  export { vars as chipTablist } from "./chip-tablist";
15
+ export { vars as contextualFloatingButton } from "./contextual-floating-button";
15
16
  export { vars as controlChip } from "./control-chip";
16
17
  export { vars as dialog } from "./dialog";
17
18
  export { vars as divider } from "./divider";
@@ -20,6 +21,7 @@ export { vars as extendedActionSheetItem } from "./extended-action-sheet-item";
20
21
  export { vars as extendedActionSheet } from "./extended-action-sheet";
21
22
  export { vars as extendedFab } from "./extended-fab";
22
23
  export { vars as fab } from "./fab";
24
+ export { vars as floatingActionButton } from "./floating-action-button";
23
25
  export { vars as helpBubble } from "./help-bubble";
24
26
  export { vars as identityPlaceholder } from "./identity-placeholder";
25
27
  export { vars as inlineBanner } from "./inline-banner";
package/vars/component/index.mjs CHANGED
@@ -12,6 +12,7 @@ export { vars as callout } from "./callout.mjs";
12
12
  export { vars as checkbox } from "./checkbox.mjs";
13
13
  export { vars as chipTab } from "./chip-tab.mjs";
14
14
  export { vars as chipTablist } from "./chip-tablist.mjs";
15
+ export { vars as contextualFloatingButton } from "./contextual-floating-button.mjs";
15
16
  export { vars as controlChip } from "./control-chip.mjs";
16
17
  export { vars as dialog } from "./dialog.mjs";
17
18
  export { vars as divider } from "./divider.mjs";
@@ -20,6 +21,7 @@ export { vars as extendedActionSheetItem } from "./extended-action-sheet-item.mj
20
21
  export { vars as extendedActionSheet } from "./extended-action-sheet.mjs";
21
22
  export { vars as extendedFab } from "./extended-fab.mjs";
22
23
  export { vars as fab } from "./fab.mjs";
24
+ export { vars as floatingActionButton } from "./floating-action-button.mjs";
23
25
  export { vars as helpBubble } from "./help-bubble.mjs";
24
26
  export { vars as identityPlaceholder } from "./identity-placeholder.mjs";
25
27
  export { vars as inlineBanner } from "./inline-banner.mjs";