@daffodil/design 0.42.3 → 0.43.1

package/scss/theming/_configure-palette.scss

@@ -0,0 +1,20 @@
+@use 'sass:map';
+@use 'get-color';
+
+// @docs
+//
+// Configures the default color of a palette. It will set the
+// "default" to 60 if $hue isn't specified.
+//
+// @usage
+// ```scss
+// daff-configure-palette($daff-yellow, 50);
+// ```
+@function daff-configure-palette($color-palette, $hue: 60) {
+	@return map.merge(
+		$color-palette,
+		(
+			'default': get-color.daff-color($color-palette, $hue)
+		)
+	);
+}

package/scss/theming/_configure-theme.scss

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'configure-palette';
+@use 'color-palettes' as palette;
+@use 'get-color';
+
+$daff-light-theme: (
+	'font-color': get-color.daff-color(palette.$daff-gray, 110),
+	'base': get-color.daff-color(palette.$daff-gray, 0),
+	'base-contrast': get-color.daff-color(palette.$daff-gray, 110),
+	'white': get-color.daff-color(palette.$daff-gray, 0),
+	'black': get-color.daff-color(palette.$daff-gray, 110),
+	'gray': configure-palette.daff-configure-palette(palette.$daff-gray, 60),
+);
+
+$daff-dark-theme: (
+	'font-color': get-color.daff-color(palette.$daff-gray, 0),
+	'base': get-color.daff-color(palette.$daff-gray, 100),
+	'base-contrast': get-color.daff-color(palette.$daff-gray, 0),
+	'white': get-color.daff-color(palette.$daff-gray, 0),
+	'black': get-color.daff-color(palette.$daff-gray, 110),
+	'gray': configure-palette.daff-configure-palette(palette.$daff-gray, 50),
+);
+
+$supported-theme-types: (
+	'light': $daff-light-theme,
+	'dark': $daff-dark-theme
+);
+
+// @docs
+//
+// Create a theme object given some initial settings
+//
+// @usage
+// ```
+// daff-configure-theme($daff-yellow, $daff-blue, $daff-purple)
+// ```
+@function daff-configure-theme(
+	$primary,
+	$secondary,
+	$tertiary,
+	$type: 'light'
+) {
+	@return (
+		'primary': $primary,
+		'secondary': $secondary,
+		'tertiary': $tertiary,
+		'core': daff-build-theme-core($type)
+	);
+}
+
+//
+// @docs
+//
+// Create a core theme given a theme type
+// $type | ThemeType : "light" | "dark"
+//
+// ```
+// @usage
+// daff-build-theme-core("light")
+// ```
+@function daff-build-theme-core($type: 'light') {
+	$error-msg: 'is not a valid theme type - valid types:';
+	@if (not map.has-key($supported-theme-types, $type)) {
+		@error '`#{$type}` `#{$error-msg}` `#{map-keys($supported-theme-types)}`';
+	}
+
+	@return map.get($supported-theme-types, $type);
+}

package/scss/theming/_get-color.scss

@@ -0,0 +1,18 @@
+@use 'sass:map';
+
+//
+// Takes a color palette and retrieves the hue from the palette
+// If no color is selected, it will retrieve the default
+// color from the palette
+//
+// @usage
+// ```
+// daff-color($daff-yellow, 60);
+// ```
+@function daff-color($palette, $color: 'default') {
+	@if (not(map.has-key($palette, $color))) {
+		@error 'Color: `#{$color}` does not exist in palette';
+	}
+
+	@return map.get($palette, $color);
+}

package/scss/theming/_index.scss

@@ -0,0 +1,6 @@
+@forward 'color-palettes';
+@forward 'get-color';
+@forward 'contrast';
+@forward 'illuminate/illuminate';
+@forward 'configure-palette';
+@forward 'configure-theme';

package/scss/theming/_theme-css-variables.scss

