I have the following palettes, with various hue values, being applied to multiple themes in my material-theme.scss file:
$green: mat-palette($mat-green, A400);
$blue: mat-palette($mat-light-blue, A400);
$red: mat-palette($mat-red);
$red-warn: mat-palette($mat-red, A100);
In my material-styles.scss file, I have a mixin that is used to define styles based on the current theme:
#mixin style-theme($theme) {
$p: map-get($theme, primary);
$a: map-get($theme, accent);
$w: map-get($theme, warn);
$primary: mat-color($p);
$accent: mat-color($a);
$warn: mat-color($w);
$primary-contrast: mat-contrast($p, 500);
$accent-contrast: mat-contrast($a, 500);
$warn-contrast: mat-contrast($w, 500);
// Apply styling based on values above
}
Themes are created as follows:
.light-green {
$default-theme: mat-light-theme($green, $blue);
#include style-theme($default-theme);
#include angular-material-theme($default-theme);
}
Is it possible for me to get the contrast of the currently applied palette? As it is now, I am only able to hard-code the $hue value for the mat-contrast function.
StackBlitz Demo
There are six 'special' keys that are automatically added to a palette when you use mat-palette():
default
lighter
darker
default-contrast
lighter-contrast
darker-contrast
Each base palette contains all of the colors mapped to the keys 50, 100, ... 900, A100, A200, A400, A700. It also contains a sub-palette mapped to the key 'contrast' with a set of contrast colors mapped to the same keys. The colors assigned to the special keys correspond to the hue values passed in to mat-palette(), which default to 500, 100, and 700 respectively for default, lighter, and darker. The '*-contrast' mapped colors are pulled from the contrast sub-palette using the same hue value keys.
When you call mat-color() without a hue key it uses default as the key. But you could use any of the special keys so that you don't need to know which hue values are actually mapped to the special keys.
So for example, you could call mat-color($green, default-contrast) to get the proper contrast color for the default color in your green palette.
I was able to figure it out by inspecting the theming for MatToolbar.
You can get the contrast color value for a palette using the following:
$contrast: mat-color($palette, default-contrast);
See revised StackBlitz Demo
Related
I'm trying to use the Foundation button() mixin in order to change the color of the button. I tried following the example in the docs:
#include button(
// $padding - Used to build padding for buttons Default: $button-med or rem-calc(12)
$padding,
// Background color. We can set $bg:false for a transparent background. Default: $primary-color.
$bg,
// If true, set to button radius which is $global-radius or explicitly set radius amount in px (ex. $radius:10px). Default:false.
$radius,
// We can set $full-width:true to remove side padding extend width. Default:false
$full-width,
// We can set $disabled:true to create a disabled transparent button. Default:false
$disabled
);
But my compiler complains that the mixin only takes 4 arguments. I can feed in four arguments, but none of them take the action I'd expect.
Try passing the parameters as named parameters to the #include(). Like this:
#include button($padding: 4px, $bg: #1a1a1a, $radius: 3px, $full-width: false);
Also, the parameter names will depend on which version of Foundation you're using. Your example indicates you're using Foundation 5. Foundation 6 uses different parameter names.
The Question:
Is there a SASS function/technique that transforms a HEX value to a simple RGB string.
Simple here meaning just a string without it being enclosed in rgb() ?
E.g: #D50000 --> "213,0,0"
Why I need this:
I'm using Material Design Lite as my UI 'framework'. More specifically I'm using the SASS version so I can tweak the color variables according to my app's style-guide.
For some reason the color variables in _variables.scss of MDL take this format for color definitions:
$color-primary: "0,0,0" !default; // supposed to be black
which is really, really odd. I expected, at most, something along the lines of
$color-primary: rgba(0,0,0,1) !default;
My color variables are stored in another file called _globals.scss in which I store my variables in regular HEX format so I can easily reuse them in other places:
$brand-primary: #FA3166;
$brand-primary-dark: #E02C59;
I don't want to define 2 times my colours (1 HEX & 1 MDL-compatible RGB string), hence the reason I need to transform HEX to RGB-string.
#nicholas-kyriakides's answer works perfectly fine, but here is a more concise function using Sass interpolation.
#function hexToRGBString($hexColor) {
#return "#{red($hexColor)},#{green($hexColor)},#{blue($hexColor)}";
}
You can pass in either a hex either explicity or from rgb() or rgba() with opacity as 1.
For example:
$color-white: hexToRGBString(#fff) => "255,255,255"
$color-white: hexToRGBString(rgb(255,255,255)) => "255,255,255"
$color-white: hexToRGBString(rgba(#fff,1)) => "255,255,255"
I've hacked around it with a SASS function:
#function hexToString($hexColor) {
// 0.999999 val in alpha actually compiles to 1.0
$rgbaVal: inspect(rgba($hexColor,0.9999999));
// slice substring between 'rgba(' and '1.0)'
#return str-slice($rgbaVal, 6, str-length($rgbaVal)-6);
}
Usage:
$brand-primary: #333;
$color-primary: hexToString($brand-primary);
I think the MDL team intended to have a different way to customise the palette and I'm missing it, so if someone knows a better way to customise MDL's palette I'm open to suggestions. Either way this solves the original question.
I was looking for a way to change the default colors of the different categories in d3.js.
I found where the colors are laid out in the main d3.js. They look like this for one category:
var ml = [2062260, 16744206, 2924588, 14034728, 9725885, 9197131, 14907330, 8355711, 12369186, 1556175].map(yt)
I've tried replacing these values with everything from Hex codes to HSL to RGB and it never yields the expected colors.
Any ideas how I can generate the proper numbers for whatever colors I want?
Thanks.
First, just FYI, to see the RGB (i.e. hex) value that corresponds to these numbers:
(2062260).toString(16); // 16 for hex, aka base 16
> "1f77b4"
Next, given an RGB (again, hex) that you want to convert to number:
parseInt("1f77b4", 16); // 16 for hex
> 2062260
And that would be the number you want to use.
The colors you got from the d3 source are used to construct what you get from d3.scale.category10(). You can get the same thing but with your own colors — and without modifying d3's source code — by constructing a d3.scale.ordinal:
var myCategory3 = d3.scale.ordinal()
.domain(["red", "#1f77b4", "rgb(128, 255, 128)"]);// All kinds of colors are possible
myCategory3("X");// "red"
myCategory3("blabla");// "#1f77b4"
myCategory3("X");// "red"
myCategory3(123456);// "rgb(128, 255, 128)"
When creating a color scheme in SASS what's the conventional variable names for defining colors?
I know using color names are bad. Such as:
$blue
$red
$green
But I've not seen an alternative. I'm struggling for variable names for colors on the site that convey meaning.
Any ideas?
I found another idea in "SASS & Color Variables" article. The solution suggested by Sacha Greif is to use some variables to store descriptive color names, and some other to assign those colors to their functions:
// first we set descriptive variables:
$darkgrey: #333333;
$blue: #001eff;
// then we set functional variables:
$text_color: $darkgrey;
$link_color: $lightblue;
$border_color: $lightblue;
.myClass {
color: $text_color;
border-color: $border_color;
}
a {
color: $link_color;
}
I'm just beginning with SASS and don't know which approach is more practical, but I like the way it separates colors from their function.
In my personal experience the most useful way to name colors is to do it in regards of the color's function, such as
$background
$contrast
$text
$aside
$link
And so on. Of course which colors and name may depend on the design.
Then you may have different and exchangeable color schemes defined on different styles, such as:
_dark_scheme.scss
_light_scheme.scss
_pastels.scss
The idea here, is that you can use the same color variables in your main stylesheets, and do not depend on specific colors.
I like the idea of combining generic to specific naming (good for code completion) and description/functional naming. So you have something like this:
// Descriptive naming
$color-gray-light: #f3f3f3;
$color-gray-dark: #999999;
$color-red: red;
// Functional naming
$link-color: $color-red;
$link-border-color: $color-gray-light;
You can even create a mixin for greys (in the example RGBA is used for transparency, for example black on a red background would be more visible if it is 80% transparent black rather than dark grey).
#mixin grey($intensity: 0.5, $type: color) {
#{$type}: rgba(black, $intensity);
}
.i-am-50-percent-gray {
#include grey(0.5, color);
}
Give the result
.i-am-50-percent-gray {
color: rgba(0, 0, 0, 0.5);
}
I’m using MiamiNice theme in my “pie’s” graphics, but doesn’t provide enough colors, and repeat colors in some sectors, is there any way to define a number of colors?
Thanks!!!
You can simply create your own Theme and put there all the colors that you want.
e.g.
var myTheme = new dojox.charting.Theme({
colors: [
"#A4CE67",
"#739363",
"#6B824A",
"#343434",
"#636563"
]
});
Then you should use "myTheme" as your theme in your chart.