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

Aqua DS includes predefined shadow tokens to add depth, hierarchy, and emphasis, helping you create visually structured and modern interfaces.

Categories

<aside>

Below Shadows

Shadows applied beneath components, creating depth and separation from the background. Typically used for cards, containers, or elements that need to stand out subtly.

image.png

--shadow-basic

0 0.0625rem 0.125rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-large

0 0.5rem 0.75rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-intermediate

0 0.25rem 0.5rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-medium

0 0.125rem 0.25rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-prominent

0 0.75rem 1rem 0 rgba(39, 42, 47, 0.15)

Above Shadows

Shadows rendered above elements, often used to highlight overlays, tooltips, or floating components. They help communicate hierarchy and focus in the UI.

image.png

--shadow-light-inverse

0 -0.0625 0.25rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-large-inverse

0 -0.75rem 1rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-intermediate-inverse

0 -0.25rem 0.5rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-medium-inverse

0 -0.125rem 0.25rem 0 rgba(39, 42, 47, 0.15)

image.png

--shadow-extra-large-inverse

0 -0.5rem 0.75rem 0 rgba(39, 42, 47, 0.15)

Status Shadows

Shadows with semantic meaning, used to visually indicate the status of a component (e.g., success, warning, or error states). They combine depth with contextual feedback.

</aside>

:root {
	/* Outside Shadows */
  --shadow-basic: 0 0.0625rem 0.125rem 0 rgba(39, 42, 47, 0.15);
  --shadow-medium: 0 0.125rem 0.25rem 0 rgba(39, 42, 47, 0.15);
  --shadow-intermediate: 0 0.25rem 0.5rem 0 rgba(39, 42, 47, 0.15);
  --shadow-large: 0 0.5rem 0.75rem 0 rgba(39, 42, 47, 0.15);
  --shadow-prominent: 0 0.75rem 1rem 0 rgba(39, 42, 47, 0.15);
  
  /* Inside Shadows */
  --shadow-light-inverse: 0 -0.0625 0.25rem 0 rgba(39, 42, 47, 0.15);
  --shadow-medium-inverse: 0 -0.125rem 0.25rem 0 rgba(39, 42, 47, 0.15);
  --shadow-intermediate-inverse: 0 -0.25rem 0.5rem 0 rgba(39, 42, 47, 0.15);
  --shadow-large-inverse: 0 -0.5rem 0.75rem 0 rgba(39, 42, 47, 0.15);
  --shadow-extra-large-inverse: 0 -0.75rem 1rem 0 rgba(39, 42, 47, 0.15);
  
  /* Status Shadows */
  --shadow-active: 0 0 0 var(--spacing-size-basic) var(--color-white), 0 0 0 0.1875rem var(--color-primary-light), inset 0 0.0625rem 0.125rem rgba(30, 42, 47, 0.15);;
  --shadow-focus: 0 0 0 var(--spacing-size-basic) var(--color-white), 0 0 0 0.1875rem var(--color-primary-light);
}