@seed-design/css 1.1.7 → 1.1.8

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 (7) hide show
  1. package/all.css +18 -9
  2. package/all.min.css +1 -1
  3. package/package.json +1 -1
  4. package/recipes/help-bubble.css +4 -0
  5. package/recipes/list-item.css +22 -13
  6. package/vars/component/list-item.d.ts +17 -6
  7. package/vars/component/list-item.mjs +17 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@seed-design/css",
3
- "version": "1.1.7",
3
+ "version": "1.1.8",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/daangn/seed-design.git",
package/recipes/help-bubble.css CHANGED
@@ -1,3 +1,7 @@
1
+ .seed-help-bubble__positioner {
2
+ --popover-z-index: 99;
3
+ z-index: calc(var(--popover-z-index) + var(--z-index-offset, 0));
4
+ }
1
5
  .seed-help-bubble__content {
2
6
  display: flex;
3
7
  flex-direction: column;
package/recipes/list-item.css CHANGED
@@ -7,16 +7,13 @@
7
7
  position: relative;
8
8
  display: flex;
9
9
  width: 100%;
10
- z-index: 0;
10
+ isolation: isolate;
11
11
  padding-left: var(--seed-dimension-spacing-x-global-gutter);
12
12
  padding-right: var(--seed-dimension-spacing-x-global-gutter);
13
13
  padding-top: var(--seed-dimension-x3);
14
14
  padding-bottom: var(--seed-dimension-x3);
15
15
  --seed-box-align-items: center;
16
16
  align-items: var(--seed-box-align-items);
17
- transition-property: background-color;
18
- transition-duration: var(--seed-duration-color-transition);
19
- transition-timing-function: var(--seed-timing-function-easing);
20
17
  }
21
18
  .seed-list-item__prefix {
22
19
  display: inline-flex;
@@ -55,8 +52,8 @@
55
52
  flex-direction: column;
56
53
  align-items: flex-start;
57
54
  flex-grow: 1;
55
+ background-color: transparent;
58
56
  border: none;
59
- background-color: var(--seed-color-bg-transparent);
60
57
  font-family: inherit;
61
58
  --seed-box-gap: var(--seed-dimension-x0_5);
62
59
  gap: var(--seed-box-gap);
@@ -64,7 +61,7 @@
64
61
  padding: 0 var(--seed-box-padding-right) 0 0;
65
62
  text-decoration: none;
66
63
  }
67
- .seed-list-item__content:after {
64
+ .seed-list-item__content::after {
68
65
  content: '';
69
66
  position: absolute;
70
67
  top: 0;
@@ -72,7 +69,7 @@
72
69
  bottom: 0;
73
70
  left: 0;
74
71
  }
75
- .seed-list-item__content:before {
72
+ .seed-list-item__content::before {
76
73
  content: '';
77
74
  position: absolute;
78
75
  top: 0;
@@ -80,15 +77,21 @@
80
77
  bottom: 0;
81
78
  left: 0;
82
79
  z-index: -1;
83
- transition-property: background-color;
80
+ transition-property: background-color, left, right, border-radius;
84
81
  transition-duration: var(--seed-duration-color-transition);
85
82
  transition-timing-function: var(--seed-timing-function-easing);
86
83
  }
87
- .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active]):before {
84
+ .seed-list-item__content:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
88
85
  background-color: var(--seed-color-bg-transparent-pressed);
86
+ left: var(--seed-dimension-x1_5);
87
+ right: var(--seed-dimension-x1_5);
88
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
89
89
  }
90
- .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]:before {
90
+ .seed-list-item__content:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
91
91
  background-color: var(--seed-color-bg-transparent-pressed);
92
+ left: var(--seed-dimension-x1_5);
93
+ right: var(--seed-dimension-x1_5);
94
+ border-radius: var(--list-item-border-radius, var(--seed-dimension-x2_5));
92
95
  }
93
96
  .seed-list-item__title {
94
97
  flex-shrink: 0;
@@ -107,8 +110,14 @@
107
110
  color: var(--seed-color-fg-neutral-subtle);
108
111
  }
109
112
  .seed-list-item__detail:is(:disabled, [disabled], [data-disabled]) {
110
- color: var(--seed-color-fg-neutral-subtle);
113
+ color: var(--seed-color-fg-disabled);
114
+ }
115
+ .seed-list-item__content--highlighted_true::before {
116
+ background-color: var(--seed-color-bg-brand-weak);
117
+ }
118
+ .seed-list-item__content--highlighted_true:is(button, a):not(:is(:disabled, [disabled], [data-disabled])):is(:active, [data-active])::before {
119
+ background-color: var(--seed-color-bg-brand-weak-pressed);
111
120
  }
