@lottecode/lottecss 0.0.6 → 0.0.8
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.
- package/package.json +4 -1
- package/src/css/colors.css +117 -18
- package/src/css/forms.css +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lottecode/lottecss",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"description": "out of the box design and styling for your semantic markup",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "styles.css",
|
|
@@ -24,5 +24,8 @@
|
|
|
24
24
|
"packageManager": "yarn@4.3.1",
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"tailwindcss": "^4.2.2"
|
|
27
|
+
},
|
|
28
|
+
"devDependencies": {
|
|
29
|
+
"@tailwindcss/cli": "^4.3.0"
|
|
27
30
|
}
|
|
28
31
|
}
|
package/src/css/colors.css
CHANGED
|
@@ -1,31 +1,48 @@
|
|
|
1
1
|
/* Colors Styles */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
+
/* Brand primitives */
|
|
5
|
+
--color-white: #ffffff;
|
|
6
|
+
--color-black: #121212;
|
|
7
|
+
--color-red: #f26c6c;
|
|
8
|
+
--color-orange: #f3a06b;
|
|
9
|
+
--color-yellow: #ffd24d;
|
|
10
|
+
--color-green: #59c07d;
|
|
11
|
+
--color-blue: #79bce8;
|
|
12
|
+
--color-pink: #fceaf5;
|
|
13
|
+
--color-sage: #c8d9d1;
|
|
14
|
+
|
|
15
|
+
/* Base semantic */
|
|
4
16
|
--color-background: #fffcf1;
|
|
5
|
-
--color-foreground:
|
|
6
|
-
--color-surface:
|
|
7
|
-
--color-border:
|
|
17
|
+
--color-foreground: var(--color-black);
|
|
18
|
+
--color-surface: var(--color-white);
|
|
19
|
+
--color-border: var(--color-black);
|
|
20
|
+
|
|
21
|
+
/* Accent semantic */
|
|
8
22
|
--color-accent: #0c0;
|
|
9
|
-
--color-highlight:
|
|
10
|
-
--color-info:
|
|
11
|
-
--color-success:
|
|
12
|
-
--color-warning:
|
|
13
|
-
--color-error:
|
|
14
|
-
--color-sage: #c8d9d1;
|
|
23
|
+
--color-highlight: var(--color-pink);
|
|
24
|
+
--color-info: var(--color-blue);
|
|
25
|
+
--color-success: var(--color-green);
|
|
26
|
+
--color-warning: var(--color-yellow);
|
|
27
|
+
--color-error: var(--color-red);
|
|
15
28
|
}
|
|
16
29
|
|
|
17
30
|
.theme-dark {
|
|
18
|
-
|
|
31
|
+
/* Brand primitive shifts for dark */
|
|
32
|
+
--color-red: #c13d3d;
|
|
33
|
+
--color-yellow: #d9a305;
|
|
34
|
+
--color-green: #2e8c51;
|
|
35
|
+
--color-blue: #3d87b5;
|
|
36
|
+
|
|
37
|
+
/* Base semantic */
|
|
38
|
+
--color-background: var(--color-black);
|
|
19
39
|
--color-foreground: #f5f5f5;
|
|
20
40
|
--color-surface: #130f40;
|
|
21
41
|
--color-border: #e0bcd3;
|
|
22
|
-
|
|
42
|
+
|
|
43
|
+
/* Accent semantic */
|
|
44
|
+
--color-accent: var(--color-pink);
|
|
23
45
|
--color-highlight: #94e59c;
|
|
24
|
-
--color-info: #3d87b5;
|
|
25
|
-
--color-success: #2e8c51;
|
|
26
|
-
--color-warning: #d9a305;
|
|
27
|
-
--color-error: #c13d3d;
|
|
28
|
-
--color-sage: #c8d9d1;
|
|
29
46
|
}
|
|
30
47
|
|
|
31
48
|
/* Opacity/Transparency */
|
|
@@ -49,7 +66,7 @@
|
|
|
49
66
|
opacity: 0.2;
|
|
50
67
|
}
|
|
51
68
|
|
|
52
|
-
/* Background Colors */
|
|
69
|
+
/* Background Colors — semantic */
|
|
53
70
|
.bg-background {
|
|
54
71
|
background-color: var(--color-background);
|
|
55
72
|
}
|
|
@@ -70,6 +87,10 @@
|
|
|
70
87
|
background-color: var(--color-accent);
|
|
71
88
|
}
|
|
72
89
|
|
|
90
|
+
.bg-highlight {
|
|
91
|
+
background-color: var(--color-highlight);
|
|
92
|
+
}
|
|
93
|
+
|
|
73
94
|
.bg-info {
|
|
74
95
|
background-color: var(--color-info);
|
|
75
96
|
}
|
|
@@ -86,7 +107,44 @@
|
|
|
86
107
|
background-color: var(--color-error);
|
|
87
108
|
}
|
|
88
109
|
|
|
89
|
-
/*
|
|
110
|
+
/* Background Colors — brand primitives */
|
|
111
|
+
.bg-white {
|
|
112
|
+
background-color: var(--color-white);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.bg-black {
|
|
116
|
+
background-color: var(--color-black);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.bg-red {
|
|
120
|
+
background-color: var(--color-red);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.bg-orange {
|
|
124
|
+
background-color: var(--color-orange);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.bg-yellow {
|
|
128
|
+
background-color: var(--color-yellow);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.bg-green {
|
|
132
|
+
background-color: var(--color-green);
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
.bg-blue {
|
|
136
|
+
background-color: var(--color-blue);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.bg-pink {
|
|
140
|
+
background-color: var(--color-pink);
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
.bg-sage {
|
|
144
|
+
background-color: var(--color-sage);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Text Colors — semantic */
|
|
90
148
|
.text-background {
|
|
91
149
|
color: var(--color-background);
|
|
92
150
|
}
|
|
@@ -107,6 +165,10 @@
|
|
|
107
165
|
color: var(--color-accent);
|
|
108
166
|
}
|
|
109
167
|
|
|
168
|
+
.text-highlight {
|
|
169
|
+
color: var(--color-highlight);
|
|
170
|
+
}
|
|
171
|
+
|
|
110
172
|
.text-info {
|
|
111
173
|
color: var(--color-info);
|
|
112
174
|
}
|
|
@@ -122,3 +184,40 @@
|
|
|
122
184
|
.text-error {
|
|
123
185
|
color: var(--color-error);
|
|
124
186
|
}
|
|
187
|
+
|
|
188
|
+
/* Text Colors — brand primitives */
|
|
189
|
+
.text-white {
|
|
190
|
+
color: var(--color-white);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
.text-black {
|
|
194
|
+
color: var(--color-black);
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.text-red {
|
|
198
|
+
color: var(--color-red);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.text-orange {
|
|
202
|
+
color: var(--color-orange);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.text-yellow {
|
|
206
|
+
color: var(--color-yellow);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.text-green {
|
|
210
|
+
color: var(--color-green);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.text-blue {
|
|
214
|
+
color: var(--color-blue);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.text-pink {
|
|
218
|
+
color: var(--color-pink);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.text-sage {
|
|
222
|
+
color: var(--color-sage);
|
|
223
|
+
}
|
package/src/css/forms.css
CHANGED