swiftlang · mportiz08 · Sep 23, 2022 · May 17, 2022 · Jul 28, 2022 · Jul 29, 2022
diff --git a/app/public/theme-settings.json b/app/public/theme-settings.json
diff --git a/src/App.vue b/src/App.vue
@@ -63,8 +63,19 @@ export default {
   computed: {
     currentColorScheme: ({ appState }) => appState.systemColorScheme,
     preferredColorScheme: ({ appState }) => appState.preferredColorScheme,
-    CSSCustomProperties: ({ themeSettings, currentColorScheme }) => (
-      objectToCustomProperties(themeSettings.theme, currentColorScheme)
+    CSSCustomProperties: ({
+      currentColorScheme,
+      preferredColorScheme,
+      themeSettings,
+    }) => (
+      // If the user has selected "Auto", delegate to the system's current
+      // preference to determine if "Light" or "Dark" colors should be used.
+      // Otherwise, if "Light" or "Dark" has been explicitly chosen, that choice
+      // should be used directly.
+      objectToCustomProperties(themeSettings.theme, (preferredColorScheme === ColorScheme.auto.value
+        ? currentColorScheme
+        : preferredColorScheme
+      ))
     ),
     hasCustomHeader: () => !!window.customElements.get('custom-header'),
     hasCustomFooter: () => !!window.customElements.get('custom-footer'),
@@ -159,15 +170,15 @@ export default {
       AppStore.setSystemColorScheme(scheme.value);
     },
     attachStylesToRoot(CSSCustomProperties) {
-      const root = document.documentElement;
+      const root = document.body;
       Object.entries(CSSCustomProperties)
         .filter(([, value]) => Boolean(value))
         .forEach(([key, value]) => {
           root.style.setProperty(key, value);
         });
     },
     detachStylesFromRoot(CSSCustomProperties) {
-      const root = document.documentElement;
+      const root = document.body;
       Object.entries(CSSCustomProperties).forEach(([key]) => {
         root.style.removeProperty(key);
       });

diff --git a/src/components/Badge.vue b/src/components/Badge.vue
@@ -43,8 +43,6 @@ export default {
 <style lang="scss" scoped>
 @import 'docc-render/styles/_core.scss';
 
-$badge-border-radius: $border-radius - 1px !default;
-
 @mixin badge-variation($color) {
   --badge-color: var(--color-badge-#{$color});
   --badge-dark-color: var(--color-badge-dark-#{$color});
@@ -58,9 +56,10 @@ $badge-border-radius: $border-radius - 1px !default;
   padding: 2px 10px;
   white-space: nowrap;
   background: none;
-  border-radius: $badge-border-radius;
+  border-radius: var(--badge-border-radius, calc(#{$border-radius} - 1px));
+  border-style: var(--badge-border-style, solid);
+  border-width: var(--badge-border-width, 1px);
   margin-left: 10px;
-  border: 1px solid var(--badge-color);
   color: var(--badge-color);
 
   .theme-dark & {

diff --git a/src/components/ButtonLink.vue b/src/components/ButtonLink.vue
@@ -48,8 +48,11 @@ export default {
 @import "docc-render/styles/_core.scss";
 
 .button-cta {
-  border-radius: var(--style-button-borderRadius, $button-radius);
   background: var(--colors-button-light-background, var(--color-button-background));
+  border-color: var(--color-button-border, currentcolor);
+  border-radius: var(--button-border-radius, $button-radius);
+  border-style: var(--button-border-style, none);
+  border-width: var(--button-border-width, medium);
   color: var(--colors-button-text, var(--color-button-text));
   cursor: pointer;
   min-width: rem(30px);

diff --git a/src/components/ContentNode/Aside.vue b/src/components/ContentNode/Aside.vue
@@ -74,10 +74,14 @@ $aside-kinds: deprecated, experiment, important, note, tip, warning;
 // on the fact that a "doc-topic" class is applied to an ancestor element of
 // the aside in question
 .doc-topic aside {
-  border-radius: $border-radius;
+  border-radius: var(--aside-border-radius, $border-radius);
+  border-style: var(--aside-border-style, solid);
+  border-width: var(--aside-border-width,
+    $aside-width-border
+    $aside-width-border
+    $aside-width-border
+    $aside-width-left-border);
   padding: rem(16px);
-  border: $aside-width-border solid;
-  border-left-width: $aside-width-left-border;
 
   @each $kind in $aside-kinds {
     &.#{$kind} {

diff --git a/src/components/ContentNode/CodeListing.vue b/src/components/ContentNode/CodeListing.vue
@@ -186,7 +186,7 @@ code {
 .code-listing {
   flex-direction: column;
   min-height: 100%;
-  border-radius: $border-radius;
+  border-radius: var(--code-border-radius, $border-radius);
   overflow: auto;
 
   &.single-line {

diff --git a/src/components/DocumentationTopic/ContentNode.vue b/src/components/DocumentationTopic/ContentNode.vue
@@ -35,8 +35,8 @@ $docs-code-listing-border-width: 1px !default;
     background: var(--background, var(--color-code-background));
     color: var(--text, var(--color-code-plain));
     border-color: var(--colors-grid, var(--color-grid));
-    border-width: $docs-code-listing-border-width;
-    border-style: solid;
+    border-width: var(--code-border-width, $docs-code-listing-border-width);
+    border-style: var(--code-border-style, solid);
 
     & + *,
     * + & {

diff --git a/src/components/DocumentationTopic/DocumentationHero.vue b/src/components/DocumentationTopic/DocumentationHero.vue
@@ -73,7 +73,7 @@ export default {
     color: ({ type }) => HeroColorsMap[TopicTypeAliases[type] || type] || HeroColors.teal,
     styles: ({ color }) => ({
       // use the color or fallback to the gray secondary, if not defined.
-      '--accent-color': `var(--color-type-icon-${color}, var(--color-figure-gray-secondary))`,
+      '--accent-color': `var(--color-documentation-intro-accent, var(--color-type-icon-${color}, var(--color-figure-gray-secondary)))`,
     }),
     // This mapping is necessary to help create a consistent mapping for the
     // following kinds of things, which are represented as different strings
@@ -108,15 +108,15 @@ $doc-hero-icon-dimension: 250px;
 
 .documentation-hero {
   background: dark-color(fill);
-  color: dark-color(figure-gray);
+  color: var(--color-documentation-intro-figure, dark-color(figure-gray));
   overflow: hidden;
   text-align: left;
   position: relative;
 
   // gradient
   &:before {
     content: '';
-    background: $doc-hero-gradient-background;
+    background: var(--color-documentation-intro-fill, $doc-hero-gradient-background);
     position: absolute;
     width: 100%;
     left: 0;
@@ -153,7 +153,7 @@ $doc-hero-icon-dimension: 250px;
   }
 
   .background-icon {
-    color: $doc-hero-icon-color;
+    color: var(--color-documentation-intro-accent, $doc-hero-icon-color);
     display: block;
     width: $doc-hero-icon-dimension;
     height: auto;

diff --git a/src/components/DocumentationTopic/Title.vue b/src/components/DocumentationTopic/Title.vue
@@ -35,7 +35,7 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: dark-color(figure-gray-secondary);
+  color: var(--color-documentation-intro-eyebrow, dark-color(figure-gray-secondary));
   display: block;
   margin-bottom: rem(20px);
 
@@ -46,7 +46,7 @@ export default {
 
 .title {
   @include font-styles(headline-reduced);
-  color: dark-color(figure-gray);
+  color: var(--color-documentation-intro-title, dark-color(figure-gray));
   margin-bottom: rem(12px);
 
   .documentation-hero--disabled & {

diff --git a/src/components/Filter/FilterInput.vue b/src/components/Filter/FilterInput.vue
@@ -426,7 +426,7 @@ $input-height: rem(28px);
   // Remove Gray Highlight When Tapping Links in Mobile Safari =>
   // https://css-tricks.com/snippets/css/remove-gray-highlight-when-tapping-links-in-mobile-safari/
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  border-radius: $small-border-radius + 1;
+  border-radius: calc(#{$small-border-radius} + 1px);
   @include on-keyboard-focus() {
     outline: none;
   }
@@ -484,8 +484,8 @@ $input-height: rem(28px);
     /deep/ ul {
       padding: var(--input-vertical-padding) rem(9px);
       border: 1px solid transparent;
-      border-bottom-left-radius: $small-border-radius - 1;
-      border-bottom-right-radius: $small-border-radius - 1;
+      border-bottom-left-radius: calc(#{$small-border-radius} - 1px);
+      border-bottom-right-radius: calc(#{$small-border-radius} - 1px);
 
       @include on-keyboard-focus() {
         outline: none;

diff --git a/src/components/Icons/APIReferenceIcon.vue b/src/components/Icons/APIReferenceIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon viewBox="0 0 14 14" class="api-reference-icon">
+  <SVGIcon viewBox="0 0 14 14" class="api-reference-icon" themeId="api-reference">
     <title>API Reference</title>
     <path d="m1 1v12h12v-12zm11 11h-10v-10h10z"/>
     <path d="m3 4h8v1h-8zm0 2.5h8v1h-8zm0 2.5h8v1h-8z"/>

diff --git a/src/components/Icons/ArticleIcon.vue b/src/components/Icons/ArticleIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="article-icon"
     viewBox="0 0 14 14"
+    themeId="article"
   >
     <path d="M8.033 1l3.967 4.015v7.985h-10v-12zM7.615 2h-4.615v10h8v-6.574z"></path>
     <path d="M7 1h1v4h-1z"></path>

diff --git a/src/components/Icons/CheckCircleIcon.vue b/src/components/Icons/CheckCircleIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="check-circle-icon"
     viewBox="0 0 14 14"
+    themeId="check-circle"
   >
     <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>
     <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>

diff --git a/src/components/Icons/ChevronIcon.vue b/src/components/Icons/ChevronIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon class="chevron-icon" viewBox="0 0 14 14">
+  <SVGIcon class="chevron-icon" viewBox="0 0 14 14" themeId="chevron">
     <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>
   </SVGIcon>
 </template>

diff --git a/src/components/Icons/ChevronRoundedIcon.vue b/src/components/Icons/ChevronRoundedIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="chevron-rounded-icon"
     viewBox="0 0 14 25"
+    themeId="chevron-rounded"
   >
     <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" />
   </SVGIcon>

diff --git a/src/components/Icons/ClearRoundedIcon.vue b/src/components/Icons/ClearRoundedIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="clear-rounded-icon"
     viewBox="0 0 16 16"
+    themeId="clear-rounded"
   >
     <title>Clear</title>
     <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"/>

diff --git a/src/components/Icons/CloseIcon.vue b/src/components/Icons/CloseIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="close-icon"
     viewBox="0 0 14 14"
+    themeId="close"
   >
     <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"/>
   </SVGIcon>

diff --git a/src/components/Icons/CollectionIcon.vue b/src/components/Icons/CollectionIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon viewBox="0 0 14 14" class="collection-icon">
+  <SVGIcon viewBox="0 0 14 14" class="collection-icon" themeId="collection">
     <path d="m1 1v12h12v-12zm11 11h-10v-10h10z"/>
     <path d="m3 4h8v1h-8zm0 2.5h8v1h-8zm0 2.5h8v1h-8z"/>
     <path d="m3 4h8v1h-8z"/>

diff --git a/src/components/Icons/CurlyBracketsIcon.vue b/src/components/Icons/CurlyBracketsIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon viewBox="0 0 14 14" class="curly-brackets-icon">
+  <SVGIcon viewBox="0 0 14 14" class="curly-brackets-icon" themeId="curly-brackets">
     <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>
     <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>
   </SVGIcon>

diff --git a/src/components/Icons/DiagonalArrowIcon.vue b/src/components/Icons/DiagonalArrowIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon class="diagonal-arrow" viewBox="0 0 14 14">
+  <SVGIcon class="diagonal-arrow" viewBox="0 0 14 14" themeId="diagonal-arrow">
     <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>
   </SVGIcon>
 </template>

diff --git a/src/components/Icons/DocumentIcon.vue b/src/components/Icons/DocumentIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon class="document-icon" viewBox="0 0 14 14">
+  <SVGIcon class="document-icon" viewBox="0 0 14 14" themeId="document">
     <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"/>
   </SVGIcon>
 </template>

diff --git a/src/components/Icons/DownloadIcon.vue b/src/components/Icons/DownloadIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon class="download-icon" viewBox="0 0 14 14">
+  <SVGIcon class="download-icon" viewBox="0 0 14 14" themeId="download">
     <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>
     <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>
   </SVGIcon>

diff --git a/src/components/Icons/EllipsisIcon.vue b/src/components/Icons/EllipsisIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon class="ellipsis-icon" viewBox="0 0 14 14">
+  <SVGIcon class="ellipsis-icon" viewBox="0 0 14 14" themeId="ellipsis">
     <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"/>
   </SVGIcon>
 </template>

diff --git a/src/components/Icons/EndpointIcon.vue b/src/components/Icons/EndpointIcon.vue
@@ -9,7 +9,7 @@
 -->
 
 <template>
-  <SVGIcon viewBox="0 0 14 14">
+  <SVGIcon viewBox="0 0 14 14" themeId="endpoint">
     <title>Web Service Endpoint</title>
     <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>
     <path d="M11.969 8.737h1.093v5.263h-1.093v-5.263z"></path>

diff --git a/src/components/Icons/FilterIcon.vue b/src/components/Icons/FilterIcon.vue
@@ -15,6 +15,7 @@
     width="14"
     viewBox="0 0 14 14"
     fill="currentColor"
+    themeId="filter"
   >
     <path d="m2 6.5h10v1h-10z"/>
     <path d="m1 3h12v1h-12z"/>

diff --git a/src/components/Icons/ForumIcon.vue b/src/components/Icons/ForumIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="forum-icon"
     viewBox="0 0 14 14"
+    themeId="forum"
   >
     <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>
     <path d="M3 4h8.001v1h-8.001v-1z"></path>

diff --git a/src/components/Icons/GenericFileIcon.vue b/src/components/Icons/GenericFileIcon.vue
@@ -12,6 +12,7 @@
   <SVGIcon
     class="generic-file-icon"
     viewBox="0 0 14 14"
+    themeId="generic-file"
   >
     <path d="M8.033 1l3.967 4.015v7.985h-10v-12zM7.615 2h-4.615v10h8v-6.574z"></path>
     <path d="M7 1h1v4h-1z"></path>