tw-capsize/index.css at main · DMOShareIT/tw-capsize · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
@utility leading-* {
  --capsize-leading: calc((1rem * 0.25 * --value(number)) / 1px);
  --capsize-leading: calc((1em * --value([number])) / 1px);
  --capsize-leading: calc((1em * --value(--leading-*)) / 1px);
}

@utility leading-none {
  --capsize-leading: calc(1em / 1px);
}

@utility text-* {
  --capsize-font-size-px: calc(--value(--text-*) / 1px);
  --capsize-font-size-px: calc(--value([length]) / 1px);
  /* prettier-ignore */
  --capsize-leading: calc((1em * --value(--text-*--line-height)) / 1px);

  --capsize-leading: calc((1rem * 0.25 * --modifier(number)) / 1px);
  --capsize-leading: calc((1em * --modifier([number])) / 1px);
  --capsize-leading: calc((1em * --modifier(--leading-*)) / 1px);
}

@utility capsize {
  --descent-abs: max(var(--descent), -1 * var(--descent));

  --ascent-scale: calc(var(--ascent) / var(--units-per-em));
  --descent-scale: calc(var(--descent-abs) / var(--units-per-em));
  --cap-height-scale: calc(var(--cap-height) / var(--units-per-em));
  --line-gap-scale: calc(var(--line-gap) / var(--units-per-em));
  --line-height-scale: calc(
    (var(--ascent) + var(--line-gap) + var(--descent-abs)) / var(--units-per-em)
  );
  --line-height-offset: calc(
    (
        (
            (var(--line-height-scale) * var(--capsize-font-size-px)) -
              var(--capsize-leading, var(--capsize-leading-from-text))
          ) /
          2
      ) /
      var(--capsize-font-size-px)
  );

  &::before,
  &::after {
    content: "";
    display: table;
  }

  &::before {
    margin-bottom: calc(
      (
          (
              var(--ascent-scale) - var(--cap-height-scale) +
                var(--line-gap-scale) / 2
            ) -
            var(--line-height-offset)
        ) *
        -1em
    );
  }

  &::after {
    margin-top: calc(
      (
          (var(--descent-scale) + var(--line-gap-scale) / 2) -
            var(--line-height-offset)
        ) *
        -1em
    );
  }
}