Vars

Variables are the backbone of a scalable and consistent codebase. At Terra, we define global SCSS variables for colors, typography, grid, breakpoints, units, and transitions to ensure visual and structural consistency across all components and utilities.

These variables live in the @scss/framework/_vars/ folder and are used throughout the entire project—from utilities to complex modules. Centralized variable management makes global changes (like theme adjustments or spacing tweaks) simple and safe - Link to file

/* 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;

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

$all: 0;
$desktop: 1700px;
$laptop: 1570px;
$tabletl: 1300px;
$tabletm: 1024px;
$tablets: 810px;
$mobile: 580px;
$viewport-type: max-width;
$columns: 12;
$gutter-width: 32px;
$half-gutter-width: $gutter-width*.5;
$gutter-compensation: -1 * $half-gutter-width;

// Use for almost all Uitlities:
// Display, Aspect Ratio, Flex, Float, Justify, Spacing, Text-align
$breakpoints-grid: (
    all: $all,
    desktop: $desktop,
    laptop: $laptop,
    tabletl: $tabletl,
    tabletm: $tabletm,
    tablets: $tablets,
    mobile: $mobile,
) !default;

/*
    End Foundations
*/

// Measure
$measure: 0.5rem; /* 0.5rem = 8px */

// border
$border-radius-a: $measure;
$border-radius-b: $measure*2;
$border-radius-c: $measure*4;

// Time
$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

// Ease
$ease-standard-a: cubic-bezier(0.2, 0, 0.38, 0.9); //productive
$ease-standard-b: cubic-bezier(0, 0, 0.3, 1); //expresive
$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
$ease-exit-a: cubic-bezier(0.2, 0, 1, 0.9); //productive
$ease-exit-b: cubic-bezier(0.4, 0.14, 1, 1); //expresive

// header
$headerDesktop: 88px;
$headerTabletl: 72px;

How does it integrate with the framework?

At the top, you’ll notice $color-options is a map. It’s used here, where a loop generates utility classes for each color:

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

This creates classes like .f—color-a, .f—color-b, and so on—each one applying its corresponding color. It’s a clean, scalable way to manage color utilities across your project.

How to use it in Components

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

// extend color options (better approach)
.c--card-a {
  &__item {
    @extend .f--color-a;
    padding:$measure*2;
    border-radius:$border-radius-c;
  }
}

Using @extend is cleaner and promotes reuse of existing utility classes.

By leveraging the power of SCSS variables and mappings, you ensure consistency across your project while making your code easier to maintain and scale.