feat(design-system): add qlik-light theme (#5062)

.changeset/moody-lamps-cough.md

@@ -0,0 +1,15 @@
+---
+'@talend/scripts-config-storybook-lib': minor
+'@talend/react-faceted-search': minor
+'@talend/storybook-docs': minor
+'@talend/design-system': minor
+'@talend/design-tokens': minor
+'@talend/ui-storybook-one': minor
+'@talend/design-docs': minor
+'@talend/react-components': minor
+'@talend/react-containers': minor
+'@talend/react-stepper': minor
+'@talend/react-forms': minor
+---
+
+feat: add @qlik-light theme

packages/components/package.json

@@ -71,7 +71,7 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^7.6.2",
+    "@storybook/addon-actions": "^7.6.4",
     "@talend/bootstrap-theme": "^8.3.1",
     "@talend/design-system": "^8.7.0",
     "@talend/eslint-config": "^13.0.2",

packages/components/src/ActionList/ActionList.component.js

@@ -1,13 +1,15 @@
-import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
+
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 
 import { TagBeta } from '@talend/design-system';
 
 import { Action } from '../Actions';
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import Inject from '../Inject';
+
 import theme from './ActionList.module.scss';
-import I18N_DOMAIN_COMPONENTS from '../constants';
 
 /**
  * return the formatted action id

packages/components/src/ActionList/ActionList.module.scss

@@ -11,9 +11,12 @@ $tc-action-list-item-width: 20rem !default;
 $tc-action-list-item-icons-size: tokens.$coral-sizing-xxxs !default;
 $tc-action-list-item-border-size: 0.2rem !default;
 
+$action-list-background-color: tokens.$coral-color-branding-background;
+
 .tc-action-list {
 	display: inline-block;
 	min-width: $tc-action-list-item-width;
+	background-color: $action-list-background-color;
 
 	.tc-action-list-item {
 		:global {
@@ -28,7 +31,7 @@ $tc-action-list-item-border-size: 0.2rem !default;
 				text-overflow: inherit;
 				text-transform: none;
 
-				>span {
+				> span {
 					margin-left: $padding-normal;
 					vertical-align: middle;
 					transition: 0.1s opacity ease-out;

packages/components/src/HeaderBar/HeaderBar.component.js

@@ -1,22 +1,22 @@
-import PropTypes from 'prop-types';
-import omit from 'lodash/omit';
 import { useTranslation } from 'react-i18next';
 
-import Inject from '../Inject';
+import omit from 'lodash/omit';
+import PropTypes from 'prop-types';
+
+import AppSwitcher from '../AppSwitcher';
 import I18N_DOMAIN_COMPONENTS from '../constants';
+import Inject from '../Inject';
 import { getTheme } from '../theme';
-import AppSwitcher from '../AppSwitcher';
-
-import { Logo } from './primitives/Logo.component';
-import { Environment } from './primitives/Environment.component';
+import { AppNotification } from './primitives/AppNotification.component';
 import { CallToAction } from './primitives/CallToAction.component';
+import { Environment } from './primitives/Environment.component';
 import { GenericAction } from './primitives/GenericAction.component';
-import { Search } from './primitives/Search.component';
-import { User } from './primitives/User.component';
-import { Information } from './primitives/Information.component';
 import { Help } from './primitives/Help.component';
-import { AppNotification } from './primitives/AppNotification.component';
+import { Information } from './primitives/Information.component';
 import { Intercom } from './primitives/Intercom.component';
+import { Logo } from './primitives/Logo.component';
+import { Search } from './primitives/Search.component';
+import { User } from './primitives/User.component';
 
 import headerBarCssModule from './HeaderBar.module.scss';
 

packages/components/src/HeaderBar/HeaderBar.module.scss

@@ -15,7 +15,8 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 }
 
 .tc-header-bar {
-	background: tokens.$coral-color-branding-navigation;
+	background: tokens.$coral-color-brand-background;
+	color: tokens.$coral-color-brand-text;
 	display: flex;
 	position: fixed;
 	top: 0;
@@ -34,6 +35,18 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 		list-style: none;
 	}
 
+	:global {
+		.tc-dropdown-button,
+		.btn-link {
+			color: tokens.$coral-color-brand-text;
+			&:hover,
+			&:focus {
+				color: tokens.$coral-color-brand-text;
+				background: tokens.$coral-color-brand-background-weak-hover;
+			}
+		}
+	}
+
 	.tc-header-bar-actions {
 		align-items: center;
 		display: flex;
@@ -56,7 +69,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 				display: block;
 				width: 1px;
 				height: $font-size-large;
-				background-color: tokens.$coral-color-neutral-background;
+				background-color: tokens.$coral-color-brand-text;
 			}
 
 			:global {
@@ -70,6 +83,11 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 		.tc-header-bar-logo {
 			padding: 0;
 			width: $tc-headerbar-logo-width;
+			background-image: tokens.$coral-branding-logo;
+			background-size: 2.8rem;
+			background-repeat: no-repeat;
+			background-position-x: center;
+			background-position-y: center;
 
 			:global(.tc-svg-icon) {
 				padding: 0;
@@ -79,6 +97,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 
 			&.full {
 				width: auto;
+				background-image: none;
 
 				:global(.tc-svg-icon) {
 					padding: 0 $padding-normal;
@@ -162,7 +181,7 @@ $tc-headerbar-logo-full-width: 8.5rem !default;
 
 	.tc-header-bar-intercom-default-component {
 		border-radius: 50%;
-		background: tokens.$coral-color-accent-text;
+		color: tokens.$coral-color-brand-text;
 		min-height: auto;
 		height: 3.2rem;
 		width: 3.2rem;

packages/components/src/HeaderBar/HeaderBar.stories.js

@@ -1,12 +1,13 @@
 import { action } from '@storybook/addon-actions';
-import { makeDecorator } from '@storybook/addons';
+import Immutable from 'immutable';
 
-import Immutable from 'immutable'; // eslint-disable-line import/no-extraneous-dependencies
+import assetsApi from '@talend/assets-api';
+import tokens from '@talend/design-tokens';
 
+import AppSwitcher from '../AppSwitcher';
+// eslint-disable-line import/no-extraneous-dependencies
 import Icon from '../Icon';
 import HeaderBar from './HeaderBar.component';
-import AppSwitcher from '../AppSwitcher';
-import assetsApi from '@talend/assets-api';
 
 const props = {
 	brand: {
@@ -40,17 +41,17 @@ const props = {
 	products: {
 		items: [
 			{
-				icon: 'talend-tdp-colored',
+				icon: 'talend-tdp-negative',
 				key: 'tdp',
 				label: 'Data Preparation',
 			},
 			{
-				icon: 'talend-tic-colored',
+				icon: 'talend-tic-negative',
 				key: 'tic',
 				label: 'Integration Cloud',
 			},
 			{
-				icon: 'talend-tmc-colored',
+				icon: 'talend-tmc-negative',
 				key: 'tmc',
 				label: 'Management Console',
 			},
@@ -96,6 +97,11 @@ function IntercomComponent() {
 
 export default {
 	title: 'Components/Navigation/HeaderBar',
+	decorators: Story => (
+		<div style={{ background: tokens.coralColorBrandBackgroundInvertedActive, height: '100vh' }}>
+			<Story />
+		</div>
+	),
 };
 
 export const Default = () => {
@@ -138,7 +144,7 @@ export const WithBrandIcon = () => {
 		...props,
 		brand: {
 			...props.brand,
-			icon: 'talend-tmc-positive',
+			icon: 'talend-tmc-negative',
 		},
 	}).toJS();
 	return <HeaderBar {...headerProps} />;

packages/components/src/HeaderBar/primitives/Intercom.component.js

@@ -1,6 +1,7 @@
-import PropTypes from 'prop-types';
 import { useMemo } from 'react';
 
+import PropTypes from 'prop-types';
+
 import ActionIntercom from '../../ActionIntercom';
 import { getTheme } from '../../theme';
 

packages/components/src/HeaderBar/primitives/Logo.component.js

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 
-import Inject from '../../Inject';
 import Action from '../../Actions/Action';
+import Inject from '../../Inject';
 import { getTheme } from '../../theme';
 
 import headerBarCssModule from '../HeaderBar.module.scss';
 
 const theme = getTheme(headerBarCssModule);
 
 export function Logo({ isFull, getComponent, t, ...props }) {
-	const icon = isFull ? 'talend-logo' : 'talend-logo-square';
+	const icon = isFull ? 'talend-logo' : undefined;
 	const itemClassName = theme('tc-header-bar-action', 'separated');
 	const actionClassName = theme('tc-header-bar-logo', {
 		full: isFull,

packages/components/src/SidePanel/SidePanel.component.js

@@ -1,16 +1,19 @@
-import PropTypes from 'prop-types';
-import { createRef, useState, useLayoutEffect, useEffect } from 'react';
-import classNames from 'classnames';
+import { createRef, useEffect, useLayoutEffect, useState } from 'react';
 import { withTranslation } from 'react-i18next';
 
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import 'simplebar';
 import 'simplebar/dist/simplebar.css';
 
-import I18N_DOMAIN_COMPONENTS from '../constants';
-import '../translate';
-import Action from '../Actions/Action';
+import tokens from '@talend/design-tokens';
+
 import ActionList from '../ActionList';
+import Action from '../Actions/Action';
+import I18N_DOMAIN_COMPONENTS from '../constants';
 import Inject from '../Inject';
+import '../translate';
+
 import theme from './SidePanel.module.scss';
 
 const DOCKED_MIN_WIDTH = '6rem';
@@ -108,14 +111,7 @@ function SidePanel({
 	const toggleButtonTitle = docked ? expandLabel : collapseTitle;
 	const Components = Inject.getAll(getComponent, { Action, ActionList });
 	return (
-		<nav
-			id={id}
-			className={navCSS}
-			role="navigation"
-			ref={ref}
-			style={{ width }}
-			data-theme="light"
-		>
+		<nav id={id} className={navCSS} role="navigation" ref={ref} style={{ width }}>
 			{backgroundIcon && (
 				<style>
 					{`#${id}::before {
@@ -126,7 +122,8 @@ function SidePanel({
 						height: 31rem;
 						width: 31rem;
 						background-repeat: no-repeat;
-						background-color: rgba(255, 255, 255, 0.1);
+						opacity: 0.1;
+						background-color: ${tokens.coralColorBrandIcon};
 						mask-image: url('${backgroundIcon}');
 						-webkit-mask-image: url('${backgroundIcon}');
 				}`}

packages/components/src/SidePanel/SidePanel.module.scss

@@ -22,7 +22,7 @@ $large-docked-width: 7rem;
 	display: flex;
 	flex-direction: column;
 	font-weight: 500;
-	background: tokens.$coral-color-branding-navigation;
+	background: tokens.$coral-color-branding-background;
 	overflow: hidden;
 	position: relative;
 
@@ -52,6 +52,7 @@ $large-docked-width: 7rem;
 				display: flex;
 				align-items: center;
 				justify-content: flex-start;
+				color: tokens.$coral-color-brand-text;
 				font-size: 1.6rem;
 				height: $list-item-height;
 				margin: $padding-smaller $padding-small;
@@ -61,6 +62,16 @@ $large-docked-width: 7rem;
 				> span {
 					margin-left: $padding-small;
 				}
+
+				&:hover {
+					background: tokens.$coral-color-brand-background-weak-hover;
+					color: tokens.$coral-color-brand-text-hover;
+				}
+			}
+
+			&.active .btn.btn-link {
+				background: tokens.$coral-color-brand-background-selected;
+				color: tokens.$coral-color-brand-text-selected;
 			}
 
 			.tc-svg-icon {
@@ -85,7 +96,7 @@ $large-docked-width: 7rem;
 
 		:global {
 			.btn.btn-link {
-				color: tokens.$coral-color-neutral-text-inverted;
+				color: tokens.$coral-color-brand-text;
 				line-height: 1;
 				height: $toggle-height;
 				padding: 0 $padding-small;
@@ -191,20 +202,38 @@ $large-docked-width: 7rem;
 	}
 
 	&.reverse[role='navigation'] {
-		background: tokens.$coral-color-neutral-background-medium !important;
-		color: tokens.$coral-color-neutral-text !important;
+		background: tokens.$coral-color-neutral-background-medium;
 
 		&::before {
 			content: none;
 		}
 
+		:global .tc-action-list-item {
+			.btn.btn-link {
+				&:hover {
+					background: tokens.$coral-color-brand-background-selected;
+					color: tokens.$coral-color-brand-text-selected;
+				}
+			}
+		}
+
+		:global {
+			.btn.btn-link,
+			.tc-svg-icon {
+				color: tokens.$coral-color-brand-text-inverted;
+				&:hover {
+					color: tokens.$coral-color-brand-text-inverted-hover;
+				}
+			}
+		}
+
 		.toggle-btn {
 			background-color: transparent;
 
 			:global {
 				.btn.btn-link,
 				.tc-svg-icon {
-					color: tokens.$coral-color-neutral-text-weak;
+					color: tokens.$coral-color-brand-icon-inverted;
 				}
 			}
 		}