@brightspace-ui/typography 9.0.0 → 9.1.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.
Files changed (3) hide show
  1. package/d2l-typography.js +2 -48
  2. package/d2l-typography.scss +198 -1
  3. package/package.json +3 -2
package/d2l-typography.js CHANGED
@@ -1,48 +1,11 @@
1
1
  import '@brightspace-ui/core/components/colors/colors.js';
2
2
  import '@polymer/polymer/polymer-legacy.js';
3
3
  import './d2l-typography-shared-styles.js';
4
-
5
- const importUrl = 'https://s.brightspace.com/lib/fonts/0.5.0/assets/';
4
+ import { fontFacesCss } from '@brightspace-ui/core/components/typography/styles.js';
6
5
 
7
6
  const $_fontFaces = document.createElement('style');
8
7
  $_fontFaces.id = 'd2l-typography-font-face';
9
- $_fontFaces.innerHTML = `
10
- @font-face {
11
- font-family: 'Lato';
12
- font-style: normal;
13
- font-weight: 400;
14
- src: local('Lato Regular'), local('Lato-Regular'), url(${new URL('Lato-400.woff2', importUrl)}) format('woff2'), url(${new URL('Lato-400.woff', importUrl)}) format('woff'), url(${new URL('Lato-400.ttf', importUrl)}) format('truetype');
15
- }
16
- @font-face {
17
- font-family: 'Lato';
18
- font-style: normal;
19
- font-weight: 700;
20
- src: local('Lato Bold'), local('Lato-Bold'), url(${new URL('Lato-700.woff2', importUrl)}) format('woff2'), url(${new URL('Lato-700.woff', importUrl)}) format('woff'), url(${new URL('Lato-700.ttf', importUrl)}) format('truetype');
21
- }
22
- @font-face {
23
- font-family: 'Open Dyslexic';
24
- font-style: normal;
25
- font-weight: 400;
26
- src: local('Open Dyslexic Regular'), local('OpenDyslexic-Regular'), url(${new URL('OpenDyslexic.woff', importUrl)}) format('woff'), url(${new URL('OpenDyslexic.ttf', importUrl)}) format('truetype');
27
- }
28
- @font-face {
29
- font-family: 'Open Dyslexic';
30
- font-style: italic;
31
- font-weight: 400;
32
- src: local('Open Dyslexic Italic'), local('OpenDyslexic-Italic'), url(${new URL('OpenDyslexic-Italic.woff', importUrl)}) format('woff'), url(${new URL('OpenDyslexic-Italic.ttf', importUrl)}) format('truetype');
33
- }
34
- @font-face {
35
- font-family: 'Open Dyslexic';
36
- font-style: normal;
37
- font-weight: 700;
38
- src: local('Open Dyslexic Bold'), local('OpenDyslexic-Bold'), url(${new URL('OpenDyslexic-700.woff', importUrl)}) format('woff'), url(${new URL('OpenDyslexic-700.ttf', importUrl)}) format('truetype');
39
- }
40
- @font-face {
41
- font-family: 'Open Dyslexic';
42
- font-style: italic;
43
- font-weight: 700;
44
- src: local('Open Dyslexic Bold Italic'), local('OpenDyslexic-BoldItalic'), url(${new URL('OpenDyslexic-700-Italic.woff', importUrl)}) format('woff'), url(${new URL('OpenDyslexic-700-Italic.ttf', importUrl)}) format('truetype');
45
- }`;
8
+ $_fontFaces.innerHTML = fontFacesCss;
46
9
  document.head.appendChild($_fontFaces);
47
10
 
48
11
  const $_documentContainer = document.createElement('template');
