Skip to content

Commit 8050437

Browse files
philwarehamphilwareham
committed
More Dark Mode work
1 parent 7c3c686 commit 8050437

File tree

7 files changed

+165
-6
lines changed

7 files changed

+165
-6
lines changed

‎src/assets/sass/designpatterns.scss‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,13 @@ body {
1818
color: $color-text;
1919
}
2020

21+
@include dark-mode {
22+
body {
23+
background-color: $dark-color-background;
24+
color: $dark-color-text;
25+
}
26+
}
27+
2128
main {
2229
padding: 0 5% 1em;
2330

@@ -38,6 +45,12 @@ main {
3845
color: $color-text;
3946
}
4047

48+
@include dark-mode {
49+
.information code {
50+
color: $dark-color-text;
51+
}
52+
}
53+
4154

4255
/* Colour palette.
4356
========================================================================== */
@@ -53,8 +66,11 @@ $colors: (
5366
"text-footnote": $color-text-footnote,
5467
"gradient-from": $color-gradient-from,
5568
"gradient-to": $color-gradient-to,
69+
"border-extra-dark": $color-border-extra-dark,
70+
"border-dark": $color-border-dark,
5671
"border": $color-border,
5772
"border-light": $color-border-light,
73+
"border-extra-light": $color-border-extra-light,
5874
"link": $color-link,
5975
"link-hover": $color-link-hover,
6076
"link-focus": $color-link-focus,
@@ -75,6 +91,36 @@ $colors: (
7591
"info-background": $color-info-background
7692
);
7793

94+
$dark-colors: (
95+
"text": $dark-color-text,
96+
"text-footnote": $dark-color-text-footnote,
97+
"gradient-from": $dark-color-gradient-from,
98+
"gradient-to": $dark-color-gradient-to,
99+
"border-extra-dark": $dark-color-border-extra-dark,
100+
"border-dark": $dark-color-border-dark,
101+
"border": $dark-color-border,
102+
"border-light": $dark-color-border-light,
103+
"border-extra-light": $dark-color-border-extra-light,
104+
"link": $dark-color-link,
105+
"link-hover": $dark-color-link-hover,
106+
"link-focus": $dark-color-link-focus,
107+
"link-selecting": $dark-color-selecting,
108+
"link-selected": $dark-color-selected,
109+
"background": $dark-color-background,
110+
"background-box": $dark-color-background-box,
111+
"highlight": $dark-color-highlight,
112+
"strong-highlight-box": $dark-color-strong-highlight-box,
113+
"highlight-box": $dark-color-highlight-box,
114+
"success-text": $dark-color-success-text,
115+
"success-background": $dark-color-success-background,
116+
"warning-text": $dark-color-warning-text,
117+
"warning-background": $dark-color-warning-background,
118+
"error-text": $dark-color-error-text,
119+
"error-background": $dark-color-error-background,
120+
"info-text": $dark-color-info-text,
121+
"info-background": $dark-color-info-background
122+
);
123+
78124
.design-patterns--color {
79125
display: block;
80126
position: relative;
@@ -92,6 +138,16 @@ $colors: (
92138
}
93139
}
94140

141+
@include dark-mode {
142+
.design-patterns--color {
143+
border-color: $dark-color-border;
144+
145+
&::after {
146+
background-color: rgba(0, 0, 0, 0.66);
147+
}
148+
}
149+
}
150+
95151
@each $name, $color in $colors {
96152
.design-patterns--color-#{$name} {
97153
background: $color;
@@ -102,6 +158,18 @@ $colors: (
102158
}
103159
}
104160

161+
@include dark-mode {
162+
@each $name, $color in $dark-colors {
163+
.design-patterns--color-#{$name} {
164+
background: $color;
165+
166+
&::after {
167+
content: "#{$color}";
168+
}
169+
}
170+
}
171+
}
172+
105173

106174
/* Layout grid examples.
107175
========================================================================== */
@@ -219,3 +287,10 @@ $colors: (
219287
margin: 0 auto;
220288
}
221289
}
290+
291+
@media (prefers-color-scheme: dark) and (min-width: $breakpoint-3) {
292+
.docs-menu {
293+
border-right-color: $dark-color-border-extra-dark;
294+
background-color: $dark-color-background-box;
295+
}
296+
}

‎src/assets/sass/modules/_layout.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -575,6 +575,12 @@ main .layout-4col-3span {
575575
border-top: 1px dashed $color-border;
576576
}
577577

578+
@include dark-mode {
579+
.footnotes {
580+
border-top-color: $dark-color-border;
581+
}
582+
}
583+
578584
/**
579585
* Documentation site issue report statement.
580586
*/

‎src/assets/sass/modules/_lists.scss‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,20 @@ li {
2222
}
2323
}
2424

25+
/**
26+
* CSS Lists and Counters Module Level 3 list marker styling.
27+
*/
28+
29+
li::marker {
30+
color: $color-text-form;
31+
}
32+
33+
@include dark-mode {
34+
li::marker {
35+
color: $dark-color-text-heading;
36+
}
37+
}
38+
2539
/**
2640
* Style for definition lists.
2741
*/
@@ -31,6 +45,12 @@ dl {
3145
border-bottom: 1px solid $color-border-light;
3246
}
3347

48+
@include dark-mode {
49+
dl {
50+
border-bottom-color: $dark-color-border-light;
51+
}
52+
}
53+
3454
dt {
3555
margin-top: 1em;
3656
margin-bottom: 1em;
@@ -44,6 +64,17 @@ dt {
4464
}
4565
}
4666

