From 61c0d413e78ca53f3c1613b01133df9f6adf3048 Mon Sep 17 00:00:00 2001 From: Marcos Moura Date: Tue, 16 Aug 2016 22:38:18 -0300 Subject: [PATCH] Add themes with rgba colors --- src/components/mdAvatar/mdAvatar.theme | 12 ++-- src/components/mdBottomBar/mdBottomBar.theme | 14 ++-- src/components/mdButton/mdButton.theme | 70 ++++++++++++------- .../mdButtonToggle/mdButtonToggle.theme | 32 ++++----- src/components/mdCheckbox/mdCheckbox.theme | 6 +- src/components/mdIcon/mdIcon.theme | 6 +- .../mdInputContainer/mdInputContainer.theme | 14 ++-- src/components/mdList/mdList.theme | 16 ++--- src/components/mdRadio/mdRadio.theme | 6 +- src/components/mdSidenav/mdSidenav.theme | 4 +- src/components/mdSubheader/mdSubheader.theme | 6 +- src/components/mdSwitch/mdSwitch.theme | 9 ++- src/components/mdTheme/index.js | 12 +++- src/components/mdTheme/rgba.js | 36 ++++++++++ src/components/mdToolbar/mdToolbar.theme | 14 ++-- src/core/stylesheets/core.theme | 6 +- 16 files changed, 164 insertions(+), 99 deletions(-) create mode 100644 src/components/mdTheme/rgba.js diff --git a/src/components/mdAvatar/mdAvatar.theme b/src/components/mdAvatar/mdAvatar.theme index c2299a7..f3c81cf 100644 --- a/src/components/mdAvatar/mdAvatar.theme +++ b/src/components/mdAvatar/mdAvatar.theme @@ -3,30 +3,30 @@ &.md-avatar { &.md-primary { &.md-avatar-icon { - background-color: PRIMARY-COLOR; + background-color: #{'PRIMARY-COLOR'}; .md-icon { - color: PRIMARY-CONTRAST; + color: #{'PRIMARY-CONTRAST'}; } } } &.md-accent { &.md-avatar-icon { - background-color: ACCENT-COLOR; + background-color: #{'ACCENT-COLOR'}; .md-icon { - color: ACCENT-CONTRAST; + color: #{'ACCENT-CONTRAST'}; } } } &.md-warn { &.md-avatar-icon { - background-color: WARN-COLOR; + background-color: #{'WARN-COLOR'}; .md-icon { - color: WARN-CONTRAST; + color: #{'WARN-CONTRAST'}; } } } diff --git a/src/components/mdBottomBar/mdBottomBar.theme b/src/components/mdBottomBar/mdBottomBar.theme index 043f834..c3f096c 100644 --- a/src/components/mdBottomBar/mdBottomBar.theme +++ b/src/components/mdBottomBar/mdBottomBar.theme @@ -3,22 +3,22 @@ &.md-bottom-bar { &:not(.md-shift) { .md-active { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } } &.md-shift { - background-color: PRIMARY-COLOR; - color: PRIMARY-CONTRAST; + background-color: #{'PRIMARY-COLOR'}; + color: #{'PRIMARY-CONTRAST'}; &.md-accent { - background-color: ACCENT-COLOR; - color: ACCENT-CONTRAST; + background-color: #{'ACCENT-COLOR'}; + color: #{'ACCENT-CONTRAST'}; } &.md-warn { - background-color: WARN-COLOR; - color: WARN-CONTRAST; + background-color: #{'WARN-COLOR'}; + color: #{'WARN-CONTRAST'}; } } } diff --git a/src/components/mdButton/mdButton.theme b/src/components/mdButton/mdButton.theme index 6c35f7b..28c18a0 100644 --- a/src/components/mdButton/mdButton.theme +++ b/src/components/mdButton/mdButton.theme @@ -3,93 +3,113 @@ &.md-button:not([disabled]) { &.md-raised { &:not(.md-icon-button) { - color: BACKGROUND-COLOR-900; - background-color: BACKGROUND-COLOR-50; + color: #{'BACKGROUND-COLOR-900'}; + background-color: #{'BACKGROUND-COLOR-50'}; &:hover { - background-color: BACKGROUND-COLOR-200; + background-color: #{'BACKGROUND-COLOR-200'}; } } &.md-icon-button:not(.md-raised) { - color: BACKGROUND-COLOR; + color: #{'BACKGROUND-COLOR'}; } } &.md-fab { - color: ACCENT-CONTRAST; - background-color: ACCENT-COLOR; + color: #{'ACCENT-CONTRAST'}; + background-color: #{'ACCENT-COLOR'}; &:hover { - background-color: ACCENT-COLOR-A700; + background-color: #{'ACCENT-COLOR-A700'}; } &.md-fab-clean { - color: BACKGROUND-COLOR-900; - background-color: BACKGROUND-COLOR-50; + color: #{'BACKGROUND-COLOR-900'}; + background-color: #{'BACKGROUND-COLOR-50'}; &:hover { - background-color: BACKGROUND-COLOR-200; + background-color: #{'BACKGROUND-COLOR-200'}; } } } &.md-primary { &:not(.md-icon-button) { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } &.md-raised, &.md-fab { - background-color: PRIMARY-COLOR; - color: PRIMARY-CONTRAST; + background-color: #{'PRIMARY-COLOR'}; + color: #{'PRIMARY-CONTRAST'}; &:hover { - background-color: PRIMARY-COLOR-600; + background-color: #{'PRIMARY-COLOR-600'}; } } &.md-icon-button:not(.md-raised) { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } } &.md-accent { &:not(.md-icon-button) { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } &.md-raised { - background-color: ACCENT-COLOR; - color: ACCENT-CONTRAST; + background-color: #{'ACCENT-COLOR'}; + color: #{'ACCENT-CONTRAST'}; &:hover { - background-color: ACCENT-COLOR-A700; + background-color: #{'ACCENT-COLOR-A700'}; } } &.md-icon-button:not(.md-raised) { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } } &.md-warn { &:not(.md-icon-button) { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } &.md-raised, &.md-fab { - background-color: WARN-COLOR; - color: WARN-CONTRAST; + background-color: #{'WARN-COLOR'}; + color: #{'WARN-CONTRAST'}; &:hover { - background-color: WARN-COLOR-600; + background-color: #{'WARN-COLOR-600'}; } } &.md-icon-button:not(.md-raised) { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; + } + } + + &.md-hue-1 { + &:not(.md-icon-button) { + color: #{'HUE-1-COLOR'}; + } + + &.md-raised, + &.md-fab { + background-color: #{'HUE-1-COLOR'}; + color: #{'HUE-1-CONTRAST'}; + + &:hover { + background-color: #{'HUE-1-COLOR-600'}; + } + } + + &.md-icon-button:not(.md-raised) { + color: #{'HUE-1-COLOR'}; } } } diff --git a/src/components/mdButtonToggle/mdButtonToggle.theme b/src/components/mdButtonToggle/mdButtonToggle.theme index 1800235..742632b 100644 --- a/src/components/mdButtonToggle/mdButtonToggle.theme +++ b/src/components/mdButtonToggle/mdButtonToggle.theme @@ -13,54 +13,54 @@ } .md-toggle { - color: BACKGROUND-CONTRAST-600; - background-color: BACKGROUND-COLOR-500; + color: #{'BACKGROUND-CONTRAST-600'}; + background-color: #{'BACKGROUND-COLOR-500'}; &:hover { - background-color: BACKGROUND-COLOR-600; + background-color: #{'BACKGROUND-COLOR-600'}; } + .md-toggle:after { - background-color: BACKGROUND-COLOR-600; + background-color: #{'BACKGROUND-COLOR-600'}; } } &.md-primary .md-toggle { - color: PRIMARY-CONTRAST; - background-color: PRIMARY-COLOR; + color: #{'PRIMARY-CONTRAST'}; + background-color: #{'PRIMARY-COLOR'}; &:hover { - background-color: PRIMARY-COLOR-600; + background-color: #{'PRIMARY-COLOR-600'}; } + .md-toggle:after { - background-color: PRIMARY-COLOR-700; + background-color: #{'PRIMARY-COLOR-700'}; } } &.md-accent .md-toggle { - color: ACCENT-CONTRAST; - background-color: ACCENT-COLOR; + color: #{'ACCENT-CONTRAST'}; + background-color: #{'ACCENT-COLOR'}; &:hover { - background-color: ACCENT-COLOR-600; + background-color: #{'ACCENT-COLOR-600'}; } + .md-toggle:after { - background-color: ACCENT-COLOR-700; + background-color: #{'ACCENT-COLOR-700'}; } } &.md-warn .md-toggle { - color: WARN-CONTRAST; - background-color: WARN-COLOR; + color: #{'WARN-CONTRAST'}; + background-color: #{'WARN-COLOR'}; &:hover { - background-color: WARN-COLOR-600; + background-color: #{'WARN-COLOR-600'}; } + .md-toggle:after { - background-color: WARN-COLOR-700; + background-color: #{'WARN-COLOR-700'}; } } } diff --git a/src/components/mdCheckbox/mdCheckbox.theme b/src/components/mdCheckbox/mdCheckbox.theme index d8671e9..d0be464 100644 --- a/src/components/mdCheckbox/mdCheckbox.theme +++ b/src/components/mdCheckbox/mdCheckbox.theme @@ -3,12 +3,12 @@ &.md-checkbox { &.md-checked { .md-checkbox-container { - background-color: ACCENT-COLOR; - border-color: ACCENT-COLOR; + background-color: #{'ACCENT-COLOR'}; + border-color: #{'ACCENT-COLOR'}; } .md-ink-ripple { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } .md-ripple { diff --git a/src/components/mdIcon/mdIcon.theme b/src/components/mdIcon/mdIcon.theme index 84709b0..f64cfc4 100644 --- a/src/components/mdIcon/mdIcon.theme +++ b/src/components/mdIcon/mdIcon.theme @@ -2,15 +2,15 @@ .md-icon, &.md-icon { &.md-primary { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } &.md-accent { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } &.md-warn { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } } } diff --git a/src/components/mdInputContainer/mdInputContainer.theme b/src/components/mdInputContainer/mdInputContainer.theme index 8464581..1bfb05a 100644 --- a/src/components/mdInputContainer/mdInputContainer.theme +++ b/src/components/mdInputContainer/mdInputContainer.theme @@ -10,30 +10,30 @@ &.md-input-required { label:after { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } } &:after { height: 2px; - background-color: PRIMARY-COLOR; + background-color: #{'PRIMARY-COLOR'}; } input, textarea { - color: PRIMARY-COLOR; - text-shadow: 0 0 0 BACKGROUND-CONTRAST; + color: #{'PRIMARY-COLOR'}; + text-shadow: 0 0 0 #{'BACKGROUND-CONTRAST'}; -webkit-text-fill-color: transparent; } label { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } } &.md-input-invalid { &:after { - background-color: WARN-COLOR; + background-color: #{'WARN-COLOR'}; } label, @@ -41,7 +41,7 @@ .md-count, input, textarea { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } } } diff --git a/src/components/mdList/mdList.theme b/src/components/mdList/mdList.theme index 74b2d73..eab4048 100644 --- a/src/components/mdList/mdList.theme +++ b/src/components/mdList/mdList.theme @@ -1,8 +1,8 @@ .THEME_NAME { .md-list, &.md-list { - background-color: BACKGROUND-COLOR-A100; - color: BACKGROUND-CONTRAST; + background-color: #{'BACKGROUND-COLOR-A100'}; + color: #{'BACKGROUND-CONTRAST'}; &.md-transparent { background-color: transparent; @@ -12,30 +12,30 @@ .md-list-item { &.md-primary { .md-list-item-container { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; > .md-icon { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } } } &.md-accent { .md-list-item-container { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; > .md-icon { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } } } &.md-warn { .md-list-item-container { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; > .md-icon { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } } } diff --git a/src/components/mdRadio/mdRadio.theme b/src/components/mdRadio/mdRadio.theme index 56e2ddb..937b9a1 100644 --- a/src/components/mdRadio/mdRadio.theme +++ b/src/components/mdRadio/mdRadio.theme @@ -2,16 +2,16 @@ .md-radio, &.md-radio { .md-radio-container:after { - background-color: ACCENT-COLOR; + background-color: #{'ACCENT-COLOR'}; } &.md-checked { .md-radio-container { - border-color: ACCENT-COLOR; + border-color: #{'ACCENT-COLOR'}; } .md-ink-ripple { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } .md-ripple { diff --git a/src/components/mdSidenav/mdSidenav.theme b/src/components/mdSidenav/mdSidenav.theme index 21df69d..d1c8479 100644 --- a/src/components/mdSidenav/mdSidenav.theme +++ b/src/components/mdSidenav/mdSidenav.theme @@ -2,8 +2,8 @@ .md-sidenav, &.md-sidenav { .md-sidenav-content { - background-color: BACKGROUND-COLOR-A100; - color: BACKGROUND-CONTRAST; + background-color: #{'BACKGROUND-COLOR-A100'}; + color: #{'BACKGROUND-CONTRAST'}; } } } diff --git a/src/components/mdSubheader/mdSubheader.theme b/src/components/mdSubheader/mdSubheader.theme index c1d0216..31ed097 100644 --- a/src/components/mdSubheader/mdSubheader.theme +++ b/src/components/mdSubheader/mdSubheader.theme @@ -3,15 +3,15 @@ &.md-subheader { &.md-primary { - color: PRIMARY-COLOR; + color: #{'PRIMARY-COLOR'}; } &.md-accent { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } &.md-warn { - color: WARN-COLOR; + color: #{'WARN-COLOR'}; } } } diff --git a/src/components/mdSwitch/mdSwitch.theme b/src/components/mdSwitch/mdSwitch.theme index 1e97c9c..d466db3 100644 --- a/src/components/mdSwitch/mdSwitch.theme +++ b/src/components/mdSwitch/mdSwitch.theme @@ -2,13 +2,16 @@ .md-switch, &.md-switch { &.md-checked { - .md-switch-container, + .md-switch-container { + background-color: #{'ACCENT-COLOR-500-0.5'}; + } + .md-switch-thumb { - background-color: ACCENT-COLOR; + background-color: #{'ACCENT-COLOR'}; } .md-ink-ripple { - color: ACCENT-COLOR; + color: #{'ACCENT-COLOR'}; } .md-ripple { diff --git a/src/components/mdTheme/index.js b/src/components/mdTheme/index.js index 4588333..4e69007 100644 --- a/src/components/mdTheme/index.js +++ b/src/components/mdTheme/index.js @@ -1,7 +1,7 @@ import palette from './palette'; +import rgba from './rgba'; -let registedThemes = []; -const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn']; +const VALID_THEME_TYPE = ['primary', 'accent', 'background', 'warn', 'hue-1', 'hue-2', 'hue-3']; const DEFAULT_THEME_COLORS = { primary: 'indigo', accent: 'pink', @@ -26,9 +26,11 @@ const createNewStyleElement = (style, name) => { } }; +let registedThemes = []; + const parseStyle = (style, theme) => { VALID_THEME_TYPE.forEach((type) => { - style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d\\.?\\d*)?', 'g'), (match, paletteType, colorType, hue) => { + style = style.replace(RegExp('(' + type.toUpperCase() + ')-(COLOR|CONTRAST)-?(A?\\d*)-?(\\d*\\.?\\d+)?', 'g'), (match, paletteType, colorType, hue, opacity) => { let color; let colorVariant = hue || 500; @@ -54,6 +56,10 @@ const parseStyle = (style, theme) => { } } + if (opacity) { + return rgba(color[colorVariant], opacity); + } + return color[colorVariant]; } diff --git a/src/components/mdTheme/rgba.js b/src/components/mdTheme/rgba.js new file mode 100644 index 0000000..f0a9de0 --- /dev/null +++ b/src/components/mdTheme/rgba.js @@ -0,0 +1,36 @@ +export default function(hex, opacity) { + let r = ''; + let g = ''; + let b = ''; + let match = hex.toString().match(/^#?(([0-9a-zA-Z]{3}){1,3})$/); + + if (!match) { + throw new Error('Invalid color' + hex); + } + + hex = match[1]; + + if (hex.length === 6) { + r = parseInt(hex.substring(0, 2), 16); + g = parseInt(hex.substring(2, 4), 16); + b = parseInt(hex.substring(4, 6), 16); + } else if (hex.length === 3) { + let rSubstring = hex.substring(0, 1); + let gSubstring = hex.substring(1, 2); + let bSubstring = hex.substring(2, 3); + + r = parseInt(rSubstring + rSubstring, 16); + g = parseInt(gSubstring + gSubstring, 16); + b = parseInt(bSubstring + bSubstring, 16); + } + + if (opacity) { + if (opacity > 1) { + opacity = opacity / 100; + } + + return `rgba(${r}, ${g}, ${b}, ${opacity})`; + } + + return `rgb(${r}, ${g}, ${b})`; +} diff --git a/src/components/mdToolbar/mdToolbar.theme b/src/components/mdToolbar/mdToolbar.theme index 3adce51..f72c78a 100644 --- a/src/components/mdToolbar/mdToolbar.theme +++ b/src/components/mdToolbar/mdToolbar.theme @@ -1,22 +1,22 @@ .THEME_NAME { .md-toolbar, &.md-toolbar { - background-color: PRIMARY-COLOR; - color: PRIMARY-CONTRAST; + background-color: #{'PRIMARY-COLOR'}; + color: #{'PRIMARY-CONTRAST'}; &.md-accent { - background-color: ACCENT-COLOR; - color: ACCENT-CONTRAST; + background-color: #{'ACCENT-COLOR'}; + color: #{'ACCENT-CONTRAST'}; } &.md-warn { - background-color: WARN-COLOR; - color: WARN-CONTRAST; + background-color: #{'WARN-COLOR'}; + color: #{'WARN-CONTRAST'}; } &.md-transparent { background-color: transparent; - color: BACKGROUND-CONTRAST; + color: #{'BACKGROUND-CONTRAST'}; } } } diff --git a/src/core/stylesheets/core.theme b/src/core/stylesheets/core.theme index 18b8d88..6cd4cb7 100644 --- a/src/core/stylesheets/core.theme +++ b/src/core/stylesheets/core.theme @@ -1,9 +1,9 @@ body.THEME_NAME { color: rgba(0, 0, 0, .87); - background-color: BACKGROUND-COLOR-A100; + background-color: #{'BACKGROUND-COLOR-A100'}; :not(input):not(textarea)::selection { - background: ACCENT-COLOR; - color: ACCENT-CONTRAST !important; + background: #{'ACCENT-COLOR'}; + color: #{'ACCENT-CONTRAST'} !important; } }