Text

Termeh provides utilities to define and retrieve text sizes and styles for UI components.

Define Text Size

Register a new text size.

Signature:

@mixin define-size($name: STRING, $size: NUMBER);

Example:

@include termeh.define-size("small", 12px);
@include termeh.define-size("medium", 16px);
@include termeh.define-size("large", 24px);

Text Size

Retrieves a defined text size value by its name or generates an error if the size is not defined.

Signature:

@function size($name: STRING): NUMBER;

Example:

$small-text: termeh.size("small"); // 12px
$large-text: termeh.size("large"); // 24px

Text Sizes

Gets a filtered map of text sizes, returning both names and values, for iteration.

Signature:

@function sizes($includes: LIST = null, $excludes: LIST = null): MAP<STRING, NUMBER>;

Example:

.badge {
  @each $name, $size in termeh.sizes(("small", "medium")) {
    &.is-#{$name} {
      font-size: $size;
    }
  }
}

Text Aligns

Gets a filtered map of text aligns, returning both names and values, for iteration.

Signature:

@function text-aligns($includes: LIST = null, $excludes: LIST = null):
    MAP<STRING, STRING>;

Example:

span {
  @each $name, $align in termeh.text-aligns(null, ("bolder")) {
    &.is-#{$name} {
      text-align: $align;
    }
  }
}

Available Text Aligns

Key	Value
left	left aligned
right	right aligned
center	center aligned
justify	justified

Font Weight

Gets the numeric font-weight value by its name or generates an error if the weight is invalid.

Signature:

@function weight($name: STRING): NUMBER;

Example:

$bold: termeh.weight("bold"); // 700
$light: termeh.weight("light"); // 300

Available Weights

Key	Value
lighter	100
light	300
normal	400
medium	500
semibold	600
bold	700
bolder	900

Font Weights

Gets a filtered map of font weights, returning both names and values, for iteration.

Signature:

@function weights($includes: LIST = null, $excludes: LIST = null): MAP<STRING, NUMBER>;

Example:

span {
  @each $name, $weight in termeh.weights(null, ("bolder")) {
    &.is-#{$name} {
      font-weight: $weight;
    }
  }
}