Skip to content

Commit 5ef3c1c

Browse files
philwarehamphilwareham
committed
Bits that are handy for docs and stuff
1 parent 7e9c3d7 commit 5ef3c1c

File tree

10 files changed

+51
-25
lines changed

10 files changed

+51
-25
lines changed

‎src/assets/sass/designpatterns.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ main {
6161

6262
$colors: (
6363
"text": $color-text,
64-
"text-footnote": $color-text-footnote,
64+
"text-visual-de-emphasis": $color-text-visual-de-emphasis,
6565
"gradient-from": $color-gradient-from,
6666
"gradient-to": $color-gradient-to,
6767
"border-extra-dark": $color-border-extra-dark,
@@ -91,7 +91,7 @@ $colors: (
9191

9292
$dark-colors: (
9393
"text": $dark-color-text,
94-
"text-footnote": $dark-color-text-footnote,
94+
"text-visual-de-emphasis": $dark-color-text-visual-de-emphasis,
9595
"gradient-from": $dark-color-gradient-from,
9696
"gradient-to": $dark-color-gradient-to,
9797
"border-extra-dark": $dark-color-border-extra-dark,

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
//@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
121121
// .article-body p:first-child::first-letter {
122122
// margin-right: 0.375em;
123-
// color: $color-text-footnote;
123+
// color: $color-text-visual-de-emphasis;
124124
// font-family: $font-serif;
125125
// -webkit-initial-letter: 3 2;
126126
// initial-letter: 3 2;

‎src/assets/sass/modules/_code-highlighting.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -174,10 +174,10 @@ pre.line-numbers > code {
174174
}
175175

176176
.line-numbers .line-numbers-rows {
177-
border-right-color: $dark-color-text-footnote;
177+
border-right-color: $dark-color-text-visual-de-emphasis;
178178
}
179179

180180
.line-numbers-rows > span::before {
181-
color: $dark-color-text-footnote;
181+
color: $dark-color-text-visual-de-emphasis;
182182
}
183183
}

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -222,7 +222,7 @@ textarea {
222222
[type="checkbox"] {
223223
&:checked {
224224
border: 0;
225-
background: $color-text-footnote url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");
225+
background: $color-text-visual-de-emphasis url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E");
226226

227227
&:hover,
228228
&:active {
@@ -235,7 +235,7 @@ textarea {
235235
}
236236

237237
&[disabled]:checked {
238-
background: $color-text-footnote url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E") !important;
238+
background: $color-text-visual-de-emphasis url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M13 2.5l-7 7-2-2-2 2 4 4L15 4.5z'/%3E%3C/svg%3E") !important;
239239
}
240240
}
241241

@@ -264,7 +264,7 @@ textarea {
264264
border-radius: 100%;
265265

266266
&:checked {
267-
border: 5px solid $color-text-footnote;
267+
border: 5px solid $color-text-visual-de-emphasis;
268268

269269
&:hover,
270270
&:active {

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,19 +126,19 @@
126126
//.ui-icon-transferthick-e-w { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M0 11l5 5v-3h4V9H5V6zM16 5l-5-5v3H7v4h4v3z'/%3E%3C/svg%3E"); }
127127

128128
.ui-icon-folder-collapsed,
129-
.list--tree .directory::before {
129+
.list--files .directory::before {
130130
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M14 2h-1V1h-3L9 2H1v12h13V2zM2 3h11v10H2V3z'/%3E%3Cpath d='M2 4h11v1H2z'/%3E%3C/g%3E%3C/svg%3E");
131131
}
132132

133133
.ui-icon-folder-open,
134-
.list--tree .directory--open::before {
134+
.list--files .directory--open::before {
135135
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M13 5V2h-1V1H9L8 2H0v12h13.5L16 5h-3zM1 3h11v2H3l-2 7V3zm11.5 10H2l2-7h10.5l-2 7z'/%3E%3C/svg%3E");
136136
}
137137

138138
//.ui-icon-document { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M13 4v11H3V1h7l3 3zm-3-2H4v12h8V4l-2-2z'/%3E%3Cpath d='M10 4V2H9v3h3V4zM5 12h6v1H5zM5 10h6v1H5zM5 8h6v1H5zM5 6h6v1H5z'/%3E%3C/g%3E%3C/svg%3E"); }
139139

140140
.ui-icon-document-b,
141-
.list--tree .document::before {
141+
.list--files .document::before {
142142
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='m10 15h-7v-14h10v11zm2-3v-10h-8v12h6z'/%3E%3Cpath d='m10 12v2h-1v-3h3v1z'/%3E%3C/g%3E%3C/svg%3E");
143143
}
144144

@@ -187,7 +187,7 @@
187187
//.ui-icon-contact { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23333' d='M9 12v-.399A3.114 3.114 0 0 1 7.5 12C5.566 12 4 10.209 4 8s1.566-4 3.5-4c.539 0 1.044.15 1.5.399V4h2v7h2.177A5.933 5.933 0 0 0 14 8a6 6 0 1 0-6 6 5.961 5.961 0 0 0 3-.81v1.127A6.962 6.962 0 0 1 8 15a7 7 0 1 1 7-7 6.965 6.965 0 0 1-1.26 4H9zm0-5.723A1.987 1.987 0 0 0 8 6a2 2 0 0 0 0 4c.366 0 .705-.106 1-.277V6.277z'/%3E%3C/svg%3E"); }
188188

189189
.ui-icon-image,
190-
.list--tree .image::before {
190+
.list--files .image::before {
191191
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='%23333'%3E%3Cpath d='M0 14V2h16v12H0zM15 3H1v10h14V3z'/%3E%3Cpath d='M2 12l3-3 1 1 4-4 4 4v2z'/%3E%3Ccircle cx='4' cy='6' r='2'/%3E%3C/g%3E%3C/svg%3E");
192192
}
193193

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -136,13 +136,13 @@ dd {
136136
* <ol class="list--tree">
137137
*/
138138

139-
.list--tree,
140-
.list--tree ol,
141-
.list--tree ul {
139+
.list--files,
140+
.list--files ol,
141+
.list--files ul {
142142
list-style: none;
143143
}
144144

145-
.list--tree {
145+
.list--files {
146146
font-family: $font-code;
147147
font-size: $code-font-size;
148148
line-height: $line-height-mobile;
@@ -184,7 +184,7 @@ dd {
184184

185185
// Icons - also see icons Sass module.
186186

187-
.list--tree {
187+
.list--files {
188188
.directory::before,
189189
.directory--open::before,
190190
.document::before,
@@ -204,7 +204,7 @@ dd {
204204
}
205205

206206
@include dark-mode {
207-
.list--tree {
207+
.list--files {
208208
ol::after,
209209
ul::after {
210210
border-color: $dark-color-border;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@
500500
tfoot,
501501
.footnote,
502502
.footnotes,
503-
.list--tree {
503+
.list--files {
504504
line-height: $line-height-desktop;
505505
}
506506

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

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,32 @@ blockquote {
207207
}
208208
}
209209

210+
/**
211+
* Additional styling for examples (similar to blockquotes but no applied semantics).
212+
*/
213+
214+
.example,
215+
.list--example {
216+
border-left: 0.25rem solid $color-info-border;
217+
color: $color-text-visual-de-emphasis;
218+
}
219+
220+
.example {
221+
padding: 1px 0 1px 1.5rem;
222+
}
223+
224+
.list--example {
225+
padding: 1px 0 1px 3.25em;
226+
}
227+
228+
@include dark-mode {
229+
.example,
230+
.list--example {
231+
border-left-color: $dark-color-info-border;
232+
color: $dark-color-text-visual-de-emphasis;
233+
}
234+
}
235+
210236
/**
211237
* 1. Remove the bottom border in Chrome 57+.
212238
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
@@ -377,12 +403,12 @@ hr {
377403

378404
.separator {
379405
margin: 0 0.25em;
380-
color: $color-text-footnote;
406+
color: $color-text-visual-de-emphasis;
381407
}
382408

383409
@include dark-mode {
384410
.separator {
385-
color: $dark-color-text-footnote;
411+
color: $dark-color-text-visual-de-emphasis;
386412
}
387413
}
388414

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ $color-text-button-hover: $color-text-button !default;
1616
$color-text-button-active: shade($color-text-button, 15%) !default;
1717
$color-text-form: #000000 !default;
1818
$color-text-form-placeholder: #999999 !default;
19-
$color-text-footnote: #585858 !default;
19+
$color-text-visual-de-emphasis: #666666 !default;
2020
$color-text-white-out: #ffffff !default;
2121

2222
$color-text-print: #000000 !default; // solid black prints faster/cleaner
@@ -25,7 +25,7 @@ $dark-color-text: #ced4da !default;
2525
$dark-color-text-heading: #ffffff !default;
2626
$dark-color-text-form: #ffffff !default;
2727
$dark-color-text-form-placeholder: #747b82 !default;
28-
$dark-color-text-footnote: #c9d1d9 !default;
28+
$dark-color-text-visual-de-emphasis: #bcc4cc !default;
2929

3030
// interaction colours
3131

‎src/docs/design-patterns.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -111,8 +111,8 @@ <h3>Neutral</h3>
111111
<p><code>border-extra-dark</code></p>
112112
<div class="design-patterns--color design-patterns--color-border-extra-dark"></div>
113113

114-
<p><code>text-footnote</code></p>
115-
<div class="design-patterns--color design-patterns--color-text-footnote"></div>
114+
<p><code>text-visual-de-emphasis</code></p>
115+
<div class="design-patterns--color design-patterns--color-text-visual-de-emphasis"></div>
116116

117117
<p><code>text</code></p>
118118
<div class="design-patterns--color design-patterns--color-text"></div>

0 commit comments

Comments
 (0)