Vars

At Terra, _vars.scss is the central hub for all design tokens and global variables. Colors, typography, spacing, breakpoints, transitions—everything that defines visual consistency lives here. This single source of truth ensures that changes to design systems are easy, predictable, and maintainable.

---

How it’s used across projects

• All Projects

  • Variables are imported at the top of style.scss before any other styles
  • They’re available globally throughout the entire SCSS codebase
  • You can see a reference implementation in our starter kit

• Most common edits

  • In 99% of projects, you’ll only need to modify:
    • $color-options (brand colors)
    • $colorbg-options (background colors)
    • Typography variables
    • $border-radius values

If you need a new variable

If you need to introduce a new variable during development, always consult with the team and coordinate with UX/UI to maintain consistency across the project.

Desktop or mobile first?

Until recently, projects at Terra were built with a desktop-first approach, but we now develop them using a mobile-first approach. This helps improve performance.

How can you tell which approach your project is using?

• If it’s desktop-first, you’ll see the following in vars:

/* Breakpoints */
$all: 0;
$desktop: 1700px;
$laptop: 1570px;
$tabletl: 1300px;
$tabletm: 1024px;
$tablets: 810px;
$mobile: 580px;

/* Grid System */
$viewport-type: max-width;

• If it’s mobile-first, you’ll see this instead:

/* Breakpoints */
$all: 0;
$tablets: 580px;
$tabletm: 810px;
$tabletl: 1024px;
$laptop: 1300px;
$desktop: 1570px;
$wide: 1700px;

/* Grid System */
$viewport-type: min-width;

The development approach is the same in both cases—the only difference is the order in which you build things.

---

Variable structure

Variables are organized by responsibility, from colors and typography to spacing and timing:

/* Colors */
$color-a: #7B44D1;
$color-b: #4D49F3;
$color-c: #26DAF6;
$color-d: #EAF0F6;
$color-e: #FFFFFF;
$color-f: #0A132A;
$color-g: #CE1111;

$color-options: (
    a: $color-a,
    b: $color-b,
    c: $color-c,
    d: $color-d,
    e: $color-e,
    f: $color-f,
    g: $color-g,
);

$colorbg-options: (
    a: $color-d,
    b: $color-e,
    c: $color-f,
);

/* Typography */
$type-a: 'Jost', sans-serif;
$type-b: 'Hero New', sans-serif;

/* Base Measure */
$measure: 0.5rem; // 0.5rem = 8px - Foundation for all spacing

/* Container */
$g-container-width: 1300px;

/* Breakpoints */
$all: 0;
$desktop: 1700px;
$laptop: 1570px;
$tabletl: 1300px;
$tabletm: 1024px;
$tablets: 810px;
$mobile: 580px;

/* Grid System */
$viewport-type: max-width;
$columns: 12;
$gutter-width: 32px;
$half-gutter-width: $gutter-width*.5;
$gutter-compensation: -1 * $half-gutter-width;

/* Border Radius */
$border-radius-a: $measure;   // 8px
$border-radius-b: $measure*4; // 32px

/* Animation Timing */
$time-a: 0.1s; // Micro-interactions such as button and toggle
$time-b: 0.3s; // Expansion, system communication, toast
$time-c: 0.6s; // Background dimming

/* Easing Functions */

// Standard easing
$ease-standard-a: cubic-bezier(0.2, 0, 0.38, 0.9); //productive
$ease-standard-b: cubic-bezier(0, 0, 0.3, 1); //expresive

// Entrance easing
$ease-entrance-a: cubic-bezier(0, 0, 0.38, 0.9); //productive
$ease-entrance-b: cubic-bezier(0.4, 0.14, 0.3, 1); //expresive

// Exit easing
$ease-exit-a: cubic-bezier(0.2, 0, 1, 0.9); //productive
$ease-exit-b: cubic-bezier(0.4, 0.14, 1, 1); //expresive

---

## How variables internally work

Variables are used throughout the framework to generate utility classes automatically. For example, `$color-options` is a map that's looped through in the <a href="https://github.com/terra-hq/wp-starter-kit/blob/main/src/scss/framework/foundation/color/_color.scss" target="_blank" rel="noopener noreferrer">starter kit</a>:

```scss
// Basic Loop Colors
@each $color-name, $color in $color-options {
  .f--color-#{$color-name} {
    color: $color;
  }
}

This generates utility classes like .f--color-a, .f--color-b, etc. —each applying its corresponding color. It’s a clean, scalable approach to managing color utilities across the entire project.

---

Using variables in components

When building components, always reference variables instead of hard-coding values:

// ❌ Avoid hard-coded values
.c--card-a {
  &__item {
    color: #7B44D1;
    padding: 16px;
    border-radius: 32px;
  }
}

// ✅ Better: Use variables directly
.c--card-a {
  &__item {
    color: map-get($color-options, a);
    padding: $measure*2;
    border-radius: $border-radius-c;
  }
}

// ✅ Best: Extend existing utility classes
.c--card-a {
  &__item {
    @extend .f--color-a;
    padding: $measure*2;
    border-radius: $border-radius-c;
  }
}

Tip

Using @extend promotes reuse and keeps component styles aligned with the global utility system.