@drivenets/design-system 0.17.0 → 0.18.0

package/src/styles/_gradients.scss

@@ -0,0 +1,19 @@
+/*
+ * Hand-authored shared Brand Refresh gradient styles. Source in Figma.
+ * App-/product-specific gradients stay in the consuming application — see Guidelines/Colors.
+ */
+:root {
+	// https://www.figma.com/design/DDe8yyHzVoBDePbLfmJYce/DAP-Brand-Refresh-1.0?node-id=181-13762
+	--blue-radial-grad: radial-gradient(
+		58.25% 72.07% at 94.38% 95.2%,
+		var(--blue-grad-2) 0%,
+		var(--blue-grad-1) 100%
+	);
+
+	// https://www.figma.com/design/DDe8yyHzVoBDePbLfmJYce/DAP-Brand-Refresh-1.0?node-id=4-10764
+	--blue-grad-workspace-header: radial-gradient(
+		24.05% 380.93% at 24.05% 0%,
+		rgb(0 160 250 / 80%) 0%,
+		var(--blue-grad-1) 100%
+	);
+}

package/src/styles/_root.scss

@@ -18,18 +18,18 @@
 :root {
 	/* Mode 1 */
 	/* color */
-	--color-dap-blue-050: #edf7ff;
-	--color-dap-blue-075: #e1efff;
-	--color-dap-blue-100: #d6eaff;
-	--color-dap-blue-200: #b5ddff;
-	--color-dap-blue-300: #83c8ff;
-	--color-dap-blue-400: #48aaff;
-	--color-dap-blue-500: #1e83ff;
-	--color-dap-blue-600: #0661ff;
-	--color-dap-blue-700: #004cff;
-	--color-dap-blue-800: #083bc5;
-	--color-dap-blue-900: #0d379b;
-	--color-dap-blue-950: #0e235d;
+	--color-dap-blue-050: #e3f2ff;
+	--color-dap-blue-075: #d4ecff;
+	--color-dap-blue-100: #c4e4ff;
+	--color-dap-blue-200: #a7d3ff;
+	--color-dap-blue-300: #85c2ff;
+	--color-dap-blue-400: #5eacff;
+	--color-dap-blue-500: #3593ff;
+	--color-dap-blue-600: #1c79ff;
+	--color-dap-blue-700: #0066fa;
+	--color-dap-blue-800: #0057d4;
+	--color-dap-blue-900: #0047ad;
+	--color-dap-blue-950: #00337e;
 	--color-dap-brand-050: #e5e8ed;
 	--color-dap-brand-100: #bfc6d1;
 	--color-dap-brand-200: #99a3b6;
@@ -259,14 +259,14 @@
 	--background-info: var(--color-dap-blue-050);
 	--background-info-strong: var(--color-dap-blue-800);
 	--background-light: var(--color-dap-dark-blue-500);
+	--background-light-active: var(--color-dap-blue-400);
 	--background-light-disabled: #415b9a;
+	--background-light-hover: var(--color-dap-blue-500);
 	--background-light-primary: var(--color-dap-dark-blue-300);
 	--background-light-primary-hover: var(--color-dap-dark-blue-200);
 	--background-light-primary-selected: var(--color-dap-dark-blue-150);
 	--background-light-secondary-selected: var(--color-dap-dark-blue-400);
 	--background-light-subtle: var(--color-dap-blue-600);
-	--background-light-subtle-active: var(--color-dap-blue-400);
-	--background-light-subtle-hover: var(--color-dap-blue-500);
 	--background-neutral: var(--color-dap-gray-600);
 	--background-overlay: #001a4733;
 	--background-page: var(--color-dap-gray-100);
@@ -293,6 +293,8 @@
 	--background-transparent-hover: #ffffff26;
 	--background-warning: var(--color-dap-orange-100);
 	--background-warning-strong: var(--color-dap-orange-600);
+	--blue-grad-1: var(--color-dap-blue-700);
+	--blue-grad-2: #2ab2ff;
 	--border: var(--color-dap-gray-300);
 	--border-action-primary: var(--color-dap-blue-700);
 	--border-action-primary-hover: var(--color-dap-blue-800);
@@ -316,6 +318,14 @@
 	--border-success: var(--color-dap-green-600);
 	--border-tertiary: var(--color-dap-gray-100);
 	--border-warning-strong: var(--color-dap-orange-600);
+	--device-green: #39cea0;
+	--device-green-20: #39cea033;
+	--device-light-blue: #74b8f4;
+	--device-light-blue-20: #74b8f433;
+	--device-orange: #ea8078;
+	--device-orange-20: #ea807833;
+	--device-purple: #9747ff;
+	--device-purple-20: #9747ff33;
 	--error: var(--color-dap-red-050);
 	--font-action: var(--color-dap-blue-700);
 	--font-action-hover: var(--color-dap-blue-800);
@@ -420,6 +430,20 @@
 	--status-bg-success: var(--color-dap-green-075);
 	--status-bg-warning: var(--color-dap-orange-200);
 	--text-on-button: #000000;
+	--dap-icons-0: var(--color-dap-gray-050);
+	--dap-icons-100: var(--color-dap-blue-100);
+	--dap-icons-200: var(--color-dap-blue-200);
+	--dap-icons-300: var(--color-dap-blue-300);
+	--dap-icons-400: var(--color-dap-blue-400);
+	--dap-icons-50: var(--color-dap-blue-050);
+	--dap-icons-500: var(--color-dap-blue-500);
+	--dap-icons-600: var(--color-dap-blue-600);
+	--dap-icons-700: var(--color-dap-blue-700);
+	--dap-icons-75: var(--color-dap-blue-075);
+	--dap-icons-800: var(--color-dap-blue-800);
+	--dap-icons-900: var(--color-dap-blue-900);
+	--dap-icons-950: var(--color-dap-blue-950);
+	--dap-icons-grey: var(--color-dap-gray-600);
 }
 /* Spacing */
 :root {
@@ -473,5 +497,5 @@
 	/* string */
 	--font-family-base: Roboto;
 	--font-family-code: Fira Mono;
-	--font-family-heading: Roboto;
+	--font-family-heading: Poppins;
 }

