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.
 
 
 
 

153 lines
3.9 KiB

  1. @font-face {
  2. font-family: 'Encode Sans';
  3. font-stretch: semi-expanded;
  4. font-weight: 400;
  5. src:
  6. local('Encode Sans Semi Expanded'),
  7. local('Encode Sans');
  8. }
  9. @font-face {
  10. font-family: 'Encode Sans';
  11. font-stretch: semi-expanded;
  12. font-weight: 700;
  13. src:
  14. local('Encode Sans Semi Expanded Bold'),
  15. local('Encode Sans Semi Expanded'),
  16. local('Encode Sans');
  17. }
  18. @font-face {
  19. font-family: 'Encode Sans';
  20. font-stretch: condensed;
  21. font-weight: 100;
  22. src:
  23. local('Encode Sans Condensed Thin'),
  24. local('Encode Sans Condensed'),
  25. local('Encode Sans');
  26. }
  27. @font-face {
  28. font-family: 'Encode Sans';
  29. font-stretch: condensed;
  30. font-weight: 200;
  31. src:
  32. local('Encode Sans Condensed ExtraLight'),
  33. local('Encode Sans Condensed Extra Light'),
  34. local('Encode Sans Condensed'),
  35. local('Encode Sans');
  36. }
  37. @font-face {
  38. font-family: 'Encode Sans';
  39. font-stretch: condensed;
  40. font-weight: 300;
  41. src:
  42. local('Encode Sans Condensed Light'),
  43. local('Encode Sans Condensed'),
  44. local('Encode Sans');
  45. }
  46. :root {
  47. --color-shade: #000;
  48. --color-active: #f90;
  49. --font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  50. --font-stretch-base: semi-expanded;
  51. --font-weight-base: 400;
  52. --line-height-base: 2;
  53. --font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
  54. --font-stretch-headings: condensed;
  55. --font-weight-headings: 100;
  56. --line-height-headings: 1.5;
  57. --font-family-monospace: 'mononoki';
  58. --font-size-root: 16px;
  59. --color-negative: #222;
  60. --color-positive: #eee;
  61. --color-accent: #C78AB3;
  62. --opacity-light: 0.25;
  63. --opacity-lighter: 0.5;
  64. --opacity-lightest: 0.75;
  65. --color-code-number: #74f95e;
  66. --color-code-keyword: #ff4389;
  67. --color-code-type: #5097D2;
  68. --color-code-instance-attribute: #76a7d2;
  69. --color-code-function: #67c252;
  70. --color-code-parameter: #915ec2;
  71. --color-code-property: #ffa1c9;
  72. --color-code-string: #eed371;
  73. --color-code-variable: #8bc275;
  74. --color-code-regexp: #74A72B;
  75. --color-code-url: #0099CC;
  76. --color-code-global: #C28050;
  77. }
  78. :root {
  79. --color-bg: var(--color-negative, white);
  80. --color-fg: var(--color-positive, black);
  81. background-color: var(--color-bg);
  82. color: var(--color-fg);
  83. font-size: var(--font-size-root);
  84. font-family: var(--font-family-base), sans-serif;
  85. font-stretch: var(--font-stretch-base, normal);
  86. font-weight: var(--font-weight-base, 400);
  87. line-height: var(--line-height-base, 2);
  88. transition-property: color, background-color;
  89. transition-timing-function: ease;
  90. transition-duration: 350ms;
  91. }
  92. h1 {
  93. font-family: var(--font-family-headings), sans-serif;
  94. font-stretch: var(--font-stretch-headings, normal);
  95. font-weight: var(--font-weight-headings, 400);
  96. line-height: var(--line-height-headings, 1.5);
  97. }
  98. h2 {
  99. font-family: var(--font-family-headings), sans-serif;
  100. font-stretch: var(--font-stretch-headings, normal);
  101. font-weight: var(--font-weight-headings, 400);
  102. line-height: var(--line-height-headings, 1.5);
  103. }
  104. h3 {
  105. font-family: var(--font-family-headings), sans-serif;
  106. font-stretch: var(--font-stretch-headings, normal);
  107. font-weight: var(--font-weight-headings, 400);
  108. line-height: var(--line-height-headings, 1.5);
  109. }
  110. h4 {
  111. font-family: var(--font-family-headings), sans-serif;
  112. font-stretch: var(--font-stretch-headings, normal);
  113. font-weight: var(--font-weight-headings, 400);
  114. line-height: var(--line-height-headings, 1.5);
  115. }
  116. h5 {
  117. font-family: var(--font-family-headings), sans-serif;
  118. font-stretch: var(--font-stretch-headings, normal);
  119. font-weight: var(--font-weight-headings, 400);
  120. line-height: var(--line-height-headings, 1.5);
  121. }
  122. h6 {
  123. font-family: var(--font-family-headings), sans-serif;
  124. font-stretch: var(--font-stretch-headings, normal);
  125. font-weight: var(--font-weight-headings, 400);
  126. line-height: var(--line-height-headings, 1.5);
  127. }
  128. a {
  129. color: var(--color-accent);
  130. }
  131. code {
  132. font-family: var(--font-family-monospace), monospace;
  133. }
  134. pre {
  135. font-family: var(--font-family-monospace), monospace;
  136. }