npm - @bethinkpl/design-system - Versions diffs - 37.0.6 → 38.0.0 - Mend

@bethinkpl/design-system 37.0.6 → 38.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (51) hide show

package/lib/js/components/Buttons/Button/Button.vue CHANGED Viewed

@@ -21,6 +21,17 @@
 			'-ds-elevation-x-small': elevation === BUTTON_ELEVATIONS.X_SMALL,
 			'-ds-elevation-small': elevation === BUTTON_ELEVATIONS.SMALL,
 		}"
+		:style="
+			color === BUTTON_COLORS.MAGIC
+				? {
+						'--ds-magic-fill': `url(#${
+							state === BUTTON_STATES.DISABLED
+								? GRADIENT_MAGIC_ICON_DISABLED_ID
+								: GRADIENT_MAGIC_ICON_ID
+						})`,
+					}
+				: undefined
+		"
 	>
 		<span class="ds-button__content">
 			<wnl-icon
@@ -65,6 +76,11 @@ import {
 	ButtonElevation,
 } from './Button.consts';
 import { computed } from 'vue';
+import {
+	GRADIENT_MAGIC_ICON_DISABLED_ID,
+	GRADIENT_MAGIC_ICON_ID,
+	useMagicGradient,
+} from './useMagicGradient';
 const {
 	size = BUTTON_SIZES.MEDIUM,
@@ -100,6 +116,9 @@ const colorClassName = computed((): string => {
 	return `-ds-color-${color}`;
 });
+// The loading spinner's icon fills via `url(#MAGIC_GRADIENT_ID)`; ensure that def exists.
+useMagicGradient(() => color === BUTTON_COLORS.MAGIC);
 const loadingIconSize = computed((): IconSize => {
 	if (size === BUTTON_SIZES.LARGE) {
 		return ICON_SIZES.MEDIUM;

package/lib/js/components/Buttons/Button/useMagicGradient.spec.ts ADDED Viewed

@@ -0,0 +1,47 @@
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
+import { ref } from 'vue';
+import { GRADIENT_MAGIC_ICON_ID, useMagicGradient } from './useMagicGradient';
+describe('useMagicGradient', () => {
+	beforeEach(() => {
+		document.getElementById(GRADIENT_MAGIC_ICON_ID)?.remove();
+	});
+	afterEach(() => {
+		document.getElementById(GRADIENT_MAGIC_ICON_ID)?.remove();
+	});
+	it('injects a single linearGradient with the hardcoded id when enabled', () => {
+		useMagicGradient(true);
+		const gradient = document.getElementById(GRADIENT_MAGIC_ICON_ID);
+		expect(gradient).not.toBeNull();
+		expect(gradient?.tagName.toLowerCase()).toBe('lineargradient');
+	});
+	it('does not inject the def when disabled', () => {
+		useMagicGradient(false);
+		expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).toBeNull();
+	});
+	it('injects the def when the reactive source becomes enabled', async () => {
+		const enabled = ref(false);
+		useMagicGradient(enabled);
+		expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).toBeNull();
+		enabled.value = true;
+		await Promise.resolve();
+		expect(document.getElementById(GRADIENT_MAGIC_ICON_ID)).not.toBeNull();
+	});
+	it('is idempotent — multiple enabled consumers leave exactly one def', () => {
+		useMagicGradient(true);
+		useMagicGradient(() => true);
+		useMagicGradient(ref(true));
+		expect(document.querySelectorAll(`#${GRADIENT_MAGIC_ICON_ID}`)).toHaveLength(1);
+	});
+});

package/lib/js/components/Buttons/Button/useMagicGradient.ts ADDED Viewed

@@ -0,0 +1,50 @@
+import { toValue, watch, type MaybeRefOrGetter } from 'vue';
+export const GRADIENT_MAGIC_ICON_ID = 'ds-gradient-magic-icon';
+export const GRADIENT_MAGIC_ICON_DISABLED_ID = 'ds-gradient-magic-icon-disabled';
+// SVG icons (the loading spinner) fill with the magic gradient via `fill: url(#...)`, which
+// CSS gradients can't do. The gradient is identical for every magic button, so a single
+// shared def is injected into <body> once and left for the page lifetime (invisible, 0×0).
+function ensureMagicGradientDef(): void {
+	if (typeof document === 'undefined') {
+		return; // SSR guard
+	}
+	if (document.getElementById(GRADIENT_MAGIC_ICON_ID)) {
+		return; // already injected
+	}
+	// `var()` works in the `style` property but not in the `stop-color` presentation
+	// attribute, so stop colors are set inline.
+	document.body.insertAdjacentHTML(
+		'beforeend',
+		`<svg aria-hidden="true" width="0" height="0" style="position:absolute">
+			<defs>
+				<linearGradient id="${GRADIENT_MAGIC_ICON_ID}" x1="0" y1="0" x2="1" y2="0.17">
+					<stop offset="7%" style="stop-color:var(--gradient-magic-color-1)"/>
+					<stop offset="36%" style="stop-color:var(--gradient-magic-color-2)"/>
+					<stop offset="65%" style="stop-color:var(--gradient-magic-color-3)"/>
+					<stop offset="95%" style="stop-color:var(--gradient-magic-color-4)"/>
+				</linearGradient>
+				<linearGradient id="${GRADIENT_MAGIC_ICON_DISABLED_ID}" x1="0" y1="0" x2="1" y2="0.17">
+					<stop offset="7.16%" style="stop-color:rgba(var(--gradient-magic-color-1-rgb), 0.3)"/>
+					<stop offset="36.18%" style="stop-color:rgba(var(--gradient-magic-color-2-rgb), 0.3)"/>
+					<stop offset="65.19%" style="stop-color:rgba(var(--gradient-magic-color-3-rgb), 0.3)"/>
+					<stop offset="95.08%" style="stop-color:rgba(var(--gradient-magic-color-4-rgb), 0.3)"/>
+				</linearGradient>
+			</defs>
+		</svg>`,
+	);
+}
+// Injects the shared magic-gradient def once `enabled` becomes truthy (immediate + reactive).
+export function useMagicGradient(enabled: MaybeRefOrGetter<boolean>): void {
+	watch(
+		() => toValue(enabled),
+		(isEnabled) => {
+			if (isEnabled) {
+				ensureMagicGradientDef();
+			}
+		},
+		{ immediate: true },
+	);
+}

package/lib/js/components/Buttons/IconButton/IconButton.consts.ts CHANGED Viewed

@@ -36,6 +36,7 @@ export const ICON_BUTTON_COLORS = {
 	INVERTED: 'inverted',
 	WARNING: 'warning',
 	INFO: 'info',
+	MAGIC: 'magic',
 } as const;
 export type IconButtonColor = Value<typeof ICON_BUTTON_COLORS>;

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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/js/components/Switch/Switch.vue CHANGED Viewed

@@ -78,7 +78,7 @@ $switch-transition: all $default-transition-time ease-out;
 	$root: &;
 	background-color: $color-default-background;
-	border: 1px solid $color-neutral-border;
+	border: 1px solid $color-neutral-border-weak;
 	border-radius: $radius-xs;
 	display: inline-flex;
 	max-width: 100%;
@@ -107,7 +107,7 @@ $switch-transition: all $default-transition-time ease-out;
 		}
 		#{$root}__label {
-			color: $color-neutral-text-heavy;
+			color: $color-primary-text-strong;
 		}
 	}
@@ -213,7 +213,7 @@ $switch-transition: all $default-transition-time ease-out;
 			}
 			#{$root}__label {
-				color: $color-neutral-text-heavy;
+				color: $color-primary-text-strong;
 			}
 		}

package/lib/styles/components/_buttons.scss CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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);