Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197
  1. @font-face {
  2. font-family: 'Encode Sans';
  3. font-stretch: semi-expanded;
  4. font-weight: 400;
  5. font-display: swap;
  6. src:
  7. local('Encode Sans Semi Expanded'),
  8. local('Encode Sans'),
  9. url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke83OhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TO401LgrjKXY.woff2) format('woff2');
  10. }
  11. @font-face {
  12. font-family: 'Encode Sans';
  13. font-stretch: semi-expanded;
  14. font-weight: 700;
  15. font-display: swap;
  16. src:
  17. local('Encode Sans Semi Expanded Bold'),
  18. local('Encode Sans Semi Expanded'),
  19. local('Encode Sans'),
  20. url(https://fonts.gstatic.com/s/encodesanssemiexpanded/v6/ke8yOhAPMEZs-BDuzwftTNJ85JvwMOzE9d9Cca5TMzYQOyfBJFyUGWQ.woff2) format('woff2');
  21. }
  22. @font-face {
  23. font-family: 'Encode Sans';
  24. font-stretch: condensed;
  25. font-weight: 100;
  26. font-display: swap;
  27. src:
  28. local('Encode Sans Condensed Thin'),
  29. local('Encode Sans Condensed'),
  30. local('Encode Sans'),
  31. url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_76_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-5Z-OJwsnIHKQ.woff2) format('woff2');
  32. }
  33. @font-face {
  34. font-family: 'Encode Sans';
  35. font-stretch: condensed;
  36. font-weight: 200;
  37. font-display: swap;
  38. src:
  39. local('Encode Sans Condensed ExtraLight'),
  40. local('Encode Sans Condensed Extra Light'),
  41. local('Encode Sans Condensed'),
  42. local('Encode Sans'),
  43. url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-SY6ZAC4ICHiYFQ.woff2) format('woff2');
  44. }
  45. @font-face {
  46. font-family: 'Encode Sans';
  47. font-stretch: condensed;
  48. font-weight: 300;
  49. font-display: swap;
  50. src:
  51. local('Encode Sans Condensed Light'),
  52. local('Encode Sans Condensed'),
  53. local('Encode Sans'),
  54. url(https://fonts.gstatic.com/s/encodesanscondensed/v5/j8_46_LD37rqfuwxyIuaZhE6cRXOLtm2gfT-LY2ZAC4ICHiYFQ.woff2) format('woff2');
  55. }
  56. @font-face {
  57. font-family: 'mononoki';
  58. font-weight: 400;
  59. font-style: normal;
  60. font-display: swap;
  61. src:
  62. local('mononoki'),
  63. url(fonts/mononoki/mononoki-Regular.woff2) format('woff2');
  64. }
  65. @font-face {
  66. font-family: 'mononoki';
  67. font-weight: 700;
  68. font-style: normal;
  69. font-display: swap;
  70. src:
  71. local('mononoki Bold'),
  72. local('mononoki'),
  73. url(fonts/mononoki/mononoki-Bold.woff2) format('woff2');
  74. }
  75. @font-face {
  76. font-family: 'mononoki';
  77. font-weight: 400;
  78. font-style: italic;
  79. font-display: swap;
  80. src:
  81. local('mononoki'),
  82. url(fonts/mononoki/mononoki-Italic.woff2) format('woff2');
  83. }
  84. @font-face {
  85. font-family: 'mononoki';
  86. font-weight: 700;
  87. font-style: italic;
  88. font-display: swap;
  89. src:
  90. local('mononoki Bold'),
  91. local('mononoki'),
  92. url(fonts/mononoki/mononoki-BoldItalic.woff2) format('woff2');
  93. }
  94. :root {
  95. --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  96. --font-stretch-base: semi-expanded;
  97. --font-weight-base: 400;
  98. --line-height-base: 2;
  99. --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  100. --font-stretch-headings: condensed;
  101. --font-weight-headings: 100;
  102. --line-height-headings: 1.5;
  103. --font-family-monospace: 'mononoki';
  104. --font-size-root: 16px;
  105. --opacity-light: 0.25;
  106. --opacity-lighter: 0.5;
  107. --opacity-lightest: 0.75;
  108. }
  109. :root {
  110. --color-bg: var(--color-negative, white);
  111. --color-fg: var(--color-positive, black);
  112. }
  113. @media (prefers-color-scheme: dark) {
  114. :root {
  115. --color-bg: var(--color-negative, black);
  116. --color-fg: var(--color-positive, white);
  117. }
  118. }
  119. :root {
  120. background-color: var(--color-bg);
  121. color: var(--color-fg);
  122. font-size: var(--font-size-root);
  123. font-family: var(--font-family-base), sans-serif;
  124. font-stretch: var(--font-stretch-base, normal);
  125. font-weight: var(--font-weight-base, 400);
  126. line-height: var(--line-height-base, 2);
  127. transition-property: color, background-color;
  128. transition-timing-function: ease;
  129. transition-duration: 350ms;
  130. }
  131. h1 {
  132. font-family: var(--font-family-headings), sans-serif;
  133. font-stretch: var(--font-stretch-headings, normal);
  134. font-weight: var(--font-weight-headings, 400);
  135. line-height: var(--line-height-headings, 1.5);
  136. }
  137. h2 {
  138. font-family: var(--font-family-headings), sans-serif;
  139. font-stretch: var(--font-stretch-headings, normal);
  140. font-weight: var(--font-weight-headings, 400);
  141. line-height: var(--line-height-headings, 1.5);
  142. }
  143. h3 {
  144. font-family: var(--font-family-headings), sans-serif;
  145. font-stretch: var(--font-stretch-headings, normal);
  146. font-weight: var(--font-weight-headings, 400);
  147. line-height: var(--line-height-headings, 1.5);
  148. }
  149. h4 {
  150. font-family: var(--font-family-headings), sans-serif;
  151. font-stretch: var(--font-stretch-headings, normal);
  152. font-weight: var(--font-weight-headings, 400);
  153. line-height: var(--line-height-headings, 1.5);
  154. }
  155. h5 {
  156. font-family: var(--font-family-headings), sans-serif;
  157. font-stretch: var(--font-stretch-headings, normal);
  158. font-weight: var(--font-weight-headings, 400);
  159. line-height: var(--line-height-headings, 1.5);
  160. }
  161. h6 {
  162. font-family: var(--font-family-headings), sans-serif;
  163. font-stretch: var(--font-stretch-headings, normal);
  164. font-weight: var(--font-weight-headings, 400);
  165. line-height: var(--line-height-headings, 1.5);
  166. }
  167. code {
  168. font-family: var(--font-family-monospace), monospace;
  169. }
  170. pre {
  171. font-family: var(--font-family-monospace), monospace;
  172. }
  173. a {
  174. color: var(--color-accent);
  175. }