refactor(editor): Update DS Input with new styles (no-changelog)

cubic.yaml

@@ -40,6 +40,14 @@ reviews:
     - Version files
 
     Approve if reasonably tested. Let humans handle edge cases.
+
+    ## Step 4: Design System Tokens
+
+    For any hard-coded visual values in CSS (colors, shadows, spacing), check
+    `@n8n/design-system/src/css/_primitives.scss` and
+    `@n8n/design-system/src/css/_tokens.scss` for an appropriate alternative.
+    If one exists, suggest using it. If none exist, ask why the hard-coded
+    value is required.
   custom_rules:
     - name: Tests
       description: |-
@@ -187,9 +195,15 @@ reviews:
         - Higher scrutiny for: expression engine, credential handling, code execution nodes, license enforcement, SSO integrations
         - Consider n8n's security audit categories: credentials, database, nodes, instance, filesystem risks
         - Community/custom nodes have higher risk profile than official nodes
+    - name: Design System Tokens
+      description: |-
+        For any hard-coded visual values in CSS (colors, shadows, spacing),
+        check `@n8n/design-system/src/css/_primitives.scss` and
+        `@n8n/design-system/src/css/_tokens.scss` for an appropriate alternative.
+        If one exists, suggest using it. If none exist, ask why the hard-coded
+        value is required.
 pr_descriptions:
   generate: false
   instructions: Each PR is supposed to have a limited scope. In your review, focus on changes made in the PR and avoid pointing out problems you found in the code that already existed.
 issues:
   fix_with_cubic_buttons: true
-

packages/frontend/@n8n/design-system/src/components/DateRangePicker/DateRangePicker.stories.ts

@@ -4,7 +4,7 @@ import DateRangePicker from './DateRangePicker.vue';
 
 const meta = {
 	component: DateRangePicker,
-	title: 'Components v2/DateRangePicker',
+	title: 'Experimental/DateRangePicker',
 } satisfies Meta<typeof DateRangePicker>;
 
 export default meta;

