Skip to content

Commit 0089110

Browse files
authored
Improved theme settings support (#402)
This implements the improvements related to theming DocC-Render which were proposed in [Customizing the look and feel of Swift-DocC-Render] (https://forums.swift.org/t/customizing-the-look-and-feel-of-swift-docc-render/58858) Resolves: rdar://97040358
1 parent 5df2f9c commit 0089110

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

68 files changed

+141
-134
lines changed

app/public/theme-settings.json

Lines changed: 0 additions & 62 deletions
This file was deleted.

src/App.vue

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,19 @@ export default {
6363
computed: {
6464
currentColorScheme: ({ appState }) => appState.systemColorScheme,
6565
preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
66-
CSSCustomProperties: ({ themeSettings, currentColorScheme }) => (
67-
objectToCustomProperties(themeSettings.theme, currentColorScheme)
66+
CSSCustomProperties: ({
67+
currentColorScheme,
68+
preferredColorScheme,
69+
themeSettings,
70+
}) => (
71+
// If the user has selected "Auto", delegate to the system's current
72+
// preference to determine if "Light" or "Dark" colors should be used.
73+
// Otherwise, if "Light" or "Dark" has been explicitly chosen, that choice
74+
// should be used directly.
75+
objectToCustomProperties(themeSettings.theme, (preferredColorScheme === ColorScheme.auto.value
76+
? currentColorScheme
77+
: preferredColorScheme
78+
))
6879
),
6980
hasCustomHeader: () => !!window.customElements.get('custom-header'),
7081
hasCustomFooter: () => !!window.customElements.get('custom-footer'),
@@ -159,15 +170,15 @@ export default {
159170
AppStore.setSystemColorScheme(scheme.value);
160171
},
161172
attachStylesToRoot(CSSCustomProperties) {
162-
const root = document.documentElement;
173+
const root = document.body;
163174
Object.entries(CSSCustomProperties)
164175
.filter(([, value]) => Boolean(value))
165176
.forEach(([key, value]) => {
166177
root.style.setProperty(key, value);
167178
});
168179
},
169180
detachStylesFromRoot(CSSCustomProperties) {
170-
const root = document.documentElement;
181+
const root = document.body;
171182
Object.entries(CSSCustomProperties).forEach(([key]) => {
172183
root.style.removeProperty(key);
173184
});

src/components/Badge.vue

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,8 +43,6 @@ export default {
4343
<style lang="scss" scoped>
4444
@import 'docc-render/styles/_core.scss';
4545
46-
$badge-border-radius: $border-radius - 1px !default;
47-
4846
@mixin badge-variation($color) {
4947
--badge-color: var(--color-badge-#{$color});
5048
--badge-dark-color: var(--color-badge-dark-#{$color});
@@ -58,9 +56,10 @@ $badge-border-radius: $border-radius - 1px !default;
5856
padding: 2px 10px;
5957
white-space: nowrap;
6058
background: none;
61-
border-radius: $badge-border-radius;
59+
border-radius: var(--badge-border-radius, calc(#{$border-radius} - 1px));
60+
border-style: var(--badge-border-style, solid);
61+
border-width: var(--badge-border-width, 1px);
6262
margin-left: 10px;
63-
border: 1px solid var(--badge-color);
6463
color: var(--badge-color);
6564
6665
.theme-dark & {

src/components/ButtonLink.vue

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,11 @@ export default {
4848
@import "docc-render/styles/_core.scss";
4949
5050
.button-cta {
51-
border-radius: var(--style-button-borderRadius, $button-radius);
5251
background: var(--colors-button-light-background, var(--color-button-background));
52+
border-color: var(--color-button-border, currentcolor);
53+
border-radius: var(--button-border-radius, $button-radius);
54+
border-style: var(--button-border-style, none);
55+
border-width: var(--button-border-width, medium);
5356
color: var(--colors-button-text, var(--color-button-text));
5457
cursor: pointer;
5558
min-width: rem(30px);

src/components/ContentNode/Aside.vue

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -74,10 +74,14 @@ $aside-kinds: deprecated, experiment, important, note, tip, warning;
7474
// on the fact that a "doc-topic" class is applied to an ancestor element of
7575
// the aside in question
7676
.doc-topic aside {
77-
border-radius: $border-radius;
77+
border-radius: var(--aside-border-radius, $border-radius);
78+
border-style: var(--aside-border-style, solid);
79+
border-width: var(--aside-border-width,
80+
$aside-width-border
81+
$aside-width-border
82+
$aside-width-border
83+
$aside-width-left-border);
7884
padding: rem(16px);
79-
border: $aside-width-border solid;
80-
border-left-width: $aside-width-left-border;
8185
8286
@each $kind in $aside-kinds {
8387
&.#{$kind} {

src/components/ContentNode/CodeListing.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ code {
186186
.code-listing {
187187
flex-direction: column;
188188
min-height: 100%;
189-
border-radius: $border-radius;
189+
border-radius: var(--code-border-radius, $border-radius);
190190
overflow: auto;
191191
192192
&.single-line {

src/components/DocumentationTopic/ContentNode.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ $docs-code-listing-border-width: 1px !default;
3535
background: var(--background, var(--color-code-background));
3636
color: var(--text, var(--color-code-plain));
3737
border-color: var(--colors-grid, var(--color-grid));
38-
border-width: $docs-code-listing-border-width;
39-
border-style: solid;
38+
border-width: var(--code-border-width, $docs-code-listing-border-width);
39+
border-style: var(--code-border-style, solid);
4040
4141
& + *,
4242
* + & {

src/components/DocumentationTopic/DocumentationHero.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export default {
7373
color: ({ type }) => HeroColorsMap[TopicTypeAliases[type] || type] || HeroColors.teal,
7474
styles: ({ color }) => ({
7575
// use the color or fallback to the gray secondary, if not defined.
76-
'--accent-color': `var(--color-type-icon-${color}, var(--color-figure-gray-secondary))`,
76+
'--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}, var(--color-figure-gray-secondary)))`,
7777
}),
7878
// This mapping is necessary to help create a consistent mapping for the
7979
// following kinds of things, which are represented as different strings
@@ -108,15 +108,15 @@ $doc-hero-icon-dimension: 250px;
108108
109109
.documentation-hero {
110110
background: dark-color(fill);
111-
color: dark-color(figure-gray);
111+
color: var(--color-documentation-intro-figure, dark-color(figure-gray));
112112
overflow: hidden;
113113
text-align: left;
114114
position: relative;
115115
116116
// gradient
117117
&:before {
118118
content: '';
119-
background: $doc-hero-gradient-background;
119+
background: var(--color-documentation-intro-fill, $doc-hero-gradient-background);
120120
position: absolute;
121121
width: 100%;
122122
left: 0;
@@ -153,7 +153,7 @@ $doc-hero-icon-dimension: 250px;
153153
}
154154
155155
.background-icon {
156-
color: $doc-hero-icon-color;
156+
color: var(--color-documentation-intro-accent, $doc-hero-icon-color);
157157
display: block;
158158
width: $doc-hero-icon-dimension;
159159
height: auto;

src/components/DocumentationTopic/Title.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default {
3535
3636
.eyebrow {
3737
@include font-styles(eyebrow-reduced);
38-
color: dark-color(figure-gray-secondary);
38+
color: var(--color-documentation-intro-eyebrow, dark-color(figure-gray-secondary));
3939
display: block;
4040
margin-bottom: rem(20px);
4141
@@ -46,7 +46,7 @@ export default {
4646
4747
.title {
4848
@include font-styles(headline-reduced);
49-
color: dark-color(figure-gray);
49+
color: var(--color-documentation-intro-title, dark-color(figure-gray));
5050
margin-bottom: rem(12px);
5151
5252
.documentation-hero--disabled & {

src/components/Filter/FilterInput.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -426,7 +426,7 @@ $input-height: rem(28px);
426426
// Remove Gray Highlight When Tapping Links in Mobile Safari =>
427427
// https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
428428
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
429-
border-radius: $small-border-radius + 1;
429+
border-radius: calc(#{$small-border-radius} + 1px);
430430
@include on-keyboard-focus() {
431431
outline: none;
432432
}
@@ -484,8 +484,8 @@ $input-height: rem(28px);
484484
/deep/ ul {
485485
padding: var(--input-vertical-padding) rem(9px);
486486
border: 1px solid transparent;
487-
border-bottom-left-radius: $small-border-radius - 1;
488-
border-bottom-right-radius: $small-border-radius - 1;
487+
border-bottom-left-radius: calc(#{$small-border-radius} - 1px);
488+
border-bottom-right-radius: calc(#{$small-border-radius} - 1px);
489489
490490
@include on-keyboard-focus() {
491491
outline: none;

src/components/Icons/APIReferenceIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon viewBox="0 0 14 14" class="api-reference-icon">
12+
<SVGIcon viewBox="0 0 14 14" class="api-reference-icon" themeId="api-reference">
1313
<title>API Reference</title>
1414
<path d="m1 1v12h12v-12zm11 11h-10v-10h10z"/>
1515
<path d="m3 4h8v1h-8zm0 2.5h8v1h-8zm0 2.5h8v1h-8z"/>

src/components/Icons/ArticleIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="article-icon"
1414
viewBox="0 0 14 14"
15+
themeId="article"
1516
>
1617
<path d="M8.033 1l3.967 4.015v7.985h-10v-12zM7.615 2h-4.615v10h8v-6.574z"></path>
1718
<path d="M7 1h1v4h-1z"></path>

src/components/Icons/CheckCircleIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="check-circle-icon"
1414
viewBox="0 0 14 14"
15+
themeId="check-circle"
1516
>
1617
<path d="M7 0.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5c-3.59 0-6.5-2.91-6.5-6.5v0c0-3.59 2.91-6.5 6.5-6.5v0zM7 1.5c-3.038 0-5.5 2.462-5.5 5.5s2.462 5.5 5.5 5.5c3.038 0 5.5-2.462 5.5-5.5v0c0-3.038-2.462-5.5-5.5-5.5v0z"></path>
1718
<path d="M9.626 3.719l0.866 0.5-3.5 6.062-3.464-2 0.5-0.866 2.6 1.5z"></path>

src/components/Icons/ChevronIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon class="chevron-icon" viewBox="0 0 14 14">
12+
<SVGIcon class="chevron-icon" viewBox="0 0 14 14" themeId="chevron">
1313
<path d="M3.22 1.184l0.325-0.38 7.235 6.201-7.235 6.19-0.325-0.38 6.792-5.811-6.792-5.82z"></path>
1414
</SVGIcon>
1515
</template>

src/components/Icons/ChevronRoundedIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="chevron-rounded-icon"
1414
viewBox="0 0 14 25"
15+
themeId="chevron-rounded"
1516
>
1617
<path d="M1,24.4a.9.9,0,0,0,.7-.3L13.4,13a1,1,0,0,0,0-1.6L1.7.3A.9.9,0,0,0,1,0,.9.9,0,0,0,0,1a.9.9,0,0,0,.3.7l11,10.5L.3,22.7a.9.9,0,0,0-.3.7A.9.9,0,0,0,1,24.4Z" />
1718
</SVGIcon>

src/components/Icons/ClearRoundedIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="clear-rounded-icon"
1414
viewBox="0 0 16 16"
15+
themeId="clear-rounded"
1516
>
1617
<title>Clear</title>
1718
<path d="M9.864,3.5l.636.636L7.632,7l2.862,2.861-.636.636L7,7.639,4.142,10.494l-.636-.636L6.36,7,3.5,4.142l.636-.636L7,6.367Z" fill-rule="evenodd"/>

src/components/Icons/CloseIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="close-icon"
1414
viewBox="0 0 14 14"
15+
themeId="close"
1516
>
1617
<path d="m10.3772239 3.1109127.7266116.7266116-3.27800002 3.2763884 3.27072752 3.2703884-.7266116.7266116-3.27011592-3.271-3.26211596 3.2637276-.7266116-.7266116 3.26272756-3.263116-3.27-3.26911596.72661159-.72661159 3.26938841 3.26972755z" fill-rule="evenodd"/>
1718
</SVGIcon>

src/components/Icons/CollectionIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon viewBox="0 0 14 14" class="collection-icon">
12+
<SVGIcon viewBox="0 0 14 14" class="collection-icon" themeId="collection">
1313
<path d="m1 1v12h12v-12zm11 11h-10v-10h10z"/>
1414
<path d="m3 4h8v1h-8zm0 2.5h8v1h-8zm0 2.5h8v1h-8z"/>
1515
<path d="m3 4h8v1h-8z"/>

src/components/Icons/CurlyBracketsIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon viewBox="0 0 14 14" class="curly-brackets-icon">
12+
<SVGIcon viewBox="0 0 14 14" class="curly-brackets-icon" themeId="curly-brackets">
1313
<path d="M9.987 14h-0.814v-0.916h0.36c0.137 0 0.253-0.038 0.349-0.116 0.099-0.080 0.179-0.188 0.239-0.318 0.064-0.134 0.11-0.298 0.139-0.483 0.031-0.186 0.045-0.38 0.045-0.58v-2.115c0-0.417 0.046-0.781 0.139-1.083 0.092-0.3 0.2-0.554 0.322-0.754 0.127-0.203 0.246-0.353 0.366-0.458 0.087-0.076 0.155-0.131 0.207-0.169-0.052-0.037-0.12-0.093-0.207-0.167-0.12-0.105-0.239-0.255-0.366-0.459-0.122-0.2-0.23-0.453-0.322-0.754-0.093-0.3-0.139-0.665-0.139-1.082v-2.13c0-0.199-0.014-0.392-0.045-0.572-0.029-0.182-0.076-0.345-0.139-0.483-0.060-0.137-0.141-0.246-0.239-0.328-0.095-0.076-0.212-0.115-0.349-0.115h-0.36v-0.916h0.814c0.442 0 0.788 0.18 1.030 0.538 0.238 0.352 0.358 0.826 0.358 1.407v2.236c0 0.3 0.015 0.597 0.044 0.886 0.030 0.287 0.086 0.544 0.164 0.765 0.077 0.216 0.184 0.392 0.318 0.522 0.129 0.124 0.298 0.188 0.503 0.188h0.058v0.916h-0.058c-0.206 0-0.374 0.064-0.503 0.188-0.134 0.129-0.242 0.305-0.318 0.521-0.078 0.223-0.134 0.48-0.164 0.766-0.029 0.288-0.044 0.587-0.044 0.884v2.236c0 0.582-0.12 1.055-0.358 1.409-0.242 0.358-0.588 0.538-1.030 0.538z"></path>
1414
<path d="M4.827 14h-0.814c-0.442 0-0.788-0.18-1.030-0.538-0.238-0.352-0.358-0.825-0.358-1.409v-2.221c0-0.301-0.015-0.599-0.045-0.886-0.029-0.287-0.085-0.544-0.163-0.764-0.077-0.216-0.184-0.393-0.318-0.522-0.131-0.127-0.296-0.188-0.503-0.188h-0.058v-0.916h0.058c0.208 0 0.373-0.063 0.503-0.188 0.135-0.129 0.242-0.304 0.318-0.522 0.078-0.22 0.134-0.477 0.163-0.765 0.030-0.286 0.045-0.585 0.045-0.886v-2.251c0-0.582 0.12-1.055 0.358-1.407 0.242-0.358 0.588-0.538 1.030-0.538h0.814v0.916h-0.36c-0.138 0-0.252 0.038-0.349 0.116-0.099 0.079-0.179 0.189-0.239 0.327-0.064 0.139-0.11 0.302-0.141 0.483-0.029 0.18-0.044 0.373-0.044 0.572v2.13c0 0.417-0.046 0.782-0.138 1.082-0.092 0.302-0.201 0.556-0.324 0.754-0.123 0.201-0.246 0.356-0.366 0.459-0.086 0.074-0.153 0.13-0.206 0.167 0.052 0.038 0.12 0.093 0.206 0.169 0.12 0.103 0.243 0.258 0.366 0.458s0.232 0.453 0.324 0.754c0.092 0.302 0.138 0.666 0.138 1.083v2.115c0 0.2 0.015 0.394 0.044 0.58 0.030 0.186 0.077 0.349 0.139 0.482 0.062 0.132 0.142 0.239 0.241 0.32 0.096 0.079 0.21 0.116 0.349 0.116h0.36z"></path>
1515
</SVGIcon>

src/components/Icons/DiagonalArrowIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon class="diagonal-arrow" viewBox="0 0 14 14">
12+
<SVGIcon class="diagonal-arrow" viewBox="0 0 14 14" themeId="diagonal-arrow">
1313
<path d="M0.010 12.881l10.429-10.477-3.764 0.824-0.339-1.549 7.653-1.679-1.717 7.622-1.546-0.349 0.847-3.759-10.442 10.487z"></path>
1414
</SVGIcon>
1515
</template>

src/components/Icons/DocumentIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon class="document-icon" viewBox="0 0 14 14">
12+
<SVGIcon class="document-icon" viewBox="0 0 14 14" themeId="document">
1313
<path d="M11.2,5.3,8,2l-.1-.1H2.8V12.1h8.5V6.3l-.1-1ZM8,3.2l2,2.1H8Zm2.4,8H3.6V2.8H7V6.3h3.4Z"/>
1414
</SVGIcon>
1515
</template>

src/components/Icons/DownloadIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon class="download-icon" viewBox="0 0 14 14">
12+
<SVGIcon class="download-icon" viewBox="0 0 14 14" themeId="download">
1313
<path d="M7 0.5c3.59 0 6.5 2.91 6.5 6.5s-2.91 6.5-6.5 6.5c-3.59 0-6.5-2.91-6.5-6.5s2.91-6.5 6.5-6.5zM7 1.5c-3.038 0-5.5 2.462-5.5 5.5s2.462 5.5 5.5 5.5c3.038 0 5.5-2.462 5.5-5.5s-2.462-5.5-5.5-5.5z"></path>
1414
<path d="M7.51 2.964l-0.001 5.431 1.308-2.041 0.842 0.539-2.664 4.162-2.633-4.164 0.845-0.534 1.303 2.059 0.001-5.452z"></path>
1515
</SVGIcon>

src/components/Icons/EllipsisIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon class="ellipsis-icon" viewBox="0 0 14 14">
12+
<SVGIcon class="ellipsis-icon" viewBox="0 0 14 14" themeId="ellipsis">
1313
<path d="m12.439 7.777v-1.554h-1.554v1.554zm-4.662 0v-1.554h-1.554v1.554zm-4.662 0v-1.554h-1.554v1.554z"/>
1414
</SVGIcon>
1515
</template>

src/components/Icons/EndpointIcon.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
-->
1010

1111
<template>
12-
<SVGIcon viewBox="0 0 14 14">
12+
<SVGIcon viewBox="0 0 14 14" themeId="endpoint">
1313
<title>Web Service Endpoint</title>
1414
<path d="M4.052 8.737h-1.242l-1.878 5.263h1.15l0.364-1.081h1.939l0.339 1.081h1.193zM2.746 12.012l0.678-2.071 0.653 2.071z"></path>
1515
<path d="M11.969 8.737h1.093v5.263h-1.093v-5.263z"></path>

src/components/Icons/FilterIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
width="14"
1616
viewBox="0 0 14 14"
1717
fill="currentColor"
18+
themeId="filter"
1819
>
1920
<path d="m2 6.5h10v1h-10z"/>
2021
<path d="m1 3h12v1h-12z"/>

src/components/Icons/ForumIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="forum-icon"
1414
viewBox="0 0 14 14"
15+
themeId="forum"
1516
>
1617
<path d="M13 1v9h-7l-1.5 3-1.5-3h-2v-9zM12 2h-10v7h1.616l0.884 1.763 0.88-1.763h6.62z"></path>
1718
<path d="M3 4h8.001v1h-8.001v-1z"></path>

src/components/Icons/GenericFileIcon.vue

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
<SVGIcon
1313
class="generic-file-icon"
1414
viewBox="0 0 14 14"
15+
themeId="generic-file"
1516
>
1617
<path d="M8.033 1l3.967 4.015v7.985h-10v-12zM7.615 2h-4.615v10h8v-6.574z"></path>
1718
<path d="M7 1h1v4h-1z"></path>

0 commit comments

Comments
 (0)