@bethinkpl/design-system 37.1.0 → 38.0.0

package/lib/js/components/Buttons/IconButton/IconButton.spec.ts

@@ -0,0 +1,107 @@
+import { afterEach, describe, expect, it, test } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+import IconButton from './IconButton.vue';
+import {
+	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
+	ICON_BUTTON_STATES,
+	ICON_BUTTON_TYPES,
+} from './IconButton.consts';
+import Button, { BUTTON_TYPES } from '../Button';
+import Icon, { ICONS } from '../../Icons/Icon';
+import { GRADIENT_MAGIC_ICON_ID } from '../Button/useMagicGradient';
+
+describe('IconButton', () => {
+	const createComponent = (props = {} as any) => {
+		return mount(IconButton, {
+			props: {
+				icon: ICONS.FA_XMARK,
+				...props,
+			},
+		});
+	};
+
+	it('should create', () => {
+		const component = createComponent();
+
+		expect(component.exists()).toBe(true);
+	});
+
+	test.each([
+		[{ props: { size: ICON_BUTTON_SIZES.X_SMALL }, expectedClass: '-ds-x-small' }],
+		[{ props: { size: ICON_BUTTON_SIZES.SMALL }, expectedClass: '-ds-small' }],
+		[{ props: { size: ICON_BUTTON_SIZES.LARGE }, expectedClass: '-ds-large' }],
+		[{ props: { state: ICON_BUTTON_STATES.HOVERED }, expectedClass: '-ds-hovered' }],
+		[{ props: { state: ICON_BUTTON_STATES.FOCUSED }, expectedClass: '-ds-focused' }],
+		[{ props: { state: ICON_BUTTON_STATES.DISABLED }, expectedClass: '-ds-disabled' }],
+		[{ props: { state: ICON_BUTTON_STATES.LOADING }, expectedClass: '-ds-loading' }],
+		[{ props: { color: ICON_BUTTON_COLORS.PRIMARY }, expectedClass: '-ds-color-primary' }],
+		[{ props: { color: ICON_BUTTON_COLORS.MAGIC }, expectedClass: '-ds-color-magic' }],
+	])('correct class for props', ({ props, expectedClass }) => {
+		const component = createComponent(props);
+		expect(component.classes()).toContain(expectedClass);
+	});
+
+	it('renders the icon', () => {
+		const component = createComponent({ icon: ICONS.FA_CLOCK });
+
+		const icon = component.findComponent<typeof Icon>('.ds-iconButton__icon');
+		expect(icon.exists()).toBe(true);
+		expect(icon.props().icon).toEqual(ICONS.FA_CLOCK);
+	});
+
+	it('renders the spinner icon when loading', () => {
+		const component = createComponent({ state: ICON_BUTTON_STATES.LOADING });
+
+		const icon = component.findComponent<typeof Icon>('.ds-iconButton__icon');
+		expect(icon.props().icon).toEqual(ICONS.FAD_SPINNER_THIRD);
+		expect(icon.props().spinning).toBe(true);
+	});
+
+	test.each([
+		[{ type: ICON_BUTTON_TYPES.ICON_ONLY, expectedButtonType: BUTTON_TYPES.OUTLINED }],
+		[{ type: ICON_BUTTON_TYPES.OUTLINED, expectedButtonType: BUTTON_TYPES.OUTLINED }],
+		[{ type: ICON_BUTTON_TYPES.FILLED, expectedButtonType: BUTTON_TYPES.FILLED }],
+	])('maps type to inner button type', ({ type, expectedButtonType }) => {
+		const component = createComponent({ type });
+
+		const button = component.findComponent<typeof Button>('.ds-iconButton__button');
+		expect(button.props().type).toBe(expectedButtonType);
+	});
+
+	it('marks the inner button as icon-only for the icon-only type', () => {
+		const component = createComponent({ type: ICON_BUTTON_TYPES.ICON_ONLY });
+
+		const button = component.findComponent<typeof Button>('.ds-iconButton__button');
+		expect(button.classes()).toContain('-ds-iconOnly');
+	});
+
+	describe('magic color', () => {
+		afterEach(() => {
+			document.getElementById(GRADIENT_MAGIC_ICON_ID)?.remove();
+		});
+
+		it('passes the magic color through to the inner button', () => {
+			const component = createComponent({
+				color: ICON_BUTTON_COLORS.MAGIC,
+				type: ICON_BUTTON_TYPES.OUTLINED,
+			});
+
+			const button = component.findComponent<typeof Button>('.ds-iconButton__button');
+			expect(button.props().color).toBe(ICON_BUTTON_COLORS.MAGIC);
+		});
+
+		it('injects the shared gradient paint server into the document when color is magic', () => {
+			createComponent({ color: ICON_BUTTON_COLORS.MAGIC });
+
+			expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).not.toBeNull();
+		});
+
+		it('does not inject the gradient paint server for non-magic colors', () => {
+			createComponent({ color: ICON_BUTTON_COLORS.PRIMARY });
+
+			expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).toBeNull();
+		});
+	});
+});

package/lib/js/components/Buttons/IconButton/IconButton.stories.ts

