Skip to content

Commit

Permalink
feature(colors): dark material color palette (#160)
Browse files Browse the repository at this point in the history 
* update(theme): include covalent theme in example & docs

* feature(colors): add dark material color palette

* update(docs): add covalent import to theme docs
  • Loading branch information
@kyleledbetter
kyleledbetter authored Nov 21, 2016
1 parent fe0547f commit 2e69dbc
Show file tree
Hide file tree
Showing 8 changed files with 1,024 additions and 166 deletions.
8 changes: 6 additions & 2 deletions src/app/components/docs/theme/theme.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ <h3>SCSS Variables</h3>
<p>Simply edit the /theme.scss file and update these SCSS variables:</p>
<td-highlight lang="scss">
@import '~@angular/material/core/theming/all-theme';
@import '~@covalent/core/styles/theming/all-theme';
// Plus imports for other components in your app.

// Include the base styles for Angular Material core. We include this here so that you only
Expand All @@ -34,6 +35,7 @@ <h3>SCSS Variables</h3>
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($theme);
@include covalent-theme($theme);
</td-highlight>
<p>
Color palettes and hues follow the official <a href="https://material.google.com/style/color.html" target="_blank">Material Design Spec</a>.
Expand Down Expand Up @@ -65,7 +67,8 @@ <h3 class="md-title"><span class="tc-blue-700">Blue Primary</span> / <span class

$blue-orange: md-light-theme($primary2, $accent2, $warn2);

@include angular-material-theme($blue-orange);
@include angular-material-theme($blue-orange);
@include covalent-theme($blue-orange);
{{ '}' }}
</td-highlight>
</div>
Expand Down Expand Up @@ -106,7 +109,8 @@ <h3 class="md-title"><span class="tc-blue-grey-700">Blue Grey Primary</span> / <

$blue-grey-deep-orange: md-light-theme($primary3, $accent3, $warn3);

@include angular-material-theme($blue-grey-deep-orange);
@include angular-material-theme($blue-grey-deep-orange);
@include covalent-theme($blue-grey-deep-orange);
{{ '}' }}
</td-highlight>
</div>
Expand Down
154 changes: 101 additions & 53 deletions src/app/components/style-guide/colors/colors.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,63 +209,106 @@ <h3 class="md-title tc-blue-grey-700">View title</h3>
<md-card>
<md-card-title>CSS Background Colors</md-card-title>
<md-divider></md-divider>
<md-card-content>
<p>To manually color a background, use our simple bgc utility class:</p>
<td-highlight lang="html">
<![CDATA[
<div class="bgc-green-700">green background</div>
]]>
</td-highlight>
<p>choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey &amp; blue-grey)</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="20" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="bgc-{{color}}-"</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-50 pad-xs">50</div>
<div class="bgc-{{color}}-100 pad-xs">100</div>
<div class="bgc-{{color}}-200 pad-xs">200</div>
<div class="bgc-{{color}}-300 pad-xs">300</div>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-400 pad-xs">400</div>
<div class="bgc-{{color}}-500 pad-xs">500</div>
<div class="bgc-{{color}}-600 pad-xs">600</div>
<div class="bgc-{{color}}-700 pad-xs">700</div>
<div class="bgc-{{color}}-800 pad-xs">800</div>
<div class="bgc-{{color}}-900 pad-xs">900</div>
</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-A100 pad-xs">A100</div>
<md-tab-group>
<md-tab label="Default Colors">
<md-card-content>
<p>To manually color a background, use our simple bgc utility class:</p>
<td-highlight lang="html">
<![CDATA[
<div class="bgc-green-700">green background</div>
]]>
</td-highlight>
<p>choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey &amp; blue-grey)</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="20" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="bgc-{{color}}-"</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-50 pad-xs">50</div>
<div class="bgc-{{color}}-100 pad-xs">100</div>
<div class="bgc-{{color}}-200 pad-xs">200</div>
<div class="bgc-{{color}}-300 pad-xs">300</div>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-400 pad-xs">400</div>
<div class="bgc-{{color}}-500 pad-xs">500</div>
<div class="bgc-{{color}}-600 pad-xs">600</div>
<div class="bgc-{{color}}-700 pad-xs">700</div>
<div class="bgc-{{color}}-800 pad-xs">800</div>
<div class="bgc-{{color}}-900 pad-xs">900</div>
</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-A100 pad-xs">A100</div>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-A200 pad-xs">A200</div>
<div class="bgc-{{color}}-A400 pad-xs">A400</div>
<div class="bgc-{{color}}-A700 pad-xs">A700</div>
</div>
</md-card>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-A200 pad-xs">A200</div>
<div class="bgc-{{color}}-A400 pad-xs">A400</div>
<div class="bgc-{{color}}-A700 pad-xs">A700</div>
<div flex-gt-sm="20" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="bgc-{{color}}-"</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-50 pad-xs">50</div>
<div class="bgc-{{color}}-100 pad-xs">100</div>
<div class="bgc-{{color}}-200 pad-xs">200</div>
<div class="bgc-{{color}}-300 pad-xs">300</div>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-400 pad-xs">400</div>
<div class="bgc-{{color}}-500 pad-xs">500</div>
<div class="bgc-{{color}}-600 pad-xs">600</div>
<div class="bgc-{{color}}-700 pad-xs">700</div>
<div class="bgc-{{color}}-800 pad-xs">800</div>
<div class="bgc-{{color}}-900 pad-xs">900</div>
</div>
</md-card>
</div>
</md-card>
</div>
<div flex-gt-sm="20" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="bgc-{{color}}-"</div>
<div class="tc-grey-800">
<div class="bgc-{{color}}-50 pad-xs">50</div>
<div class="bgc-{{color}}-100 pad-xs">100</div>
<div class="bgc-{{color}}-200 pad-xs">200</div>
<div class="bgc-{{color}}-300 pad-xs">300</div>
</div>
</md-card-content>
</md-tab>
<md-tab label="Dark Colors">
<md-card-content>
<p>To manually color a background, use our simple bgc utility class:</p>
<td-highlight lang="html">
<![CDATA[
<div class="bgc-dark-green-700">dark green background</div>
]]>
</td-highlight>
<p>choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 &amp; B15</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="25" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="bgc-dark-{{color}}-"</div>
<div class="tc-white">
<div class="bgc-dark-{{color}}-500 pad-xs">500</div>
<div class="bgc-dark-{{color}}-B100 pad-xs tc-black">B100</div>
<div class="bgc-dark-{{color}}-B65 pad-xs">B65</div>
<div class="bgc-dark-{{color}}-B40 pad-xs">B40</div>
<div class="bgc-dark-{{color}}-B30 pad-xs">B30</div>
<div class="bgc-dark-{{color}}-B15 pad-xs">B15</div>
</div>
</md-card>
</div>
<div class="tc-{{color}}-50">
<div class="bgc-{{color}}-400 pad-xs">400</div>
<div class="bgc-{{color}}-500 pad-xs">500</div>
<div class="bgc-{{color}}-600 pad-xs">600</div>
<div class="bgc-{{color}}-700 pad-xs">700</div>
<div class="bgc-{{color}}-800 pad-xs">800</div>
<div class="bgc-{{color}}-900 pad-xs">900</div>
<div flex-gt-sm="25" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="bgc-dark-{{color}}-"</div>
<div class="tc-white">
<div class="bgc-dark-{{color}}-500 pad-xs">500</div>
<div class="bgc-dark-{{color}}-B100 pad-xs tc-black">B100</div>
<div class="bgc-dark-{{color}}-B65 pad-xs">B65</div>
<div class="bgc-dark-{{color}}-B40 pad-xs">B40</div>
<div class="bgc-dark-{{color}}-B30 pad-xs">B30</div>
<div class="bgc-dark-{{color}}-B15 pad-xs">B15</div>
</div>
</md-card>
</div>
</md-card>
</div>
</div>
</md-card-content>
</div>
</md-card-content>
</md-tab>
</md-tab-group>
</md-card>
<md-card>
<md-card-title>Material Design Color Resources</md-card-title>
Expand All @@ -281,6 +324,11 @@ <h3 class="md-title tc-blue-grey-700">View title</h3>
<span md-line>Material Design Colors</span>
</a>
<md-divider></md-divider>
<a md-list-item href="https://www.google.com/design/spec-wear/style/color.html#color-dark-color-palette-for-wear" target="_blank">
<md-icon>launch</md-icon>
<span md-line>Material Design Dark Color Palette</span>
</a>
<md-divider></md-divider>
<a md-list-item href="http://www.dadapixel.com/blog/2014/12/2/download-googles-expanded-material-design-palette-for-the-osx-system-color-picker" target="_blank">
<md-icon>launch</md-icon>
<span md-line>OSX Material Design System Color Picker</span>
Expand Down
159 changes: 103 additions & 56 deletions src/app/components/style-guide/iconography/iconography.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,67 +33,114 @@ <h3 class="md-title">Usage</h3>
<md-card>
<md-card-title>CSS Icon (Font or SVG) Colors</md-card-title>
<md-divider></md-divider>
<md-card-content>
<p>To manually color a fill or font color (depending if you're using a font icon or SVV icon), use our simple tc utility class:</p>
<td-highlight lang="html">
<![CDATA[
/* this will be green font icon */
<md-icon class="tc-green-700">palette</md-icon>
<md-tab-group>
<md-tab label="Default Colors">
<md-card-content>
<p>To manually color a fill or font color (depending if you're using a font icon or SVV icon), use our simple tc utility class:</p>
<td-highlight lang="html">
<![CDATA[
/* this will be a green font icon */
<md-icon class="tc-green-700">palette</md-icon>

/* this will be green filled SVG icon */
<md-icon class="fill-green-700" svgIcon="/path/to/palette.svg"></md-icon>
]]>
</td-highlight>
<p>choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey &amp; blue-grey)</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="20" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="tc-{{color}}-"</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-50">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-200">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-300">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-400">palette</span></md-icon>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-600">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-700">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-800">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-900">palette</span></md-icon>
/* this will be a green filled SVG icon */
<md-icon class="fill-green-700" svgIcon="/path/to/palette.svg"></md-icon>
]]>
</td-highlight>
<p>choose from any of the material colors, in hues from 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 (and A100, A200, A400, A700 for all except brown, grey &amp; blue-grey)</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="20" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="tc-{{color}}-"</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-50">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-200">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-300">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-400">palette</span></md-icon>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-600">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-700">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-800">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-900">palette</span></md-icon>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-A100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-A200">palette</span></md-icon>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-A400">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-A700">palette</span></md-icon>
</div>
</md-card>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-A100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-A200">palette</span></md-icon>
<div flex-gt-sm="20" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="tc-{{color}}-"</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-50">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-200">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-300">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-400">palette</span></md-icon>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-600">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-700">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-800">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-900">palette</span></md-icon>
</div>
</md-card>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-A400">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-A700">palette</span></md-icon>
</div>
</md-card>
</div>
<div flex-gt-sm="20" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="tc-{{color}}-"</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-50">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-100">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-200">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-300">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-400">palette</span></md-icon>
</div>
</md-card-content>
</md-tab>
<md-tab label="Dark Colors">
<md-card-content>
<p>To manually color a fill or font color (depending if you're using a font icon or SVV icon), use our simple tc utility class:</p>
<td-highlight lang="html">
<![CDATA[
/* this will be a dark green font icon */
<md-icon class="tc-dark-green-700">palette</md-icon>

/* this will be a dark green filled SVG icon */
<md-icon class="fill-dark-green-700" svgIcon="/path/to/palette.svg"></md-icon>
]]>
</td-highlight>
<p>choose from any of the dark material colors, in hues from 500, B100, B65, B40, B30 &amp; B15</p>
<div layout-gt-sm="row" layout-wrap>
<div flex-gt-sm="20" *ngFor="let color of colors">
<md-card>
<div class="md-caption pad-xs">class="tc-dark-{{color}}-"</div>
<div class="bgc-{{color}}-100">
<md-icon><span class="tc-dark-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B100">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B65">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B40">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B30">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B15">palette</span></md-icon>
</div>
</md-card>
</div>
<div class="bgc-{{color}}-50">
<md-icon><span class="tc-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-600">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-700">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-800">palette</span></md-icon>
<md-icon><span class="tc-{{color}}-900">palette</span></md-icon>
<div flex-gt-sm="20" *ngFor="let color of neutrals">
<md-card>
<div class="md-caption pad-xs">class="tc-dark-{{color}}-"</div>
<div class="bgc-{{color}}-100">
<md-icon><span class="tc-dark-{{color}}-500">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B100">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B65">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B40">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B30">palette</span></md-icon>
<md-icon><span class="tc-dark-{{color}}-B15">palette</span></md-icon>
</div>
</md-card>
</div>
</md-card>
</div>
</div>
</md-card-content>
</div>
</md-card-content>
</md-tab>
</md-tab-group>
</md-card>
<md-card>
<md-card-title>Search Icons</md-card-title>
Expand Down
Loading

0 comments on commit 2e69dbc

Please sign in to comment.