112
- .seed-list-item__root--highlighted_true {
113
- background-color: var(--seed-color-palette-carrot-100);
121
+ .seed-list-item__content--highlighted_true:not(:is(:disabled, [disabled], [data-disabled]))[data-active]::before {
122
+ background-color: var(--seed-color-bg-brand-weak-pressed);
114
123
  }
package/vars/component/list-item.d.ts CHANGED
@@ -4,11 +4,15 @@ export declare const vars: {
4
4
  "root": {
5
5
  "paddingY": "var(--seed-dimension-x3)",
6
6
  "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
+ "color": "var(--seed-color-bg-transparent)",
7
8
  "colorDuration": "var(--seed-duration-color-transition)",
8
- "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "marginDuration": "var(--seed-duration-d3)",
11
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
12
+ "borderRadiusDuration": "var(--seed-duration-d3)",
13
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
9
14
  },
10
15
  "content": {
11
- "color": "var(--seed-color-bg-transparent)",
12
16
  "gap": "var(--seed-dimension-x0_5)",
13
17
  "paddingRight": "var(--seed-dimension-x2_5)"
14
18
  },
@@ -45,14 +49,21 @@ export declare const vars: {
45
49
  "color": "var(--seed-color-fg-neutral-subtle)"
46
50
  }
47
51
  },
52
+ "pressed": {
53
+ "root": {
54
+ "color": "var(--seed-color-bg-transparent-pressed)",
55
+ "marginX": "var(--seed-dimension-x1_5)",
56
+ "cornerRadius": "var(--seed-dimension-x2_5)"
57
+ }
58
+ },
48
59
  "highlighted": {
49
60
  "root": {
50
- "color": "var(--seed-color-palette-carrot-100)"
61
+ "color": "var(--seed-color-bg-brand-weak)"
51
62
  }
52
63
  },
53
- "pressed": {
64
+ "highlightedPressed": {
54
65
  "root": {
55
- "color": "var(--seed-color-bg-transparent-pressed)"
66
+ "color": "var(--seed-color-bg-brand-weak-pressed)"
56
67
  }
57
68
  },
58
69
  "disabled": {
@@ -60,7 +71,7 @@ export declare const vars: {
60
71
  "color": "var(--seed-color-fg-disabled)"
61
72
  },
62
73
  "detail": {
63
- "color": "var(--seed-color-fg-neutral-subtle)"
74
+ "color": "var(--seed-color-fg-disabled)"
64
75
  },
65
76
  "prefixIcon": {
66
77
  "color": "var(--seed-color-fg-disabled)"
package/vars/component/list-item.mjs CHANGED
@@ -4,11 +4,15 @@ export const vars = {
4
4
  "root": {
5
5
  "paddingY": "var(--seed-dimension-x3)",
6
6
  "paddingX": "var(--seed-dimension-spacing-x-global-gutter)",
7
+ "color": "var(--seed-color-bg-transparent)",
7
8
  "colorDuration": "var(--seed-duration-color-transition)",
8
- "colorTimingFunction": "var(--seed-timing-function-easing)"
9
+ "colorTimingFunction": "var(--seed-timing-function-easing)",
10
+ "marginDuration": "var(--seed-duration-d3)",
11
+ "marginTimingFunction": "var(--seed-timing-function-easing)",
12
+ "borderRadiusDuration": "var(--seed-duration-d3)",
13
+ "borderRadiusTimingFunction": "var(--seed-timing-function-easing)"
9
14
  },
10
15
  "content": {
11
- "color": "var(--seed-color-bg-transparent)",
12
16
  "gap": "var(--seed-dimension-x0_5)",
13
17
  "paddingRight": "var(--seed-dimension-x2_5)"
14
18
  },
@@ -45,14 +49,21 @@ export const vars = {
45
49
  "color": "var(--seed-color-fg-neutral-subtle)"
46
50
  }
47
51
  },
52
+ "pressed": {
53
+ "root": {
54
+ "color": "var(--seed-color-bg-transparent-pressed)",
55
+ "marginX": "var(--seed-dimension-x1_5)",
56
+ "cornerRadius": "var(--seed-dimension-x2_5)"
57
+ }
58
+ },
48
59
  "highlighted": {
49
60
  "root": {
50
- "color": "var(--seed-color-palette-carrot-100)"
61
+ "color": "var(--seed-color-bg-brand-weak)"
51
62
  }
52
63
  },
53
- "pressed": {
64
+ "highlightedPressed": {
54
65
  "root": {
55
- "color": "var(--seed-color-bg-transparent-pressed)"
66
+ "color": "var(--seed-color-bg-brand-weak-pressed)"
56
67
  }
57
68
  },
58
69
  "disabled": {
@@ -60,7 +71,7 @@ export const vars = {
60
71
  "color": "var(--seed-color-fg-disabled)"
61
72
  },
62
73
  "detail": {
63
- "color": "var(--seed-color-fg-neutral-subtle)"
74
+ "color": "var(--seed-color-fg-disabled)"
64
75
  },
65
76
  "prefixIcon": {
66
77
  "color": "var(--seed-color-fg-disabled)"