瀏覽代碼

Update documentation

Include a section on theming.
tags/0.3.0
TheoryOfNekomata 4 年之前
父節點
當前提交
0ab9e93b18
共有 6 個文件被更改,包括 103 次插入5 次删除
  1. +98
    -0
      docs/theming.md
  2. +1
    -1
      lib/components/Button/Button.tsx
  3. +1
    -1
      lib/components/Checkbox/Checkbox.tsx
  4. +1
    -1
      lib/components/RadioButton/RadioButton.tsx
  5. +1
    -1
      lib/components/Select/Select.tsx
  6. +1
    -1
      lib/components/TextInput/TextInput.tsx

+ 98
- 0
docs/theming.md 查看文件

@@ -0,0 +1,98 @@
---
name: Theming
route: /theming
---

# Theming

The components can be styled through CSS custom properties, meaning browsers that support custom properties are expected
to support theming for Tesseract components. It is a huge advantage for Tesseract to have used this feature because of
its ease of use upon application, compared to using preprocessors such as Sass, which employs its own language as well
as potentially increasing the size of the bundled stylesheets.

## Properties

Tesseract uses a few properties as much as possible in order to produce lightweight themes.

### Colors

#### `color-accent`

Default value: `blue`

The accent color of the components. Used to designate components that can be interacted with.

#### `color-fg`

Default value: `black`

The reference color for text, borders, and anything in the foreground.

#### `color-bg`

Default value: `white`

The reference color for anything in the background.

#### `color-active`

Default value: `Highlight`

The version of the accent color for activated (i.e. clicked or focused) components.

### Fonts

#### `font-family-base`

Default value: `sans-serif`

The base font family. Used for body text.

## Usage

You should have a global theme rule applied to `:root`. Below is an example of using a global theme to apply styles:

`theme.css`
```css
:root {
/* This will be our reference background color */
--color-negative: #eee;
/* This will be our reference foreground color */
--color-positive: #222;
--color-accent: #ba6a9c;
--color-active: #f90;
--font-family-body: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
}

@media (prefers-color-scheme: dark) {
/* Dark mode, because why not? */
:root {
--color-negative: #222;
--color-positive: #eee;
--color-accent: #C78AB3;
}
}

:root {
/* We use our reference colors to set global fg and bg, but we could apply them to other elements later on.
*
* See below for example usage.
*/
--color-bg: var(--color-negative, white);
--color-fg: var(--color-positive, black);

background-color: var(--color-bg);
color: var(--color-fg);
font-family: var(--font-family-body, sans-serif), sans-serif;
}

/*
* Here is an example usage of overriding bg and fg.
*/
.inverted-colors {
--color-bg: var(--color-positive, black);
--color-fg: var(--color-negative, white);
}
```

Since the components use the same styles, the created theme will be applied to them as well.

+ 1
- 1
lib/components/Button/Button.tsx 查看文件

@@ -26,7 +26,7 @@ const buttonStyles: CSSObject = {
appearance: 'none',
padding: '0 1rem',
font: 'inherit',
fontFamily: 'var(--font-family-base)',
fontFamily: 'var(--font-family-base, sans-serif)',
textTransform: 'uppercase',
fontWeight: 'bolder',
borderRadius: '0.25rem',


+ 1
- 1
lib/components/Checkbox/Checkbox.tsx 查看文件

@@ -105,7 +105,7 @@ const Label = styled('span')({
verticalAlign: 'top',
float: 'right',
width: 'calc(100% - 2.5rem)',
fontFamily: 'var(--font-family-base)',
fontFamily: 'var(--font-family-base, sans-serif)',
pointerEvents: 'none',
})



+ 1
- 1
lib/components/RadioButton/RadioButton.tsx 查看文件

@@ -103,7 +103,7 @@ const Label = styled('span')({
verticalAlign: 'top',
float: 'right',
width: 'calc(100% - 2.5rem)',
fontFamily: 'var(--font-family-base)',
fontFamily: 'var(--font-family-base, sans-serif)',
pointerEvents: 'none',
})



+ 1
- 1
lib/components/Select/Select.tsx 查看文件

@@ -38,7 +38,7 @@ const SECONDARY_TEXT_SIZES: SizeMap<string | number> = {
const ComponentBase = styled('div')({
position: 'relative',
borderRadius: '0.25rem',
fontFamily: 'var(--font-family-base)',
fontFamily: 'var(--font-family-base, sans-serif)',
maxWidth: '100%',
':focus-within': {
'--color-accent': 'var(--color-active, Highlight)',


+ 1
- 1
lib/components/TextInput/TextInput.tsx 查看文件

@@ -37,7 +37,7 @@ const SECONDARY_TEXT_SIZES: SizeMap<string | number> = {
const ComponentBase = styled('div')({
position: 'relative',
borderRadius: '0.25rem',
fontFamily: 'var(--font-family-base)',
fontFamily: 'var(--font-family-base, sans-serif)',
maxWidth: '100%',
':focus-within': {
'--color-accent': 'var(--color-active, Highlight)',


Loading…
取消
儲存