@medyll/cssfabric 0.0.16 → 0.1.0

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 (20) hide show
  1. package/bin/index.js +6 -1
  2. package/gulpfile.js +3 -15
  3. package/lib/styles/core/box/box.css +206 -20
  4. package/lib/styles/core/box/box.min.css +1 -1
  5. package/lib/styles/core/box/box.responsive.css +1030 -100
  6. package/lib/styles/core/box/box.responsive.min.css +1 -1
  7. package/lib/styles/core/vars.css +1 -5
  8. package/lib/styles/core/vars.min.css +1 -1
  9. package/lib/styles/cssfabric.css +207 -25
  10. package/lib/styles/cssfabric.min.css +2 -2
  11. package/lib/styles/cssfabric.responsive.css +1030 -100
  12. package/lib/styles/cssfabric.responsive.min.css +1 -1
  13. package/package.json +10 -10
  14. package/src/_generated/export.variables.json +187 -187
  15. package/src/cssfabric/modules/_cssfabric-config.scss +3 -0
  16. package/src/cssfabric/modules/box/_box-build.scss +55 -2
  17. package/src/cssfabric/modules/box/_box-vars.scss +1 -1
  18. package/src/cssfabric/modules/vars.scss +1 -1
  19. package/css/mystyles.css +0 -280
  20. package/css/mystyles.css.map +0 -1
