css-zero 0.0.10 → 0.0.12

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +300 -102
  3. data/app/assets/stylesheets/_reset.css +1 -1
  4. data/app/assets/stylesheets/colors.css +0 -26
  5. data/app/assets/stylesheets/transform.css +32 -40
  6. data/app/assets/stylesheets/transition.css +2 -7
  7. data/app/assets/stylesheets/zutilities.css +43 -9
  8. data/lib/css-zero.rb +3 -6
  9. data/lib/css_zero/engine.rb +4 -0
  10. data/lib/css_zero/version.rb +1 -3
  11. data/lib/generators/css_zero/add/USAGE +8 -0
  12. data/lib/generators/css_zero/add/add_generator.rb +28 -0
  13. data/lib/generators/css_zero/add/resources.yml +28 -0
  14. data/lib/generators/css_zero/add/templates/app/assets/images/chevron-down.svg +1 -0
  15. data/lib/generators/css_zero/add/templates/app/assets/images/circle-alert.svg +1 -0
  16. data/lib/generators/css_zero/add/templates/app/assets/images/loader-circle.svg +1 -0
  17. data/lib/generators/css_zero/add/templates/app/assets/images/select-arrow.svg +1 -0
  18. data/lib/generators/css_zero/add/templates/app/assets/images/x.svg +1 -0
  19. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/accordion.css +44 -0
  20. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert.css +18 -0
  21. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/alert_dialog.css +59 -0
  22. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/badge.css +30 -0
  23. data/{app/assets/stylesheets/buttons.css → lib/generators/css_zero/add/templates/app/assets/stylesheets/button.css} +32 -14
  24. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/card.css +6 -0
  25. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/dialog.css +64 -0
  26. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/input.css +51 -0
  27. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/progress.css +45 -0
  28. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/switch.css +41 -0
  29. data/lib/generators/css_zero/add/templates/app/assets/stylesheets/table.css +27 -0
  30. data/lib/generators/css_zero/add/templates/app/javascript/controllers/dialog_control_controller.js +17 -0
  31. data/lib/generators/css_zero/install/USAGE +5 -0
  32. data/lib/generators/css_zero/install/install_generator.rb +9 -0
  33. data/lib/generators/css_zero/install/templates/app/assets/stylesheets/base.css +46 -0
  34. metadata +26 -5
  35. data/app/assets/stylesheets/dialog.css +0 -33
  36. data/app/assets/stylesheets/inputs.css +0 -54
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 1627717e8a9e7cedf50a2bf68f7fff9eb3b9a36991d6b9a68dc54271d6a035a2
4
- data.tar.gz: 6a5fbdf78fe2d73522011672a7b3b536a001e0eeb5953a4ffc7171aca361bfab
3
+ metadata.gz: 945da122c69f2e0e60107ec644977720638f884d8df7090b4c1d32a4f4c960d9
4
+ data.tar.gz: 28777cbfd808aaafe8a3401c34d987fc989b4ae13580361682414341f87b1e32
5
5
  SHA512:
6
- metadata.gz: 4efd2234d0690ea705ccd894db2b5d89bce059177f7620d65f0e1d998bf41e94a6470a626b4600e96b1cb99ea9c2e77d95c8e7961569c3a8908045ee1bc2a8af
7
- data.tar.gz: 83c1cef52f7a3f328af20e97720464c8043d63da94b8694d20b74fdd80762a5c838f624fc4b52ef9224d3e4fcf49fe4993ffc1bc010a49d248af24ba21a821d0
6
+ metadata.gz: e426c0ab8a1dd0223bc6a789720bb82c1ae41f3041371618dd647433e0b052dcd7f00ef28a0881837c7dc2c20d0e590fef18df35281dc6b0bd8c7431388b7ddd
7
+ data.tar.gz: 42efd1be6dea0b6493e501c637b2b8c3a07ad68af08a95cc5086ca2a3580b34d6d81354a1be861503d70eac1f62c19a6608b20e9dc4002443a6c6860ee72cb7f
data/README.md CHANGED
@@ -4,47 +4,29 @@ An opinionated CSS starter kit for your application. You can think of it like a
4
4
 
5
5
  ## Installation
6
6
 