package/src/styles/_typography.scss

@@ -164,6 +164,7 @@
 
 @mixin heading($font-weight: var(--heading-font-size-3xl), $line-height: var(--heading-line-height-3xl)) {
 	@include font-base;
+	font-family: var(--font-family-heading);
 	font-size: $font-weight;
 	font-weight: var(--font-weight-semi-bold);
 	line-height: $line-height;

package/src/styles/shared/_input.scss

@@ -3,6 +3,7 @@
 // Variables
 $input-text-height-small: 28px;
 $input-text-height-default: 36px;
+$input-text-height-large: 40px;
 $textarea-height-default: 120px;
 
 // Mixins
@@ -171,6 +172,11 @@ $textarea-height-default: 120px;
 		height: $input-text-height-default;
 	}
 
+	&.large {
+		height: $input-text-height-large;
+		max-height: $input-text-height-large;
+	}
+
 	&:has(input[type='number']) {
 		.input {
 			text-align: center;
@@ -240,6 +246,10 @@ $textarea-height-default: 120px;
 		height: $input-text-height-small;
 	}
 
+	&.large {
+		height: $input-text-height-large;
+	}
+
 	.clearIcon {
 		grid-column: 2;
 		grid-row: 1;

package/src/styles/styles.scss

@@ -5,6 +5,7 @@
 @use './utilities';
 @use './scrollbars';
 @use './root';
+@use './gradients';
 
 @use './shared/dropdown';
 @use './shared/input';

package/src/components/ds-table/context/ds-table-context.ts

@@ -1,112 +0,0 @@
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
-import type { Cell } from '@tanstack/react-table';
-import type { DsDataTableProps, DsTableRowSize } from '../ds-table.types';
-
-export interface EditingState<TData, TValue> {
-	cell: Cell<TData, TValue>;
-	draftValue: TValue;
-	error: string | null;
-}
-
-export interface DsTableContextType<TData, TValue> extends Partial<DsDataTableProps<TData, TValue>> {
-	/**
-	 * Whether the table is virtualized
-	 * @default false
-	 */
-	virtualized?: boolean;
-	/**
-	 * Row size variant
-	 * @default 'medium'
-	 */
-	rowSize: DsTableRowSize;
-	/**
-	 * ID of the currently active row
-	 */
-	activeRowId?: string | null;
-	/**
-	 * Toggles the collapsed state of a column group by its id.
-	 */
-	onToggleColumnGroup?: (groupId: string) => void;
-	/** The cell currently in edit mode, if any. */
-	editing: EditingState<TData, TValue> | null;
-	beginEdit: (cell: Cell<TData, TValue>) => void;
-	setDraft: (value: TValue) => void;
-	commit: (overrideValue?: TValue) => void;
-	cancel: () => void;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const DsTableContext = createContext<DsTableContextType<any, any> | null>(null);
-
-export const useDsTableContext = <TData, TValue>(): DsTableContextType<TData, TValue> => {
-	const context = useContext(DsTableContext);
-	if (!context) {
-		throw new Error('useDsTableContext must be used within DsTable');
-	}
-	return context as DsTableContextType<TData, TValue>;
-};
-
-/**
- * Hoisted editing state for single-cell-at-a-time inline editing.
- * Lives on {@link DsTableContext} so cell renderers and editors share one provider.
- */
-export const useEditingState = <TData, TValue>(
-	onCellEdit?: (row: TData, columnId: string, value: TValue) => void,
-	onCellValidate?: (row: TData, columnId: string, value: TValue) => string | null,
-) => {
-	const [editing, setEditing] = useState<EditingState<TData, TValue> | null>(null);
-
-	const onCellEditRef = useRef(onCellEdit);
-	onCellEditRef.current = onCellEdit;
-
-	const onCellValidateRef = useRef(onCellValidate);
-	onCellValidateRef.current = onCellValidate;
-
-	const editingRef = useRef(editing);
-	editingRef.current = editing;
-
-	const beginEdit = useCallback((cell: Cell<TData, TValue>) => {
-		const current = editingRef.current;
-		if (current) {
-			const isSameCell = current.cell.row.id === cell.row.id && current.cell.column.id === cell.column.id;
-			if (isSameCell) {
-				return;
-			}
-		}
-		setEditing({
-			cell,
-			draftValue: cell.getValue(),
-			error: null,
-		});
-	}, []);
-
-	const setDraft = useCallback((value: TValue) => {
-		const current = editingRef.current;
-		if (!current) {
-			return;
-		}
-		setEditing({ ...current, draftValue: value, error: null });
-	}, []);
-
-	const commit = useCallback((overrideValue?: TValue) => {
-		const current = editingRef.current;
-		if (!current) {
-			return;
-		}
-		const valueToCommit = overrideValue !== undefined ? overrideValue : current.draftValue;
-		const error =
-			onCellValidateRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit) ?? null;
-		if (error !== null) {
-			setEditing({ ...current, draftValue: valueToCommit, error });
-			return;
-		}
-		onCellEditRef.current?.(current.cell.row.original, current.cell.column.id, valueToCommit);
-		setEditing(null);
-	}, []);
-
-	const cancel = useCallback(() => {
-		setEditing(null);
-	}, []);
-
-	return { editing, beginEdit, setDraft, commit, cancel };
-};