Skip to content

Port Cathedral color theme into RecursionLab site #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 20, 2025
Merged

Port Cathedral color theme into RecursionLab site #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8bc7883
feat(theme): introduce Cathedral token scaffolding (:root vars), repl…
recursionlab Sep 20, 2025
9ee897d
style(theme): harmonize syntax highlight with Cathedral tokens; token…
recursionlab Sep 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 17 additions & 22 deletions _sass/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,17 @@

%tab-focus {
/* Default*/
outline: thin dotted #f89406;
outline: thin dotted $theme-color;
/* Webkit*/
outline: 5px auto #f89406;
outline: 5px auto $theme-color;
outline-offset: -2px;
}

p>code, a>code, li>code, figcaption>code, td>code {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
background: #f2f3f3;
border: 1px solid #b2b2b2;
background: $code-background-color;
border: 1px solid $border-color;
border-radius: 2px;
font-size: 0.8em;
}
Expand All @@ -24,27 +24,25 @@ div.highlighter-rouge .highlight, figure.highlight .highlight {
}

/* #mastheadbackground {
height: 155px;
margin-bottom: -175px;
background-color: #F2F3F3;
height: 155px;
margin-bottom: -175px;
background-color: $code-background-color;
}*/

.highligher-rouge {
font-size: .8em;
}

