@jschofield/quick-search 0.2.0 → 0.3.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.
@@ -42,21 +42,6 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
42
42
  </dialog>
43
43
  `}static{this.styles=t`
44
44
  :host {
45
- --gunmetal: #1b2f36;
46
- --seasalt: #fafafa;
47
- --carrot: #f79103;
48
- --teal: #376170;
49
- --raw-umber: #906b56;
50
- --paynes-gray: #4d5963;
51
- --shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
52
- --gradient: linear-gradient(
53
- 135deg,
54
- var(--paynes-gray) 0% 20%,
55
- var(--carrot) 20% 40%,
56
- var(--teal) 40% 60%,
57
- var(--raw-umber) 60% 80%,
58
- var(--gunmetal) 80% 100%
59
- );
60
45
  }
61
46
 
62
47
  * {
@@ -64,7 +49,7 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
64
49
  }
65
50
 
66
51
  *:focus-visible {
67
- outline: 2px solid var(--raw-umber);
52
+ outline: 2px solid var(--link, #906b56);
68
53
  outline-offset: 1px;
69
54
  }
70
55
 
@@ -75,18 +60,18 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
75
60
  max-width: 600px;
76
61
  max-height: 80vh;
77
62
  padding: 0;
78
- border: 2px solid var(--gunmetal);
63
+ border: 2px solid var(--border, #1b2f36);
79
64
  border-radius: 8px;
80
- background: var(--seasalt);
81
- color: var(--gunmetal);
82
- box-shadow: var(--shadow);
65
+ background: var(--bg, #fafafa);
66
+ color: var(--text, #1b2f36);
67
+ box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
83
68
  overflow: hidden;
84
69
  font-family: "Atkinson Hyperlegible Next", system-ui, sans-serif;
85
70
  }
86
71
 
87
72
  dialog::backdrop {
88
73
  backdrop-filter: blur(4px);
89
- background: rgba(27, 47, 54, 0.1);
74
+ background: rgba(0, 0, 0, 0.3);
90
75
  }
91
76
 
92
77
  .inner {
@@ -106,29 +91,29 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
106
91
  padding: 0.75rem;
107
92
  font: inherit;
108
93
  font-size: 1rem;
109
- border: 2px solid var(--teal);
94
+ border: 2px solid var(--accent-secondary, #376170);
110
95
  border-radius: 8px;
111
- background: var(--seasalt);
112
- color: var(--gunmetal);
96
+ background: var(--bg-surface, #ffffff);
97
+ color: var(--text, #1b2f36);
113
98
 
114
99
  &:focus {
115
100
  outline: none;
116
- border-color: var(--carrot);
117
- box-shadow: 0 0 0 2px rgba(247, 145, 3, 0.2);
101
+ border-color: var(--accent, #f79103);
102
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #f79103) 20%, transparent);
118
103
  }
119
104
 
120
105
  &::placeholder {
121
- color: var(--paynes-gray);
106
+ color: var(--text-secondary, #4d5963);
122
107
  }
123
108
  }
124
109
 
125
110
  .close {
126
111
  display: inline-block;
127
112
  padding: 0.75rem 1rem;
128
- background: var(--gunmetal);
129
- color: var(--seasalt);
113
+ background: var(--button-bg, #1b2f36);
114
+ color: var(--button-text, #fafafa);
130
115
  border-radius: 8px;
131
- box-shadow: var(--shadow);
116
+ box-shadow: var(--shadow, 0 4px 8px rgba(0, 0, 0, 0.2));
132
117
  border: none;
133
118
  font: inherit;
134
119
  cursor: pointer;
@@ -138,7 +123,7 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
138
123
  }
139
124
 
140
125
  &:focus-visible {
141
- outline: 2px solid var(--raw-umber);
126
+ outline: 2px solid var(--link, #906b56);
142
127
  outline-offset: 1px;
143
128
  background: var(--gradient);
144
129
  }
@@ -161,12 +146,12 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
161
146
  .message {
162
147
  padding: 2rem 1rem;
163
148
  text-align: center;
164
- color: var(--paynes-gray);
149
+ color: var(--text-secondary, #4d5963);
165
150
  font-style: italic;
166
151
  }
167
152
 
168
153
  .message.error {
169
- color: var(--raw-umber);
154
+ color: var(--link, #906b56);
170
155
  font-weight: bold;
171
156
  }
172
157
 
@@ -182,22 +167,22 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
182
167
  .result {
183
168
  display: block;
184
169
  padding: 1rem;
185
- color: var(--gunmetal);
170
+ color: var(--text, #1b2f36);
186
171
  text-decoration: none;
187
172
  border: 2px solid transparent;
188
173
  border-radius: 8px;
189
- background: var(--seasalt);
174
+ background: var(--bg-surface, #ffffff);
190
175
  transition: all 0.2s ease;
191
176
 
192
177
  &:hover {
193
- border-color: var(--teal);
178
+ border-color: var(--accent-secondary, #376170);
194
179
  transform: translateY(-1px);
195
180
  }
196
181
 
197
182
  &:focus-visible {
198
183
  outline: none;
199
- border-color: var(--carrot);
200
- box-shadow: 0 0 0 2px rgba(247, 145, 3, 0.2);
184
+ border-color: var(--accent, #f79103);
185
+ box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #f79103) 20%, transparent);
201
186
  }
202
187
  }
203
188
 
@@ -205,13 +190,13 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
205
190
  font-weight: bold;
206
191
  font-size: 1.1rem;
207
192
  margin-bottom: 0.25rem;
208
- color: var(--gunmetal);
193
+ color: var(--text, #1b2f36);
209
194
  line-height: 1.2;
210
195
  }
211
196
 
212
197
  .excerpt {
213
198
  font-size: 0.9rem;
214
- color: var(--paynes-gray);
199
+ color: var(--text-secondary, #4d5963);
215
200
  line-height: 1.4;
216
201
  margin-bottom: 0.5rem;
217
202
  }
@@ -225,8 +210,8 @@ import{LitElement as e,css as t,html as n}from"lit";import{customElement as r,st
225
210
 
226
211
  & span {
227
212
  padding: 0.125rem 0.5rem;
228
- background: var(--teal);
229
- color: var(--seasalt);
213
+ background: var(--accent-secondary, #376170);
214
+ color: var(--button-text, #fafafa);
230
215
  border-radius: 4px;
231
216
  font-weight: 500;
232
217
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jschofield/quick-search",
3
- "version": "0.2.0",
3
+ "version": "0.3.0",
4
4
  "type": "module",
5
5
  "main": "./dist/assets/index.js",
6
6
  "exports": {