diff --git a/Gruntfile.js b/Gruntfile.js index bd2a989..3a3244f 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -4,7 +4,7 @@ module.exports = function (grunt) { config.pkg = grunt.file.readJSON('package.json'); config.watch = { - files: ['styles/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'], + files: ['styles/mixins/**/*.less', 'styles/variables/**/*.less', 'icons/dashboard/**/*.svg', 'icons/player/**/*.svg'], tasks: ['default'] }; diff --git a/README.md b/README.md index ccf17d8..0150700 100644 --- a/README.md +++ b/README.md @@ -3,95 +3,58 @@ ![owners](https://img.shields.io/badge/owners-Design--Team-brightgreen.svg) ![contributors](https://img.shields.io/badge/contributors-Portal--NL-yellow.svg) -> This repository contains a reference for global styles & icons used in JW Player products. +> This repository contains a reference for global styles & icons used in JW Player products. Usage guidelines and code snippets for the following can be found on the [JW Design Site](https://design.jwplayer.com/docs/#/). -## How to Reference Hook +## Use Hook in Your Project ### Styles Hook styles can be included in two ways: -#### 1. Pull LESS into Build Process -If you're using LESS with Webpack, you'll need to include Hook styles in your build in order to reference variables properly. To do this, import Hook before your other LESS files as follows: -``` -@import 'path_to_hook/styles/hook.less'; -@import 'path_to_your_other_styles/main.less'; -``` -**- or -** -#### 2. Include Pre-Minified CSS Stylesheet -You can also include plain CSS the old-fashioned way by referencing all minified styles in `hook.min.css`. Reference the standalone stylesheet in the document `` as follows: -``` - +#### Option 1: Pull Less Into Build +Import Hook in it's entirety, for example: +```less +@import 'jw-design-library/styles/hook'; +@import './less/your_other_styles'; ``` -### Icons -The icons folder contains two SVG sprites, `icons-player` and `icons-dashboard`, that can be easily referenced and customized with CSS. - -#### Usage -Simply create an svg element with a class of `ds-icon` in your HTML: -``` - - - +Or simply reference only the files you need: +```less +@import 'jw-design-library/styles/variables/fonts'; +@import 'jw-design-library/styles/mixins/global'; ``` -* `path_to_hook`: the relative path to where Hook is included in your project -* `sprite_name`: the name of the sprite (_icons-dashboard_ or _icons-player_) -* `icon_name`: is the icon name, which will display the corresponding icon (all names can be found in the icons folder or in the table in preview-mode) - - -#### Sizing & Colors -UI icons by default are black and occupy a square artboard on an 8px grid. Add one of the following classes to specify an alternate size: - -| Class | Size | -| ----------- | ---- | -| ds-icon-xs | 8px | -| ds-icon-sm | 16px | -| ds-icon-med | 24px | -| ds-icon-lg | 32px | - -Append the class to the svg itself: -``` - - - -``` +#### Option 2: CDN-Hosted, Minified CSS +You can also include minified CSS in the document ``. Please keep in mind that this option is **plain CSS**, which will **only output** the selectors and styles for items in the `components` folder (like icons & logos). This does not come with variables and mixins. -You can override an icon's color or size with CSS: -``` -.ds-icon { - fill: #7bb4e5; - width: 10px; - height: 10px; -} +```html + ``` +View our full list of hosted styles at [hook.jwplayer.com](http://hook.jwplayer.com/). -## Contributing to Hook Source Code - -### Branching Guidelines - -**Feature work in progress:** +### Typography +To use Hook fonts, simply invoke the import mixin by calling `.ds-font-import()` in your Less. **(We recommend doing this only once in your main stylesheet to avoid extraneous requests.)** View usage guidelines [here](https://design.jwplayer.com/docs/#/patterns/typography). -`wip.DES-100.feature-name` +### Iconography +The icons folder contains two SVG sprites, `icons-player` and `icons-dashboard`, that can be easily referenced and customized with CSS. View usage guidelines [here](https://design.jwplayer.com/docs/#/patterns/iconography). -**Feature work QA-ed and ready for release:** - -`release.DES-100.feature-name` - -**Bug fixes / minor updates:** - -`patch.DES-101.bug-fix-description` +## Contribute to Hook +Feature request? Feel free to open a PR and assign it to [Kim Hart](https://github.com/kimhart) or [Monica Parra](https://github.com/monibons). Follow the guidelines below to contribute: +### Branch Namespacing +- **Feature work in progress:** `wip.DES-100.feature-name` +- **Feature work QA-ed and ready for release:** `release.DES-100.feature-name` +- **Bug fixes / minor updates:** `patch.DES-101.bug-fix-description` ### Running Locally -To run this project on your machine: +To run this project on your machine & watch/compile any changes: ``` npm install grunt ``` -This will automatically watch and update the CSS + icon sprites as you develop. -#### Adding a New Stylesheet +### Adding a New Stylesheet 1. Add your LESS stylesheet to the `styles` folder -2. Import it in the `hook.less` master file as follows: `@import 'path/to/your/file';` +2. Import it in the `hook.less` master file with the appropriate path -#### Adding a New Icon +### Adding a New Icon 1. Determine if your new icon belongs to the player or dashboard and add the SVG to the appropriate folder 2. Grunt will auto-generate a new sprite with all icons + diff --git a/styles/icons.less b/styles/components/icons.less similarity index 57% rename from styles/icons.less rename to styles/components/icons.less index 495f119..c5d24a7 100644 --- a/styles/icons.less +++ b/styles/components/icons.less @@ -1,22 +1,17 @@ .ds-icon { - width: 16px; - height: 16px; + .ds-square(16px); vertical-align: middle; &.ds-icon-xs { - width: 8px; - height: 8px; + .ds-square(8px); } &.ds-icon-sm { - width: 16px; - height: 16px; + .ds-square(16px); } &.ds-icon-med { - width: 24px; - height: 24px; + .ds-square(24px); } &.ds-icon-lg { - width: 32px; - height: 32px; + .ds-square(32px); } } .ds-logo { @@ -28,4 +23,4 @@ width: 24px; height: 25px; } -} +} \ No newline at end of file diff --git a/styles/hook.css b/styles/hook.css index 8c7856a..df36379 100644 --- a/styles/hook.css +++ b/styles/hook.css @@ -1,3 +1,7 @@ +/* Typefaces */ +/* Sizes */ +/* Weights - Custom */ +/* Weights - Data */ /* Basics */ /* Primary Colors */ /* Hover for Primary Colors */ @@ -14,12 +18,12 @@ /* Color Scale - A */ /* Color Scale - B */ /* Color Scale - C */ -@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); -@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900'); -/* Typefaces */ -/* Sizes */ -/* Weights - Custom */ -/* Weights - Data */ +/* Custom & data font imports */ +/* Font Smoothing Support */ +/* Layout Helpers */ +/* Data Patterns - Palettes */ +/* Data Patterns - Single Hues */ +/* Data Patterns - Color Scales */ .ds-icon { width: 16px; height: 16px; @@ -49,211 +53,3 @@ width: 24px; height: 25px; } -/* Font Smoothing Support */ -/* Data Patterns - Palettes */ -.data-palette-a1 { - fill: #f7bdad; - color: #f7bdad; -} -.data-palette-a2 { - fill: #e3949d; - color: #e3949d; -} -.data-palette-a3 { - fill: #ca7396; - color: #ca7396; -} -.data-palette-a4 { - fill: #a85895; - color: #a85895; -} -.data-palette-a5 { - fill: #784496; - color: #784496; -} -.data-palette-a6 { - fill: #263995; - color: #263995; -} -.data-palette-b1 { - fill: #a3ee87; - color: #a3ee87; -} -.data-palette-b2 { - fill: #00cb9a; - color: #00cb9a; -} -.data-palette-b3 { - fill: #00a3ac; - color: #00a3ac; -} -.data-palette-b4 { - fill: #0077ac; - color: #0077ac; -} -.data-palette-b5 { - fill: #004a93; - color: #004a93; -} -.data-palette-b6 { - fill: #131b60; - color: #131b60; -} -.data-palette-c1 { - fill: #f7c966; - color: #f7c966; -} -.data-palette-c2 { - fill: #f69958; - color: #f69958; -} -.data-palette-c3 { - fill: #e86a5c; - color: #e86a5c; -} -.data-palette-c4 { - fill: #cb3e69; - color: #cb3e69; -} -.data-palette-c5 { - fill: #9d2076; - color: #9d2076; -} -.data-palette-c6 { - fill: #5a1d7e; - color: #5a1d7e; -} -/* Data Patterns - Single Hues */ -.data-single-hue-a1 { - fill: #cd3138; - color: #cd3138; -} -.data-single-hue-a2 { - fill: #da5550; - color: #da5550; -} -.data-single-hue-a3 { - fill: #e57369; - color: #e57369; -} -.data-single-hue-a4 { - fill: #ef8f84; - color: #ef8f84; -} -.data-single-hue-a5 { - fill: #f8aba0; - color: #f8aba0; -} -.data-single-hue-a6 { - fill: #ffc6bd; - color: #ffc6bd; -} -.data-single-hue-b1 { - fill: #459036; - color: #459036; -} -.data-single-hue-b2 { - fill: #64a652; - color: #64a652; -} -.data-single-hue-b3 { - fill: #82bb6f; - color: #82bb6f; -} -.data-single-hue-b4 { - fill: #9fd28c; - color: #9fd28c; -} -.data-single-hue-b5 { - fill: #bce8aa; - color: #bce8aa; -} -.data-single-hue-b6 { - fill: #daffc9; - color: #daffc9; -} -.data-single-hue-c1 { - fill: #0073b3; - color: #0073b3; -} -.data-single-hue-c2 { - fill: #2e8dc3; - color: #2e8dc3; -} -.data-single-hue-c3 { - fill: #51a7d2; - color: #51a7d2; -} -.data-single-hue-c4 { - fill: #74c1e0; - color: #74c1e0; -} -.data-single-hue-c5 { - fill: #98dbef; - color: #98dbef; -} -.data-single-hue-c6 { - fill: #bef5ff; - color: #bef5ff; -} -/* Data Patterns - Color Scales */ -.data-color-scale-a1 { - fill: #dc6428; - color: #dc6428; -} -.data-color-scale-a2 { - fill: #e7b657; - color: #e7b657; -} -.data-color-scale-a3 { - fill: #f1feaf; - color: #f1feaf; -} -.data-color-scale-a4 { - fill: #81b987; - color: #81b987; -} -.data-color-scale-a5 { - fill: #1c7464; - color: #1c7464; -} -.data-color-scale-b1 { - fill: #a40444; - color: #a40444; -} -.data-color-scale-b2 { - fill: #d584ac; - color: #d584ac; -} -.data-color-scale-b3 { - fill: #ffe8ff; - color: #ffe8ff; -} -.data-color-scale-b4 { - fill: #9a85b9; - color: #9a85b9; -} -.data-color-scale-b5 { - fill: #04367c; - color: #04367c; -} -.data-color-scale-c1 { - fill: #d49c44; - color: #d49c44; -} -.data-color-scale-c2 { - fill: #ecc188; - color: #ecc188; -} -.data-color-scale-c3 { - fill: #ffead0; - color: #ffead0; -} -.data-color-scale-c4 { - fill: #e7a491; - color: #e7a491; -} -.data-color-scale-c5 { - fill: #c56077; - color: #c56077; -} diff --git a/styles/hook.less b/styles/hook.less index 8feab9d..c8f4be1 100644 --- a/styles/hook.less +++ b/styles/hook.less @@ -1,6 +1,9 @@ -@import 'brand-colors'; -@import 'data-colors'; -@import 'code-snippet-colors'; -@import 'fonts'; -@import 'icons'; -@import 'mixins'; +@import 'variables/fonts'; +@import 'variables/brand-colors'; +@import 'variables/data-colors'; +@import 'variables/code-snippet-colors'; + +@import 'mixins/global'; +@import 'mixins/data-colors'; + +@import 'components/icons'; \ No newline at end of file diff --git a/styles/hook.min.css b/styles/hook.min.css index 0641f80..2483a11 100644 --- a/styles/hook.min.css +++ b/styles/hook.min.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700);@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xs{width:8px;height:8px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px}.data-palette-a1{fill:#f7bdad;color:#f7bdad}.data-palette-a2{fill:#e3949d;color:#e3949d}.data-palette-a3{fill:#ca7396;color:#ca7396}.data-palette-a4{fill:#a85895;color:#a85895}.data-palette-a5{fill:#784496;color:#784496}.data-palette-a6{fill:#263995;color:#263995}.data-palette-b1{fill:#a3ee87;color:#a3ee87}.data-palette-b2{fill:#00cb9a;color:#00cb9a}.data-palette-b3{fill:#00a3ac;color:#00a3ac}.data-palette-b4{fill:#0077ac;color:#0077ac}.data-palette-b5{fill:#004a93;color:#004a93}.data-palette-b6{fill:#131b60;color:#131b60}.data-palette-c1{fill:#f7c966;color:#f7c966}.data-palette-c2{fill:#f69958;color:#f69958}.data-palette-c3{fill:#e86a5c;color:#e86a5c}.data-palette-c4{fill:#cb3e69;color:#cb3e69}.data-palette-c5{fill:#9d2076;color:#9d2076}.data-palette-c6{fill:#5a1d7e;color:#5a1d7e}.data-single-hue-a1{fill:#cd3138;color:#cd3138}.data-single-hue-a2{fill:#da5550;color:#da5550}.data-single-hue-a3{fill:#e57369;color:#e57369}.data-single-hue-a4{fill:#ef8f84;color:#ef8f84}.data-single-hue-a5{fill:#f8aba0;color:#f8aba0}.data-single-hue-a6{fill:#ffc6bd;color:#ffc6bd}.data-single-hue-b1{fill:#459036;color:#459036}.data-single-hue-b2{fill:#64a652;color:#64a652}.data-single-hue-b3{fill:#82bb6f;color:#82bb6f}.data-single-hue-b4{fill:#9fd28c;color:#9fd28c}.data-single-hue-b5{fill:#bce8aa;color:#bce8aa}.data-single-hue-b6{fill:#daffc9;color:#daffc9}.data-single-hue-c1{fill:#0073b3;color:#0073b3}.data-single-hue-c2{fill:#2e8dc3;color:#2e8dc3}.data-single-hue-c3{fill:#51a7d2;color:#51a7d2}.data-single-hue-c4{fill:#74c1e0;color:#74c1e0}.data-single-hue-c5{fill:#98dbef;color:#98dbef}.data-single-hue-c6{fill:#bef5ff;color:#bef5ff}.data-color-scale-a1{fill:#dc6428;color:#dc6428}.data-color-scale-a2{fill:#e7b657;color:#e7b657}.data-color-scale-a3{fill:#f1feaf;color:#f1feaf}.data-color-scale-a4{fill:#81b987;color:#81b987}.data-color-scale-a5{fill:#1c7464;color:#1c7464}.data-color-scale-b1{fill:#a40444;color:#a40444}.data-color-scale-b2{fill:#d584ac;color:#d584ac}.data-color-scale-b3{fill:#ffe8ff;color:#ffe8ff}.data-color-scale-b4{fill:#9a85b9;color:#9a85b9}.data-color-scale-b5{fill:#04367c;color:#04367c}.data-color-scale-c1{fill:#d49c44;color:#d49c44}.data-color-scale-c2{fill:#ecc188;color:#ecc188}.data-color-scale-c3{fill:#ffead0;color:#ffead0}.data-color-scale-c4{fill:#e7a491;color:#e7a491}.data-color-scale-c5{fill:#c56077;color:#c56077} \ No newline at end of file +.ds-icon{width:16px;height:16px;vertical-align:middle}.ds-icon.ds-icon-xs{width:8px;height:8px}.ds-icon.ds-icon-sm{width:16px;height:16px}.ds-icon.ds-icon-med{width:24px;height:24px}.ds-icon.ds-icon-lg{width:32px;height:32px}.ds-logo-full{width:104px;height:38px}.ds-logo-mark{width:24px;height:25px} \ No newline at end of file diff --git a/styles/mixins.less b/styles/mixins.less deleted file mode 100644 index e9a68fb..0000000 --- a/styles/mixins.less +++ /dev/null @@ -1,107 +0,0 @@ -@import 'brand-colors'; -@import 'data-colors'; - -/* Font Smoothing Support */ -.font-smoothing(on) { - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} -.font-smoothing(off) { - -webkit-font-smoothing: subpixel-antialiased; - -moz-osx-font-smoothing: auto; -} -/* Data Patterns - Palettes */ - -.paletteA-classes(@i: length(@ds-palette-a)) when (@i > 0) { - .paletteA-classes(@i - 1); - @ds-palette: extract(@ds-palette-a, @i); - .data-palette-a@{i} { - fill: @ds-palette; - color: @ds-palette; - } -} -.paletteA-classes(); - -.paletteB-classes(@i: length(@ds-palette-b)) when (@i > 0) { - .paletteB-classes(@i - 1); - @ds-palette: extract(@ds-palette-b, @i); - .data-palette-b@{i} { - fill: @ds-palette; - color: @ds-palette; - } -} -.paletteB-classes(); - -.paletteC-classes(@i: length(@ds-palette-c)) when (@i > 0) { - .paletteC-classes(@i - 1); - @ds-palette: extract(@ds-palette-c, @i); - .data-palette-c@{i} { - fill: @ds-palette; - color: @ds-palette; - } -} -.paletteC-classes(); - -/* Data Patterns - Single Hues */ - -.singleHueA-classes(@i: length(@ds-single-hue-a)) when (@i > 0) { - .singleHueA-classes(@i - 1); - @ds-single-hue: extract(@ds-single-hue-a, @i); - .data-single-hue-a@{i} { - fill: @ds-single-hue; - color: @ds-single-hue; - } -} -.singleHueA-classes(); - -.singleHueB-classes(@i: length(@ds-single-hue-b)) when (@i > 0) { - .singleHueB-classes(@i - 1); - @ds-single-hue: extract(@ds-single-hue-b, @i); - .data-single-hue-b@{i} { - fill: @ds-single-hue; - color: @ds-single-hue; - } -} -.singleHueB-classes(); - -.singleHueC-classes(@i: length(@ds-single-hue-c)) when (@i > 0) { - .singleHueC-classes(@i - 1); - @ds-single-hue: extract(@ds-single-hue-c, @i); - .data-single-hue-c@{i} { - fill: @ds-single-hue; - color: @ds-single-hue; - } -} -.singleHueC-classes(); - -/* Data Patterns - Color Scales */ - -.colorScaleA-classes(@i: length(@ds-color-scale-a)) when (@i > 0) { - .colorScaleA-classes(@i - 1); - @ds-color-scale: extract(@ds-color-scale-a, @i); - .data-color-scale-a@{i} { - fill: @ds-color-scale; - color: @ds-color-scale; - } -} -.colorScaleA-classes(); - -.colorScaleB-classes(@i: length(@ds-color-scale-b)) when (@i > 0) { - .colorScaleB-classes(@i - 1); - @ds-color-scale: extract(@ds-color-scale-b, @i); - .data-color-scale-b@{i} { - fill: @ds-color-scale; - color: @ds-color-scale; - } -} -.colorScaleB-classes(); - -.colorScaleC-classes(@i: length(@ds-color-scale-c)) when (@i > 0) { - .colorScaleC-classes(@i - 1); - @ds-color-scale: extract(@ds-color-scale-c, @i); - .data-color-scale-c@{i} { - fill: @ds-color-scale; - color: @ds-color-scale; - } -} -.colorScaleC-classes(); diff --git a/styles/mixins/data-colors.less b/styles/mixins/data-colors.less new file mode 100644 index 0000000..90080d3 --- /dev/null +++ b/styles/mixins/data-colors.less @@ -0,0 +1,87 @@ +/* Data Patterns - Palettes */ + +.ds-paletteA-classes(@i: length(@ds-palette-a)) when (@i > 0) { + .ds-paletteA-classes(@i - 1); + @ds-palette: extract(@ds-palette-a, @i); + .ds-data-palette-a@{i} { + fill: @ds-palette; + color: @ds-palette; + } +} + +.ds-paletteB-classes(@i: length(@ds-palette-b)) when (@i > 0) { + .ds-paletteB-classes(@i - 1); + @ds-palette: extract(@ds-palette-b, @i); + .ds-data-palette-b@{i} { + fill: @ds-palette; + color: @ds-palette; + } +} + +.ds-paletteC-classes(@i: length(@ds-palette-c)) when (@i > 0) { + .ds-paletteC-classes(@i - 1); + @ds-palette: extract(@ds-palette-c, @i); + .ds-data-palette-c@{i} { + fill: @ds-palette; + color: @ds-palette; + } +} + + +/* Data Patterns - Single Hues */ + +.ds-singleHueA-classes(@i: length(@ds-single-hue-a)) when (@i > 0) { + .ds-singleHueA-classes(@i - 1); + @ds-single-hue: extract(@ds-single-hue-a, @i); + .ds-data-single-hue-a@{i} { + fill: @ds-single-hue; + color: @ds-single-hue; + } +} + +.ds-singleHueB-classes(@i: length(@ds-single-hue-b)) when (@i > 0) { + .ds-singleHueB-classes(@i - 1); + @ds-single-hue: extract(@ds-single-hue-b, @i); + .ds-data-single-hue-b@{i} { + fill: @ds-single-hue; + color: @ds-single-hue; + } +} + +.ds-singleHueC-classes(@i: length(@ds-single-hue-c)) when (@i > 0) { + .ds-singleHueC-classes(@i - 1); + @ds-single-hue: extract(@ds-single-hue-c, @i); + .ds-data-single-hue-c@{i} { + fill: @ds-single-hue; + color: @ds-single-hue; + } +} + +/* Data Patterns - Color Scales */ + +.ds-colorScaleA-classes(@i: length(@ds-color-scale-a)) when (@i > 0) { + .ds-colorScaleA-classes(@i - 1); + @ds-color-scale: extract(@ds-color-scale-a, @i); + .ds-data-color-scale-a@{i} { + fill: @ds-color-scale; + color: @ds-color-scale; + } +} + +.ds-colorScaleB-classes(@i: length(@ds-color-scale-b)) when (@i > 0) { + .ds-colorScaleB-classes(@i - 1); + @ds-color-scale: extract(@ds-color-scale-b, @i); + .ds-data-color-scale-b@{i} { + fill: @ds-color-scale; + color: @ds-color-scale; + } +} + +.ds-colorScaleC-classes(@i: length(@ds-color-scale-c)) when (@i > 0) { + .ds-colorScaleC-classes(@i - 1); + @ds-color-scale: extract(@ds-color-scale-c, @i); + .ds-data-color-scale-c@{i} { + fill: @ds-color-scale; + color: @ds-color-scale; + } +} diff --git a/styles/mixins/global.less b/styles/mixins/global.less new file mode 100644 index 0000000..361d8b4 --- /dev/null +++ b/styles/mixins/global.less @@ -0,0 +1,28 @@ +/* Custom & data font imports */ +.ds-font-imports() { + @import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); + @import (css) url('https://fonts.googleapis.com/css?family=Lato:400,700,900'); + @import (css) url('https://fonts.googleapis.com/css?family=Inconsolata'); +} + +/* Font Smoothing Support */ +.ds-font-smoothing(on) { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.ds-font-smoothing(off) { + -webkit-font-smoothing: subpixel-antialiased; + -moz-osx-font-smoothing: auto; +} + +/* Layout Helpers */ +.ds-square(@value) { + width: @value; + height: @value; +} + +.ds-flex(@align: flex-start, @justify: flex-start) { + display: flex; + align-items: @align; + justify-content: @justify; +} diff --git a/styles/brand-colors.less b/styles/variables/brand-colors.less similarity index 100% rename from styles/brand-colors.less rename to styles/variables/brand-colors.less diff --git a/styles/code-snippet-colors.less b/styles/variables/code-snippet-colors.less similarity index 100% rename from styles/code-snippet-colors.less rename to styles/variables/code-snippet-colors.less diff --git a/styles/data-colors.less b/styles/variables/data-colors.less similarity index 100% rename from styles/data-colors.less rename to styles/variables/data-colors.less diff --git a/styles/fonts.less b/styles/variables/fonts.less similarity index 60% rename from styles/fonts.less rename to styles/variables/fonts.less index 8af8fff..b418c4b 100644 --- a/styles/fonts.less +++ b/styles/variables/fonts.less @@ -1,10 +1,7 @@ -@import (css) url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); -@import (css) url('https://fonts.googleapis.com/css?family=Lato:400,700,900'); - /* Typefaces */ @ds-font-custom: 'Open Sans', sans-serif; @ds-font-system: Arial, sans-serif; -@ds-font-code: Monaco, 'Lucida Sans Typewriter', Consolas, 'Lucida Console', 'Courier New', monospace; +@ds-font-code: 'Inconsolata', monospace; @ds-font-data: 'Lato', sans-serif; /* Sizes */ @@ -15,6 +12,7 @@ @ds-font-custom-regular: 400; @ds-font-custom-semibold: 600; @ds-font-custom-bold: 700; + /* Weights - Data */ @ds-font-data-regular: 400; @ds-font-data-bold: 700;