@@ -84,15 +47,6 @@ $_documentContainer.innerHTML = `<dom-module id="d2l-typography">
84
47
  @apply --d2l-font-paragraph-custom;
85
48
  }
86
49
 
87
- .d2l-typography.d2l-dyslexic,
88
- .d2l-typography .d2l-dyslexic,
89
- .vui-typography.vui-dyslexic,
90
- .vui-typography .vui-dyslexic {
91
- font-family: 'Open Dyslexic', sans-serif;
92
- font-weight: 400;
93
- @apply --d2l-font-dyslexic-custom;
94
- }
95
-
96
50
  .d2l-typography:lang(ar),
97
51
  .d2l-typography :lang(ar),
98
52
  .vui-typography:lang(ar),
package/d2l-typography.scss CHANGED
@@ -1 +1,198 @@
1
- @import 'node_modules/@brightspace-ui/core/components/typography/typography.scss';
1
+ @mixin d2l-typography {
2
+
3
+ color: var(--d2l-color-ferrite, #202122);
4
+ display: block;
5
+ font-family: "Lato", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
6
+ font-size: 0.95rem;
7
+ font-weight: 400;
8
+ letter-spacing: 0.01rem;
9
+ line-height: 1.4rem;
10
+
11
+ p {
12
+ margin: 1rem 0;
13
+ }
14
+
15
+ &:lang(ar),
16
+ & :lang(ar) {
17
+ font-family: "Segoe UI", "Geeza Pro", sans-serif;
18
+ }
19
+
20
+ &:lang(ja),
21
+ & :lang(ja) {
22
+ font-family: "Hiragino Kaku Gothic Pro", "Meiyro", sans-serif;
23
+ }
24
+
25
+ &:lang(ko),
26
+ & :lang(ko) {
27
+ font-family: "Apple SD Gothic Neo", Dotum, sans-serif;
28
+ }
29
+
30
+ &:lang(th),
31
+ & :lang(th),
32
+ &:lang(tha),
33
+ & :lang(tha) {
34
+ font-family: "Noto Sans Thai", system-ui, Tahoma;
35
+ }
36
+
37
+ &:lang(zh),
38
+ & :lang(zh) {
39
+ font-family: "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
40
+ }
41
+
42
+ }
43
+
44
+ @mixin d2l-typography-font-face {
45
+ @font-face {
46
+ font-family: "Lato";
47
+ font-style: normal;
48
+ font-weight: 400;
49
+ src:
50
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff2) format("woff2"),
51
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-400.woff) format("woff");
52
+ }
53
+ @font-face {
54
+ font-family: "Lato";
55
+ font-style: normal;
56
+ font-weight: 700;
57
+ src:
58
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff2) format("woff2"),
59
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/Lato-700.woff) format("woff");
60
+ }
61
+ @font-face {
62
+ font-family: 'Noto Sans Thai';
63
+ font-style: normal;
64
+ font-weight: 400;
65
+ src:
66
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff2) format('woff2'),
67
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Regular.woff) format('woff');
68
+ }
69
+ @font-face {
70
+ font-family: 'Noto Sans Thai';
71
+ font-style: normal;
72
+ font-weight: 700;
73
+ src:
74
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff2) format('woff2'),
75
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/NotoSansThai-Bold.woff) format('woff');
76
+ }
77
+ @font-face {
78
+ font-family: "BC Sans";
79
+ font-style: normal;
80
+ font-weight: 300;
81
+ src:
82
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff2) format("woff2"),
83
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Light.woff) format("woff");
84
+ }
85
+ @font-face {
86
+ font-family: "BC Sans";
87
+ font-style: normal;
88
+ font-weight: 400;
89
+ src:
90
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff2) format("woff2"),
91
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Regular.woff) format("woff");
92
+ }
93
+ @font-face {
94
+ font-family: "BC Sans";
95
+ font-style: normal;
96
+ font-weight: 700;
97
+ src:
98
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff2) format("woff2"),
99
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Bold.woff) format("woff");
100
+ }
101
+ @font-face {
102
+ font-family: "BC Sans";
103
+ font-style: italic;
104
+ font-weight: 300;
105
+ src:
106
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff2) format("woff2"),
107
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-LightItalic.woff) format("woff");
108
+ }
109
+ @font-face {
110
+ font-family: "BC Sans";
111
+ font-style: italic;
112
+ font-weight: 400;
113
+ src:
114
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff2) format("woff2"),
115
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-Italic.woff) format("woff");
116
+ }
117
+ @font-face {
118
+ font-family: "BC Sans";
119
+ font-style: italic;
120
+ font-weight: 700;
121
+ src:
122
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff2) format("woff2"),
123
+ url(https://s.brightspace.com/lib/fonts/0.6.4/assets/BCSans-BoldItalic.woff) format("woff");
124
+ }
125
+ }
126
+
127
+ @mixin d2l-body-standard {
128
+ font-size: 0.95rem;
129
+ font-weight: 400;
130
+ line-height: 1.4rem;
131
+ @media (max-width: 615px) {
132
+ font-size: 0.8rem;
133
+ line-height: 1.2rem;
134
+ }
135
+ }
136
+
137
+ @mixin d2l-body-compact {
138
+ font-size: 0.8rem;
139
+ font-weight: 400;
140
+ line-height: 1.2rem;
141
+ }
142
+
143
+ @mixin d2l-body-small {
144
+ color: var(--d2l-color-tungsten, #494c4e);
145
+ font-size: 0.7rem;
146
+ font-weight: 400;
147
+ line-height: 0.9rem;
148
+ margin: auto;
149
+ }
150
+
151
+ @mixin d2l-heading-1 {
152
+ font-size: 2rem;
153
+ font-weight: 400;
154
+ line-height: 2.4rem;
155
+ margin: 1.5rem 0 1.5rem 0;
156
+ @media (max-width: 615px) {
157
+ font-size: 1.5rem;
158
+ line-height: 1.8rem;
159
+ }
160
+ }
161
+
162
+ @mixin d2l-heading-2 {
163
+ font-size: 1.5rem;
164
+ font-weight: 400;
165
+ line-height: 1.8rem;
166
+ margin: 1.5rem 0 1.5rem 0;
167
+ @media (max-width: 615px) {
168
+ font-size: 1rem;
169
+ font-weight: 700;
170
+ line-height: 1.5rem;
171
+ }
172
+ }
173
+
174
+ @mixin d2l-heading-3 {
175
+ font-size: 1rem;
176
+ font-weight: 700;
177
+ line-height: 1.5rem;
178
+ margin: 1.5rem 0 1.5rem 0;
179
+ @media (max-width: 615px) {
180
+ font-size: 0.8rem;
181
+ font-weight: 700;
182
+ line-height: 1.2rem;
183
+ }
184
+ }
185
+
186
+ @mixin d2l-heading-4 {
187
+ font-size: 0.8rem;
188
+ font-weight: 700;
189
+ line-height: 1.2rem;
190
+ margin: 1.5rem 0 1.5rem 0;
191
+ }
192
+
193
+ @mixin d2l-label-text {
194
+ font-size: 0.7rem;
195
+ font-weight: 700;
196
+ letter-spacing: 0.2px;
197
+ line-height: 1rem;
198
+ }
package/package.json CHANGED
@@ -23,7 +23,7 @@
23
23
  "eslint-plugin-lit": "^1",
24
24
  "eslint-plugin-sort-class-members": "^1"
25
25
  },
26
- "version": "9.0.0",
26
+ "version": "9.1.0",
27
27
  "main": "d2l-typography.js",
28
28
  "files": [
29
29
  "d2l-typography-shared-styles.js",
@@ -31,7 +31,8 @@
31
31
  "d2l-typography.scss"
32
32
  ],
33
33
  "publishConfig": {
34
- "access": "public"
34
+ "access": "public",
35
+ "registry": "https://registry.npmjs.org/"
35
36
  },
36
37
  "dependencies": {
37
38
  "@brightspace-ui/core": "^3",