Styles

Ecosistema completo para organización y gestión de contenido con interfaces espaciales

@theme-styles

Design tokens, SCSS utilities, effects, and mixins.

Structure

Importing

For Applications (Global Styles)

Add to global styles once:

// ✅ RECOMMENDED: Direct path with @use for proper module resolution
@use 'libs/theme-system/theme-styles/src/lib/styles/index' as *;

// Or import specific utilities for smaller bundles
@use 'libs/theme-system/theme-styles/src/lib/styles/utilities/ux-layout' as *;
@use 'libs/theme-system/theme-styles/src/lib/styles/utilities/ux-colors' as *;
@use 'libs/theme-system/theme-styles/src/lib/styles/effects/index' as *;

For Library Components

Use clean path mappings (recommended) or relative paths:

Option 1: Path Mappings (Recommended)

// ✅ BEST: Use clean path mapping (configured in tsconfig.base.json)
@use '@theme-styles/scss' as *;

Option 2: Relative Paths (Fallback)

// ✅ CORRECT: Use relative path for library components
@use '../../../../../../libs/theme-system/theme-styles/src/lib/styles/index' as *;

// Calculate relative path: from libs/your-library/src/lib/components/your-component/
// to libs/theme-system/theme-styles/src/lib/styles/index

Best Practices

// ✅ PREFERRED: Direct CSS properties with theme variables
.my-component {
  min-height: 100vh;
  background-color: var(--ux-background);
  display: flex;
  color: var(--ux-on-background);
  padding: var(--ux-spacing-md);
  border-radius: var(--ux-radius-md);
}

// ✅ GOOD: Use theme mixins when available
.my-button {
  @include ux-button('primary');
  @include ux-shadow('sm');
}

// ✅ GOOD: Use responsive mixins
.my-component {
  padding: var(--ux-spacing-md);
  
  @include ux-media-max-sm {
    padding: var(--ux-spacing-sm);
  }
}

// ❌ AVOID: @extend with potentially missing utilities
// @extend .ux-min-h-screen;
// @extend .ux-bg-background;

Effects

Responsive Mixins

Available breakpoint mixins:

// Min-width breakpoints
@include ux-media-xs { /* 480px+ */ }
@include ux-media-sm { /* 640px+ */ }
@include ux-media-md { /* 768px+ */ }
@include ux-media-lg { /* 1024px+ */ }
@include ux-media-xl { /* 1280px+ */ }
@include ux-media-2xl { /* 1536px+ */ }

// Max-width breakpoints
@include ux-media-max-xs { /* < 480px */ }
@include ux-media-max-sm { /* < 640px */ }
@include ux-media-max-md { /* < 768px */ }
@include ux-media-max-lg { /* < 1024px */ }
@include ux-media-max-xl { /* < 1280px */ }
@include ux-media-max-2xl { /* < 1536px */ }

// Custom range
@include ux-media-between('sm', 'lg') { /* 640px - 1023px */ }

NX Monorepo Configuration

1. Path Mappings (tsconfig.base.json)

{
  "compilerOptions": {
    "paths": {
      "@theme-styles/scss": ["libs/theme-system/theme-styles/src/lib/styles/index.scss"]
    }
  }
}

2. Style Preprocessor Options (project.json)

{
  "targets": {
    "build": {
      "stylePreprocessorOptions": {
        "includePaths": [
          "libs/theme-system/theme-styles/src/lib/styles"
        ]
      }
    }
  }
}

3. Usage in Components

// ✅ CLEAN: Use path mapping
@use '@theme-styles/scss' as *;

// ✅ ALTERNATIVE: Use includePaths
@use 'index' as *;

Utilities