@daffodil/design 0.90.0 → 0.91.0

package/scss/theming/_color-palettes.scss

@@ -1,10 +1,17 @@
+////
+/// @group color-palettes
+////
+
 // Base colors
-$daff-white: #ffffff;
+/// @access private
+$white: #ffffff;
+/// @access private
+$black: #070707;
+// need to deprecate
+/// @access private
 $error: #dd0000;
 
-// 60 apart passes AAA level for any size text (except for 10/70)
-// 50 apart passes AA level for any size text (except for 10/60)
-
+/// @access private
 $daff-blue: (
 	10: #ebf1ff,
 	20: #c4d8ff,
@@ -18,8 +25,10 @@ $daff-blue: (
 	100: #000033
 );
 
+/// @access private
 $daff-primary: $daff-blue;
 
+/// @access private
 $daff-purple: (
 	10: #ebebff,
 	20: #d4d3ff,
@@ -33,8 +42,10 @@ $daff-purple: (
 	100: #110033
 );
 
+/// @access private
 $daff-accent: $daff-purple;
 
+/// @access private
 $daff-turquoise: (
 	10: #d6fcea,
 	20: #9dfbd3,
@@ -48,6 +59,7 @@ $daff-turquoise: (
 	100: #082218
 );
 
+/// @access private
 $daff-yellow: (
 	10: #fffaeb,
 	20: #fff1c2,
@@ -61,6 +73,7 @@ $daff-yellow: (
 	100: #7a5e00
 );
 
+/// @access private
 $daff-red: (
 	10: #fcf1f1,
 	20: #fae0e0,
@@ -74,6 +87,7 @@ $daff-red: (
 	100: #3f0809,
 );
 
+/// @access private
 $daff-bronze: (
 	10: #fcf2eb,
 	20: #f7dac6,
@@ -87,6 +101,7 @@ $daff-bronze: (
 	100: #1a0f00,
 );
 
+/// @access private
 $daff-green: (
 	10: #d1fbd6,
 	20: #97f8a5,
@@ -100,8 +115,8 @@ $daff-green: (
 	100: #07230d,
 );
 
+/// @access private
 $daff-neutral: (
-	0: #ffffff,
 	10: #fafafa,
 	20: #e8e8e8,
 	30: #d3d3d3,
@@ -111,6 +126,5 @@ $daff-neutral: (
 	70: #5e5e5e,
 	80: #474747,
 	90: #323232,
-	100: #1a1a1a,
-	110: #070707
+	100: #1a1a1a
 );

package/scss/theming/_configure-theme.scss

@@ -5,21 +5,21 @@
 
 $daff-light-theme: (
 	'mode': 'light',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 110),
-	'base': get-color.daff-color(palette.$daff-neutral, 0),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 110),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$black,
+	'base': palette.$white,
+	'base-contrast': palette.$black,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 60),
 );
 
 $daff-dark-theme: (
 	'mode': 'dark',
-	'font-color': get-color.daff-color(palette.$daff-neutral, 0),
-	'base': get-color.daff-color(palette.$daff-neutral, 100),
-	'base-contrast': get-color.daff-color(palette.$daff-neutral, 0),
-	'white': get-color.daff-color(palette.$daff-neutral, 0),
-	'black': get-color.daff-color(palette.$daff-neutral, 110),
+	'font-color': palette.$white,
+	'base': palette.$black,
+	'base-contrast': palette.$white,
+	'white': palette.$white,
+	'black': palette.$black,
 	'neutral': configure-palette.daff-configure-palette(palette.$daff-neutral, 50),
 );
 
@@ -28,6 +28,7 @@ $supported-theme-modes: (
 	'dark': $daff-dark-theme
 );
 
+/// @deprecated Use `daff-create-theme` instead.
 /// Create a theme object given some initial settings.
 ///
 /// Sets light and dark mode defaults for `$info`, `$warn`, `$critical`, and `$success`

package/scss/theming/_daff-theme.scss

@@ -1,5 +1,5 @@
 @use 'configure-palette';
-@use 'configure-theme';
+@use './create-theme/create-theme';
 @use 'color-palettes' as palette;
 @use '../core';
 
@@ -7,23 +7,14 @@ $primary: configure-palette.daff-configure-palette(palette.$daff-blue, 60);
 $secondary: configure-palette.daff-configure-palette(palette.$daff-purple, 60);
 $tertiary: configure-palette.daff-configure-palette(palette.$daff-turquoise, 60);
 
-$theme: configure-theme.daff-configure-theme(
-	$primary,
-	$secondary,
-	$tertiary,
-	'light'
+$theme: create-theme.daff-create-theme(
+	('primary': $primary, 'secondary': $secondary, 'tertiary': $tertiary, 'mode': 'light')
 );
 
 $primary-dark: configure-palette.daff-configure-palette(palette.$daff-blue, 50);
 $secondary-dark: configure-palette.daff-configure-palette(palette.$daff-purple, 50);
 $tertiary-dark: configure-palette.daff-configure-palette(palette.$daff-turquoise, 50);
 
-$theme-dark: configure-theme.daff-configure-theme(
-	$primary-dark,
-	$secondary-dark,
-	$tertiary-dark,
-	'dark'
+$theme-dark: create-theme.daff-create-theme(
+	('primary': $primary-dark, 'secondary': $secondary-dark, 'tertiary': $tertiary-dark, 'mode': 'dark')
 );
-
-$black: core.daff-map-get($theme, 'core', 'black');
-$white: core.daff-map-get($theme, 'core', 'white');

package/scss/theming/_get-base-color.scss

@@ -3,13 +3,13 @@
 /// Retrieves a core base color from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with the `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with the `daff-create-theme` function.
 /// @param {String} $color — The core color to retrieve. Supported colors: `white`, `black`, `base`, or `base-contrast`.
 ///
 /// @throws Will throw an error if `$color` is not supported as part of Daffodil's core colors.

package/scss/theming/_get-palette.scss

@@ -3,13 +3,13 @@
 /// Retrieves a specific color palette from a configured theme.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with with `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with with `daff-create-theme` function.
 /// @param {Map} $palette — The palette being retrieved.
 /// Supported values: `primary`, `secondary`, `tertiary`, `informational`, `warn`, `critical`, `success`, or `neutral`.
 ///

package/scss/theming/_get-theme-mode.scss

@@ -1,17 +1,17 @@
 @use '../core/map/map-get/map-get';
 
-/// Retrieves the mode (`light` or `dark`) from a configured theme created with `daff-configure-theme`.
+/// Retrieves the mode (`light` or `dark`) from a configured theme created with `daff-create-theme`.
 /// It should only be used if your app supports **both light and dark themes**.
 ///
 /// If you are not using Daffodil's default theme, a theme **must** be
-/// created with `daff-configure-theme` before this function can be used.
+/// created with `daff-create-theme` before this function can be used.
 ///
 /// See the [customize your own theme](daff.io/docs/design/theming/customize-your-own-theme)
 /// guide for more information.
 ///
 /// @group Theming
 ///
-/// @param {Map} $theme — A theme map created with the `daff-configure-theme` function.
+/// @param {Map} $theme — A theme map created with the `daff-create-theme` function.
 ///
 /// @example scss
 /// 	@use '@daffodil/design/scss/theme' as daff-theme;

package/scss/theming/_index.scss

@@ -3,9 +3,10 @@
 @forward 'contrast';
 @forward 'illuminate/illuminate';
 @forward 'configure-palette';
-@forward 'configure-theme';
+@forward 'create-theme/create-theme';
 @forward 'light-dark';
 @forward 'daff-theme';
 @forward 'get-palette';
 @forward 'get-base-color';
 @forward 'get-theme-mode';
+@forward 'configure-theme' show daff-configure-theme;

package/scss/theming/contrast/max-contrast/max-contrast.scss

@@ -12,9 +12,9 @@
 /// @return {Color} The color with the highest contrast ratio between the reference color and the color list
 ///
 /// @example scss
-/// 	.body {
-/// 		background: daff-color($neutral, 10);
-/// 		color: daff-max-contrast(daff-color($neutral, 10), (daff-color($primary, 20), daff-color($secondary, 40)));
+/// 	.card {
+/// 		background: daff-color($primary, 30);
+/// 		border-color: daff-max-contrast(daff-color($primary, 30), (daff-color($secondary, 70), daff-color($accent, 50)));
 /// 	}
 ///
 @function daff-max-contrast(

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

@@ -1,14 +1,17 @@
-@use '../contrast-ratio/contrast-ratio' as cr;
+@use 'sass:list';
+@use '../max-contrast/max-contrast' as mc;
+@use '../../get-font-colors/get-font-colors' as fc;
 @use '../../get-color';
 @use '../../color-palettes' as palette;
 
 /// Determines the color to use against the initial given color.
 /// It returns the one that provides the higher contrast, ensuring better readability.
-/// By default, the function tests against `$black` (#000`, and `$white` (#fff).
 ///
 /// @group Theming
 ///
-/// @param {Color} $color — The color to test against.
+/// @param {Color} $reference-color — The color to test against.
+/// @param {Map} $theme — Optional. The theme map to pull `$black` and `$white` from.
+/// @return {Color} Either `$black` or `$white`, whichever has the highest contrast ratio against the reference color.
 ///
 /// For an interesting read, see more about the topic:
 /// https:///robots.thoughtbot.com/closer-look-color-lightness
@@ -17,22 +20,25 @@
 /// [Sergio Gomes](https://sgom.es/posts/2016-12-21-using-sass-to-automatically-pick-text-colors/).
 ///
 /// @example scss
-/// 	.heading {
-/// 		color: daff-text-contrast(#000);
+/// 	.body {
+/// 		background: daff-color($primary, 80);
+/// 		color: daff-text-contrast(daff-color($primary, 80), $theme);
+/// 	}
+/// @example scss
+/// 	.body {
+/// 		background: daff-color($primary, 80);
+/// 		color: daff-text-contrast(daff-color($primary, 80));
 /// 	}
 ///
 @function daff-text-contrast(
-	$color,
-	$black: get-color.daff-color(palette.$daff-neutral, 110),
-	$white: palette.$daff-white
+	$reference-color,
+	$theme: null
 ) {
-	$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;
+	@if ($theme == null) {
+		$default-black: palette.$black;
+		$default-white: palette.$white;
+		@return mc.daff-max-contrast($reference-color, ($default-black, $default-white));
 	}
+	$theme-font-colors: fc.daff-get-font-colors($theme);
+	@return mc.daff-max-contrast($reference-color, $theme-font-colors);
 }

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

@@ -0,0 +1,57 @@
+@use 'true' as *;
+@use './text-contrast' as *;
+@use '../../get-color';
+@use '../../color-palettes' as palette;
+@use '../../configure-palette';
+@use '../../create-theme/create-theme' as ct;
+
+@include describe('daff-text-contrast') {
+	$light-theme: ct.daff-create-theme(
+		('mode': 'light',
+		'primary': configure-palette.daff-configure-palette(palette.$daff-blue, 60),
+		'secondary': configure-palette.daff-configure-palette(palette.$daff-purple, 60),
+		'tertiary': configure-palette.daff-configure-palette(palette.$daff-turquoise, 60))
+	);
+	$dark-theme: ct.daff-create-theme(
+		('mode': 'dark',
+		'primary': configure-palette.daff-configure-palette(palette.$daff-blue, 60),
+		'secondary': configure-palette.daff-configure-palette(palette.$daff-purple, 60),
+		'tertiary': configure-palette.daff-configure-palette(palette.$daff-turquoise, 60))
+	);
+	$white: palette.$white;
+	$black: palette.$black;
+	$dark-gray: get-color.daff-color(palette.$daff-neutral, 80);
+	$light-gray: get-color.daff-color(palette.$daff-neutral, 20);
+	$blue: get-color.daff-color(palette.$daff-blue, 60);
+	$yellow: get-color.daff-color(palette.$daff-yellow, 60);
+
+	@include it('returns white for dark reference colors in light theme') {
+		@include assert-equal(daff-text-contrast($black, $light-theme), $white);
+		@include assert-equal(daff-text-contrast($dark-gray, $light-theme), $white);
+		@include assert-equal(daff-text-contrast($blue, $light-theme), $white);
+	}
+
+	@include it('returns black for light reference colors in light theme') {
+		@include assert-equal(daff-text-contrast($white, $light-theme), $black);
+		@include assert-equal(daff-text-contrast($light-gray, $light-theme), $black);
+		@include assert-equal(daff-text-contrast($yellow, $light-theme), $black);
+	}
+
+	@include it('returns white for dark reference colors in dark theme') {
+		@include assert-equal(daff-text-contrast($black, $dark-theme), $white);
+		@include assert-equal(daff-text-contrast($dark-gray, $dark-theme), $white);
+		@include assert-equal(daff-text-contrast($blue, $dark-theme), $white);
+	}
+
+	@include it('returns black for light reference colors in dark theme') {
+		@include assert-equal(daff-text-contrast($white, $dark-theme), $black);
+		@include assert-equal(daff-text-contrast($light-gray, $dark-theme), $black);
+		@include assert-equal(daff-text-contrast($yellow, $dark-theme), $black);
+	}
+
+	@include it('returns a text color given only a reference color but no theme') {
+		@include assert-equal(daff-text-contrast($black), $white);
+		@include assert-equal(daff-text-contrast($dark-gray), $white);
+		@include assert-equal(daff-text-contrast($light-gray), $black);
+	}
+}