2014-06-12 18:01:33 +01:00
title: $:/core/macros/CSS
2024-10-22 13:15:34 +01:00
tags: $:/tags/Macro
2014-06-12 18:01:33 +01:00
2025-02-05 18:05:57 +00:00
\procedure actions-compile-palette-filtered(consolidatedPalette,outputPalette)
2024-11-19 09:09:11 +00:00
<!-- Note the join, needed to cope with palette entries containing spaces -->
2025-02-06 11:27:04 +00:00
\function colour(name) [<consolidatedPalette>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] :map[subfilter<currentTiddler>join[ ]]
2025-02-03 13:26:25 +00:00
\function color(name) [function[colour],<name>]
2024-11-09 19:03:54 +00:00
<!-- Make the colour function use the input palette -->
2025-02-05 17:11:51 +00:00
<$list filter="[<consolidatedPalette>indexes[]sort[]]" variable="colour-name">
2025-02-06 11:27:04 +00:00
<$let filter-text={{{ [<consolidatedPalette>getindex<colour-name>] :else[[$:/config/DefaultColourMappings/]addsuffix<colour-name>get[text]] :map[tf.colour-inner-transform-classic-palette-entry<currentTiddler>] }}}>
2025-01-28 15:44:42 +00:00
<!-- Note the join, needed to cope with palette entries containing spaces -->
2025-02-05 17:11:51 +00:00
<$action-setfield $tiddler=<<outputPalette>> $index=<<colour-name>> $value={{{ [subfilter<filter-text>join[ ]] }}}/>
2025-01-28 15:44:42 +00:00
</$let>
</$list>
2024-11-09 19:03:54 +00:00
\end actions-compile-palette-filtered
2025-02-06 11:27:04 +00:00
\procedure actions-compile-palette-import(inputPalette,outputPalette,exclusions:"",scheme)
2025-02-05 17:11:51 +00:00
<%if [enlist<exclusions>!match<inputPalette>count[]] :map[enlist<exclusions>count[]compare:number:eq<currentTiddler>] +[!match[]] %>
<$set name="exclusions" filter="[enlist<exclusions>] [<inputPalette>]">
2025-02-04 21:18:54 +00:00
<!-- Recursively import any imported palette -->
2025-02-04 16:26:15 +00:00
<$let
2025-02-04 21:18:54 +00:00
prefixed-palette-import={{{ [[palette-import@]addsuffix<scheme>] }}}
2025-02-05 17:11:51 +00:00
inputPalette={{{ [<inputPalette>get<prefixed-palette-import>has[title]] :else[<inputPalette>get[palette-import]] }}}
2025-02-04 16:26:15 +00:00
>
2025-02-05 17:11:51 +00:00
<%if [<inputPalette>has[title]] %>
2025-02-06 11:27:04 +00:00
<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<outputPalette>> exclusions=<<exclusions>> scheme=<<scheme>>/>
2025-02-04 21:18:54 +00:00
<%endif%>
2025-02-04 16:26:15 +00:00
</$let>
2025-02-04 21:18:54 +00:00
<!-- Copy the suffixed palette entries with the suffix stripped -->
<%if [<scheme>!is[blank]] %>
<$let
prefixed-scheme={{{ [<scheme>addprefix[@]] }}}
>
2025-02-05 17:11:51 +00:00
<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]suffix<prefixed-scheme>removesuffix<prefixed-scheme>sort[]]" $values="[<inputPalette>indexes[]suffix<prefixed-scheme>sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
2025-02-04 21:18:54 +00:00
</$let>
<%endif%
<!-- Copy the unsuffixed palette entries -->
2025-02-05 17:11:51 +00:00
<$action-setmultiplefields $tiddler=<<outputPalette>> $indexes="[<inputPalette>indexes[]!regexp[@]sort[]]" $values="[<inputPalette>indexes[]!regexp[@]sort[]] :map[<inputPalette>getindex<currentTiddler>]"/>
2025-02-04 21:18:54 +00:00
<!-- Copy the fields from the palette -->
2025-02-05 17:11:51 +00:00
<$action-setmultiplefields $tiddler=<<outputPalette>> $fields="[<inputPalette>fields[]sort[]] -title -tags -text" $values="[<inputPalette>fields[]sort[]] -title -tags -text :map[<inputPalette>get<currentTiddler>]"/>
2025-02-04 21:18:54 +00:00
</$set>
2025-01-28 19:18:58 +00:00
<%endif%>
\end actions-compile-palette-import
2025-02-05 17:11:51 +00:00
\procedure actions-compile-palette(inputPalette,outputPalette)
2025-01-25 17:28:00 +00:00
\procedure tv-action-refresh-policy() always
2024-11-09 19:03:54 +00:00
<$let
2025-02-05 17:11:51 +00:00
consolidatedPalette="$:/temp/palette-consolidated"
2024-11-09 19:03:54 +00:00
>
2025-02-03 13:26:25 +00:00
<!-- Compute the current scheme -->
<$let
2025-02-05 17:11:51 +00:00
color-scheme-filter={{{ [<inputPalette>get[color-scheme]] :else[[light]] }}}
2025-02-03 13:26:25 +00:00
scheme={{{ [subfilter<color-scheme-filter>] }}}
>
2025-02-05 17:11:51 +00:00
<!-- Clear the consolidated palette that stores the result of flattening the chain of imported input palettes -->
<$action-deletetiddler $tiddler=<<consolidatedPalette>>/>
<$action-setfield $tiddler=<<consolidatedPalette>> type="application/x-tiddler-dictionary"/>
<!-- Clear the output palette that stores the plain CSS values of palette entries -->
<$action-deletetiddler $tiddler=<<outputPalette>>/>
<$action-setfield $tiddler=<<outputPalette>> type="application/x-tiddler-dictionary"/>
2025-02-03 13:26:25 +00:00
<!-- Consolidate the chain of palettes -->
2025-02-06 11:27:04 +00:00
<$transclude $variable="actions-compile-palette-import" inputPalette=<<inputPalette>> outputPalette=<<consolidatedPalette>> scheme=<<scheme>>/>
2025-02-04 16:44:07 +00:00
<!-- Save the current scheme in the output tiddler -->
2025-02-05 17:11:51 +00:00
<$action-setfield $tiddler=<<outputPalette>> $field="color-scheme" $value=<<scheme>>/>
2025-02-03 13:26:25 +00:00
<!-- Compile the temporary palette to the output palette -->
2025-02-06 11:27:04 +00:00
<$transclude $variable="actions-compile-palette-filtered" consolidatedPalette=<<consolidatedPalette>> outputPalette=<<outputPalette>>/>
2025-02-03 13:26:25 +00:00
</$let>
2024-11-09 17:02:00 +00:00
</$let>
2024-11-09 16:15:33 +00:00
\end actions-compile-palette
2025-01-08 21:37:44 +00:00
\procedure actions-recompile-current-palette()
2025-01-25 17:28:00 +00:00
\procedure tv-action-refresh-policy() always
2025-02-05 17:11:51 +00:00
<$transclude $variable="actions-compile-palette" inputPalette={{$:/palette}} outputPalette="$:/temp/palette-colours"/>
2025-01-08 21:37:44 +00:00
\end actions-recompile-current-palette
2024-11-09 16:15:33 +00:00
\procedure actions-switch-colour-palette(paletteTitle)
2024-11-09 19:03:54 +00:00
\procedure tv-action-refresh-policy() always
2024-11-09 16:15:33 +00:00
<$action-deletetiddler $tiddler="$:/temp/palette-colours"/>
2025-01-25 17:28:00 +00:00
<<actions-recompile-current-palette>>
2024-11-09 16:15:33 +00:00
\end actions-switch-colour-palette
2024-11-09 17:02:00 +00:00
\procedure tv-palette-name() $:/temp/palette-colours
2024-11-09 16:15:33 +00:00
\function colour(name)
2025-02-04 16:26:15 +00:00
[<tv-palette-name>getindex<name>] :else[[$:/config/DefaultColourMappings/]addsuffix<name>get[text]]
2024-11-09 16:15:33 +00:00
\end colour
2014-06-12 18:01:33 +01:00
2024-11-09 16:15:33 +00:00
\function color(name)
[function[colour],<name>]
\end color
2014-08-18 10:14:19 +01:00
2025-02-06 11:27:04 +00:00
\procedure colour-function-prefix()
[function[colour],[
\end colour-function-prefix
\procedure colour-function-suffix()
]]
\end colour-function-suffix
\function tf.colour-inner-transform-classic-palette-entry(colour-result)
[<colour-result>prefix[<<colour ]suffix[>>]removeprefix[<<colour ]removesuffix[>>]addprefix<colour-function-prefix>addsuffix<colour-function-suffix>] :else[<colour-result>]
\end tf.colour-inner-transform-classic-palette-entry
2024-12-15 18:48:48 +00:00
\function tf.check-colour-contrast-subfunction()
[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] +[colour-contrast:DeltaPhi[]fixed[3]]
\end tf.check-colour-contrast-subfunction
2024-11-19 09:09:11 +00:00
\function tf.check-colour-contrast(paletteEntryA,paletteEntryB,threshold)
2024-12-15 18:48:48 +00:00
[function[tf.check-colour-contrast-subfunction]compare:number:gt<threshold>then[ok]] :else[function[tf.check-colour-contrast-subfunction]addsuffix[: ]addsuffix<paletteEntryA>addsuffix[/]addsuffix<paletteEntryB>addsuffix[ contrast is too low]]
2024-11-19 09:09:11 +00:00
\end tf.check-colour-contrast
2025-01-02 17:10:29 +00:00
\function tf.interpolate-colours(paletteEntryA,paletteEntryB,weight)
[function[colour],<paletteEntryA>] [function[colour],<paletteEntryB>] +[colour-interpolate:oklch<weight>]
\end tf.interpolate-colours
2024-10-23 08:21:11 +01:00
\define box-shadow(shadow)
``
-webkit-box-shadow: $shadow$;
-moz-box-shadow: $shadow$;
box-shadow: $shadow$;
``
2014-08-18 10:14:19 +01:00
\end
2024-10-23 08:21:11 +01:00
\define filter(filter)
``
-webkit-filter: $filter$;
-moz-filter: $filter$;
filter: $filter$;
``
2014-08-18 10:14:19 +01:00
\end
2024-10-23 08:21:11 +01:00
\define transition(transition)
``
-webkit-transition: $transition$;
-moz-transition: $transition$;
transition: $transition$;
``
2014-08-18 10:14:19 +01:00
\end
2024-10-23 08:21:11 +01:00
\define transform-origin(origin)
``
-webkit-transform-origin: $origin$;
-moz-transform-origin: $origin$;
transform-origin: $origin$;
``
2014-08-18 10:14:19 +01:00
\end
2024-10-23 08:21:11 +01:00
\define background-linear-gradient(gradient)
``
background-image: linear-gradient($gradient$);
background-image: -o-linear-gradient($gradient$);
background-image: -moz-linear-gradient($gradient$);
background-image: -webkit-linear-gradient($gradient$);
background-image: -ms-linear-gradient($gradient$);
``
2014-08-18 10:14:19 +01:00
\end
2024-10-23 08:21:11 +01:00
\define column-count(columns)
``
-moz-column-count: $columns$;
-webkit-column-count: $columns$;
column-count: $columns$;
``
2016-08-27 14:24:03 +01:00
\end
2024-02-14 19:44:22 +01:00
\procedure datauri(title)
<$macrocall $name="makedatauri" type={{{ [<title>get[type]] }}} text={{{ [<title>get[text]] }}} _canonical_uri={{{ [<title>get[_canonical_uri]] }}}/>
2014-08-18 10:14:19 +01:00
\end
2024-02-14 19:44:22 +01:00
\procedure if-sidebar(text)
<$reveal state="$:/state/sidebar" type="match" text="yes" default="yes"><<text>></$reveal>
2014-08-18 10:14:19 +01:00
\end
2024-02-14 19:44:22 +01:00
\procedure if-no-sidebar(text)
<$reveal state="$:/state/sidebar" type="nomatch" text="yes" default="yes"><<text>></$reveal>
2014-08-18 10:14:19 +01:00
\end
2018-01-23 17:49:24 +01:00
2024-02-14 19:44:22 +01:00
\procedure if-background-attachment(text)
<$reveal state="$:/themes/tiddlywiki/vanilla/settings/backgroundimage" type="nomatch" text=""><<text>></$reveal>
2018-01-23 17:49:24 +01:00
\end