packages/frontend/@n8n/design-system/src/components/IconTextButton/IconTextButton.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import IconTextButton from './IconTextButton.vue';
 
 export default {
-	title: 'Atoms/IconTextButton',
+	title: 'Core/IconTextButton',
 	component: IconTextButton,
 	argTypes: {
 		icon: {

packages/frontend/@n8n/design-system/src/components/N8nActionBox/ActionBox.stories.ts

@@ -6,7 +6,7 @@ import N8nLink from '../N8nLink';
 import N8nText from '../N8nText';
 
 export default {
-	title: 'Atoms/ActionBox',
+	title: 'Core/ActionBox',
 	component: N8nActionBox,
 	argTypes: {
 		calloutTheme: {

packages/frontend/@n8n/design-system/src/components/N8nActionDropdown/ActionDropdown.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nActionDropdown from './ActionDropdown.vue';
 
 export default {
-	title: 'Atoms/ActionDropdown',
+	title: 'Core/ActionDropdown',
 	component: N8nActionDropdown,
 	argTypes: {
 		placement: {

packages/frontend/@n8n/design-system/src/components/N8nActionToggle/ActionToggle.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nActionToggle from './ActionToggle.vue';
 
 export default {
-	title: 'Atoms/ActionToggle',
+	title: 'Core/ActionToggle',
 	component: N8nActionToggle,
 	argTypes: {
 		placement: {

packages/frontend/@n8n/design-system/src/components/N8nAlert/Alert.stories.ts

@@ -4,7 +4,7 @@ import N8nAlert from './Alert.vue';
 import N8nIcon from '../N8nIcon';
 
 export default {
-	title: 'Atoms/Alert',
+	title: 'Core/Alert',
 	component: N8nAlert,
 	argTypes: {
 		type: {

packages/frontend/@n8n/design-system/src/components/N8nAlertDialog/AlertDialog.stories.ts

@@ -5,7 +5,7 @@ import { N8nAlertDialog } from '@n8n/design-system/components/N8nAlertDialog';
 import N8nButton from '@n8n/design-system/components/N8nButton/Button.vue';
 
 const meta = {
-	title: 'Components/N8nAlertDialog',
+	title: 'Core/AlertDialog',
 	component: N8nAlertDialog,
 	parameters: {
 		docs: {

packages/frontend/@n8n/design-system/src/components/N8nAvatar/Avatar.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nAvatar from './Avatar.vue';
 
 export default {
-	title: 'Atoms/Avatar',
+	title: 'Core/Avatar',
 	component: N8nAvatar,
 	argTypes: {
 		size: {

packages/frontend/@n8n/design-system/src/components/N8nBadge/Badge.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nBadge from './Badge.vue';
 
 export default {
-	title: 'Atoms/Badge',
+	title: 'Core/Badge',
 	component: N8nBadge,
 	argTypes: {
 		theme: {

packages/frontend/@n8n/design-system/src/components/N8nBlockUi/BlockUi.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nBlockUi from './BlockUi.vue';
 
 export default {
-	title: 'Atoms/BlockUI',
+	title: 'Core/BlockUI',
 	component: N8nBlockUi,
 };
 

packages/frontend/@n8n/design-system/src/components/N8nBreadcrumbs/Breadcrumbs.stories.ts

@@ -9,7 +9,7 @@ import ActionToggle from '../N8nActionToggle/ActionToggle.vue';
 import Tags from '../N8nTags/Tags.vue';
 
 export default {
-	title: 'Atoms/Breadcrumbs',
+	title: 'Core/Breadcrumbs',
 	component: Breadcrumbs,
 	argTypes: {
 		items: { control: 'object' },

packages/frontend/@n8n/design-system/src/components/N8nButton/Button.stories.ts

@@ -4,7 +4,7 @@ import N8nButton from './Button.vue';
 import N8nIcon from '../N8nIcon/Icon.vue';
 
 const meta = {
-	title: 'Atoms/Button',
+	title: 'Core/Button',
 	component: N8nButton,
 	argTypes: {
 		variant: {

packages/frontend/@n8n/design-system/src/components/N8nButton/Button.vue

@@ -186,35 +186,35 @@ const handleClick = (event: MouseEvent) => {
 	}
 
 	&.xsmall {
-		--button--height: 1.5rem;
+		--button--height: var(--height--xs);
 		--button--padding: 0 var(--spacing--2xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--2xs);
 	}
 
 	&.small {
-		--button--height: 1.75rem;
+		--button--height: var(--height--sm);
 		--button--padding: 0 var(--spacing--xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--xs);
 	}
 
 	&.medium {
-		--button--height: 2rem;
+		--button--height: var(--height--md);
 		--button--padding: 0 var(--spacing--xs);
 		--button--radius: var(--radius--3xs);
 		--button--font-size: var(--font-size--sm);
 	}
 
 	&.large {
-		--button--height: 2.25rem;
+		--button--height: var(--height--lg);
 		--button--padding: 0 var(--spacing--sm);
 		--button--radius: var(--radius--2xs);
 		--button--font-size: var(--font-size--sm);
 	}
 
 	&.xlarge {
-		--button--height: 2.5rem;
+		--button--height: var(--height--xl);
 		--button--padding: 0 var(--spacing--sm);
 		--button--radius: var(--radius--xs);
 		--button--font-size: var(--font-size--md);
@@ -251,7 +251,7 @@ const handleClick = (event: MouseEvent) => {
 		);
 		--button--shadow:
 			0 1px 3px light-dark(var(--color--black-alpha-100), var(--color--black-alpha-300)),
-			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));
+			0 0 0 1.5px light-dark(transparent, var(--color--black-alpha-100));
 		--button--shadow--hover:
 			0 1px 3px 0 light-dark(var(--color--black-alpha-200), var(--color--black-alpha-300)),
 			0 0 0 1px light-dark(transparent, var(--color--black-alpha-100));

packages/frontend/@n8n/design-system/src/components/N8nCallout/Callout.stories.ts

@@ -5,7 +5,7 @@ import N8nLink from '../N8nLink';
 import N8nText from '../N8nText';
 
 export default {
-	title: 'Atoms/Callout',
+	title: 'Core/Callout',
 	component: N8nCallout,
 	argTypes: {
 		theme: {

packages/frontend/@n8n/design-system/src/components/N8nCard/Card.stories.ts

@@ -6,7 +6,7 @@ import N8nIcon from '../N8nIcon/Icon.vue';
 import N8nText from '../N8nText/Text.vue';
 
 export default {
-	title: 'Atoms/Card',
+	title: 'Core/Card',
 	component: N8nCard,
 };
 

packages/frontend/@n8n/design-system/src/components/N8nCircleLoader/CircleLoader.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nCircleLoader from './CircleLoader.vue';
 
 export default {
-	title: 'Atoms/CircleLoader',
+	title: 'Core/CircleLoader',
 	component: N8nCircleLoader,
 	argTypes: {
 		radius: {

packages/frontend/@n8n/design-system/src/components/N8nCollapsiblePanel/CollapsiblePanel.stories.ts

@@ -9,7 +9,7 @@ import N8nOption from '../N8nOption';
 import N8nSelect from '../N8nSelect';
 
 export default {
-	title: 'Atoms/CollapsiblePanel',
+	title: 'Core/CollapsiblePanel',
 	component: N8nCollapsiblePanel,
 	argTypes: {
 		modelValue: {

packages/frontend/@n8n/design-system/src/components/N8nColorPicker/ColorPicker.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nColorPicker from './ColorPicker.vue';
 
 export default {
-	title: 'Atoms/ColorPicker',
+	title: 'Core/ColorPicker',
 	component: N8nColorPicker,
 	argTypes: {
 		disabled: {

packages/frontend/@n8n/design-system/src/components/N8nCommandBar/CommandBar.stories.ts

@@ -101,7 +101,7 @@ const sampleItems = [
 ];
 
 export default {
-	title: 'Molecules/CommandBar',
+	title: 'Core/CommandBar',
 	component: N8nCommandBar,
 	argTypes: {
 		placeholder: {

packages/frontend/@n8n/design-system/src/components/N8nDatatable/Datatable.stories.ts

@@ -4,7 +4,7 @@ import { rows, columns } from './__tests__/data';
 import N8nDatatable from './Datatable.vue';
 
 export default {
-	title: 'Atoms/Datatable',
+	title: 'Core/Datatable',
 	component: N8nDatatable,
 };
 

packages/frontend/@n8n/design-system/src/components/N8nDialog/Dialog.stories.ts

@@ -13,7 +13,7 @@ import {
 } from '@n8n/design-system/components/N8nDialog';
 
 const meta = {
-	title: 'Components/Dialog',
+	title: 'Core/Dialog',
 	// Use N8nDialog as component; docgen may have issues with reka-ui imports but types must match
 	component: N8nDialog,
 	parameters: {

packages/frontend/@n8n/design-system/src/components/N8nDropdown/Dropdown.stories.ts

@@ -7,7 +7,7 @@ import N8nDropdown from './Dropdown.vue';
 import type { N8nDropdownOption } from './Dropdown.vue';
 
 export default {
-	title: 'Atoms/Dropdown',
+	title: 'Core/Dropdown',
 	component: N8nDropdown,
 	argTypes: {},
 	parameters: {

packages/frontend/@n8n/design-system/src/components/N8nExternalLink/ExternalLink.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nExternalLink from './ExternalLink.vue';
 
 export default {
-	title: 'Atoms/ExternalLink',
+	title: 'Core/ExternalLink',
 	component: N8nExternalLink,
 	argTypes: {
 		size: {

packages/frontend/@n8n/design-system/src/components/N8nFormBox/FormBox.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormBox from './FormBox.vue';
 
 export default {
-	title: 'Modules/FormBox',
+	title: 'Core/FormBox',
 	component: N8nFormBox,
 	argTypes: {},
 	parameters: {

packages/frontend/@n8n/design-system/src/components/N8nFormInput/FormInput.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormInput from './FormInput.vue';
 
 export default {
-	title: 'Modules/FormInput',
+	title: 'Core/FormInput',
 	component: N8nFormInput,
 	argTypes: {},
 };

packages/frontend/@n8n/design-system/src/components/N8nFormInputs/FormInputs.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nFormInputs from './FormInputs.vue';
 
 export default {
-	title: 'Modules/FormInputs',
+	title: 'Core/FormInputs',
 	component: N8nFormInputs,
 	argTypes: {},
 	parameters: {

packages/frontend/@n8n/design-system/src/components/N8nHeading/Heading.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nHeading from './Heading.vue';
 
 export default {
-	title: 'Atoms/Heading',
+	title: 'Core/Heading',
 	component: N8nHeading,
 	argTypes: {
 		size: {

packages/frontend/@n8n/design-system/src/components/N8nIcon/Icon.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nIcon from './Icon.vue';
 
 export default {
-	title: 'Atoms/Icon',
+	title: 'Core/Icon',
 	component: N8nIcon,
 	argTypes: {
 		icon: {

packages/frontend/@n8n/design-system/src/components/N8nIconButton/IconButton.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nIconButton from './IconButton.vue';
 
 export default {
-	title: 'Atoms/Icon Button',
+	title: 'Core/Icon Button',
 	component: N8nIconButton,
 	argTypes: {
 		type: {

packages/frontend/@n8n/design-system/src/components/N8nIconPicker/IconPicker.stories.ts

@@ -5,7 +5,7 @@ import N8nIconPicker from './IconPicker.vue';
 import { type IconOrEmoji } from './types';
 
 export default {
-	title: 'Atoms/Icon Picker',
+	title: 'Core/Icon Picker',
 	component: N8nIconPicker,
 	argTypes: {
 		buttonTooltip: {

packages/frontend/@n8n/design-system/src/components/N8nInfoAccordion/InfoAccordion.stories.ts

@@ -4,7 +4,7 @@ import { action } from 'storybook/actions';
 import N8nInfoAccordion from './InfoAccordion.vue';
 
 export default {
-	title: 'Atoms/Info Accordion',
+	title: 'Core/Info Accordion',
 	component: N8nInfoAccordion,
 	argTypes: {},
 	parameters: {

packages/frontend/@n8n/design-system/src/components/N8nInfoTip/InfoTip.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import N8nInfoTip from './InfoTip.vue';
 
 export default {
-	title: 'Atoms/InfoTip',
+	title: 'Core/InfoTip',
 	component: N8nInfoTip,
 };
 

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.stories.ts

@@ -3,7 +3,7 @@ import type { StoryFn } from '@storybook/vue3-vite';
 import InlineTextEdit from './InlineTextEdit.vue';
 
 export default {
-	title: 'Atoms/InlineTextEdit',
+	title: 'Core/InlineTextEdit',
 	component: InlineTextEdit,
 };