7
+ Is recommended to use [Propshaft](https://github.com/rails/propshaft), make sure to load all the CSS files in your `layout.html.erb`.
8
+
9
+ ```html+erb
10
+ <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
11
+ ```
12
+
13
+ Add this gem to your project.
14
+
7
15
  ```
8
16
  bundle add css-zero
9
17
  ```
10
18
 
11
- If you are using [Propshaft](https://github.com/rails/propshaft) (recommended) make sure to load all the CSS files in your layout.html.erb.
12
-
13
- <details>
14
- <summary>Click here to see how</summary>
19
+ Add the base.css file to your application.
15
20
 
16
- ```html+erb
17
- <%= stylesheet_link_tag :all, "data-turbo-track": "reload" %>
18
21
  ```
19
- </details>
22
+ bin/rails generate css_zero:install
23
+ ```
20
24
 
21
- If you are using [Sprockets](https://github.com/rails/sprockets) make sure to load all the CSS files in your application.css.
25
+ Add only the components you need. (Optional)
22
26
 
23
- <details>
24
- <summary>Click here to see how</summary>
25
-
26
- ```css
27
- *= require _reset
28
- *= require animations
29
- *= require base
30
- *= require borders
31
- *= require buttons
32
- *= require colors
33
- *= require dialog
34
- *= require effects
35
- *= require filters
36
- *= require grid
37
- *= require inputs
38
- *= require separators
39
- *= require sizes
40
- *= require transform
41
- *= require transition
42
- *= require typography
43
- *= require_tree .
44
- *= require_self
45
- *= require zutilities
46
- ```
47
- </details>
27
+ ```
28
+ bin/rails generate css_zero:add accordion alert alert_dialog badge button card dialog input progress switch table
29
+ ```
48
30
 
49
31
  ## Usage
50
32
 
@@ -53,130 +35,346 @@ If you are using [Sprockets](https://github.com/rails/sprockets) make sure to lo
53
35
  Write most page content using utility classes.
54
36
  </h1>
55
37
 
56
- <div class="component">
57
- Write custom CSS using predefined variables for components.
38
+ <div class="custom-component">
39
+ Create components using CSS variables.
40
+ </div>
41
+
42
+ <div class="card">
43
+ Optionally, copy pre-built components into your application.
58
44
  </div>
59
45
  ```
60
46
 
61
47
  ```css
62
- .component {
48
+ .custom-component {
63
49
  background-color: var(--red-500);
64
50
  border-radius: var(--rounded);
65
- height: var(--size-4);
51
+ block-size: var(--size-4);
66
52
  }
67
53
  ```
68
54
 
69
- Check the [CSS files](app/assets/stylesheets) in the repository for reference.
55
+ Check the [CSS files](app/assets/stylesheets) in the repository to see the available variables and utility classes.
70
56
 
71
- ## Inputs
57
+ ## Components
72
58
 
73
- <img width="436" alt="Inputs" src="https://github.com/lazaronixon/css-zero/assets/2651240/9935df82-606f-4ebb-bfd7-d18c9bc8b5f5">
59
+ ### Accordion
60
+
61
+ <img width="500" alt="accordion" src="https://github.com/lazaronixon/css-zero/assets/2651240/9644edec-9bb1-4e1f-b2da-19c7fb5a540f">
62
+
63
+ <details>
64
+ <summary>Show me the code</summary>
74
65
 
75
66
  ```html
76
- <div class="flex flex-col w-full gap" style="max-inline-size: 24rem;">
77
- <div class="flex flex-col grow gap-small">
78
- <label for="name_field" class="text-sm font-medium">Full name</label>
79
- <input type="text" id="name_field" class="input">
80
- </div>
67
+ <div class="accordion">
68
+ <details name="my_accordion">
69
+ <summary>Is it accessible?</summary>
70
+ <p class="text-sm">Yes. It adheres to the WAI-ARIA design pattern.</p>
71
+ </details>
72
+ <details name="my_accordion">
73
+ <summary>Is it styled?</summary>
74
+ <p class="text-sm">Yes. It comes with default styles that matches the other components' aesthetic.</p>
75
+ </details>
76
+ <details name="my_accordion">
77
+ <summary>Is it animated?</summary>
78
+ <p class="text-sm">Yes. It's animated by default, but you can disable it if you prefer.</p>
79
+ </details>
80
+ </div>
81
+ ```
82
+ </details>
81
83
 
82
- <div class="flex flex-col grow gap-small">
83
- <label for="date_field" class="text-sm font-medium">Date picker</label>
84
- <input type="date" id="date_field" class="input">
85
- </div>
84
+ ### Alert
86
85
 
87
- <div class="flex flex-col grow gap-small">
88
- <label for="file_field" class="text-sm font-medium">File</label>
89
- <input type="file" id="file_field" class="input">
90
- </div>
86
+ <img width="500" alt="alert" src="https://github.com/lazaronixon/css-zero/assets/2651240/eae5c6dd-f6b4-4c01-bec1-cd7e9523d0a6">
91
87
 
92
- <div class="flex flex-col grow gap-small">
93
- <label for="age_range_Field" class="text-sm font-medium">Age Range</label>
94
- <select id="age_range_Field" class="input">
95
- <option value="0-13">0-13</option>
96
- <option value="14-17">14-17</option>
97
- </select>
98
- </div>
88
+ <details>
89
+ <summary>Show me the code</summary>
99
90
 
100
- <div class="flex flex-col grow gap-small">
101
- <label for="comment_field" class="text-sm font-medium">Comment</label>
102
- <textarea id="comment_field" class="input"></textarea>
91
+ ```html+erb
92
+ <div class="alert alert--negative flex items-start gap">
93
+ <%= image_tag("circle-alert.svg", role: "presentation", size: 16) %>
94
+ <div class="flex flex-col">
95
+ <h1 class="font-medium leading-none mbe-1">Error</h1>
96
+ <p class="text-sm">Your session has expired. Please log in again.</p>
103
97
  </div>
98
+ </div>
99
+ ```
100
+ </details>
104
101
 
105
- <div class="flex items-center gap-small">
106
- <input type="checkbox" id="terms">
107
- <label for="terms" class="text-sm font-medium">Accept terms and conditions</label>
108
- </div>
102
+ ### Alert Dialog
103
+
104
+ <img width="500" alt="alert_dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/483b00fc-0330-45b3-82c5-dc4118987564">
105
+
106
+ <details>
107
+ <summary>Show me the code</summary>
108
+
109
+ ```html
110
+ <div>
111
+ <dialog id="my_alert_dialog" class="alert-dialog">
112
+ <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
113
+ <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
114
+
115
+ <div class="flex justify-end gap-sm mbs-4">
116
+ <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
117
+ <button class="btn btn--primary">Continue</button>
118
+ </div>
119
+ </dialog>
120
+
121
+ <button class="btn" data-controller="dialog-control" data-dialog-control-target-value="my_alert_dialog" data-action="dialog-control#showModal">
122
+ Show alert dialog
123
+ </button>
109
124
  </div>
110
125
  ```
126
+ </details>
127
+
128
+ ### Badge
111
129
 
112
- ## Buttons
130
+ <img width="400" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/6a700dc4-0fd5-46f6-9902-a9bde5f7febb">
113
131
 
114
- <img width="783" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/4e6a6829-5dd0-4eff-9b2f-33c9de85d3ef">
132
+ <details>
133
+ <summary>Show me the code</summary>
115
134
 
116
135
  ```html
117
- <div class="flex justify-center gap">
136
+ <div class="flex justify-start gap">
137
+ <div class="badge">Badge</div>
138
+ <div class="badge badge--secondary">Secondary</div>
139
+ <div class="badge badge--outline">Outline</div>
140
+ <div class="badge badge--positive">Positive</div>
141
+ <div class="badge badge--negative">Negative</div>
142
+ </div>
143
+ ```
144
+ </details>
145
+
146
+ ### Button
147
+
148
+ <img width="500" alt="button" src="https://github.com/lazaronixon/css-zero/assets/2651240/0c2ee625-9e6b-4f9c-8437-8d6751e4e508">
149
+
150
+ <details>
151
+ <summary>Show me the code</summary>
152
+
153
+ ```html
154
+ <div class="flex flex-wrap items-center gap" aria-busy>
118
155
  <button class="btn">Primary</button>
119
156
  <button class="btn btn--secondary">Secondary</button>
120
157
  <button class="btn btn--outline">Outline</button>
121
158
  <button class="btn btn--plain">Plain</button>
122
- <button class="btn btn--positive">Positive</button>
123
159
  <button class="btn btn--negative">Negative</button>
124
160
 
125
161
  <button class="btn">
126
- <%= image_tag "plus.svg", role: "presentation", size: 20 %>
162
+ <%= image_tag "circle-alert.svg", role: "presentation", size: 16 %>
127
163
  <span>With icon</span>
128
164
  </button>
165
+
166
+ <button class="btn btn--loading" disabled>
167
+ <span>Please wait</span>
168
+ </button>
129
169
  </div>
130
170
  ```
171
+ </details>
131
172
 
132
- ## Dialog
173
+ ### Card
133
174
 
134
- <img width="572" alt="Dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/381dd7eb-8024-4ffc-992a-d47d370a3c24">
175
+ <img width="366" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/f4077b91-2d0c-49db-9fb6-2955f8575217">
176
+
177
+ <details>
178
+ <summary>Show me the code</summary>
135
179
 
136
180
  ```html
137
- <dialog id="my_modal" class="dialog">
138
- <h1 class="text-lg font-semibold">Are you absolutely sure?</h1>
139
- <p class="text-sm text-subtle mbs-2">This action cannot be undone. This will permanently delete your account and remove your data from our servers.</p>
181
+ <div class="card flex flex-col gap" style="width: 350px; gap: 1.5rem;">
182
+ <div class="flex flex-col gap-sm">
183
+ <h1 class="text-2xl font-semibold leading-none">Create project</h1>
184
+ <p class="text-sm text-subtle">Deploy your new project in one-click.</p>
185
+ </div>
140
186
 
141
- <div class="flex gap-small justify-end mbs-4">
142
- <form method="dialog"><button class="btn btn--outline">Cancel</button></form>
143
- <button class="btn">Continue</button>
187
+ <div class="flex flex-col gap">
188
+ <div class="flex flex-col gap-sm">
189
+ <label for="name" class="text-sm font-medium">Name</label>
190
+ <input type="text" id="name" placeholder="Name of your project" class="input">
191
+ </div>
192
+
193
+ <div class="flex flex-col gap-sm">
194
+ <label for="framework" class="text-sm font-medium">Framework</label>
195
+ <select id="framework" class="input">
196
+ <option value="">Select</option>
197
+ <option value="rails">Ruby on Rails</option>
198
+ <option value="laravel">Laravel</option>
199
+ <option value="next">Next</option>
200
+ </select>
201
+ </div>
144
202
  </div>
145
- </dialog>
146
203
 
147
- <button class="btn" onClick="my_modal.showModal();">Show modal</button>
204
+ <div class="flex justify-between">
205
+ <button class="btn btn--outline">Cancel</button>
206
+ <button class="btn">Destroy</button>
207
+ </div>
208
+ </div>
148
209
  ```
210
+ </details>
149
211
 
150
- ## Customization
212
+ ### Dialog
151
213
 
152
- ### Root level
214
+ <img width="400" alt="dialog" src="https://github.com/lazaronixon/css-zero/assets/2651240/50c8af20-46bb-4bf9-a233-78877f49e086">
153
215
 
154
- ```css
155
- :root {
156
- --color-bg: white;
157
- --color-text: var(--zinc-950);
158
- --color-text-reversed: white;
159
- --color-text-subtle: var(--zinc-500);
160
- --color-border: var(--zinc-200);
161
- }
216
+ <details>
217
+ <summary>Show me the code</summary>
218
+
219
+ ```html
220
+ <artice class="flex flex-col pb-10 pi-2 mi-auto w-full" style="gap: 4rem; max-width: 32rem">
221
+ <div>
222
+ <dialog id="my_dialog" class="dialog" style="max-inline-size: 430px;" popover>
223
+ <button class="btn btn--plain p-0 dialog__close" popovertarget="my_dialog" popovertargetaction="hide">
224
+ <%= image_tag "x.svg", aria: { hidden: "true" }, size: 16 %>
225
+ <span class="sr-only">Close</span>
226
+ </button>
227
+
228
+ <div class="flex flex-col gap">
229
+ <div class="flex flex-col gap-sm">
230
+ <h1 class="text-lg leading-none font-semibold">Edit profile</h1>
231
+ <p class="text-sm text-subtle">Make changes to your profile here. Click save when you're done.</p>
232
+ </div>
233
+
234
+ <div class="flex flex-col mb-4 gap">
235
+ <div class="grid grid-cols-4 items-center gap">
236
+ <label for="name" class="text-sm font-medium text-end">Name</label>
237
+ <input type="text" id="name" value="Lázaro Nixon" class="input col-span-3">
238
+ </div>
239
+
240
+ <div class="grid grid-cols-4 items-center gap">
241
+ <label for="username" class="text-sm font-medium text-end">Username</label>
242
+ <input type="text" id="username" value="@lazaronixon" class="input col-span-3">
243
+ </div>
244
+ </div>
245
+
246
+ <div class="flex items-center justify-end">
247
+ <input type="submit" value= "Save changes" class="btn"/>
248
+ </div>
249
+ </div>
250
+ </dialog>
251
+
252
+ <button class="btn" popovertarget="my_dialog">
253
+ Show dialog
254
+ </button>
255
+ </div>
162
256
  ```
257
+ </details>
163
258
 
164
- ### Class level
259
+ ### Input
165
260
 
166
- ```css
167
- .btn--colored {
168
- --btn-background: var(--cyan-500);
169
- --btn-color: var(--cyan-950);
170
- }
261
+ <img width="500" alt="input" src="https://github.com/lazaronixon/css-zero/assets/2651240/f33a9d34-44b5-4c6b-ad88-1f0fd00b7291">
262
+
263
+ <details>
264
+ <summary>Show me the code</summary>
265
+
266
+ ```html+erb
267
+ <%= form_with url: "/users", class: "flex flex-col gap" do |form| %>
268
+ <div class="flex flex-col gap-sm">
269
+ <%= form.label :name, class: "text-sm font-medium" %>
270
+ <%= form.text_field :name, class: "input" %>
271
+ </div>
272
+
273
+ <div class="flex flex-col gap-sm">
274
+ <%= form.label :pick_a_date, class: "text-sm font-medium" %>
275
+ <%= form.date_field :pick_a_date, class: "input" %>
276
+ </div>
277
+
278
+ <div class="flex flex-col gap-sm">
279
+ <%= form.label :age_range, class: "text-sm font-medium" %>
280
+ <%= form.select :age_range, ["0-13", "14-17", "18-23"], {}, class: "input" %>
281
+ </div>
282
+
283
+ <div class="flex flex-col gap-sm">
284
+ <%= form.label :comment, class: "text-sm font-medium" %>
285
+ <%= form.text_area :comment, rows: 3, class: "input" %>
286
+ </div>
287
+
288
+ <div class="flex items-center gap-sm">
289
+ <%= form.check_box :status, class: "checkbox" %>
290
+ <%= form.label :status, "Send a copy to yourself", class: "text-sm font-medium" %>
291
+ </div>
292
+ <% end %>
293
+ ```
294
+ </details>
295
+
296
+ ### Progress
297
+
298
+ <img width="500" alt="progress" src="https://github.com/lazaronixon/css-zero/assets/2651240/32f7b665-ae85-48de-9338-0c255019122e">
299
+
300
+ <details>
301
+ <summary>Show me the code</summary>
302
+
303
+ ```html
304
+ <label>
305
+ <span class="sr-only">Loading progress</span>
306
+ <progress value="75" max="100" class="progress"></progress>
307
+ </label>
308
+ ```
309
+ </details>
310
+
311
+ ### Switch
312
+
313
+ <img width="175" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/b47e28fb-6492-402c-b422-b896dfd3b713">
314
+
315
+ <details>
316
+ <summary>Show me the code</summary>
317
+
318
+ ```html+erb
319
+ <div class="flex items-center gap-sm">
320
+ <input type="checkbox" class="switch">
321
+ <label for="status" class="text-sm font-medium">Airplane Mode</label>
322
+ </div>
171
323
  ```
324
+ </details>
325
+
326
+ ### Table
172
327
 
173
- ### Style level
328
+ <img width="500" alt="image" src="https://github.com/lazaronixon/css-zero/assets/2651240/c7b261a8-6d38-46f2-bf69-fd9385776bbe">
329
+
330
+ <details>
331
+ <summary>Show me the code</summary>
174
332
 
175
333
  ```html
176
- <button class="btn" style="--btn-background: #67e8f9; --btn-color: #083344;">
177
- Colored button
178
- </button>
334
+ <table class="table">
335
+ <thead>
336
+ <tr>
337
+ <th>Invoice</th>
338
+ <th>Status</th>
339
+ <th>Method</th>
340
+ <th class="text-end">Amount</th>
341
+ </tr>
342
+ </thead>
343
+ <tbody>
344
+ <tr>
345
+ <th>INV001</th>
346
+ <td>Paid</td>
347
+ <td>Credit Card</td>
348
+ <td class="text-end">$250.00</td>
349
+ </tr>
350
+ <tr>
351
+ <th>INV002</th>
352
+ <td>Pending</td>
353
+ <td>PayPal</td>
354
+ <td class="text-end">$150.00</td>
355
+ </tr>
356
+ <tr>
357
+ <th>INV003</th>
358
+ <td>Unpaid</td>
359
+ <td>Transfer</td>
360
+ <td class="text-end">$350.00</td>
361
+ </tr>
362
+ <tr>
363
+ <th>INV004</th>
364
+ <td>Paid</td>
365
+ <td>Credit Card</td>
366
+ <td class="text-end">$450.00</td>
367
+ </tr>
368
+ </tbody>
369
+ <tfoot>
370
+ <tr>
371
+ <td colspan="3">Paid</td>
372
+ <td class="text-end">$2,500.00</td>
373
+ </tr>
374
+ </tfoot>
375
+ </table>
179
376
  ```
377
+ </details>
180
378
 
181
379
  ## Development
182
380
 
data/app/assets/stylesheets/_reset.css CHANGED
@@ -62,7 +62,7 @@ body {
62
62
  hr {
63
63
  height: 0; /* 1 */
64
64
  color: inherit; /* 2 */
65
- border-top-width: 1px; /* 3 */
65
+ border-block-start-width: 1px; /* 3 */
66
66
  }
67
67
 
68
68
  /*
data/app/assets/stylesheets/colors.css CHANGED
@@ -1,5 +1,4 @@
1
1
  :root {
2
- /* Named color values */
3
2
  --slate-50: #f8fafc;
4
3
  --slate-100: #f1f5f9;
5
4
  --slate-200: #e2e8f0;
@@ -263,29 +262,4 @@
263
262
  --rose-800: #9f1239;
264
263
  --rose-900: #881337;
265
264
  --rose-950: #4c0519;
266
-
267
- color-scheme: light dark;
268
-
269
- /* Abstractions */
270
- --color-bg: light-dark(white, var(--zinc-950));
271
- --color-text: light-dark(var(--zinc-950), var(--zinc-50));
272
- --color-text-reversed: light-dark(var(--zinc-50), var(--zinc-950));
273
- --color-text-subtle: light-dark(var(--zinc-500), var(--zinc-400));
274
- --color-selected: light-dark(var(--zinc-400), var(--zinc-300));
275
- --color-border: light-dark(var(--zinc-200), var(--zinc-800));
276
-
277
- /* Accent colors */
278
- --color-primary: light-dark(var(--zinc-900), var(--zinc-50));
279
- --color-secondary: light-dark(var(--zinc-100), var(--zinc-800));
280
- --color-negative: light-dark(var(--red-600), var(--red-900));
281
- --color-positive: light-dark(var(--green-600), var(--green-900));
282
-
283
- /* Filtered color values */
284
- --color-filter-text: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
285
- --color-filter-text-reversed: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
286
-
287
- @media (prefers-color-scheme: dark) {
288
- --color-filter-text: invert(100%) sepia(67%) saturate(49%) hue-rotate(230deg) brightness(119%) contrast(96%);
289
- --color-filter-text-reversed: invert(5%) sepia(10%) saturate(497%) hue-rotate(201deg) brightness(96%) contrast(102%);
290
- }
291
265
  }
data/app/assets/stylesheets/transform.css CHANGED
@@ -2,56 +2,48 @@
2
2
  /****************************************************************
3
3
  * Scale
4
4
  * Variables for scaling elements with transform.
5
- * transform: var(--scale-0);
5
+ * transform: scale(--scale-100);
6
6
  *****************************************************************/
7
- --scale-0: 0;
8
- --scale-50: 0.50;
9
- --scale-75: 0.75;
10
- --scale-90: 0.90;
11
- --scale-95: 0.95;
12
- --scale-100: 1;
13
- --scale-105: 1.05;
14
- --scale-110: 1.10;
15
- --scale-125: 1.25;
16
- --scale-150: 1.50;
7
+ --scale-50: scale(0.50);
8
+ --scale-75: scale(0.75);
9
+ --scale-90: scale(0.90);
10
+ --scale-95: scale(0.95);
11
+ --scale-100: scale(1);
12
+ --scale-105: scale(1.05);
13
+ --scale-110: scale(1.10);
14
+ --scale-125: scale(1.25);
15
+ --scale-150: scale(1.50);
17
16
 
18
17
  /****************************************************************
19
18
  * Rotate
20
19
  * Variables for rotating elements with transform.
21
20
  * transform: var(--rotate-45);
22
21
  *****************************************************************/
23
- --rotate-0: 0deg;
24
- --rotate-1: 1deg;
25
- --rotate-2: 2deg;
26
- --rotate-3: 3deg;
27
- --rotate-6: 6deg;
28
- --rotate-12: 12deg;
29
- --rotate-45: 45deg;
30
- --rotate-90: 90deg;
31
- --rotate-180: 180deg;
32
-
33
- /****************************************************************
34
- * Translate
35
- * Variables for translating elements with transform.
36
- * transform: var(--translate-1-2);
37
- *****************************************************************/
38
- --translate-1-2: 50%;
39
- --translate-1-3: 33.333333%;
40
- --translate-2-3: 66.666667%;
41
- --translate-1-4: 25%;
42
- --translate-2-4: 50%;
43
- --translate-3-4: 75%;
44
- --translate-full: 100%;
22
+ --rotate-0: rotate(0deg);
23
+ --rotate-1: rotate(1deg);
24
+ --rotate-2: rotate(2deg);
25
+ --rotate-3: rotate(3deg);
26
+ --rotate-6: rotate(6deg);
27
+ --rotate-12: rotate(12deg);
28
+ --rotate-45: rotate(45deg);
29
+ --rotate-90: rotate(90deg);
30
+ --rotate-180: rotate(180deg);
45
31
 
46
32
  /****************************************************************
47
33
  * Skew
48
34
  * Varibles for skewing elements with transform.
49
- * transform: var(--skew-3);
35
+ * transform: var(--skew-x-3);
50
36
  *****************************************************************/
51
- --skew-0: 0deg;
52
- --skew-1: 1deg;
53
- --skew-2: 2deg;
54
- --skew-3: 3deg;
55
- --skew-6: 6deg;
56
- --skew-12: 12deg;
37
+ --skew-x-0: skewX(0deg);
38
+ --skew-y-0: skewY(0deg);
39
+ --skew-x-1: skewX(1deg);
40
+ --skew-y-1: skewY(1deg);
41
+ --skew-x-2: skewX(2deg);
42
+ --skew-y-2: skewY(2deg);
43
+ --skew-x-3: skewX(3deg);
44
+ --skew-y-3: skewY(3deg);
45
+ --skew-x-6: skewX(6deg);
46
+ --skew-y-6: skewY(6deg);
47
+ --skew-x-12: skewX(12deg);
48
+ --skew-y-12: skewY(12deg);
57
49
  }
data/app/assets/stylesheets/transition.css CHANGED
@@ -4,13 +4,8 @@
4
4
  * Variables for controlling which CSS properties transition.
5
5
  * transition-property: var(--transition);
6
6
  *****************************************************************/
7
- --transition-none: none;
8
- --transition-all: all;
9
- --transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
10
- --transition-colors: background-color, border-color, color, fill, stroke;
11
- --transition-opacity: opacity;
12
- --transition-shadow: box-shadow;
13
- --transition-transform: transform;
7
+ --transition: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
8
+ --transition-colors: background-color, border-color, color, fill, stroke;
14
9
 
15
10
  /****************************************************************
16
11
  * Transition Timing