@atlaskit/navigation-system 0.182.0 → 1.0.0

package/src/ui/top-nav-items/themed/get-custom-theme-styles.tsx

@@ -1,186 +0,0 @@
-import type React from 'react';
-
-import { themedLogoIcon, themedLogoText } from '../nav-logo/logo-renderer';
-
-import {
-	themedButtonBackground,
-	themedButtonBackgroundHovered,
-	themedButtonBackgroundPressed,
-	themedButtonBorder,
-	themedButtonDisabledBackground,
-	themedButtonDisabledText,
-	themedButtonPrimaryBackground,
-	themedButtonPrimaryBackgroundHovered,
-	themedButtonPrimaryBackgroundPressed,
-	themedButtonPrimaryText,
-	themedButtonSelectedBackground,
-	themedButtonSelectedBackgroundHovered,
-	themedButtonSelectedBackgroundPressed,
-	themedButtonSelectedBorder,
-	themedButtonSelectedText,
-} from './button';
-import {
-	type ColorMode,
-	getColorMode,
-	getTextColor,
-	isLight,
-	simpleAlphaComposite,
-} from './color-utils';
-import { parseHex } from './color-utils/formats/hex';
-import type { RGB, RGBA } from './color-utils/types';
-import { palette, paletteRgba } from './palette';
-import { themedSearchBorder, themedSearchBorderFocused } from './search';
-
-/**
- * Expects colors to be passed as `RGB` objects.
- *
- * Allows `string` for hex strings only, for backwards compatibility.
- * This will likely be removed in the future.
- *
- * Allows `null` for ergonomic reasons, because our color parsing utilities can return
- * `null` if they cannot parse a color string.
- */
-export type CustomTheme = {
-	backgroundColor: string | RGB | null;
-	highlightColor: string | RGB | null;
-};
-
-function toRGBString({ r, g, b }: RGB) {
-	return `rgb(${r}, ${g}, ${b})`;
-}
-
-function toRGBAString({ r, g, b, a }: RGBA) {
-	return `rgba(${r}, ${g}, ${b}, ${a})`;
-}
-
-type StyleObject = Record<string, string>;
-
-// Using raw hex codes because custom colors break out of the tokens model
-// We will need to invert the colors based on backgroundColor independently of the app's color mode (dark/light)
-// Values here are not final
-const buttonStyles: Record<ColorMode, StyleObject> = {
-	light: {
-		[themedButtonBackground]: 'transparent',
-		[themedButtonBackgroundHovered]: palette.Neutral200A,
-		[themedButtonBackgroundPressed]: palette.Neutral300A,
-		[themedButtonBorder]: palette.Neutral300A,
-		[themedButtonSelectedBackground]: palette.Neutral300A,
-		[themedButtonSelectedBackgroundHovered]: palette.Neutral400A,
-		[themedButtonSelectedBackgroundPressed]: palette.Neutral500A,
-		[themedButtonDisabledText]: palette.Neutral400A,
-		[themedButtonDisabledBackground]: palette.Neutral100A,
-	},
-	dark: {
-		[themedButtonBackground]: 'transparent',
-		[themedButtonBackgroundHovered]: palette.DarkNeutral200A,
-		[themedButtonBackgroundPressed]: palette.DarkNeutral300A,
-		[themedButtonBorder]: palette.DarkNeutral300A,
-		[themedButtonSelectedBackground]: palette.DarkNeutral300A,
-		[themedButtonSelectedBackgroundHovered]: palette.DarkNeutral400A,
-		[themedButtonSelectedBackgroundPressed]: palette.DarkNeutral500A,
-		[themedButtonDisabledText]: palette.DarkNeutral400A,
-		[themedButtonDisabledBackground]: palette.DarkNeutral100A,
-	},
-};
-
-const logoStyles: Record<ColorMode, StyleObject> = {
-	light: {
-		[themedLogoIcon]: palette.DarkNeutral0,
-		[themedLogoText]: palette.DarkNeutral0,
-	},
-	dark: {
-		[themedLogoIcon]: palette.Neutral0,
-		[themedLogoText]: palette.Neutral0,
-	},
-};
-
-/**
- * Provides a `style` prop value for the `TopNav` that defines required CSS variables.
- *
- * If a provided `backgroundColor` or `highlightColor` cannot be parsed,
- * then `null` will be returned.
- */
-export function getCustomThemeStyles({
-	backgroundColor,
-	highlightColor,
-}: CustomTheme): React.CSSProperties | null {
-	const backgroundRgb: RGB | null =
-		typeof backgroundColor === 'string' ? parseHex(backgroundColor) : backgroundColor;
-
-	const highlightRgb: RGB | null =
-		typeof highlightColor === 'string' ? parseHex(highlightColor) : highlightColor;
-
-	if (!backgroundRgb || !highlightRgb) {
-		return null;
-	}
-
-	const textColor = getTextColor(backgroundRgb);
-	const colorMode = getColorMode(backgroundRgb);
-
-	const highlightTextColor = getTextColor(highlightRgb);
-
-	return {
-		backgroundColor: toRGBString(backgroundRgb),
-		color: textColor.hex,
-		...buttonStyles[colorMode],
-		...logoStyles[colorMode],
-		...getSelectedStyles({ backgroundColor: backgroundRgb, colorMode }),
-		/**
-		 * Search colors are the same as Nav 3
-		 */
-		[themedSearchBorder]: toRGBAString({ ...textColor.rgb, a: 0.5 }),
-		[themedSearchBorderFocused]: toRGBAString({ ...highlightRgb, a: 0.8 }),
-		/**
-		 * Primary button colors are the same as Nav 3,
-		 * except the text color which can sometimes differ because we're
-		 * now following WCAG
-		 */
-		[themedButtonPrimaryBackground]: toRGBString(highlightRgb),
-		[themedButtonPrimaryBackgroundHovered]: toRGBAString({ ...highlightRgb, a: 0.8 }),
-		[themedButtonPrimaryBackgroundPressed]: toRGBAString({ ...highlightRgb, a: 0.65 }),
-		[themedButtonPrimaryText]: highlightTextColor.hex,
-	} as React.CSSProperties;
-}
-
-/**
- * Precomputed RGBA values for the selected backgrounds
- */
-const selectedBackgroundRGBA: Record<ColorMode, RGBA> = {
-	light: paletteRgba.Neutral300A,
-	dark: paletteRgba.DarkNeutral300A,
-};
-
-function getSelectedStyles({
-	backgroundColor,
-	colorMode,
-}: {
-	/**
-	 * The top bar background color
-	 */
-	backgroundColor: RGB;
-	colorMode: ColorMode;
-}): StyleObject {
-	/**
-	 * The background color of the selected button in its default state.
-	 *
-	 * We are referring to this as a foreground color because it is semi-transparent,
-	 * so is not the actual color displayed when the button is on top of a background color.
-	 */
-	const foregroundColor = selectedBackgroundRGBA[colorMode];
-
-	/**
-	 * The blended color seen when the selected background is over the top bar.
-	 */
-	const blendedBackground = simpleAlphaComposite({
-		background: backgroundColor,
-		foreground: foregroundColor,
-	});
-
-	return {
-		[themedButtonSelectedText]: getTextColor(blendedBackground).hex,
-		// Border colors are chosen to match the text, while remaining in the palette
-		[themedButtonSelectedBorder]: isLight(blendedBackground)
-			? palette.Neutral1100
-			: palette.DarkNeutral1100,
-	};
-}

