Guide: Replacing Hard-Coded or Base tokens for Chart Tokens

Copy post link

Federico Sarassola

August 22nd, 2025

This step-by-step guide explains how to replace existing hard-coded chart colors with our new semantic chart tokens, ensuring consistency, accessibility, and maintainability across all platforms. This process should be applied to both new and legacy visualizations.

For Designers (Figma)

Goal: Unlink legacy colors (hex codes or old local styles) from charts and apply the new semantic chart tokens via Token Studio.

Step 1: Identify the Chart and Its Color's Intent

Open the Figma file containing the chart you need to update.
Select the chart element (e.g., a bar, line, or pie slice).
In the Design panel, inspect the Fill or Stroke color to see its current value (e.g., #FF4D4D or red.200).
Determine the meaning of that color in the docsite in the context of the chart's data. Is it showing negative performance, positive growth, or a critical alert?

Step 2: Find the Corresponding Token

Based on the meaning you identified, find the appropriate new semantic token in your Figma library under color.chart.semantics.

For example:

If the old color #FF4D4D meant a negative trend, the new token is chart.semantics.negative.
If the color #52C41A meant a positive result, the new token is chart.semantics.positive.

Step 3: Apply the New Token

Select the style you need and change the current value for the corresponding semantic token in your design.

Step 4: Verify and Document

Ensure the new color visually matches the intended semantic meaning and works well in both light and dark modes.
Update any documentation, annotations, or guidelines for that specific chart component in your Figma library to reflect the new token usage.
Let your dev know this change was made and refer them to this documentation so they can do the change as well.

For Engineers (Code)

Raw CSS/LESS

This is the most straightforward case. Simply replace the hard-coded values with the new CSS Custom Properties.

Before (Hard-coded Hex):

/*
  styles.css
  This is a hard-coded chart color that does not follow the design system.
*/
.chart-bar.positive {
  background-color: #52C41A;
}

.chart-label.positive {
  color: #52C41A;
}

.chart-bar.negative {
  background-color: #FF4D4D;
}

After (With Tokens):

/*
  styles.css
  Now we use semantic tokens that are defined in our design system.
*/
.chart-bar.positive {
  background-color: var(--dt-color-chart-positive);
}

.chart-label.positive {
  color: var(--dt-color-chart-positive-strong); /* Use the 'strong' for better legibility */
}

.chart-bar.negative {
  background-color: var(--dt-color-chart-negative);
}

.chart-bar.is-warning {
  background-color: var(--dt-color-chart-warning);
}

If the tool you use right now doesn't support tokens, try to sync the tokens to the hex values we have in the docsite, but keep in mind that you may need to set up the dark-mode manually.

Google Charts

JavaScript-based charting libraries like Google Charts, D3.js, or Chart.js often consume colors via a JavaScript configuration object, not directly through CSS. As a workaround, to connect them with our tokens, you must retrieve the value of the CSS variable at runtime.

Step 1: Create a helper function to get the token value

This small function will allow you to get the value of any CSS variable from the DOM.

// utils/get-token-value.js
export function getTokenValue(tokenName) {
  if (typeof window === 'undefined') {
    return null; // Prevents errors on the server side (SSR)
  }
  return getComputedStyle(document.documentElement).getPropertyValue(tokenName).trim();
}

Step 2: Use the function to configure the chart

Now, in your Vue component file, use the getTokenValue function to configure the colors of your Google Charts.

Example:

<!-- Vue template tag -->
<template>
  <div ref="chartContainer"></div>
</template>

<!-- Vue script tag -->
<script>
import { getTokenValue } from '@/utils/get-token-value';
import { Chart } from 'google-charts'; // Example import

export default {
  mounted() {
    this.drawChart();
  },
  methods: {
    drawChart() {
      const data = new google.visualization.DataTable();
      data.addColumn('string', 'Category');
      data.addColumn('number', 'Value');
      data.addRows([
        ['Positive', 20],
        ['Negative', 5],
        ['Info', 10]
      ]);

      const options = {
        title: 'User Feedback',
        // We use our token color system here
        colors: [
          getTokenValue('--dt-color-chart-positive'),
          getTokenValue('--dt-color-chart-negative'),
          getTokenValue('--dt-color-chart-info')
        ]
      };

      const chart = new google.visualization.PieChart(this.$refs.chartContainer);
      chart.draw(data, options);
    }
  }
};
</script>

This technique ensures that your JavaScript chart colors are always synchronized with the single source of truth from your design system, making them dynamic and capable of responding to theme changes (e.g., when switching from light to dark mode), provided you listen to theme changes to redraw the chart and recompute getTokenValue.

Vue.js

Goal: Replace hard-coded hex codes and old CSS/LESS variables with the new CSS Custom Properties (--dt-color-chart-semantic-X).

Step 1: Identify the Target Component and Color

Locate the Vue component file (.vue) for the chart you need to update.
Identify the hard-coded color values. These could be:
- Directly in the <template> section (e.g., <div :style="{ backgroundColor: '#FF4D4D' }">).
- In the <script> section (e.g., const color = '#FF4D4D'😉.
- In the <style> or associated LESS/CSS file (e.g., .chart-bar { background-color: #FF4D4D; }).
Determine the semantic meaning of that color.

Step 2: Import the Dialtone Tokens

Ensure your component or application is correctly importing the Dialtone CSS variables. This is crucial for the custom properties to be available.

// In your main.js or a central entry point
import '@dialpad/dialtone/css-default-theme';
// or for dynamic theming:
import '@dialpad/dialtone/css';

Step 3: Replace Hard-Coded Values with New Tokens

Replace the hard-coded hex code or old variable with the corresponding new CSS Custom Property.

Example (replacing hard-coded hex):

<!-- Vue template tag -->
<template>
  <div class="chart-bar" :class="{ 'is-negative': isNegative }">...</div>
</template>

<!-- Vue style tag -->
<style lang="less" scoped>
.chart-bar.is-negative {
  background-color: var(--dt-color-chart-negative); // <-- NEW TOKEN
}
</style>

Example (replacing old LESS variable):

// Old
@legacy-chart-red: #FF4D4D;
.chart-bar { background-color: @legacy-chart-red; }

// New (Remove old variable and use CSS Custom Property)
.chart-bar.is-negative {
  background-color: var(--dt-color-chart-negative);
}

Step 4: Implement Hover and Selected States

Replace any custom hover/selected color logic with the new dedicated tokens (--dt-color-chart-X-hover, --dt-color-chart-X-selected).

Example:

.chart-bar.is-positive {
  background-color: var(--dt-color-chart-positive);
}
.chart-bar.is-positive:hover {
  background-color: var(--dt-color-chart-positive-hover); // <-- NEW HOVER TOKEN
}

Step 5: Test and Create a Pull Request

Run your local development server and thoroughly test the component. Ensure the colors display correctly in both light and dark modes (if your application supports it) and that the hover/selected states work as expected.
Remove any deprecated hard-coded colors or old variables from the component's file.
Create a pull request with a clear description of the refactoring, mentioning that you have replaced old colors with the new Dialtone tokens.

Thanks for helping us maintain consistency across our design system! If you have any questions, feel free to reach out in the #dialtone channel.

Guide: Replacing Hard-Coded or Base tokens for Chart Tokens Copy post link

For Designers (Figma) #

Step 1: Identify the Chart and Its Color's Intent #

Step 2: Find the Corresponding Token #

Step 3: Apply the New Token #

Step 4: Verify and Document #

For Engineers (Code) #

Raw CSS/LESS #

Google Charts #