@withlayers/mixins 0.2.0 → 0.2.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 (5) hide show
  1. package/dist/index.css +1 -3
  2. package/package.json +4 -4
  3. package/dist/a11y.css +0 -12
  4. package/dist/link.css +0 -85
  5. package/dist/typography.css +0 -142
package/dist/index.css CHANGED
@@ -1,3 +1 @@
1
- @import url('a11y.css');
2
- @import url('link.css');
3
- @import url('typography.css');
1
+ @define-mixin is-visually-hidden{border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important;}@define-mixin is-style-link-default{color: var(--l--theme--link--default--color--content--default); text-decoration-line: underline; text-decoration-style: solid; &:hover {color: var(--l--theme--link--default--color--content--hover); text-decoration-line: none;} &:focus {color: var(--l--theme--link--default--color--content--focus); text-decoration-line: none;} &:active {color: var(--l--theme--link--default--color--content--active); text-decoration-line: none;} &:visited {color: var(--l--theme--link--default--color--content--visited);}}@define-mixin is-style-link-knockout{color: var(--l--theme--link--knockout--color--content--knockout); text-decoration-line: underline; text-decoration-style: solid; &:hover {color: var(--l--theme--link--knockout--color--content--hover); text-decoration-line: none;} &:focus {color: var(--l--theme--link--knockout--color--content--focus); text-decoration-line: none;} &:active {color: var(--l--theme--link--knockout--color--content--active); text-decoration-line: none;} &:visited {color: var(--l--theme--link--knockout--color--content--visited);}}@define-mixin is-style-link-subtle{color: var(--l--theme--link--subtle--color--content--default); text-decoration-line: underline; text-decoration-style: solid; &:hover {color: var(--l--theme--link--subtle--color--content--hover); text-decoration-line: none;} &:focus {color: var(--l--theme--link--subtle--color--content--focus); text-decoration-line: none;} &:active {color: var(--l--theme--link--subtle--color--content--active); text-decoration-line: none;} &:visited {color: var(--l--theme--link--subtle--color--content--visited);}}@define-mixin is-style-link-no-initial-underline{text-decoration-line: none; &:hover,&:focus,&:active {text-decoration-line: underline; text-decoration-style: solid;}}@define-mixin is-style-body-md{font-family: var(--l--theme--typography--body--md--font-family); font-size: var(--l--theme--typography--body--md--font-size); font-style: var(--l--theme--typography--body--md--font-style); font-variant-caps: var(--l--theme--typography--body--md--font-variant-caps); font-weight: var(--l--theme--typography--body--md--font-weight); letter-spacing: var(--l--theme--typography--body--md--letter-spacing); line-height: var(--l--theme--typography--body--md--line-height); text-transform: var(--l--theme--typography--body--md--text-transform);}@define-mixin is-style-body-sm{font-family: var(--l--theme--typography--body--sm--font-family); font-size: var(--l--theme--typography--body--sm--font-size); font-style: var(--l--theme--typography--body--sm--font-style); font-variant-caps: var(--l--theme--typography--body--sm--font-variant-caps); font-weight: var(--l--theme--typography--body--sm--font-weight); letter-spacing: var(--l--theme--typography--body--sm--letter-spacing); line-height: var(--l--theme--typography--body--sm--line-height); text-transform: var(--l--theme--typography--body--sm--text-transform);}@define-mixin is-style-caption{font-family: var(--l--theme--typography--caption--font-family); font-size: var(--l--theme--typography--caption--font-size); font-style: var(--l--theme--typography--caption--font-style); font-variant-caps: var(--l--theme--typography--caption--font-variant-caps); font-weight: var(--l--theme--typography--caption--font-weight); letter-spacing: var(--l--theme--typography--caption--letter-spacing); line-height: var(--l--theme--typography--caption--line-height); text-transform: var(--l--theme--typography--caption--text-transform);}@define-mixin is-style-caption-attribution{font-family: var(--l--theme--typography--caption-attribution--font-family); font-size: var(--l--theme--typography--caption-attribution--font-size); font-style: var(--l--theme--typography--caption-attribution--font-style); font-variant-caps: var(--l--theme--typography--caption-attribution--font-variant-caps); font-weight: var(--l--theme--typography--caption-attribution--font-weight); letter-spacing: var(--l--theme--typography--caption-attribution--letter-spacing); line-height: var(--l--theme--typography--caption-attribution--line-height); text-transform: var(--l--theme--typography--caption-attribution--text-transform);}@define-mixin is-style-code{font-family: var(--l--theme--typography--code--font-family); font-size: var(--l--theme--typography--code--font-size); font-style: var(--l--theme--typography--code--font-style); font-variant-caps: var(--l--theme--typography--code--font-variant-caps); font-weight: var(--l--theme--typography--code--font-weight); letter-spacing: var(--l--theme--typography--code--letter-spacing); line-height: var(--l--theme--typography--code--line-height); text-transform: var(--l--theme--typography--code--text-transform);}@define-mixin is-style-h1{font-family: var(--l--theme--typography--h1--font-family); font-size: var(--l--theme--typography--h1--font-size); font-style: var(--l--theme--typography--h1--font-style); font-variant-caps: var(--l--theme--typography--h1--font-variant-caps); font-weight: var(--l--theme--typography--h1--font-weight); letter-spacing: var(--l--theme--typography--h1--letter-spacing); line-height: var(--l--theme--typography--h1--line-height); text-transform: var(--l--theme--typography--h1--text-transform);}@define-mixin is-style-h2{font-family: var(--l--theme--typography--h2--font-family); font-size: var(--l--theme--typography--h2--font-size); font-style: var(--l--theme--typography--h2--font-style); font-variant-caps: var(--l--theme--typography--h2--font-variant-caps); font-weight: var(--l--theme--typography--h2--font-weight); letter-spacing: var(--l--theme--typography--h2--letter-spacing); line-height: var(--l--theme--typography--h2--line-height); text-transform: var(--l--theme--typography--h2--text-transform);}@define-mixin is-style-h3{font-family: var(--l--theme--typography--h3--font-family); font-size: var(--l--theme--typography--h3--font-size); font-style: var(--l--theme--typography--h3--font-style); font-variant-caps: var(--l--theme--typography--h3--font-variant-caps); font-weight: var(--l--theme--typography--h3--font-weight); letter-spacing: var(--l--theme--typography--h3--letter-spacing); line-height: var(--l--theme--typography--h3--line-height); text-transform: var(--l--theme--typography--h3--text-transform);}@define-mixin is-style-h4{font-family: var(--l--theme--typography--h4--font-family); font-size: var(--l--theme--typography--h4--font-size); font-style: var(--l--theme--typography--h4--font-style); font-variant-caps: var(--l--theme--typography--h4--font-variant-caps); font-weight: var(--l--theme--typography--h4--font-weight); letter-spacing: var(--l--theme--typography--h4--letter-spacing); line-height: var(--l--theme--typography--h4--line-height); text-transform: var(--l--theme--typography--h4--text-transform);}@define-mixin is-style-h5{font-family: var(--l--theme--typography--h5--font-family); font-size: var(--l--theme--typography--h5--font-size); font-style: var(--l--theme--typography--h5--font-style); font-variant-caps: var(--l--theme--typography--h5--font-variant-caps); font-weight: var(--l--theme--typography--h5--font-weight); letter-spacing: var(--l--theme--typography--h5--letter-spacing); line-height: var(--l--theme--typography--h5--line-height); text-transform: var(--l--theme--typography--h5--text-transform);}@define-mixin is-style-h6{font-family: var(--l--theme--typography--h6--font-family); font-size: var(--l--theme--typography--h6--font-size); font-style: var(--l--theme--typography--h6--font-style); font-variant-caps: var(--l--theme--typography--h6--font-variant-caps); font-weight: var(--l--theme--typography--h6--font-weight); letter-spacing: var(--l--theme--typography--h6--letter-spacing); line-height: var(--l--theme--typography--h6--line-height); text-transform: var(--l--theme--typography--h6--text-transform);}@define-mixin is-style-overline{font-family: var(--l--theme--typography--overline--font-family); font-size: var(--l--theme--typography--overline--font-size); font-style: var(--l--theme--typography--overline--font-style); font-variant-caps: var(--l--theme--typography--overline--font-variant-caps); font-weight: var(--l--theme--typography--overline--font-weight); letter-spacing: var(--l--theme--typography--overline--letter-spacing); line-height: var(--l--theme--typography--overline--line-height); text-transform: var(--l--theme--typography--overline--text-transform);}@define-mixin is-style-subhead{font-family: var(--l--theme--typography--subhead--font-family); font-size: var(--l--theme--typography--subhead--font-size); font-style: var(--l--theme--typography--subhead--font-style); font-variant-caps: var(--l--theme--typography--subhead--font-variant-caps); font-weight: var(--l--theme--typography--subhead--font-weight); letter-spacing: var(--l--theme--typography--subhead--letter-spacing); line-height: var(--l--theme--typography--subhead--line-height); text-transform: var(--l--theme--typography--subhead--text-transform);}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/mixins",
3
- "version": "0.2.0",
3
+ "version": "0.2.1",
4
4
  "description": "Mixins layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -13,12 +13,12 @@
