github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-30 16:26:59 +02:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity Graph

update script to update more primary tokens

Browse Source
This commit is contained in:
Mutasem Aldmour 2025-10-09 16:02:05 +02:00
parent 76c7f19c6f
commit 6e1c49e90a
No known key found for this signature in database
GPG Key ID: 3DFA8122BB7FD6B8
4 changed files with 152 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/frontend/@n8n/design-system/src/css/_tokens.dark.deprecated.scss
View File

@ -5,6 +5,10 @@
**/
@mixin deprecatedTheme {
--color-danger: var(--p--color--alt-h-310);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.1);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.2);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
}
body[data-theme='dark'] {

51
packages/frontend/@n8n/design-system/src/css/_tokens.deprecated.scss
View File

@ -67,6 +67,57 @@
--color-background-light-base: var(--p--color--gray-025);
--color-background-light: var(--p--color--gray-010);
--color-background-xlight: var(--p--color--white);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-color-base: var(--color--foreground);
--border-color-light: var(--color--foreground--tint-1);
--border-style-base: solid;
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
--font-size-4xs: 0.5rem;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-line-height-xsmall: 1;
--font-line-height-compact: 1.25;
--font-line-height-regular: 1.3;
--font-line-height-loose: 1.35;
--font-line-height-xloose: 1.5;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-family: InterVariable, sans-serif;
--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
--spacing-3xs: 0.375rem;
--spacing-2xs: 0.5rem;
--spacing-xs: 0.75rem;
--spacing-s: 1rem;
--spacing-m: 1.25rem;
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 8rem;
--spacing-5xl: 16rem;
}
:root {

138
packages/frontend/@n8n/design-system/src/css/_tokens.scss
View File

@ -65,6 +65,57 @@
--color--background--light-2: var(--p--color--gray-010);
--color--background--light-3: var(--p--color--white);
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-color-base: var(--color--foreground);
--border-color-light: var(--color--foreground--tint-1);
--border-style-base: solid;
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
--font-size-4xs: 0.5rem;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-line-height-xsmall: 1;
--font-line-height-compact: 1.25;
--font-line-height-regular: 1.3;
--font-line-height-loose: 1.35;
--font-line-height-xloose: 1.5;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-family: InterVariable, sans-serif;
--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
--spacing-3xs: 0.375rem;
--spacing-2xs: 0.5rem;
--spacing-xs: 0.75rem;
--spacing-s: 1rem;
--spacing-m: 1.25rem;
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 8rem;
--spacing-5xl: 16rem;
// Secondary tokens
// LangChain
@ -596,7 +647,6 @@
--color-info-tint-2: var(--p--color--gray-040);
--color-grey: var(--p--color--gray-200);
--color-light-grey: var(--p--color--gray-120);
--color-neutral: var(--p--color--gray-490);
--color-configurable-node-name: var(--color--text--shade-1);
--color-secondary-link: var(--color--secondary);
--color-secondary-link-hover: var(--color--secondary--shade-1);
@ -606,92 +656,6 @@
--color-menu-hover-background: var(--p--color--gray-120);
--color-menu-active-background: var(--p--color--gray-120);
// Generated Color Shades from 50 to 950
// Not yet used in design system
@each $color in ('neutral', 'success', 'warning', 'danger') {
@each $shade
in (
50,
100,
150,
200,
250,
300,
350,
400,
450,
500,
550,
600,
650,
700,
750,
800,
850,
900,
950
)
{
--color-#{$color}-#{$shade}-l: #{math.div($shade, 10)}#{'%'};
--color-#{$color}-#{$shade}: hsl(
var(--color-#{$color}-h),
var(--color-#{$color}-s),
var(--color-#{$color}-#{$shade}-l)
);
}
}
--box-shadow-base: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12);
--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
--border-radius-xlarge: 12px;
--border-radius-large: 8px;
--border-radius-base: 4px;
--border-radius-small: 2px;
--border-color-base: var(--color--foreground);
--border-color-light: var(--color--foreground--tint-1);
--border-style-base: solid;
--border-width-base: 1px;
--border-base: var(--border-width-base) var(--border-style-base) var(--color--foreground);
--font-size-4xs: 0.5rem;
--font-size-3xs: 0.625rem;
--font-size-2xs: 0.75rem;
--font-size-xs: 0.8125rem;
--font-size-s: 0.875rem;
--font-size-m: 1rem;
--font-size-l: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.75rem;
--font-line-height-xsmall: 1;
--font-line-height-compact: 1.25;
--font-line-height-regular: 1.3;
--font-line-height-loose: 1.35;
--font-line-height-xloose: 1.5;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-bold: 600;
--font-family: InterVariable, sans-serif;
--font-family-monospace: CommitMono, ui-monospace, Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--spacing-5xs: 0.125rem;
--spacing-4xs: 0.25rem;
--spacing-3xs: 0.375rem;
--spacing-2xs: 0.5rem;
--spacing-xs: 0.75rem;
--spacing-s: 1rem;
--spacing-m: 1.25rem;
--spacing-l: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
--spacing-4xl: 8rem;
--spacing-5xl: 16rem;
// Params
--color-icon-base: var(--color--text--tint-1);
--color-icon-hover: var(--p--color--primary-320);

48
scripts/replace-css-tokens.sh
View File

@ -91,7 +91,7 @@ echo "✓ Foreground color tokens replaced"
echo ""
# Background color tokens
echo "[8/9] Replacing background color tokens..."
echo "[8/10] Replacing background color tokens..."
echo "$files" | xargs perl -pi -e 's/--color-background-medium/--color--background--shade-1/g'
echo "$files" | xargs perl -pi -e 's/--color-background-dark/--color--background--shade-2/g'
echo "$files" | xargs perl -pi -e 's/--color-background-xlight/--color--background--light-3/g'
@ -101,7 +101,51 @@ echo "$files" | xargs perl -pi -e 's/--color-background-base/--color--background
echo "✓ Background color tokens replaced"
echo ""
echo "[9/9] Verifying replacements..."
# Box shadow tokens
echo "[9/11] Replacing box shadow tokens..."
echo "$files" | xargs perl -pi -e 's/--box-shadow-light/--shadow--light/g'
echo "$files" | xargs perl -pi -e 's/--box-shadow-dark/--shadow--dark/g'
echo "$files" | xargs perl -pi -e 's/--box-shadow-base/--shadow/g'
echo "✓ Box shadow tokens replaced"
echo ""
# Border radius tokens
echo "[10/12] Replacing border radius tokens..."
echo "$files" | xargs perl -pi -e 's/--border-radius-xlarge/--radius-xl/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-large/--radius-lg/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-small/--radius-sm/g'
echo "$files" | xargs perl -pi -e 's/--border-radius-base/--radius/g'
echo "✓ Border radius tokens replaced"
echo ""
# Border tokens (remove -base suffix)
echo "[11/13] Replacing border tokens..."
echo "$files" | xargs perl -pi -e 's/--border-style-base/--border-style/g'
echo "$files" | xargs perl -pi -e 's/--border-width-base/--border-width/g'
echo "$files" | xargs perl -pi -e 's/--border-color-base/--border-color/g'
echo "$files" | xargs perl -pi -e 's/--border-base(?!-)/--border/g'
echo "✓ Border tokens replaced"
echo ""
# Font line height tokens
echo "[12/14] Replacing font line height tokens..."
echo "$files" | xargs perl -pi -e 's/--font-line-height-xsmall/--font-line-height-xs/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-compact/--font-line-height-sm/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-regular/--font-line-height-md/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-loose/--font-line-height-lg/g'
echo "$files" | xargs perl -pi -e 's/--font-line-height-xloose/--font-line-height-xl/g'
echo "✓ Font line height tokens replaced"
echo ""
# Spacing tokens
echo "[13/13] Replacing spacing tokens..."
echo "$files" | xargs perl -pi -e 's/--spacing-s(?!-)/--spacing-sm/g'
echo "$files" | xargs perl -pi -e 's/--spacing-m(?!-)/--spacing-md/g'
echo "$files" | xargs perl -pi -e 's/--spacing-l(?!-)/--spacing-lg/g'
echo "✓ Spacing tokens replaced"
echo ""
echo "[13/13] Verifying replacements..."
remaining=$(echo "$files" | xargs grep -l "--color-primary\|--color-secondary\|--color-success\|--color-warning\|--color-danger\|--color-text\|--color-foreground\|--color-background" 2>/dev/null | xargs grep "--color-primary\|--color-secondary\|--color-success\|--color-warning\|--color-danger\|--color-text\|--color-foreground\|--color-background" 2>/dev/null | grep -v "\-\-color\-\-" | wc -l | xargs)
echo "Remaining old tokens found: $remaining"
echo ""