package/src/ui/top-nav-items/themed/has-custom-theme-context.tsx

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * Context to let components know if a custom theme is being applied.
- */
-export const HasCustomThemeContext = createContext(false);
-
-/**
- * Returns whether a custom theme is being applied.
- */
-export function useHasCustomTheme() {
-	return useContext(HasCustomThemeContext);
-}

package/src/ui/top-nav-items/themed/migration.tsx

@@ -1,70 +0,0 @@
-import React, { forwardRef } from 'react';
-
-import AkButton, {
-	IconButton as AkIconButton,
-	LinkButton as AkLinkButton,
-	LinkIconButton as AkLinkIconButton,
-} from '@atlaskit/button/new';
-
-import {
-	ThemedButton,
-	type ThemedButtonProps,
-	ThemedIconButton,
-	type ThemedIconButtonProps,
-	ThemedLinkButton,
-	type ThemedLinkButtonProps,
-	ThemedLinkIconButton,
-	type ThemedLinkIconButtonProps,
-} from './button';
-import { useHasCustomTheme } from './has-custom-theme-context';
-
-type IconButtonMigrationProps = {
-	// These props are present for compatibility with the normal icon button API,
-	// but they do nothing in the themed icon button
-	isTooltipDisabled?: boolean;
-};
-
-// Explicitly typed to use only the themed button API,
-// which is a subset of the normal button API
-const IconButton = forwardRef<HTMLButtonElement, ThemedIconButtonProps & IconButtonMigrationProps>(
-	(props, ref) => {
-		const hasCustomTheme = useHasCustomTheme();
-		const Component = hasCustomTheme ? ThemedIconButton : AkIconButton;
-
-		return <Component ref={ref} {...props} />;
-	},
-);
-
-// Explicitly typed to use only the themed button API,
-// which is a subset of the normal button API
-const LinkIconButton = forwardRef<
-	HTMLAnchorElement,
-	ThemedLinkIconButtonProps & IconButtonMigrationProps
->((props, ref) => {
-	const hasCustomTheme = useHasCustomTheme();
-	const Component = hasCustomTheme ? ThemedLinkIconButton : AkLinkIconButton;
-
-	return <Component ref={ref} {...props} />;
-});
-
-// Explicitly typed to use only the themed button API,
-// which is a subset of the normal button API
-const Button = forwardRef<HTMLButtonElement, ThemedButtonProps & IconButtonMigrationProps>(
-	(props, ref) => {
-		const hasCustomTheme = useHasCustomTheme();
-		const Component = hasCustomTheme ? ThemedButton : AkButton;
-
-		return <Component ref={ref} {...props} />;
-	},
-);
-
-// Explicitly typed to use only the themed button API,
-// which is a subset of the normal button API
-const LinkButton = forwardRef<HTMLAnchorElement, ThemedLinkButtonProps>((props, ref) => {
-	const hasCustomTheme = useHasCustomTheme();
-	const Component = hasCustomTheme ? ThemedLinkButton : AkLinkButton;
-
-	return <Component ref={ref} {...props} />;
-});
-
-export { IconButton, Button, LinkIconButton, LinkButton };

