css-zero 0.0.10 → 0.0.12

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 (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