@launchpad-ui/filter 0.4.26 → 0.4.27

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 (4) hide show
  1. package/dist/index.es.js +13 -13
  2. package/dist/index.js +13 -13
  3. package/dist/style.css +100 -75
  4. package/package.json +7 -7
package/dist/index.es.js CHANGED
@@ -8,24 +8,24 @@ import { Button, IconButton } from "@launchpad-ui/button";
8
8
  import { Menu, MenuSearch, MenuDivider, MenuItem } from "@launchpad-ui/menu";
9
9
  import { Tooltip } from "@launchpad-ui/tooltip";
10
10
  import { VisuallyHidden } from "@react-aria/visually-hidden";
11
- const filter = "_filter_1cei5_1";
12
- const buttonContainer = "_buttonContainer_1cei5_5";
13
- const button = "_button_1cei5_5";
14
- const appliedButton = "_appliedButton_1cei5_24";
15
- const name = "_name_1cei5_59";
16
- const appliedName = "_appliedName_1cei5_64";
17
- const description = "_description_1cei5_68";
18
- const appliedDescription = "_appliedDescription_1cei5_74";
19
- const clear = "_clear_1cei5_82";
20
- const isClearable = "_isClearable_1cei5_91";
21
- const clearTooltip = "_clearTooltip_1cei5_123";
22
- const filterClearButton = "_filterClearButton_1cei5_129";
11
+ const filter = "_filter_9quhv_1";
12
+ const buttonContainer = "_buttonContainer_9quhv_5";
13
+ const button = "_button_9quhv_5";
14
+ const appliedButton = "_appliedButton_9quhv_24";
15
+ const name = "_name_9quhv_55";
16
+ const appliedName = "_appliedName_9quhv_60";
17
+ const description = "_description_9quhv_64";
18
+ const appliedDescription = "_appliedDescription_9quhv_70";
19
+ const clear = "_clear_9quhv_78";
20
+ const isClearable = "_isClearable_9quhv_87";
21
+ const clearTooltip = "_clearTooltip_9quhv_119";
22
+ const filterClearButton = "_filterClearButton_9quhv_125";
23
23
  const styles = {
24
24
  filter,
25
25
  buttonContainer,
26
26
  button,
27
27
  appliedButton,
28
- "focus-visible": "_focus-visible_1cei5_1",
28
+ "focus-visible": "_focus-visible_9quhv_1",
29
29
  name,
30
30
  appliedName,
31
31
  description,
package/dist/index.js CHANGED
@@ -10,24 +10,24 @@ const button$1 = require("@launchpad-ui/button");
10
10
  const menu = require("@launchpad-ui/menu");
11
11
  const tooltip = require("@launchpad-ui/tooltip");
12
12
  const visuallyHidden = require("@react-aria/visually-hidden");
13
- const filter = "_filter_1cei5_1";
14
- const buttonContainer = "_buttonContainer_1cei5_5";
15
- const button = "_button_1cei5_5";
16
- const appliedButton = "_appliedButton_1cei5_24";
17
- const name = "_name_1cei5_59";
18
- const appliedName = "_appliedName_1cei5_64";
19
- const description = "_description_1cei5_68";
20
- const appliedDescription = "_appliedDescription_1cei5_74";
21
- const clear = "_clear_1cei5_82";
22
- const isClearable = "_isClearable_1cei5_91";
23
- const clearTooltip = "_clearTooltip_1cei5_123";
24
- const filterClearButton = "_filterClearButton_1cei5_129";
13
+ const filter = "_filter_9quhv_1";
14
+ const buttonContainer = "_buttonContainer_9quhv_5";
15
+ const button = "_button_9quhv_5";
16
+ const appliedButton = "_appliedButton_9quhv_24";
17
+ const name = "_name_9quhv_55";
18
+ const appliedName = "_appliedName_9quhv_60";
19
+ const description = "_description_9quhv_64";
20
+ const appliedDescription = "_appliedDescription_9quhv_70";
21
+ const clear = "_clear_9quhv_78";
22
+ const isClearable = "_isClearable_9quhv_87";
23
+ const clearTooltip = "_clearTooltip_9quhv_119";
24
+ const filterClearButton = "_filterClearButton_9quhv_125";
25
25
  const styles = {
26
26
  filter,
27
27
  buttonContainer,
28
28
  button,
29
29
  appliedButton,
30
- "focus-visible": "_focus-visible_1cei5_1",
30
+ "focus-visible": "_focus-visible_9quhv_1",
31
31
  name,
32
32
  appliedName,
33
33
  description,
package/dist/style.css CHANGED
@@ -1,15 +1,15 @@
1
- ._filter_1cei5_1 {
1
+ ._filter_9quhv_1 {
2
2
  font-family: var(--lp-font-family-base);
3
3
  }
4
4
 
5
- ._buttonContainer_1cei5_5 {
5
+ ._buttonContainer_9quhv_5 {
6
6
  cursor: pointer;
7
7
  display: inline-flex;
8
8
  align-items: center;
9
9
  position: relative;
10
10
  }
11
11
 
12
- ._button_1cei5_5 {
12
+ ._button_9quhv_5 {
13
13
  border-radius: var(--lp-border-radius);
14
14
  padding-top: 0;
15
15
  padding-bottom: 0;
@@ -17,21 +17,21 @@
17
17
  display: flex;
18
18
  align-items: center;
19
19
  margin: 0;
20
- color: var(--lp-color-text);
21
- background-color: var(--lp-color-white);
20
+ color: var(--lp-color-text-ui-primary);
21
+ background-color: var(--lp-color-bg-interactive-secondary);
22
22
  }
23
23
 
24
- ._appliedButton_1cei5_24 {
25
- color: var(--lp-color-text);
24
+ ._appliedButton_9quhv_24 {
25
+ color: var(--lp-color-text-ui-primary);
26
26
  height: 2rem;
27
- background-color: var(--lp-color-gray-100);
27
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
28
28
  padding: 0.2rem 0.6rem;
29
29
  border-radius: 0.2rem;
30
30
  display: flex;
31
31
  }
32
32
 
33
- ._button_1cei5_5,
34
- ._appliedButton_1cei5_24 {
33
+ ._button_9quhv_5,
34
+ ._appliedButton_9quhv_24 {
35
35
  font-family: inherit;
36
36
  font-size: 1.3rem;
37
37
  cursor: pointer;
@@ -40,57 +40,41 @@
40
40
  border-color: var(--lp-color-white);
41
41
  }
42
42
 
43
- ._button_1cei5_5:hover, ._appliedButton_1cei5_24:hover {
44
- background-color: var(--lp-color-background-hover);
45
- border-color: var(--lp-color-border);
43
+ ._button_9quhv_5:hover, ._appliedButton_9quhv_24:hover {
44
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
45
+ border-color: var(--lp-color-border-ui-primary);
46
46
  }
47
47
 
48
- ._button_1cei5_5:focus, ._appliedButton_1cei5_24:focus {
49
- box-shadow: 0 0 0 2px var(--lp-color-white), 0 0 0 4px var(--lp-color-focus);
50
- border-color: var(--lp-color-border);
48
+ ._button_9quhv_5._focus-visible_9quhv_1, ._appliedButton_9quhv_24._focus-visible_9quhv_1 {
49
+ box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
50
+ 0 0 0 4px var(--lp-color-shadow-interactive-focus);
51
+ border-color: var(--lp-color-border-ui-primary);
51
52
  outline: none;
52
53
  }
53
54
 
54
- ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
55
- box-shadow: none;
56
- box-shadow: initial;
57
- border-color: var(--lp-color-white);
58
- }
59
-
60
- ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
61
- box-shadow: none;
62
- box-shadow: initial;
63
- border-color: var(--lp-color-white);
64
- }
65
-
66
- ._button_1cei5_5:focus:not(._focus-visible_1cei5_1), ._appliedButton_1cei5_24:focus:not(._focus-visible_1cei5_1) {
67
- box-shadow: none;
68
- box-shadow: initial;
69
- border-color: var(--lp-color-white);
70
- }
71
-
72
- ._button_1cei5_5:focus:not(:focus-visible), ._appliedButton_1cei5_24:focus:not(:focus-visible) {
73
- box-shadow: none;
74
- box-shadow: initial;
75
- border-color: var(--lp-color-white);
55
+ ._button_9quhv_5:focus-visible, ._appliedButton_9quhv_24:focus-visible {
56
+ box-shadow: 0 0 0 2px var(--lp-color-shadow-interactive-primary),
57
+ 0 0 0 4px var(--lp-color-shadow-interactive-focus);
58
+ border-color: var(--lp-color-border-ui-primary);
59
+ outline: none;
76
60
  }
77
61
 
78
- ._name_1cei5_59 {
62
+ ._name_9quhv_55 {
79
63
  margin-right: 0.5rem;
80
64
  font-weight: var(--lp-font-weight-medium);
81
65
  }
82
66
 
83
- ._appliedName_1cei5_64 {
67
+ ._appliedName_9quhv_60 {
84
68
  margin-right: 0.3rem;
85
69
  }
86
70
 
87
- ._description_1cei5_68 {
88
- color: var(--lp-color-text);
71
+ ._description_9quhv_64 {
72
+ color: var(--lp-color-text-ui-primary);
89
73
  font-weight: var(--lp-font-weight-medium);
90
74
  }
91
75
 
92
- ._description_1cei5_68,
93
- ._appliedDescription_1cei5_74 {
76
+ ._description_9quhv_64,
77
+ ._appliedDescription_9quhv_70 {
94
78
  margin-right: 0.5rem;
95
79
  max-width: 16rem;
96
80
  overflow: hidden;
@@ -98,92 +82,133 @@
98
82
  white-space: nowrap;
99
83
  }
100
84
 
101
- ._clear_1cei5_82 {
85
+ ._clear_9quhv_78 {
102
86
  cursor: pointer;
103
87
  padding: 0.3rem;
104
88
  }
105
89
 
106
90
  .Filter-target--usage {
107
- border: 1px solid var(--lp-color-text-subtle-secondary);
91
+ border: 1px solid var(--lp-color-gray-600);
108
92
  }
109
93
 
110
- ._button_1cei5_5._isClearable_1cei5_91 {
94
+ ._button_9quhv_5._isClearable_9quhv_87 {
111
95
  background-color: var(--lp-color-blue-200);
112
96
  padding-right: 3.1rem;
113
97
  }
114
98
 
115
- ._button_1cei5_5._isClearable_1cei5_91:focus,
116
- ._button_1cei5_5._isClearable_1cei5_91:hover,
117
- ._button_1cei5_5._isClearable_1cei5_91:active {
99
+ ._button_9quhv_5._isClearable_9quhv_87:focus,
100
+ ._button_9quhv_5._isClearable_9quhv_87:hover,
101
+ ._button_9quhv_5._isClearable_9quhv_87:active {
118
102
  background-color: var(--lp-color-blue-300);
119
103
  }
120
104
 
121
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
105
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
122
106
  background-color: transparent;
123
107
  background-color: initial;
124
108
  }
125
109
 
126
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
110
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
127
111
  background-color: transparent;
128
112
  background-color: initial;
129
113
  }
130
114
 
131
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1) {
115
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
132
116
  background-color: transparent;
133
117
  background-color: initial;
134
118
  }
135
119
 
136
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(:focus-visible) {
120
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
137
121
  background-color: transparent;
138
122
  background-color: initial;
139
123
  }
140
124
 
141
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(._focus-visible_1cei5_1):hover {
125
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
142
126
  background-color: var(--lp-color-blue-300);
143
127
  }
144
128
 
145
- ._button_1cei5_5._isClearable_1cei5_91:focus:not(:focus-visible):hover {
129
+ ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
146
130
  background-color: var(--lp-color-blue-300);
147
131
  }
148
132
 
149
- ._button_1cei5_5:hover:not(._isClearable_1cei5_91),
150
- ._button_1cei5_5:focus:not(._isClearable_1cei5_91),
151
- [data-state='open'] ._button_1cei5_5:not(._isClearable_1cei5_91) {
152
- background-color: var(--lp-color-background-hover);
153
- border-color: var(--lp-color-text-subtle-secondary);
133
+ ._button_9quhv_5:hover:not(._isClearable_9quhv_87),
134
+ ._button_9quhv_5:focus:not(._isClearable_9quhv_87),
135
+ [data-state='open'] ._button_9quhv_5:not(._isClearable_9quhv_87) {
136
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
137
+ border-color: var(--lp-color-border-interactive-secondary-hover);
154
138
  }
155
139
 
156
- ._button_1cei5_5:focus:not(._focus-visible_1cei5_1):not(._isClearable_1cei5_91):hover {
157
- background-color: var(--lp-color-background-hover);
140
+ ._button_9quhv_5:focus:not(._focus-visible_9quhv_1):not(._isClearable_9quhv_87):hover {
141
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
158
142
  }
159
143
 
160
- ._button_1cei5_5:focus:not(:focus-visible):not(._isClearable_1cei5_91):hover {
161
- background-color: var(--lp-color-background-hover);
144
+ ._button_9quhv_5:focus:not(:focus-visible):not(._isClearable_9quhv_87):hover {
145
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
162
146
  }
163
147
 
164
- ._clearTooltip_1cei5_123 {
148
+ ._clearTooltip_9quhv_119 {
165
149
  line-height: 1;
166
150
  position: absolute;
167
151
  right: 0.7rem;
168
152
  }
169
153
 
170
- ._filterClearButton_1cei5_129 {
154
+ ._filterClearButton_9quhv_125 {
171
155
  text-decoration: none;
172
- color: var(--lp-color-system-red-600);
156
+ color: var(--lp-color-text-interactive-destructive);
173
157
  font-size: 1.3rem;
174
158
  font-weight: var(--lp-font-weight-medium);
175
159
  padding: 1rem;
176
160
  width: 100%;
177
- border-bottom: 1px solid var(--lp-color-border);
161
+ border-bottom: 1px solid var(--lp-color-border-ui-primary);
178
162
  }
179
163
 
180
- ._filterClearButton_1cei5_129:active,
181
- ._filterClearButton_1cei5_129:focus,
182
- ._filterClearButton_1cei5_129:hover {
164
+ ._filterClearButton_9quhv_125:active,
165
+ ._filterClearButton_9quhv_125:focus,
166
+ ._filterClearButton_9quhv_125:hover {
183
167
  outline: none;
184
168
  box-shadow: none;
185
169
  box-shadow: initial;
186
- color: var(--lp-color-system-red-600);
187
- border-bottom-color: var(--lp-color-border);
188
- background-color: var(--lp-color-background-hover);
170
+ color: var(--lp-color-text-interactive-destructive);
171
+ border-bottom-color: var(--lp-color-border-ui-primary);
172
+ background-color: var(--lp-color-bg-interactive-secondary-hover);
189
173
  }
174
+
175
+ /* stylelint-disable-next-line no-descending-specificity */
176
+
177
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87 {
178
+ background-color: var(--lp-color-cyan-900);
179
+ padding-right: 3.1rem;
180
+ }
181
+
182
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus,
183
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:hover,
184
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:active {
185
+ background-color: var(--lp-color-cyan-800);
186
+ }
187
+
188
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
189
+ background-color: transparent;
190
+ background-color: initial;
191
+ }
192
+
193
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
194
+ background-color: transparent;
195
+ background-color: initial;
196
+ }
197
+
198
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1) {
199
+ background-color: transparent;
200
+ background-color: initial;
201
+ }
202
+
203
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible) {
204
+ background-color: transparent;
205
+ background-color: initial;
206
+ }
207
+
208
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(._focus-visible_9quhv_1):hover {
209
+ background-color: var(--lp-color-cyan-900);
210
+ }
211
+
212
+ :root[data-theme='dark'] ._button_9quhv_5._isClearable_9quhv_87:focus:not(:focus-visible):hover {
213
+ background-color: var(--lp-color-cyan-900);
214
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@launchpad-ui/filter",
3
- "version": "0.4.26",
3
+ "version": "0.4.27",
4
4
  "status": "beta",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -26,12 +26,12 @@
26
26
  },
27
27
  "source": "src/index.ts",
28
28
  "dependencies": {
29
- "@launchpad-ui/button": "~0.7.7",
30
- "@launchpad-ui/dropdown": "~0.6.2",
31
- "@launchpad-ui/icons": "~0.6.0",
32
- "@launchpad-ui/menu": "~0.6.25",
33
- "@launchpad-ui/tokens": "~0.2.0",
34
- "@launchpad-ui/tooltip": "~0.6.20",
29
+ "@launchpad-ui/button": "~0.7.8",
30
+ "@launchpad-ui/dropdown": "~0.6.3",
31
+ "@launchpad-ui/icons": "~0.6.1",
32
+ "@launchpad-ui/menu": "~0.6.26",
33
+ "@launchpad-ui/tokens": "~0.3.0",
34
+ "@launchpad-ui/tooltip": "~0.6.21",
35
35
  "@react-aria/visually-hidden": "^3.5.0",
36
36
  "classix": "^2.1.13"
37
37
  },