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.

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. ---
  2. name: Theming
  3. route: /theming
  4. ---
  5. # Theming
  6. The components can be styled through CSS custom properties, meaning browsers that support custom properties are expected
  7. to support theming for Tesseract components. It is a huge advantage for Tesseract to have used this feature because of
  8. its ease of use upon application, compared to using preprocessors such as Sass, which employs its own language as well
  9. as potentially increasing the size of the bundled stylesheets.
  10. ## Properties
  11. Tesseract uses a few properties as much as possible in order to produce lightweight themes.
  12. ### Colors
  13. #### `color-accent`
  14. Default value: `blue`
  15. The accent color of the components. Used to designate components that can be interacted with.
  16. #### `color-fg`
  17. Default value: `black`
  18. The reference color for text, borders, and anything in the foreground.
  19. #### `color-bg`
  20. Default value: `white`
  21. The reference color for anything in the background.
  22. #### `color-active`
  23. Default value: `Highlight`
  24. The version of the accent color for activated (i.e. clicked or focused) components.
  25. ### Fonts
  26. #### `font-family-base`
  27. Default value: `sans-serif`
  28. The base font family. Used for body text.
  29. ## Usage
  30. You should have a global theme rule applied to `:root`. Below is an example of using a global theme to apply styles:
  31. `theme.css`
  32. ```css
  33. :root {
  34. /* This will be our reference background color */
  35. --color-negative: #eee;
  36. /* This will be our reference foreground color */
  37. --color-positive: #222;
  38. --color-accent: #ba6a9c;
  39. --color-active: #f90;
  40. --font-family-body: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
  41. }
  42. @media (prefers-color-scheme: dark) {
  43. /* Dark mode, because why not? */
  44. :root {
  45. --color-negative: #222;
  46. --color-positive: #eee;
  47. --color-accent: #C78AB3;
  48. }
  49. }
  50. :root {
  51. /* We use our reference colors to set global fg and bg, but we could apply them to other elements later on.
  52. *
  53. * See below for example usage.
  54. */
  55. --color-bg: var(--color-negative, white);
  56. --color-fg: var(--color-positive, black);
  57. background-color: var(--color-bg);
  58. color: var(--color-fg);
  59. font-family: var(--font-family-body, sans-serif), sans-serif;
  60. }
  61. /*
  62. * Here is an example usage of overriding bg and fg.
  63. */
  64. .inverted-colors {
  65. --color-bg: var(--color-positive, black);
  66. --color-fg: var(--color-negative, white);
  67. }
  68. ```
  69. Since the components use the same styles, the created theme will be applied to them as well.