Skip to content

Commit 6019569

Browse files
hqhhuanghqhhuang
authored
Allow light mode in Hero and color updates (#775) 120847903
* Update hero color
1 parent ded8820 commit 6019569

File tree

10 files changed

+76
-77
lines changed

10 files changed

+76
-77
lines changed

‎src/components/DocumentationTopic/DocumentationHero.vue

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2022-2023 Apple Inc. and the Swift project authors
4+
Copyright (c) 2022-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -12,7 +12,6 @@
1212
<div
1313
:class="['documentation-hero', {
1414
'documentation-hero--disabled': !enhanceBackground,
15-
'theme-dark': enhanceBackground,
1615
}]"
1716
:style="styles"
1817
>
@@ -116,21 +115,24 @@ export default {
116115
$doc-hero-gradient-background: var(
117116
--standard-accent-color,
118117
// then fallback to a theme-settings color
119-
var(--color-documentation-intro-fill, #{dark-color(fill-tertiary)})
118+
var(--color-documentation-intro-fill, var(--color-fill-tertiary))
120119
) !default;
121120
$doc-hero-overlay-background: transparent !default;
122-
$doc-hero-icon-opacity: 1 !default;
121+
$doc-hero-icon-opacity: 0.15 !default;
122+
$doc-hero-icon-dark-opacity: 0.15 !default;
123+
$doc-hero-text-color: var(--color-documentation-intro-figure, var(--color-figure-gray)) !default;
123124
$doc-hero-icon-color: var(
124125
--color-documentation-intro-accent,
125-
#{dark-color(fill-secondary)}
126+
var(--color-figure-gray-secondary)
126127
) !default;
128+
$doc-hero-icon-effect: normal !default;
129+
$doc-hero-icon-dark-effect: normal !default;
127130
$doc-hero-icon-spacing: 25px;
128131
$doc-hero-icon-vertical-spacing: 10px;
129132
$doc-hero-icon-dimension: 250px;
130133
131134
.documentation-hero {
132-
background: dark-color(fill);
133-
color: var(--color-documentation-intro-figure, dark-color(figure-gray));
135+
color: $doc-hero-text-color;
134136
overflow: hidden;
135137
text-align: left;
136138
position: relative;
@@ -143,22 +145,23 @@ $doc-hero-icon-dimension: 250px;
143145
background: $doc-hero-gradient-background;
144146
position: absolute;
145147
width: 100%;
146-
left: 0;
147-
top: -50%;
148-
height: 150%;
149-
right: 0;
148+
height: 100%;
150149
}
151150
152-
// black overlay
151+
// overlay
153152
&:after {
154153
background: $doc-hero-overlay-background;
155-
opacity: 0.7;
154+
opacity: 0.85;
156155
width: 100%;
157156
position: absolute;
158157
content: '';
159158
height: 100%;
160159
left: 0;
161160
top: 0;
161+
162+
@include prefers-dark {
163+
opacity: 0.55;
164+
}
162165
}
163166
164167
.icon {
@@ -182,6 +185,7 @@ $doc-hero-icon-dimension: 250px;
182185
width: $doc-hero-icon-dimension;
183186
height: auto;
184187
opacity: $doc-hero-icon-opacity;
188+
mix-blend-mode: $doc-hero-icon-effect;
185189
position: absolute;
186190
// center in icon box
187191
top: 50%;
@@ -193,6 +197,11 @@ $doc-hero-icon-dimension: 250px;
193197
width: 100%;
194198
height: 100%;
195199
}
200+
201+
@include prefers-dark {
202+
mix-blend-mode: $doc-hero-icon-dark-effect;
203+
opacity: $doc-hero-icon-dark-opacity;
204+
}
196205
}
197206
198207
&__content:not(.minimized-hero) {
@@ -239,7 +248,4 @@ $doc-hero-icon-dimension: 250px;
239248
padding-bottom: rem(65px);
240249
}
241250
242-
.theme-dark :deep(a:not(.button-cta)) {
243-
color: dark-color(figure-blue);
244-
}
245251
</style>

‎src/components/DocumentationTopic/Summary/Availability.vue

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
4+
Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -121,23 +121,23 @@ export default {
121121
padding-right: 5px;
122122
fill: var(--badge-color);
123123
124-
.theme-dark & {
125-
fill: var(--badge-color);
124+
@include prefers-dark {
125+
fill: var(--badge-dark-color);
126126
}
127127
}
128128
129129
.beta {
130130
color: var(--color-badge-beta);
131131
132-
.theme-dark & {
132+
@include prefers-dark {
133133
color: var(--color-badge-dark-beta);
134134
}
135135
}
136136
137137
.deprecated {
138138
color: var(--color-badge-deprecated);
139139
140-
.theme-dark & {
140+
@include prefers-dark {
141141
color: var(--color-badge-dark-deprecated);
142142
}
143143
}
@@ -157,10 +157,6 @@ export default {
157157
@include prefers-dark {
158158
background-image: $modified-dark-svg;
159159
}
160-
161-
.theme-dark & {
162-
background-image: $modified-dark-svg;
163-
}
164160
}
165161
166162
&-added {
@@ -172,10 +168,6 @@ export default {
172168
@include prefers-dark {
173169
background-image: $added-dark-svg;
174170
}
175-
176-
.theme-dark & {
177-
background-image: $added-dark-svg;
178-
}
179171
}
180172
}
181173
@@ -188,10 +180,6 @@ export default {
188180
@include prefers-dark {
189181
background-image: $deprecated-dark-svg;
190182
}
191-
192-
.theme-dark & {
193-
background-image: $deprecated-dark-svg;
194-
}
195183
}
196184
}
197185

‎src/components/DocumentationTopic/Summary/LanguageSwitcher.vue

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2021-2023 Apple Inc. and the Swift project authors
4+
Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -135,20 +135,11 @@ export default {
135135
.language-option {
136136
&.swift {
137137
padding-right: 10px;
138-
border-right: 1px solid var(--color-fill-gray-tertiary);
138+
border-right: 1px solid var(--colors-secondary-label, var(--color-secondary-label));
139139
}
140140
141141
&.objc {
142142
padding-left: 10px;
143143
}
144-
145-
&.router-link-exact-active,
146-
&.active {
147-
color: dark-color(figure-gray-secondary);
148-
149-
.documentation-hero--disabled & {
150-
color: var(--colors-secondary-label, var(--color-secondary-label));
151-
}
152-
}
153144
}
154145
</style>

‎src/components/DocumentationTopic/Summary/LanguageSwitcherLink.vue

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,13 @@ export default {
2121
},
2222
};
2323
</script>
24+
25+
<style scoped lang="scss">
26+
@import 'docc-render/styles/_core.scss';
27+
28+
a {
29+
@include underline-text;
30+
color: inherit;
31+
font-weight: $font-weight-semibold;
32+
}
33+
</style>

‎src/components/DocumentationTopic/Summary/Title.vue

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
4+
Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -20,13 +20,9 @@ export default { name: 'Title' };
2020
@import 'docc-render/styles/_core.scss';
2121
2222
.title {
23-
color: dark-color(figure-gray);
23+
color: var(--colors-text, var(--color-text));
2424
font-size: rem(14px);
2525
margin-right: 0.5rem;
2626
text-rendering: optimizeLegibility;
27-
28-
.documentation-hero--disabled & {
29-
color: var(--colors-text, var(--color-text));
30-
}
3127
}
3228
</style>

‎src/components/DocumentationTopic/Title.vue

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
4+
Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -35,23 +35,17 @@ export default {
3535
3636
.eyebrow {
3737
@include font-styles(eyebrow-reduced);
38-
color: var(--color-documentation-intro-eyebrow, dark-color(figure-gray-secondary));
38+
color: var(--color-documentation-intro-eyebrow,
39+
var(--colors-secondary-label, var(--color-secondary-label)));
3940
display: block;
4041
margin-bottom: rem(20px);
41-
42-
.documentation-hero--disabled & {
43-
color: var(--colors-secondary-label, var(--color-secondary-label));
44-
}
4542
}
4643
4744
.title {
4845
@include font-styles(headline-reduced);
49-
color: var(--color-documentation-intro-title, dark-color(figure-gray));
46+
color: var(--color-documentation-intro-title,
47+
var(--colors-header-text, var(--color-header-text)));
5048
margin-bottom: rem(12px);
51-
52-
.documentation-hero--disabled & {
53-
color: var(--colors-header-text, var(--color-header-text));
54-
}
5549
}
5650
5751
small {
@@ -65,15 +59,15 @@ small {
6559
&.Beta {
6660
color: var(--color-badge-beta);
6761
68-
.theme-dark & {
62+
@include prefers-dark {
6963
color: var(--color-badge-dark-beta);
7064
}
7165
}
7266
7367
&.Deprecated {
7468
color: var(--color-badge-deprecated);
7569
76-
.theme-dark & {
70+
@include prefers-dark {
7771
color: var(--color-badge-dark-deprecated);
7872
}
7973
}

‎src/components/SVGIcon.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!--
22
This source file is part of the Swift.org open source project
33
4-
Copyright (c) 2021 Apple Inc. and the Swift project authors
4+
Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
Licensed under Apache License v2.0 with Runtime Library Exception
66
77
See https://swift.org/LICENSE.txt for license information
@@ -56,6 +56,10 @@ export default {
5656
fill: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
5757
}
5858
59+
@include prefers-dark {
60+
fill: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
61+
}
62+
5963
// sets an icon as "inline", adding some common styles, like color and alignments.
6064
&.icon-inline {
6165
display: inline-block;
@@ -74,5 +78,9 @@ export default {
7478
.theme-dark & {
7579
stroke: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
7680
}
81+
82+
@include prefers-dark {
83+
stroke: var(--colors-svg-icon-fill-dark, var(--color-svg-icon));
84+
}
7785
}
7886
</style>

‎src/styles/core/colors/_dark.scss

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* This source file is part of the Swift.org open source project
33
*
4-
* Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
4+
* Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
* Licensed under Apache License v2.0 with Runtime Library Exception
66
*
77
* See https://swift.org/LICENSE.txt for license information
@@ -89,4 +89,12 @@
8989

9090
--color-card-shadow: #{change-color(light-color(fill), $alpha: 0.04)};
9191
--color-link-block-card-border: #{change-color(light-color(fill), $alpha: 0.25)};
92+
93+
--color-standard-red: #8B0000;
94+
--color-standard-orange: #8B4000;
95+
--color-standard-yellow: #8F7200;
96+
--color-standard-blue: #002D75;
97+
--color-standard-green: #023B2D;
98+
--color-standard-purple: #512B55;
99+
--color-standard-gray: #{dark-color(fill-tertiary)};
92100
}

‎src/styles/core/colors/_light.scss

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/**
22
* This source file is part of the Swift.org open source project
33
*
4-
* Copyright (c) 2021-2022 Apple Inc. and the Swift project authors
4+
* Copyright (c) 2021-2024 Apple Inc. and the Swift project authors
55
* Licensed under Apache License v2.0 with Runtime Library Exception
66
*
77
* See https://swift.org/LICENSE.txt for license information
@@ -53,7 +53,7 @@
5353
--color-aside-warning: var(--color-figure-gray);
5454
--color-aside-warning-background: var(--color-fill-red-secondary);
5555
--color-aside-warning-border: var(--color-figure-red);
56-
--color-badge-default: var(--color-figure-light-gray);
56+
--color-badge-default: var(--color-figure-gray);
5757
--color-badge-beta: var(--color-figure-gray-tertiary);
5858
--color-badge-deprecated: var(--color-figure-orange);
5959
--color-badge-dark-default: #{dark-color(figure-gray)};
@@ -199,11 +199,11 @@
199199
--color-card-shadow: #{change-color(dark-color(fill), $alpha: 0.04)};
200200
--color-link-block-card-border: #{change-color(dark-color(fill), $alpha: 0.04)};
201201

202-
--color-standard-red: #8B0000;
203-
--color-standard-orange: #8B4000;
204-
--color-standard-yellow: #8F7200;
205-
--color-standard-blue: #002D75;
206-
--color-standard-green: #023B2D;
207-
--color-standard-purple: #512B55;
208-
--color-standard-gray: #{dark-color(fill-tertiary)};
202+
--color-standard-red: #FFC2C2;
203+
--color-standard-orange: #FFCC99;
204+
--color-standard-yellow: #FFE0A3;
205+
--color-standard-blue: #99CCFF;
206+
--color-standard-green: #99CCCC;
207+
--color-standard-purple: #CCCCFF;
208+
--color-standard-gray: #{light-color(fill-tertiary)};
209209
}

0 commit comments

Comments
 (0)