igniteui-theming 1.0.0-beta.8 → 1.0.0-beta.9

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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "igniteui-theming",
3
- "version": "1.0.0-beta.8",
3
+ "version": "1.0.0-beta.9",
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": {
@@ -7,8 +7,9 @@
7
7
 
8
8
  /* stylelint-disable-next-line max-line-length */
9
9
  $typeface: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
10
- $_base-scale: (
11
- h1: type-style(
10
+ $_base-scale: type-scale(
11
+ $_theme: 'bootstrap',
12
+ $h1: type-style(
12
13
  $font-size: rem(40px),
13
14
  $font-weight: 500,
14
15
  $letter-spacing: rem(-1.5px),
@@ -17,7 +18,7 @@ $_base-scale: (
17
18
  $margin-top: 0,
18
19
  $margin-bottom: rem(8px)
19
20
  ),
20
- h2: type-style(
21
+ $h2: type-style(
21
22
  $font-size: rem(32px),
22
23
  $font-weight: 500,
23
24
  $letter-spacing: rem(-.5px),
@@ -26,7 +27,7 @@ $_base-scale: (
26
27
  $margin-top: 0,
27
28
  $margin-bottom: rem(8px)
28
29
  ),
29
- h3: type-style(
30
+ $h3: type-style(
30
31
  $font-size: rem(28px),
31
32
  $font-weight: 500,
32
33
  $letter-spacing: 0,
@@ -35,7 +36,7 @@ $_base-scale: (
35
36
  $margin-top: 0,
36
37
  $margin-bottom: rem(8px)
37
38
  ),
38
- h4: type-style(
39
+ $h4: type-style(
39
40
  $font-size: rem(24px),
40
41
  $font-weight: 500,
41
42
  $letter-spacing: rem(.25px),
@@ -44,7 +45,7 @@ $_base-scale: (
44
45
  $margin-top: 0,
45
46
  $margin-bottom: rem(8px)
46
47
  ),
47
- h5: type-style(
48
+ $h5: type-style(
48
49
  $font-size: rem(20px),
49
50
  $font-weight: 500,
50
51
  $letter-spacing: 0,
@@ -53,7 +54,7 @@ $_base-scale: (
53
54
  $margin-top: 0,
54
55
  $margin-bottom: rem(8px)
55
56
  ),
56
- h6: type-style(
57
+ $h6: type-style(
57
58
  $font-size: rem(16px),
58
59
  $font-weight: 500,
59
60
  $letter-spacing: rem(.15px),
@@ -62,7 +63,7 @@ $_base-scale: (
62
63
  $margin-top: 0,
63
64
  $margin-bottom: rem(8px)
64
65
  ),
65
- body-1: type-style(
66
+ $body-1: type-style(
66
67
  $font-size: rem(16px),
67
68
  $font-weight: 400,
68
69
  $letter-spacing: rem(.5px),
@@ -71,7 +72,7 @@ $_base-scale: (
71
72
  $margin-top: 0,
72
73
  $margin-bottom: 0
73
74
  ),
74
- body-2: type-style(
75
+ $body-2: type-style(
75
76
  $font-size: rem(14.4px),
76
77
  $font-weight: 400,
77
78
  $letter-spacing: rem(.25px),
@@ -80,7 +81,7 @@ $_base-scale: (
80
81
  $margin-top: 0,
81
82
  $margin-bottom: 0
82
83
  ),
83
- subtitle-1: type-style(
84
+ $subtitle-1: type-style(
84
85
  $font-size: rem(14px),
85
86
  $font-weight: 400,
86
87
  $letter-spacing: rem(.15px),
@@ -89,7 +90,7 @@ $_base-scale: (
89
90
  $margin-top: 0,
90
91
  $margin-bottom: 0
91
92
  ),
92
- subtitle-2: type-style(
93
+ $subtitle-2: type-style(
93
94
  $font-size: rem(14.4px),
94
95
  $font-weight: 400,
95
96
  $letter-spacing: rem(.1px),
@@ -98,7 +99,7 @@ $_base-scale: (
98
99
  $margin-top: 0,
99
100
  $margin-bottom: 0
100
101
  ),
101
- button: type-style(
102
+ $button: type-style(
102
103
  $font-size: rem(16px),
103
104
  $font-weight: 500,
104
105
  $letter-spacing: rem(.75px),
@@ -107,14 +108,14 @@ $_base-scale: (
107
108
  $margin-top: 0,
108
109
  $margin-bottom: 0
109
110
  ),
110
- caption: type-style(
111
+ $caption: type-style(
111
112
  $font-size: rem(12px),
112
113
  $font-weight: 400,
113
114
  $letter-spacing: rem(.4px),
114
115
  $line-height: rem(16px),
115
116
  $text-transform: none
116
117
  ),
117
- overline: type-style(
118
+ $overline: type-style(
118
119
  $font-size: rem(10px),
119
120
  $font-weight: 400,
120
121
  $letter-spacing: rem(1.5px),
@@ -4,8 +4,9 @@
4
4
  /// @group Typography
5
5
  ////
6
6
  $typeface: "'Open Sans', Helvetica, Arial, sans-serif";
7
- $type-scale: (
8
- h1: type-style(
7
+ $type-scale: type-scale(
8
+ $_theme: 'fluent',
9
+ $h1: type-style(
9
10
  $font-size: rem(68px),
10
11
  $font-weight: 700,
11
12
  $letter-spacing: rem(-1.5px),
@@ -14,7 +15,7 @@ $type-scale: (
14
15
  $margin-top: 0,
15
16
  $margin-bottom: 0
16
17
  ),
17
- h2: type-style(
18
+ $h2: type-style(
18
19
  $font-size: rem(42px),
19
20
  $font-weight: 700,
20
21
  $letter-spacing: rem(-.5px),
@@ -23,7 +24,7 @@ $type-scale: (
23
24
  $margin-top: 0,
24
25
  $margin-bottom: 0
25
26
  ),
26
- h3: type-style(
27
+ $h3: type-style(
27
28
  $font-size: rem(32px),
28
29
  $font-weight: 600,
29
30
  $letter-spacing: 0,
@@ -32,7 +33,7 @@ $type-scale: (
32
33
  $margin-top: 0,
33
34
  $margin-bottom: 0
34
35
  ),
35
- h4: type-style(
36
+ $h4: type-style(
36
37
  $font-size: rem(28px),
37
38
  $font-weight: 400,
38
39
  $letter-spacing: rem(.25px),
@@ -41,7 +42,7 @@ $type-scale: (
41
42
  $margin-top: 0,
42
43
  $margin-bottom: 0
43
44
  ),
44
- h5: type-style(
45
+ $h5: type-style(
45
46
  $font-size: rem(24px),
46
47
  $font-weight: 400,
47
48
  $letter-spacing: 0,
@@ -50,7 +51,7 @@ $type-scale: (
50
51
  $margin-top: 0,
51
52
  $margin-bottom: 0
52
53
  ),
53
- h6: type-style(
54
+ $h6: type-style(
54
55
  $font-size: rem(20px),
55
56
  $font-weight: 400,
56
57
  $letter-spacing: rem(.15px),
@@ -59,7 +60,7 @@ $type-scale: (
59
60
  $margin-top: 0,
60
61
  $margin-bottom: 0
61
62
  ),
62
- body-1: type-style(
63
+ $body-1: type-style(
63
64
  $font-size: rem(16px),
64
65
  $font-weight: 400,
65
66
  $letter-spacing: rem(.5px),
@@ -68,7 +69,7 @@ $type-scale: (
68
69
  $margin-top: 0,
69
70
  $margin-bottom: 0
70
71
  ),
71
- body-2: type-style(
72
+ $body-2: type-style(
72
73
  $font-size: rem(14px),
73
74
  $font-weight: 400,
74
75
  $letter-spacing: rem(.25px),
@@ -77,7 +78,7 @@ $type-scale: (
77
78
  $margin-top: 0,
78
79
  $margin-bottom: 0
79
80
  ),
80
- subtitle-1: type-style(
81
+ $subtitle-1: type-style(
81
82
  $font-size: rem(18px),
82
83
  $font-weight: 400,
83
84
  $letter-spacing: rem(.15px),
@@ -86,7 +87,7 @@ $type-scale: (
86
87
  $margin-top: 0,
87
88
  $margin-bottom: 0
88
89
  ),
89
- subtitle-2: type-style(
90
+ $subtitle-2: type-style(
90
91
  $font-size: rem(14px),
91
92
  $font-weight: 600,
92
93
  $letter-spacing: rem(.1px),
@@ -95,7 +96,7 @@ $type-scale: (
95
96
  $margin-top: 0,
96
97
  $margin-bottom: 0
97
98
  ),
98
- button: type-style(
99
+ $button: type-style(
99
100
  $font-size: rem(14px),
100
101
  $font-weight: 400,
101
102
  $letter-spacing: rem(.75px),
@@ -104,7 +105,7 @@ $type-scale: (
104
105
  $margin-top: 0,
105
106
  $margin-bottom: 0
106
107
  ),
107
- caption: type-style(
108
+ $caption: type-style(
108
109
  $font-size: rem(12px),
109
110
  $font-weight: 400,
110
111
  $font-style: normal,
@@ -112,7 +113,7 @@ $type-scale: (
112
113
  $line-height: rem(16px),
113
114
  $text-transform: none
114
115
  ),
115
- overline: type-style(
116
+ $overline: type-style(
116
117
  $font-size: rem(10px),
117
118
  $font-weight: 400,
118
119
  $letter-spacing: rem(1.5px),
@@ -4,8 +4,9 @@
4
4
  /// @group Typography
5
5
  ////
6
6
  $typeface: "'Nunito Sans', sans-serif";
7
- $type-scale: (
8
- h1: type-style(
7
+ $type-scale: type-scale(
8
+ $_theme: 'indigo',
9
+ $h1: type-style(
9
10
  $font-size: rem(96px),
10
11
  $font-weight: 200,
11
12
  $letter-spacing: rem(-1.5px),
@@ -14,7 +15,7 @@ $type-scale: (
14
15
  $margin-top: 0,
15
16
  $margin-bottom: 0
16
17
  ),
17
- h2: type-style(
18
+ $h2: type-style(
18
19
  $font-size: rem(60px),
19
20
  $font-weight: 200,
20
21
  $letter-spacing: rem(-.5px),
@@ -23,7 +24,7 @@ $type-scale: (
23
24
  $margin-top: 0,
24
25
  $margin-bottom: 0
25
26
  ),
26
- h3: type-style(
27
+ $h3: type-style(
27
28
  $font-size: rem(48px),
28
29
  $font-weight: 200,
29
30
  $letter-spacing: 0,
@@ -32,7 +33,7 @@ $type-scale: (
32
33
  $margin-top: 0,
33
34
  $margin-bottom: 0
34
35
  ),
35
- h4: type-style(
36
+ $h4: type-style(
36
37
  $font-size: rem(36px),
37
38
  $font-weight: 200,
38
39
  $letter-spacing: rem(.25px),
@@ -41,7 +42,7 @@ $type-scale: (
41
42
  $margin-top: 0,
42
43
  $margin-bottom: 0
43
44
  ),
44
- h5: type-style(
45
+ $h5: type-style(
45
46
  $font-size: rem(24px),
46
47
  $font-weight: 200,
47
48
  $letter-spacing: 0,
@@ -50,7 +51,7 @@ $type-scale: (
50
51
  $margin-top: 0,
51
52
  $margin-bottom: 0
52
53
  ),
53
- h6: type-style(
54
+ $h6: type-style(
54
55
  $font-size: rem(20px),
55
56
  $font-weight: 600,
56
57
  $letter-spacing: rem(.15px),
@@ -59,7 +60,7 @@ $type-scale: (
59
60
  $margin-top: 0,
60
61
  $margin-bottom: 0
61
62
  ),
62
- body-1: type-style(
63
+ $body-1: type-style(
63
64
  $font-size: rem(16px),
64
65
  $font-weight: 400,
65
66
  $letter-spacing: rem(.5px),
@@ -68,7 +69,7 @@ $type-scale: (
68
69
  $margin-top: 0,
69
70
  $margin-bottom: 0
70
71
  ),
71
- body-2: type-style(
72
+ $body-2: type-style(
72
73
  $font-size: rem(14px),
73
74
  $font-weight: 400,
74
75
  $letter-spacing: rem(.25px),
@@ -77,7 +78,7 @@ $type-scale: (
77
78
  $margin-top: 0,
78
79
  $margin-bottom: 0
79
80
  ),
80
- subtitle-1: type-style(
81
+ $subtitle-1: type-style(
81
82
  $font-size: rem(16px),
82
83
  $font-weight: 600,
83
84
  $letter-spacing: rem(.15px),
@@ -86,7 +87,7 @@ $type-scale: (
86
87
  $margin-top: 0,
87
88
  $margin-bottom: 0
88
89
  ),
89
- subtitle-2: type-style(
90
+ $subtitle-2: type-style(
90
91
  $font-size: rem(14px),
91
92
  $font-weight: 700,
92
93
  $letter-spacing: rem(.1px),
@@ -95,7 +96,7 @@ $type-scale: (
95
96
  $margin-top: 0,
96
97
  $margin-bottom: 0
97
98
  ),
98
- button: type-style(
99
+ $button: type-style(
99
100
  $font-size: rem(12px),
100
101
  $font-weight: 700,
101
102
  $letter-spacing: rem(.75px),
@@ -104,7 +105,7 @@ $type-scale: (
104
105
  $margin-top: 0,
105
106
  $margin-bottom: 0
106
107
  ),
107
- caption: type-style(
108
+ $caption: type-style(
108
109
  $font-size: rem(12px),
109
110
  $font-weight: 400,
110
111
  $letter-spacing: rem(.4px),
@@ -113,7 +114,7 @@ $type-scale: (
113
114
  $margin-top: 0,
114
115
  $margin-bottom: 0
115
116
  ),
116
- overline: type-style(
117
+ $overline: type-style(
117
118
  $font-size: rem(10px),
118
119
  $font-weight: 700,
119
120
  $letter-spacing: rem(.2px),
@@ -5,8 +5,9 @@
5
5
  ////
6
6
 
7
7
  $typeface: "'Titillium Web', sans-serif";
8
- $type-scale: (
9
- h1: type-style(
8
+ $type-scale: type-scale(
9
+ $_theme: 'material',
10
+ $h1: type-style(
10
11
  $font-size: rem(96px),
11
12
  $font-weight: 300,
12
13
  $font-style: normal,
@@ -16,7 +17,7 @@ $type-scale: (
16
17
  $margin-top: rem(28px),
17
18
  $margin-bottom: rem(56px)
18
19
  ),
19
- h2: type-style(
20
+ $h2: type-style(
20
21
  $font-size: rem(60px),
21
22
  $font-weight: 300,
22
23
  $font-style: normal,
@@ -26,7 +27,7 @@ $type-scale: (
26
27
  $margin-top: rem(28px),
27
28
  $margin-bottom: rem(28px)
28
29
  ),
29
- h3: type-style(
30
+ $h3: type-style(
30
31
  $font-size: rem(48px),
31
32
  $font-weight: 400,
32
33
  $font-style: normal,
@@ -36,7 +37,7 @@ $type-scale: (
36
37
  $margin-top: rem(28px),
37
38
  $margin-bottom: 0
38
39
  ),
39
- h4: type-style(
40
+ $h4: type-style(
40
41
  $font-size: rem(34px),
41
42
  $font-weight: 400,
42
43
  $font-style: normal,
@@ -46,7 +47,7 @@ $type-scale: (
46
47
  $margin-top: rem(28px),
47
48
  $margin-bottom: 0
48
49
  ),
49
- h5: type-style(
50
+ $h5: type-style(
50
51
  $font-size: rem(24px),
51
52
  $font-weight: 400,
52
53
  $font-style: normal,
@@ -56,7 +57,7 @@ $type-scale: (
56
57
  $margin-top: rem(28px),
57
58
  $margin-bottom: 0
58
59
  ),
59
- h6: type-style(
60
+ $h6: type-style(
60
61
  $font-size: rem(20px),
61
62
  $font-weight: 600,
62
63
  $font-style: normal,
@@ -66,7 +67,7 @@ $type-scale: (
66
67
  $margin-top: 0,
67
68
  $margin-bottom: 0
68
69
  ),
69
- body-1: type-style(
70
+ $body-1: type-style(
70
71
  $font-size: rem(16px),
71
72
  $font-weight: 400,
72
73
  $font-style: normal,
@@ -76,7 +77,7 @@ $type-scale: (
76
77
  $margin-top: rem(28px),
77
78
  $margin-bottom: rem(16)
78
79
  ),
79
- body-2: type-style(
80
+ $body-2: type-style(
80
81
  $font-size: rem(14px),
81
82
  $font-weight: 400,
82
83
  $font-style: normal,
@@ -84,7 +85,7 @@ $type-scale: (
84
85
  $line-height: rem(20px),
85
86
  $text-transform: none
86
87
  ),
87
- subtitle-1: type-style(
88
+ $subtitle-1: type-style(
88
89
  $font-size: rem(16px),
89
90
  $font-weight: 400,
90
91
  $font-style: normal,
@@ -92,7 +93,7 @@ $type-scale: (
92
93
  $line-height: rem(24px),
93
94
  $text-transform: none
94
95
  ),
95
- subtitle-2: type-style(
96
+ $subtitle-2: type-style(
96
97
  $font-size: rem(14px),
97
98
  $font-weight: 600,
98
99
  $font-style: normal,
@@ -100,7 +101,7 @@ $type-scale: (
100
101
  $line-height: rem(24px),
101
102
  $text-transform: none
102
103
  ),
103
- button: type-style(
104
+ $button: type-style(
104
105
  $font-size: rem(14px),
105
106
  $font-weight: 600,
106
107
  $font-style: normal,
@@ -108,7 +109,7 @@ $type-scale: (
108
109
  $line-height: rem(16px),
109
110
  $text-transform: uppercase
110
111
  ),
111
- caption: type-style(
112
+ $caption: type-style(
112
113
  $font-size: rem(12px),
113
114
  $font-weight: 400,
114
115
  $font-style: normal,
@@ -116,7 +117,7 @@ $type-scale: (
116
117
  $line-height: rem(16px),
117
118
  $text-transform: none
118
119
  ),
119
- overline: type-style(
120
+ $overline: type-style(
120
121
  $font-size: rem(10px),
121
122
  $font-weight: 400,
122
123
  $font-style: normal,