@@ -0,0 +1,43 @@
+@use 'sass:map';
+@use '../core';
+@use 'theming';
+
+@mixin daff-root($theme) {
+	$base: core.daff-map-deep-get($theme, 'core.base');
+	$base-contrast: core.daff-map-deep-get($theme, 'core.base-contrast');
+	$primary: map.get($theme, primary);
+	$secondary: map.get($theme, secondary);
+	$tertiary: map.get($theme, tertiary);
+	$gray: core.daff-map-deep-get($theme, 'core.gray');
+	$white: core.daff-map-deep-get($theme, 'core.white');
+	$black: core.daff-map-deep-get($theme, 'core.black');
+
+	--daff-theme-rgb: #{red($base), green($base), blue($base)};
+	--daff-theme-contrast-rgb: #{red($base-contrast), green($base-contrast),
+		blue($base-contrast)};
+	--daff-theme: #{$base};
+	--daff-theme-contrast: #{$base-contrast};
+	--daff-theme-primary: #{theming.daff-color($primary)};
+	--daff-theme-secondary: #{theming.daff-color($secondary)};
+	--daff-theme-tertiary: #{theming.daff-color($tertiary)};
+	--daff-theme-warn: #{theming.daff-color(theming.$daff-bronze, 60)};
+	--daff-theme-success: #{theming.daff-color(theming.$daff-green, 60)};
+	--daff-theme-danger: #{theming.daff-color(theming.$daff-red, 60)};
+	--daff-theme-white: #{$white};
+	--daff-theme-black: #{$black};
+	--daff-theme-gray: #{theming.daff-color($gray)};
+}
+
+@mixin daff-theme-css-variables($theme, $asRoot: true) {
+	// @docs
+	//
+	// Global theming css variables
+	@if ($asRoot) {
+		:root {
+			@include daff-root($theme);
+		}
+		else {
+			@include daff-root($theme);
+		}
+	}
+}

package/scss/theming/contrast/_index.scss

@@ -0,0 +1,5 @@
+// Entrypoint for Contrast Features
+
+@forward 'luminance/luminance';
+@forward 'contrast-ratio/contrast-ratio';
+@forward 'text-contrast/text-contrast';

package/scss/theming/contrast/contrast-ratio/contrast-ratio.scss

@@ -0,0 +1,11 @@
+@use 'sass:math';
+@use '../luminance/luminance';
+
+// Calculate the contrast ratio between two colors.
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+@function daff-contrast-ratio($back, $front) {
+	$back-lum: luminance.daff-luminance($back) + 0.05;
+	$fore-lum: luminance.daff-luminance($front) + 0.05;
+
+	@return math.div(max($back-lum, $fore-lum), min($back-lum, $fore-lum));
+}

package/scss/theming/contrast/luminance/_variables.scss

