Authoring

When authoring CSS for the styleguide, these conventions keep components composable, predictable, and easy to override. They apply both to new components and to extensions of existing ones.

For the layered context these styles land in, see CSS layers.

Components

Many components map one-to-one with an HTML element.

One root

Each component should target one tng-* class.

.tng-tag {
  /* All styles go in here */
}

Nested elements

When your component contains additionally nested elements (with or without classes) you can target them using CSS nesting.

.tng-alert {
  header,
  .header {
    /* header styles */
  }
}

Nested components

Often components are used in composition. You can target nested components the same way by using CSS nesting.

<div class="tng-badge">
  Toyota
  <i class="tng-icon close"></i>
</div>

.tng-badge {
  --tng-badge-border-color: var(--tng-color-border-neutral-default);

  .tng-icon {
    color: var(--tng-badge-border-color);
  }
}

Internal variables
- is-…
- at-…

Utilities

Most of our utilities are built to be used specifically with our styleguide layout and components. Using them on random elements will and should not do anything.

.gap-none {
  gap: var(--tng-spacing-none);
}

All components should clearly document which utilities they support.