mediacube-ui 0.1.419 → 0.1.420
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/CHANGELOG.md +2 -0
- package/package.json +1 -1
- package/src/elements/McSpinDigit/McSpinDigit.vue +30 -69
- package/src/elements/McSpinNumber/McSpinNumber.vue +28 -82
- package/src/elements/McTitle/McTitle.vue +2 -91
- package/src/mixins/classAndStyleMixin.js +55 -0
- package/src/styles/_mixins.scss +63 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
4
4
|
|
|
5
|
+
### [0.1.420](https://github.com/MediaCubeCo/mcui/compare/v0.1.419...v0.1.420) (2025-09-29)
|
|
6
|
+
|
|
5
7
|
### [0.1.419](https://github.com/MediaCubeCo/mcui/compare/v0.1.418...v0.1.419) (2025-09-25)
|
|
6
8
|
|
|
7
9
|
### [0.1.418](https://github.com/MediaCubeCo/mcui/compare/v0.1.417...v0.1.418) (2025-09-24)
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :id="id" :class="
|
|
2
|
+
<div :id="id" :class="containerClasses" :style="containerStyles">
|
|
3
3
|
<!-- фэйк цифра, нужно что бы устанавливать нужную ширину контейнера -->
|
|
4
4
|
<span class="mc-spin-digit-container__target">{{ end }}</span>
|
|
5
5
|
<div class="mc-spin-digit" :style="digitStyles">
|
|
@@ -10,25 +10,12 @@
|
|
|
10
10
|
</div>
|
|
11
11
|
</template>
|
|
12
12
|
<script>
|
|
13
|
-
|
|
14
|
-
const validators = {
|
|
15
|
-
size: v => ['100', '200', '300', '400', '500', '600', '700'].includes(v),
|
|
16
|
-
weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
const sizes = ['xs', 's', 'm', 'l', 'xl']
|
|
20
|
-
const variationProps = {}
|
|
13
|
+
import classAndStyleMixin from '../../mixins/classAndStyleMixin'
|
|
21
14
|
|
|
22
|
-
values.forEach(value => {
|
|
23
|
-
const validator = validators[value]
|
|
24
|
-
sizes.forEach(size => {
|
|
25
|
-
variationProps[`${value}-${size}`] = { type: String, validator }
|
|
26
|
-
})
|
|
27
|
-
})
|
|
28
15
|
export default {
|
|
29
16
|
name: 'McSpinDigit',
|
|
17
|
+
mixins: [classAndStyleMixin],
|
|
30
18
|
props: {
|
|
31
|
-
...variationProps,
|
|
32
19
|
/**
|
|
33
20
|
* min - 0, max - 9
|
|
34
21
|
* */
|
|
@@ -47,16 +34,6 @@ export default {
|
|
|
47
34
|
type: Number,
|
|
48
35
|
default: 500,
|
|
49
36
|
},
|
|
50
|
-
size: {
|
|
51
|
-
type: String,
|
|
52
|
-
default: '300',
|
|
53
|
-
validator: validators.size,
|
|
54
|
-
},
|
|
55
|
-
weight: {
|
|
56
|
-
type: String,
|
|
57
|
-
default: 'normal',
|
|
58
|
-
validator: validators.weight,
|
|
59
|
-
},
|
|
60
37
|
color: {
|
|
61
38
|
type: String,
|
|
62
39
|
default: 'black',
|
|
@@ -75,26 +52,13 @@ export default {
|
|
|
75
52
|
transform: `translateY(-${this.offset * 100}%)`,
|
|
76
53
|
}
|
|
77
54
|
},
|
|
55
|
+
containerClasses() {
|
|
56
|
+
return this.getClassNames('mc-spin-digit-container', this.$props)
|
|
57
|
+
},
|
|
78
58
|
containerStyles() {
|
|
79
|
-
const classes = {
|
|
80
|
-
'mc-spin-digit-container': true,
|
|
81
|
-
}
|
|
82
|
-
const variables = {
|
|
83
|
-
'--mc-spin-digit-font-size': `var(--font-size-${this.size}, var(--font-size-300))`,
|
|
84
|
-
'--mc-spin-digit-font-color': `var(--color-${this.color}, var(--color-black))`,
|
|
85
|
-
'--mc-spin-digit-font-weight': `var(--font-weight-${this.weight}, var(--font-weight-normal))`,
|
|
86
|
-
'--mc-spin-duration': `${this.duration}ms`,
|
|
87
|
-
}
|
|
88
|
-
Object.entries(this.$props).forEach(([key, value]) => {
|
|
89
|
-
if (key.startsWith('size') && key !== 'size' && value) {
|
|
90
|
-
const suffix = key.replace('size', '').toLowerCase()
|
|
91
|
-
value && (variables[`--mc-spin-digit-font-size-${suffix}`] = `var(--font-size-${value})`)
|
|
92
|
-
classes[`mc-spin-digit-container--size-${suffix}`] = true
|
|
93
|
-
}
|
|
94
|
-
})
|
|
95
59
|
return {
|
|
96
|
-
|
|
97
|
-
|
|
60
|
+
'--mc-spin-duration': `${this.duration}ms`,
|
|
61
|
+
...this.getStyles('mc-spin-digit', this.$props),
|
|
98
62
|
}
|
|
99
63
|
},
|
|
100
64
|
},
|
|
@@ -134,16 +98,16 @@ export default {
|
|
|
134
98
|
</script>
|
|
135
99
|
<style lang="scss">
|
|
136
100
|
@import '../../tokens/font-sizes';
|
|
101
|
+
@import '../../tokens/line-heights';
|
|
137
102
|
@import '../../tokens/colors';
|
|
138
103
|
@import '../../tokens/font-families';
|
|
139
104
|
@import '../../tokens/font-weights';
|
|
140
105
|
@import '../../tokens/media-queries';
|
|
106
|
+
@import '../../styles/mixins';
|
|
141
107
|
|
|
142
108
|
.mc-spin-digit-container {
|
|
143
109
|
$block-name: &;
|
|
144
|
-
|
|
145
|
-
--font-size-#{$key}: #{$value};
|
|
146
|
-
}
|
|
110
|
+
|
|
147
111
|
@each $key, $value in $token-colors {
|
|
148
112
|
--color-#{$key}: #{$value};
|
|
149
113
|
}
|
|
@@ -151,24 +115,28 @@ export default {
|
|
|
151
115
|
--font-weight-#{$key}: #{$value};
|
|
152
116
|
}
|
|
153
117
|
|
|
154
|
-
--mc-spin-digit-
|
|
155
|
-
--mc-spin-digit-
|
|
156
|
-
--mc-spin-digit-font-weight: var(--font-weight-normal);
|
|
118
|
+
--mc-spin-digit-color: var(--color-black);
|
|
119
|
+
--mc-spin-digit-weight: var(--font-weight-normal);
|
|
157
120
|
|
|
158
|
-
font-family: $font-family-main;
|
|
159
|
-
font-size: var(--mc-spin-digit-font-size);
|
|
160
|
-
font-weight: var(--mc-spin-digit-font-weight);
|
|
161
|
-
color: var(--mc-spin-digit-font-color);
|
|
162
|
-
overflow: hidden;
|
|
163
|
-
height: 1em;
|
|
164
121
|
position: relative;
|
|
122
|
+
height: 1em;
|
|
123
|
+
font-family: $font-family-main;
|
|
124
|
+
font-size: inherit;
|
|
125
|
+
font-weight: var(--mc-spin-digit-weight);
|
|
126
|
+
color: var(--mc-spin-digit-color);
|
|
165
127
|
line-height: 1;
|
|
128
|
+
overflow: hidden;
|
|
166
129
|
|
|
130
|
+
&--variation {
|
|
131
|
+
@include variations-title;
|
|
132
|
+
}
|
|
133
|
+
&--weight {
|
|
134
|
+
font-weight: var(--mc-spin-digit-weight);
|
|
135
|
+
}
|
|
167
136
|
&__target {
|
|
168
|
-
font-size: inherit;
|
|
169
|
-
font-weight: inherit;
|
|
170
|
-
color: inherit;
|
|
171
137
|
visibility: hidden;
|
|
138
|
+
font: inherit;
|
|
139
|
+
color: inherit;
|
|
172
140
|
}
|
|
173
141
|
|
|
174
142
|
.mc-spin-digit {
|
|
@@ -178,27 +146,20 @@ export default {
|
|
|
178
146
|
display: flex;
|
|
179
147
|
flex-direction: column;
|
|
180
148
|
height: 100%;
|
|
149
|
+
font: inherit;
|
|
181
150
|
color: inherit;
|
|
182
151
|
will-change: transform;
|
|
183
152
|
transition: transform var(--mc-spin-duration) cubic-bezier(0.4, 0, 0.2, 1);
|
|
184
153
|
|
|
185
154
|
&__digit {
|
|
186
155
|
height: 1em;
|
|
156
|
+
font: inherit;
|
|
187
157
|
line-height: 1em;
|
|
188
|
-
font-size: inherit;
|
|
189
|
-
font-weight: inherit;
|
|
190
158
|
color: inherit;
|
|
191
159
|
text-align: center;
|
|
192
160
|
flex-shrink: 0;
|
|
193
161
|
}
|
|
194
162
|
}
|
|
195
|
-
|
|
196
|
-
@each $key, $value in $token-media-queries {
|
|
197
|
-
@media #{$value} {
|
|
198
|
-
&--size-#{$key} {
|
|
199
|
-
font-size: var(--mc-spin-digit-font-size-#{$key}, var(--mc-spin-digit-font-size));
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
}
|
|
163
|
+
@include responsive-variations-title;
|
|
203
164
|
}
|
|
204
165
|
</style>
|
|
@@ -1,11 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div :id="id" class="
|
|
3
|
-
<div
|
|
4
|
-
v-for="(digit, i) in currentTo"
|
|
5
|
-
:key="`mc-spin-number-${id}-${i}`"
|
|
6
|
-
:class="containerStyles.classes"
|
|
7
|
-
:style="containerStyles.variables"
|
|
8
|
-
>
|
|
2
|
+
<div :id="id" :class="computedClasses" :style="computedStyles">
|
|
3
|
+
<div v-for="(digit, i) in currentTo" :key="`mc-spin-number-${id}-${i}`" class="mc-spin-number__container">
|
|
9
4
|
<template v-if="!Number.isFinite(digit)">
|
|
10
5
|
<span class="mc-spin-number__non-digit">
|
|
11
6
|
{{ currentTo[i] }}
|
|
@@ -16,11 +11,6 @@
|
|
|
16
11
|
v-bind="$props"
|
|
17
12
|
:start="+currentFrom[i]"
|
|
18
13
|
:end="+currentTo[i]"
|
|
19
|
-
:duration="duration"
|
|
20
|
-
:font-size="size"
|
|
21
|
-
:color="color"
|
|
22
|
-
:weight="weight"
|
|
23
|
-
class="mc-spin-number__digit"
|
|
24
14
|
@spin-end="actualizeNumbers"
|
|
25
15
|
/>
|
|
26
16
|
</div>
|
|
@@ -29,28 +19,15 @@
|
|
|
29
19
|
|
|
30
20
|
<script>
|
|
31
21
|
import McSpinDigit from '../McSpinDigit/McSpinDigit'
|
|
32
|
-
|
|
33
|
-
const validators = {
|
|
34
|
-
size: v => ['100', '200', '300', '400', '500', '600', '700'].includes(v),
|
|
35
|
-
weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
const sizes = ['xs', 's', 'm', 'l', 'xl']
|
|
39
|
-
const variationProps = {}
|
|
22
|
+
import classAndStyleMixin from '../../mixins/classAndStyleMixin'
|
|
40
23
|
|
|
41
|
-
values.forEach(value => {
|
|
42
|
-
const validator = validators[value]
|
|
43
|
-
sizes.forEach(size => {
|
|
44
|
-
variationProps[`${value}-${size}`] = { type: String, validator }
|
|
45
|
-
})
|
|
46
|
-
})
|
|
47
24
|
export default {
|
|
48
25
|
name: 'McSpinNumber',
|
|
49
26
|
components: {
|
|
50
27
|
McSpinDigit,
|
|
51
28
|
},
|
|
29
|
+
mixins: [classAndStyleMixin],
|
|
52
30
|
props: {
|
|
53
|
-
...variationProps,
|
|
54
31
|
start: {
|
|
55
32
|
type: [Number, String],
|
|
56
33
|
required: true,
|
|
@@ -63,16 +40,6 @@ export default {
|
|
|
63
40
|
type: Number,
|
|
64
41
|
default: 500,
|
|
65
42
|
},
|
|
66
|
-
size: {
|
|
67
|
-
type: String,
|
|
68
|
-
default: '300',
|
|
69
|
-
validator: validators.size,
|
|
70
|
-
},
|
|
71
|
-
weight: {
|
|
72
|
-
type: String,
|
|
73
|
-
default: 'normal',
|
|
74
|
-
validator: validators.weight,
|
|
75
|
-
},
|
|
76
43
|
color: {
|
|
77
44
|
type: String,
|
|
78
45
|
},
|
|
@@ -91,26 +58,11 @@ export default {
|
|
|
91
58
|
const from = `000000000${String((this.current_from ?? this.start) || 0)}`.slice(-this.currentTo.length)
|
|
92
59
|
return this.formatNumber(from)
|
|
93
60
|
},
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
'--mc-spin-number-font-size': `var(--font-size-${this.size}, var(--font-size-300))`,
|
|
100
|
-
'--mc-spin-number-font-color': `var(--color-${this.color}, var(--color-black))`,
|
|
101
|
-
'--mc-spin-number-font-weight': `var(--font-weight-${this.weight}, var(--font-weight-normal))`,
|
|
102
|
-
}
|
|
103
|
-
Object.entries(this.$props).forEach(([key, value]) => {
|
|
104
|
-
if (key.startsWith('size') && key !== 'size' && value) {
|
|
105
|
-
const suffix = key.replace('size', '').toLowerCase()
|
|
106
|
-
value && (variables[`--mc-spin-number-font-size-${suffix}`] = `var(--font-size-${value})`)
|
|
107
|
-
classes[`mc-spin-number--size-${suffix}`] = true
|
|
108
|
-
}
|
|
109
|
-
})
|
|
110
|
-
return {
|
|
111
|
-
classes,
|
|
112
|
-
variables,
|
|
113
|
-
}
|
|
61
|
+
computedClasses() {
|
|
62
|
+
return this.getClassNames('mc-spin-number', this.$props)
|
|
63
|
+
},
|
|
64
|
+
computedStyles() {
|
|
65
|
+
return this.getStyles('mc-spin-number', this.$props)
|
|
114
66
|
},
|
|
115
67
|
},
|
|
116
68
|
methods: {
|
|
@@ -128,55 +80,49 @@ export default {
|
|
|
128
80
|
|
|
129
81
|
<style lang="scss">
|
|
130
82
|
@import '../../tokens/font-sizes';
|
|
83
|
+
@import '../../tokens/line-heights';
|
|
131
84
|
@import '../../tokens/colors';
|
|
132
85
|
@import '../../tokens/font-families';
|
|
133
86
|
@import '../../tokens/font-weights';
|
|
134
87
|
@import '../../tokens/media-queries';
|
|
88
|
+
@import '../../styles/mixins';
|
|
135
89
|
|
|
136
90
|
.mc-spin-number {
|
|
137
91
|
$block-name: &;
|
|
138
92
|
|
|
139
|
-
@each $key, $value in $token-font-sizes {
|
|
140
|
-
--font-size-#{$key}: #{$value};
|
|
141
|
-
}
|
|
142
93
|
@each $key, $value in $token-colors {
|
|
143
94
|
--color-#{$key}: #{$value};
|
|
144
95
|
}
|
|
145
96
|
@each $key, $value in $token-font-weights {
|
|
146
97
|
--font-weight-#{$key}: #{$value};
|
|
147
98
|
}
|
|
148
|
-
--mc-spin-number-
|
|
149
|
-
--mc-spin-number-
|
|
150
|
-
--mc-spin-number-font-weight: var(--font-weight-normal);
|
|
99
|
+
--mc-spin-number-color: var(--color-black);
|
|
100
|
+
--mc-spin-number-weight: var(--font-weight-normal);
|
|
151
101
|
|
|
152
102
|
display: flex;
|
|
153
103
|
align-items: center;
|
|
154
|
-
justify-content: center;
|
|
155
104
|
font-family: $font-family-main;
|
|
156
|
-
font-
|
|
157
|
-
font-weight: var(--mc-spin-number-font-weight);
|
|
105
|
+
font-weight: inherit;
|
|
158
106
|
line-height: 1;
|
|
159
|
-
color: var(--mc-spin-number-
|
|
107
|
+
color: var(--mc-spin-number-color);
|
|
160
108
|
|
|
109
|
+
&--variation {
|
|
110
|
+
@include variations-title;
|
|
111
|
+
}
|
|
112
|
+
&--weight {
|
|
113
|
+
font-weight: var(--mc-spin-number-weight);
|
|
114
|
+
}
|
|
115
|
+
&__container {
|
|
116
|
+
display: flex;
|
|
117
|
+
align-items: center;
|
|
118
|
+
justify-content: center;
|
|
119
|
+
}
|
|
161
120
|
&__non-digit {
|
|
162
121
|
display: inline-flex;
|
|
163
122
|
min-width: 0.1em;
|
|
164
|
-
font
|
|
165
|
-
font-size: inherit;
|
|
166
|
-
font-weight: inherit;
|
|
123
|
+
font: inherit;
|
|
167
124
|
color: inherit;
|
|
168
125
|
}
|
|
169
|
-
|
|
170
|
-
&-container {
|
|
171
|
-
display: flex;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
@each $key, $value in $token-media-queries {
|
|
175
|
-
@media #{$value} {
|
|
176
|
-
&--size-#{$key} {
|
|
177
|
-
font-size: var(--mc-spin-number-font-size-#{$key}, var(--mc-spin-number-font-size));
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
}
|
|
126
|
+
@include responsive-variations-title;
|
|
181
127
|
}
|
|
182
128
|
</style>
|
|
@@ -175,75 +175,6 @@ export default {
|
|
|
175
175
|
--mc-title-weight: initial;
|
|
176
176
|
--mc-title-line-height: initial;
|
|
177
177
|
color: var(--mc-title-color);
|
|
178
|
-
@mixin variations() {
|
|
179
|
-
font-family: $font-family-main;
|
|
180
|
-
&-h1 {
|
|
181
|
-
font-size: $font-size-700;
|
|
182
|
-
line-height: $line-height-600;
|
|
183
|
-
font-weight: $font-weight-semi-bold;
|
|
184
|
-
#{$block-name}__text {
|
|
185
|
-
max-width: 920px;
|
|
186
|
-
}
|
|
187
|
-
}
|
|
188
|
-
&-h2 {
|
|
189
|
-
font-size: $font-size-600;
|
|
190
|
-
line-height: $line-height-500;
|
|
191
|
-
font-weight: $font-weight-semi-bold;
|
|
192
|
-
#{$block-name}__text {
|
|
193
|
-
max-width: 820px;
|
|
194
|
-
}
|
|
195
|
-
}
|
|
196
|
-
&-h3 {
|
|
197
|
-
font-size: $font-size-500;
|
|
198
|
-
line-height: $line-height-400;
|
|
199
|
-
font-weight: $font-weight-semi-bold;
|
|
200
|
-
#{$block-name}__text {
|
|
201
|
-
max-width: 720px;
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
&-h4 {
|
|
205
|
-
font-size: $font-size-400;
|
|
206
|
-
line-height: $line-height-300;
|
|
207
|
-
font-weight: $font-weight-bold;
|
|
208
|
-
#{$block-name}__text {
|
|
209
|
-
max-width: 700px;
|
|
210
|
-
}
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
&-subtitle {
|
|
214
|
-
font-size: $font-size-300;
|
|
215
|
-
line-height: $line-height-250;
|
|
216
|
-
#{$block-name}__text {
|
|
217
|
-
max-width: 640px;
|
|
218
|
-
}
|
|
219
|
-
}
|
|
220
|
-
&-article {
|
|
221
|
-
font-size: $font-size-200;
|
|
222
|
-
line-height: $line-height-250;
|
|
223
|
-
#{$block-name}__text {
|
|
224
|
-
max-width: 536px;
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
&-info {
|
|
228
|
-
font-size: $font-size-300;
|
|
229
|
-
line-height: $line-height-300;
|
|
230
|
-
}
|
|
231
|
-
&-body {
|
|
232
|
-
font-size: $font-size-200;
|
|
233
|
-
line-height: $line-height-200;
|
|
234
|
-
#{$block-name}__text {
|
|
235
|
-
max-width: 330px;
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
&-overline {
|
|
239
|
-
font-size: $font-size-100;
|
|
240
|
-
line-height: $line-height-150;
|
|
241
|
-
font-weight: $font-weight-medium;
|
|
242
|
-
#{$block-name}__text {
|
|
243
|
-
max-width: 330px;
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
}
|
|
247
178
|
|
|
248
179
|
margin-top: 0;
|
|
249
180
|
margin-bottom: 0;
|
|
@@ -281,7 +212,7 @@ export default {
|
|
|
281
212
|
}
|
|
282
213
|
|
|
283
214
|
&--variation {
|
|
284
|
-
@include variations;
|
|
215
|
+
@include variations-title;
|
|
285
216
|
}
|
|
286
217
|
|
|
287
218
|
&--ellipsis {
|
|
@@ -327,27 +258,7 @@ export default {
|
|
|
327
258
|
&--weight {
|
|
328
259
|
font-weight: var(--mc-title-weight);
|
|
329
260
|
}
|
|
330
|
-
@
|
|
331
|
-
@media #{$value} {
|
|
332
|
-
&--variation-#{$media} {
|
|
333
|
-
@include variations;
|
|
334
|
-
}
|
|
335
|
-
&--weight-#{$media} {
|
|
336
|
-
&-normal {
|
|
337
|
-
font-weight: $font-weight-normal;
|
|
338
|
-
}
|
|
339
|
-
&-medium {
|
|
340
|
-
font-weight: $font-weight-medium;
|
|
341
|
-
}
|
|
342
|
-
&-semi-bold {
|
|
343
|
-
font-weight: $font-weight-semi-bold;
|
|
344
|
-
}
|
|
345
|
-
&-bold {
|
|
346
|
-
font-weight: $font-weight-bold;
|
|
347
|
-
}
|
|
348
|
-
}
|
|
349
|
-
}
|
|
350
|
-
}
|
|
261
|
+
@include responsive-variations-title;
|
|
351
262
|
h1,
|
|
352
263
|
h2,
|
|
353
264
|
h3,
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import _upperFirst from 'lodash/upperFirst'
|
|
2
|
+
const values = ['variation', 'weight']
|
|
3
|
+
const sizes = ['xs', 's', 'm', 'l', 'xl', 'xxl']
|
|
4
|
+
const validators = {
|
|
5
|
+
variation: v => ['h1', 'h2', 'h3', 'h4', 'subtitle', 'body', 'overline', 'article', 'info'].includes(v),
|
|
6
|
+
weight: v => ['normal', 'medium', 'semi-bold', 'bold'].includes(v),
|
|
7
|
+
}
|
|
8
|
+
const variationProps = {}
|
|
9
|
+
values.forEach(value => {
|
|
10
|
+
const validator = validators[value]
|
|
11
|
+
sizes.forEach(size => {
|
|
12
|
+
variationProps[`${value}-${size}`] = { type: String, validator }
|
|
13
|
+
})
|
|
14
|
+
})
|
|
15
|
+
export default {
|
|
16
|
+
props: {
|
|
17
|
+
...variationProps,
|
|
18
|
+
variation: {
|
|
19
|
+
type: String,
|
|
20
|
+
default: 'body',
|
|
21
|
+
validator: validators.variation,
|
|
22
|
+
},
|
|
23
|
+
weight: {
|
|
24
|
+
type: String,
|
|
25
|
+
validator: validators.weight,
|
|
26
|
+
},
|
|
27
|
+
},
|
|
28
|
+
methods: {
|
|
29
|
+
getClassNames(class_name, props = {}) {
|
|
30
|
+
const classes = {
|
|
31
|
+
[class_name]: true,
|
|
32
|
+
[`${class_name}--variation-${props.variation}`]: props.variation,
|
|
33
|
+
[`${class_name}--weight`]: !!props.weight,
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
values.forEach(value => {
|
|
37
|
+
sizes.forEach(size => {
|
|
38
|
+
const sizeValue = props[`${value}${_upperFirst(size)}`]
|
|
39
|
+
if (sizeValue) {
|
|
40
|
+
classes[`${class_name}--${value}-${size}-${sizeValue}`] = true
|
|
41
|
+
}
|
|
42
|
+
})
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
return Object.keys(classes).filter(key => classes[key])
|
|
46
|
+
},
|
|
47
|
+
getStyles(class_name, props = {}) {
|
|
48
|
+
const styles = {}
|
|
49
|
+
props.color && (styles[`--${class_name}-color`] = `var(--color-${props.color}, var(--color-black))`)
|
|
50
|
+
props.weight &&
|
|
51
|
+
(styles[`--${class_name}-weight`] = `var(--font-weight-${props.weight}, var(--font-weight-normal))`)
|
|
52
|
+
return styles
|
|
53
|
+
},
|
|
54
|
+
},
|
|
55
|
+
}
|
package/src/styles/_mixins.scss
CHANGED
|
@@ -622,3 +622,66 @@
|
|
|
622
622
|
margin-inline-start: $space;
|
|
623
623
|
}
|
|
624
624
|
}
|
|
625
|
+
|
|
626
|
+
@mixin variations-title() {
|
|
627
|
+
font-family: $font-family-main;
|
|
628
|
+
&-h1 {
|
|
629
|
+
font-size: $font-size-700;
|
|
630
|
+
line-height: $line-height-600;
|
|
631
|
+
font-weight: $font-weight-semi-bold;
|
|
632
|
+
}
|
|
633
|
+
&-h2 {
|
|
634
|
+
font-size: $font-size-600;
|
|
635
|
+
line-height: $line-height-500;
|
|
636
|
+
font-weight: $font-weight-semi-bold;
|
|
637
|
+
}
|
|
638
|
+
&-h3 {
|
|
639
|
+
font-size: $font-size-500;
|
|
640
|
+
line-height: $line-height-400;
|
|
641
|
+
font-weight: $font-weight-semi-bold;
|
|
642
|
+
}
|
|
643
|
+
&-h4 {
|
|
644
|
+
font-size: $font-size-400;
|
|
645
|
+
line-height: $line-height-300;
|
|
646
|
+
font-weight: $font-weight-bold;
|
|
647
|
+
}
|
|
648
|
+
|
|
649
|
+
&-subtitle {
|
|
650
|
+
font-size: $font-size-300;
|
|
651
|
+
line-height: $line-height-250;
|
|
652
|
+
}
|
|
653
|
+
&-article {
|
|
654
|
+
font-size: $font-size-200;
|
|
655
|
+
line-height: $line-height-250;
|
|
656
|
+
}
|
|
657
|
+
&-info {
|
|
658
|
+
font-size: $font-size-300;
|
|
659
|
+
line-height: $line-height-300;
|
|
660
|
+
}
|
|
661
|
+
&-body {
|
|
662
|
+
font-size: $font-size-200;
|
|
663
|
+
line-height: $line-height-200;
|
|
664
|
+
}
|
|
665
|
+
&-overline {
|
|
666
|
+
font-size: $font-size-100;
|
|
667
|
+
line-height: $line-height-150;
|
|
668
|
+
font-weight: $font-weight-medium;
|
|
669
|
+
}
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
@mixin responsive-variations-title() {
|
|
673
|
+
@each $media, $value in $token-media-queries {
|
|
674
|
+
@media #{$value} {
|
|
675
|
+
&--variation-#{$media} {
|
|
676
|
+
@include variations-title;
|
|
677
|
+
}
|
|
678
|
+
&--weight-#{$media} {
|
|
679
|
+
@each $weight-name, $weight-value in $token-font-weights {
|
|
680
|
+
&-#{$weight-name} {
|
|
681
|
+
font-weight: $weight-value;
|
|
682
|
+
}
|
|
683
|
+
}
|
|
684
|
+
}
|
|
685
|
+
}
|
|
686
|
+
}
|
|
687
|
+
}
|