​
Styling Conventions

Maintain a clean and coherent styling structure across the application by following these conventions:

​
Global Styles (styles/global.scss)

This file imports theme and utility styles and defines global CSS classes that can be used throughout the application, such as margin and padding utilities, text color classes, and more. It sets the global style for the HTML body and defines classes for common UI elements and states, such as hoverable elements and visibility toggles for different screen sizes.

​
Root Styles (styles/index.scss)

Defines global settings that are applied directly, like the default font family, weight, and resets for margin and padding.

​
Theme Styles (styles/themes.scss)

Defines color schemes, font sizes, font weights, and other variables for both light and dark themes. It includes mixins for applying themed styles to components based on the current theme.

​
Using SCSS Variables and Mixins

  • Always use predefined SCSS variables and mixins for colors, font sizes, font weights, shadows, and other styles. This ensures consistency and simplifies theme management.
  • Access colors using the t function within the themed mixin to ensure correct theming:
@import "styles/themes.scss";

.example-class {
  @include themed() {
    color: t("color-primary");
  }
}
  • Directly access other SCSS variables without a mixin:
.example-class {
  border-radius: $main-border-radius;
}
By adhering to these styling conventions, developers can create a visually consistent and easily maintainable codebase, with the flexibility to adapt to design changes and new requirements.