sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity
Files
c7fc8d8661f1ba7a148d1e2a9bb6fbc3d73878f6
ISA-Frontend/.claude/skills/tailwind/references/design-system.md
Lorenz Hilpert c7fc8d8661 🚚 refactor(skills): rename tailwind-isa skill to tailwind 
- Rename skill directory from tailwind-isa to tailwind
- Update skill name in frontmatter metadata
- Update all references in CLAUDE.md (2 locations)

Simplifies naming while maintaining clear purpose. The skill provides
Tailwind CSS utilities and design system guidance for the ISA project.
2025-10-29 13:37:56 +01:00

6.1 KiB
Raw Blame History

ISA Tailwind Design System Reference

This document provides a comprehensive reference for the ISA-specific Tailwind CSS design system used throughout the ISA-Frontend project.

Custom Breakpoints

ISA Breakpoints (Preferred)

  • isa-desktop: 1024px
  • isa-desktop-l: 1440px
  • isa-desktop-xl: 1920px

Note: Prefer using the breakpoint service from @isa/ui/layout for reactive breakpoint detection instead of CSS-only solutions.

Z-Index System

Predefined z-index values for consistent layering:

  • z-dropdown: 50
  • z-sticky: 100
  • z-fixed: 150
  • z-modalBackdrop: 200
  • z-modal: 250
  • z-popover: 300
  • z-tooltip: 350

Usage: z-modal, z-tooltip, etc.

Color Palette

IMPORTANT: Only use isa-* prefixed colors in new code. Other colors listed below exist only for backwards compatibility and should NOT be used.

ISA Brand Colors (Use These)

Accent Colors

  • isa-accent-red: #DF001B
  • isa-accent-blue: #354ACB
  • isa-accent-green: #26830C

Accent Color Shades

  • isa-shades-red-600: #C60018
  • isa-shades-red-700: #B30016

Secondary Colors (100-900 scale)

  • isa-secondary-100: #EBEFFF (lightest)
  • isa-secondary-200: #B9C4FF
  • isa-secondary-300: #8FA0FF
  • isa-secondary-400: #6E82FE
  • isa-secondary-500: #556AEB
  • isa-secondary-600: #354ACB
  • isa-secondary-700: #1D2F99
  • isa-secondary-800: #0C1A66
  • isa-secondary-900: #020A33 (darkest)

Neutral Colors (100-900 scale)

  • isa-neutral-100: #F8F9FA (lightest)
  • isa-neutral-200: #E9ECEF
  • isa-neutral-300: #DEE2E6
  • isa-neutral-400: #CED4DA
  • isa-neutral-500: #A5ACB4
  • isa-neutral-600: #6C757D
  • isa-neutral-700: #495057
  • isa-neutral-800: #343A40
  • isa-neutral-900: #212529 (darkest)

Basic Colors

  • isa-black: #000000
  • isa-white: #FFFFFF

Usage: bg-isa-accent-red, text-isa-secondary-600, border-isa-neutral-400

Deprecated Colors (DO NOT USE - Backwards Compatibility Only)

The following colors exist in the codebase for backwards compatibility. DO NOT use them in new code.

Deprecated Semantic Colors

  • background, background-content
  • surface, surface-content, surface-2, surface-2-content
  • components-menu, components-menu-content, components-menu-seperator, components-menu-hover
  • components-button, components-button-content, components-button-light, components-button-hover
  • accent-1, accent-1-content, accent-1-hover, accent-1-active
  • accent-2, accent-2-content, accent-2-hover, accent-2-active

Deprecated Named Colors

  • warning, brand
  • customer, font-customer, active-customer, inactive-customer, disabled-customer
  • branch, font-branch, active-branch, inactive-branch, disabled-branch
  • accent-teal, accent-green, accent-orange, accent-darkblue
  • ucla-blue, wild-blue-yonder, dark-cerulean, cool-grey
  • glitter, munsell, onyx, dark-goldenrod, cadet, cadet-blue
  • control-border, background-liste

