Skip to content

Commit 9b49612

Browse files
csswizardrycsswizardry
committed
refactor: Consolidate Custom Property Settings
1 parent 1bde457 commit 9b49612

4 files changed

Lines changed: 102 additions & 82 deletions

File tree

‎css/_settings.colors.scss‎

Lines changed: 0 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -5,67 +5,3 @@
55
// Page
66
$inuit-base-background-color: var(--color-bg);
77
$inuit-base-text-color: var(--color-gray);
8-
9-
10-
11-
12-
13-
:root {
14-
--color-brand: #f43059;
15-
--color-pink: var(--color-brand);
16-
--color-bg: #f9f9f9;
17-
--color-gray: #333;
18-
--color-gray-light: #999;
19-
--color-gray-mid: #666;
20-
--color-gray-ui: #ddd;
21-
--color-green: #859900;
22-
--color-highlight: #fff;
23-
--color-tint: #f2f2f2;
24-
--color-positive: #3f990f;
25-
--color-negative: #9f102e;
26-
--color-hilite: #ffc;
27-
28-
--color-links: var(--color-pink);
29-
--color-links-carousel: var(--color-gray-ui);
30-
31-
--color-code: var(--color-green);
32-
--color-pre-background: var(--color-gray);
33-
--color-pre: #fff;
34-
35-
--color-btn: var(--color-links);
36-
--color-iconic: var(--color-gray-ui);
37-
38-
--color-masthead: #fff;
39-
--color-page-head-border: var(--color-pink);
40-
--color-page-head: #fff;
41-
--color-page-head-background: #fff;
42-
43-
--color-site-nav: var(--color-gray);
44-
--color-sub-menu-border: var(--color-gray-ui);
45-
--color-sub-menu-link: var(--color-gray);
46-
--color-sub-menu-link-hover: var(--color-links);
47-
48-
--color-nav-secondary: var(--color-gray-light);
49-
--color-nav-secondary-text: var(--color-gray);
50-
51-
--color-page-foot: #fff;
52-
--color-page-micro: #fff;
53-
--color-page-micro-background: var(--color-gray);
54-
55-
--color-headings: var(--color-pink);
56-
--color-heading-sub: var(--color-gray);
57-
58-
--color-quote: var(--color-gray-mid);
59-
--color-quote--banner: var(--color-gray);
60-
61-
--color-box-highlight-background: var(--color-highlight);
62-
--color-box-highlight-border: var(--color-gray-ui);
63-
--color-box-tint-background: var(--color-tint);
64-
65-
--color-band-highlight-background: var(--color-highlight);
66-
--color-band-tint-background: var(--color-tint);
67-
--color-band-dark: #fff;
68-
--color-band-dark-background: var(--color-gray);
69-
--color-band-attention: #fff;
70-
--color-band-attention-background: var(--color-brand);
71-
}

‎css/_settings.custom-properties.scss‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
///*------------------------------------*\
2+
// #CUSTOM-PROPERTIES
3+
//\*------------------------------------*/
4+
5+
// Typography
6+
:root {
7+
--font-family-system: system-ui, sans-serif;
8+
--font-family-code: "Operator Mono", ui-monospace, monospace;
9+
--font-family-serif: Hoefler Text, Georgia, serif;
10+
}
11+
12+
13+
14+
15+
16+
// Spacing
17+
:root {
18+
--spacing-unit: 24px;
19+
--spacing-unit--tiny: 6px;
20+
--spacing-unit--small: 12px;
21+
--spacing-unit--large: 48px;
22+
}
23+
24+
25+
26+
27+
28+
// Global dimensions
29+
:root {
30+
--border-radius: 3px;
31+
32+
// Styles specific to page headers. Implemented in
33+
// `_components.page-head[--masthead].scss`, but defined globally here.
34+
--header-border-width: 6px;
35+
--header-max-height: 480px;
36+
}
37+
38+
39+
40+
41+
42+
// Colours
43+
:root {
44+
--color-brand: #f43059;
45+
--color-pink: var(--color-brand);
46+
--color-bg: #f9f9f9;
47+
--color-gray: #333;
48+
--color-gray-light: #999;
49+
--color-gray-mid: #666;
50+
--color-gray-ui: #ddd;
51+
--color-green: #859900;
52+
--color-highlight: #fff;
53+
--color-tint: #f2f2f2;
54+
--color-positive: #3f990f;
55+
--color-negative: #9f102e;
56+
--color-hilite: #ffc;
57+
58+
--color-links: var(--color-pink);
59+
--color-links-carousel: var(--color-gray-ui);
60+
61+
--color-code: var(--color-green);
62+
--color-pre-background: var(--color-gray);
63+
--color-pre: #fff;
64+
65+
--color-btn: var(--color-links);
66+
--color-iconic: var(--color-gray-ui);
67+
68+
--color-masthead: #fff;
69+
--color-page-head-border: var(--color-pink);
70+
--color-page-head: #fff;
71+
--color-page-head-background: #fff;
72+
73+
--color-site-nav: var(--color-gray);
74+
--color-sub-menu-border: var(--color-gray-ui);
75+
--color-sub-menu-link: var(--color-gray);
76+
--color-sub-menu-link-hover: var(--color-links);
77+
78+
--color-nav-secondary: var(--color-gray-light);
79+
--color-nav-secondary-text: var(--color-gray);
80+
81+
--color-page-foot: #fff;
82+
--color-page-micro: #fff;
83+
--color-page-micro-background: var(--color-gray);
84+
85+
--color-headings: var(--color-pink);
86+
--color-heading-sub: var(--color-gray);
87+
88+
--color-quote: var(--color-gray-mid);
89+
--color-quote--banner: var(--color-gray);
90+
91+
--color-box-highlight-background: var(--color-highlight);
92+
--color-box-highlight-border: var(--color-gray-ui);
93+
--color-box-tint-background: var(--color-tint);
94+
95+
--color-band-highlight-background: var(--color-highlight);
96+
--color-band-tint-background: var(--color-tint);
97+
--color-band-dark: #fff;
98+
--color-band-dark-background: var(--color-gray);
99+
--color-band-attention: #fff;
100+
--color-band-attention-background: var(--color-brand);
101+
}

‎css/_settings.global.scss‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,3 @@
11
///*------------------------------------*\
22
// #GLOBAL
33
//\*------------------------------------*/
4-
5-
:root {
6-
--font-family-system: system-ui, sans-serif;
7-
--font-family-code: "Operator Mono", ui-monospace, monospace;
8-
--font-family-serif: Hoefler Text, Georgia, serif;
9-
10-
--spacing-unit: 24px;
11-
--spacing-unit--tiny: 6px;
12-
--spacing-unit--small: 12px;
13-
--spacing-unit--large: 48px;
14-
15-
--border-radius: 3px;
16-
17-
// Styles specific to page headers. Implemented in
18-
// `_components.page-head[--masthead].scss`, but defined globally here.
19-
--header-border-width: 6px;
20-
--header-max-height: 480px;
21-
}

‎css/csswizardry.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
* #SETTINGS
9090
*/
9191
@import "settings.all";
92+
@import "settings.custom-properties";
9293

9394

9495

0 commit comments

Comments
 (0)