igniteui-theming 1.0.0-beta.2 → 1.0.0-beta.3
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/package.json +1 -1
- package/sass/color/presets/_index.scss +2 -8
- package/sass/color/presets/dark/_index.scss +4 -0
- package/sass/color/presets/light/_index.scss +4 -0
- package/sass/typography/_functions.scss +1 -1
- package/sass/typography/presets/_bootstrap.scss +3 -1
- package/sass/typography/presets/_fluent.scss +2 -2
- package/sass/typography/presets/_indigo.scss +2 -2
- package/sass/typography/presets/_material.scss +2 -14
- package/test/e2e/theme.scss +3 -37
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igniteui-theming",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.3",
|
|
4
4
|
"description": "A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -1,8 +1,2 @@
|
|
|
1
|
-
@forward '
|
|
2
|
-
@forward '
|
|
3
|
-
@forward './light/fluent' as light-fluent-*;
|
|
4
|
-
@forward './light/indigo' as light-indigo-*;
|
|
5
|
-
@forward './dark/material' as dark-material-*;
|
|
6
|
-
@forward './dark/bootstrap' as dark-bootstrap-*;
|
|
7
|
-
@forward './dark/fluent' as dark-fluent-*;
|
|
8
|
-
@forward './dark/indigo' as dark-indigo-*;
|
|
1
|
+
@forward 'light';
|
|
2
|
+
@forward 'dark';
|
|
@@ -57,7 +57,7 @@ $browser-context: 16px;
|
|
|
57
57
|
|
|
58
58
|
/// Produces a type style map of values that adheres to the ITypeStyle map.
|
|
59
59
|
/// @access public
|
|
60
|
-
/// @param {String} $font-family [var(--
|
|
60
|
+
/// @param {String} $font-family [var(--ig-font-family)] - The font family of the type style.
|
|
61
61
|
/// @param {String} $font-size - The font size of the type style.
|
|
62
62
|
/// @param {Number|String} $font-weight [normal] - The font weight of the type style.
|
|
63
63
|
/// @param {String} $font-style [normal] - The font style of the type style.
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
/// @group Typography
|
|
6
6
|
////
|
|
7
7
|
|
|
8
|
+
/* stylelint-disable-next-line max-line-length */
|
|
9
|
+
$typeface: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
|
|
8
10
|
$_base-scale: (
|
|
9
11
|
h1: type-style(
|
|
10
12
|
$font-size: rem(40px),
|
|
@@ -117,7 +119,7 @@ $bootstrap_weekday: type-style(
|
|
|
117
119
|
$margin-top: 0,
|
|
118
120
|
$margin-bottom: 0
|
|
119
121
|
);
|
|
120
|
-
$scale: extend(
|
|
122
|
+
$type-scale: extend(
|
|
121
123
|
$_base-scale,
|
|
122
124
|
(
|
|
123
125
|
calendar-labels: $bootstrap_weekday,
|
|
@@ -4,9 +4,9 @@
|
|
|
4
4
|
/// @group Typography
|
|
5
5
|
////
|
|
6
6
|
|
|
7
|
-
$
|
|
7
|
+
$typeface: "'Titillium Web', sans-serif";
|
|
8
|
+
$type-scale: (
|
|
8
9
|
h1: type-style(
|
|
9
|
-
$font-family: var(--igc-font-family),
|
|
10
10
|
$font-size: rem(96px),
|
|
11
11
|
$font-weight: 300,
|
|
12
12
|
$font-style: normal,
|
|
@@ -17,7 +17,6 @@ $scale: (
|
|
|
17
17
|
$margin-bottom: rem(56px)
|
|
18
18
|
),
|
|
19
19
|
h2: type-style(
|
|
20
|
-
$font-family: var(--igc-font-family),
|
|
21
20
|
$font-size: rem(60px),
|
|
22
21
|
$font-weight: 300,
|
|
23
22
|
$font-style: normal,
|
|
@@ -28,7 +27,6 @@ $scale: (
|
|
|
28
27
|
$margin-bottom: rem(28px)
|
|
29
28
|
),
|
|
30
29
|
h3: type-style(
|
|
31
|
-
$font-family: var(--igc-font-family),
|
|
32
30
|
$font-size: rem(48px),
|
|
33
31
|
$font-weight: 400,
|
|
34
32
|
$font-style: normal,
|
|
@@ -39,7 +37,6 @@ $scale: (
|
|
|
39
37
|
$margin-bottom: 0
|
|
40
38
|
),
|
|
41
39
|
h4: type-style(
|
|
42
|
-
$font-family: var(--igc-font-family),
|
|
43
40
|
$font-size: rem(34px),
|
|
44
41
|
$font-weight: 400,
|
|
45
42
|
$font-style: normal,
|
|
@@ -50,7 +47,6 @@ $scale: (
|
|
|
50
47
|
$margin-bottom: 0
|
|
51
48
|
),
|
|
52
49
|
h5: type-style(
|
|
53
|
-
$font-family: var(--igc-font-family),
|
|
54
50
|
$font-size: rem(24px),
|
|
55
51
|
$font-weight: 400,
|
|
56
52
|
$font-style: normal,
|
|
@@ -61,7 +57,6 @@ $scale: (
|
|
|
61
57
|
$margin-bottom: 0
|
|
62
58
|
),
|
|
63
59
|
h6: type-style(
|
|
64
|
-
$font-family: var(--igc-font-family),
|
|
65
60
|
$font-size: rem(20px),
|
|
66
61
|
$font-weight: 600,
|
|
67
62
|
$font-style: normal,
|
|
@@ -72,7 +67,6 @@ $scale: (
|
|
|
72
67
|
$margin-bottom: 0
|
|
73
68
|
),
|
|
74
69
|
subtitle-1: type-style(
|
|
75
|
-
$font-family: var(--igc-font-family),
|
|
76
70
|
$font-size: rem(16px),
|
|
77
71
|
$font-weight: 400,
|
|
78
72
|
$font-style: normal,
|
|
@@ -81,7 +75,6 @@ $scale: (
|
|
|
81
75
|
$text-transform: none
|
|
82
76
|
),
|
|
83
77
|
subtitle-2: type-style(
|
|
84
|
-
$font-family: var(--igc-font-family),
|
|
85
78
|
$font-size: rem(14px),
|
|
86
79
|
$font-weight: 600,
|
|
87
80
|
$font-style: normal,
|
|
@@ -90,7 +83,6 @@ $scale: (
|
|
|
90
83
|
$text-transform: none
|
|
91
84
|
),
|
|
92
85
|
body-1: type-style(
|
|
93
|
-
$font-family: var(--igc-font-family),
|
|
94
86
|
$font-size: rem(16px),
|
|
95
87
|
$font-weight: 400,
|
|
96
88
|
$font-style: normal,
|
|
@@ -101,7 +93,6 @@ $scale: (
|
|
|
101
93
|
$margin-bottom: rem(16)
|
|
102
94
|
),
|
|
103
95
|
body-2: type-style(
|
|
104
|
-
$font-family: var(--igc-font-family),
|
|
105
96
|
$font-size: rem(14px),
|
|
106
97
|
$font-weight: 400,
|
|
107
98
|
$font-style: normal,
|
|
@@ -110,7 +101,6 @@ $scale: (
|
|
|
110
101
|
$text-transform: none
|
|
111
102
|
),
|
|
112
103
|
button: type-style(
|
|
113
|
-
$font-family: var(--igc-font-family),
|
|
114
104
|
$font-size: rem(14px),
|
|
115
105
|
$font-weight: 600,
|
|
116
106
|
$font-style: normal,
|
|
@@ -119,7 +109,6 @@ $scale: (
|
|
|
119
109
|
$text-transform: uppercase
|
|
120
110
|
),
|
|
121
111
|
caption: type-style(
|
|
122
|
-
$font-family: var(--igc-font-family),
|
|
123
112
|
$font-size: rem(12px),
|
|
124
113
|
$font-weight: 400,
|
|
125
114
|
$font-style: normal,
|
|
@@ -128,7 +117,6 @@ $scale: (
|
|
|
128
117
|
$text-transform: none
|
|
129
118
|
),
|
|
130
119
|
overline: type-style(
|
|
131
|
-
$font-family: var(--igc-font-family),
|
|
132
120
|
$font-size: rem(10px),
|
|
133
121
|
$font-weight: 400,
|
|
134
122
|
$font-style: normal,
|
package/test/e2e/theme.scss
CHANGED
|
@@ -1,38 +1,4 @@
|
|
|
1
1
|
@use '../../index' as *;
|
|
2
|
-
@
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
$h2: (font-size: 70px);
|
|
6
|
-
$h3: (font-size: 40px);
|
|
7
|
-
$h4: (font-size: 30px);
|
|
8
|
-
$h5: (font-size: 20px);
|
|
9
|
-
$h6: (font-size: 10px);
|
|
10
|
-
$subtitle-1: (font-size: 96px);
|
|
11
|
-
$subtitle-2: (font-size: 70px);
|
|
12
|
-
$body-1: (font-size: 40px);
|
|
13
|
-
$body-2: (font-size: 30px);
|
|
14
|
-
$button: (font-size: 20px);
|
|
15
|
-
$caption: (font-size: 10px);
|
|
16
|
-
$overline: (font-size: 10px);
|
|
17
|
-
$theme: 'material';
|
|
18
|
-
$scale: type-scale(
|
|
19
|
-
$h1: $h1,
|
|
20
|
-
$h2: $h2,
|
|
21
|
-
$h3: $h3,
|
|
22
|
-
$h4: $h4,
|
|
23
|
-
$h5: $h5,
|
|
24
|
-
$h6: $h6,
|
|
25
|
-
$subtitle-1: $subtitle-1,
|
|
26
|
-
$subtitle-2: $subtitle-2,
|
|
27
|
-
$body-1: $body-1,
|
|
28
|
-
$body-2: $body-2,
|
|
29
|
-
$button: $button,
|
|
30
|
-
$caption: $caption,
|
|
31
|
-
$overline: $overline,
|
|
32
|
-
$_theme: $theme
|
|
33
|
-
);
|
|
34
|
-
$palette: palette($primary: #9fe, $secondary: orange, $surface: #fff);
|
|
35
|
-
|
|
36
|
-
@include palette($palette);
|
|
37
|
-
@include typography("'Roboto', sans-serif", $scale);
|
|
38
|
-
@include elevations($elevations);
|
|
2
|
+
@include palette($light-material-palette);
|
|
3
|
+
@include typography($material-typeface, $material-type-scale);
|
|
4
|
+
@include elevations($material-elevations);
|