These colors should NOT be used in new code. Use isa-* prefixed colors instead.

Typography

ISA Typography Utilities

All typography utilities use Open Sans font family.

Headings

Heading 1 Bold (.isa-text-heading-1-bold):

  • Size: 3.75rem (60px)
  • Weight: 700
  • Line Height: 4.5rem (72px)
  • Letter Spacing: 0.02813rem

Heading 2 Bold (.isa-text-heading-2-bold):

  • Size: 3rem (48px)
  • Weight: 700
  • Line Height: 4rem (64px)

Heading 3 Bold (.isa-text-heading-3-bold):

  • Size: 2.5rem (40px)
  • Weight: 700
  • Line Height: 3rem (48px)

Subtitles

Subtitle 1 Regular (.isa-text-subtitle-1-regular):

  • Size: 1.75rem (28px)
  • Weight: 400
  • Line Height: 2.5rem (40px)

Subtitle 1 Bold (.isa-text-subtitle-1-bold):

  • Size: 1.75rem (28px)
  • Weight: 700
  • Line Height: 2.5rem (40px)

Subtitle 2 Bold (.isa-text-subtitle-2-bold):

  • Size: 1rem (16px)
  • Weight: 700
  • Line Height: 1.5rem (24px)
  • Letter Spacing: 0.025rem
  • Text Transform: UPPERCASE

Body Text

Body 1 Variants (1rem / 16px base):

  • .isa-text-body-1-bold: Weight 700, Line Height 1.5rem
  • .isa-text-body-1-bold-big: Size 1.25rem, Weight 700, Line Height 1.75rem
  • .isa-text-body-1-bold-xl: Size 1.375rem, Weight 700, Line Height 2.125rem
  • .isa-text-body-1-semibold: Weight 600, Line Height 1.5rem
  • .isa-text-body-1-regular: Weight 400, Line Height 1.5rem
  • .isa-text-body-1-regular-big: Size 1.25rem, Weight 400, Line Height 1.75rem
  • .isa-text-body-1-regular-xl: Size 1.375rem, Weight 400, Line Height 2.125rem

Body 2 Variants (0.875rem / 14px base):

  • .isa-text-body-2-bold: Weight 700, Line Height 1.25rem
  • .isa-text-body-2-bold-big: Size 1.125rem, Weight 700, Line Height 1.625rem
  • .isa-text-body-2-bold-xl: Size 1.25rem, Weight 700, Line Height 1.75rem
  • .isa-text-body-2-semibold: Weight 600, Line Height 1.25rem
  • .isa-text-body-2-regular: Weight 400, Line Height 1.25rem
  • .isa-text-body-2-regular-big: Size 1.125rem, Weight 400, Line Height 1.625rem
  • .isa-text-body-2-regular-xl: Size 1.125rem, Weight 400, Line Height 1.75rem

Caption Text

Caption Variants (0.75rem / 12px base):

  • .isa-text-caption-bold: Weight 700, Line Height 1rem
  • .isa-text-caption-bold-big: Size 0.875rem, Weight 700, Line Height 1.25rem
  • .isa-text-caption-bold-xl: Size 0.875rem, Weight 700, Line Height 1.25rem
  • .isa-text-caption-caps: Weight 700, Line Height 1rem, UPPERCASE
  • .isa-text-caption-regular: Weight 400, Line Height 1rem
  • .isa-text-caption-regular-big: Size 0.875rem, Weight 400, Line Height 1.25rem
  • .isa-text-caption-regular-xl: Size 0.875rem, Weight 400, Line Height 1.25rem

Best Practices

  1. Use ISA-prefixed utilities: Prefer isa-text-*, isa-accent-*, etc. for consistency
  2. Follow typography system: Use the predefined typography classes instead of custom font sizes
  3. Use breakpoint service: Import from @isa/ui/layout for reactive breakpoint detection
  4. Z-index system: Always use predefined z-index utilities for layering
Reference in New Issue View Git Blame Copy Permalink