Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The Theming system provides a flexible theming system that allows developers to adapt the design system to their brand’s identity with minimal effort. The foundation of theming is based on CSS variables, ensuring that customization remains lightweight, consistent, and framework-agnostic.

Variables

Overriding these variables in your own stylesheet, you can immediately apply brand-specific colors. For quick integration, Aqua DS exposes a set of CSS variables that control key aspects of the UI, including:

Colors

Extended Colors

Typography

Spacing

Layout

Shadows

Working with Variables

For projects that require advanced customization, Aqua DS also provides an SCSS layer. Developers can import SCSS files and override variables before compilation, which makes it possible to:

• Define custom maps for colors, fonts, or spacing.
• Extend or replace existing tokens.
• Take advantage of SCSS nesting, functions, and mixins for more granular control.

CSS

You only need to use the variables in a :root rule to modify the styles whitout affect the scalability and guidelines of the styles.

:root {
  --color-primary-light: #08d1b0d3;
  --color-primary-base: #00c9a7;
  --color-primary-dark: #029b81;
  --color-paper-lighter: #ebf7f5;
  --color-primary-darker: #023744;
  --color-ink-base: #0d574a;
  --color-paper-darker: #4b5c59;
  --color-ink-lighter: #4a6964;
  --color-success-base: #00c9a7;
  --color-paper-light: #dee9e7;
  --color-ink-light: #046151;
}

SCSS

Working with SCSS variables in Aqua DS is straightforward. You only need to import the path of the variables you want to use and apply the @use directive to expose them in your styles, ensuring consistency across your project while keeping your styles clean and maintainable whitout generate unnecessary weights in the application.

@use '@aqua-ds/style-guidelines/scss/variables/font' as fonts;

@use '@aqua-ds/style-guidelines/scss/variables/color' as colors;

@use '@aqua-ds/style-guidelines/scss/variables/spacing' as spacing;

@use '@aqua-ds/style-guidelines/scss/variables/box-shadow' as shadow;

@use '@aqua-ds/style-guidelines/scss/variables/layout' as layout;

@use '@aqua-ds/style-guidelines/scss/variables/extended-color' as extendedColors;

body {

  font-family: fonts.$font-family-basic;

  font-size: fonts.$font-size-s;

  line-height: fonts.$font-line-height-7;

  color: colors.$color-ink-paper;

  // ¡And continue your styles using css variables easily!

}

On this page

✨ Design together. Build together. Speak the same language. ✨