Created
October 16, 2018 17:32
-
-
Save shprink/c7f333e3ad51830f14a6383f3ab35439 to your computer and use it in GitHub Desktop.
Angular Material Sass to CSS variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @function mat-color($palette-primary, $hue: default, $opacity: null) { | |
| @if type-of($hue) == number and $hue >= 0 and $hue <= 1 { | |
| @return mat-color($palette-primary, default, $hue); | |
| } | |
| $color: map-get($palette-primary, $hue); | |
| $opacity: if($opacity == null, opacity($color), $opacity); | |
| @if type-of($opacity) == string { | |
| $new-string: str-replace($color, ')', '-alpha, 1)'); | |
| @return rgba($color, $new-string); | |
| } | |
| @return rgba($color, $opacity); | |
| } | |
| @function hexToRGB($color) { | |
| @return (red($color),green($color),blue($color)); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "~css-vars/css-vars"; | |
| $css-vars-light: ( | |
| // PRIMARY | |
| --palette-primary-50: hexToRGB(#eceff1), | |
| --palette-primary-100: hexToRGB(#cfd8dc), | |
| --palette-primary-200: hexToRGB(#b0bec5), | |
| --palette-primary-300: hexToRGB(#90a4ae), | |
| --palette-primary-400: hexToRGB(#78909c), | |
| --palette-primary-500: hexToRGB(#607d8b), | |
| --palette-primary-600: hexToRGB(#546e7a), | |
| --palette-primary-700: hexToRGB(#455a64), | |
| --palette-primary-800: hexToRGB(#37474f), | |
| --palette-primary-900: hexToRGB(#263238), | |
| --palette-primary-A100: hexToRGB(#cfd8dc), | |
| --palette-primary-A200: hexToRGB(#b0bec5), | |
| --palette-primary-A400: hexToRGB(#78909c), | |
| --palette-primary-A700: hexToRGB(#455a64), | |
| --dark-primary-text: hexToRGB($dark-primary-text), | |
| --light-primary-text: hexToRGB($light-primary-text), | |
| // ACCENT | |
| --palette-accent-50: hexToRGB(#e1f5fe), | |
| --palette-accent-100: hexToRGB(#b3e5fc), | |
| --palette-accent-200: hexToRGB(#81d4fa), | |
| --palette-accent-300: hexToRGB(#4fc3f7), | |
| --palette-accent-400: hexToRGB(#29b6f6), | |
| --palette-accent-500: hexToRGB(#03a9f4), | |
| --palette-accent-600: hexToRGB(#039be5), | |
| --palette-accent-700: hexToRGB(#0288d1), | |
| --palette-accent-800: hexToRGB(#0277bd), | |
| --palette-accent-900: hexToRGB(#01579b), | |
| --palette-accent-A100: hexToRGB(#80d8ff), | |
| --palette-accent-A200: hexToRGB(#40c4ff), | |
| --palette-accent-A400: hexToRGB(#00b0ff), | |
| --palette-accent-A700: hexToRGB(#0091ea), | |
| --dark-accent-text: var(--dark-primary-text), | |
| --light-accent-text: var(--light-primary-text), | |
| // WARN | |
| --palette-warn-50: hexToRGB(#ffebee), | |
| --palette-warn-100: hexToRGB(#ffcdd2), | |
| --palette-warn-200: hexToRGB(#ef9a9a), | |
| --palette-warn-300: hexToRGB(#e57373), | |
| --palette-warn-400: hexToRGB(#ef5350), | |
| --palette-warn-500: hexToRGB(#f44336), | |
| --palette-warn-600: hexToRGB(#e53935), | |
| --palette-warn-700: hexToRGB(#d32f2f), | |
| --palette-warn-800: hexToRGB(#c62828), | |
| --palette-warn-900: hexToRGB(#b71c1c), | |
| --palette-warn-A100: hexToRGB(#ff8a80), | |
| --palette-warn-A200: hexToRGB(#ff5252), | |
| --palette-warn-A400: hexToRGB(#ff1744), | |
| --palette-warn-A700: hexToRGB(#d50000), | |
| --dark-warn-text: var(--dark-primary-text), | |
| --light-warn-text: var(--light-primary-text), | |
| // BACKGROUND | |
| --palette-background-status-bar: hexToRGB(map_get($mat-grey, 300)), | |
| --palette-background-app-bar: hexToRGB(map_get($mat-grey, 100)), | |
| --palette-background-background: hexToRGB(map_get($mat-grey, 50)), | |
| --palette-background-hover: hexToRGB(#000000), | |
| --palette-background-hover-alpha: 0.04, | |
| --palette-background-card: hexToRGB(#ffffff), | |
| --palette-background-dialog: hexToRGB(#ffffff), | |
| --palette-background-disabled-button: hexToRGB(#000000), | |
| --palette-background-disabled-button-alpha: 0.12, | |
| --palette-background-raised-button: hexToRGB(#ffffff), | |
| --palette-background-focused-button: hexToRGB($dark-focused), | |
| --palette-background-selected-button: hexToRGB(map_get($mat-grey, 300)), | |
| --palette-background-selected-disabled-button: hexToRGB(map_get($mat-grey, 400)), | |
| --palette-background-disabled-button-toggle: hexToRGB(map_get($mat-grey, 200)), | |
| --palette-background-unselected-chip: hexToRGB(map_get($mat-grey, 300)), | |
| --palette-background-disabled-list-option: hexToRGB(map_get($mat-grey, 200)), | |
| // FOREGROUND | |
| --palette-foreground-base: hexToRGB(#000000), | |
| --palette-foreground-divider: hexToRGB($dark-dividers), | |
| --palette-foreground-dividers: hexToRGB($dark-dividers), | |
| --palette-foreground-disabled: hexToRGB($dark-disabled-text), | |
| --palette-foreground-disabled-button: hexToRGB(#000000), | |
| --palette-foreground-disabled-button-alpha: 0.26, | |
| --palette-foreground-disabled-text: hexToRGB($dark-disabled-text), | |
| --palette-foreground-elevation: hexToRGB( #000000), | |
| --palette-foreground-hint-text: hexToRGB($dark-disabled-text), | |
| --palette-foreground-secondary-text: hexToRGB($dark-secondary-text), | |
| --palette-foreground-icon: hexToRGB(#000000), | |
| --palette-foreground-icon-alpha: 0.54, | |
| --palette-foreground-icons: hexToRGB(#000000), | |
| --palette-foreground-icons-alpha: 0.54, | |
| --palette-foreground-text: hexToRGB(#000000), | |
| --palette-foreground-text-alpha: 0.87, | |
| --palette-foreground-slider-min: hexToRGB(#000000), | |
| --palette-foreground-slider-min-alpha: 0.87, | |
| --palette-foreground-slider-off: hexToRGB(#000000), | |
| --palette-foreground-slider-off-alpha: 0.26, | |
| --palette-foreground-slider-off-active: hexToRGB(#000000), | |
| --palette-foreground-slider-off-active-alpha: 0.38, | |
| ); | |
| @include css-vars($css-vars-dark); | |
| $palette-primary: ( | |
| 50: var(--palette-primary-50), | |
| 100: var(--palette-primary-100), | |
| 200: var(--palette-primary-200), | |
| 300: var(--palette-primary-300), | |
| 400: var(--palette-primary-400), | |
| 500: var(--palette-primary-500), | |
| 600: var(--palette-primary-600), | |
| 700: var(--palette-primary-700), | |
| 800: var(--palette-primary-800), | |
| 900: var(--palette-primary-900), | |
| A100: var(--palette-primary-A100), | |
| A200: var(--palette-primary-A200), | |
| A400: var(--palette-primary-A400), | |
| A700: var(--palette-primary-A700), | |
| contrast: ( | |
| 50: var(--dark-primary-text), | |
| 100: var(--dark-primary-text), | |
| 200: var(--dark-primary-text), | |
| 300: var(--dark-primary-text), | |
| 400: var(--light-primary-text), | |
| 500: var(--light-primary-text), | |
| 600: var(--light-primary-text), | |
| 700: var(--light-primary-text), | |
| 800: var(--light-primary-text), | |
| 900: var(--light-primary-text), | |
| A100: var(--dark-primary-text), | |
| A200: var(--dark-primary-text), | |
| A400: var(--light-primary-text), | |
| A700: var(--light-primary-text), | |
| ) | |
| ) !default; | |
| $palette-accent: ( | |
| 50: var(--palette-accent-50), | |
| 100: var(--palette-accent-100), | |
| 200: var(--palette-accent-200), | |
| 300: var(--palette-accent-300), | |
| 400: var(--palette-accent-400), | |
| 500: var(--palette-accent-500), | |
| 600: var(--palette-accent-600), | |
| 700: var(--palette-accent-700), | |
| 800: var(--palette-accent-800), | |
| 900: var(--palette-accent-900), | |
| A100: var(--palette-accent-A100), | |
| A200: var(--palette-accent-A200), | |
| A400: var(--palette-accent-A400), | |
| A700: var(--palette-accent-A700), | |
| contrast: ( | |
| 50: var(--dark-accent-text), | |
| 100: var(--dark-accent-text), | |
| 200: var(--dark-accent-text), | |
| 300: var(--dark-accent-text), | |
| 400: var(--light-accent-text), | |
| 500: var(--light-accent-text), | |
| 600: var(--light-accent-text), | |
| 700: var(--light-accent-text), | |
| 800: var(--light-accent-text), | |
| 900: var(--light-accent-text), | |
| A100: var(--dark-accent-text), | |
| A200: var(--dark-accent-text), | |
| A400: var(--light-accent-text), | |
| A700: var(--light-accent-text), | |
| ) | |
| ) !default; | |
| $palette-warn: ( | |
| 50: var(--palette-warn-50), | |
| 100: var(--palette-warn-100), | |
| 200: var(--palette-warn-200), | |
| 300: var(--palette-warn-300), | |
| 400: var(--palette-warn-400), | |
| 500: var(--palette-warn-500), | |
| 600: var(--palette-warn-600), | |
| 700: var(--palette-warn-700), | |
| 800: var(--palette-warn-800), | |
| 900: var(--palette-warn-900), | |
| A100: var(--palette-warn-A100), | |
| A200: var(--palette-warn-A200), | |
| A400: var(--palette-warn-A400), | |
| A700: var(--palette-warn-A700), | |
| contrast: ( | |
| 50: var(--dark-warn-text), | |
| 100: var(--dark-warn-text), | |
| 200: var(--dark-warn-text), | |
| 300: var(--dark-warn-text), | |
| 400: var(--light-warn-text), | |
| 500: var(--light-warn-text), | |
| 600: var(--light-warn-text), | |
| 700: var(--light-warn-text), | |
| 800: var(--light-warn-text), | |
| 900: var(--light-warn-text), | |
| A100: var(--dark-warn-text), | |
| A200: var(--dark-warn-text), | |
| A400: var(--light-warn-text), | |
| A700: var(--light-warn-text), | |
| ) | |
| ) !default; | |
| $palette-background: ( | |
| status-bar: var(--palette-background-status-bar), | |
| app-bar: var(--palette-background-app-bar), | |
| background: var(--palette-background-background), | |
| hover: var(--palette-background-hover), | |
| card: var(--palette-background-card), | |
| dialog: var(--palette-background-dialog), | |
| disabled-button: var(--palette-background-disabled-button), | |
| raised-button: var(--palette-background-raised-button), | |
| focused-button: var(--palette-background-focused-button), | |
| selected-button: var(--palette-background-selected-button), | |
| selected-disabled-button: var(--palette-background-selected-disabled-button), | |
| disabled-button-toggle: var(--palette-background-disabled-button-toggle), | |
| unselected-chip: var(--palette-background-unselected-chip), | |
| disabled-list-option: var(--palette-background-disabled-list-option), | |
| ) !default; | |
| $palette-foreground: ( | |
| base: var(--palette-foreground-base), | |
| divider: var(--palette-foreground-divider), | |
| dividers: var(--palette-foreground-dividers), | |
| disabled: var(--palette-foreground-disabled), | |
| disabled-button: var(--palette-foreground-disabled-button), | |
| disabled-text: var(--palette-foreground-disabled-text), | |
| elevation: var(--palette-foreground-elevation), | |
| hint-text: var(--palette-foreground-hint-text), | |
| secondary-text: var(--palette-foreground-secondary-text), | |
| icon: var(--palette-foreground-icon), | |
| icons: var(--palette-foreground-icons), | |
| text: var(--palette-foreground-text), | |
| slider-min: var(--palette-foreground-slider-min), | |
| slider-off: var(--palette-foreground-slider-off), | |
| slider-off-active: var(--palette-foreground-slider-off-active), | |
| ) !default; | |
| $primary: mat-palette($palette-primary) !default; | |
| $accent: mat-palette($palette-accent, 600, 400, 700) !default; | |
| $warn: mat-palette($palette-warn) !default; | |
| $theme: mat-light-theme($primary, $accent, $warn) !default; | |
| // $background: map_merge($background, $palette-background); | |
| $theme: map_merge($theme, ( | |
| background: $palette-background, | |
| foreground: $palette-foreground, | |
| )); | |
| $background: map-get($theme, background) !default; | |
| $foreground: map-get($theme, foreground) !default; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| npm i css-vars --save-dev |
haha thanks @timbophillips
Very many thanks! I took your approach and made a little library: https://github.com/johannesjo/angular-material-css-vars
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Shprink you've changed my world. Thank you.