67+
@include dark-mode {
68+
dt {
69+
border-top-color: $dark-color-border-light;
70+
71+
code {
72+
border-color: $dark-color-info-border;
73+
background-color: $dark-color-info-background;
74+
}
75+
}
76+
}
77+
4778
dd {
4879
margin: 0 0 0 1.75em;
4980
}

‎src/assets/sass/modules/_responsive.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -185,7 +185,7 @@
185185
}
186186

187187
img {
188-
box-shadow: 0 0.33em 0.8em rgba(51, 51, 51, 0.4);
188+
box-shadow: 0 0.33em 0.8em rgba(0, 0, 0, 0.33);
189189
}
190190
}
191191

‎src/assets/sass/modules/_tables.scss‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,13 @@ td {
4949
vertical-align: top;
5050
}
5151

52+
@include dark-mode {
53+
th,
54+
td {
55+
border-color: $dark-color-border-light;
56+
}
57+
}
58+
5259
/**
5360
* Emphasize table header.
5461
*/
@@ -64,6 +71,24 @@ thead {
6471
}
6572
}
6673

74+
@include dark-mode {
75+
thead {
76+
tr {
77+
background-color: $dark-color-gradient-from;
78+
}
79+
80+
th,
81+
td {
82+
border-color: $dark-color-border;
83+
}
84+
85+
th,
86+
td {
87+
color: $dark-color-text-heading;
88+
}
89+
}
90+
}
91+
6792
/**
6893
* 'Zebra striping' of `tbody` rows.
6994
*/
@@ -84,6 +109,20 @@ tbody {
84109
}
85110
}
86111

112+
@include dark-mode {
113+
tbody {
114+
tr {
115+
&:nth-child(even) {
116+
background-color: $dark-color-background-box;
117+
}
118+
119+
&.selected {
120+
background-color: $dark-color-selected;
121+
}
122+
}
123+
}
124+
}
125+
87126
/**
88127
* Adjust padding of table footer due to smaller font size.
89128
*/

‎src/assets/sass/setup/_colours.scss‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,6 @@ $color-gradient-from: #eeeeee !default;
5252
$color-gradient-to: darken($color-gradient-from, 6.5%) !default;
5353

5454
$dark-color-background: #373e45 !default;
55-
$dark-color-background-zebra: #f0f0f0 !default; // TODO
5655
$dark-color-background-box: shade($dark-color-background, 14%) !default;
5756
$dark-color-background-form: shade($dark-color-background, 28%) !default;
5857
$dark-color-background-form-disabled: shade($dark-color-background, 28%) !default;

‎src/docs/design-patterns.html‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@
66
<title>Website design patterns / Textpattern CMS</title>
77

88
<!-- CSS -->
9-
<link rel="stylesheet" href="https://textpattern.com/assets/css/style.@@timestamp.css">
9+
<link rel="stylesheet" href="assets/css/style.css">
1010
<!-- JUST FOR DESIGN PATTERNS DOC - NOT IN ACTUAL SITE -->
11-
<link rel="stylesheet" href="https://textpattern.com/assets/css/designpatterns.@@timestamp.css">
11+
<link rel="stylesheet" href="assets/css/designpatterns.css">
1212

1313
<meta name="robots" content="index, follow">
1414
<meta name="description" content="Examples of various inline and block elements that should be considered and styled within the website.">
@@ -33,7 +33,7 @@
3333
<body itemscope itemtype="https://schema.org/WebPage">
3434

3535
<!-- JUST FOR DESIGN PATTERNS DOC - NOT IN ACTUAL SITE -->
36-
<a class="github-corner" href="https://github.com/textpattern/textpattern-com-website" title="View project on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#333333; color:#fff; position: fixed; z-index: 999; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
36+
<a class="github-corner" href="https://github.com/textpattern/textpattern-com-website" title="View project on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#000; color:#fff; position: fixed; z-index: 999; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
3737
<style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>
3838

3939
<meta itemprop="accessibilityControl" content="fullKeyboardControl">
@@ -94,12 +94,21 @@ <h3>Neutral</h3>
9494
<p><code>gradient-to</code></p>
9595
<div class="design-patterns--color design-patterns--color-gradient-to"></div>
9696

97+
<p><code>border-extra-light</code></p>
98+
<div class="design-patterns--color design-patterns--color-border-extra-light"></div>
99+
97100
<p><code>border-light</code></p>
98101
<div class="design-patterns--color design-patterns--color-border-light"></div>
99102

100103
<p><code>border</code></p>
101104
<div class="design-patterns--color design-patterns--color-border"></div>
102105

106+
<p><code>border-dark</code></p>
107+
<div class="design-patterns--color design-patterns--color-border-dark"></div>
108+
109+
<p><code>border-extra-dark</code></p>
110+
<div class="design-patterns--color design-patterns--color-border-extra-dark"></div>
111+
103112
<p><code>text-footnote</code></p>
104113
<div class="design-patterns--color design-patterns--color-text-footnote"></div>
105114

@@ -1033,7 +1042,7 @@ <h3>Inputs</h3>
10331042
<input id="tel" name="tel" type="tel">
10341043
</p>
10351044
<p class="layout-3col">
1036-
<label for="text">Text <abbr class="required" title="Required">*</abbr></label><br>
1045+
<label for="text">Text <abbr class="required" title="Required" aria-label="Required">●</abbr></label><br>
10371046
<input id="text" name="text" type="text">
10381047
</p>
10391048
<p class="layout-3col">

0 commit comments

Comments
 (0)