Book a Demo!
CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutPoliciesSign UpSign In
ulixee
GitHub Repository: ulixee/secret-agent
 Path: blob/main/replay/frontend/src/mixins/typography.ts
1030 views
1
import { FONT_ROBOTO_REGULAR, FONT_ROBOTO_MEDIUM, FONT_ROBOTO_LIGHT } from '../constants';

2


3
export const getLetterSpacing = (fontSize: number, tracking: number) => tracking / fontSize;

4


5
export const robotoLight = () => `

6
  font-family: Roboto;

7
  font-weight: 300;

8
`;

9


10
export const robotoRegular = () => `

11
  font-family: Roboto;

12
  font-weight: 400;

13
`;

14


15
export const robotoMedium = () => `

16
  font-family: Roboto;

17
  font-weight: 500;

18
`;

19


20
export const h1 = () => `

21
  ${robotoLight()};

22
  letter-spacing: ${getLetterSpacing(96, -1.5)}rem;

23
  font-size: 96px;

24
`;

25


26
export const h2 = () => `

27
  ${robotoLight()};

28
  letter-spacing: ${getLetterSpacing(60, -0.5)}rem;

29
  font-size: 60px;

30
`;

31


32
export const h3 = () => `

33
  ${robotoRegular()};

34
  letter-spacing: ${getLetterSpacing(48, 0)}rem;

35
  font-size: 48px;

36
`;

37


38
export const h4 = () => `

39
  ${robotoRegular()};

40
  letter-spacing: ${getLetterSpacing(34, 0.25)}rem;

41
  font-size: 34px;

42
`;

43


44
export const h5 = () => `

45
  ${robotoRegular()};

46
  letter-spacing: ${getLetterSpacing(24, 0)}rem;

47
  font-size: 24px;

48
`;

49


50
export const h6 = () => `

51
  ${robotoMedium()};

52
  letter-spacing: ${getLetterSpacing(20, 0.15)}rem;

53
  font-size: 20px;

54
`;

55


56
export const subtitle1 = () => `

57
  ${robotoRegular()};

58
  letter-spacing: ${getLetterSpacing(16, 0.15)}rem;

59
  font-size: 16px;

60
`;

61


62
export const subtitle2 = () => `

63
  ${robotoMedium()};

64
  letter-spacing: ${getLetterSpacing(14, 0.1)}rem;

65
  font-size: 14px;

66
`;

67


68
export const body1 = () => `

69
  ${robotoRegular()};

70
  letter-spacing: ${getLetterSpacing(16, 0.5)}rem;

71
  font-size: 16px;

72
`;

73


74
export const body2 = () => `

75
  ${robotoRegular()};

76
  letter-spacing: ${getLetterSpacing(14, 0.25)}rem;

77
  font-size: 14px;

78
`;

79


80
export const button = () => `

81
  ${robotoMedium()};

82
  letter-spacing: ${getLetterSpacing(14, 0.75)}rem;

83
  font-size: 14px;

84
`;

85


86
export const caption = () => `

87
  ${robotoRegular()};

88
  letter-spacing: ${getLetterSpacing(12, 0.4)}rem;

89
  font-size: 12px;

90
`;

91


92
export const overline = () => `

93
  ${robotoRegular()};

94
  letter-spacing: ${getLetterSpacing(10, 1.5)}rem;

95
  font-size: 10px;

96
  text-transform: uppercase;

97
`;

98


99
export const maxLines = (count: number) => `

100
  overflow: hidden;

101
  text-overflow: ellipsis;

102
  display: -webkit-box;

103
  -webkit-line-clamp: ${count};

104
  -webkit-box-orient: vertical;

105
`;

106


107
export const injectFonts = () => {

108
  const styleElement = document.createElement('style');

109


110
  styleElement.textContent = `

111
@font-face {

112
  font-family: 'Roboto';

113
  font-style: normal;

114
  font-weight: 400;

115
  src: url(${FONT_ROBOTO_REGULAR}) format('woff2');

116
}

117
@font-face {

118
  font-family: 'Roboto';

119
  font-style: normal;

120
  font-weight: 500;

121
  src: url(${FONT_ROBOTO_MEDIUM}) format('woff2');

122
}

123
@font-face {

124
  font-family: 'Roboto';

125
  font-style: normal;

126
  font-weight: 300;

127
  src: url(${FONT_ROBOTO_LIGHT}) format('woff2');

128
}

129
`;

130


131
  document.head.appendChild(styleElement);

132
};

133


134