web-antrean/assets/scss/_typography.scss

@use 'sass:map';
@use './variables' as *;

// Mixin untuk generate typography classes
@mixin typography($name, $size, $line-height, $weight) {
  .#{$name} {
    font-family: $font-family-base;
    font-size: $size;
    line-height: $line-height;
    font-weight: $weight;
    margin: 0;
  }
}

// Base typography
* {
  font-family: $font-family-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: $font-family-base;
  font-size: 16px;
  line-height: 24px;
  font-weight: $font-weight-regular;
  margin: 0;
  padding: 0;
}

// Generate desktop typography classes - Gunakan map.get
@each $name, $props in $font-sizes {
  @include typography(
    $name,
    map.get($props, 'size'),
    map.get($props, 'line-height'),
    map.get($props, 'weight')
  );
}

// Generate mobile typography classes - Gunakan map.get
@media (max-width: $breakpoint-mobile) {
  @each $name, $props in $font-sizes-mobile {
    @include typography(
      $name,
      map.get($props, 'size'),
      map.get($props, 'line-height'),
      map.get($props, 'weight')
    );
  }
}

// HTML semantic tags
h1 {
  @extend .headline-1;
}

h2 {
  @extend .headline-2;
}

h3 {
  @extend .headline-3;
}

h4 {
  @extend .headline-4;
}

p {
  @extend .body-1;
}

small {
  @extend .caption-2;
}

// Utility classes
.text-regular {
  font-weight: $font-weight-regular !important;
}

.text-medium {
  font-weight: $font-weight-medium !important;
}

.text-semibold {
  font-weight: $font-weight-semibold !important;
}

.text-bold {
  font-weight: $font-weight-bold !important;
}

.text-uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

// Line clamp utilities
@for $i from 1 through 5 {
  .line-clamp-#{$i} {
    display: -webkit-box;
    -webkit-line-clamp: $i;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}