Skip to content

Intergrate tiddlywiki palette colors and settings to custom CSS properties #9333

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Intergrate tiddlywiki palette colors and settings to custom CSS properties #9333

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1e86e13
Expose tiddlywiki palette colors and settings to custom CSS properties
Leilei332 Oct 11, 2025
6592c07
Rename & use --tc prefix
Leilei332 Oct 12, 2025
48c9f03
Add colors and CSS settings
Leilei332 Oct 12, 2025
73bb30c
Make CSS settings properties' name readable
Leilei332 Oct 12, 2025
0dd151f
Add all CSS settings
Leilei332 Oct 12, 2025
9a628a4
Add all palette colors
Leilei332 Oct 17, 2025
5b41130
Remove macrocallblock rule
Leilei332 Oct 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
170 changes: 170 additions & 0 deletions core/stylesheets/custom-properties.tid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
title: $:/core/stylesheets/custom-properties
tags: [[$:/tags/Stylesheet]]
list-before:

\rules only transcludeinline macrocallinline

/* Tiddlywiki's CSS properties */

:root {
--tc-alert-background: <<colour alert-background>>;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The tc- prefix is used for TW class names. So IMO it will be confusing if we use it for CSS variables too.

tv- is used for TW variables. So imo --tv- can be used for CSS variables. This would be more consistent

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually c stands for color here. In custom properties there is no classes, but there exists color data type.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Leilei332 I do think that using tc- is confusing, and we need to adopt a different prefix here. Many appropriate prefixes have already been used (eg tv- which is used for TW system variables).

Perhaps we might introduce a new v- prefix for CSS variable, so you’d have v-alert-background etc.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @Leilei332 I do think that using tc- is confusing, and we need to adopt a different prefix here. Many appropriate prefixes have already been used (eg tv- which is used for TW system variables).

Perhaps we might introduce a new v- prefix for CSS variable, so you’d have v-alert-background etc.

If we don't care about the potential name conflict between CSS settings and palette colors, I think tp- prefix is acceptable. If we do care, we may use tp-c- prefix.

Copy link
Member

@pmario pmario Oct 12, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think --cc- for CSS color and
--cp- for CSS parameter would be OK and consistent.

It avoids name clashes with user CSS variables, so they do not use any prefix. It's also easy to discuss at Talk. Users may use a shortcut for cc-variables or cp-variables -- It's not correct, but we still will know what is meant.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think --cc- for CSS color and
--cp- for CSS parameter would be OK and consistent.

It avoids name clashes with user CSS variables, so they do not use any prefix. It's also easy to discuss at Talk. Users may use a shortcut for cc-variables or cp-variables -- It's not correct, but we still will know what is meant.

This isn't acceptable. It can't show that this custom property is only for tiddlywiki.

--tc-alert-border: <<colour alert-border>>;
--tc-alert-highlight: <<colour alert-highlight>>;
--tc-alert-muted-foreground: <<colour alert-muted-foreground>>;
--tc-background: <<colour background>>;
--tc-blockquote-bar: <<colour blockquote-bar>>;
--tc-button-background: <<colour button-background>>;
--tc-button-border: <<colour button-border>>;
--tc-button-foreground: <<colour button-foreground>>;
--tc-code-background: <<colour code-background>>;
--tc-code-border: <<colour code-border>>;
--tc-code-foreground: <<colour code-foreground>>;
--tc-diff-delete-background: <<colour diff-delete-background>>;
--tc-diff-delete-foreground: <<colour diff-delete-foreground>>;
--tc-diff-equal-background: <<colour diff-equal-background>>;
--tc-diff-equal-foreground: <<colour diff-equal-foreground>>;
--tc-diff-insert-background: <<colour diff-insert-background>>;
--tc-diff-insert-foreground: <<colour diff-insert-foreground>>;
--tc-diff-invisible-background: <<colour diff-invisible-background>>;
--tc-diff-invisible-foreground: <<colour diff-invisible-foreground>>;
--tc-dirty-indicator: <<colour dirty-indicator>>;
--tc-download-background: <<colour download-background>>;
--tc-download-foreground: <<colour download-foreground>>;
--tc-dragger-background: <<colour dragger-background>>;
--tc-dragger-foreground: <<colour dragger-foreground>>;
--tc-dropdown-background: <<colour dropdown-background>>;
--tc-dropdown-border: <<colour dropdown-border>>;
--tc-dropdown-tab-background-selected: <<colour dropdown-tab-background-selected>>;
--tc-dropdown-tab-background: <<colour dropdown-tab-background>>;
--tc-dropzone-background: <<colour dropzone-background>>;
--tc-external-link-background-hover: <<colour external-link-background-hover>>;
--tc-external-link-background-visited: <<colour external-link-background-visited>>;
--tc-external-link-background: <<colour external-link-background>>;
--tc-external-link-foreground-hover: <<colour external-link-foreground-hover>>;
--tc-external-link-foreground-visited: <<colour external-link-foreground-visited>>;
--tc-external-link-foreground: <<colour external-link-foreground>>;
--tc-footnote-target-background: <<colour footnote-target-background>>;
--tc-foreground: <<colour foreground>>;
--tc-highlight-background: <<colour highlight-background>>;
--tc-highlight-foreground: <<colour highlight-foreground>>;
--tc-message-background: <<colour message-background>>;
--tc-message-border: <<colour message-border>>;
--tc-message-foreground: <<colour message-foreground>>;
--tc-modal-backdrop: <<colour modal-backdrop>>;
--tc-modal-background: <<colour modal-background>>;
--tc-modal-border: <<colour modal-border>>;
--tc-modal-footer-background: <<colour modal-footer-background>>;
--tc-modal-footer-border: <<colour modal-footer-border>>;
--tc-modal-header-border: <<colour modal-header-border>>;
--tc-muted-foreground: <<colour muted-foreground>>;
--tc-network-activity-foreground: <<colour network-activity-foreground>>;
--tc-notification-background: <<colour notification-background>>;
--tc-notification-border: <<colour notification-border>>;
--tc-page-background: <<colour page-background>>;
--tc-pre-background: <<colour pre-background>>;
--tc-pre-border: <<colour pre-border>>;
--tc-primary: <<colour primary>>;
--tc-selection-background: <<colour selection-background>>;
--tc-selection-foreground: <<colour selection-foreground>>;
--tc-select-tag-background: <<colour select-tag-background>>;
--tc-select-tag-foreground: <<colour select-tag-foreground>>;
--tc-sidebar-button-foreground: <<colour sidebar-button-foreground>>;
--tc-sidebar-controls-foreground-hover: <<colour sidebar-controls-foreground-hover>>;
--tc-sidebar-controls-foreground: <<colour sidebar-controls-foreground>>;
--tc-sidebar-foreground-shadow: <<colour sidebar-foreground-shadow>>;
--tc-sidebar-foreground: <<colour sidebar-foreground>>;
--tc-sidebar-muted-foreground-hover: <<colour sidebar-muted-foreground-hover>>;
--tc-sidebar-muted-foreground: <<colour sidebar-muted-foreground>>;
--tc-sidebar-tab-background-selected: <<colour sidebar-tab-background-selected>>;
--tc-sidebar-tab-background: <<colour sidebar-tab-background>>;
--tc-sidebar-tab-border-selected: <<colour sidebar-tab-border-selected>>;
--tc-sidebar-tab-border: <<colour sidebar-tab-border>>;
--tc-sidebar-tab-divider: <<colour sidebar-tab-divider>>;
--tc-sidebar-tab-foreground-selected: <<colour sidebar-tab-foreground-selected>>;
--tc-sidebar-tab-foreground: <<colour sidebar-tab-foreground>>;
--tc-sidebar-tiddler-link-foreground-hover: <<colour sidebar-tiddler-link-foreground-hover>>;
--tc-sidebar-tiddler-link-foreground: <<colour sidebar-tiddler-link-foreground>>;
--tc-site-title-foreground: <<colour site-title-foreground>>;
--tc-stability-stable: <<colour stability-stable>>;
--tc-stability-experimental: <<colour stability-experimental>>;
--tc-stability-deprecated: <<colour stability-deprecated>>;
--tc-stability-legacy: <<colour stability-legacy>>;
--tc-static-alert-foreground: <<colour static-alert-foreground>>;
--tc-tab-background-selected: <<colour tab-background-selected>>;
--tc-tab-background: <<colour tab-background>>;
--tc-tab-border-selected: <<colour tab-border-selected>>;
--tc-tab-border: <<colour tab-border>>;
--tc-tab-divider: <<colour tab-divider>>;
--tc-tab-foreground-selected: <<colour tab-foreground-selected>>;
--tc-tab-foreground: <<colour tab-foreground>>;
--tc-table-border: <<colour table-border>>;
--tc-table-footer-background: <<colour table-footer-background>>;
--tc-table-header-background: <<colour table-header-background>>;
--tc-tag-background: <<colour tag-background>>;
--tc-tag-foreground: <<colour tag-foreground>>;
--tc-testcase-accent-level-1: <<colour testcase-accent-level-1>>;
--tc-testcase-accent-level-2: <<colour testcase-accent-level-2>>;
--tc-testcase-accent-level-3: <<colour testcase-accent-level-3>>;
--tc-tiddler-background: <<colour tiddler-background>>;
--tc-tiddler-border: <<colour tiddler-border>>;
--tc-tiddler-controls-foreground-hover: <<colour tiddler-controls-foreground-hover>>;
--tc-tiddler-controls-foreground-selected: <<colour tiddler-controls-foreground-selected>>;
--tc-tiddler-controls-foreground: <<colour tiddler-controls-foreground>>;
--tc-tiddler-editor-background: <<colour tiddler-editor-background>>;
--tc-tiddler-editor-border-image: <<colour tiddler-editor-border-image>>;
--tc-tiddler-editor-border: <<colour tiddler-editor-border>>;
--tc-tiddler-editor-fields-even: <<colour tiddler-editor-fields-even>>;
--tc-tiddler-editor-fields-odd: <<colour tiddler-editor-fields-odd>>;
--tc-tiddler-info-background: <<colour tiddler-info-background>>;
--tc-tiddler-info-border: <<colour tiddler-info-border>>;
--tc-tiddler-info-tab-background: <<colour tiddler-info-tab-background>>;
--tc-tiddler-link-background: <<colour tiddler-link-background>>;
--tc-tiddler-link-foreground: <<colour tiddler-link-foreground>>;
--tc-tiddler-subtitle-foreground: <<colour tiddler-subtitle-foreground>>;
--tc-tiddler-title-foreground: <<colour tiddler-title-foreground>>;
--tc-toolbar-new-button: <<colour toolbar-new-button>>;
--tc-toolbar-options-button: <<colour toolbar-options-button>>;
--tc-toolbar-save-button: <<colour toolbar-save-button>>;
--tc-toolbar-info-button: <<colour toolbar-info-button>>;
--tc-toolbar-edit-button: <<colour toolbar-edit-button>>;
--tc-toolbar-close-button: <<colour toolbar-close-button>>;
--tc-toolbar-delete-button: <<colour toolbar-delete-button>>;
--tc-toolbar-cancel-button: <<colour toolbar-cancel-button>>;
--tc-toolbar-done-button: <<colour toolbar-done-button>>;
--tc-untagged-background: <<colour untagged-background>>;
--tc-very-muted-foreground: <<colour very-muted-foreground>>;
--tc-wikilist-background: <<colour wikilist-background>>;
--tc-wikilist-item: <<colour wikilist-item>>;
--tc-wikilist-info: <<colour wikilist-info>>;
--tc-wikilist-title: <<colour wikilist-title>>;
--tc-wikilist-title-svg: <<colour wikilist-title-svg>>;
--tc-wikilist-url: <<colour wikilist-url>>;
--tc-wikilist-button-open: <<colour wikilist-button-open>>;
--tc-wikilist-button-open-hover: <<colour wikilist-button-open-hover>>;
--tc-wikilist-button-reveal: <<colour wikilist-button-reveal>>;
--tc-wikilist-button-reveal-hover: <<colour wikilist-button-reveal-hover>>;
--tc-wikilist-button-remove: <<colour wikilist-button-remove>>;
--tc-wikilist-button-remove-hover: <<colour wikilist-button-remove-hover>>;
--tc-wikilist-toolbar-background: <<colour wikilist-toolbar-background>>;
--tc-wikilist-toolbar-foreground: <<colour wikilist-toolbar-foreground>>;
--tc-wikilist-droplink-dragover: <<colour wikilist-droplink-dragover>>;
--tc-wikilist-button-background: <<colour wikilist-button-background>>;
--tc-wikilist-button-foreground: <<colour wikilist-button-foreground>>;

/* CSS settings */
--tp-code-wrapping: {{$:/themes/tiddlywiki/vanilla/options/codewrapping}};
--tp-font-family: {{$:/themes/tiddlywiki/vanilla/settings/fontfamily}};
--tp-code-font-family: {{$:/themes/tiddlywiki/vanilla/settings/codefontfamily}};
--tp-editor-font-family: {{$:/themes/tiddlywiki/vanilla/settings/editorfontfamily}};
--tp-font-size: {{$:/themes/tiddlywiki/vanilla/metrics/fontsize}};
--tp-line-height: {{$:/themes/tiddlywiki/vanilla/metrics/lineheight}};
--tp-body-font-size: {{$:/themes/tiddlywiki/vanilla/metrics/bodyfontsize}};
--tp-body-line-height: {{$:/themes/tiddlywiki/vanilla/metrics/bodylineheight}};
--tp-story-left: {{$:/themes/tiddlywiki/vanilla/metrics/storyleft}};
--tp-story-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
--tp-story-right: {{$:/themes/tiddlywiki/vanilla/metrics/storyright}};
--tp-story-width: {{$:/themes/tiddlywiki/vanilla/metrics/storyrwidth}};
--tp-tiddler-width: {{$:/themes/tiddlywiki/vanilla/metrics/tiddlerwidth}};
--tp-sidebar-breakpoint: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarbreakpoint}};
--tp-sidebar-width: {{$:/themes/tiddlywiki/vanilla/metrics/sidebarwidth}};
}