package/src/ui/top-nav-items/themed/palette.tsx

@@ -1,53 +0,0 @@
-/**
- * Copied from the brand refresh palette.
- *
- * Ideally we'd codegen this but the brand refresh palette isn't exposed
- * through public API and we shouldn't use the private API of another package.
- */
-export const palette = {
-	'DarkNeutral-100': '#111213',
-	'DarkNeutral-100A': '#01040475',
-	DarkNeutral0: '#18191A',
-	DarkNeutral100: '#1F1F21',
-	DarkNeutral100A: '#BDBDBD0A',
-	DarkNeutral200: '#242528',
-	DarkNeutral200A: '#CECED912',
-	DarkNeutral250: '#2B2C2F',
-	DarkNeutral250A: '#D9DAE71A',
-	DarkNeutral300: '#303134',
-	DarkNeutral300A: '#E3E4F21F',
-	DarkNeutral350: '#3D3F43',
-	DarkNeutral350A: '#E8EDFD2E',
-	DarkNeutral400: '#4B4D51',
-	DarkNeutral400A: '#E5E9F640',
-	DarkNeutral500: '#63666B',
-	DarkNeutral500A: '#E9F0FB5C',
-	DarkNeutral600: '#7E8188',
-	DarkNeutral700: '#96999E',
-	DarkNeutral800: '#A9ABAF',
-	DarkNeutral900: '#BFC1C4',
-	DarkNeutral1000: '#CECFD2',
-	DarkNeutral1100: '#E2E3E4',
-	Neutral0: '#FFFFFF',
-	Neutral100: '#F8F8F8',
-	Neutral100A: '#17171708',
-	Neutral200: '#F0F1F2',
-	Neutral200A: '#0515240F',
-	Neutral300: '#DDDEE1',
-	Neutral300A: '#0B120E24',
-	Neutral400: '#B7B9BE',
-	Neutral400A: '#080F214A',
-	Neutral500: '#8C8F97',
-	Neutral500A: '#050C1F75',
-	Neutral600: '#7D818A',
-	Neutral700: '#6B6E76',
-	Neutral800: '#505258',
-	Neutral900: '#3B3D42',
-	Neutral1000: '#292A2E',
-	Neutral1100: '#1E1F21',
-};
-
-export const paletteRgba = {
-	DarkNeutral300A: { r: 0xe3, g: 0xe4, b: 0xf2, a: 0x1f / 255 },
-	Neutral300A: { r: 0x0b, g: 0x12, b: 0x0e, a: 0x24 / 255 },
-};

