@symbo.ls/scratch 0.7.17 → 0.7.18
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/README.md +34 -2
- package/package.json +1 -1
- package/src/defaultConfig/media.js +3 -12
package/README.md
CHANGED
|
@@ -1,8 +1,40 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
1
|
+
# Scratch framework
|
|
2
|
+
|
|
3
|
+
Scratch is CSS framework and methodology to build web, mobile and TV applications with one code base.
|
|
3
4
|
|
|
4
5
|
[](https://badge.fury.io/js/%40rackai%2Fscratch)
|
|
5
6
|
|
|
7
|
+
Recevies a configuration and outputs the system of design related properties. It also applies reset by default and receives a few options:
|
|
8
|
+
|
|
9
|
+
| option | default | description |
|
|
10
|
+
| --- | --- | --- |
|
|
11
|
+
| `verbose` | `false` | Output the warning logs in console (only in `dev`, `test` enviroment) |
|
|
12
|
+
| `useReset` | `true` | Apply CSS reset to the document |
|
|
13
|
+
| `useVariable` | `true` | Output CSS variables in properties |
|
|
14
|
+
|
|
15
|
+
A design system configuration of the following systems:
|
|
16
|
+
|
|
17
|
+
```javascript
|
|
18
|
+
import { set } from '@symbo.ls/scratch'
|
|
19
|
+
|
|
20
|
+
set({
|
|
21
|
+
color: {},
|
|
22
|
+
theme: {},
|
|
23
|
+
typography: {},
|
|
24
|
+
space: {},
|
|
25
|
+
media: {},
|
|
26
|
+
icons:{},
|
|
27
|
+
font: {},
|
|
28
|
+
font_family: {},
|
|
29
|
+
timing: {},
|
|
30
|
+
reset: {}
|
|
31
|
+
}, {
|
|
32
|
+
// options
|
|
33
|
+
})
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Read more at [docs](https://www.docs.symbols.app/design-system)
|
|
37
|
+
|
|
6
38
|
### TODO:
|
|
7
39
|
- [ ] Accessibility (WCAG) automated tests
|
|
8
40
|
- [ ] Scratch on `node`
|
package/package.json
CHANGED
|
@@ -14,17 +14,8 @@ export const MEDIA = {
|
|
|
14
14
|
mobileS: '(max-width: 480px)',
|
|
15
15
|
mobileXS: '(max-width: 375px)',
|
|
16
16
|
|
|
17
|
-
sL: '(max-width: 1920px)',
|
|
18
|
-
sM: '(max-width: 1680px)',
|
|
19
|
-
sS: '(max-width: 1440px)',
|
|
20
|
-
tL: '(max-width: 1366px)',
|
|
21
|
-
tM: '(max-width: 1280px)',
|
|
22
|
-
tS: '(max-width: 1024px)',
|
|
23
|
-
mL: '(max-width: 768px)',
|
|
24
|
-
mM: '(max-width: 560px)',
|
|
25
|
-
mS: '(max-width: 480px)',
|
|
26
|
-
mXS: '(max-width: 375px)',
|
|
27
|
-
|
|
28
17
|
light: '(prefers-color-scheme: light)',
|
|
29
|
-
dark: '(prefers-color-scheme: dark)'
|
|
18
|
+
dark: '(prefers-color-scheme: dark)',
|
|
19
|
+
|
|
20
|
+
print: 'print'
|
|
30
21
|
}
|