refactor(canvas-lms): rewrite

[pynappo]

(reopening because I didn't name my branch properly, apologies)

🔧 What does this fix? 🔧

• Borders are themed to less standout colors
• User content (i.e. text with user-added highlights/text color) will keep their original styles when needed
• Course-specific colors are preserved
• Links are themed
• Buttons are themed and have proper hover color changes
• Accent color is more prominent wherever appropriate
• Doesn't have Solid bar on top of quizzes #368 although I haven't seen the issue with the old nor the new userstyle, maybe due to new canvas changes
• School-specific brand colors are kept on the global nav sidebar (down to change but personally i think it's nicer this way)
• etc.

Before/After on Catppuccin Mocha with Green accent color

(white borders on the screenshot are my browser not the userstyles)

Dashboard

Before

After

Example Course Homepage

Before

After

Example Quiz

Before

After

Example Course Modules

Before

After

I've themed the main pages that I've used as a student during my courses.

A lot of the canvas CSS is autogenerated but with stable suffixes/prefixes/children, hence the high use of attribute selectors and such. edit: apologies for the large line count increase, styling the site properly is a pain.

🗒 Checklist 🗒

• I have read and followed Catppuccin's contributing guidelines.
• I have updated the version appropriately in the ==UserStyle== header of the catppuccin.user.css file.
• Add webp
• Theme less-used pages (Canvas Studio, instructor-side UI, etc)
  • styled a few of the instructor-side pages and Canvas Studio, leaving the rest for later since students like me only use like 20 pages
• Test Latte theme
• See if anything should be added to the userstyles.yml readme
• Clean up the CSS

temporary update:

Haven't had time to really work on this because I've got finals until 12/17, sorry. If I don't have access to my classes after this I'll setup a canvas class on the main Canvas instance (canvas.instructure.org) to more systematically style the site instead of just styling stuff as I notice it.

[uncenter]

Some unthemed areas I'm noticing:

Assignment status (green text):

Submit/new attempt bar and button at bottom of assignment page:

The bar is also unthemed (probably the same bar but just for example) on assignments without submission:

Apply button on grades page should be normal accent, not sure why it is this dark:

Side bar color:

Dashboard list view notifications indicator and modal:

The notification counter/indicator (marked with an arrow) should be themed, as should the bar under the tabs, as should the notification content.

Web URL submission box:

File upload submission box:

Rubric tables look off because the text has a different background to the table itself:

[uncenter]

Missing tag thingy is unthemed:

And speaking of the file upload thing I mentioned in the above comment, the modals for the Canvas Files and Webcam Photo and probably Media Recording as well are unthemed:

[uncenter]

I was able to use the following CSS to theme all of those little and sometimes big spinners Canvas uses:

[class*="spinner__circleTrack"] {
    stroke: @surface1 !important;
}
[class*="spinner__circleSpin"] {
    stroke: @accent-color !important;
}

[uncenter]

I'm going to add a "waiting-on-author" label - no pressure, just signals to maintainers at a glance that a review is not required yet. Please leave a comment once you believe you have implemented the suggested changes and fixed the unthemed areas :)

[pynappo]

For the assignment-page/upload styles, i don't think canvas.instructure.com nor my school's instance has Enhanced Assignments enabled so I can't get those pages to show up on my end - if I could get some html snippets/css styles for those that'd be greatly appreciated.

For sidebar, I left that unstyled because I thought it would help with people who enroll at multiple colleges. Should I just style it according to accent-color?

[uncenter]

For sidebar, I left that unstyled because I thought it would help with people who enroll at multiple colleges. Should I just style it according to accent-color?

I would say make it mantle?

[uncenter]

Pushed some fixes. Not complete yet, and not in the right place lol. Trying to juggle some files with new documentation I plan to introduce to go along with some of the stuff in that commit. If you want you can organize the new enhanced assignments section stuff I added into the right place and I'll keep working on it wherever you move it to when I get back to it.

[uncenter]

Lots of these buttons all over, I themed some more specifically in the enhanced UI section but we should get better selectors to match them all.

(from a discussion)

Here is the HTML from above for your reference:

<span class="discussion-topic-reply-button"><button dir="ltr" data-testid="discussion-topic-reply" cursor="pointer" type="button" tabindex="0" class="css-1iimhyf-view--inlineBlock-baseButton"><span class="css-1mnegct-baseButton__content"><span class="css-11xkk0o-baseButton__children"><span wrap="normal" letter-spacing="normal" class="css-1fvrx9c-text">Reply</span></span></span></button></span>

Canvas is using the following CSS to theme it:

.css-1mnegct-baseButton__content {
    box-sizing: border-box;
    width: 100%;
    display: block;
    direction: inherit;
    user-select: none;
    transition: background 0.2s, transform 0.2s;
    transform: none;
    font-family: LatoWeb, "Lato Extended", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    border-style: solid;
    border-width: 0.0625rem;
    border-radius: 0.25rem;
    line-height: 1.125;
    text-align: center;
    font-size: 1rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    color: rgb(255, 255, 255);
    background: rgb(3, 116, 181);
    border-color: rgb(2, 84, 131);
}

.css-1iimhyf-view--inlineBlock-baseButton:hover > [class$="-baseButton__content"] {
    background: rgb(2, 84, 131);
}

You can see -baseButton__content is part of the class that is targeted here. Searching this finds that you are already theming some of these types of buttons, though you are using autogenerated classnames in some places - please avoid that if possible so we can catch more of these buttons in our theming.