Merge pull request #137 from BrightspaceUI/lit-element

Update to import from core. [increment patch]

README.md

@@ -1,3 +1,5 @@
+> Deprecated: use [BrightspaceUI/core](https://github.com/BrightspaceUI/core) instead.
+
 # d2l-typography
 [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/BrightspaceUI/typography)
 [![Bower version][bower-image]][bower-url]

d2l-typography-shared-styles.js

@@ -1,5 +1,6 @@
+import '@brightspace-ui/core/components/colors/colors.js';
 import '@polymer/polymer/polymer-legacy.js';
-import 'd2l-colors/d2l-colors.js';
+
 const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `<custom-style>

d2l-typography.js

@@ -1,7 +1,8 @@
+import '@brightspace-ui/core/components/colors/colors.js';
 import '@polymer/polymer/polymer-legacy.js';
-import 'd2l-colors/d2l-colors.js';
 import './d2l-typography-shared-styles.js';
-const importUrl = 'https://s.brightspace.com/lib/fonts/0.4.0/assets/';
+
+const importUrl = 'https://s.brightspace.com/lib/fonts/0.5.0/assets/';
 
 const $_fontFaces = document.createElement('style');
 $_fontFaces.id = 'd2l-typography-font-face';

d2l-typography.scss

@@ -1,169 +1 @@
-@import 'node_modules/d2l-colors/d2l-colors.scss';
-
-@mixin d2l-typography() {
-
-	color: $d2l-color-ferrite;
-	display: block;
-	font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
-	letter-spacing: 0.01rem;
-	font-size: 0.95rem;
-	font-weight: 400;
-	line-height: 1.4rem;
-
-	p {
-		margin: 1rem 0;
-	}
-
-	&.d2l-dyslexic,
-	& .d2l-dyslexic {
-		font-family: 'Open Dyslexic', sans-serif;
-		font-weight: 400;
-	}
-
-	&:lang(ar),
-	& :lang(ar) {
-		font-family: 'Arabic Transparent', 'Arabic Typesetting', 'Geeza Pro', sans-serif;
-	}
-
-	&:lang(zh),
-	& :lang(zh) {
-		font-family: 'Microsoft YaHei', 'Hiragino Sans GB', sans-serif;
-	}
-
-	&:lang(ko),
-	& :lang(ko) {
-		font-family: 'Apple SD Gothic Neo', Dotum, sans-serif;
-	}
-
-	&:lang(ja),
-	& :lang(ja) {
-		font-family: 'Hiragino Kaku Gothic Pro', 'Meiyro', sans-serif;
-	}
-
-}
-
-@mixin d2l-typography-font-face() {
-	@font-face {
-		font-family: 'Lato';
-		font-style: normal;
-		font-weight: 400;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/Lato-400.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.4.0/assets/Lato-400.woff) format('woff');
-	}
-	@font-face {
-		font-family: 'Lato';
-		font-style: normal;
-		font-weight: 700;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/Lato-700.woff2) format('woff2'), url(https://s.brightspace.com/lib/fonts/0.4.0/assets/Lato-700.woff) format('woff');
-	}
-	@font-face {
-		font-family: 'Open Dyslexic';
-		font-style: normal;
-		font-weight: 400;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/OpenDyslexic.woff) format('woff');
-	}
-	@font-face {
-		font-family: 'Open Dyslexic';
-		font-style: italic;
-		font-weight: 400;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/OpenDyslexic-Italic.woff) format('woff');
-	}
-	@font-face {
-		font-family: 'Open Dyslexic';
-		font-style: normal;
-		font-weight: 700;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/OpenDyslexic-700.woff) format('woff');
-	}
-	@font-face {
-		font-family: 'Open Dyslexic';
-		font-style: italic;
-		font-weight: 700;
-		src: url(https://s.brightspace.com/lib/fonts/0.4.0/assets/OpenDyslexic-700-Italic.woff) format('woff');
-	}
-}
-
-@mixin d2l-body-standard() {
-	font-size: 0.95rem;
-	font-weight: 400;
-	line-height: 1.4rem;
-	@media (max-width: 615px) {
-		font-size: 0.8rem;
-		line-height: 1.2rem;
-	}
-}
-
-@mixin d2l-body-compact() {
-	font-size: 0.8rem;
-	font-weight: 400;
-	line-height: 1.2rem;
-	@media (max-width: 615px) {
-		font-size: 0.8rem;
-		line-height: 1.2rem;
-	}
-}
-
-@mixin d2l-body-small() {
-	color: $d2l-color-tungsten;
-	font-size: 0.7rem;
-	font-weight: 400;
-	line-height: 1rem;
-	margin: auto;
-	@media (max-width: 615px) {
-		font-size: 0.6rem;
-		line-height: 0.9rem;
-	}
-}
-
-@mixin d2l-heading-1() {
-	font-size: 2rem;
-	font-weight: 400;
-	line-height: 2.4rem;
-	margin: 1.5rem 0 1.5rem 0;
-	@media (max-width: 615px) {
-		font-size: 1.5rem;
-		font-weight: 400;
-		line-height: 1.8rem;
-	}
-}
-
-@mixin d2l-heading-2() {
-	font-size: 1.5rem;
-	font-weight: 400;
-	line-height: 1.8rem;
-	margin: 1.5rem 0 1.5rem 0;
-	@media (max-width: 615px) {
-		font-size: 1rem;
-		font-weight: 700;
-		line-height: 1.5rem;
-	}
-}
-
-@mixin d2l-heading-3() {
-	font-size: 1rem;
-	font-weight: 700;
-	line-height: 1.5rem;
-	margin: 1.5rem 0 1.5rem 0;
-	@media (max-width: 615px) {
-		font-size: 0.8rem;
-		font-weight: 700;
-		line-height: 1.2rem;
-	}
-}
-
-@mixin d2l-heading-4() {
-	font-size: 0.8rem;
-	font-weight: 700;
-	line-height: 1.2rem;
-	margin: 1.5rem 0 1.5rem 0;
-	@media (max-width: 615px) {
-		font-size: 0.8rem;
-		font-weight: 700;
-		line-height: 1.2rem;
-	}
-}
-
-@mixin d2l-label-text() {
-	font-size: 0.7rem;
-	line-height: 1rem;
-	font-weight: 700;
-	letter-spacing: 0.2px;
-}
+@import 'node_modules/@brightspace-ui/core/components/typography/typography.scss';

package.json

@@ -50,7 +50,7 @@
   },
   "main": "d2l-typography.js",
   "dependencies": {
-    "@polymer/polymer": "^3.0.0",
-    "d2l-colors": "BrightspaceUI/colors#semver:^4"
+    "@brightspace-ui/core": "^0.2",
+    "@polymer/polymer": "^3.0.0"
   }
 }