package/src/ui/top-nav-items/themed/search.tsx

@@ -1,70 +0,0 @@
-import { token } from '@atlaskit/tokens';
-
-import { themedButtonBackgroundHovered } from './button';
-import { useHasCustomTheme } from './has-custom-theme-context';
-
-export const themedSearchBorder = '--ds-top-bar-search-border';
-export const themedSearchBorderFocused = '--ds-top-bar-search-border-focused';
-
-/**
- * Theme object intended for use with Search Platform components while transitioning to nav4.
- *
- * This is for backwards compatibility with the legacy theming API that was designed for nav3.
- *
- * As nav4 matures we will ideally evolve the theming solution inside Search Platform,
- * at which point this legacy theme object will not be needed.
- */
-const legacySearchTheme = {
-	default: {
-		backgroundColor: 'transparent',
-		color: 'currentColor',
-		borderColor: `var(${themedSearchBorder})`,
-	},
-	focus: {
-		/**
-		 * When expanded the input ignores the custom theme,
-		 * except for its border which is derived from the highlight color.
-		 */
-		color: token('color.text'),
-		backgroundColor: token('color.background.input.pressed'),
-		borderColor: `var(${themedSearchBorderFocused})`,
-		boxShadow: `inset 0px 0px 0px 1px var(${themedSearchBorderFocused})`,
-	},
-	hover: {
-		/**
-		 * This is not actually used for the search bar input (at least by the Search Platform components).
-		 *
-		 * Instead it's used as the hover background color for a close button when on mobile.
-		 */
-		backgroundColor: `var(${themedButtonBackgroundHovered})`,
-	},
-};
-
-/**
- * We are just using the inferred type instead of declaring it as `SearchCSS` (the type `@atlassian/search-dialog` expects)
- *
- * Importing the type from `@atlassian/search-dialog` means we have to declare it as a full dependency,
- * rather than a dev dependency. Even though it's type-only, this is how local consumption is setup.
- *
- * This was failing typechecking in Post Office, presumably due to different versions of `@emotion/styled`.
- * It is also a code smell having an unnecessary dependency.
- *
- * We still have indirect type safety from our example + product integrations, so a PR that breaks the types won't be able to merge.
- */
-type LegacySearchTheme = typeof legacySearchTheme;
-
-/**
- * Provides the `theme` value for Search Platform components.
- *
- * This may be a `SearchCSS` object or undefined,
- * depending on if the top bar is using custom theming.
- */
-export function useLegacySearchTheme(): LegacySearchTheme | undefined {
-	const hasCustomTheme = useHasCustomTheme();
-
-	if (hasCustomTheme) {
-		return legacySearchTheme;
-	}
-
-	return undefined;
-}

package/src/ui/top-nav-items/themed/use-custom-theme.tsx

