diff --git a/README.md b/README.md index abdddb1..929d177 100644 --- a/README.md +++ b/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] diff --git a/d2l-typography-shared-styles.js b/d2l-typography-shared-styles.js index 5e7c85a..803054c 100644 --- a/d2l-typography-shared-styles.js +++ b/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 = ` diff --git a/d2l-typography.js b/d2l-typography.js index 3394e14..409d9b5 100644 --- a/d2l-typography.js +++ b/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'; diff --git a/d2l-typography.scss b/d2l-typography.scss index bb88e46..5d012ba 100644 --- a/d2l-typography.scss +++ b/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'; diff --git a/package.json b/package.json index 9649a97..9db0017 100644 --- a/package.json +++ b/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" } }