Skip to content

Commit 0f2e309

Browse files
recursionlabrecursionlab
authored
Port Cathedral color theme into RecursionLab site (#5)
* feat(theme): introduce Cathedral token scaffolding (:root vars), replace a few hard-coded colors with variables, and keep SCSS colors concrete to pass build * style(theme): harmonize syntax highlight with Cathedral tokens; token-based base overrides; fix YAML; prep for PR
1 parent e28bcf7 commit 0f2e309

File tree

9 files changed

+263
-122
lines changed

9 files changed

+263
-122
lines changed

‎_sass/_base.scss‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@
44

55
%tab-focus {
66
/* Default*/
7-
outline: thin dotted #f89406;
7+
outline: thin dotted $theme-color;
88
/* Webkit*/
9-
outline: 5px auto #f89406;
9+
outline: 5px auto $theme-color;
1010
outline-offset: -2px;
1111
}
1212

1313
p>code, a>code, li>code, figcaption>code, td>code {
1414
padding-top: 0.1rem;
1515
padding-bottom: 0.1rem;
16-
background: #f2f3f3;
17-
border: 1px solid #b2b2b2;
16+
background: $code-background-color;
17+
border: 1px solid $border-color;
1818
border-radius: 2px;
1919
font-size: 0.8em;
2020
}
@@ -24,27 +24,25 @@ div.highlighter-rouge .highlight, figure.highlight .highlight {
2424
}
2525

2626
/* #mastheadbackground {
27-
height: 155px;
28-
margin-bottom: -175px;
29-
background-color: #F2F3F3;
27+
height: 155px;
28+
margin-bottom: -175px;
29+
background-color: $code-background-color;
3030
}*/
3131

3232
.highligher-rouge {
3333
font-size: .8em;
3434
}
3535

36-
table td {
37-
border-bottom: solid 2px #e6e6e6;
38-
}
36+
table td { border-bottom: solid 2px mix(#fff, $border-color, 60%); }
3937

4038
.button-dark {
4139
display: inline-block;
4240
padding: 12px 24px;
4341
border-radius: 6px;
44-
border: 2px solid #a33025;
42+
border: 2px solid hsl(var(--destructive));
4543
font-weight: bold;
46-
background: #F2F3F3;
47-
color: #a33025;
44+
background: hsl(var(--muted));
45+
color: hsl(var(--destructive));
4846
}
4947

5048
@mixin clearfix {
@@ -166,11 +164,11 @@ blockquote:before {
166164
position: absolute;
167165
left: -0.2em;
168166
top: -0.2em;
169-
color: #7a7a7a;
167+
color: mix(#fff, $text-color, 50%);
170168
}
171169

172170
blockquote cite {
173-
color: #999999;
171+
color: mix(#fff, $text-color, 60%);
174172
font-size: 0.9em;
175173
display: block;
176174
margin-top: 5px;
@@ -210,9 +208,9 @@ tt, code, kbd, samp, pre {
210208

211209
pre {
212210
overflow-x: auto;
213-
border-left: solid 0 #52d841;
214-
color: #4fff38;
215-
background: #404040;
211+
border-left: solid 0 $border-color;
212+
color: $text-color;
213+
background: $code-background-color;
216214
line-height: 1.4;
217215
font-size: .8em;
218216
margin: 0 0 1.7em;
@@ -333,10 +331,7 @@ figcaption {
333331
-webkit-transition: $global-transition;
334332
transition: $global-transition;
335333

336-
&:hover {
337-
color: #000;
338-
border-bottom-color: #000;
339-
}
334+
&:hover { color: $link-color-hover; border-bottom-color: $link-color-hover; }
340335
}
341336
}
342337

‎_sass/_buttons.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
display: inline-block;
1212
margin-bottom: 0.25em;
1313
padding: 0.5em 1em;
14-
color: #fff !important;
14+
color: hsl(var(--primary-foreground)) !important;
1515
font-family: $caption-font-family;
1616
text-align: center;
1717
text-decoration: none;
@@ -46,7 +46,7 @@
4646
/* light outline */
4747

4848
&--light-outline {
49-
border: 1px solid #fff !important; /* override*/
49+
border: 1px solid hsl(var(--primary-foreground)) !important; /* override*/
5050
background-color: transparent;
5151
}
5252

‎_sass/_navigation.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,12 +89,12 @@
8989
}
9090

9191
&.current {
92-
color: #fff;
92+
color: hsl(var(--primary-foreground));
9393
background: $theme-color;
9494
}
9595

9696
&.disabled {
97-
color: mix(#fff, $gray, 75%);
97+
color: hsl(var(--muted-foreground));
9898
pointer-events: none;
9999
cursor: not-allowed;
100100
}

‎_sass/_reset.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ body { margin: 0; }
3333
/* Selected elements */
3434

3535
::-moz-selection {
36-
color: #fff;
37-
background: #000;
36+
color: $background-color;
37+
background: $text-color;
3838
}
3939

4040
::selection {
41-
color: #fff;
42-
background: #000;
41+
color: $background-color;
42+
background: $text-color;
4343
}
4444

4545
/* Display HTML5 elements in IE6-9 and FF3 */

‎_sass/_syntax.scss‎

Lines changed: 77 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -41,86 +41,81 @@ figure.highlight {
4141
.highlight pre { width: 100%; }
4242

4343
/*
44-
Solarized Light
45-
http://ethanschoonover.com/solarized
44+
Cathedral syntax color mapping (on tokenized dark base)
45+
- General text: foreground
46+
- Comments: muted-foreground
47+
- Keywords/Declarations/Tags/Functions/Variables: primary (gold)
48+
- Operators: accent (purple)
49+
- Numbers/Strings: accent (purple)
50+
- Errors/Regex: destructive (red)
51+
- Constants/Headings: primary (gold)
52+
========================================================================== */
4653

47-
SOLARIZED HEX ROLE
48-
--------- -------- ------------------------------------------
49-
base01 #586e75 body text / default code / primary content
50-
base1 #93a1a1 comments / secondary content
51-
base3 #fdf6e3 background
52-
orange #cb4b16 constants
53-
red #dc322f regex, special keywords
54-
blue #22b3eb reserved keywords
55-
cyan #2aa198 strings, numbers
56-
green #859900 operators, other keywords
57-
========================================================================== */
58-
59-
.highlight .c { color: #93a1a1 } /* Comment */
60-
.highlight .err { color: #586e75 } /* Error */
61-
.highlight .g { color: #586e75 } /* Generic */
62-
.highlight .k { color: #859900 } /* Keyword */
63-
.highlight .l { color: #586e75 } /* Literal */
64-
.highlight .n { color: #586e75 } /* Name */
65-
.highlight .o { color: #859900 } /* Operator */
66-
.highlight .x { color: #cb4b16 } /* Other */
67-
.highlight .p { color: #586e75 } /* Punctuation */
68-
.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
69-
.highlight .cp { color: #859900 } /* Comment.Preproc */
70-
.highlight .c1 { color: #93a1a1 } /* Comment.Single */
71-
.highlight .cs { color: #859900 } /* Comment.Special */
72-
.highlight .gd { color: #2aa198 } /* Generic.Deleted */
73-
.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
74-
.highlight .gr { color: #dc322f } /* Generic.Error */
75-
.highlight .gh { color: #cb4b16 } /* Generic.Heading */
76-
.highlight .gi { color: #859900 } /* Generic.Inserted */
77-
.highlight .go { color: #586e75 } /* Generic.Output */
78-
.highlight .gp { color: #586e75 } /* Generic.Prompt */
79-
.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
80-
.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
81-
.highlight .gt { color: #586e75 } /* Generic.Traceback */
82-
.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
83-
.highlight .kd { color: #22b3eb } /* Keyword.Declaration */
84-
.highlight .kn { color: #859900 } /* Keyword.Namespace */
85-
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
86-
.highlight .kr { color: #22b3eb } /* Keyword.Reserved */
87-
.highlight .kt { color: #dc322f } /* Keyword.Type */
88-
.highlight .ld { color: #586e75 } /* Literal.Date */
89-
.highlight .m { color: #2aa198 } /* Literal.Number */
90-
.highlight .s { color: #2aa198 } /* Literal.String */
91-
.highlight .na { color: #586e75 } /* Name.Attribute */
92-
.highlight .nb { color: #B58900 } /* Name.Builtin */
93-
.highlight .nc { color: #22b3eb } /* Name.Class */
94-
.highlight .no { color: #cb4b16 } /* Name.Constant */
95-
.highlight .nd { color: #22b3eb } /* Name.Decorator */
96-
.highlight .ni { color: #cb4b16 } /* Name.Entity */
97-
.highlight .ne { color: #cb4b16 } /* Name.Exception */
98-
.highlight .nf { color: #22b3eb } /* Name.Function */
99-
.highlight .nl { color: #586e75 } /* Name.Label */
100-
.highlight .nn { color: #586e75 } /* Name.Namespace */
101-
.highlight .nx { color: #586e75 } /* Name.Other */
102-
.highlight .py { color: #586e75 } /* Name.Property */
103-
.highlight .nt { color: #22b3eb } /* Name.Tag */
104-
.highlight .nv { color: #22b3eb } /* Name.Variable */
105-
.highlight .ow { color: #859900 } /* Operator.Word */
106-
.highlight .w { color: #586e75 } /* Text.Whitespace */
107-
.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
108-
.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
109-
.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
110-
.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
111-
.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */
112-
.highlight .sc { color: #2aa198 } /* Literal.String.Char */
113-
.highlight .sd { color: #586e75 } /* Literal.String.Doc */
114-
.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
115-
.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
116-
.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */
117-
.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
118-
.highlight .sx { color: #2aa198 } /* Literal.String.Other */
119-
.highlight .sr { color: #dc322f } /* Literal.String.Regex */
120-
.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
121-
.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
122-
.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */
123-
.highlight .vc { color: #22b3eb } /* Name.Variable.Class */
124-
.highlight .vg { color: #22b3eb } /* Name.Variable.Global */
125-
.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */
126-
.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
54+
.highlight .c { color: hsl(var(--muted-foreground)) } /* Comment */
55+
.highlight .err { color: hsl(var(--destructive)) } /* Error */
56+
.highlight .g { color: hsl(var(--foreground)) } /* Generic */
57+
.highlight .k { color: hsl(var(--primary)) } /* Keyword */
58+
.highlight .l { color: hsl(var(--foreground)) } /* Literal */
59+
.highlight .n { color: hsl(var(--foreground)) } /* Name */
60+
.highlight .o { color: hsl(var(--accent)) } /* Operator */
61+
.highlight .x { color: hsl(var(--primary)) } /* Other */
62+
.highlight .p { color: hsl(var(--foreground)) } /* Punctuation */
63+
.highlight .cm { color: hsl(var(--muted-foreground)) } /* Comment.Multiline */
64+
.highlight .cp { color: hsl(var(--accent)) } /* Comment.Preproc */
65+
.highlight .c1 { color: hsl(var(--muted-foreground)) } /* Comment.Single */
66+
.highlight .cs { color: hsl(var(--accent)) } /* Comment.Special */
67+
.highlight .gd { color: hsl(var(--accent)) } /* Generic.Deleted */
68+
.highlight .ge { color: hsl(var(--foreground)); font-style: italic } /* Generic.Emph */
69+
.highlight .gr { color: hsl(var(--destructive)) } /* Generic.Error */
70+
.highlight .gh { color: hsl(var(--primary)) } /* Generic.Heading */
71+
.highlight .gi { color: hsl(var(--primary)) } /* Generic.Inserted */
72+
.highlight .go { color: hsl(var(--foreground)) } /* Generic.Output */
73+
.highlight .gp { color: hsl(var(--foreground)) } /* Generic.Prompt */
74+
.highlight .gs { color: hsl(var(--foreground)); font-weight: bold } /* Generic.Strong */
75+
.highlight .gu { color: hsl(var(--primary)) } /* Generic.Subheading */
76+
.highlight .gt { color: hsl(var(--foreground)) } /* Generic.Traceback */
77+
.highlight .kc { color: hsl(var(--primary)) } /* Keyword.Constant */
78+
.highlight .kd { color: hsl(var(--primary)) } /* Keyword.Declaration */
79+
.highlight .kn { color: hsl(var(--accent)) } /* Keyword.Namespace */
80+
.highlight .kp { color: hsl(var(--accent)) } /* Keyword.Pseudo */
81+
.highlight .kr { color: hsl(var(--primary)) } /* Keyword.Reserved */
82+
.highlight .kt { color: hsl(var(--destructive)) } /* Keyword.Type */
83+
.highlight .ld { color: hsl(var(--foreground)) } /* Literal.Date */
84+
.highlight .m { color: hsl(var(--accent)) } /* Literal.Number */
85+
.highlight .s { color: hsl(var(--accent)) } /* Literal.String */
86+
.highlight .na { color: hsl(var(--foreground)) } /* Name.Attribute */
87+
.highlight .nb { color: hsl(var(--primary)) } /* Name.Builtin */
88+
.highlight .nc { color: hsl(var(--primary)) } /* Name.Class */
89+
.highlight .no { color: hsl(var(--primary)) } /* Name.Constant */
90+
.highlight .nd { color: hsl(var(--primary)) } /* Name.Decorator */
91+
.highlight .ni { color: hsl(var(--primary)) } /* Name.Entity */
92+
.highlight .ne { color: hsl(var(--primary)) } /* Name.Exception */
93+
.highlight .nf { color: hsl(var(--primary)) } /* Name.Function */
94+
.highlight .nl { color: hsl(var(--foreground)) } /* Name.Label */
95+
.highlight .nn { color: hsl(var(--foreground)) } /* Name.Namespace */
96+
.highlight .nx { color: hsl(var(--foreground)) } /* Name.Other */
97+
.highlight .py { color: hsl(var(--foreground)) } /* Name.Property */
98+
.highlight .nt { color: hsl(var(--primary)) } /* Name.Tag */
99+
.highlight .nv { color: hsl(var(--primary)) } /* Name.Variable */
100+
.highlight .ow { color: hsl(var(--accent)) } /* Operator.Word */
101+
.highlight .w { color: hsl(var(--foreground)) } /* Text.Whitespace */
102+
.highlight .mf { color: hsl(var(--accent)) } /* Literal.Number.Float */
103+
.highlight .mh { color: hsl(var(--accent)) } /* Literal.Number.Hex */
104+
.highlight .mi { color: hsl(var(--accent)) } /* Literal.Number.Integer */
105+
.highlight .mo { color: hsl(var(--accent)) } /* Literal.Number.Oct */
106+
.highlight .sb { color: hsl(var(--muted-foreground)) } /* Literal.String.Backtick */
107+
.highlight .sc { color: hsl(var(--accent)) } /* Literal.String.Char */
108+
.highlight .sd { color: hsl(var(--foreground)) } /* Literal.String.Doc */
109+
.highlight .s2 { color: hsl(var(--accent)) } /* Literal.String.Double */
110+
.highlight .se { color: hsl(var(--destructive)) } /* Literal.String.Escape */
111+
.highlight .sh { color: hsl(var(--foreground)) } /* Literal.String.Heredoc */
112+
.highlight .si { color: hsl(var(--accent)) } /* Literal.String.Interpol */
113+
.highlight .sx { color: hsl(var(--accent)) } /* Literal.String.Other */
114+
.highlight .sr { color: hsl(var(--destructive)) } /* Literal.String.Regex */
115+
.highlight .s1 { color: hsl(var(--accent)) } /* Literal.String.Single */
116+
.highlight .ss { color: hsl(var(--accent)) } /* Literal.String.Symbol */
117+
.highlight .bp { color: hsl(var(--primary)) } /* Name.Builtin.Pseudo */
118+
.highlight .vc { color: hsl(var(--primary)) } /* Name.Variable.Class */
119+
.highlight .vg { color: hsl(var(--primary)) } /* Name.Variable.Global */
120+
.highlight .vi { color: hsl(var(--primary)) } /* Name.Variable.Instance */
121+
.highlight .il { color: hsl(var(--accent)) } /* Literal.Number.Integer.Long */

‎_sass/_variables.scss‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -28,17 +28,18 @@ $type-size-8 : 0.625em !default; // ~10px
2828
/*
2929
Colors
3030
========================================================================== */
31-
$brand-color : #22d3ee !default; // Recursion Lab accent
31+
/* Cathedral primary (gold) mapped for legacy SCSS usage */
32+
$brand-color : hsl(43, 74%, 66%) !default; // Cathedral primary
3233
$green : mix(#000, #c0392b, 15%);
3334
$theme-color : $brand-color !default;
34-
$gray : #7a8288 !default;
35-
36-
$body-color : #fff !default;
37-
$background-color : #fff !default;
38-
$code-background-color : mix(#fff, $gray, 90%) !default;
39-
$blockquote-background-color: mix(#fff, $gray, 90%) !default;
40-
$text-color : #404040 !default;
41-
$border-color : #b2b2b2 !default;
35+
$gray : #7a8288 !default; // neutral gray (kept light-theme friendly)
36+
37+
$body-color : #404040 !default; // foreground
38+
$background-color : #fff !default; // background
39+
$code-background-color : mix(#fff, $gray, 90%) !default; // muted
40+
$blockquote-background-color: mix(#fff, $gray, 90%) !default; // muted
41+
$text-color : #404040 !default; // foreground
42+
$border-color : #b2b2b2 !default; // border
4243

4344

4445
/* links */

0 commit comments

Comments
 (0)