mirror of
https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git
synced 2025-12-16 09:36:44 +00:00
118 lines
2.2 KiB
Markdown
118 lines
2.2 KiB
Markdown
# CLAUDE.md
|
|
|
|
Extra information, specific to the frontend codebase.
|
|
|
|
### CSS Variables Reference
|
|
|
|
Use the following CSS variables to maintain consistency across the
|
|
application. These variables cover colors, spacing, typography, and borders.
|
|
|
|
#### Colors
|
|
```css
|
|
/* Primary Colors */
|
|
--color-primary-shade-1
|
|
--color-primary
|
|
--color-primary-tint-1
|
|
--color-primary-tint-2
|
|
--color-primary-tint-3
|
|
|
|
/* Secondary Colors */
|
|
--color-secondary-shade-1
|
|
--color-secondary
|
|
--color-secondary-tint-1
|
|
--color-secondary-tint-3
|
|
|
|
/* Success Colors */
|
|
--color-success-shade-1
|
|
--color-success
|
|
--color-success-light
|
|
--color-success-light-2
|
|
--color-success-tint-1
|
|
--color-success-tint-2
|
|
|
|
/* Warning Colors */
|
|
--color-warning-shade-1
|
|
--color-warning
|
|
--color-warning-tint-1
|
|
--color-warning-tint-2
|
|
|
|
/* Danger Colors */
|
|
--color-danger-shade-1
|
|
--color-danger
|
|
--color-danger-tint-1
|
|
--color-danger-tint-2
|
|
|
|
/* Text Colors */
|
|
--color-text-dark
|
|
--color-text-base
|
|
--color-text-light
|
|
--color-text-lighter
|
|
--color-text-xlight
|
|
--color-text-danger
|
|
|
|
/* Foreground Colors */
|
|
--color-foreground-xdark
|
|
--color-foreground-dark
|
|
--color-foreground-base
|
|
--color-foreground-light
|
|
--color-foreground-xlight
|
|
|
|
/* Background Colors */
|
|
--color-background-dark
|
|
--color-background-medium
|
|
--color-background-base
|
|
--color-background-light
|
|
--color-background-xlight
|
|
```
|
|
|
|
#### Spacing
|
|
```css
|
|
--spacing-5xs: 2px
|
|
--spacing-4xs: 4px
|
|
--spacing-3xs: 6px
|
|
--spacing-2xs: 8px
|
|
--spacing-xs: 12px
|
|
--spacing-s: 16px
|
|
--spacing-m: 20px
|
|
--spacing-l: 24px
|
|
--spacing-xl: 32px
|
|
--spacing-2xl: 48px
|
|
--spacing-3xl: 64px
|
|
--spacing-4xl: 128px
|
|
--spacing-5xl: 256px
|
|
```
|
|
|
|
#### Typography
|
|
```css
|
|
--font-size-3xs: 10px
|
|
--font-size-2xs: 12px
|
|
--font-size-xs: 13px
|
|
--font-size-s: 14px
|
|
--font-size-m: 16px
|
|
--font-size-l: 18px
|
|
--font-size-xl: 20px
|
|
--font-size-2xl: 28px
|
|
|
|
--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-bold: 600
|
|
--font-family: InterVariable, sans-serif
|
|
```
|
|
|
|
#### Borders
|
|
```css
|
|
--border-radius-small: 2px
|
|
--border-radius-base: 4px
|
|
--border-radius-large: 8px
|
|
--border-radius-xlarge: 12px
|
|
|
|
--border-width-base: 1px
|
|
--border-style-base: solid
|
|
--border-base: var(--border-width-base) var(--border-style-base) var(--color-foreground-base)
|
|
```
|
|
|