@@ -0,0 +1,268 @@
+//  Precomputed linear color channel values, for use in contrast calculations.
+//  See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+//
+//  Algorithm, for c in 0 to 255:
+//  f(c) {
+//    c = c / 255;
+//    return c < 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+//  }
+//
+//  This lookup table is needed since there is no `pow` in SASS.
+$linear-channel-values: (
+	0,
+	0.0003035269835488375,
+	0.000607053967097675,
+	0.0009105809506465125,
+	0.00121410793419535,
+	0.0015176349177441874,
+	0.001821161901293025,
+	0.0021246888848418626,
+	0.0024282158683907,
+	0.0027317428519395373,
+	0.003035269835488375,
+	0.003346535763899161,
+	0.003676507324047436,
+	0.004024717018496307,
+	0.004391442037410293,
+	0.004776953480693729,
+	0.005181516702338386,
+	0.005605391624202723,
+	0.006048833022857054,
+	0.006512090792594475,
+	0.006995410187265387,
+	0.007499032043226175,
+	0.008023192985384994,
+	0.008568125618069307,
+	0.009134058702220787,
+	0.00972121732023785,
+	0.010329823029626936,
+	0.010960094006488246,
+	0.011612245179743885,
+	0.012286488356915872,
+	0.012983032342173012,
+	0.013702083047289686,
+	0.014443843596092545,
+	0.01520851442291271,
+	0.01599629336550963,
+	0.016807375752887384,
+	0.017641954488384078,
+	0.018500220128379697,
+	0.019382360956935723,
+	0.0202885630566524,
+	0.021219010376003555,
+	0.022173884793387385,
+	0.02315336617811041,
+	0.024157632448504756,
+	0.02518685962736163,
+	0.026241221894849898,
+	0.027320891639074894,
+	0.028426039504420793,
+	0.0295568344378088,
+	0.030713443732993635,
+	0.03189603307301153,
+	0.033104766570885055,
+	0.03433980680868217,
+	0.03560131487502034,
+	0.03688945040110004,
+	0.0382043715953465,
+	0.03954623527673284,
+	0.04091519690685319,
+	0.042311410620809675,
+	0.043735029256973465,
+	0.04518620438567554,
+	0.046665086336880095,
+	0.04817182422688942,
+	0.04970656598412723,
+	0.05126945837404324,
+	0.052860647023180246,
+	0.05448027644244237,
+	0.05612849004960009,
+	0.05780543019106723,
+	0.0595112381629812,
+	0.06124605423161761,
+	0.06301001765316767,
+	0.06480326669290577,
+	0.06662593864377289,
+	0.06847816984440017,
+	0.07036009569659588,
+	0.07227185068231748,
+	0.07421356838014963,
+	0.07618538148130785,
+	0.07818742180518633,
+	0.08021982031446832,
+	0.0822827071298148,
+	0.08437621154414882,
+	0.08650046203654976,
+	0.08865558628577294,
+	0.09084171118340768,
+	0.09305896284668745,
+	0.0953074666309647,
+	0.09758734714186246,
+	0.09989872824711389,
+	0.10224173308810132,
+	0.10461648409110419,
+	0.10702310297826761,
+	0.10946171077829933,
+	0.1119324278369056,
+	0.11443537382697373,
+	0.11697066775851084,
+	0.11953842798834562,
+	0.12213877222960187,
+	0.12477181756095049,
+	0.12743768043564743,
+	0.1301364766903643,
+	0.13286832155381798,
+	0.13563332965520566,
+	0.13843161503245183,
+	0.14126329114027164,
+	0.14412847085805777,
+	0.14702726649759498,
+	0.14995978981060856,
+	0.15292615199615017,
+	0.1559264637078274,
+	0.1589608350608804,
+	0.162029375639111,
+	0.1651321945016676,
+	0.16826940018969075,
+	0.1714411007328226,
+	0.17464740365558504,
+	0.17788841598362912,
+	0.18116424424986022,
+	0.184474994500441,
+	0.18782077230067787,
+	0.19120168274079138,
+	0.1946178304415758,
+	0.19806931955994886,
+	0.20155625379439707,
+	0.20507873639031693,
+	0.20863687014525575,
+	0.21223075741405523,
+	0.21586050011389926,
+	0.2195261997292692,
+	0.2232279573168085,
+	0.22696587351009836,
+	0.23074004852434915,
+	0.23455058216100522,
+	0.238397573812271,
+	0.24228112246555486,
+	0.24620132670783548,
+	0.25015828472995344,
+	0.25415209433082675,
+	0.2581828529215958,
+	0.26225065752969623,
+	0.26635560480286247,
+	0.2704977910130658,
+	0.27467731206038465,
+	0.2788942634768104,
+	0.2831487404299921,
+	0.2874408377269175,
+	0.29177064981753587,
+	0.2961382707983211,
+	0.3005437944157765,
+	0.3049873140698863,
+	0.30946892281750854,
+	0.31398871337571754,
+	0.31854677812509186,
+	0.32314320911295075,
+	0.3277780980565422,
+	0.33245153634617935,
+	0.33716361504833037,
+	0.3419144249086609,
+	0.3467040563550296,
+	0.35153259950043936,
+	0.3564001441459435,
+	0.3613067797835095,
+	0.3662525955988395,
+	0.3712376804741491,
+	0.3762621229909065,
+	0.38132601143253014,
+	0.386429433787049,
+	0.39157247774972326,
+	0.39675523072562685,
+	0.4019777798321958,
+	0.4072402119017367,
+	0.41254261348390375,
+	0.4178850708481375,
+	0.4232676699860717,
+	0.4286904966139066,
+	0.43415363617474895,
+	0.4396571738409188,
+	0.44520119451622786,
+	0.45078578283822346,
+	0.45641102318040466,
+	0.4620769996544071,
+	0.467783796112159,
+	0.47353149614800955,
+	0.4793201831008268,
+	0.4851499400560704,
+	0.4910208498478356,
+	0.4969329950608704,
+	0.5028864580325687,
+	0.5088813208549338,
+	0.5149176653765214,
+	0.5209955732043543,
+	0.5271151257058131,
+	0.5332764040105052,
+	0.5394794890121072,
+	0.5457244613701866,
+	0.5520114015120001,
+	0.5583403896342679,
+	0.5647115057049292,
+	0.5711248294648731,
+	0.5775804404296506,
+	0.5840784178911641,
+	0.5906188409193369,
+	0.5972017883637634,
+	0.6038273388553378,
+	0.6104955708078648,
+	0.6172065624196511,
+	0.6239603916750761,
+	0.6307571363461468,
+	0.6375968739940326,
+	0.6444796819705821,
+	0.6514056374198242,
+	0.6583748172794485,
+	0.665387298282272,
+	0.6724431569576875,
+	0.6795424696330938,
+	0.6866853124353135,
+	0.6938717612919899,
+	0.7011018919329731,
+	0.7083757798916868,
+	0.7156935005064807,
+	0.7230551289219693,
+	0.7304607400903537,
+	0.7379104087727308,
+	0.7454042095403874,
+	0.7529422167760779,
+	0.7605245046752924,
+	0.768151147247507,
+	0.7758222183174236,
+	0.7835377915261935,
+	0.7912979403326302,
+	0.799102738014409,
+	0.8069522576692516,
+	0.8148465722161012,
+	0.8227857543962835,
+	0.8307698767746546,
+	0.83879901174074,
+	0.846873231509858,
+	0.8549926081242338,
+	0.8631572134541023,
+	0.8713671191987972,
+	0.8796223968878317,
+	0.8879231178819663,
+	0.8962693533742664,
+	0.9046611743911496,
+	0.9130986517934192,
+	0.9215818562772946,
+	0.9301108583754237,
+	0.938685728457888,
+	0.9473065367331999,
+	0.9559733532492861,
+	0.9646862478944651,
+	0.9734452903984125,
+	0.9822505503331171,
+	0.9911020971138298,
+	1
+);