package/css/mystyles.css DELETED
@@ -1,280 +0,0 @@
1
- /* cssFabric vars */
2
- :root {
3
- /* theme primary colors*/
4
- --theme-color-primary: #0288d1;
5
- --theme-color-primary-light: #23b0fd;
6
- --theme-color-primary-lighter: #6ecbfe;
7
- --theme-color-primary-dark: #02679e;
8
- --theme-color-primary-darker: #01466c;
9
- --theme-color-primary-complement: #d14b02;
10
- --theme-color-primary-invert: #fd772e;
11
- --theme-color-primary-alpha-low: rgba(2, 136, 209, 0.8);
12
- --theme-color-primary-alpha-mid: rgba(2, 136, 209, 0.3);
13
- --theme-color-primary-alpha-high: rgba(2, 136, 209, 0.1);
14
- /* theme secondary colors*/
15
- --theme-color-secondary: #D14B02;
16
- --theme-color-secondary-light: #fd7023;
17
- --theme-color-secondary-lighter: #fea16e;
18
- --theme-color-secondary-dark: #9e3902;
19
- --theme-color-secondary-darker: #6c2701;
20
- --theme-color-secondary-complement: #0288d1;
21
- --theme-color-secondary-invert: #2eb4fd;
22
- --theme-color-secondary-alpha-low: rgba(209, 75, 2, 0.8);
23
- --theme-color-secondary-alpha-mid: rgba(209, 75, 2, 0.3);
24
- --theme-color-secondary-alpha-high: rgba(209, 75, 2, 0.1);
25
- /* theme tertiary colors*/
26
- --theme-color-tertiary: #88D102;
27
- --theme-color-tertiary-light: #b0fd23;
28
- --theme-color-tertiary-lighter: #cbfe6e;
29
- --theme-color-tertiary-dark: #679e02;
30
- --theme-color-tertiary-darker: #466c01;
31
- --theme-color-tertiary-complement: #4b02d1;
32
- --theme-color-tertiary-invert: #772efd;
33
- --theme-color-tertiary-alpha-low: rgba(136, 209, 2, 0.8);
34
- --theme-color-tertiary-alpha-mid: rgba(136, 209, 2, 0.3);
35
- --theme-color-tertiary-alpha-high: rgba(136, 209, 2, 0.1);
36
- --theme-color-foreground: #282230;
37
- --theme-color-text: #282230;
38
- --theme-color-background: #f1f1f1;
39
- --theme-color-paper: #ededed;
40
- --theme-color-border: var(--theme-color-primary-alpha-mid);
41
- --theme-color-overlay: "";
42
- /* color-scheme */
43
- --color-scheme-discrete: #ccc;
44
- --color-scheme-discrete-light: #f2f2f2;
45
- --color-scheme-discrete-dark: #b3b3b3;
46
- --color-scheme-success: green;
47
- --color-scheme-success-light: #00cd00;
48
- --color-scheme-success-dark: #004d00;
49
- --color-scheme-info: #ffdd57;
50
- --color-scheme-info-light: #ffeda3;
51
- --color-scheme-info-dark: #ffd324;
52
- --color-scheme-warning: #e6b905;
53
- --color-scheme-warning-light: #fbd53c;
54
- --color-scheme-warning-dark: #b49104;
55
- --color-scheme-alert: #ff7300;
56
- --color-scheme-alert-light: #ff9d4d;
57
- --color-scheme-alert-dark: #cc5c00;
58
- --color-scheme-error: red;
59
- --color-scheme-error-light: #ff4d4d;
60
- --color-scheme-error-dark: #cc0000;
61
- /* color-palette */
62
- /* color-palette yellow */
63
- --color-palette-yellow: #ffb900;
64
- --color-palette-yellow-lighter: #ffe399;
65
- --color-palette-yellow-light: #ffce4d;
66
- --color-palette-yellow-dark: #cc9400;
67
- --color-palette-yellow-darker: #996f00;
68
- --color-palette-yellow-complement: #0046ff;
69
- --color-palette-yellow-invert: #0046ff;
70
- --color-palette-yellow-alpha-low: rgba(255, 185, 0, 0.8);
71
- --color-palette-yellow-alpha-mid: rgba(255, 185, 0, 0.3);
72
- --color-palette-yellow-alpha-high: rgba(255, 185, 0, 0.1);
73
- /* color-palette orange */
74
- --color-palette-orange: #d83b01;
75
- --color-palette-orange-lighter: #fe9974;
76
- --color-palette-orange-light: #fe6127;
77
- --color-palette-orange-dark: #a52d01;
78
- --color-palette-orange-darker: #721f01;
79
- --color-palette-orange-complement: #019ed8;
80
- --color-palette-orange-invert: #27c4fe;
81
- --color-palette-orange-alpha-low: rgba(216, 59, 1, 0.8);
82
- --color-palette-orange-alpha-mid: rgba(216, 59, 1, 0.3);
83
- --color-palette-orange-alpha-high: rgba(216, 59, 1, 0.1);
84
- /* color-palette red */
85
- --color-palette-red: #d13438;
86
- --color-palette-red-lighter: #edb1b2;
87
- --color-palette-red-light: #df7275;
88
- --color-palette-red-dark: #ab272a;
89
- --color-palette-red-darker: #821d20;
90
- --color-palette-red-complement: #34d1cd;
91
- --color-palette-red-invert: #2ecbc7;
92
- --color-palette-red-alpha-low: rgba(209, 52, 56, 0.8);
93
- --color-palette-red-alpha-mid: rgba(209, 52, 56, 0.3);
94
- --color-palette-red-alpha-high: rgba(209, 52, 56, 0.1);
95
- /* color-palette magenta */
96
- --color-palette-magenta: #b4009e;
97
- --color-palette-magenta-lighter: #ff4ee9;
98
- --color-palette-magenta-light: #ff02e0;
99
- --color-palette-magenta-dark: #810071;
100
- --color-palette-magenta-darker: #4e0044;
101
- --color-palette-magenta-complement: #00b416;
102
- --color-palette-magenta-invert: #4bff61;
103
- --color-palette-magenta-alpha-low: rgba(180, 0, 158, 0.8);
104
- --color-palette-magenta-alpha-mid: rgba(180, 0, 158, 0.3);
105
- --color-palette-magenta-alpha-high: rgba(180, 0, 158, 0.1);
106
- /* color-palette purple */
107
- --color-palette-purple: #5c2d91;
108
- --color-palette-purple-lighter: #a980d7;
109
- --color-palette-purple-light: #8145c5;
110
- --color-palette-purple-dark: #43216a;
111
- --color-palette-purple-darker: #2b1543;
112
- --color-palette-purple-complement: #62912d;
113
- --color-palette-purple-invert: #a3d26e;
114
- --color-palette-purple-alpha-low: rgba(92, 45, 145, 0.8);
115
- --color-palette-purple-alpha-mid: rgba(92, 45, 145, 0.3);
116
- --color-palette-purple-alpha-high: rgba(92, 45, 145, 0.1);
117
- /* color-palette green */
118
- --color-palette-green: #107c10;
119
- --color-palette-green-lighter: #3fe63f;
120
- --color-palette-green-light: #19c019;
121
- --color-palette-green-dark: #0a4f0a;
122
- --color-palette-green-darker: #042204;
123
- --color-palette-green-complement: #7c107c;
124
- --color-palette-green-invert: #ef83ef;
125
- --color-palette-green-alpha-low: rgba(16, 124, 16, 0.8);
126
- --color-palette-green-alpha-mid: rgba(16, 124, 16, 0.3);
127
- --color-palette-green-alpha-high: rgba(16, 124, 16, 0.1);
128
- /* color-palette teal */
129
- --color-palette-teal: #008272;
130
- --color-palette-teal-lighter: #1cffe3;
131
- --color-palette-teal-light: #00cfb5;
132
- --color-palette-teal-dark: #004f45;
133
- --color-palette-teal-darker: #001c19;
134
- --color-palette-teal-complement: #820010;
135
- --color-palette-teal-invert: #ff7d8d;
136
- --color-palette-teal-alpha-low: rgba(0, 130, 114, 0.8);
137
- --color-palette-teal-alpha-mid: rgba(0, 130, 114, 0.3);
138
- --color-palette-teal-alpha-high: rgba(0, 130, 114, 0.1);
139
- /* color-palette blue */
140
- --color-palette-blue: #0078d4;
141
- --color-palette-blue-lighter: #6ec0ff;
142
- --color-palette-blue-light: #229fff;
143
- --color-palette-blue-dark: #005ba1;
144
- --color-palette-blue-darker: #003e6e;
145
- --color-palette-blue-complement: #d45c00;
146
- --color-palette-blue-invert: #ff872b;
147
- --color-palette-blue-alpha-low: rgba(0, 120, 212, 0.8);
148
- --color-palette-blue-alpha-mid: rgba(0, 120, 212, 0.3);
149
- --color-palette-blue-alpha-high: rgba(0, 120, 212, 0.1);
150
- /* color-palette dark */
151
- --color-palette-dark: #323232;
152
- --color-palette-dark-lighter: #7f7f7f;
153
- --color-palette-dark-light: #585858;
154
- --color-palette-dark-dark: #191919;
155
- --color-palette-dark-darker: black;
156
- --color-palette-dark-complement: #323232;
157
- --color-palette-dark-invert: #cdcdcd;
158
- --color-palette-dark-alpha-low: rgba(50, 50, 50, 0.8);
159
- --color-palette-dark-alpha-mid: rgba(50, 50, 50, 0.3);
160
- --color-palette-dark-alpha-high: rgba(50, 50, 50, 0.1);
161
- /* grays */
162
- --color-gray-100: #f4f4f4;
163
- --color-gray-100-alpha-low: rgba(244, 244, 244, 0.8);
164
- --color-gray-200: #e9e9e9;
165
- --color-gray-200-alpha-low: rgba(233, 233, 233, 0.8);
166
- --color-gray-300: #dddddd;
167
- --color-gray-300-alpha-low: rgba(221, 221, 221, 0.8);
168
- --color-gray-400: #d2d2d2;
169
- --color-gray-400-alpha-low: rgba(210, 210, 210, 0.8);
170
- --color-gray-500: #c7c7c7;
171
- --color-gray-500-alpha-low: rgba(199, 199, 199, 0.8);
172
- --color-gray-600: #bbbbbb;
173
- --color-gray-600-alpha-low: rgba(187, 187, 187, 0.8);
174
- --color-gray-700: #b0b0b0;
175
- --color-gray-700-alpha-low: rgba(176, 176, 176, 0.8);
176
- --color-gray-800: #a4a4a4;
177
- --color-gray-800-alpha-low: rgba(164, 164, 164, 0.8);
178
- --color-gray-900: #999999;
179
- --color-gray-900-alpha-low: rgba(153, 153, 153, 0.8);
180
- /* shadows */
181
- --box-shad-1: 0 0.8333333333px 1.724137931px 0 rgba(0, 0, 0, 0.15), 0 0.1526717557px 0.4651162791px 0 rgba(0, 0, 0, 0.1);
182
- --box-shad-2: 0 1.6666666667px 3.4482758621px 0 rgba(0, 0, 0, 0.15), 0 0.3053435115px 0.9302325581px 0 rgba(0, 0, 0, 0.1);
183
- --box-shad-3: 0 2.5px 5.1724137931px 0 rgba(0, 0, 0, 0.15), 0 0.4580152672px 1.3953488372px 0 rgba(0, 0, 0, 0.1);
184
- --box-shad-4: 0 3.3333333333px 6.8965517241px 0 rgba(0, 0, 0, 0.15), 0 0.6106870229px 1.8604651163px 0 rgba(0, 0, 0, 0.1);
185
- --box-shad-5: 0 4.1666666667px 8.6206896552px 0 rgba(0, 0, 0, 0.15), 0 0.7633587786px 2.3255813953px 0 rgba(0, 0, 0, 0.1);
186
- --box-shad-6: 0 5px 10.3448275862px 0 rgba(0, 0, 0, 0.15), 0 0.9160305344px 2.7906976744px 0 rgba(0, 0, 0, 0.1);
187
- --box-shad-7: 0 5.8333333333px 12.0689655172px 0 rgba(0, 0, 0, 0.15), 0 1.0687022901px 3.2558139535px 0 rgba(0, 0, 0, 0.1);
188
- --box-shad-8: 0 6.6666666667px 13.7931034483px 0 rgba(0, 0, 0, 0.15), 0 1.2213740458px 3.7209302326px 0 rgba(0, 0, 0, 0.1);
189
- --box-shad-9: 0 7.5px 15.5172413793px 0 rgba(0, 0, 0, 0.15), 0 1.3740458015px 4.1860465116px 0 rgba(0, 0, 0, 0.1);
190
- --box-shad-10: 0 8.3333333333px 17.2413793103px 0 rgba(0, 0, 0, 0.15), 0 1.5267175573px 4.6511627907px 0 rgba(0, 0, 0, 0.1);
191
- /* boxes */
192
- --box-sp-1: 0.5rem;
193
- --box-sp-2: 1rem;
194
- --box-sp-3: 1.5rem;
195
- --box-sp-4: 2rem;
196
- --box-sp-5: 2.5rem;
197
- --box-sp-6: 3rem;
198
- --box-sp-7: 3.5rem;
199
- --box-sp-8: 4rem;
200
- --box-sp-9: 4.5rem;
201
- --box-sp-10: 5rem;
202
- --box-sp-11: 5.5rem;
203
- --box-sp-12: 6rem;
204
- --box-sp-13: 6.5rem;
205
- --box-sp-14: 7rem;
206
- --box-sp-15: 7.5rem;
207
- --box-sp-16: 8rem;
208
- --box-sp-17: 8.5rem;
209
- --box-sp-18: 9rem;
210
- --box-sp-19: 9.5rem;
211
- --box-sp-20: 10rem;
212
- --box-sp-21: 10.5rem;
213
- --box-sp-22: 11rem;
214
- --box-sp-23: 11.5rem;
215
- --box-sp-24: 12rem;
216
- --box-sp-25: 12.5rem;
217
- --box-sp-26: 13rem;
218
- --box-sp-27: 13.5rem;
219
- --box-sp-28: 14rem;
220
- --box-sp-29: 14.5rem;
221
- --box-sp-30: 15rem;
222
- --box-sp-31: 15.5rem;
223
- --box-sp-32: 16rem;
224
- /* text */
225
- /*Hs*/
226
- --font-size-h1: 3.1rem;
227
- --font-size-h2: 2.68rem;
228
- --font-size-h3: 2.26rem;
229
- --font-size-h4: 1.84rem;
230
- --font-size-h5: 1.42rem;
231
- --font-size-h6: 1rem;
232
- /*weight*/
233
- --font-weight-50: 50;
234
- --font-weight-100: 100;
235
- --font-weight-300: 400;
236
- --font-weight-500: 500;
237
- --font-weight-900: 900;
238
- --font-weight-light: lighter;
239
- --font-weight-cap: normal;
240
- --font-weight-bold: bold;
241
- --font-weight-bolder: bolder;
242
- /*text shadows color_schemes*/
243
- --text-shadow-discrete: 0 0 0.125em #ccc;
244
- --text-shadow-success: 0 0 0.125em green;
245
- --text-shadow-info: 0 0 0.125em #ffdd57;
246
- --text-shadow-warning: 0 0 0.125em #e6b905;
247
- --text-shadow-alert: 0 0 0.125em #ff7300;
248
- --text-shadow-error: 0 0 0.125em red;
249
- /*text-shadows color_palette */
250
- --text-shadow-yellow: 0 0 0.125em #ffb900;
251
- --text-shadow-orange: 0 0 0.125em #d83b01;
252
- --text-shadow-red: 0 0 0.125em #d13438;
253
- --text-shadow-magenta: 0 0 0.125em #b4009e;
254
- --text-shadow-purple: 0 0 0.125em #5c2d91;
255
- --text-shadow-green: 0 0 0.125em #107c10;
256
- --text-shadow-teal: 0 0 0.125em #008272;
257
- --text-shadow-blue: 0 0 0.125em #0078d4;
258
- --text-shadow-dark: 0 0 0.125em #323232;
259
- }
260
-
261
- /*[data-theme="light"] {
262
-
263
- --theme-color-foreground: #282230;
264
- --theme-color-text: #282230;
265
- --theme-color-background: #f1f1f1;
266
- --theme-color-paper: #ededed;
267
-
268
- --theme-color-border: var(--theme-color-primary-alpha-mid);
269
- --theme-color-overlay: '';
270
- }*/
271
- [data-theme=dark] {
272
- --theme-color-foreground: #f1f1f1;
273
- --theme-color-text: #f1f1f1;
274
- --theme-color-background: #27323a;
275
- --theme-color-paper: #3a3b3b;
276
- --theme-color-border: var(--theme-color-primary-alpha-mid);
277
- --theme-color-overlay: "";
278
- }
279
-
280
- /*# sourceMappingURL=mystyles.css.map */
package/css/mystyles.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/cssfabric/modules/vars.scss","../src/cssfabric/modules/theme/_theme-build.scss","../src/cssfabric/modules/box/_box-build.scss","../src/cssfabric/modules/text/_text-build.scss"],"names":[],"mappings":"AAWA;AAgCA;ACAE;EACA;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAEF;EACA;EACA;AAEA;EACA;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAEF;EACA;EACA;AAEA;EACA;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAEF;EACA;EACA;EDrBA;EACA;EACA;EACA;EAEA;EACA;AAGA;EAEE;EACA;EACA;EAFA;EACA;EACA;EAFA;EACA;EACA;EAFA;EACA;EACA;EAFA;EACA;EACA;EAFA;EACA;EACA;AAGF;AAEE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAZA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;AAGF;EAEE;EACA;EADA;EACA;EADA;EACA;EADA;EACA;EADA;EACA;EADA;EACA;EADA;EACA;EADA;EACA;EADA;EACA;AAGF;EEuHE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AFrHF;EEdE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AFgBF;AGTA;EAGE;EAAA;EAAA;EAAA;EAAA;EAAA;AAEF;EAEE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAEF;EAGE;EAAA;EAAA;EAAA;EAAA;EAAA;AAEF;EAGE;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;AHHJ;;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAWA;EAEE;EACA;EACA;EACA;EAEA;EACA","file":"mystyles.css"}