@@ -1,51 +0,0 @@
-import { useMemo } from 'react';
-
-import { type CustomTheme, getCustomThemeStyles } from './get-custom-theme-styles';
-
-type Result = { isEnabled: false } | { isEnabled: true; style: React.CSSProperties };
-
-/**
- * Processes the provided theme and returns theme styles if possible.
- */
-export function useCustomTheme(theme: CustomTheme | undefined): Result {
-	const value: Result = useMemo(
-		() => {
-			if (!theme?.backgroundColor || !theme?.highlightColor) {
-				return { isEnabled: false };
-			}
-
-			/**
-			 * Re-creating the `theme` object from it's pieces.
-			 *
-			 * _Technically_ we could just use `theme`, but that would involve an eslint opt out
-			 * as we would be leveraging a value (`theme`) not in the dependency array.
-			 *
-			 * The current approach is the most correct™️ and avoids foot guns.
-			 * We are only using values in the effect that are defined in the dependency array 🙌
-			 */
-			const value: CustomTheme = {
-				backgroundColor: theme.backgroundColor,
-				highlightColor: theme.highlightColor,
-			};
-
-			const style = getCustomThemeStyles(value);
-			if (!style) {
-				// Either the `backgroundColor` or `highlightColor` could not be parsed
-				return {
-					isEnabled: false,
-				};
-			}
-
-			return {
-				isEnabled: true,
-				style,
-			};
-		},
-		// Using individual properties as keys for improved memoization.
-		// Now this effect will only run if the values change rather than
-		// the reference to the object (which might be new on every call)
-		[theme?.backgroundColor, theme?.highlightColor],
-	);
-
-	return value;
-}

package/tsconfig.app.json

@@ -1,91 +0,0 @@
-{
-	"extends": "../../../tsconfig.base.json",
-	"include": ["./src/**/*.ts", "./src/**/*.tsx"],
-	"exclude": [
-		"**/docs/**/*",
-		"**/__tests__/**/*",
-		"**/vr-tests/**/*",
-		"**/*.test.*",
-		"**/test.*",
-		"**/test-*",
-		"**/examples.ts",
-		"**/examples.tsx",
-		"**/examples/*.ts",
-		"**/examples/*.tsx",
-		"**/examples/**/*.ts",
-		"**/examples/**/*.tsx",
-		"**/storybook/**/*",
-		"**/constellation/**/*",
-		".storybook/*",
-		"./__fixtures__/**/*",
-		"./__generated__/**/*",
-		"./mocks/**/*",
-		"./__mocks__/**/*",
-		"**/mock.*",
-		"**/codemods/**/*.ts",
-		"**/codemods/**/*.tsx"
-	],
-	"compilerOptions": {
-		"composite": true,
-		"outDir": "../../../tsDist/@atlaskit__navigation-system/app"
-	},
-	"references": [
-		{
-			"path": "../../analytics/analytics-next/tsconfig.app.json"
-		},
-		{
-			"path": "../app-provider/tsconfig.app.json"
-		},
-		{
-			"path": "../avatar/tsconfig.app.json"
-		},
-		{
-			"path": "../button/tsconfig.app.json"
-		},
-		{
-			"path": "../css/tsconfig.app.json"
-		},
-		{
-			"path": "../ds-lib/tsconfig.app.json"
-		},
-		{
-			"path": "../icon/tsconfig.app.json"
-		},
-		{
-			"path": "../layering/tsconfig.app.json"
-		},
-		{
-			"path": "../logo/tsconfig.app.json"
-		},
-		{
-			"path": "../../platform/feature-flags/tsconfig.app.json"
-		},
-		{
-			"path": "../popup/tsconfig.app.json"
-		},
-		{
-			"path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
-		},
-		{
-			"path": "../../pragmatic-drag-and-drop/hitbox/tsconfig.app.json"
-		},
-		{
-			"path": "../../pragmatic-drag-and-drop/react-drop-indicator/tsconfig.app.json"
-		},
-		{
-			"path": "../primitives/tsconfig.app.json"
-		},
-		{
-			"path": "../../navigation/temp-nav-app-icons/tsconfig.app.json"
-		},
-		{
-			"path": "../tokens/tsconfig.app.json"
-		},
-		{
-			"path": "../tooltip/tsconfig.app.json"
-		},
-		{
-			"path": "../visually-hidden/tsconfig.app.json"
-		}
-	]
-}