package/scss/theming/contrast/luminance/luminance.scss

@@ -0,0 +1,19 @@
+@use 'variables' as v;
+
+// Calculate the luminance of a color.
+// Luminance is defined as a decimal value between 0 and 1
+// with "0" corresponding to "no brightness"
+// and "1" corresponding to "full brightness".
+//
+// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+
+@function daff-luminance($color) {
+	$red-index: red($color) + 1;
+	$green-index: green($color) + 1;
+	$blue-index: blue($color) + 1;
+
+	$red: nth(v.$linear-channel-values, $red-index);
+	$green: nth(v.$linear-channel-values, $green-index);
+	$blue: nth(v.$linear-channel-values, $blue-index);
+	@return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
+}

package/scss/theming/contrast/luminance/luminance.spec.scss

@@ -0,0 +1,24 @@
+@use 'true' as *;
+@use 'luminance';
+
+@include describe('luminance') {
+	@include it('should return 0 for black') {
+		@include assert-equal(luminance.daff-luminance(#000000), 0);
+	}
+
+	@include it('should return 1 for white') {
+		@include assert-equal(luminance.daff-luminance(#fff), 1);
+	}
+
+	@include it('should return 0.2126 for pure red') {
+		@include assert-equal(luminance.daff-luminance(#ff0000), 0.2126);
+	}
+
+	@include it('should return 0.7152 for pure green') {
+		@include assert-equal(luminance.daff-luminance(#00ff00), 0.7152);
+	}
+
+	@include it('should return 0.0722 for pure blue') {
+		@include assert-equal(luminance.daff-luminance(#0000ff), 0.0722);
+	}
+}

package/scss/theming/contrast/text-contrast/text-contrast.scss

@@ -0,0 +1,34 @@
+@use '../contrast-ratio/contrast-ratio' as cr;
+@use '../../get-color';
+@use '../../color-palettes' as palette;
+
+// @docs
+//
+// Given a color, get the font color that would be
+// easily visible on top of that color
+//
+// For an interesting read, see more about the topic:
+// https://robots.thoughtbot.com/closer-look-color-lightness
+//
+// Based on the code outlined by Sergio Gomes here:
+// https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
+//
+// @usage
+// ```
+// daff-text-contrast("#777777")
+// ```
+@function daff-text-contrast(
+	$color,
+	$black: get-color.daff-color(palette.$daff-gray, 110),
+	$white: palette.$daff-white
+) {
+	$light-contrast: cr.daff-contrast-ratio($color, $white);
+	$dark-contrast: cr.daff-contrast-ratio($color, $black);
+
+	@if ($light-contrast > $dark-contrast) {
+		@return $white;
+	}
+	@else {
+		@return $black;
+	}
+}

package/scss/theming/illuminate/illuminate.scss

@@ -0,0 +1,145 @@
+@use 'sass:map';
+@use '../contrast/luminance/luminance';
+
+// @docs
+// Take a numeric map and sort it.
+//
+// https://gist.github.com/Jakobud/a0ac11e80a1de453cd86f0d3fc0a1410
+// Credit to: https://gist.github.com/iamandrewluca
+//
+@function _daff-illuminate-sort($map) {
+	// Transform map to zipped list
+	$keys: ();
+	$values: ();
+
+	@each $key, $val in $map {
+		$keys: append($keys, $key);
+		$values: append($values, $val);
+	}
+
+	$list: zip($keys, $values);
+
+	$sorted-map: ();
+
+	@while length($list) > 0 {
+		// Find smallest pair
+		$smallest-pair: nth($list, 1);
+
+		@each $pair in $list {
+			$value: nth($pair, 2);
+			$smallest-value: nth($smallest-pair, 2);
+
+			@if $value < $smallest-value {
+				$smallest-pair: $pair;
+			}
+		}
+
+		// Add smallest pair to sorted map
+		$key: nth($smallest-pair, 1);
+		$value: nth($smallest-pair, 2);
+		$sorted-map: map.merge(
+			$sorted-map,
+			(
+				$key: $value
+			)
+		);
+
+		// Remove from list smallest pair
+		$smallest-pair-index: index($list, $smallest-pair);
+		$new-list: ();
+
+		@for $i from 1 through length($list) {
+			@if $i != $smallest-pair-index {
+				$new-list: append($new-list, nth($list, $i), 'space');
+			}
+		}
+
+		$list: $new-list;
+	}
+
+	@return $sorted-map;
+}
+
+// Given a map of key, luminance pairs, find the key
+// of the value that is "nth" away from zero.
+//
+// @param $map: a map of key, luminance pairs,
+// @param $nth: nth steps away from zero
+@function _daff-illuminate-get-key($map, $nth: 1) {
+	//Cap off "nth" to prevent going out-of-bounds.
+	@if ($nth > length($map)) {
+		$nth: length(map);
+	}
+
+	$map: _daff-illuminate-sort($map);
+	@return nth(nth($map, $nth), 1);
+}
+
+// Takes a $color and palette and returns the color in
+// the palette which would "illuminate" against that color.
+//
+// @usage
+// ```
+// daff-illuminate($palette);
+// ```
+//
+@function daff-illuminate($color, $palette, $nth: 1) {
+	$luminance-map: ();
+
+	//Validate
+	@each $key, $palette-color in $palette {
+		@if (type-of($key) == 'string') {
+			$palette: map.remove($palette, $key);
+		}
+	}
+
+	//Transform into usable values
+	@each $key, $palette-color in $palette {
+		$luminance-map: map.merge(
+			$luminance-map,
+			(
+				$key: (
+					luminance.daff-luminance($palette-color) - luminance.daff-luminance($color)
+				)
+			)
+		);
+	}
+
+
+	//Calculate which color to get
+	$brighter-colors: ();
+	$darker-colors: ();
+
+	@each $key, $luminance in $luminance-map {
+		@if ($luminance > 0) {
+			$brighter-colors: map.merge(
+				$brighter-colors,
+				(
+					$key: $luminance
+				)
+			);
+		}
+
+		@if ($luminance < 0) {
+			$darker-colors: map.merge(
+				$darker-colors,
+				(
+					$key: abs($luminance)
+				)
+			);
+		}
+	}
+
+	$key: null;
+
+	@if (luminance.daff-luminance($color) >= 0.5) {
+		//If the color is bright
+		$key: _daff-illuminate-get-key($darker-colors, $nth);
+	}
+	@else {
+		//If the color is dark
+		$key: _daff-illuminate-get-key($brighter-colors, $nth);
+	}
+
+	@return map.get($palette, $key);
+}

package/scss/theming/illuminate/illuminate.spec.scss

@@ -0,0 +1,15 @@
+@use 'true' as *;
+
+@include describe('illuminate') {
+	//stylelint-disable
+	@include it('should return a lighter color if the color is dark') {
+
+	}
+	@include it('should return a darker color if the color is light') {
+
+	}
+	@include it('should return the expected color for given scenarios') {
+
+	}
+	//stylelint-enable
+}