css-zero 0.0.4 → 0.0.5
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.
- checksums.yaml +4 -4
- data/README.md +14 -2
- data/app/assets/stylesheets/buttons.css +32 -0
- data/app/assets/stylesheets/colors.css +2 -4
- data/app/assets/stylesheets/zutilities.css +0 -2
- data/lib/css_zero/version.rb +1 -1
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6ffc5f62e22b31b31e16f686c8b0bfa28f0705883feba2c8a1e0ee3c3fba899b
|
|
4
|
+
data.tar.gz: d95a6605554c3edaa33467c21f5d3f3c6a444d4d2b52b959b93ead0ba21a82e2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c44ca53734614ef31bc070444a9fe428bb8c74a20b2b067737c81d1dde48e06af1720ae648887757caa70af0ea9959cddf48eb0221dd7e445451997efc1fa960
|
|
7
|
+
data.tar.gz: a65c232a3e2d7e94457572f45ffba5663faabba287a485e9d318e3638d216b82c1e31b3a61e45adaaaad7a8c48e2c30c21cd41de26a88d7f3e6452cf6d4597ac
|
data/README.md
CHANGED
|
@@ -42,14 +42,15 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
42
42
|
- [Transform](app/assets/stylesheets/transform.css)
|
|
43
43
|
- [Transition](app/assets/stylesheets/transition.css)
|
|
44
44
|
- [Animations](app/assets/stylesheets/animations.css)
|
|
45
|
+
- [Buttons](app/assets/stylesheets/buttons.css)
|
|
45
46
|
- [Utilities](app/assets/stylesheets/zutilities.css)
|
|
46
47
|
|
|
47
48
|
## Customization
|
|
48
49
|
|
|
50
|
+
Global level
|
|
51
|
+
|
|
49
52
|
```css
|
|
50
53
|
:root {
|
|
51
|
-
--color-negative: var(--pink-700);
|
|
52
|
-
--color-postive: var(--lime-700);
|
|
53
54
|
--color-bg: white;
|
|
54
55
|
--color-bg-surface: var(--zinc-100);
|
|
55
56
|
--color-text: var(--zinc-950);
|
|
@@ -59,6 +60,17 @@ This gem requires [propshaft](https://github.com/rails/propshaft) as the asset p
|
|
|
59
60
|
}
|
|
60
61
|
```
|
|
61
62
|
|
|
63
|
+
Component level
|
|
64
|
+
|
|
65
|
+
```css
|
|
66
|
+
.btn--colored {
|
|
67
|
+
--btn-background: var(--cyan-500);
|
|
68
|
+
--btn-color: var(--cyan-950);
|
|
69
|
+
}
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
Style level
|
|
73
|
+
|
|
62
74
|
```html
|
|
63
75
|
<div class="flex flex-column w-full gap" style="--row-gap: 0.5rem">
|
|
64
76
|
More HTML tags here...
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.btn {
|
|
2
|
+
align-items: center;
|
|
3
|
+
background-color: var(--btn-background, var(--color-primary));
|
|
4
|
+
border-radius: var(--btn-border-radius, var(--rounded-lg));
|
|
5
|
+
border: 1px solid var(--btn-border-color, transparent);
|
|
6
|
+
color: var(--btn-color, white);
|
|
7
|
+
column-gap: var(--btn-column-gap, var(--size-1));
|
|
8
|
+
cursor: pointer;
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
font-size: var(--btn-font-size, var(--text-sm));
|
|
11
|
+
font-weight: var(--btn-font-weight, var(--font-semibold));
|
|
12
|
+
justify-content: center;
|
|
13
|
+
line-height: var(--btn-line-height, var(--leading-6));
|
|
14
|
+
padding: var(--btn-padding, var(--size-1_5) var(--size-3_5));
|
|
15
|
+
text-align: center;
|
|
16
|
+
|
|
17
|
+
&:disabled {
|
|
18
|
+
pointer-events: none;
|
|
19
|
+
filter: var(--grayscale) opacity(0.5);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.btn--plain {
|
|
24
|
+
--btn-background: transparent;
|
|
25
|
+
--btn-border-color: var(--color-border);
|
|
26
|
+
--btn-color: var(--color-text);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.btn--outline {
|
|
30
|
+
--btn-background: transparent;
|
|
31
|
+
--btn-color: var(--color-text);
|
|
32
|
+
}
|
|
@@ -265,8 +265,7 @@
|
|
|
265
265
|
--rose-950: #4c0519;
|
|
266
266
|
|
|
267
267
|
/* Abstractions */
|
|
268
|
-
--color-
|
|
269
|
-
--color-postive: var(--lime-700);
|
|
268
|
+
--color-primary: var(--zinc-900);
|
|
270
269
|
--color-bg: white;
|
|
271
270
|
--color-bg-surface: var(--zinc-100);
|
|
272
271
|
--color-text: var(--zinc-950);
|
|
@@ -276,8 +275,7 @@
|
|
|
276
275
|
|
|
277
276
|
/* Redefine named color values for dark mode */
|
|
278
277
|
@media (prefers-color-scheme: dark) {
|
|
279
|
-
--color-
|
|
280
|
-
--color-postive: var(--lime-300);
|
|
278
|
+
--color-primary: var(--zinc-600);
|
|
281
279
|
--color-bg: var(--zinc-900);
|
|
282
280
|
--color-bg-surface: var(--zinc-950);
|
|
283
281
|
--color-text: white;
|
|
@@ -74,8 +74,6 @@
|
|
|
74
74
|
.text-primary { color: var(--color-text); }
|
|
75
75
|
.text-reversed { color: var(--color-text-reversed); }
|
|
76
76
|
.text-subtle { color: var(--color-text-subtle); }
|
|
77
|
-
.text-negative { color: var(--color-negative); }
|
|
78
|
-
.text-positive { color: var(--color-positive); }
|
|
79
77
|
|
|
80
78
|
.text-xs { font-size: var(--text-xs); }
|
|
81
79
|
.text-sm { font-size: var(--text-sm); }
|
data/lib/css_zero/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: css-zero
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.5
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Lázaro Nixon
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2024-06-
|
|
11
|
+
date: 2024-06-11 00:00:00.000000000 Z
|
|
12
12
|
dependencies: []
|
|
13
13
|
description:
|
|
14
14
|
email: lazaronixon@hotmail.com
|
|
@@ -21,6 +21,7 @@ files:
|
|
|
21
21
|
- app/assets/stylesheets/_reset.css
|
|
22
22
|
- app/assets/stylesheets/animations.css
|
|
23
23
|
- app/assets/stylesheets/borders.css
|
|
24
|
+
- app/assets/stylesheets/buttons.css
|
|
24
25
|
- app/assets/stylesheets/colors.css
|
|
25
26
|
- app/assets/stylesheets/effects.css
|
|
26
27
|
- app/assets/stylesheets/filters.css
|