Allow light mode in Hero and color updates

src/components/DocumentationTopic/DocumentationHero.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -12,7 +12,6 @@
   <div
     :class="['documentation-hero', {
       'documentation-hero--disabled': !enhanceBackground,
-      'theme-dark': enhanceBackground,
     }]"
     :style="styles"
   >
@@ -116,21 +115,24 @@ export default {
 $doc-hero-gradient-background: var(
     --standard-accent-color,
     // then fallback to a theme-settings color
-    var(--color-documentation-intro-fill, #{dark-color(fill-tertiary)})
+    var(--color-documentation-intro-fill, var(--color-fill-tertiary))
 ) !default;
 $doc-hero-overlay-background: transparent !default;
-$doc-hero-icon-opacity: 1 !default;
+$doc-hero-icon-opacity: 0.15 !default;
+$doc-hero-icon-dark-opacity: 0.15 !default;
+$doc-hero-text-color: var(--color-documentation-intro-figure, var(--color-figure-gray)) !default;
 $doc-hero-icon-color: var(
     --color-documentation-intro-accent,
-    #{dark-color(fill-secondary)}
+    var(--color-figure-gray-secondary)
 ) !default;
+$doc-hero-icon-effect: normal !default;
+$doc-hero-icon-dark-effect: normal !default;
 $doc-hero-icon-spacing: 25px;
 $doc-hero-icon-vertical-spacing: 10px;
 $doc-hero-icon-dimension: 250px;
 
 .documentation-hero {
-  background: dark-color(fill);
-  color: var(--color-documentation-intro-figure, dark-color(figure-gray));
+  color: $doc-hero-text-color;
   overflow: hidden;
   text-align: left;
   position: relative;
@@ -143,22 +145,23 @@ $doc-hero-icon-dimension: 250px;
     background: $doc-hero-gradient-background;
     position: absolute;
     width: 100%;
-    left: 0;
-    top: -50%;
-    height: 150%;
-    right: 0;
+    height: 100%;
   }
 
-  // black overlay
+  // overlay
   &:after {
     background: $doc-hero-overlay-background;
-    opacity: 0.7;
+    opacity: 0.85;
     width: 100%;
     position: absolute;
     content: '';
     height: 100%;
     left: 0;
     top: 0;
+
+    @include prefers-dark {
+      opacity: 0.55;
+    }
   }
 
   .icon {
@@ -182,6 +185,7 @@ $doc-hero-icon-dimension: 250px;
     width: $doc-hero-icon-dimension;
     height: auto;
     opacity: $doc-hero-icon-opacity;
+    mix-blend-mode: $doc-hero-icon-effect;
     position: absolute;
     // center in icon box
     top: 50%;
@@ -193,6 +197,11 @@ $doc-hero-icon-dimension: 250px;
       width: 100%;
       height: 100%;
     }
+
+    @include prefers-dark {
+      mix-blend-mode: $doc-hero-icon-dark-effect;
+      opacity: $doc-hero-icon-dark-opacity;
+    }
   }
 
   &__content:not(.minimized-hero) {
@@ -239,7 +248,4 @@ $doc-hero-icon-dimension: 250px;
   padding-bottom: rem(65px);
 }
 
-.theme-dark :deep(a:not(.button-cta)) {
-  color: dark-color(figure-blue);
-}
 </style>

src/components/DocumentationTopic/Summary/Availability.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -121,23 +121,23 @@ export default {
   padding-right: 5px;
   fill: var(--badge-color);
 
-  .theme-dark & {
-    fill: var(--badge-color);
+  @include prefers-dark {
+    fill: var(--badge-dark-color);
   }
 }
 
 .beta {
   color: var(--color-badge-beta);
 
-  .theme-dark & {
+  @include prefers-dark {
     color: var(--color-badge-dark-beta);
   }
 }
 
 .deprecated {
   color: var(--color-badge-deprecated);
 
-  .theme-dark & {
+  @include prefers-dark {
     color: var(--color-badge-dark-deprecated);
   }
 }
@@ -157,10 +157,6 @@ export default {
     @include prefers-dark {
       background-image: $modified-dark-svg;
     }
-
-    .theme-dark & {
-      background-image: $modified-dark-svg;
-    }
   }
 
   &-added {
@@ -172,10 +168,6 @@ export default {
       @include prefers-dark {
         background-image: $added-dark-svg;
       }
-
-      .theme-dark & {
-        background-image: $added-dark-svg;
-      }
     }
   }
 
@@ -188,10 +180,6 @@ export default {
       @include prefers-dark {
         background-image: $deprecated-dark-svg;
       }
-
-      .theme-dark & {
-        background-image: $deprecated-dark-svg;
-      }
     }
   }
 

src/components/DocumentationTopic/Summary/LanguageSwitcher.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -135,20 +135,11 @@ export default {
 .language-option {
   &.swift {
     padding-right: 10px;
-    border-right: 1px solid var(--color-fill-gray-tertiary);
+    border-right: 1px solid var(--colors-secondary-label, var(--color-secondary-label));
   }
 
   &.objc {
     padding-left: 10px;
   }
-
-  &.router-link-exact-active,
-  &.active {
-    color: dark-color(figure-gray-secondary);
-
-    .documentation-hero--disabled & {
-      color: var(--colors-secondary-label, var(--color-secondary-label));
-    }
-  }
 }
 </style>

src/components/DocumentationTopic/Summary/LanguageSwitcherLink.vue

@@ -21,3 +21,13 @@ export default {
   },
 };
 </script>
+
+<style scoped lang="scss">
+@import 'docc-render/styles/_core.scss';
+
+  a {
+    @include underline-text;
+    color: inherit;
+    font-weight: $font-weight-semibold;
+  }
+</style>

src/components/DocumentationTopic/Summary/Title.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -20,13 +20,9 @@ export default { name: 'Title' };
 @import 'docc-render/styles/_core.scss';
 
 .title {
-  color: dark-color(figure-gray);
+  color: var(--colors-text, var(--color-text));
   font-size: rem(14px);
   margin-right: 0.5rem;
   text-rendering: optimizeLegibility;
-
-  .documentation-hero--disabled & {
-    color: var(--colors-text, var(--color-text));
-  }
 }
 </style>

src/components/DocumentationTopic/Title.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -35,23 +35,17 @@ export default {
 
 .eyebrow {
   @include font-styles(eyebrow-reduced);
-  color: var(--color-documentation-intro-eyebrow, dark-color(figure-gray-secondary));
+  color: var(--color-documentation-intro-eyebrow,
+    var(--colors-secondary-label, var(--color-secondary-label)));
   display: block;
   margin-bottom: rem(20px);
-
-  .documentation-hero--disabled & {
-    color: var(--colors-secondary-label, var(--color-secondary-label));
-  }
 }
 
 .title {
   @include font-styles(headline-reduced);
-  color: var(--color-documentation-intro-title, dark-color(figure-gray));
+  color: var(--color-documentation-intro-title,
+    var(--colors-header-text, var(--color-header-text)));
   margin-bottom: rem(12px);
-
-  .documentation-hero--disabled & {
-    color: var(--colors-header-text, var(--color-header-text));
-  }
 }
 
 small {
@@ -65,15 +59,15 @@ small {
   &.Beta {
     color: var(--color-badge-beta);
 
-    .theme-dark & {
+    @include prefers-dark {
       color: var(--color-badge-dark-beta);
     }
   }
 
   &.Deprecated {
     color: var(--color-badge-deprecated);
 
-    .theme-dark & {
+    @include prefers-dark {
       color: var(--color-badge-dark-deprecated);
     }
   }

src/components/SVGIcon.vue

@@ -1,7 +1,7 @@
 <!--
   This source file is part of the Swift.org open source project
 
-  Copyright (c) 2021 Apple Inc. and the Swift project authors
+  Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
   Licensed under Apache License v2.0 with Runtime Library Exception
 
   See https://swift.org/LICENSE.txt for license information
@@ -56,6 +56,10 @@ export default {
     fill: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
   }
 
+  @include prefers-dark {
+    fill: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
+  }
+
   // sets an icon as "inline", adding some common styles, like color and alignments.
   &.icon-inline {
     display: inline-block;
@@ -74,5 +78,9 @@ export default {
   .theme-dark & {
     stroke: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
   }
+
+  @include prefers-dark {
+    stroke: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
+  }
 }
 </style>

src/styles/core/colors/_dark.scss

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -89,4 +89,12 @@
 
   --color-card-shadow: #{change-color(light-color(fill), $alpha: 0.04)};
   --color-link-block-card-border: #{change-color(light-color(fill), $alpha: 0.25)};
+
+  --color-standard-red: #8B0000;
+  --color-standard-orange: #8B4000;
+  --color-standard-yellow: #8F7200;
+  --color-standard-blue: #002D75;
+  --color-standard-green: #023B2D;
+  --color-standard-purple: #512B55;
+  --color-standard-gray: #{dark-color(fill-tertiary)};
 }

src/styles/core/colors/_light.scss

@@ -1,7 +1,7 @@
 /**
  * This source file is part of the Swift.org open source project
  *
- * Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
+ * Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
  * Licensed under Apache License v2.0 with Runtime Library Exception
  *
  * See https://swift.org/LICENSE.txt for license information
@@ -53,7 +53,7 @@
   --color-aside-warning: var(--color-figure-gray);
   --color-aside-warning-background: var(--color-fill-red-secondary);
   --color-aside-warning-border: var(--color-figure-red);
-  --color-badge-default: var(--color-figure-light-gray);
+  --color-badge-default: var(--color-figure-gray);
   --color-badge-beta: var(--color-figure-gray-tertiary);
   --color-badge-deprecated: var(--color-figure-orange);
   --color-badge-dark-default: #{dark-color(figure-gray)};
@@ -199,11 +199,11 @@
   --color-card-shadow: #{change-color(dark-color(fill), $alpha: 0.04)};
   --color-link-block-card-border: #{change-color(dark-color(fill), $alpha: 0.04)};
 
-  --color-standard-red: #8B0000;
-  --color-standard-orange: #8B4000;
-  --color-standard-yellow: #8F7200;
-  --color-standard-blue: #002D75;
-  --color-standard-green: #023B2D;
-  --color-standard-purple: #512B55;
-  --color-standard-gray: #{dark-color(fill-tertiary)};
+  --color-standard-red: #FFC2C2;
+  --color-standard-orange: #FFCC99;
+  --color-standard-yellow: #FFE0A3;
+  --color-standard-blue: #99CCFF;
+  --color-standard-green: #99CCCC;
+  --color-standard-purple: #CCCCFF;
+  --color-standard-gray: #{light-color(fill-tertiary)};
 }