@withlayers/mixins 0.0.1 → 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 (4) hide show
  1. package/dist/a11y.css +12 -0
  2. package/dist/index.css +2 -0
  3. package/dist/typography.css +142 -0
  4. package/package.json +2 -2
package/dist/a11y.css ADDED
@@ -0,0 +1,12 @@
1
+ @define-mixin is-visually-hidden {
2
+ border: 0;
3
+ clip-path: inset(50%);
4
+ clip: rect(1px, 1px, 1px, 1px);
5
+ height: 1px;
6
+ margin: -1px;
7
+ overflow: hidden;
8
+ padding: 0;
9
+ position: absolute;
10
+ width: 1px;
11
+ word-wrap: normal !important;
12
+ }
package/dist/index.css ADDED
@@ -0,0 +1,2 @@
1
+ @import url('a11y.css');
2
+ @import url('typography.css');
package/dist/typography.css ADDED
@@ -0,0 +1,142 @@
1
+ @define-mixin is-style-body-md {
2
+ font-family: var(--l--theme--typography--body--md--font-family);
3
+ font-size: var(--l--theme--typography--body--md--font-size);
4
+ font-style: var(--l--theme--typography--body--md--font-style);
5
+ font-variant-caps: var(--l--theme--typography--body--md--font-variant-caps);
6
+ font-weight: var(--l--theme--typography--body--md--font-weight);
7
+ letter-spacing: var(--l--theme--typography--body--md--letter-spacing);
8
+ line-height: var(--l--theme--typography--body--md--line-height);
9
+ text-transform: var(--l--theme--typography--body--md--text-transform);
10
+ }
11
+
12
+ @define-mixin is-style-body-sm {
13
+ font-family: var(--l--theme--typography--body--sm--font-family);
14
+ font-size: var(--l--theme--typography--body--sm--font-size);
15
+ font-style: var(--l--theme--typography--body--sm--font-style);
16
+ font-variant-caps: var(--l--theme--typography--body--sm--font-variant-caps);
17
+ font-weight: var(--l--theme--typography--body--sm--font-weight);
18
+ letter-spacing: var(--l--theme--typography--body--sm--letter-spacing);
19
+ line-height: var(--l--theme--typography--body--sm--line-height);
20
+ text-transform: var(--l--theme--typography--body--sm--text-transform);
21
+ }
22
+
23
+ @define-mixin is-style-caption {
24
+ font-family: var(--l--theme--typography--caption--font-family);
25
+ font-size: var(--l--theme--typography--caption--font-size);
26
+ font-style: var(--l--theme--typography--caption--font-style);
27
+ font-variant-caps: var(--l--theme--typography--caption--font-variant-caps);
28
+ font-weight: var(--l--theme--typography--caption--font-weight);
29
+ letter-spacing: var(--l--theme--typography--caption--letter-spacing);
30
+ line-height: var(--l--theme--typography--caption--line-height);
31
+ text-transform: var(--l--theme--typography--caption--text-transform);
32
+ }
33
+
34
+ @define-mixin is-style-caption-attribution {
35
+ font-family: var(--l--theme--typography--caption-attribution--font-family);
36
+ font-size: var(--l--theme--typography--caption-attribution--font-size);
37
+ font-style: var(--l--theme--typography--caption-attribution--font-style);
38
+ font-variant-caps: var(--l--theme--typography--caption-attribution--font-variant-caps);
39
+ font-weight: var(--l--theme--typography--caption-attribution--font-weight);
40
+ letter-spacing: var(--l--theme--typography--caption-attribution--letter-spacing);
41
+ line-height: var(--l--theme--typography--caption-attribution--line-height);
42
+ text-transform: var(--l--theme--typography--caption-attribution--text-transform);
43
+ }
44
+
45
+ @define-mixin is-style-code {
46
+ font-family: var(--l--theme--typography--code--font-family);
47
+ font-size: var(--l--theme--typography--code--font-size);
48
+ font-style: var(--l--theme--typography--code--font-style);
49
+ font-variant-caps: var(--l--theme--typography--code--font-variant-caps);
50
+ font-weight: var(--l--theme--typography--code--font-weight);
51
+ letter-spacing: var(--l--theme--typography--code--letter-spacing);
52
+ line-height: var(--l--theme--typography--code--line-height);
53
+ text-transform: var(--l--theme--typography--code--text-transform);
54
+ }
55
+
56
+ @define-mixin is-style-h1 {
57
+ font-family: var(--l--theme--typography--h1--font-family);
58
+ font-size: var(--l--theme--typography--h1--font-size);
59
+ font-style: var(--l--theme--typography--h1--font-style);
60
+ font-variant-caps: var(--l--theme--typography--h1--font-variant-caps);
61
+ font-weight: var(--l--theme--typography--h1--font-weight);
62
+ letter-spacing: var(--l--theme--typography--h1--letter-spacing);
63
+ line-height: var(--l--theme--typography--h1--line-height);
64
+ text-transform: var(--l--theme--typography--h1--text-transform);
65
+ }
66
+
67
+ @define-mixin is-style-h2 {
68
+ font-family: var(--l--theme--typography--h2--font-family);
69
+ font-size: var(--l--theme--typography--h2--font-size);
70
+ font-style: var(--l--theme--typography--h2--font-style);
71
+ font-variant-caps: var(--l--theme--typography--h2--font-variant-caps);
72
+ font-weight: var(--l--theme--typography--h2--font-weight);
73
+ letter-spacing: var(--l--theme--typography--h2--letter-spacing);
74
+ line-height: var(--l--theme--typography--h2--line-height);
75
+ text-transform: var(--l--theme--typography--h2--text-transform);
76
+ }
77
+
78
+ @define-mixin is-style-h3 {
79
+ font-family: var(--l--theme--typography--h3--font-family);
80
+ font-size: var(--l--theme--typography--h3--font-size);
81
+ font-style: var(--l--theme--typography--h3--font-style);
82
+ font-variant-caps: var(--l--theme--typography--h3--font-variant-caps);
83
+ font-weight: var(--l--theme--typography--h3--font-weight);
84
+ letter-spacing: var(--l--theme--typography--h3--letter-spacing);
85
+ line-height: var(--l--theme--typography--h3--line-height);
86
+ text-transform: var(--l--theme--typography--h3--text-transform);
87
+ }
88
+
89
+ @define-mixin is-style-h4 {
90
+ font-family: var(--l--theme--typography--h4--font-family);
91
+ font-size: var(--l--theme--typography--h4--font-size);
92
+ font-style: var(--l--theme--typography--h4--font-style);
93
+ font-variant-caps: var(--l--theme--typography--h4--font-variant-caps);
94
+ font-weight: var(--l--theme--typography--h4--font-weight);
95
+ letter-spacing: var(--l--theme--typography--h4--letter-spacing);
96
+ line-height: var(--l--theme--typography--h4--line-height);
97
+ text-transform: var(--l--theme--typography--h4--text-transform);
98
+ }
99
+
100
+ @define-mixin is-style-h5 {
101
+ font-family: var(--l--theme--typography--h5--font-family);
102
+ font-size: var(--l--theme--typography--h5--font-size);
103
+ font-style: var(--l--theme--typography--h5--font-style);
104
+ font-variant-caps: var(--l--theme--typography--h5--font-variant-caps);
105
+ font-weight: var(--l--theme--typography--h5--font-weight);
106
+ letter-spacing: var(--l--theme--typography--h5--letter-spacing);
107
+ line-height: var(--l--theme--typography--h5--line-height);
108
+ text-transform: var(--l--theme--typography--h5--text-transform);
109
+ }
110
+
111
+ @define-mixin is-style-h6 {
112
+ font-family: var(--l--theme--typography--h6--font-family);
113
+ font-size: var(--l--theme--typography--h6--font-size);
114
+ font-style: var(--l--theme--typography--h6--font-style);
115
+ font-variant-caps: var(--l--theme--typography--h6--font-variant-caps);
116
+ font-weight: var(--l--theme--typography--h6--font-weight);
117
+ letter-spacing: var(--l--theme--typography--h6--letter-spacing);
118
+ line-height: var(--l--theme--typography--h6--line-height);
119
+ text-transform: var(--l--theme--typography--h6--text-transform);
120
+ }
121
+
122
+ @define-mixin is-style-overline {
123
+ font-family: var(--l--theme--typography--overline--font-family);
124
+ font-size: var(--l--theme--typography--overline--font-size);
125
+ font-style: var(--l--theme--typography--overline--font-style);
126
+ font-variant-caps: var(--l--theme--typography--overline--font-variant-caps);
127
+ font-weight: var(--l--theme--typography--overline--font-weight);
128
+ letter-spacing: var(--l--theme--typography--overline--letter-spacing);
129
+ line-height: var(--l--theme--typography--overline--line-height);
130
+ text-transform: var(--l--theme--typography--overline--text-transform);
131
+ }
132
+
133
+ @define-mixin is-style-subhead {
134
+ font-family: var(--l--theme--typography--subhead--font-family);
135
+ font-size: var(--l--theme--typography--subhead--font-size);
136
+ font-style: var(--l--theme--typography--subhead--font-style);
137
+ font-variant-caps: var(--l--theme--typography--subhead--font-variant-caps);
138
+ font-weight: var(--l--theme--typography--subhead--font-weight);
139
+ letter-spacing: var(--l--theme--typography--subhead--letter-spacing);
140
+ line-height: var(--l--theme--typography--subhead--line-height);
141
+ text-transform: var(--l--theme--typography--subhead--text-transform);
142
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/mixins",
3
- "version": "0.0.1",
3
+ "version": "0.1.0",
4
4
  "description": "Mixins layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -17,6 +17,6 @@
17
17
  "dev": "npm run build -- --watch"
18
18
  },
19
19
  "dependencies": {
20
- "@withlayers/tokens": "0.1.2"
20
+ "@withlayers/tokens": "0.1.3"
21
21
  }
22
22
  }