table td {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Mixing #fff with $border-color for table borders may reduce contrast in dark themes.

Consider using a variable or conditional logic to maintain adequate border contrast in both light and dark themes for accessibility.

Suggested implementation:

$table-border-color: mix(#fff, $border-color, 60%);

// If you have a dark theme, override $table-border-color for accessibility
// Example using a .dark-theme class (adjust to your theme logic)
.dark-theme {
  $table-border-color: mix(#000, $border-color, 60%);
}

table td { border-bottom: solid 2px $table-border-color; }

If your theme switching uses CSS custom properties (variables) or a different mechanism, you should adapt the variable assignment accordingly. For example, you might use var(--table-border-color) and set that property in your theme root or body selector. If you use SCSS maps or functions for theme management, update those instead.

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

.button-dark {
display: inline-block;
padding: 12px 24px;
border-radius: 6px;
border: 2px solid #a33025;
border: 2px solid hsl(var(--destructive));
font-weight: bold;
background: #F2F3F3;
color: #a33025;
background: hsl(var(--muted));
color: hsl(var(--destructive));
}

@mixin clearfix {
Expand Down Expand Up @@ -166,11 +164,11 @@ blockquote:before {
position: absolute;
left: -0.2em;
top: -0.2em;
color: #7a7a7a;
color: mix(#fff, $text-color, 50%);
}

blockquote cite {
color: #999999;
color: mix(#fff, $text-color, 60%);
Comment on lines +167 to +171
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Mixing #fff with $text-color for blockquote elements may not adapt well to dark mode.

Consider using theme variables or adjusting the mix ratio to ensure sufficient contrast and readability in dark mode.

Suggested implementation:

blockquote cite {
  color: var(--blockquote-cite-color, mix(#fff, $text-color, 80%));
  font-size: 0.9em;
  display: block;
  margin-top: 5px;

To fully implement this, you should:

  1. Define --blockquote-cite-color in your CSS root or theme files for both light and dark modes, for example:
:root {
  --blockquote-cite-color: #666; /* Light mode */
}
[data-theme="dark"] {
  --blockquote-cite-color: #bbb; /* Dark mode */
}
  1. Adjust the fallback mix ratio (80%) if you find it does not provide enough contrast in your design.

font-size: 0.9em;
display: block;
margin-top: 5px;
Expand Down Expand Up @@ -210,9 +208,9 @@ tt, code, kbd, samp, pre {

pre {
overflow-x: auto;
border-left: solid 0 #52d841;
color: #4fff38;
background: #404040;
border-left: solid 0 $border-color;
color: $text-color;
background: $code-background-color;
line-height: 1.4;
font-size: .8em;
margin: 0 0 1.7em;
Expand Down Expand Up @@ -333,10 +331,7 @@ figcaption {
-webkit-transition: $global-transition;
transition: $global-transition;

&:hover {
color: #000;
border-bottom-color: #000;
}
&:hover { color: $link-color-hover; border-bottom-color: $link-color-hover; }
}
}

Expand Down
4 changes: 2 additions & 2 deletions _sass/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
display: inline-block;
margin-bottom: 0.25em;
padding: 0.5em 1em;
color: #fff !important;
color: hsl(var(--primary-foreground)) !important;
font-family: $caption-font-family;
text-align: center;
text-decoration: none;
Expand Down Expand Up @@ -46,7 +46,7 @@
/* light outline */

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

Expand Down
4 changes: 2 additions & 2 deletions _sass/_navigation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,12 +89,12 @@
}

&.current {
color: #fff;
color: hsl(var(--primary-foreground));
background: $theme-color;
}

&.disabled {
color: mix(#fff, $gray, 75%);
color: hsl(var(--muted-foreground));
pointer-events: none;
cursor: not-allowed;
}
Expand Down
8 changes: 4 additions & 4 deletions _sass/_reset.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,13 @@ body { margin: 0; }
/* Selected elements */

::-moz-selection {
color: #fff;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

issue: Selection color and background may be confusing if $background-color is light.

Swapping the selection colors or choosing a more distinct highlight will improve legibility, especially with light backgrounds and dark text.

background: #000;
color: $background-color;
background: $text-color;
}

::selection {
color: #fff;
background: #000;
color: $background-color;
background: $text-color;
}

/* Display HTML5 elements in IE6-9 and FF3 */
Expand Down
159 changes: 77 additions & 82 deletions _sass/_syntax.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,86 +41,81 @@ figure.highlight {
.highlight pre { width: 100%; }

/*
Solarized Light
http://ethanschoonover.com/solarized
Cathedral syntax color mapping (on tokenized dark base)
- General text: foreground
- Comments: muted-foreground
- Keywords/Declarations/Tags/Functions/Variables: primary (gold)
- Operators: accent (purple)
- Numbers/Strings: accent (purple)
- Errors/Regex: destructive (red)
- Constants/Headings: primary (gold)
========================================================================== */

SOLARIZED HEX ROLE
--------- -------- ------------------------------------------
base01 #586e75 body text / default code / primary content
base1 #93a1a1 comments / secondary content
base3 #fdf6e3 background
orange #cb4b16 constants
red #dc322f regex, special keywords
blue #22b3eb reserved keywords
cyan #2aa198 strings, numbers
green #859900 operators, other keywords
========================================================================== */

.highlight .c { color: #93a1a1 } /* Comment */
.highlight .err { color: #586e75 } /* Error */
.highlight .g { color: #586e75 } /* Generic */
.highlight .k { color: #859900 } /* Keyword */
.highlight .l { color: #586e75 } /* Literal */
.highlight .n { color: #586e75 } /* Name */
.highlight .o { color: #859900 } /* Operator */
.highlight .x { color: #cb4b16 } /* Other */
.highlight .p { color: #586e75 } /* Punctuation */
.highlight .cm { color: #93a1a1 } /* Comment.Multiline */
.highlight .cp { color: #859900 } /* Comment.Preproc */
.highlight .c1 { color: #93a1a1 } /* Comment.Single */
.highlight .cs { color: #859900 } /* Comment.Special */
.highlight .gd { color: #2aa198 } /* Generic.Deleted */
.highlight .ge { color: #586e75; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #dc322f } /* Generic.Error */
.highlight .gh { color: #cb4b16 } /* Generic.Heading */
.highlight .gi { color: #859900 } /* Generic.Inserted */
.highlight .go { color: #586e75 } /* Generic.Output */
.highlight .gp { color: #586e75 } /* Generic.Prompt */
.highlight .gs { color: #586e75; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #cb4b16 } /* Generic.Subheading */
.highlight .gt { color: #586e75 } /* Generic.Traceback */
.highlight .kc { color: #cb4b16 } /* Keyword.Constant */
.highlight .kd { color: #22b3eb } /* Keyword.Declaration */
.highlight .kn { color: #859900 } /* Keyword.Namespace */
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
.highlight .kr { color: #22b3eb } /* Keyword.Reserved */
.highlight .kt { color: #dc322f } /* Keyword.Type */
.highlight .ld { color: #586e75 } /* Literal.Date */
.highlight .m { color: #2aa198 } /* Literal.Number */
.highlight .s { color: #2aa198 } /* Literal.String */
.highlight .na { color: #586e75 } /* Name.Attribute */
.highlight .nb { color: #B58900 } /* Name.Builtin */
.highlight .nc { color: #22b3eb } /* Name.Class */
.highlight .no { color: #cb4b16 } /* Name.Constant */
.highlight .nd { color: #22b3eb } /* Name.Decorator */
.highlight .ni { color: #cb4b16 } /* Name.Entity */
.highlight .ne { color: #cb4b16 } /* Name.Exception */
.highlight .nf { color: #22b3eb } /* Name.Function */
.highlight .nl { color: #586e75 } /* Name.Label */
.highlight .nn { color: #586e75 } /* Name.Namespace */
.highlight .nx { color: #586e75 } /* Name.Other */
.highlight .py { color: #586e75 } /* Name.Property */
.highlight .nt { color: #22b3eb } /* Name.Tag */
.highlight .nv { color: #22b3eb } /* Name.Variable */
.highlight .ow { color: #859900 } /* Operator.Word */
.highlight .w { color: #586e75 } /* Text.Whitespace */
.highlight .mf { color: #2aa198 } /* Literal.Number.Float */
.highlight .mh { color: #2aa198 } /* Literal.Number.Hex */
.highlight .mi { color: #2aa198 } /* Literal.Number.Integer */
.highlight .mo { color: #2aa198 } /* Literal.Number.Oct */
.highlight .sb { color: #93a1a1 } /* Literal.String.Backtick */
.highlight .sc { color: #2aa198 } /* Literal.String.Char */
.highlight .sd { color: #586e75 } /* Literal.String.Doc */
.highlight .s2 { color: #2aa198 } /* Literal.String.Double */
.highlight .se { color: #cb4b16 } /* Literal.String.Escape */
.highlight .sh { color: #586e75 } /* Literal.String.Heredoc */
.highlight .si { color: #2aa198 } /* Literal.String.Interpol */
.highlight .sx { color: #2aa198 } /* Literal.String.Other */
.highlight .sr { color: #dc322f } /* Literal.String.Regex */
.highlight .s1 { color: #2aa198 } /* Literal.String.Single */
.highlight .ss { color: #2aa198 } /* Literal.String.Symbol */
.highlight .bp { color: #22b3eb } /* Name.Builtin.Pseudo */
.highlight .vc { color: #22b3eb } /* Name.Variable.Class */
.highlight .vg { color: #22b3eb } /* Name.Variable.Global */
.highlight .vi { color: #22b3eb } /* Name.Variable.Instance */
.highlight .il { color: #2aa198 } /* Literal.Number.Integer.Long */
.highlight .c { color: hsl(var(--muted-foreground)) } /* Comment */
.highlight .err { color: hsl(var(--destructive)) } /* Error */
.highlight .g { color: hsl(var(--foreground)) } /* Generic */
.highlight .k { color: hsl(var(--primary)) } /* Keyword */
.highlight .l { color: hsl(var(--foreground)) } /* Literal */
.highlight .n { color: hsl(var(--foreground)) } /* Name */
.highlight .o { color: hsl(var(--accent)) } /* Operator */
.highlight .x { color: hsl(var(--primary)) } /* Other */
.highlight .p { color: hsl(var(--foreground)) } /* Punctuation */
.highlight .cm { color: hsl(var(--muted-foreground)) } /* Comment.Multiline */
.highlight .cp { color: hsl(var(--accent)) } /* Comment.Preproc */
.highlight .c1 { color: hsl(var(--muted-foreground)) } /* Comment.Single */
.highlight .cs { color: hsl(var(--accent)) } /* Comment.Special */
.highlight .gd { color: hsl(var(--accent)) } /* Generic.Deleted */
.highlight .ge { color: hsl(var(--foreground)); font-style: italic } /* Generic.Emph */
.highlight .gr { color: hsl(var(--destructive)) } /* Generic.Error */
.highlight .gh { color: hsl(var(--primary)) } /* Generic.Heading */
.highlight .gi { color: hsl(var(--primary)) } /* Generic.Inserted */
.highlight .go { color: hsl(var(--foreground)) } /* Generic.Output */
.highlight .gp { color: hsl(var(--foreground)) } /* Generic.Prompt */
.highlight .gs { color: hsl(var(--foreground)); font-weight: bold } /* Generic.Strong */
.highlight .gu { color: hsl(var(--primary)) } /* Generic.Subheading */
.highlight .gt { color: hsl(var(--foreground)) } /* Generic.Traceback */
.highlight .kc { color: hsl(var(--primary)) } /* Keyword.Constant */
.highlight .kd { color: hsl(var(--primary)) } /* Keyword.Declaration */
.highlight .kn { color: hsl(var(--accent)) } /* Keyword.Namespace */
.highlight .kp { color: hsl(var(--accent)) } /* Keyword.Pseudo */
.highlight .kr { color: hsl(var(--primary)) } /* Keyword.Reserved */
.highlight .kt { color: hsl(var(--destructive)) } /* Keyword.Type */
.highlight .ld { color: hsl(var(--foreground)) } /* Literal.Date */
.highlight .m { color: hsl(var(--accent)) } /* Literal.Number */
.highlight .s { color: hsl(var(--accent)) } /* Literal.String */
.highlight .na { color: hsl(var(--foreground)) } /* Name.Attribute */
.highlight .nb { color: hsl(var(--primary)) } /* Name.Builtin */
.highlight .nc { color: hsl(var(--primary)) } /* Name.Class */
.highlight .no { color: hsl(var(--primary)) } /* Name.Constant */
.highlight .nd { color: hsl(var(--primary)) } /* Name.Decorator */
.highlight .ni { color: hsl(var(--primary)) } /* Name.Entity */
.highlight .ne { color: hsl(var(--primary)) } /* Name.Exception */
.highlight .nf { color: hsl(var(--primary)) } /* Name.Function */
.highlight .nl { color: hsl(var(--foreground)) } /* Name.Label */
.highlight .nn { color: hsl(var(--foreground)) } /* Name.Namespace */
.highlight .nx { color: hsl(var(--foreground)) } /* Name.Other */
.highlight .py { color: hsl(var(--foreground)) } /* Name.Property */
.highlight .nt { color: hsl(var(--primary)) } /* Name.Tag */
.highlight .nv { color: hsl(var(--primary)) } /* Name.Variable */
.highlight .ow { color: hsl(var(--accent)) } /* Operator.Word */
.highlight .w { color: hsl(var(--foreground)) } /* Text.Whitespace */
.highlight .mf { color: hsl(var(--accent)) } /* Literal.Number.Float */
.highlight .mh { color: hsl(var(--accent)) } /* Literal.Number.Hex */
.highlight .mi { color: hsl(var(--accent)) } /* Literal.Number.Integer */
.highlight .mo { color: hsl(var(--accent)) } /* Literal.Number.Oct */
.highlight .sb { color: hsl(var(--muted-foreground)) } /* Literal.String.Backtick */
.highlight .sc { color: hsl(var(--accent)) } /* Literal.String.Char */
.highlight .sd { color: hsl(var(--foreground)) } /* Literal.String.Doc */
.highlight .s2 { color: hsl(var(--accent)) } /* Literal.String.Double */
.highlight .se { color: hsl(var(--destructive)) } /* Literal.String.Escape */
.highlight .sh { color: hsl(var(--foreground)) } /* Literal.String.Heredoc */
.highlight .si { color: hsl(var(--accent)) } /* Literal.String.Interpol */
.highlight .sx { color: hsl(var(--accent)) } /* Literal.String.Other */
.highlight .sr { color: hsl(var(--destructive)) } /* Literal.String.Regex */
.highlight .s1 { color: hsl(var(--accent)) } /* Literal.String.Single */
.highlight .ss { color: hsl(var(--accent)) } /* Literal.String.Symbol */
.highlight .bp { color: hsl(var(--primary)) } /* Name.Builtin.Pseudo */
.highlight .vc { color: hsl(var(--primary)) } /* Name.Variable.Class */
.highlight .vg { color: hsl(var(--primary)) } /* Name.Variable.Global */
.highlight .vi { color: hsl(var(--primary)) } /* Name.Variable.Instance */
.highlight .il { color: hsl(var(--accent)) } /* Literal.Number.Integer.Long */
19 changes: 10 additions & 9 deletions _sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,18 @@ $type-size-8 : 0.625em !default; // ~10px
/*
Colors
========================================================================== */
$brand-color : #22d3ee !default; // Recursion Lab accent
/* Cathedral primary (gold) mapped for legacy SCSS usage */
$brand-color : hsl(43, 74%, 66%) !default; // Cathedral primary
$green : mix(#000, #c0392b, 15%);
$theme-color : $brand-color !default;
$gray : #7a8288 !default;

$body-color : #fff !default;
$background-color : #fff !default;
$code-background-color : mix(#fff, $gray, 90%) !default;
$blockquote-background-color: mix(#fff, $gray, 90%) !default;
$text-color : #404040 !default;
$border-color : #b2b2b2 !default;
$gray : #7a8288 !default; // neutral gray (kept light-theme friendly)

$body-color : #404040 !default; // foreground
$background-color : #fff !default; // background
$code-background-color : mix(#fff, $gray, 90%) !default; // muted
$blockquote-background-color: mix(#fff, $gray, 90%) !default; // muted
$text-color : #404040 !default; // foreground
$border-color : #b2b2b2 !default; // border


/* links */
Expand Down
Loading