mirrors/TiddlyWiki5
1
Fork 0
mirror of https://github.com/Jermolene/TiddlyWiki5.git synced 2025-12-06 02:30:46 -08:00
Code Issues Projects Releases Packages Wiki Activity

Update docs

Browse source
This commit is contained in:
Leilei332 2025-11-15 16:14:51 +08:00
parent bf883c11ed
commit c0ada2efdc
3 changed files with 50 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

4
editions/tw5.com/tiddlers/Core CSS Variables.tid
View file

@ -4,8 +4,6 @@ tags: Reference
title: Core CSS Variables
type: text/vnd.tiddlywiki
<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*`. They are mainly used to [[Write stylesheets in vanilla CSS]]. The `--tc-*` prefix ''is reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables.
<<.from-version 5.4.0>> Tiddlywiki CSS variable definitions starts with `--tp-*` and `--tpc-*`. They are mainly used to [[Write stylesheets in vanilla CSS]]. These prefixes ''are reserved'' for Tiddlywiki, so it should not be used for user defined CSS variables. It is also not recommended to override these core CSS variables.
Core CSS variables are defined in [[$:/core/stylesheets/custom-properties]].
It is not recommended to override these core CSS variables.

23
editions/tw5.com/tiddlers/Write stylesheets in vanilla CSS.tid
View file

@ -1,23 +0,0 @@
created: 20251108075645447
modified: 20251108081036094
title: Write stylesheets in vanilla CSS
type: text/vnd.tiddlywiki
<<.from-version 5.4.0>> Before v5.4.0, theme developers have to mix wikitext syntax with CSS syntax when writing stylesheets to intergrate Tiddlywiki color palettes and theme settings. With the introduction of [[Core CSS Variables]] in v5.4.0, theme developers can intergrate most Tiddlywiki palettes with vanilla CSS.
! Using Tiddlywiki palette colors
Tiddlywiki's custom properties for colors are prefixed `--tc-color-`. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:
```
.tag {
background: <<colour tag-background>>;
}
```
Since v5.4.0, theme developers can use the following CSS to get the palette color:
```css
.tag {
background: var(--tp-color-tag-background);
}
```

48
editions/tw5.com/tiddlers/Writing stylesheets in vanilla CSS.tid Normal file
View file

@ -0,0 +1,48 @@
created: 20251108075645447
modified: 20251108081036094
title: Writing stylesheets in vanilla CSS
type: text/vnd.tiddlywiki
<<.from-version 5.4.0>> Before v5.4.0, theme developers have to mix wikitext syntax with CSS syntax when writing stylesheets to intergrate Tiddlywiki color palettes and theme settings. With the introduction of [[Core CSS Variables]] in v5.4.0, theme developers can intergrate most Tiddlywiki palettes with vanilla CSS.
! Getting Tiddlywiki palette colors
Tiddlywiki's custom properties for colors are prefixed `--tpc-`. Before v5.4.0, theme developers have to use the following wikitext to get a color value of a palette:
```
.tag {
background: <<colour tag-background>>;
}
```
Since v5.4.0, theme developers can use the following CSS to get the palette color:
```css
.tag {
background: var(--tp-color-tag-background);
}
```
! Getting and processing Tiddlywiki CSS settings
These core CSS properties can be used in the stylesheet:
<!-- TODO: Add documention about available CSS settings -->
```
\define sidebarbreakpoint-minus-one()
<$text text={{{ [{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}removesuffix[px]subtract[1]addsuffix[px]] ~[{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}] }}}/>
\end
@media (max-width: <<sidebarbreakpoint-minus-one>>) {
.tc-tiddler-frame {
box-shadow: none;
}
}
```
```css
@media (max-width: calc(var(--tp-sidebar-breakpoint) - 1px)) {
.tc-tiddler-frame {
box-shadow: none;
}
}
```