Skip to main content

Acuitas Design System

For the full details on the available CSS classes refer to our Acuitas Design System topic.

Available CSS classes​

The Acuitas Design System provides a comprehensive set of CSS classes:

Layout classes​

  • Card components:.card, .card-header, .card-body
  • Flexbox utilities: .d-flex, .align-center, .gap-2
  • Spacing utilities: .mb-0, .mb-sm, .mt-sm, .p-xs, .px-sm

Component classes​

  • Buttons: .btn, .btn-primary, .btn-secondary
  • Status badges: .badge, .badge-success, .badge-warning
  • Typography utilities:.text-small, .text-secondary

Colour variables​

--primary-color: #0049b8;
--secondary-color: #adceff;
--text-primary: #373a3c;
--text-secondary: #a0a0a0;
--success-color: #5cbe89;
--warning-color: #efb850;
--error-color: #f34951;

Using Acuitas Design System classes​

render() {
  return html`
    <div class="card">
      <div class="card-header d-flex justify-between align-center">
        <h3 class="mb-0">Widget Title</h3>
        <span class="badge badge-success">Active</span>
      </div>
      <div class="card-body">
        <button class="btn btn-primary">Primary Action</button>
        <button class="btn btn-secondary">Secondary Action</button>
      </div>
    </div>
  `;
}

Using plugin settings​

The settings property is a dictionary (key: string, value: string) that contains the settings for the plugin that were configured for this environment on the Acuitas Marketplace portal. Here is an example of how to access these settings from your web component:

private _getApiEndpoint(): string {
  return this.settings['api-endpoint'] || 'https://api.example.com/v1';
}

private _getApiKey(): string {
  return this.settings['api-key'] || '';
}

private async _analyzeImage() {
  if (!this.imaging.selectedImage) return;
  
  try {
    const response = await fetch(`${this._getApiEndpoint()}/analyze`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${this._getApiKey()}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        imageId: this.imaging.selectedImage.id,
        customerId: this.context.customerId,
        siteId: this.context.siteId
      })
    });
    
    const result = await response.json();
    // Handle the analysis result
  } catch (error) {
    console.error('Analysis failed:', error);
  }
}

Retrieving a bearer token for authorisation​

For your public API to call our Acuitas Marketplace API it needs an authorisation token. To retrieve this, your web component can use the onRequestToken callback, specifying the subject type (what type of data) and subject identifiers (the identifiers of the data). The callback returns a token that allows you to access the requested data from our public API. The flow looks like: