Appearance

Variables ​

File Information ​

  • Path: app/assets/scss/abstracts/_variables.scss
  • Purpose: Centralized design tokens and variables for the entire application
  • Type: Abstract (no CSS output)

Overview ​

The variables file contains all design tokens including colors, typography, spacing, borders, shadows, and transitions. These variables are auto-injected via Vite's additionalData configuration, making them available in all SCSS files without explicit imports.

Color System ​

Base Colors ​

The application uses an extensive color palette with shades from 100 (lightest) to 900 (darkest):

Red Color Palette ​

  • $red-color: #550916 (base)
  • $red-color-900 through $red-color-100: Shades from darkest to lightest
  • Used for: Error states, destructive actions, accents

Pink Color Palette ​

  • $pink-color: #4D2C31 (base)
  • $pink-color-900 through $pink-color-100: Shades
  • Used for: Secondary accents, decorative elements

Lavender Color Palette ​

  • $lavender-color: #272740 (base)
  • $lavender-color-900 through $lavender-color-100: Shades
  • Used for: UI elements, backgrounds, hover states

Cream Color Palette ​

  • $cream-color: #47453A (base)
  • $cream-color-900 through $cream-color-100: Shades
  • Used for: Neutral backgrounds, subtle elements

Teal Color Palette ​

  • $teal-color: #075850 (base)
  • $teal-color-900 through $teal-color-100: Shades
  • Used for: Success states, active indicators, selections

Orange Color Palette ​

  • $orange-color: #551C07 (base)
  • $orange-color-900 through $orange-color-100: Shades
  • Used for: Warning states, highlights

Blue Color Palette ​

  • $blue-color: #101755 (base)
  • $blue-color-900 through $blue-color-50: Shades (includes 350 variant)
  • Used for: Primary actions, links, interactive elements

Gray Color Palette ​

  • $gray-color: #3D3D3D (base)
  • $gray-color-900 through $gray-color-50: Shades (includes 250 and 150 variants)
  • Used for: Text, borders, backgrounds, neutral elements

Black Color Palette ​

  • $black-color: #000000 (base)
  • $black-color-900 through $black-color-100: Shades
  • Some shades reference gray colors for consistency

Green Color Palette ​

  • $green-color: #00A13B (base)
  • $green-color-900 through $green-color-100: Shades
  • Used for: Success indicators, positive states

Special Colors ​

  • $white-color: #FFFFFF
  • $menu-background-color: #F9F5EE (sidebar background)

Typography ​

Font Families ​

  • $font-family-body: 'Inter', sans-serif !important
  • $font-family-header: 'Space Grotesk', sans-serif !important

Font Sizes ​

  • $font-size-10: 10px
  • $font-size-12: 12px
  • $font-size-14: 14px
  • $font-size-16: 16px
  • $font-size-18: 18px
  • $font-size-22: 22px
  • $font-size-28: 28px
  • $font-size-34: 34px

Font Weights ​

  • $font-weight-thin: 100
  • $font-weight-extralight: 200
  • $font-weight-light: 300
  • $font-weight-regular: 400
  • $font-weight-medium: 500
  • $font-weight-semibold: 600
  • $font-weight-bold: 700
  • $font-weight-extrabold: 800
  • $font-weight-black: 900

Icon & Button Sizes ​

  • $icon-size-small: 32px
  • $icon-size-medium: 36px
  • $icon-size-large: 40px

Spacing System ​

Gaps ​

  • $gap-xs: 4px
  • $gap-sm: 8px
  • $gap-md: 12px
  • $gap-lg: 16px
  • $gap-xl: 24px

Border Radius ​

  • $border-radius-xs: 4px
  • $border-radius-sm: 8px
  • $border-radius-md: 12px
  • $border-radius-lg: 16px
  • $border-radius-xl: 20px

Border Colors ​

  • $border-color: $gray-color-200 (default border color)

Box Shadows ​

Shadow opacity values for consistent shadow effects:

  • $box-shadow-10: rgb(0 0 0 / 10%)
  • $box-shadow-15: rgb(0 0 0 / 15%)
  • $box-shadow-20: rgb(0 0 0 / 20%)
  • $box-shadow-25: rgb(0 0 0 / 25%)
  • $box-shadow-40: rgb(0 0 0 / 40%)
  • $box-shadow-60: rgb(0 0 0 / 60%)

Transitions ​

  • $transition-all-ease: all 0.4s ease-in-out !important

Usage Examples ​

Using Color Variables ​

scss
.button {
  background-color: $blue-color-500;
  color: $white-color;
  
  &:hover {
    background-color: $blue-color-700;
  }
}

Using Typography Variables ​

scss
.heading {
  font-family: $font-family-header;
  font-size: $font-size-28;
  font-weight: $font-weight-bold;
}

Using Spacing Variables ​

scss
.container {
  padding: $gap-lg;
  gap: $gap-md;
}

Using Border Radius ​

scss
.card {
  border-radius: $border-radius-sm;
}

Using Shadows ​

scss
.elevated {
  box-shadow: 0px 2px 6px 0px $box-shadow-10;
}

Best Practices ​

  1. Always use variables instead of hardcoded values
  2. Use appropriate color shades - lighter shades (100-300) for backgrounds, medium (400-600) for interactive elements, darker (700-900) for text and emphasis
  3. Maintain consistency - use the same variables across similar components
  4. Follow the spacing scale - use gap variables for consistent spacing
  5. Use semantic color names - prefer $blue-color-500 over #6473FF for maintainability
  • Mixins - Reusable mixins that use these variables
  • Base Styles - Base styles that use these variables
  • Components - Components that use these variables