13
13
  "dist"
14
14
  ],
15
15
  "scripts": {
16
- "build": "rm -rf dist && cp -R src dist",
17
- "dev": "npm run build -- --watch",
16
+ "build": "vite build",
17
+ "dev": "vite build --watch",
18
18
  "lint:css": "stylelint \"src/**/*.css\"",
19
19
  "lint:css:fix": "stylelint \"src/**/*.css\" --fix"
20
20
  },
21
21
  "dependencies": {
22
- "@withlayers/tokens": "0.3.0"
22
+ "@withlayers/tokens": "0.3.1"
23
23
  }
24
24
  }
package/dist/a11y.css DELETED
@@ -1,12 +0,0 @@
1
- @define-mixin is-visually-hidden {
2
- border: 0;
3
- clip: rect(1px, 1px, 1px, 1px);
4
- clip-path: inset(50%);
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/link.css DELETED
@@ -1,85 +0,0 @@
1
- @define-mixin is-style-link-default {
2
- color: var(--l--theme--link--default--color--content--default);
3
- text-decoration-line: underline;
4
- text-decoration-style: solid;
5
-
6
- &:hover {
7
- color: var(--l--theme--link--default--color--content--hover);
8
- text-decoration-line: none;
9
- }
10
-
11
- &:focus {
12
- color: var(--l--theme--link--default--color--content--focus);
13
- text-decoration-line: none;
14
- }
15
-
16
- &:active {
17
- color: var(--l--theme--link--default--color--content--active);
18
- text-decoration-line: none;
19
- }
20
-
21
- &:visited {
22
- color: var(--l--theme--link--default--color--content--visited);
23
- }
24
- }
25
-
26
- @define-mixin is-style-link-knockout {
27
- color: var(--l--theme--link--knockout--color--content--knockout);
28
- text-decoration-line: underline;
29
- text-decoration-style: solid;
30
-
31
- &:hover {
32
- color: var(--l--theme--link--knockout--color--content--hover);
33
- text-decoration-line: none;
34
- }
35
-
36
- &:focus {
37
- color: var(--l--theme--link--knockout--color--content--focus);
38
- text-decoration-line: none;
39
- }
40
-
41
- &:active {
42
- color: var(--l--theme--link--knockout--color--content--active);
43
- text-decoration-line: none;
44
- }
45
-
46
- &:visited {
47
- color: var(--l--theme--link--knockout--color--content--visited);
48
- }
49
- }
50
-
51
- @define-mixin is-style-link-subtle {
52
- color: var(--l--theme--link--subtle--color--content--default);
53
- text-decoration-line: underline;
54
- text-decoration-style: solid;
55
-
56
- &:hover {
57
- color: var(--l--theme--link--subtle--color--content--hover);
58
- text-decoration-line: none;
59
- }
60
-
61
- &:focus {
62
- color: var(--l--theme--link--subtle--color--content--focus);
63
- text-decoration-line: none;
64
- }
65
-
66
- &:active {
67
- color: var(--l--theme--link--subtle--color--content--active);
68
- text-decoration-line: none;
69
- }
70
-
71
- &:visited {
72
- color: var(--l--theme--link--subtle--color--content--visited);
73
- }
74
- }
75
-
76
- @define-mixin is-style-link-no-initial-underline {
77
- text-decoration-line: none;
78
-
79
- &:hover,
80
- &:focus,
81
- &:active {
82
- text-decoration-line: underline;
83
- text-decoration-style: solid;
84
- }
85
- }
package/dist/typography.css DELETED
@@ -1,142 +0,0 @@
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
- }