@muraldevkit/ui-toolkit 1.11.0 → 1.12.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.
- package/dist/components/index.d.ts +1 -0
- package/dist/components/text/MrlText/MrlText.d.ts +38 -0
- package/dist/components/text/MrlText/index.d.ts +1 -0
- package/dist/components/text/MrlTextHeading/MrlTextHeading.d.ts +31 -0
- package/dist/components/text/MrlTextHeading/index.d.ts +1 -0
- package/dist/components/text/constants.d.ts +44 -0
- package/dist/components/text/index.d.ts +2 -0
- package/dist/index.js +1 -1
- package/dist/styles/MrlText/module.scss +14 -0
- package/dist/styles/MrlText/variables.scss +39 -0
- package/dist/styles/MrlTextHeading/module.scss +35 -0
- package/dist/styles/MrlTextHeading/variables.scss +53 -0
- package/package.json +1 -1
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
@use './styles.variables.scss';
|
|
2
|
+
|
|
3
|
+
////
|
|
4
|
+
/// Text component styles
|
|
5
|
+
/// @group Text
|
|
6
|
+
////
|
|
7
|
+
|
|
8
|
+
.MrlText {
|
|
9
|
+
font-family: var(--mrl-text-family);
|
|
10
|
+
font-size: var(--mrl-text-size);
|
|
11
|
+
font-weight: var(--mrl-text-weight);
|
|
12
|
+
letter-spacing: var(--mrl-text-spacing);
|
|
13
|
+
line-height: var(--mrl-text-height);
|
|
14
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Text component variables
|
|
3
|
+
/// @group Text
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
.MrlText {
|
|
7
|
+
--mrl-text-size: var(--mrl-type-size-text);
|
|
8
|
+
--mrl-text-weight: var(--mrl-type-weight-text);
|
|
9
|
+
--mrl-text-spacing: var(--mrl-type-spacing-text);
|
|
10
|
+
--mrl-text-height: var(--mrl-type-line-height-text);
|
|
11
|
+
|
|
12
|
+
// There are 5 sizes: xxsmall, xsmall, small, medium, and large.
|
|
13
|
+
// Medium is the default
|
|
14
|
+
$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
|
|
15
|
+
|
|
16
|
+
@each $size in $mrl-title-sizes {
|
|
17
|
+
&.MrlText--#{$size} {
|
|
18
|
+
--mrl-text-size: var(--mrl-type-size-text-#{$size});
|
|
19
|
+
--mrl-text-height: var(--mrl-type-line-height-text-#{$size});
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.MrlText--secondary {
|
|
25
|
+
--mrl-text-weight: var(--mrl-type-weight-text-secondary);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.MrlText--body {
|
|
29
|
+
--mrl-text-height: var(--mrl-type-line-height-text);
|
|
30
|
+
--mrl-text-weight: var(--mrl-type-weight-text);
|
|
31
|
+
--mrl-text-size: var(--mrl-type-size-text-xsmall);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.MrlText--meta,
|
|
35
|
+
.MrlText--supporting {
|
|
36
|
+
--mrl-text-height: var(--mrl-type-line-height-text);
|
|
37
|
+
--mrl-text-weight: var(--mrl-type-weight-title-secondary);
|
|
38
|
+
--mrl-text-size: var(--mrl-type-size-text-xxsmall);
|
|
39
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
@use './styles.variables.scss';
|
|
2
|
+
|
|
3
|
+
////
|
|
4
|
+
/// Text/Heading component styles
|
|
5
|
+
/// @group Heading
|
|
6
|
+
////
|
|
7
|
+
|
|
8
|
+
// ---- Poster, Display, and Headline Classes ----
|
|
9
|
+
// There are also title use-cases but they follow a different scale/structure
|
|
10
|
+
$mrl-heading-use-cases: 'poster', 'display', 'headline';
|
|
11
|
+
|
|
12
|
+
// There are 3 sizes: small, medium, and large.
|
|
13
|
+
// Medium is the default
|
|
14
|
+
$mrl-heading-sizes: 'large', 'small';
|
|
15
|
+
|
|
16
|
+
@each $use-case in $mrl-heading-use-cases {
|
|
17
|
+
.MrlTextHeading-#{$use-case} {
|
|
18
|
+
display: block;
|
|
19
|
+
font-family: var(--mrl-heading-family);
|
|
20
|
+
font-size: var(--mrl-heading-size);
|
|
21
|
+
font-weight: var(--mrl-heading-weight);
|
|
22
|
+
letter-spacing: var(--mrl-heading-spacing);
|
|
23
|
+
line-height: var(--mrl-heading-height);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
// ---- Title Classes ----
|
|
28
|
+
.MrlTextHeading-title {
|
|
29
|
+
display: block;
|
|
30
|
+
font-family: var(--mrl-heading-family);
|
|
31
|
+
font-size: var(--mrl-heading-size);
|
|
32
|
+
font-weight: var(--mrl-heading-weight);
|
|
33
|
+
letter-spacing: var(--mrl-heading-spacing);
|
|
34
|
+
line-height: var(--mrl-heading-height);
|
|
35
|
+
}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
////
|
|
2
|
+
/// Text/Heading component variables
|
|
3
|
+
/// @group Heading
|
|
4
|
+
////
|
|
5
|
+
|
|
6
|
+
// ---- Poster, Display, and Headline Classes ----
|
|
7
|
+
// There are also title use-cases but they follow a different scale/structure
|
|
8
|
+
$mrl-heading-use-cases: 'poster', 'display', 'headline';
|
|
9
|
+
|
|
10
|
+
// There are 3 sizes: small, medium, and large.
|
|
11
|
+
// Medium is the default
|
|
12
|
+
$mrl-heading-sizes: 'large', 'small';
|
|
13
|
+
|
|
14
|
+
@each $use-case in $mrl-heading-use-cases {
|
|
15
|
+
.MrlTextHeading-#{$use-case} {
|
|
16
|
+
--mrl-heading-family: var(--mrl-font-family-01);
|
|
17
|
+
--mrl-heading-size: var(--mrl-type-size-#{$use-case});
|
|
18
|
+
--mrl-heading-weight: var(--mrl-type-weight-#{$use-case});
|
|
19
|
+
--mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case});
|
|
20
|
+
--mrl-heading-height: var(--mrl-type-line-height-#{$use-case});
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@each $size in $mrl-heading-sizes {
|
|
24
|
+
.MrlTextHeading-#{$use-case}--#{$size} {
|
|
25
|
+
--mrl-heading-size: var(--mrl-type-size-#{$use-case}-#{$size});
|
|
26
|
+
--mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case}-#{$size});
|
|
27
|
+
--mrl-heading-height: var(--mrl-type-line-height-#{$use-case}-#{$size});
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
// ---- Title Classes ----
|
|
33
|
+
.MrlTextHeading-title {
|
|
34
|
+
--mrl-heading-size: var(--mrl-type-size-text);
|
|
35
|
+
--mrl-heading-weight: var(--mrl-type-weight-title);
|
|
36
|
+
--mrl-heading-spacing: var(--mrl-type-spacing-text);
|
|
37
|
+
--mrl-heading-height: var(--mrl-type-line-height-text);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// There are 5 sizes: xxsmall, xsmall, small, medium, and large.
|
|
41
|
+
// Medium is the default
|
|
42
|
+
$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
|
|
43
|
+
|
|
44
|
+
@each $size in $mrl-title-sizes {
|
|
45
|
+
.MrlTextHeading-title--#{$size} {
|
|
46
|
+
--mrl-heading-size: var(--mrl-type-size-text-#{$size});
|
|
47
|
+
--mrl-heading-height: var(--mrl-type-line-height-text-#{$size});
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.MrlTextHeading-title--secondary {
|
|
52
|
+
--mrl-heading-weight: var(--mrl-type-weight-title-secondary);
|
|
53
|
+
}
|