lookbook 1.0.0.beta.5 → 1.0.0.beta.6
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +27 -254
- data/app/assets/lookbook/css/lookbook.css +1 -1
- data/app/assets/lookbook/css/themes/blue.css +57 -36
- data/app/assets/lookbook/css/themes/indigo.css +57 -36
- data/app/assets/lookbook/css/themes/zinc.css +57 -36
- data/app/assets/lookbook/css/tooltip.css +5 -5
- data/app/components/lookbook/button/component.html.erb +2 -2
- data/app/components/lookbook/embed/component.html.erb +5 -5
- data/app/components/lookbook/embed/component.rb +8 -0
- data/app/components/lookbook/filter/component.html.erb +1 -1
- data/app/components/lookbook/header/component.html.erb +1 -1
- data/app/components/lookbook/inspector_panel/component.html.erb +4 -0
- data/app/components/lookbook/inspector_panel/component.rb +36 -0
- data/app/components/lookbook/nav/item/component.html.erb +1 -1
- data/app/components/lookbook/prose/component.html.erb +1 -1
- data/app/components/lookbook/tabs/dropdown_tab/component.html.erb +1 -1
- data/app/components/lookbook/tabs/tab/component.html.erb +1 -1
- data/app/components/lookbook/toolbar/component.html.erb +1 -1
- data/app/components/lookbook/viewport/component.css +1 -1
- data/app/components/lookbook/viewport/component.html.erb +1 -1
- data/app/controllers/lookbook/pages_controller.rb +1 -0
- data/app/controllers/lookbook/previews_controller.rb +15 -3
- data/app/helpers/lookbook/application_helper.rb +0 -6
- data/app/helpers/lookbook/preview_helper.rb +2 -3
- data/app/views/layouts/lookbook/application.html.erb +1 -1
- data/app/views/layouts/lookbook/page.html.erb +2 -2
- data/app/views/layouts/lookbook/shell.html.erb +6 -0
- data/app/views/layouts/lookbook/skeleton.html.erb +0 -6
- data/app/views/lookbook/previews/panels/_content.html.erb +1 -1
- data/app/views/lookbook/previews/panels/_notes.html.erb +2 -2
- data/app/views/lookbook/previews/panels/_params.html.erb +1 -1
- data/app/views/lookbook/previews/show.html.erb +5 -3
- data/lib/lookbook/config.rb +56 -39
- data/lib/lookbook/engine.rb +8 -0
- data/lib/lookbook/params.rb +12 -0
- data/lib/lookbook/store.rb +8 -0
- data/lib/lookbook/version.rb +1 -1
- data/public/lookbook-assets/css/lookbook.css +302 -150
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/css/themes/blue.css +57 -36
- data/public/lookbook-assets/css/themes/blue.css.map +1 -1
- data/public/lookbook-assets/css/themes/indigo.css +57 -36
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
- data/public/lookbook-assets/css/themes/zinc.css +57 -36
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
- data/public/lookbook-assets/js/embed.js +193 -193
- data/public/lookbook-assets/js/lookbook.js +1169 -1326
- data/public/lookbook-assets/js/lookbook.js.map +1 -1
- metadata +6 -4
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c0be6f1f0dc2e74e64585f664af67c7a3b05b8de3cd875cfa4732d2cecb37465
|
4
|
+
data.tar.gz: a315fa37ed07664a06096709b8bc88b81011e0f8f54b438362b8e6803eee6e3d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 87214ff5e7f0292276b5ddbd3ff4b1b41f8ae685e9fa28de92043af5f6a5736c51b8729a5432e3fe2c0ff7fe75dd6f7ee145796d36c0d08528d20c37e6886d06
|
7
|
+
data.tar.gz: c615b04dd5ee26613fd3ea804473727114cd8acc97aa6b0aeb4f280255adf56cd645228e45dd40e0e864915a328eb8c2a1adde198256bdf4b7923dbb4009a714
|
data/README.md
CHANGED
@@ -1,278 +1,51 @@
|
|
1
1
|
# Lookbook v1.0 [beta]
|
2
2
|
|
3
|
-
This is the
|
3
|
+
**This is the development branch for Lookbook v1.0.**
|
4
4
|
|
5
|
-
|
5
|
+
_For code and documentation for the current stable release see the [main branch](https://github.com/allmarkedup/lookbook/tree/main)._
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
The main goals of the v1.0 release are:
|
10
|
-
|
11
|
-
- [x] Rebuild app UI using ViewComponent components
|
12
|
-
- [x] Improve usability of the small screen/mobile layout
|
13
|
-
- [x] Add support for some limited UI color theme customisation
|
14
|
-
- [x] Add support for custom inspector panels
|
15
|
-
- [x] Remove the `experimental` flag from the [Pages](https://github.com/allmarkedup/lookbook#pages)
|
16
|
-
- [x] Improve the development/debugging setup, and allow previewing Lookbook's own components in Lookbook :-)
|
17
|
-
- [ ] Improve the test setup and test coverage, switch to RSpec **[in progress]**
|
18
|
-
|
19
|
-
**No breaking changes** are planned for user-facing features, although the app UI will include some minor visual updates and usability improvements.
|
20
|
-
|
21
|
-
## Demo app
|
22
|
-
|
23
|
-
There is a demo of the current v1.0-beta here: https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/
|
24
|
-
|
25
|
-
[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
|
26
|
-
|
27
|
-
## 👋 Testing and feedback - help wanted!
|
28
|
-
|
29
|
-
The bulk of the v1.0 'new feature' development work is now mostly complete, although testing and bug fixing is ongoing.
|
30
|
-
|
31
|
-
**If you are an existing Lookbook user** I'd greatly appreciate if you can kick the tyres on the v1.0 beta and open an issue with any bug reports, suggestions or feedback you might have.
|
32
|
-
|
33
|
-
### Main areas/points for testing/feedback:
|
34
|
-
|
35
|
-
- Existing Lookbook setups should continue to work **with no changes required**
|
36
|
-
- It's now possible to pick from one of a small set of pre-defined **UI themes** (plus finer-grained customisation coming soon). [See below](#ui-theming) for details.
|
37
|
-
- You can now [extend Lookbook](#extending-lookbook) to more closely customise it to your needs - testing and feedback around this area would be a great help!
|
38
|
-
|
39
|
-
> Any thoughts, comments or bug reports (even if unrelated to the specific areas above) would be much appreciated!
|
40
|
-
|
41
|
-
|
42
|
-
## UI theming
|
43
|
-
|
44
|
-
Lookbook v1.0 ships with a small set of pre-defined UI themes, which can be set using the `ui_theme` config option:
|
45
|
-
|
46
|
-
```ruby
|
47
|
-
# config/application.rb
|
48
|
-
config.lookbook.ui_theme = "blue"
|
49
|
-
```
|
50
|
-
|
51
|
-
Currently available themes are:
|
52
|
-
|
53
|
-
- `indigo` (default)
|
54
|
-
- `blue`
|
55
|
-
- `zinc`
|
56
|
-
|
57
|
-
> More themes and finer-grained customisation of theme colours is coming soon!
|
58
|
-
|
59
|
-
## Extending Lookbook
|
60
|
-
|
61
|
-
> Opening up Lookbook to more in-depth customisation is a work in progress and any feedback or use-case examples would be greatly appreciated!
|
62
|
-
|
63
|
-
* [Lifecycle Hooks](#lifecycle-hooks)
|
64
|
-
* [Adding inspector panels](#adding-inspector-panels)
|
65
|
-
* [Removing inspector panels](#removing-inspector-panels)
|
66
|
-
|
67
|
-
### Lifecycle hooks
|
68
|
-
|
69
|
-
A number of lifecycle hooks are available for use in triggering actions outside of Lookbook.
|
70
|
-
|
71
|
-
All hook callback blocks are yielded a `Lookbook` instance as the first argument. Some hooks additionally supply other arguments, see below for details.
|
72
|
-
|
73
|
-
#### `:after_initialize`
|
74
|
-
|
75
|
-
This is run once Lookbook has been set up and the initial parsing of files has been completed.
|
76
|
-
|
77
|
-
```ruby
|
78
|
-
Lookbook.after_initialize do |app|
|
79
|
-
puts "Lookbook version #{app.version} has started"
|
80
|
-
puts "There are #{app.previews.size} previews and #{app.pages.size} pages"
|
81
|
-
# other code here...
|
82
|
-
end
|
83
|
-
```
|
84
|
-
|
85
|
-
#### `:after_change`
|
86
|
-
|
87
|
-
Run each time a change is detected to a file that Lookbook is watching, unless listening for changes has been disabled in the config.
|
88
|
-
|
89
|
-
Receives a hash as the second argument with `:modified`, `:added`, and `:removed` properties, each of which is an array of affected file paths.
|
90
|
-
|
91
|
-
```ruby
|
92
|
-
Lookbook.after_change do |app, changes|
|
93
|
-
puts "Modified files: #{changes.modified.join("\n")}"
|
94
|
-
puts "Added files: #{changes.added.join("\n")}"
|
95
|
-
puts "Removed files: #{changes.removed.join("\n")}"
|
96
|
-
end
|
97
|
-
```
|
98
|
-
|
99
|
-
#### `:before_exit`
|
100
|
-
|
101
|
-
Run when the current process exits, after Lookbook has stopped any listeners.
|
102
|
-
|
103
|
-
```ruby
|
104
|
-
Lookbook.after_initialize do |app|
|
105
|
-
puts "Shutting down..."
|
106
|
-
end
|
107
|
-
```
|
108
|
-
|
109
|
-
### Adding inspector panels
|
110
|
-
|
111
|
-
It's now possible to add custom inspector panels/tabs to Lookbook using the `:define_panel` method:
|
112
|
-
|
113
|
-
```ruby
|
114
|
-
Lookbook.define_panel(<name>, <opts>)
|
115
|
-
```
|
116
|
-
|
117
|
-
* `<name>`: A unique name for the panel
|
118
|
-
* `<opts>`: A `Hash` of options (see below for details)
|
119
|
-
|
120
|
-
For example, a very simple 'info' panel could be created as follows:
|
121
|
-
|
122
|
-
```ruby
|
123
|
-
# config/application.rb
|
124
|
-
Lookbook.define_panel(:info, {
|
125
|
-
label: "Extra Info",
|
126
|
-
partial: "panels/info"
|
127
|
-
})
|
128
|
-
```
|
129
|
-
|
130
|
-
```erb
|
131
|
-
<!-- views/panels/_info.html.erb -->
|
132
|
-
<div>
|
133
|
-
<h2>Some information</h2>
|
134
|
-
<ul>
|
135
|
-
<li>You are looking at the '<%= preview.label %>' preview</li>
|
136
|
-
<li>The preview file path is: '<%= preview.full_path %>'<li>
|
137
|
-
<li>There are <%= examples.size %> examples in this preview<li>
|
138
|
-
</ul>
|
139
|
-
</div>
|
140
|
-
```
|
141
|
-
|
142
|
-
#### Panel templates
|
143
|
-
|
144
|
-
The panel partial template will have access to any `locals` defined in the [panel options](#panel-options), plus the following variables:
|
145
|
-
|
146
|
-
#### `panel`
|
147
|
-
|
148
|
-
The resolved panel options object (see below for details)
|
149
|
-
|
150
|
-
```erb
|
151
|
-
<h2><%= panel.label =></h2>
|
152
|
-
```
|
153
|
-
|
154
|
-
#### `preview`
|
155
|
-
|
156
|
-
An object representing the current preview:
|
157
|
-
|
158
|
-
* `preview.id`
|
159
|
-
* `preview.label`
|
160
|
-
* `preview.full_path`
|
161
|
-
* `preview.url_path`
|
162
|
-
* ...
|
163
|
-
|
164
|
-
#### `examples`
|
165
|
-
|
166
|
-
An array of objects representing the individual examples being rendered in the current preview. (For non-grouped previews, this array will always only have one item.)
|
167
|
-
|
168
|
-
Each example has the following properties:
|
169
|
-
|
170
|
-
* `example.output` - the rendered preview example output (String)
|
171
|
-
* `example.source` - the example source code (String)
|
172
|
-
* `example.source_lang` - a hash of information about the source language (Ruby or HTML/ERB, depending on whether the example uses a preview template)
|
173
|
-
* `example.id`
|
174
|
-
* `example.label`
|
175
|
-
* `example.full_path`
|
176
|
-
* `example.url_path`
|
177
|
-
* ...
|
178
|
-
|
179
|
-
|
180
|
-
#### `components`
|
181
|
-
|
182
|
-
An array of objects representing the components that are rendered in the preview. The components are 'guessed' from the Preview class name but if that doesn't work then they can be manually specified via annotations.
|
183
|
-
|
184
|
-
Each component object has the following properties:
|
185
|
-
|
186
|
-
* `component.name`
|
187
|
-
* `component.full_path`
|
188
|
-
* `component.dir_path`
|
189
|
-
* `component.template_path`
|
190
|
-
* `component.inline?`
|
191
|
-
|
192
|
-
To manually specify one or more components in the preview class, you can use the `@component` tag at the class level:
|
193
|
-
|
194
|
-
```ruby
|
195
|
-
# @component Elements::BigDangerButton
|
196
|
-
class ButtonComponentPreview < ViewComponent::Preview
|
197
|
-
|
198
|
-
def default
|
199
|
-
render Elements::BigDangerButton.new do
|
200
|
-
"Click here"
|
201
|
-
end
|
202
|
-
end
|
203
|
-
|
204
|
-
end
|
205
|
-
```
|
206
|
-
|
207
|
-
#### `context`
|
7
|
+
---
|
208
8
|
|
209
|
-
|
9
|
+
📣 **This v1.0 beta is still under active development.** However no breaking changes are envisaged to the current implementation and it should now be stable enough to be used for day-to-day development. Give it a try! 🎉
|
210
10
|
|
211
|
-
|
212
|
-
|
11
|
+
---
|
12
|
+
|
13
|
+
## 📚 Documentation
|
213
14
|
|
214
|
-
|
15
|
+
The new (work-in-progress) **documentation site** for Lookbook v1.0 is available here:
|
215
16
|
|
216
|
-
|
17
|
+
👉 **https://lookbook-docs-v1-beta.netlify.app/** 👈
|
217
18
|
|
218
|
-
|
219
|
-
* `app.pages` - Array of page objects
|
220
|
-
* `app.logger` - Logger instance
|
19
|
+
> Documentation source files are located in the `/docs` directory within this repository. The docs are built using [Bridgetown](https://www.bridgetownrb.com/).
|
221
20
|
|
222
|
-
|
21
|
+
## 🚀 Demo app
|
223
22
|
|
224
|
-
|
225
|
-
{
|
226
|
-
label: "New Panel",
|
227
|
-
position: 1,
|
228
|
-
partial: "path/to/view_partial",
|
229
|
-
content: "Some **markdown** content",
|
230
|
-
hotkey: "ctrl.n",
|
231
|
-
disabled: false,
|
232
|
-
show: true,
|
233
|
-
copy: "Content to be copied",
|
234
|
-
locals: {}
|
235
|
-
}
|
236
|
-
```
|
23
|
+
There is a demo of the latest v1.0 beta here:
|
237
24
|
|
238
|
-
|
239
|
-
* `position`: used for ordering the tabs
|
240
|
-
* `partial`: the path to the view template partial used to render the panel
|
241
|
-
* `content`: the default partial renders and displays the contents of this (markdown supported)
|
242
|
-
* `hotkey`: [keyboard shortcut](https://alpinejs.dev/directives/on#keyboard-events) to make panel become the active tab
|
243
|
-
* `disabled`: `true` or `false` - disabled tabs are still accessible but are greyed out in the UI
|
244
|
-
* `show`: `true` or `false` - whether or not to display the tab/panel
|
245
|
-
* `copy`: if present, the panel will display a copy button that copies the value of this property to the clipboard when clicked
|
246
|
-
* `locals`: a `Hash` of local variables that will be made available to the partial when rendering the panel
|
25
|
+
👉 **https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/** 👈
|
247
26
|
|
27
|
+
[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app-v1-0-beta.herokuapp.com/lookbook/)
|
248
28
|
|
249
|
-
All panel option values can be provided either as a **simple static value** or as a **lambda function** which will receive a hash of data relating to the currently active preview/example. For example:
|
250
29
|
|
251
|
-
|
252
|
-
{
|
253
|
-
label: "Params",
|
254
|
-
disabled: ->(data) { data.preview.params.none? } # grey out the Params tab if no params are set for the current preview
|
255
|
-
}
|
256
|
-
```
|
30
|
+
## 🔎 Release focus
|
257
31
|
|
258
|
-
The
|
32
|
+
The main goals of the v1.0 release are:
|
259
33
|
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
34
|
+
- [x] Rebuild app UI using ViewComponent components
|
35
|
+
- [x] Improve usability of the small screen/mobile layout
|
36
|
+
- [x] Add support for basic UI color theme customisation
|
37
|
+
- [x] Allow users to extend Lookbook with custom panels and by hooking into lifecycle events
|
38
|
+
- [x] Remove the `experimental` flag from the [Pages](https://github.com/allmarkedup/lookbook#pages)
|
39
|
+
- [x] Improve the development/debugging setup
|
40
|
+
- [ ] Improve the test setup and test coverage, switch to RSpec **[in progress]**
|
265
41
|
|
266
|
-
**
|
42
|
+
**No breaking changes** are planned for user-facing features, although the app UI will include some minor visual updates and usability improvements.
|
267
43
|
|
268
|
-
|
44
|
+
## 👋 Testing and feedback - help wanted!
|
269
45
|
|
270
|
-
|
46
|
+
The bulk of the v1.0 'new feature' development work is now mostly complete, although testing and bug fixing is ongoing.
|
271
47
|
|
272
|
-
|
273
|
-
# config/application.rb
|
274
|
-
Lookbook.remove_panel(:notes)
|
275
|
-
```
|
48
|
+
**If you are an existing Lookbook user** I'd greatly appreciate if you can kick the tyres on the v1.0 beta and open an issue with any bug reports, suggestions or feedback you might have, either about Lookbook itself or the [new docs site](https://lookbook-docs-v1-beta.netlify.app/).
|
276
49
|
|
277
50
|
## 🛠 Workbench
|
278
51
|
|
@@ -50,6 +50,6 @@
|
|
50
50
|
.form-input {
|
51
51
|
@apply text-lookbook-input-text placeholder:text-lookbook-input-text-placeholder placeholder:italic;
|
52
52
|
@apply border-lookbook-input-border focus:ring-lookbook-input-border-focus focus:border-lookbook-input-border-focus;
|
53
|
-
@apply rounded-md text-sm w-full bg-lookbook-input;
|
53
|
+
@apply rounded-md text-sm w-full bg-lookbook-input-bg;
|
54
54
|
}
|
55
55
|
}
|
@@ -1,42 +1,63 @@
|
|
1
1
|
:root {
|
2
|
-
--lookbook-
|
3
|
-
--lookbook-
|
4
|
-
--lookbook-
|
5
|
-
--lookbook-
|
6
|
-
--lookbook-
|
7
|
-
--lookbook-
|
8
|
-
--lookbook-
|
9
|
-
--lookbook-
|
10
|
-
--lookbook-
|
2
|
+
--lookbook-white: theme("colors.white");
|
3
|
+
--lookbook-accent-50: theme("colors.blue.50");
|
4
|
+
--lookbook-accent-100: theme("colors.blue.100");
|
5
|
+
--lookbook-accent-200: theme("colors.blue.200");
|
6
|
+
--lookbook-accent-300: theme("colors.blue.300");
|
7
|
+
--lookbook-accent-400: theme("colors.blue.400");
|
8
|
+
--lookbook-accent-500: theme("colors.blue.500");
|
9
|
+
--lookbook-accent-600: theme("colors.blue.600");
|
10
|
+
--lookbook-accent-700: theme("colors.blue.700");
|
11
|
+
--lookbook-accent-800: theme("colors.blue.800");
|
12
|
+
--lookbook-accent-900: theme("colors.blue.900");
|
13
|
+
--lookbook-base-50: theme("colors.zinc.50");
|
14
|
+
--lookbook-base-100: theme("colors.zinc.100");
|
15
|
+
--lookbook-base-200: theme("colors.zinc.200");
|
16
|
+
--lookbook-base-300: theme("colors.zinc.300");
|
17
|
+
--lookbook-base-400: theme("colors.zinc.400");
|
18
|
+
--lookbook-base-500: theme("colors.zinc.500");
|
19
|
+
--lookbook-base-600: theme("colors.zinc.600");
|
20
|
+
--lookbook-base-700: theme("colors.zinc.700");
|
21
|
+
--lookbook-base-800: theme("colors.zinc.800");
|
22
|
+
--lookbook-base-900: theme("colors.zinc.900");
|
23
|
+
--lookbook-text: var(--lookbook-base-800);
|
24
|
+
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
|
+
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
|
+
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
28
|
+
--lookbook-tooltip-text: var(--lookbook-white);
|
29
|
+
--lookbook-scrollbar: var(--lookbook-base-200);
|
30
|
+
--lookbook-scrollbar-hover: var(--lookbook-base-300);
|
31
|
+
--lookbook-toolbar-bg: var(--lookbook-white);
|
11
32
|
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
33
|
--lookbook-nav-text: var(--lookbook-text);
|
13
|
-
--lookbook-nav-toggle:
|
14
|
-
--lookbook-nav-icon:
|
15
|
-
--lookbook-nav-item-hover:
|
16
|
-
--lookbook-nav-item-active:
|
17
|
-
--lookbook-input:
|
18
|
-
--lookbook-input-border:
|
19
|
-
--lookbook-input-border-focus:
|
20
|
-
--lookbook-input-text:
|
21
|
-
--lookbook-input-text-placeholder:
|
22
|
-
--lookbook-input-toggle:
|
23
|
-
--lookbook-input-toggle-active:
|
24
|
-
--lookbook-prose:
|
25
|
-
--lookbook-prose-text:
|
26
|
-
--lookbook-prose-link:
|
27
|
-
--lookbook-tabs-text:
|
28
|
-
--lookbook-tabs-text-hover:
|
29
|
-
--lookbook-tabs-text-disabled:
|
30
|
-
--lookbook-tabs-
|
31
|
-
--lookbook-viewport-handle:
|
32
|
-
--lookbook-viewport-handle-icon:
|
33
|
-
--lookbook-viewport-handle-icon-hover:
|
34
|
-
--lookbook-sidebar:
|
35
|
-
--lookbook-page:
|
36
|
-
--lookbook-drawer:
|
37
|
-
--lookbook-header:
|
38
|
-
--lookbook-header-text:
|
39
|
-
--lookbook-header-border:
|
34
|
+
--lookbook-nav-toggle: var(--lookbook-base-500);
|
35
|
+
--lookbook-nav-icon-stroke: var(--lookbook-accent-500);
|
36
|
+
--lookbook-nav-item-hover: var(--lookbook-base-100);
|
37
|
+
--lookbook-nav-item-active: var(--lookbook-accent-50);
|
38
|
+
--lookbook-input-bg: var(--lookbook-white);
|
39
|
+
--lookbook-input-border: var(--lookbook-base-300);
|
40
|
+
--lookbook-input-border-focus: var(--lookbook-accent-200);
|
41
|
+
--lookbook-input-text: var(--lookbook-base-600);
|
42
|
+
--lookbook-input-text-placeholder: var(--lookbook-base-400);
|
43
|
+
--lookbook-input-toggle: var(--lookbook-base-300);
|
44
|
+
--lookbook-input-toggle-active: var(--lookbook-accent-500);
|
45
|
+
--lookbook-prose-bg: var(--lookbook-white);
|
46
|
+
--lookbook-prose-text: var(--lookbook-base-600);
|
47
|
+
--lookbook-prose-link: var(--lookbook-accent-900);
|
48
|
+
--lookbook-tabs-text: var(--lookbook-base-500);
|
49
|
+
--lookbook-tabs-text-hover: var(--lookbook-base-700);
|
50
|
+
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
|
+
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
|
+
--lookbook-viewport-handle: var(--lookbook-white);
|
53
|
+
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
|
+
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
|
+
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
|
+
--lookbook-page-bg: var(--lookbook-white);
|
57
|
+
--lookbook-drawer-bg: var(--lookbook-base-50);
|
58
|
+
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
|
+
--lookbook-header-text: var(--lookbook-white);
|
60
|
+
--lookbook-header-border: var(--lookbook-accent-700);
|
40
61
|
--lookbook-branding-text: var(--lookbook-header-text);
|
41
62
|
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
63
|
}
|
@@ -1,42 +1,63 @@
|
|
1
1
|
:root {
|
2
|
-
--lookbook-
|
3
|
-
--lookbook-
|
4
|
-
--lookbook-
|
5
|
-
--lookbook-
|
6
|
-
--lookbook-
|
7
|
-
--lookbook-
|
8
|
-
--lookbook-
|
9
|
-
--lookbook-
|
10
|
-
--lookbook-
|
2
|
+
--lookbook-white: theme("colors.white");
|
3
|
+
--lookbook-accent-50: theme("colors.indigo.50");
|
4
|
+
--lookbook-accent-100: theme("colors.indigo.100");
|
5
|
+
--lookbook-accent-200: theme("colors.indigo.200");
|
6
|
+
--lookbook-accent-300: theme("colors.indigo.300");
|
7
|
+
--lookbook-accent-400: theme("colors.indigo.400");
|
8
|
+
--lookbook-accent-500: theme("colors.indigo.500");
|
9
|
+
--lookbook-accent-600: theme("colors.indigo.600");
|
10
|
+
--lookbook-accent-700: theme("colors.indigo.700");
|
11
|
+
--lookbook-accent-800: theme("colors.indigo.800");
|
12
|
+
--lookbook-accent-900: theme("colors.indigo.900");
|
13
|
+
--lookbook-base-50: theme("colors.zinc.50");
|
14
|
+
--lookbook-base-100: theme("colors.zinc.100");
|
15
|
+
--lookbook-base-200: theme("colors.zinc.200");
|
16
|
+
--lookbook-base-300: theme("colors.zinc.300");
|
17
|
+
--lookbook-base-400: theme("colors.zinc.400");
|
18
|
+
--lookbook-base-500: theme("colors.zinc.500");
|
19
|
+
--lookbook-base-600: theme("colors.zinc.600");
|
20
|
+
--lookbook-base-700: theme("colors.zinc.700");
|
21
|
+
--lookbook-base-800: theme("colors.zinc.800");
|
22
|
+
--lookbook-base-900: theme("colors.zinc.900");
|
23
|
+
--lookbook-text: var(--lookbook-base-800);
|
24
|
+
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
|
+
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
|
+
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
28
|
+
--lookbook-tooltip-text: var(--lookbook-white);
|
29
|
+
--lookbook-scrollbar: var(--lookbook-base-200);
|
30
|
+
--lookbook-scrollbar-hover: var(--lookbook-base-300);
|
31
|
+
--lookbook-toolbar-bg: var(--lookbook-white);
|
11
32
|
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
33
|
--lookbook-nav-text: var(--lookbook-text);
|
13
|
-
--lookbook-nav-toggle:
|
14
|
-
--lookbook-nav-icon:
|
15
|
-
--lookbook-nav-item-hover:
|
16
|
-
--lookbook-nav-item-active:
|
17
|
-
--lookbook-input:
|
18
|
-
--lookbook-input-border:
|
19
|
-
--lookbook-input-border-focus:
|
20
|
-
--lookbook-input-text:
|
21
|
-
--lookbook-input-text-placeholder:
|
22
|
-
--lookbook-input-toggle:
|
23
|
-
--lookbook-input-toggle-active:
|
24
|
-
--lookbook-prose:
|
25
|
-
--lookbook-prose-text:
|
26
|
-
--lookbook-prose-link:
|
27
|
-
--lookbook-tabs-text:
|
28
|
-
--lookbook-tabs-text-hover:
|
29
|
-
--lookbook-tabs-text-disabled:
|
30
|
-
--lookbook-tabs-
|
31
|
-
--lookbook-viewport-handle:
|
32
|
-
--lookbook-viewport-handle-icon:
|
33
|
-
--lookbook-viewport-handle-icon-hover:
|
34
|
-
--lookbook-sidebar:
|
35
|
-
--lookbook-page:
|
36
|
-
--lookbook-drawer:
|
37
|
-
--lookbook-header:
|
38
|
-
--lookbook-header-text:
|
39
|
-
--lookbook-header-border:
|
34
|
+
--lookbook-nav-toggle: var(--lookbook-base-500);
|
35
|
+
--lookbook-nav-icon-stroke: var(--lookbook-accent-500);
|
36
|
+
--lookbook-nav-item-hover: var(--lookbook-base-100);
|
37
|
+
--lookbook-nav-item-active: var(--lookbook-accent-50);
|
38
|
+
--lookbook-input-bg: var(--lookbook-white);
|
39
|
+
--lookbook-input-border: var(--lookbook-base-300);
|
40
|
+
--lookbook-input-border-focus: var(--lookbook-accent-200);
|
41
|
+
--lookbook-input-text: var(--lookbook-base-600);
|
42
|
+
--lookbook-input-text-placeholder: var(--lookbook-base-400);
|
43
|
+
--lookbook-input-toggle: var(--lookbook-base-300);
|
44
|
+
--lookbook-input-toggle-active: var(--lookbook-accent-500);
|
45
|
+
--lookbook-prose-bg: var(--lookbook-white);
|
46
|
+
--lookbook-prose-text: var(--lookbook-base-600);
|
47
|
+
--lookbook-prose-link: var(--lookbook-accent-900);
|
48
|
+
--lookbook-tabs-text: var(--lookbook-base-500);
|
49
|
+
--lookbook-tabs-text-hover: var(--lookbook-base-700);
|
50
|
+
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
|
+
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
|
+
--lookbook-viewport-handle: var(--lookbook-white);
|
53
|
+
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
|
+
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
|
+
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
|
+
--lookbook-page-bg: var(--lookbook-white);
|
57
|
+
--lookbook-drawer-bg: var(--lookbook-base-50);
|
58
|
+
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
|
+
--lookbook-header-text: var(--lookbook-white);
|
60
|
+
--lookbook-header-border: var(--lookbook-accent-700);
|
40
61
|
--lookbook-branding-text: var(--lookbook-header-text);
|
41
62
|
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
63
|
}
|
@@ -1,42 +1,63 @@
|
|
1
1
|
:root {
|
2
|
-
--lookbook-
|
3
|
-
--lookbook-
|
4
|
-
--lookbook-
|
5
|
-
--lookbook-
|
6
|
-
--lookbook-
|
7
|
-
--lookbook-
|
8
|
-
--lookbook-
|
9
|
-
--lookbook-
|
10
|
-
--lookbook-
|
2
|
+
--lookbook-white: theme("colors.white");
|
3
|
+
--lookbook-accent-50: theme("colors.zinc.50");
|
4
|
+
--lookbook-accent-100: theme("colors.zinc.100");
|
5
|
+
--lookbook-accent-200: theme("colors.zinc.200");
|
6
|
+
--lookbook-accent-300: theme("colors.zinc.300");
|
7
|
+
--lookbook-accent-400: theme("colors.zinc.400");
|
8
|
+
--lookbook-accent-500: theme("colors.zinc.500");
|
9
|
+
--lookbook-accent-600: theme("colors.zinc.600");
|
10
|
+
--lookbook-accent-700: theme("colors.zinc.700");
|
11
|
+
--lookbook-accent-800: theme("colors.zinc.800");
|
12
|
+
--lookbook-accent-900: theme("colors.zinc.900");
|
13
|
+
--lookbook-base-50: theme("colors.zinc.50");
|
14
|
+
--lookbook-base-100: theme("colors.zinc.100");
|
15
|
+
--lookbook-base-200: theme("colors.zinc.200");
|
16
|
+
--lookbook-base-300: theme("colors.zinc.300");
|
17
|
+
--lookbook-base-400: theme("colors.zinc.400");
|
18
|
+
--lookbook-base-500: theme("colors.zinc.500");
|
19
|
+
--lookbook-base-600: theme("colors.zinc.600");
|
20
|
+
--lookbook-base-700: theme("colors.zinc.700");
|
21
|
+
--lookbook-base-800: theme("colors.zinc.800");
|
22
|
+
--lookbook-base-900: theme("colors.zinc.900");
|
23
|
+
--lookbook-text: var(--lookbook-base-800);
|
24
|
+
--lookbook-divider: var(--lookbook-base-300);
|
25
|
+
--lookbook-icon-button-stroke: var(--lookbook-base-400);
|
26
|
+
--lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
|
27
|
+
--lookbook-tooltip-bg: var(--lookbook-accent-500);
|
28
|
+
--lookbook-tooltip-text: var(--lookbook-white);
|
29
|
+
--lookbook-scrollbar: var(--lookbook-base-200);
|
30
|
+
--lookbook-scrollbar-hover: var(--lookbook-base-300);
|
31
|
+
--lookbook-toolbar-bg: var(--lookbook-white);
|
11
32
|
--lookbook-toolbar-divider: var(--lookbook-divider);
|
12
33
|
--lookbook-nav-text: var(--lookbook-text);
|
13
|
-
--lookbook-nav-toggle:
|
14
|
-
--lookbook-nav-icon:
|
15
|
-
--lookbook-nav-item-hover:
|
16
|
-
--lookbook-nav-item-active:
|
17
|
-
--lookbook-input:
|
18
|
-
--lookbook-input-border:
|
19
|
-
--lookbook-input-border-focus:
|
20
|
-
--lookbook-input-text:
|
21
|
-
--lookbook-input-text-placeholder:
|
22
|
-
--lookbook-input-toggle:
|
23
|
-
--lookbook-input-toggle-active:
|
24
|
-
--lookbook-prose:
|
25
|
-
--lookbook-prose-text:
|
26
|
-
--lookbook-prose-link:
|
27
|
-
--lookbook-tabs-text:
|
28
|
-
--lookbook-tabs-text-hover:
|
29
|
-
--lookbook-tabs-text-disabled:
|
30
|
-
--lookbook-tabs-
|
31
|
-
--lookbook-viewport-handle:
|
32
|
-
--lookbook-viewport-handle-icon:
|
33
|
-
--lookbook-viewport-handle-icon-hover:
|
34
|
-
--lookbook-sidebar:
|
35
|
-
--lookbook-page:
|
36
|
-
--lookbook-drawer:
|
37
|
-
--lookbook-header:
|
38
|
-
--lookbook-header-text:
|
39
|
-
--lookbook-header-border:
|
34
|
+
--lookbook-nav-toggle: var(--lookbook-base-500);
|
35
|
+
--lookbook-nav-icon-stroke: var(--lookbook-accent-500);
|
36
|
+
--lookbook-nav-item-hover: var(--lookbook-base-100);
|
37
|
+
--lookbook-nav-item-active: var(--lookbook-accent-50);
|
38
|
+
--lookbook-input-bg: var(--lookbook-white);
|
39
|
+
--lookbook-input-border: var(--lookbook-base-300);
|
40
|
+
--lookbook-input-border-focus: var(--lookbook-accent-200);
|
41
|
+
--lookbook-input-text: var(--lookbook-base-600);
|
42
|
+
--lookbook-input-text-placeholder: var(--lookbook-base-400);
|
43
|
+
--lookbook-input-toggle: var(--lookbook-base-300);
|
44
|
+
--lookbook-input-toggle-active: var(--lookbook-accent-500);
|
45
|
+
--lookbook-prose-bg: var(--lookbook-white);
|
46
|
+
--lookbook-prose-text: var(--lookbook-base-600);
|
47
|
+
--lookbook-prose-link: var(--lookbook-accent-900);
|
48
|
+
--lookbook-tabs-text: var(--lookbook-base-500);
|
49
|
+
--lookbook-tabs-text-hover: var(--lookbook-base-700);
|
50
|
+
--lookbook-tabs-text-disabled: var(--lookbook-base-300);
|
51
|
+
--lookbook-tabs-border-active: var(--lookbook-accent-400);
|
52
|
+
--lookbook-viewport-handle: var(--lookbook-white);
|
53
|
+
--lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
|
54
|
+
--lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
|
55
|
+
--lookbook-sidebar-bg: var(--lookbook-base-50);
|
56
|
+
--lookbook-page-bg: var(--lookbook-white);
|
57
|
+
--lookbook-drawer-bg: var(--lookbook-base-50);
|
58
|
+
--lookbook-header-bg: var(--lookbook-accent-600);
|
59
|
+
--lookbook-header-text: var(--lookbook-white);
|
60
|
+
--lookbook-header-border: var(--lookbook-accent-700);
|
40
61
|
--lookbook-branding-text: var(--lookbook-header-text);
|
41
62
|
--lookbook-draggable-hint: rgb(224 231 255 / 0.2);
|
42
63
|
}
|