Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feature(colors): dark material color palette #160

Merged
merged 3 commits into from
Nov 21, 2016
Merged

feature(colors): dark material color palette #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
02fed18
update(theme): include covalent theme in example & docs
Nov 19, 2016
b2fad41
feature(colors): add dark material color palette
Nov 19, 2016
354ba36
update(docs): add covalent import to theme docs
Nov 20, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions src/app/components/docs/theme/theme.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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