Spacing

Spacing values are derived from a 9-step scale, which is used for props such as margin and padding.

These props accept numeric strings from "1" to "9", which correspond to the steps in the scale below.

​

Space scale tokens

Space scale tokens can also be accessed using CSS variables. You can use these tokens to style your custom components, ensuring they are consistent with the rest of your theme.

/* Space scale */
var(--space-1);
var(--space-2);
var(--space-3);
var(--space-4);
var(--space-5);
var(--space-6);
var(--space-7);
var(--space-8);
var(--space-9);

​

Scaling

Values that affect layout (spacing, font size, line height) scale relatively to each other based on the scaling value defined in your Theme. This setting allows you to scale the UI density uniformly across your entire application.

<ThemeProvider
  scaling="100%"
>
  <TimeSeries
		variant="bar"
    query={{
      accessToken: "<PROPEL_ACCESS_TOKEN>",
      metric: {
	      count: {
	        dataPool: { name: "TacoSoft Demo Data" }
	      },
	    }
      timeRange: { relative: RelativeTimeRange.LastNDays, n: 90 },
      granularity: "DAY",
    }}
  />
</ThemeProvider>

​

Scaling factor

The scaling factor token can be accessed using the --propel-scaling CSS variable. If you need to use different scaling factors in your app, you can use this token in your custom styles, ensuring they are consistent with the rest of your theme.

.MyCustomComponent {
  width: calc(200px * var(--propel-scaling));
}