@@ -45,7 +45,11 @@ const StoryTemplate: StoryFn<typeof IconButton> = (args) => ({
 		:elevation="elevation"
 		:color="color"
 		:state="state"
-	><span v-if="label !== ''">{{label}}</span></icon-button>
+	>
+		<template v-if="label !== ''" #default>
+			<span>{{label}}</span>
+		</template>
+	</icon-button>
 	</div>`,
 });
 

package/lib/js/components/Buttons/IconButton/IconButton.vue

@@ -36,13 +36,10 @@
 			class="ds-iconButton__button"
 			:class="{
 				'-ds-iconOnly': type === ICON_BUTTON_TYPES.ICON_ONLY,
-				'-ds-hovered': state === ICON_BUTTON_STATES.HOVERED,
-				'-ds-focused': state === ICON_BUTTON_STATES.FOCUSED,
-				'-ds-disabled': state === ICON_BUTTON_STATES.DISABLED,
 			}"
 			:radius="radius"
 			:type="buttonType"
-			:state="isHovered ? ICON_BUTTON_STATES.HOVERED : ICON_BUTTON_STATES.DEFAULT"
+			:state="ICON_BUTTON_STATE_MAP[state]"
 			:elevation="elevation"
 			:color="isButtonColor ? color : null"
 		>
@@ -61,6 +58,7 @@
 <style lang="scss" scoped>
 @import '../../../../styles/settings/animations';
 @import '../../../../styles/settings/buttons';
+@import '../../../../styles/settings/gradients';
 @import '../../../../styles/settings/icons';
 @import '../../../../styles/settings/media-queries';
 @import '../../../../styles/settings/spacings';
@@ -140,7 +138,8 @@
 	transition: color ease-in-out $default-transition-time;
 
 	&:disabled,
-	&.-ds-disabled {
+	&.-ds-disabled,
+	&.-ds-loading {
 		pointer-events: none;
 	}
 
@@ -148,6 +147,14 @@
 		color: map-get($icon-button-colors, 'theme', 'hovered');
 	}
 
+	&.-ds-color-magic {
+		#{$self}__icon {
+			:deep(svg path) {
+				fill: var(--ds-magic-fill, currentColor);
+			}
+		}
+	}
+
 	// Doubled class selector increases specificity to ensure icon button styles never get overridden by .ds-button base styles
 	#{$self}__button#{$self}__button {
 		height: $icon-button-medium-size;
@@ -158,6 +165,27 @@
 
 		&.-ds-iconOnly.-ds-outlined {
 			border: none;
+
+			&.-ds-color-magic {
+				background: none;
+
+				&.-ds-hovered,
+				&:hover,
+				&.-ds-active,
+				&:active {
+					background: $gradient-magic-background-ghost-hovered;
+				}
+
+				&.-ds-focused,
+				&:focus {
+					background: $gradient-magic-background-ghost-focused;
+				}
+
+				// no glow (blurred gradient shadow) in iconOnly magic IconButton
+				&::after {
+					display: none;
+				}
+			}
 		}
 	}
 
@@ -266,9 +294,11 @@ import WnlButton, {
 	BUTTON_COLORS,
 	BUTTON_ELEVATIONS,
 	BUTTON_RADIUSES,
+	BUTTON_STATES,
 	BUTTON_TYPES,
 	ButtonElevation,
 	ButtonRadius,
+	ButtonState,
 } from '../Button';
 import {
 	ICON_BUTTON_COLOR_SCHEMES,
@@ -279,6 +309,7 @@ import {
 	IconButtonColor,
 	IconButtonColorScheme,
 	IconButtonSize,
+	IconButtonState,
 	IconButtonType,
 } from './IconButton.consts';
 import { Value } from '../../../utils/type.utils';
@@ -293,6 +324,14 @@ const ICON_ONLY_ICON_SIZES_MAP = {
 	[ICON_BUTTON_SIZES.LARGE]: ICON_SIZES.MEDIUM,
 } as const;
 
+const ICON_BUTTON_STATE_MAP: Record<IconButtonState, ButtonState> = {
+	[ICON_BUTTON_STATES.DEFAULT]: BUTTON_STATES.DEFAULT,
+	[ICON_BUTTON_STATES.HOVERED]: BUTTON_STATES.HOVERED,
+	[ICON_BUTTON_STATES.FOCUSED]: BUTTON_STATES.FOCUSED,
+	[ICON_BUTTON_STATES.LOADING]: BUTTON_STATES.LOADING,
+	[ICON_BUTTON_STATES.DISABLED]: BUTTON_STATES.DISABLED,
+};
+
 export default defineComponent({
 	name: 'IconButton',
 	components: {
@@ -364,6 +403,7 @@ export default defineComponent({
 	setup() {
 		return {
 			...useHoverState(),
+			ICON_BUTTON_STATE_MAP,
 		};
 	},
 	data() {

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -64,6 +64,11 @@
 
 <style lang="scss">
 @import 'flatpickr/dist/flatpickr';
+
+.-ds-dark {
+	// stylelint-disable-next-line no-invalid-position-at-import-rule -- nested import scopes flatpickr's dark theme under `.-ds-dark`
+	@import 'flatpickr/dist/themes/dark';
+}
 </style>
 
 <style lang="scss" scoped>

package/lib/js/components/DatePickers/DateRangePicker/DateRangePicker.vue

@@ -23,6 +23,11 @@
 
 <style lang="scss">
 @import 'flatpickr/dist/flatpickr';
+
+.-ds-dark {
+	// stylelint-disable-next-line no-invalid-position-at-import-rule -- nested import scopes flatpickr's dark theme under `.-ds-dark`
+	@import 'flatpickr/dist/themes/dark';
+}
 </style>
 
 <style scoped lang="scss">

package/lib/styles/components/_buttons.scss

@@ -2,6 +2,7 @@
 @import '../settings/spacings';
 @import '../settings/radiuses';
 @import '../settings/buttons';
+@import '../settings/gradients';
 @import '../settings/shadows';
 @import '../settings/icons';
 @import '../settings/typography/tokens';
@@ -122,6 +123,25 @@
 	}
 }
 
+// The magic outlined background stack: a solid white fill clipped to `padding-box` over a
+// gradient ring clipped to `border-box`, showing through only in the 1px transparent border.
+// `$tint` adds a faint gradient over the white pill (hover / focus states); `$border` swaps the
+// gradient ring (e.g. the faded disabled variant).
+@mixin setMagicOutlinedBackground($tint: null, $border: $gradient-magic-border-angular) {
+	$fill: linear-gradient($color-default-background, $color-default-background) padding-box;
+
+	@if $tint {
+		background:
+			$tint padding-box,
+			$fill,
+			$border border-box;
+	} @else {
+		background:
+			$fill,
+			$border border-box;
+	}
+}
+
 $button-small-min-height: 28px;
 $button-medium-min-height: 32px;
 $button-large-min-height: 48px;
@@ -201,6 +221,81 @@ $button-disabled-alpha: 0.6;
 		}
 	}
 
+	// `magic` is a gradient color that doesn't fit the flat color maps. Outlined only:
+	// a white fill over a blurred gradient glow.
+	&.-ds-color-magic.-ds-outlined {
+		$magic-glow-spread: 1px;
+
+		// `border-image` can't follow `border-radius`, so the gradient ring is a transparent
+		// border with two background layers: a solid fill clipped to `padding-box` over the
+		// gradient clipped to `border-box`, showing through only in the 1px border gap. The
+		// conic gradient starts and ends on the same color so its wrap-around has no seam.
+		@include setMagicOutlinedBackground;
+
+		border: 1px solid transparent;
+		color: $color-neutral-text;
+
+		#{$self}__icon {
+			color: $color-neutral-icon;
+		}
+
+		#{$self}__loadingIcon {
+			svg path {
+				fill: var(--ds-magic-fill, currentColor);
+			}
+		}
+
+		// Blurred conic gradient creating the glow.
+		&::after {
+			background: $gradient-magic-border-angular;
+			border-radius: inherit;
+			bottom: -$magic-glow-spread;
+			content: '';
+			display: block;
+			filter: blur(4px);
+			left: -$magic-glow-spread;
+			position: absolute;
+			right: -$magic-glow-spread;
+			top: -$magic-glow-spread;
+			transform: translateZ(-1px);
+			z-index: -1;
+		}
+
+		// Hover / pressed add a faint gradient tint over the white pill.
+		&:hover,
+		&.-ds-hovered,
+		&:active,
+		&.-ds-active {
+			// Re-declare the full stack so the gradient ring survives, with the ghost tint
+			// layered on top.
+			@include setMagicOutlinedBackground($tint: $gradient-magic-background-ghost-hovered);
+		}
+
+		// Focused uses its own ghost tint.
+		&:focus,
+		&.-ds-focused {
+			@include setMagicOutlinedBackground($tint: $gradient-magic-background-ghost-focused);
+		}
+
+		// Disabled drops the glow entirely and fades text/icon.
+		&.-ds-disabled,
+		&:disabled {
+			// Keep the gradient ring but drop the hover tint; the glow is removed below.
+			@include setMagicOutlinedBackground($border: $gradient-magic-border-angular-disabled);
+
+			color: $color-neutral-text-disabled;
+
+			#{$self}__icon,
+			#{$self}__loadingIcon {
+				color: $color-neutral-icon-disabled;
+			}
+
+			&::after {
+				display: none;
+			}
+		}
+	}
+
 	&.-ds-large {
 		@include button-l-default-bold-uppercase;
 
@@ -240,7 +335,7 @@ $button-disabled-alpha: 0.6;
 	}
 
 	&:not(.-ds-text) {
-		min-width: 100px;
+		min-width: 80px;
 
 		&.-ds-rounded {
 			border-radius: $radius-s;

package/lib/styles/design-system.scss

@@ -1,6 +1,7 @@
 // Settings
 @import 'settings/animations';
 @import 'settings/buttons';
+@import 'settings/gradients';
 @import 'settings/fonts';
 @import 'settings/icons';
 @import 'settings/media-queries';
@@ -12,6 +13,9 @@
 @import 'settings/colors/raw-wnl';
 @import 'settings/colors/raw-bodywork';
 @import 'settings/colors/raw-mc';
+@import 'settings/colors/raw-wnl-dark';
+@import 'settings/colors/raw-bodywork-dark';
+@import 'settings/colors/raw-mc-dark';
 @import 'settings/typography/variables-css';
 
 // Mixins
@@ -32,6 +36,9 @@
 @import 'settings/colors/tokens-wnl-variables';
 @import 'settings/colors/tokens-bodywork-variables';
 @import 'settings/colors/tokens-mc-variables';
+@import 'settings/colors/tokens-variables-dark';
+@import 'settings/colors/magic-variables';
+@import 'settings/gradients-variables';
 
 html,
 body {
@@ -50,13 +57,12 @@ textarea {
 
 html.-ds-thick-scrollbar {
 	@media #{breakpoint-m()} {
-		@include scrollbar(15px, var(--raw-gray-100));
+		@include scrollbar(15px, var(--color-neutral-background-hovered));
 	}
 }
 
 html {
-	// Scrollbars
-	@include scrollbar(2px, var(--raw-gray-100));
+	@include scrollbar(2px, var(--color-neutral-background-hovered));
 
 	box-sizing: border-box;
 	overflow-y: auto; // Without this style, we always display a scrollbar that covers the scrollbar in a container that is full-width. eg. scrollable-main-container

package/lib/styles/mixins/_scrollbars.scss

@@ -1,4 +1,4 @@
-@mixin scrollbar($size, $foreground-color, $background-color: white) {
+@mixin scrollbar($size, $foreground-color, $background-color: var(--color-default-background)) {
 	::-webkit-scrollbar {
 		height: $size;
 		width: $size;
@@ -13,7 +13,11 @@
 	}
 }
 
-@mixin scrollbar-on-self($size, $foreground-color, $background-color: white) {
+@mixin scrollbar-on-self(
+	$size,
+	$foreground-color,
+	$background-color: var(--color-default-background)
+) {
 	&::-webkit-scrollbar {
 		height: $size;
 		width: $size;

package/lib/styles/settings/_gradients-variables.scss

@@ -0,0 +1,34 @@
+@import 'colors/magic';
+
+:root {
+	--gradient-magic-background-ghost-hovered: linear-gradient(
+		100deg,
+		rgba(#{$gradient-magic-color-1-rgb}, 0.12) 7.16%,
+		rgba(#{$gradient-magic-color-2-rgb}, 0.12) 36.18%,
+		rgba(#{$gradient-magic-color-3-rgb}, 0.12) 65.19%,
+		rgba(#{$gradient-magic-color-4-rgb}, 0.12) 95.08%
+	);
+	--gradient-magic-background-ghost-focused: linear-gradient(
+		100deg,
+		rgba(#{$gradient-magic-color-1-rgb}, 0.12) 7.16%,
+		rgba(#{$gradient-magic-color-2-rgb}, 0.12) 36.18%,
+		rgba(#{$gradient-magic-color-3-rgb}, 0.12) 65.19%,
+		rgba(#{$gradient-magic-color-4-rgb}, 0.12) 95.08%
+	);
+	--gradient-magic-border-angular: conic-gradient(
+		from 90deg,
+		#{$gradient-magic-color-4} 0%,
+		#{$gradient-magic-color-1} 25%,
+		#{$gradient-magic-color-2} 50%,
+		#{$gradient-magic-color-3} 75%,
+		#{$gradient-magic-color-4} 100%
+	);
+	--gradient-magic-border-angular-disabled: conic-gradient(
+		from 90deg,
+		rgba(#{$gradient-magic-color-4-rgb}, 0.4) 0%,
+		rgba(#{$gradient-magic-color-1-rgb}, 0.4) 25%,
+		rgba(#{$gradient-magic-color-2-rgb}, 0.4) 50%,
+		rgba(#{$gradient-magic-color-3-rgb}, 0.4) 75%,
+		rgba(#{$gradient-magic-color-4-rgb}, 0.4) 100%
+	);
+}

package/lib/styles/settings/_gradients.scss

@@ -0,0 +1,4 @@
+$gradient-magic-background-ghost-hovered: var(--gradient-magic-background-ghost-hovered);
+$gradient-magic-background-ghost-focused: var(--gradient-magic-background-ghost-focused);
+$gradient-magic-border-angular: var(--gradient-magic-border-angular);
+$gradient-magic-border-angular-disabled: var(--gradient-magic-border-angular-disabled);

package/lib/styles/settings/colors/_magic-variables.scss

@@ -0,0 +1,10 @@
+:root {
+	--gradient-magic-color-1: var(--raw-teal-500);
+	--gradient-magic-color-2: var(--raw-indigo-500);
+	--gradient-magic-color-3: var(--raw-violet-500);
+	--gradient-magic-color-4: var(--raw-gold-500);
+	--gradient-magic-color-1-rgb: var(--raw-teal-500-rgb);
+	--gradient-magic-color-2-rgb: var(--raw-indigo-500-rgb);
+	--gradient-magic-color-3-rgb: var(--raw-violet-500-rgb);
+	--gradient-magic-color-4-rgb: var(--raw-gold-500-rgb);
+}

package/lib/styles/settings/colors/_magic.scss

@@ -0,0 +1,9 @@
+$gradient-magic-color-1: var(--gradient-magic-color-1);
+$gradient-magic-color-2: var(--gradient-magic-color-2);
+$gradient-magic-color-3: var(--gradient-magic-color-3);
+$gradient-magic-color-4: var(--gradient-magic-color-4);
+
+$gradient-magic-color-1-rgb: var(--gradient-magic-color-1-rgb);
+$gradient-magic-color-2-rgb: var(--gradient-magic-color-2-rgb);
+$gradient-magic-color-3-rgb: var(--gradient-magic-color-3-rgb);
+$gradient-magic-color-4-rgb: var(--gradient-magic-color-4-rgb);

package/lib/styles/settings/colors/_raw-bodywork-dark.scss

@@ -0,0 +1,22 @@
+.-ds-theme-bodywork.-ds-dark {
+	--theme-50: #183340;
+	--theme-50-rgb: 24, 51, 64;
+	--theme-100: #0a425b;
+	--theme-100-rgb: 10, 66, 91;
+	--theme-200: #004c6e;
+	--theme-200-rgb: 0, 76, 110;
+	--theme-300: #0e5d81;
+	--theme-300-rgb: 14, 93, 129;
+	--theme-400: #1f7095;
+	--theme-400-rgb: 31, 112, 149;
+	--theme-500: #3d8baf;
+	--theme-500-rgb: 61, 139, 175;
+	--theme-600: #81b2c8;
+	--theme-600-rgb: 129, 178, 200;
+	--theme-700: #b6cdd7;
+	--theme-700-rgb: 182, 205, 215;
+	--theme-800: #dce7ed;
+	--theme-800-rgb: 220, 231, 237;
+	--theme-900: #ecf2f5;
+	--theme-900-rgb: 236, 242, 245;
+}

package/lib/styles/settings/colors/_raw-mc-dark.scss

@@ -0,0 +1,22 @@
+.-ds-theme-mc.-ds-dark {
+	--theme-50: #081d44;
+	--theme-50-rgb: 8, 29, 68;
+	--theme-100: #0b265b;
+	--theme-100-rgb: 11, 38, 91;
+	--theme-200: #0e3277;
+	--theme-200-rgb: 14, 50, 119;
+	--theme-300: #123d94;
+	--theme-300-rgb: 18, 61, 148;
+	--theme-400: #164bb6;
+	--theme-400-rgb: 22, 75, 182;
+	--theme-500: #2664e0;
+	--theme-500-rgb: 38, 100, 224;
+	--theme-600: #6399f0;
+	--theme-600-rgb: 99, 153, 240;
+	--theme-700: #aec6f5;
+	--theme-700-rgb: 174, 198, 245;
+	--theme-800: #d8e4fb;
+	--theme-800-rgb: 216, 228, 251;
+	--theme-900: #e8effc;
+	--theme-900-rgb: 232, 239, 252;
+}

package/lib/styles/settings/colors/_raw-wnl-dark.scss

@@ -0,0 +1,22 @@
+.-ds-theme-wnl.-ds-dark {
+	--theme-50: #0a4c58;
+	--theme-50-rgb: 10, 76, 88;
+	--theme-100: #095d68;
+	--theme-100-rgb: 9, 93, 104;
+	--theme-200: #096b75;
+	--theme-200-rgb: 9, 107, 117;
+	--theme-300: #087e85;
+	--theme-300-rgb: 8, 126, 133;
+	--theme-400: #078f96;
+	--theme-400-rgb: 7, 143, 150;
+	--theme-500: #0d9ea4;
+	--theme-500-rgb: 13, 158, 164;
+	--theme-600: #5bbdc1;
+	--theme-600-rgb: 91, 189, 193;
+	--theme-700: #a6dcde;
+	--theme-700-rgb: 166, 220, 222;
+	--theme-800: #d5eeef;
+	--theme-800-rgb: 213, 238, 239;
+	--theme-900: #e8f6f6;
+	--theme-900-rgb: 232, 246, 246;
+}

package/lib/styles/settings/colors/_raw.json

@@ -1 +1 @@
-{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F5AE25"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EB960E"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E08504"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#BD6D06"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#995B0F"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#7D4A0A"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#6F77E3"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#6169CF"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#575EBD"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#4C55A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#424B90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#363E73"}],"teal":[{"id":"_raw.scss_teal-50","label":"teal-50","value":"#E8F6F6"},{"id":"_raw.scss_teal-100","label":"teal-100","value":"#D5EEEF"},{"id":"_raw.scss_teal-200","label":"teal-200","value":"#A6DCDE"},{"id":"_raw.scss_teal-300","label":"teal-300","value":"#5BBDC1"},{"id":"_raw.scss_teal-400","label":"teal-400","value":"#0D9EA4"},{"id":"_raw.scss_teal-500","label":"teal-500","value":"#078F96"},{"id":"_raw.scss_teal-600","label":"teal-600","value":"#078F96"},{"id":"_raw.scss_teal-700","label":"teal-700","value":"#096B75"},{"id":"_raw.scss_teal-800","label":"teal-800","value":"#095D68"},{"id":"_raw.scss_teal-900","label":"teal-900","value":"#0A4C58"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"}],"pink":[{"id":"_raw.scss_pink-50","label":"pink-50","value":"#FDF2F4"},{"id":"_raw.scss_pink-100","label":"pink-100","value":"#FBE5E8"},{"id":"_raw.scss_pink-200","label":"pink-200","value":"#F7CAD1"},{"id":"_raw.scss_pink-300","label":"pink-300","value":"#F2A6B2"},{"id":"_raw.scss_pink-400","label":"pink-400","value":"#EB7A8B"},{"id":"_raw.scss_pink-500","label":"pink-500","value":"#E55268"},{"id":"_raw.scss_pink-600","label":"pink-600","value":"#C83745"},{"id":"_raw.scss_pink-700","label":"pink-700","value":"#9C2B36"},{"id":"_raw.scss_pink-800","label":"pink-800","value":"#59181E"},{"id":"_raw.scss_pink-900","label":"pink-900","value":"#380F13"}],"yellow":[{"id":"_raw.scss_yellow-50","label":"yellow-50","value":"#FFFAE3"},{"id":"_raw.scss_yellow-100","label":"yellow-100","value":"#FFF5C4"},{"id":"_raw.scss_yellow-200","label":"yellow-200","value":"#FEEC93"},{"id":"_raw.scss_yellow-300","label":"yellow-300","value":"#FEE56D"},{"id":"_raw.scss_yellow-400","label":"yellow-400","value":"#FDDE44"},{"id":"_raw.scss_yellow-500","label":"yellow-500","value":"#FAD000"},{"id":"_raw.scss_yellow-600","label":"yellow-600","value":"#EDBE00"},{"id":"_raw.scss_yellow-700","label":"yellow-700","value":"#CC9C00"},{"id":"_raw.scss_yellow-800","label":"yellow-800","value":"#A37800"},{"id":"_raw.scss_yellow-900","label":"yellow-900","value":"#7D5A00"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#087E85"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096B75"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}]}
+{"default":[{"id":"_raw.scss_black","label":"black","value":"#0C1726"},{"id":"_raw.scss_white","label":"white","value":"#FFF"},{"id":"_raw.scss_pure-black","label":"pure-black","value":"#000"}],"gray":[{"id":"_raw.scss_gray-50","label":"gray-50","value":"#F7F7F9"},{"id":"_raw.scss_gray-100","label":"gray-100","value":"#F1F2F6"},{"id":"_raw.scss_gray-200","label":"gray-200","value":"#E5E7ED"},{"id":"_raw.scss_gray-300","label":"gray-300","value":"#C6CBD7"},{"id":"_raw.scss_gray-400","label":"gray-400","value":"#A8AFC0"},{"id":"_raw.scss_gray-500","label":"gray-500","value":"#8992A7"},{"id":"_raw.scss_gray-600","label":"gray-600","value":"#767F95"},{"id":"_raw.scss_gray-700","label":"gray-700","value":"#636C84"},{"id":"_raw.scss_gray-800","label":"gray-800","value":"#4A5269"},{"id":"_raw.scss_gray-900","label":"gray-900","value":"#343C50"},{"id":"_raw.scss_gray-950","label":"gray-950","value":"#141F2C"}],"green":[{"id":"_raw.scss_green-50","label":"green-50","value":"#E9F7F0"},{"id":"_raw.scss_green-100","label":"green-100","value":"#D7F0E4"},{"id":"_raw.scss_green-200","label":"green-200","value":"#A2DCC1"},{"id":"_raw.scss_green-300","label":"green-300","value":"#5FC594"},{"id":"_raw.scss_green-400","label":"green-400","value":"#18A85F"},{"id":"_raw.scss_green-500","label":"green-500","value":"#16995A"},{"id":"_raw.scss_green-600","label":"green-600","value":"#158753"},{"id":"_raw.scss_green-700","label":"green-700","value":"#14744B"},{"id":"_raw.scss_green-800","label":"green-800","value":"#126344"},{"id":"_raw.scss_green-900","label":"green-900","value":"#11513D"},{"id":"_raw.scss_green-950","label":"green-950","value":"#082E22"}],"gold":[{"id":"_raw.scss_gold-50","label":"gold-50","value":"#FFF4E2"},{"id":"_raw.scss_gold-100","label":"gold-100","value":"#FFEAC5"},{"id":"_raw.scss_gold-200","label":"gold-200","value":"#FFD690"},{"id":"_raw.scss_gold-300","label":"gold-300","value":"#FBC358"},{"id":"_raw.scss_gold-400","label":"gold-400","value":"#F5AE25"},{"id":"_raw.scss_gold-500","label":"gold-500","value":"#EB960E"},{"id":"_raw.scss_gold-600","label":"gold-600","value":"#E08504"},{"id":"_raw.scss_gold-700","label":"gold-700","value":"#BD6D06"},{"id":"_raw.scss_gold-800","label":"gold-800","value":"#995B0F"},{"id":"_raw.scss_gold-900","label":"gold-900","value":"#7D4A0A"},{"id":"_raw.scss_gold-950","label":"gold-950","value":"#482902"}],"orange":[{"id":"_raw.scss_orange-50","label":"orange-50","value":"#FDEFEC"},{"id":"_raw.scss_orange-100","label":"orange-100","value":"#FBE1DC"},{"id":"_raw.scss_orange-200","label":"orange-200","value":"#F6BCB0"},{"id":"_raw.scss_orange-300","label":"orange-300","value":"#EF8772"},{"id":"_raw.scss_orange-400","label":"orange-400","value":"#E85335"},{"id":"_raw.scss_orange-500","label":"orange-500","value":"#E43C1A"},{"id":"_raw.scss_orange-600","label":"orange-600","value":"#D43718"},{"id":"_raw.scss_orange-700","label":"orange-700","value":"#BA3115"},{"id":"_raw.scss_orange-800","label":"orange-800","value":"#A02A12"},{"id":"_raw.scss_orange-900","label":"orange-900","value":"#85230F"},{"id":"_raw.scss_orange-950","label":"orange-950","value":"#502105"}],"red":[{"id":"_raw.scss_red-50","label":"red-50","value":"#FCEEF0"},{"id":"_raw.scss_red-100","label":"red-100","value":"#FAE3E5"},{"id":"_raw.scss_red-200","label":"red-200","value":"#F4BDC1"},{"id":"_raw.scss_red-300","label":"red-300","value":"#EC868E"},{"id":"_raw.scss_red-400","label":"red-400","value":"#E24956"},{"id":"_raw.scss_red-500","label":"red-500","value":"#DD2A3A"},{"id":"_raw.scss_red-600","label":"red-600","value":"#CA1E2E"},{"id":"_raw.scss_red-700","label":"red-700","value":"#B41E2D"},{"id":"_raw.scss_red-800","label":"red-800","value":"#9F1D2C"},{"id":"_raw.scss_red-900","label":"red-900","value":"#831C2B"},{"id":"_raw.scss_red-950","label":"red-950","value":"#520A1C"}],"blue":[{"id":"_raw.scss_blue-50","label":"blue-50","value":"#E6F4FA"},{"id":"_raw.scss_blue-100","label":"blue-100","value":"#CDE8F5"},{"id":"_raw.scss_blue-200","label":"blue-200","value":"#9FD4EC"},{"id":"_raw.scss_blue-300","label":"blue-300","value":"#62ADD5"},{"id":"_raw.scss_blue-400","label":"blue-400","value":"#308BBF"},{"id":"_raw.scss_blue-500","label":"blue-500","value":"#1779B5"},{"id":"_raw.scss_blue-600","label":"blue-600","value":"#0C6CA8"},{"id":"_raw.scss_blue-700","label":"blue-700","value":"#0C6095"},{"id":"_raw.scss_blue-800","label":"blue-800","value":"#0C5685"},{"id":"_raw.scss_blue-900","label":"blue-900","value":"#0C4870"},{"id":"_raw.scss_blue-950","label":"blue-950","value":"#042840"}],"indigo":[{"id":"_raw.scss_indigo-50","label":"indigo-50","value":"#F0F1FD"},{"id":"_raw.scss_indigo-100","label":"indigo-100","value":"#E4E5FB"},{"id":"_raw.scss_indigo-200","label":"indigo-200","value":"#BFC2F5"},{"id":"_raw.scss_indigo-300","label":"indigo-300","value":"#989DEE"},{"id":"_raw.scss_indigo-400","label":"indigo-400","value":"#6F77E3"},{"id":"_raw.scss_indigo-500","label":"indigo-500","value":"#6169CF"},{"id":"_raw.scss_indigo-600","label":"indigo-600","value":"#575EBD"},{"id":"_raw.scss_indigo-700","label":"indigo-700","value":"#4C55A6"},{"id":"_raw.scss_indigo-800","label":"indigo-800","value":"#424B90"},{"id":"_raw.scss_indigo-900","label":"indigo-900","value":"#363E73"},{"id":"_raw.scss_indigo-950","label":"indigo-950","value":"#1C2141"}],"teal":[{"id":"_raw.scss_teal-50","label":"teal-50","value":"#E8F6F6"},{"id":"_raw.scss_teal-100","label":"teal-100","value":"#D5EEEF"},{"id":"_raw.scss_teal-200","label":"teal-200","value":"#A6DCDE"},{"id":"_raw.scss_teal-300","label":"teal-300","value":"#5BBDC1"},{"id":"_raw.scss_teal-400","label":"teal-400","value":"#0D9EA4"},{"id":"_raw.scss_teal-500","label":"teal-500","value":"#078F96"},{"id":"_raw.scss_teal-600","label":"teal-600","value":"#078F96"},{"id":"_raw.scss_teal-700","label":"teal-700","value":"#096B75"},{"id":"_raw.scss_teal-800","label":"teal-800","value":"#095D68"},{"id":"_raw.scss_teal-900","label":"teal-900","value":"#0A4C58"},{"id":"_raw.scss_teal-950","label":"teal-950","value":"#032B33"}],"violet":[{"id":"_raw.scss_violet-50","label":"violet-50","value":"#F4F1F8"},{"id":"_raw.scss_violet-100","label":"violet-100","value":"#E6DEEE"},{"id":"_raw.scss_violet-200","label":"violet-200","value":"#CEBFDE"},{"id":"_raw.scss_violet-300","label":"violet-300","value":"#AF97C8"},{"id":"_raw.scss_violet-400","label":"violet-400","value":"#9271B5"},{"id":"_raw.scss_violet-500","label":"violet-500","value":"#7E57A7"},{"id":"_raw.scss_violet-600","label":"violet-600","value":"#72499B"},{"id":"_raw.scss_violet-700","label":"violet-700","value":"#643D8C"},{"id":"_raw.scss_violet-800","label":"violet-800","value":"#56367B"},{"id":"_raw.scss_violet-900","label":"violet-900","value":"#472F6B"},{"id":"_raw.scss_violet-950","label":"violet-950","value":"#27183D"}],"olive":[{"id":"_raw.scss_olive-50","label":"olive-50","value":"#EEF6E3"},{"id":"_raw.scss_olive-100","label":"olive-100","value":"#E0EED1"},{"id":"_raw.scss_olive-200","label":"olive-200","value":"#C7E1AB"},{"id":"_raw.scss_olive-300","label":"olive-300","value":"#A5CF76"},{"id":"_raw.scss_olive-400","label":"olive-400","value":"#8ABD4D"},{"id":"_raw.scss_olive-500","label":"olive-500","value":"#72AD34"},{"id":"_raw.scss_olive-600","label":"olive-600","value":"#5F972F"},{"id":"_raw.scss_olive-700","label":"olive-700","value":"#4D7E26"},{"id":"_raw.scss_olive-800","label":"olive-800","value":"#35571B"},{"id":"_raw.scss_olive-900","label":"olive-900","value":"#263F13"},{"id":"_raw.scss_olive-950","label":"olive-950","value":"#152409"}],"pink":[{"id":"_raw.scss_pink-50","label":"pink-50","value":"#FDF2F4"},{"id":"_raw.scss_pink-100","label":"pink-100","value":"#FBE5E8"},{"id":"_raw.scss_pink-200","label":"pink-200","value":"#F7CAD1"},{"id":"_raw.scss_pink-300","label":"pink-300","value":"#F2A6B2"},{"id":"_raw.scss_pink-400","label":"pink-400","value":"#EB7A8B"},{"id":"_raw.scss_pink-500","label":"pink-500","value":"#E55268"},{"id":"_raw.scss_pink-600","label":"pink-600","value":"#C83745"},{"id":"_raw.scss_pink-700","label":"pink-700","value":"#9C2B36"},{"id":"_raw.scss_pink-800","label":"pink-800","value":"#59181E"},{"id":"_raw.scss_pink-900","label":"pink-900","value":"#380F13"},{"id":"_raw.scss_pink-950","label":"pink-950","value":"#2F0A0D"}],"yellow":[{"id":"_raw.scss_yellow-50","label":"yellow-50","value":"#FFFAE3"},{"id":"_raw.scss_yellow-100","label":"yellow-100","value":"#FFF5C4"},{"id":"_raw.scss_yellow-200","label":"yellow-200","value":"#FEEC93"},{"id":"_raw.scss_yellow-300","label":"yellow-300","value":"#FEE56D"},{"id":"_raw.scss_yellow-400","label":"yellow-400","value":"#FDDE44"},{"id":"_raw.scss_yellow-500","label":"yellow-500","value":"#FAD000"},{"id":"_raw.scss_yellow-600","label":"yellow-600","value":"#EDBE00"},{"id":"_raw.scss_yellow-700","label":"yellow-700","value":"#CC9C00"},{"id":"_raw.scss_yellow-800","label":"yellow-800","value":"#A37800"},{"id":"_raw.scss_yellow-900","label":"yellow-900","value":"#7D5A00"},{"id":"_raw.scss_yellow-950","label":"yellow-950","value":"#453200"}],"theme":[{"id":"_raw.scss_theme-50","label":"theme-50","value":"#E8F6F6"},{"id":"_raw.scss_theme-100","label":"theme-100","value":"#D5EEEF"},{"id":"_raw.scss_theme-200","label":"theme-200","value":"#A6DCDE"},{"id":"_raw.scss_theme-300","label":"theme-300","value":"#5BBDC1"},{"id":"_raw.scss_theme-400","label":"theme-400","value":"#0D9EA4"},{"id":"_raw.scss_theme-500","label":"theme-500","value":"#078F96"},{"id":"_raw.scss_theme-600","label":"theme-600","value":"#087E85"},{"id":"_raw.scss_theme-700","label":"theme-700","value":"#096B75"},{"id":"_raw.scss_theme-800","label":"theme-800","value":"#095D68"},{"id":"_raw.scss_theme-900","label":"theme-900","value":"#0A4C58"}]}