@withlayers/mixins 0.0.2 → 0.1.1

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 (2) hide show
  1. package/dist/typography.css +102 -3
  2. package/package.json +2 -2
package/dist/typography.css CHANGED
@@ -1,8 +1,30 @@
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
+
1
23
  @define-mixin is-style-caption {
2
24
  font-family: var(--l--theme--typography--caption--font-family);
3
25
  font-size: var(--l--theme--typography--caption--font-size);
4
26
  font-style: var(--l--theme--typography--caption--font-style);
5
- font-variant: var(--l--theme--typography--caption--font-variant-caps);
27
+ font-variant-caps: var(--l--theme--typography--caption--font-variant-caps);
6
28
  font-weight: var(--l--theme--typography--caption--font-weight);
7
29
  letter-spacing: var(--l--theme--typography--caption--letter-spacing);
8
30
  line-height: var(--l--theme--typography--caption--line-height);
@@ -13,18 +35,95 @@
13
35
  font-family: var(--l--theme--typography--caption-attribution--font-family);
14
36
  font-size: var(--l--theme--typography--caption-attribution--font-size);
15
37
  font-style: var(--l--theme--typography--caption-attribution--font-style);
16
- font-variant: var(--l--theme--typography--caption-attribution--font-variant-caps);
38
+ font-variant-caps: var(--l--theme--typography--caption-attribution--font-variant-caps);
17
39
  font-weight: var(--l--theme--typography--caption-attribution--font-weight);
18
40
  letter-spacing: var(--l--theme--typography--caption-attribution--letter-spacing);
19
41
  line-height: var(--l--theme--typography--caption-attribution--line-height);
20
42
  text-transform: var(--l--theme--typography--caption-attribution--text-transform);
21
43
  }
22
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
+
23
122
  @define-mixin is-style-overline {
24
123
  font-family: var(--l--theme--typography--overline--font-family);
25
124
  font-size: var(--l--theme--typography--overline--font-size);
26
125
  font-style: var(--l--theme--typography--overline--font-style);
27
- font-variant: var(--l--theme--typography--overline--font-variant-caps);
126
+ font-variant-caps: var(--l--theme--typography--overline--font-variant-caps);
28
127
  font-weight: var(--l--theme--typography--overline--font-weight);
29
128
  letter-spacing: var(--l--theme--typography--overline--letter-spacing);
30
129
  line-height: var(--l--theme--typography--overline--line-height);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/mixins",
3
- "version": "0.0.2",
3
+ "version": "0.1.1",
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.3"
20
+ "@withlayers/tokens": "0.2.0"
21
21
  }
22
22
  }