From 8fd9d3e67b518f900a90a4d6e99f5af34d43aa6b Mon Sep 17 00:00:00 2001 From: uncenter <47499684+uncenter@users.noreply.github.com> Date: Wed, 29 Jan 2025 17:25:21 -0500 Subject: [PATCH 01/17] feat(canvas-lms): rewrite Co-authored-by: pynappo --- scripts/userstyles.yml | 4 +- styles/canvas-lms/catppuccin.user.less | 2294 +++++++++++++++++++++++- 2 files changed, 2203 insertions(+), 95 deletions(-) diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml index 433cf4d6bb..6859ae873e 100644 --- a/scripts/userstyles.yml +++ b/scripts/userstyles.yml @@ -157,6 +157,8 @@ collaborators: url: https://github.com/steinuil - &husjon url: https://github.com/husjon + - &pynappo + url: https://github.com/pynappo userstyles: advent-of-code: @@ -239,7 +241,7 @@ userstyles: color: red readme: app-link: https://www.instructure.com/canvas - current-maintainers: [] + current-maintainers: [*pynappo] past-maintainers: [*thememesniper] chatgpt: name: ChatGPT diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index c31b50f567..0e35cba0eb 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -13,9 +13,11 @@ @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] + +@var checkbox styleNavMenu "Style navigation menu" 1 ==/UserStyle== */ -@-moz-document domain("instructure.com") { +@-moz-document domain("instructure.com"), domain("instructuremedia.com") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); @@ -54,132 +56,2236 @@ @crust: @catppuccin[@@flavor][@crust]; @accent: @catppuccin[@@flavor][@@accentColor]; + @text-filter: @catppuccin-filters[@@flavor][@text]; + @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; + color-scheme: if(@flavor = latte, light, dark); - ::selection { - background-color: fade(@accent, 30%); + /* GLOBALS/VARIABLES */ + --ic-brand-primary: @accent; + --ic-brand-primary-lightened-15: lighten(@accent, 5%); + --ic-brand-primary-darkened-28: darken(@accent, 10%); + --ic-brand-primary-darkened-10: darken(@accent, 3%); + --ic-brand-font-color-dark: @text; + --ic-brand-font-color-dark-lightened-15: fadeout(@text, 15%); + --ic-brand-font-color-dark-lightened-30: lighten(@text, 30%); + --ic-link-color: @blue; + --ic-link-color-darkened-10: fadeout(@blue, 10%); + --ic-link-color-lightened-10: lighten(@blue, 10%); + + /* hover colors, used based on whether canvas's css has a blue hover or grayed-out hover color */ + @hover-regular: fadeout(@surface2, 50%); + @hover-accent: mix(@base, @accent, 70%); + @hover-button: if( + (@flavor = latte), + darken(@surface0, 5%), + lighten(@surface0, 5%) + ); + + /* GENERAL UI CHANGES */ + + #footer, + body { + color: @text; + border-color: @surface1; + background-color: @base; + } + hr { + border-color: @surface1; + } + select, + textarea, + input[type="text"], + input[type="password"], + input[type="datetime"], + input[type="datetime-local"], + input[type="date"], + input[type="month"], + input[type="time"], + input[type="week"], + input[type="number"], + input[type="email"], + input[type="url"], + input[type="search"], + input[type="tel"], + input[type="color"], + .uneditable-input { + &ic-Input { + border-color: @surface1; + background-color: @surface0; + } + background-color: @base; + border-color: @surface2; + } + img:not( + [src^="/"], + [src*="cloudfront.net/dist"], + [src*="instructuremedia.com/build"] + ) { + /* force a white background for user-uploaded images */ + background-color: #fffd; } + scrollbar-color: @surface2 @surface0; - input, - textarea { - &::placeholder { - color: @subtext0 !important; + table { + border-color: @surface1; + } + table[style*="border-color: #000000"] { + border-color: @surface1 !important; + } + thead th { + border-color: @surface1; + } + tbody tr, + tbody td { + border-color: @surface1; + } + td[class$="view-cell"] { + color: @text; + } + + :is(label, fieldset) span[class$="formFieldLabel"] { + color: @subtext1; + } + + :is(label, fieldset) span[class$="text"] { + color: @text; + } + + /* used for links */ + span[color="brand"] { + color: @blue; + } + + /* used for labels */ + span[color="primary"] { + color: @subtext1; + } + span[color="secondary"] { + color: @subtext0; + } + + .user_content { + /* for highlighted text in user-created content, revert to regular-ish text color */ + [style~="background-color:"]:not([style~="color:"]) { + color: black; + } + /* for links with backgrounds in user-created content, use the canvas link color */ + [style~="background-color:"] a.external span { + color: #0374b5; + } + /* just a special exception for pure black text and pure white backgrounds */ + [style*="color: rgb(0, 0, 0)"], + [style*="color: black"], + [style*="color: #000000"] { + &:not([style~="background-color:"]) { + color: @text !important; + } + } + [style*="background-color: rgb(255, 255, 255)"], + [style*="background-color: white"], + [style*="background-color: #ffffff"] { + color: @text !important; + background-color: @base !important; + } + } + + a[class$="link"]:not(.btn, .ic-DashboardCard__link), + a[class$="link"] > span, + button[class$="link"]:not(.btn), + a.external span { + color: @blue; + &:hover, + &:active { + color: darken(@blue, 10%); + } + } + + /* sticky footers (e.g. teacher-side course settings) */ + .sticky-footer { + background-color: @surface0; + } + .form-actions-sticky-footer { + border-color: @surface1; + } + + /* spinners */ + [class*="spinner__circleTrack"] { + stroke: @surface1 !important; + } + [class*="spinner__circleSpin"] { + stroke: @accent !important; + } + + /* fullscreen background for modal popups */ + body > span > span[class*="mask"] { + background-color: fadeout(@overlay0, 25%); + > span { + color: @text; + background-color: @base; + border-color: @surface1; + > div[class$="modalHeader"] { + background-color: transparent; + border-color: @surface1; + } + img { + background-color: transparent; + } + > div[class$="modalFooter"] { + background-color: @surface0; + border-color: @surface1; + } + } + } + + div[class*="view-panel__content"] { + color: @text; + } + + /* dialogs */ + .ui-datepicker td span.ui-state-default.ui-state-hover, + .ui-datepicker td a.ui-state-default.ui-state-hover { + border-color: @surface2; + background-color: @surface1; + } + .ui-datepicker-header.ui-widget-header, + .ui-widget-content { + background-color: @surface0; + border-color: @surface1; + } + .ui-widget-overlay { + background-color: fadeout(@base, 30%); + } + .ui-dialog { + .ui-dialog-titlebar { + background-color: @surface0; + border-color: @surface1; + } + background-color: @surface0; + } + .ui-datepicker .ui-datepicker-time, + .ui-dialog .ui-dialog-buttonpane { + background-color: @surface1; + border-color: @surface2; + } + .form-dialog .form-controls { + background-color: @surface1; + border-color: @surface2; + } + + /* global nav menu */ + .ic-app-header { + .ic-app-header__logomark-container { + background-color: transparent; + } + .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active { + & > * { + background-color: @base; + } + .menu-item__text { + background-color: transparent; + } + } + } + --ic-brand-global-nav-menu-item__text-color--active: @accent; + --ic-brand-global-nav-menu-item__badge-text--active: @mantle; + --ic-brand-global-nav-ic-icon-svg-fill--active: @accent; + --ic-brand-global-nav-avatar-border: @text; + @navmenu: if( + @styleNavMenu = 1, + { + --ic-brand-global-nav-bgd: @mantle; + --ic-brand-global-nav-menu-item__badge-bgd: @surface2; + --ic-brand-global-nav-menu-item__badge-text: @text; + --ic-brand-global-nav-menu-item__text-color: @text; + --ic-brand-global-nav-ic-icon-svg-fill: @text; + .menu-item-icon-container path[fill] { + fill: @text !important; + } + }, + {} + ); + @navmenu(); + + /* sidebar trays (e.g. slide in from right side) */ + body > span > [class*="tray"] { + background-color: @mantle; + fieldset, + label { + .Gradebook__StatusModalListItem span { + color: black !important; + } + } + div[class$="tray__content"] > div > span:last-of-type:has(> button) { + border-color: @surface1; + background-color: @crust; + } + span[data-testid$="footer"] > div { + border-color: @surface1; + background-color: @crust; + } + } + + #nav-tray-portal { + > span > span { + background-color: @mantle; + [class$="listItem"] { + color: @subtext0; + } + /* needed to persist color on hover */ + a { + color: @blue; + } + div[data-timestamp] { + color: @subtext0; + } + } + label span[class$="label"] { + color: @text; + } + .help-tray li [class$="pill"] { + /* just new pill */ + border-color: @green; + color: @green; + background-color: transparent; + } + .profile-tray span[class$="avatar"] { + background-color: @surface0; + span { + color: @accent; + } + } + } + + /* link sidebar for courses */ + .list-view a.active { + border-color: @accent; + color: @accent; + } + + /* pills */ + div[class$="pill"] { + /* info pill (e.g. submitted, graded, etc) */ + background-color: transparent; + border-color: @surface2; + color: @text; + &.css-tfc09q-pill.css-tfc09q-pill { + /* red pills (late, missing) */ + color: @red; + border-color: @red; + } + } + .pill { + background-color: @surface1; + border-color: @surface2; + box-shadow: 0 1px 0 @surface2; + } + /* pills on grades tab */ + .student_assignment [class$="pill"] { + background-color: transparent; + } + .submission-missing-pill > span > div { + color: @red; + border-color: @red; + } + .submission-late-pill > span > div { + /* yes, this is blue in grades and red on dashboard */ + color: @blue; + border-color: @blue; + } + + /* filled-in buttons - this auto-generated class covers a lot of them */ + .css-1rpus1y-baseButton__content { + transition-property: background, transform, filter; + border-color: @surface2; + background-color: @surface0; + color: @text; + } + + .PlannerItem-styles__secondary button, + .discussions-index-manage-menu > button, + span[type="button"], + [data-testid="compose-modal-desktop"] + button[class$="baseButton"]:not([data-testid="send-button"]), + #immersive_reader_mount_point button, + #immersive_reader_mobile_mount_point button, + .ColorPicker__Actions button[class$="baseButton"]:not([id$="Apply"]), + #grades_summary a[role="button"], + #planner-today-btn, + form[action="/logout"] button, + button[data-testid="address-button"], + button[data-testid="gradebook-settings-button"], + .searchButton__container button, + a:has(.css-1rpus1y-baseButton__content), + button:has(.css-1rpus1y-baseButton__content) { + &:hover { + background-color: @hover-button; + > [class$="baseButton__content"] { + background-color: @hover-button; + } + color: @text; + } + color: @text; + background-color: @surface0; + border-color: @surface1; + path[fill="#000000"] { + fill: @text; + } + > [class$="baseButton__content"] { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + [class$="text"] { + color: @text; } } - #breadcrumbs, - #printQuizButton, - #content, - .navigation-tray-container, - .ic-Dashboard-header__layout, - .button-sidebar-wide, - .access_tokens, - .context_modules, - .textarea-container, + /* the below styles are taken from canvas's common css sheet */ + .btn, .Button, - .panel, - span { + .ui-button { + background-color: @surface0; + color: @text; + border-color: @surface1; + } + + .btn:focus, + .Button:focus, + .ui-button:focus { + color: @text; + } + + .btn:hover, + .Button:hover, + .ui-button:hover { + background-color: @hover-button; + color: @text; + } + + .btn:hover.ui-state-hover, + .Button:hover.ui-state-hover, + .ui-button:hover.ui-state-hover { + background-color: @hover-button; + color: @text; + border-color: darken(@surface1, 5%); + } + + .btn.active, + .btn.Button--active, + .Button.active, + .active.ui-button, + .Button.Button--active, + .Button--active.ui-button, + .ui-button.ui-state-active:hover, + .ui-button.ui-state-active, + .ui-progressbar .ui-button.ui-widget-header { + background-color: @subtext0; + border-color: lighten(@surface1, 10%); + color: @mantle; + } + + .btn:active, + .Button:active, + .ui-button:active { + background-color: darken(@hover-button, 3%); + } + + .btn-link, + .btn-link:active, + .btn-link[disabled], + .Button--link, + .Button--link:active, + .Button--link[disabled] { + background: transparent; + } + + /* filled-in buttons with colored bg */ + --ic-brand-button--primary-bgd: @accent; + --ic-brand-button--primary-text: @crust; + --ic-brand-button--primary-bgd-darkened-5: darken(@accent, 5%); + --ic-brand-button--primary-bgd-darkened-15: darken(@accent, 15%); + .btn-primary, + .Button--primary { + background: var(--ic-brand-button--primary-bgd); + color: var(--ic-brand-button--primary-text); + border-color: var(--ic-brand-button--primary-bgd-darkened-15); + } + .btn-primary.active, + .btn-primary.Button--active, + .btn-primary.ui-button.ui-state-active, + .ui-progressbar .btn-primary.ui-button.ui-widget-header, + .btn-primary:active, + .Button--primary.active, + .Button--primary.Button--active, + .Button--primary.ui-button.ui-state-active, + .ui-progressbar .Button--primary.ui-button.ui-widget-header, + .Button--primary:active { + background: var(--ic-brand-button--primary-bgd-darkened-5); + } + .btn-primary:hover, + .Button--primary:hover { + background: var(--ic-brand-button--primary-bgd-darkened-5); + color: var(--ic-brand-button--primary-text); + } + .btn-link, + .Button--link { + border-color: transparent; + cursor: pointer; + color: var(--ic-link-color); + } + + .btn-link:hover:focus, + .Button--link:hover:focus { + color: var(--ic-link-color); + } + .btn-link:hover, + .Button--link:hover { + color: var(--ic-link-color-darkened-10); + background: transparent; + } + + .btn-link:focus, + .Button--link:focus { + color: var(--ic-link-color); + } + + .btn-link.active, + .btn-link.Button--active, + .btn-link.ui-button.ui-state-active, + .ui-progressbar .btn-link.ui-button.ui-widget-header, + .btn-link:active, + .Button--link.active, + .Button--link.Button--active, + .Button--link.ui-button.ui-state-active, + .ui-progressbar .Button--link.ui-button.ui-widget-header, + .Button--link:active { + background: @surface0; + border-color: transparent; + color: var(--ic-link-color); + } + + .btn-link.disabled, + .btn-link.ui-button.ui-state-disabled, + .btn-link[disabled], + .Button--link.disabled, + .Button--link.ui-button.ui-state-disabled, + .Button--link[disabled] { + color: var(--ic-brand-font-color-dark); + background: transparent; + } + + .btn-published, + .btn-published:hover { + background: @green; + border-color: 1px solid darken(@green, 10%); + color: @crust; + } + + .btn-published:focus { + box-shadow: inset 0 0 0 2px @crust; + background: darken(@green, 10%); + color: @crust; + } + + .btn-published.disabled, + .btn-published.ui-button.ui-state-disabled, + .btn-published.disabled:hover { + border-color: darken(@green, 10%); + background: @green; + color: @crust; + } + + .btn-unpublished { + color: @crust; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); + background-color: @red; + background-image: @red; + border-color: darken(@red, 10%); + } + + .btn-unpublished:hover, + .btn-unpublished:active, + .btn-unpublished.active, + .btn-unpublished.disabled, + .btn-unpublished.ui-button.ui-state-disabled, + .btn-unpublished[disabled] { + color: @crust; + background-color: darken(@red, 10%); + } + + .btn-unpublished:focus { + color: @crust; + background: darken(@red, 10%); + box-shadow: inset 0 0 0 2px @crust; + } + /* end of copy-pasted styles */ + + :is(button, a)[class$="baseButton"]::before { + border-color: @accent; + } + + #apply_select_menus, + #ColorPicker__Apply, + .ActionButtons button[id^="Drilldown"], + a:has(.css-10t1mdw-baseButton__content), + button:has(.css-10t1mdw-baseButton__content) { + &:disabled { + filter: brightness(85%); + } + &:not(:disabled):hover { + > [class$="baseButton__content"] { + filter: brightness(115%); + } + } + background-color: darken(@accent, 20%); + border-color: @surface1; + path[fill="#000000"] { + fill: @text; + } + > [class$="baseButton__content"] { + transition-property: all; + /* color: @text; */ + background-color: darken(@accent, 20%); + border-color: @surface1; + } + } + + .Button--icon-action, + .Button--icon-action-rev { + background-color: transparent; + } + + /* checkboxes */ + input:not(:checked) + label span[class$="checkboxFacade__facade"] { + border-color: @surface2; background-color: @base; - color: @accent; + } + /* input:checked + label span[class$="checkboxFacade__facade"] { */ + /* background-color: @surface2; */ + /* } */ + input + label span[class$="label"] { + color: @text; } - #application, - .comments, - .module-sequence-footer-content, - .immersive_reader_mount_point, - .context_modules { - background: @base !important; - background-color: @base !important; - color: @accent !important; + /* dropdown menu buttons */ + [class$="textInput__facade"] { + color: @text; + background-color: transparent; + border-color: @surface2; + input { + color: @text !important; + } + } + select { + color: @text; + border-color: @surface2; + background-color: @base; } - a, - .page-title { - color: fade(@text, 20%) !important; + /* notifications */ + .ic-notification { + color: @text; + box-shadow: 0 1px 6px @surface1; + .ic-notification__content { + background-color: @base; + } + i { + color: @crust; + } } - * { - color: @text !important; - background-color: @base !important; - } - .ic-DashboardCard, - .ic-DashboardCard__header_content, - .ic-DashboardCard__action-container, - .ic-DashboardCard__header-subtitle, - .ic-DashboardCard__header-title, - .ic-DashboardCard__header-term { - background-color: @surface0 !important; + /* alerts */ + div[class*="view-alert"] { + color: @text; + background-color: @base; + border-color: @accent; + > div { + border-color: @accent; + } + > div:has(> svg) { + background-color: @accent; + } + } + + /* pdf reader */ + .Pages { + background-color: @surface0; } - .ic-app-header__main-navigation, - .ic-app-header__logomark-container { - background-color: @crust !important; + /* RECENT ACTIVITY/HOME */ + .recent-activity-header, + .stream-category { + border-color: @surface1; + } + .stream-details tr:hover, + .stream_header:hover { + background-color: @hover-accent; + } + .pages.show .course-title { + color: @subtext0; } - .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active - .ic-app-header__menu-list-link { - background-color: fade(@crust, 20%); + /* ANNOUNCEMENTS */ + .ic-item-row { + box-shadow: @surface1 0 -1px 0 0; + box-shadow: 0 -1px @surface1, inset 0 -1px @surface1; + } + [data-testid="pill-container"] * { + color: @subtext0 !important; } - body { + /* the unread badge */ + .ic-announcement-row span[class$="badge"] { + background-color: @accent; + } + + .ic-item-row__meta-content-timestamp > p { + color: @subtext0; + } + + /* DASHBOARD */ + .StickyButton-styles__root { + background-color: @accent; + span { + color: @mantle; + } + } + .NotificationBadge-styles__activityIndicator.NotificationBadge-styles__hasBadge + [class$="badge"] { + background-color: @accent; + } + .Day-styles__root { background-color: @base; + color: @text; + h2 { + border-color: @surface1; + } + .Grouping-styles__title { + color: @blue; + background-color: @base; + &::after { + background-image: none; + } + } + .PlannerItem-styles__root { + border-color: @surface1; + color: @subtext0; + } + .PlannerItem-styles__secondary [class$="-text"] { + color: @subtext0; + } } - #right-side .events_list .event-details::after, - #right-side .events_list .todo-details::after, - #right-side .to-do-list .event-details::after, - #right-side .to-do-list .todo-details::after { - content: ""; - position: absolute; - top: 0; - right: 0; - height: 100%; - width: 12px; - background: linear-gradient( - to right, - rgba(255, 255, 255, 0) 0%, - @surface0 80% - ); + .CompletedItemsFacade-styles__root { + border-color: @surface1; + } + .CompletedItemsFacade-styles__contentPrimary * { + color: @blue; + } + button[data-testid="completed-items-toggle"] { + span[class$="summaryText"] { + color: inherit; + } + } + .ic-Dashboard-header { + background-color: @base; + } + .ic-Dashboard-header__layout { + background-color: @base; + border-color: @surface1; + } + .PlannerHeader-styles__root { + background-color: @base; + svg { + color: @text; + } + } + #DashboardOptionsMenu_Container svg { + color: @text; + } + + .ic-DashboardCard { + background-color: @surface0; + .ic-DashboardCard__header_content { + background-color: @surface0; + } + .ic-DashboardCard__header-button, + .ic-DashboardCard__header-button * { + background-color: transparent; + } + .ic-DashboardCard__action-badge { + background-color: @accent; + .unread_count { + background-color: @accent; + color: @base; + } + } } - :root { - --ic-brand-global-nav-avatar-border: @accent; - --ic-brand-font-color-dark: fade(@accent, 20%); - --ic-brand-primary: @accent; - --ic-brand-global-nav-ic-icon-svg-fill: fade(@accent, 50%); - --eMdva-color: @base !important; - --ccWIh-color: @crust; + .ToDoSidebarItem__Info li { + color: @text; } - .unread_count, - .menu-item-icon-container, - .menu-item__badge, - .nav-badge { - color: fade(@text, 20%); + .Sidebar__TodoListContainer svg { + color: @text; + } + #right-side { + .h2, + h2 { + border-color: @surface1; + } + background-color: fadeout(@base, 70%); + .details .header { + color: @subtext0; + } + .ToDoSidebarItem__Close svg { + color: @text; + } } + #right-side .events_list { + p { + color: fadeout(@text, 20%); + } - .list-view a.active { - border-left-color: #007fff; - color: #007fff; + .event-details::after { + background: linear-gradient(to right, transparent 0%, @base 80%); + } + } + .PlannerEmptyState-styles__root { + color: @text; + } + .EmptyDays-styles__root { + background-color: @base; + color: @text; + border-color: @surface2; + & > h2 { + border-color: @surface1; + } + } + .PlannerHeader [id^="Badge"] { + background-color: @accent; + color: @crust; + } + .Opportunity-styles__root { + background-color: transparent; + } + .Opportunity-styles__oppName { + color: @subtext1; + } + .Opportunity-styles__due, + .Opportunity-styles__points { + color: @subtext1; + } + + /* popup menus */ + /* extra selectors are to avoid styling tooltips because their arrows are hard to style */ + span[data-position-content^="Menu"]:not( + [data-position-content^="Menu__label"] + ), + span[data-position-content^="Popover"] { + span[class$="arrow"]::after { + filter: @surface2-filter; + } + > span { + color: @text; + background-color: @surface1; + border-color: @surface2; + } } - // Fix file preview - nav.ViewerControls * { - background-color: @surface1 !important; + .ui-menu .ui-menu-item a.ui-state-hover, + .ui-menu .ui-menu-item a.ui-state-active, + .ui-menu .ui-menu-item .ui-progressbar a.ui-widget-header, + .ui-progressbar .ui-menu .ui-menu-item a.ui-widget-header, + .ui-menu .ui-menu-item a.ui-state-focus { + color: @crust; } - div.Pages, - .Page-container { - background-color: #f2f2f2 !important; + + /* color picker menu (e.g. on dashboard) */ + span[data-position-content^="Popover"]:has( + div[class$="view-tabs__container"] + ) { + div[class$="view-tab"] { + background-color: @surface1; + border-bottom-color: @surface2; + color: @text; + &[aria-selected="true"] { + border-color: @surface2; + border-bottom-color: transparent; + } + } + div[role="tabpanel"] > div { + border-color: @surface2; + background-color: @surface1; + } } - .Page-container * { - background-color: transparent !important; + .ColorPicker__Container { + background-color: @surface1; + border-color: @surface2; + label span { + color: @subtext0; + } } - } -} -/* deno-fmt-ignore */ -@catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + span[data-testid="RCE_RestoreAutoSaveModal"] { + span[class$="view--block"] { + background-color: transparent; + border-color: @surface1; + color: @text; + } + } + /* select dropdowns */ + span[data-position-content^="Popover"]:has(ul[role="listbox"]) { + border-color: @surface2; + span { + color: @text; + } + & > span > span { + background-color: @surface1; + div[class$="separator"] { + background-color: @surface2; + } + li { + background-color: @surface1; + } + ul[role="listbox"] { + background-color: @surface1; + /* the extra selectors are because some lists have group options as list items */ + li:not(:has(ul[role="group"])) { + &:hover, + &:focus, + &:active { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + li:has([aria-selected="true"]) { + background-color: mix(@surface1, @overlay2, 70%); + } + } + } + } + + /* only on canvas studio apparently */ + span[data-position-content^="Drilldown"] { + border-color: @surface2; + span { + color: @text; + } + li { + background-color: @surface1; + &:not(:has([id^="DrilldownHeader-Title"])) { + &:hover, + &:focus, + &:active { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + [id^="DrilldownHeader-Separator"] { + background-color: @surface2; + } + } + } + button[id^="Drilldown"] { + > span { + background-color: @base; + color: @text; + border-color: @surface2; + } + &:hover > span { + background-color: @base; + } + } + + /* dropdown menu */ + span[data-position-content^="Menu"]:not( + [data-position-content^="Menu__label"] + ) { + span { + color: @text; + } + ul[role="menu"] { + &::before { + border-color: @accent; + } + background-color: @surface1; + span[class$="menuItemGroup__label"] { + background-color: @surface1; + } + div[class$="menuItemSeparator"] { + background-color: @surface2; + } + [role="menuitem"], + span[class$="menuItem"] { + background-color: @surface1; + &:hover, + &:focus, + &:active { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + } + } + + /* selection */ + ::selection { + background-color: fade(@accent, 30%); + } + /* use more noticeable color for file preview selection */ + #App *::selection { + background-color: @accent; + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + + /* ICONS */ + .nav-icon { + background-color: @base; + color: @text; + } + .ui-icon-closethick { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}") !important; + } + /* publish icons */ + .publish-icon.publish-icon-published, + .ig-published:not(.student-view) .ig-type-icon { + color: @green; + } + svg[name="IconPublish"], + svg[name="IconBookmark"], + .icon-check { + color: @green !important; + } + svg[name="IconX"] { + color: @text; + } + + /* tree-view expand indicators */ + svg[name="IconArrowOpenEnd"], + svg[name="IconArrowOpenDown"] { + color: @text; + } + + /* unsure what the other colors are */ + span[color="success"] > svg { + color: @green; + } + + .context_module .icon-minimize { + color: @red !important; + } + + .ally-prominent-af-download-button { + @svg: escape( + 'iconAllyDownload-ICCreated with Sketch.' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + img[src="/images/svg-icons/svg_icon_download.svg"] { + @svg: escape( + '' + ); + content: url("data:image/svg+xml,@{svg}"); + } + + .standalone-icon::before { + color: @text; + } + + /* MODULES */ + .item-group-expandable, + .item-group-container { + border-color: @surface0; + background-color: @base; + } + .item-group-expandable .emptyMessage { + background-color: @base; + } + .header-bar { + background-color: @base; + } + .content, + .footer { + background-color: @base; + } + .ig-header { + background-color: @surface0; + color: @text; + border-color: @surface1; + .name { + text-shadow: 1px 1px 0 rgba(@base, 0.5); + color: @text; + } + } + .accessible-toggler { + color: @text; + } + .ig-list { + .ig-row { + color: @text; + background-color: @base; + border-color: @surface1; + } + .ig-row:hover { + background-color: @hover-accent; + } + } + .list-view a.active .nav-badge, + .nav-badge { + background-color: @accent; + color: @base; + } + #breadcrumbs { + background-color: @base; + } + .ic-app-nav-toggle-and-crumbs, + .item-group-condensed { + border-color: @surface1; + } + .pages.show .page-title { + color: @text; + } + #show_by_date, + #show_by_type { + & + label > span { + color: @text; + } + &:checked + label > span { + background-color: @surface1; + } + } + + /* COURSES */ + .course-list-favorite-course .icon-star::before { + color: @peach; + } + .course-list-table .course-list-table-row:hover { + background-color: mix(@overlay2, @base, 20%); + } + .course-list-unpublished-course-row { + background-color: darken(@base, 5%); + .course-list-unpublished-course { + color: @red; + } + } + /* browse more courses */ + .course_text { + color: @text; + } + + /* CALENDAR */ + #calendar-app { + .agenda-wrapper { + background-color: @base; + } + table { + thead.fc-head, + .fc-head-container, + .fc-row { + border-color: @surface1; + } + .fc-day-header { + color: @text; + } + .fc-body { + background-color: @base; + } + .fc-today { + background-color: darken(@surface0, 5%); + } + .fc-divider { + border-color: @surface2; + } + } + .fc-agendaWeek-view .fc-day-grid .fc-row { + border-color: @surface1; + } + } + :is(.calendar, #calendar-drag-and-drop-container) + .fc-row + :is(.fc-content-skeleton, .fc-helper-skeleton) + td { + border-color: @surface1; + } + + #calendar-app .fc-event, + #calendar-drag-and-drop-container .fc-event { + background-color: transparent; + } + .calendar_header #create_new_event_link { + color: @text; + } + #calendar-list-holder, + #other-calendars-list-holder, + #undated-events { + background-color: @base; + } + + #minical { + color: @text; + background-color: @surface1; + border-color: @surface1; + h2, + .fc-widget-content { + color: @text; + } + .fc-view { + background-color: @base; + * { + border-color: transparent; + } + } + .fc-state-default { + color: @text; + } + .fc-toolbar { + border-color: @surface1; + } + } + #calendar-list-holder { + background-color: @base; + } + #calendars-context-list .context_list_context:hover, + #other-calendars-context-list .context_list_context:hover { + background-color: mix(@overlay2, @base, 20%); + } + #undated-events { + background-color: @base; + .event { + background-color: @base; + } + } + + .ui-datepicker .ui-datepicker-header .ui-datepicker-prev { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + .ui-datepicker .ui-datepicker-header .ui-datepicker-next { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* INBOX */ + [data-testid="tool-bar"] { + background-color: @mantle; + border-color: @surface2; + button { + &::before { + /* on-click-outline */ + border-color: var(--ic-link-color); + } + svg { + color: @text; + } + span { + background-color: @surface0; + border-color: @surface1; + } + } + } + + /* left side */ + [data-testid="conversation"] { + border-color: @surface1; + span[class$="badge"] { + color: @text; + background-color: @surface1; + } + } + #inbox-conversation-holder > div > div > div { + /* each email entry */ + border-color: @surface2; + & div[style~="background-color:"] { + background-color: mix(@base, @accent, 90%) !important; + } + & div[style~="box-shadow:"] { + box-shadow: @accent -4px 0 0 inset !important; + } + + button[data-testid$="read-badge"] { + &::before { + border-color: @blue; + } + span svg { + color: @accent; + } + } + button[data-testid="visible-not-starred"], + button[data-testid="visible-starred"] { + svg { + color: @text; + } + } + } + [data-testid="unread-badge"] span svg { + color: @accent; + } + [data-testid="ic-blue-unread-badge"] span { + background-color: @accent; + } + + /* right side */ + span:has(> #inbox-conversation-holder) + span > div > div { + border-color: @surface1; + } + /* compose message overlay */ + span[data-testid="compose-modal-desktop"] { + background-color: @surface0; + border-color: @surface1; + span:has(> label[for^="TextArea"]) { + border-color: @surface1; + textarea { + color: @text; + } + span[class$="textArea__outline"] { + border-color: @accent; + } + } + span[data-testid="past-messages"] div[class$="view"] { + border-color: @surface1; + } + } + + /* COURSE CONTENT (QUIZZES, ETC) */ + #assignment_show .student-assignment-overview { + border-color: @surface1; + } + + #assignment_show .description.teacher-version { + border-color: @surface2; + } + + .assignment_header, + #assignment_student_details, + .quiz-header { + border-color: @surface2; + } + .question.fill_in_multiple_blanks_question .answer_group, + .question.multiple_dropdowns_question .answer_group { + border-color: @surface1; + } + .quiz-submission, + .question_editing { + background-color: @base; + border-color: @base; + } + .score_value { + color: @subtext1; + } + .question { + background-color: transparent; + } + .quiz_comment { + border-color: @surface1; + background-image: linear-gradient(to bottom, @base, @surface0); + &::before { + border-bottom-color: @surface1; + } + &::after { + border-bottom-color: @base; + } + } + #quiz_show { + ul#quiz_student_details { + border-color: @surface1; + } + .description.teacher-version { + border-color: @surface2; + } + } + .muted-notice { + background-color: @surface0; + background-image: linear-gradient(to bottom, @base, @surface0); + text-shadow: @base 1px 1px 1px; + border-color: @surface2; + } + .alert { + background-color: fadeout(@red, 85%); + span { + color: @red; + } + } + .icon-warning { + color: @red; + } + + .ic-Table { + td, + th.ic-Table--header-row { + border-color: @surface1; + } + } + table.summary { + td, + tbody th { + background-color: @base; + border-color: @surface1; + } + } + ul#question_list { + li.answered a { + color: @lavender; + } + li.marked { + /* for some reason canvas's css has left in quotes so this just patches that */ + background-position: left 3px top 7px; + } + li i { + /* question mark icons */ + color: @subtext0; + } + } + #questions { + background-color: @base; + .ambrosiaContainerComponent * { + color: @text; + } + .question { + border-color: @surface1; + &.marked .flag_question { + /* the flag image is a png containing multiple flags so can't really svg it */ + filter: brightness(if((@flavor = latte), 100%, 130%)); + } + .header { + background-color: @surface0; + border-color: @surface1; + .question_points_holder { + color: @subtext0; + } + } + } + .text { + background-color: @base; + } + .answers .answer { + border-color: @surface1; + } + } + .form-actions { + border-color: @surface1; + } + #last_saved_indicator { + color: @subtext1; + } + .ui-tooltip { + &::before { + border-color: transparent transparent @surface0; + } + &.horizontal::before { + border-color: transparent @surface0 transparent transparent; + } + background-color: @surface0; + } + + .module-sequence-footer .module-sequence-footer-content { + background-color: @base; + border-color: @surface1; + } + + /* submitting */ + #tinymce-parent-of-submission_body { + .canvas-rce__skins--root, + * { + color: @text; + } + } + .border { + border-color: @surface1; + } + + /* submission details */ + .submission-details-container { + border-color: @surface1; + } + .submission-details-comments { + .comment_author_and_date { + color: @subtext0; + } + .comments { + border-color: @surface1; + background-color: @surface0; + /* mild hack to invert the media comment symbol */ + a.media-comment { + padding: 0; + background-image: none; + } + a.media-comment::before { + background-repeat: no-repeat; + background-position: left center; + line-height: 20px; + padding: 6px 10px 6px 16px; + display: inline-block; + content: ""; + filter: invert(100%); + background-image: url("/dist/images/audio_comment-eeb35d0efe.gif"); + } + } + } + .file-upload-submission { + background-color: @surface0; + } + /* #upload_media_tab { */ + /* img */ + /* } */ + .submission-details-header__heading-and-grades { + border-color: @surface1; + } + .comment { + color: @text !important; + } + /* text editor */ + .tox { + * { + color: @text; + } + .tox-edit-area.active, + .tox .tox-edit-area.active iframe { + border-color: @accent; + } + .tox-split-button .tox-tbtn.tox-split-button__chevron { + background-color: transparent; + } + .tox-tbtn:focus, + .tox-split-button:focus { + background-color: fadeout(@overlay2, 50%); + color: fadeout(@text, 20%); + fill: fadeout(@text, 20%); + } + .tox-tbtn:hover, + .tox-split-button:hover, + .tox-tbtn.tox-tbtn--enabled:hover, + .tox-split-button .tox-tbtn.tox-split-button__chevron:hover { + background-color: fadeout(@surface0, 50%); + color: fadeout(@text, 20%); + svg { + fill: fadeout(@text, 20%); + } + } + .tox-tbtn.tox-tbtn--enabled::after { + color: @accent; + } + + .tox-mbtn:hover:not(:disabled), + .tox-mbtn:hover:not(:disabled, .tox-mbtn--active) { + background-color: @hover-button; + } + .tox-mbtn--active { + background-color: @hover-button; + } + + .tox-toolbar, + .tox-toolbar__overflow, + .tox-toolbar__primary, + .tox-editor-header, + .tox-menubar, + .tox-menubar__primary, + .tox-menubar-overlord { + background-color: @base; + } + .tox-pop { + &::after { + border-bottom-color: @surface0; + } + .tox-pop__dialog { + background-color: @surface0; + } + } + .tox-toolbar__group::after { + border-color: @surface2; + } + svg, + #Fill-1, + .tox-icon g { + fill: @text; + } + button[title="Embed Lucid Document"] image { + /* @svg: escape(' */ + /* */ + /* '); */ + /* content: url("data:image/svg+xml,@{svg}"); */ + filter: invert(100%); + } + button[title="Embed"] svg path { + fill: @text; + } + .tox-menu { + background-color: @surface0; + border-color: @surface1; + .tox-collection__item { + color: @text; + } + } + .tox-mbtn:focus:not(:disabled) { + box-shadow: 0 0 0 2px @accent; + } + .tox-collection--list .tox-collection__group { + border-color: @surface1; + } + .tox-collection--list + .tox-collection__item--active:not( + .tox-collection__item--state-disabled + ), + .tox-collection__item--active { + background-color: mix(@accent, @base, 30%); + } + } + .canvas-rce__skins--root { + background-color: @base; + } + + #rubrics { + .rubric_title { + background-color: @surface0; + border-color: @surface1; + } + .rubric_container { + thead th { + background-color: @surface0; + border-color: @surface1; + } + table.ratings td { + border-color: @surface1; + } + } + } + + .ui-tabs { + .ui-tabs-panel, + .ui-tabs-nav { + border-color: @surface1; + } + .ui-tabs-nav li.ui-state-hover, + .ui-tabs-nav li:hover, + .ui-tabs-nav li.ui-tabs-active, + .ui-tabs-nav li.ui-tabs-active.ui-state-hover, + .ui-tabs-nav li.ui-tabs-active:hover { + background-color: @base; + border-color: @surface1; + a { + color: @text; + } + } + + .ui-state-hover { + background-color: mix(@overlay2, @surface1, 20%); + } + .ui-tabs-panel { + background-color: @base; + } + #assignments { + tr .title { + border-color: @surface1; + } + } + } + + /* discussions */ + .headerBar { + background: @surface0; + border-color: @surface1; + } + .alert-info { + background-color: fadeout(#e5f2f8, 80%); + color: @blue; + * { + color: @blue; + } + } + .topic .entry-content { + border-color: @surface1; + } + .new-and-total-badge .new-items { + color: @base; + } + .discussion_entry > .discussion-entry-reply-area { + border-color: @surface1; + } + .discussion-reply-box { + background-color: @surface0; + border-color: @surface1; + } + .al-options { + background-color: @surface0; + border-color: @surface1; + } + + .ic-discussion-row, + .pinned-discussions-v2__wrapper, + .unpinned-discussions-v2__wrapper, + .discussions-v2__container-image, + .closed-for-comments-discussions-v2__wrapper { + border-color: @surface1; + background-color: @base; + } + .discussions-v2__container-image { + color: @text; + } + .ic-discussion-row { + box-shadow: -1px -1px @surface1, inset -1px -1px @surface1; + } + .discussion-entries { + background-color: @base; + .discussion_entry, + .toolbarView, + .entry { + background-color: @base; + border-color: @surface1; + .entry-content { + background-color: @base; + } + } + time { + color: @subtext0; + } + } + + /* new discussion redesign */ + .discussion-redesign-layout { + div[data-drawer-content^="DrawerLayout"] { + /* the header with the search bar */ + & > span > div:first-child { + background-color: @base; + } + } + div[data-testid="discussion-topic-container"] > span > div { + border-color: @surface1; + } + .discussion-post-manage-discussion path { + color: @text; + } + } + .communication_message { + border-color: @surface1; + } + .communication_message div.header { + color: @subtext0; + } + span:has(> [data-testid="DiscussionEdit-container"]) { + background-color: @base; + } + [data-testid="RCEStatusBar"] { + color: @subtext0; + /* .css-1kjxjg4-view--inlineBlock-baseButton */ + button > span { + color: @text; + } + button:hover > span { + background-color: fadeout(@surface0, 50%); + } + > span > div { + border-color: @surface1 !important; + } + } + button[data-testid="attach-btn"] > span { + color: @text; + } + .ic-discussion-content-container > span > span:last-child { + color: @text; + } + .discussions-container__wrapper [class$="summaryText"] { + color: @text; + } + .ic-unread-badge__total-count, + .ic-unread-badge__unread-count { + color: @mantle; + } + hr[data-testid="post-separator"] { + border-color: @surface1 !important; + } + + /* author profile picture placeholder */ + [data-testid="author_avatar"] { + background-color: @surface0; + border-color: @overlay2; + span { + color: @accent; + } + } + /* unread badges */ + .unread_dot, + #grades_summary .unread_dot, + [data-testid="is-unread"] [class$="badge"] { + background-color: @accent; + } + + /* Enhanced Assigments UI */ + + #assignments-student-footer { + background-color: @mantle !important; + border-top-color: @surface1 !important; + + #submit-button > span { + background-color: @accent; + color: @crust; + } + } + + /* Assignment status green text and circle */ + [color="success"] { + color: @green; + } + + [class*="progressCircle__track"] { + stroke: @surface1 !important; + } + [class*="progressCircle__meter"] { + stroke: @green !important; + } + + /* Upload files button */ + .submission-type-icon-contents { + &:has(svg[name="IconUpload"]) { + background-color: @accent; + + svg[name="IconUpload"] { + fill: @crust !important; + } + } + + border-color: @accent; + + &:has(svg[name="IconMore"]) { + background-color: @base; + + svg[name="IconMore"] { + fill: @accent !important; + } + } + } + [color="primary-inverse"] { + color: @crust; + } + + /* Upload files panel */ + [style*="background-color: rgb(245, 245, 245);"] { + background-color: @surface0 !important; + } + div[style]:has(> div > [data-testid="upload-pane"]) { + border-top-color: @surface2 !important; + + label[for="inputFileDrop"] { + [class*="fileDrop__labelContent"] { + border-color: @overlay1; + } + div:has(> [class*="-screenReaderContent"]) { + background-color: @base; + } + } + + div:has(> [class*="block-baseButton"]) { + background-color: @base; + border-color: @surface1; + [class*="block-baseButton"]:hover > [class$="-baseButton__content"] { + background-color: @surface0; + } + + img { + filter: @text-filter; + } + svg[name="IconFolder"] { + color: @text; + } + } + } + + /* GRADES */ + .ic-Table th { + border-color: @surface2; + } + .ic-Table.ic-Table--hover-row tbody tr { + &:hover, + &.ic-Table__row--bg-neutral:hover, + &.ic-Table__row--bg-success:hover, + &.ic-Table__row--bg-alert:hover, + &.ic-Table__row--bg-danger:hover { + background-color: @hover-accent; + } + } + .react-rubric * { + color: @text; + border-color: @surface1; + background-color: transparent; + } + .react-rubric .rating-tier.selected { + .meetsMasteryShader { + background-color: @green; + .triangle { + color: @green; + background-color: transparent; + } + } + .nearMasteryShader { + background-color: @yellow; + .triangle { + color: @yellow; + background-color: transparent; + } + } + .wellBelowMasteryShader { + background-color: @red; + .triangle { + color: @red; + background-color: transparent; + } + } + } + + #grades_summary { + th.title { + border-color: @surface1; + } + tr.final_grade { + border-color: @surface2; + } + } + + .ic-Form-control.ic-Form-control--checkbox .ic-Label::before { + @svg: escape( + '' + ); + background-image: url("data:image/svg+xml,@{svg}"); + background-color: @surface0; + border-color: @surface2; + } + .selected-assignment { + background-color: @hover-accent; + } + [data-id="submissions-comments-tray"] { + background-color: @mantle; + div:has(> a[class$="Button"]) { + color: @text; + background-color: @surface0; + } + } + + /* PEOPLE */ + .ic-Table.ic-Table--striped tbody tr:nth-child(odd) { + background-color: darken(@base, 3%); + } + + /* COURSE NOTIFICATIONS MENU */ + table[class$="view-table"], + table[class$="view-table"] :is(tr, th, td) { + background-color: @base; + } + thead > tr[class$="view-row"] { + border-color: @surface2; + } + .notifications tr > th span { + color: @text; + } + + /* SYLLABUS */ + #syllabus tr.date.related td, + #syllabus tr.date.related th, + #syllabus tr.date.selected td, + #syllabus tr.date.selected th { + background-color: @hover-accent; + } + #syllabus tr.date.date_passed td, + #syllabus tr.date.date_passed th { + background-color: darken(@base, 3%); + } + #syllabus tr.detail_list td.not_last { + border-color: @surface0; + } + .mini_calendar { + .day { + color: @subtext0; + } + .day.has_event { + background-color: @surface0; + } + .day.today { + background-color: mix(@red, @surface0, 10%); + } + } + .mini-cal-header { + border-color: @surface1; + } + + /* FILES */ + .ef-header, + .ef-directory-header, + .ef-footer, + .ef-main .ef-folder-content { + border-color: @surface1; + } + .ef-item-row:hover { + background-color: @hover-regular; + } + .ef-item-row.ef-item-selected { + background-color: @hover-regular; + } + .ef-file-preview-header { + color: @text; + background-color: fadeout(@crust, 0.1); + } + .ef-file-preview-header > * { + border-color: @surface1; + } + .ef-file-preview-button { + color: @subtext0 !important; + } + .ViewerControls { + background-color: @surface1; + } + .ViewerControls--current-page { + color: @text; + } + .AnnotationControlButton, + .AnnotationControlButton-outer { + background-color: @surface1; + border-color: @surface1; + } + .mimeClass-folder { + @svg: escape( + 'folder' + ); + background-image: url("data:image/svg+xml,@{svg}"); + } + + /* CHAT */ + /* this has terrible autogenerated css class names */ + .ctf-container > *, + .ctf-container { + background-color: @base; + } + .ctf-header, + .header-contents { + border-color: @surface1; + } + .header-contents span { + color: @text; + } + .ding-toggle { + label:has(svg[name="IconCheck"]) > span > span { + background-color: @green; + } + } + .ctf-message-input { + background-color: @base; + } + .ctf-message-input .ctf-message-input__wrapper { + background-color: @surface0; + border-color: @surface2; + input { + background-color: transparent; + } + } + + /* LOGIN PAGE */ + + .ic-flash-info, + .ic-flash-success, + .ic-flash-warning, + .ic-flash-error { + background-color: @surface0; + } + + /* ACCOUNT PAGE */ + th[class$="colHeader"] { + color: @text; + } + .feature-flag-wrapper { + tr span[class$="Text"] { + color: @text; + } + } + + /*************** */ + /* CREATOR SIDE */ + /*************** */ + /* not prioritized in this userstyle */ + + /* DASHBOARD */ + .unpublished_courses_redesign .ic-DashboardCard__box__header { + background-color: transparent; + border-color: @surface1; + } + /* MODULES */ + .module-publish-icon { + button > span { + background-color: transparent; + } + button:hover > span { + background-color: @hover-button; + } + } + .NewUserTutorialTray__Content > div > * { + border-color: @surface1; + } + .slick-header-column { + background-color: @surface0; + } + .slick-header-column.ui-state-default { + border-color: @surface1; + } + /* PAGES */ + button[class$="tag"] { + background-color: @surface0; + border-color: @surface1; + color: @text; + svg { + fill: @text; + } + } + + /* GRADEBOOK */ + .ui-state-default, + .ui-widget-header { + color: @subtext1; + } + #gradebook-assignment-search, + #gradebook-student-search { + label span { + color: @subtext1; + } + } + div[class$="view-tabs__container"] { + div[role="tabpanel"] > div { + background-color: transparent; + border-color: @surface1; + } + background-color: transparent; + } + div[role="tab"] { + color: @text; + &[aria-selected="true"]::after { + background-color: @accent; + } + } + + /* OUTCOMES */ + #outcome_management { + footer { + color: @text; + background-color: @base !important; + } + } + #management > div { + color: @subtext1; + } + .management-panel { + div[data-testid="outcome-group-container"] [class$="view"] { + border-color: @surface1; + } + svg { + fill: @text; + } + } + div[role="separator"] > div { + background-color: @surface0 !important; + } + span[class$="view-heading"], + h2, + h2 > span[class$="text"] { + color: @subtext1; + } + span[class$="billboard__message"], + h3, + h3 > span[class$="text"] { + color: @subtext0; + } + span[class$="billboard"] { + background-color: transparent; + } + + /* DISCUSSIONS */ + /* create discussion page */ + .discussions fieldset span:has(> button[data-testid="save-button"]) { + border-color: @surface1; + } + #manage-assign-to-container div[data-testid="item-assign-to-card"] { + border-color: @surface1; + } + + /* STUDIO */ + #settings_page_wrapper, + #collection_shared_content, + #collection_user_content { + background-color: @base; + span[role="contentinfo"] { + border-color: @surface1; + } + } + .CollectionShow__mediaListWrapper { + img { + background-color: transparent; + } + } + .DefaultLayout__main { + color: @text; + } + h1 { + color: @text; + } + #lti_media_picker { + nav { + background-color: @mantle; + border-block-end-color: @surface0; + } + ul a[class$="Button"] div { + color: @text; + } + li div[class$="topNavBarItem__container"]::after { + background-color: @surface1; + } + } + #media_upload_holder button img { + filter: invert(1); + } + span[class$="toggleDetails__summary"] > span { + color: @text; + } + div[class$="toggleDetails__details"] { + color: @text; + } + + /* ASSIGNMENT CREATION */ + .page-action-list a { + border-bottom-color: @surface1; + } + } +} + +/* deno-fmt-ignore */ +@catppuccin: { + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; +}; + +/* deno-fmt-ignore */ +@catppuccin-filters: { + @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; }; From 3943e00c94dad6a6f383ed73798b6c44ad86a6d9 Mon Sep 17 00:00:00 2001 From: pynappo Date: Sat, 1 Feb 2025 00:24:06 -0800 Subject: [PATCH 02/17] lint and remake preview --- styles/canvas-lms/catppuccin.user.less | 50 +++++++++++++------------- styles/canvas-lms/preview.webp | 4 +-- 2 files changed, 27 insertions(+), 27 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 0e35cba0eb..500cd6ee1a 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -67,14 +67,14 @@ --ic-brand-primary-darkened-28: darken(@accent, 10%); --ic-brand-primary-darkened-10: darken(@accent, 3%); --ic-brand-font-color-dark: @text; - --ic-brand-font-color-dark-lightened-15: fadeout(@text, 15%); + --ic-brand-font-color-dark-lightened-15: fade(@text, 85%); --ic-brand-font-color-dark-lightened-30: lighten(@text, 30%); --ic-link-color: @blue; - --ic-link-color-darkened-10: fadeout(@blue, 10%); + --ic-link-color-darkened-10: fade(@blue, 90%); --ic-link-color-lightened-10: lighten(@blue, 10%); /* hover colors, used based on whether canvas's css has a blue hover or grayed-out hover color */ - @hover-regular: fadeout(@surface2, 50%); + @hover-regular: fade(@surface2, 50%); @hover-accent: mix(@base, @accent, 70%); @hover-button: if( (@flavor = latte), @@ -219,7 +219,7 @@ /* fullscreen background for modal popups */ body > span > span[class*="mask"] { - background-color: fadeout(@overlay0, 25%); + background-color: fade(@overlay0, 75%); > span { color: @text; background-color: @base; @@ -254,7 +254,7 @@ border-color: @surface1; } .ui-widget-overlay { - background-color: fadeout(@base, 30%); + background-color: fade(@base, 70%); } .ui-dialog { .ui-dialog-titlebar { @@ -279,7 +279,7 @@ background-color: transparent; } .ic-app-header__menu-list-item.ic-app-header__menu-list-item--active { - & > * { + > * { background-color: @base; } .menu-item__text { @@ -834,7 +834,7 @@ h2 { border-color: @surface1; } - background-color: fadeout(@base, 70%); + background-color: fade(@base, 30%); .details .header { color: @subtext0; } @@ -844,7 +844,7 @@ } #right-side .events_list { p { - color: fadeout(@text, 20%); + color: fade(@text, 80%); } .event-details::after { @@ -858,7 +858,7 @@ background-color: @base; color: @text; border-color: @surface2; - & > h2 { + > h2 { border-color: @surface1; } } @@ -940,7 +940,7 @@ span { color: @text; } - & > span > span { + > span > span { background-color: @surface1; div[class$="separator"] { background-color: @surface2; @@ -1133,7 +1133,7 @@ color: @text; border-color: @surface1; .name { - text-shadow: 1px 1px 0 rgba(@base, 0.5); + text-shadow: 1px 1px 0 fade(@base, 50%); color: @text; } } @@ -1167,7 +1167,7 @@ } #show_by_date, #show_by_type { - & + label > span { + + label > span { color: @text; } &:checked + label > span { @@ -1320,10 +1320,10 @@ #inbox-conversation-holder > div > div > div { /* each email entry */ border-color: @surface2; - & div[style~="background-color:"] { + div[style~="background-color:"] { background-color: mix(@base, @accent, 90%) !important; } - & div[style~="box-shadow:"] { + div[style~="box-shadow:"] { box-shadow: @accent -4px 0 0 inset !important; } @@ -1425,7 +1425,7 @@ border-color: @surface2; } .alert { - background-color: fadeout(@red, 85%); + background-color: fade(@red, 15%); span { color: @red; } @@ -1572,18 +1572,18 @@ } .tox-tbtn:focus, .tox-split-button:focus { - background-color: fadeout(@overlay2, 50%); - color: fadeout(@text, 20%); - fill: fadeout(@text, 20%); + background-color: fade(@overlay2, 50%); + color: fade(@text, 80%); + fill: fade(@text, 80%); } .tox-tbtn:hover, .tox-split-button:hover, .tox-tbtn.tox-tbtn--enabled:hover, .tox-split-button .tox-tbtn.tox-split-button__chevron:hover { - background-color: fadeout(@surface0, 50%); - color: fadeout(@text, 20%); + background-color: fade(@surface0, 50%); + color: fade(@text, 80%); svg { - fill: fadeout(@text, 20%); + fill: fade(@text, 80%); } } .tox-tbtn.tox-tbtn--enabled::after { @@ -1710,7 +1710,7 @@ border-color: @surface1; } .alert-info { - background-color: fadeout(#e5f2f8, 80%); + background-color: fade(#e5f2f8, 20%); color: @blue; * { color: @blue; @@ -1768,7 +1768,7 @@ .discussion-redesign-layout { div[data-drawer-content^="DrawerLayout"] { /* the header with the search bar */ - & > span > div:first-child { + > span > div:first-child { background-color: @base; } } @@ -1795,7 +1795,7 @@ color: @text; } button:hover > span { - background-color: fadeout(@surface0, 50%); + background-color: fade(@surface0, 50%); } > span > div { border-color: @surface1 !important; @@ -2044,7 +2044,7 @@ } .ef-file-preview-header { color: @text; - background-color: fadeout(@crust, 0.1); + background-color: fade(@crust, 90%); } .ef-file-preview-header > * { border-color: @surface1; diff --git a/styles/canvas-lms/preview.webp b/styles/canvas-lms/preview.webp index 7164f62165..5eae76bae6 100644 --- a/styles/canvas-lms/preview.webp +++ b/styles/canvas-lms/preview.webp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1a1985cf2f2066fc5ef3ff25b78d0878fb5916c343d4cb74f9e5d5ff9c1cb420 -size 104552 +oid sha256:71d51ba5cb772896908528b60c21c4195a54e3427a030cb9b05c1090da446a13 +size 223854 From c4f1b3b65c766547431e6a52d28b44597de70fc6 Mon Sep 17 00:00:00 2001 From: pynappo Date: Sat, 1 Feb 2025 15:29:25 -0800 Subject: [PATCH 03/17] retake preview --- styles/canvas-lms/preview.webp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/canvas-lms/preview.webp b/styles/canvas-lms/preview.webp index 5eae76bae6..e6d85e1229 100644 --- a/styles/canvas-lms/preview.webp +++ b/styles/canvas-lms/preview.webp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:71d51ba5cb772896908528b60c21c4195a54e3427a030cb9b05c1090da446a13 -size 223854 +oid sha256:712e2ed015cf003ec71dd63f750769703e9dcb84b64f62cdee5a1b3a54dd62f4 +size 199890 From 25ffb191375594ad4f4795d654188352117601e2 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 4 Feb 2025 19:15:47 -0800 Subject: [PATCH 04/17] style quiz correct markers --- styles/canvas-lms/catppuccin.user.less | 56 ++++++++++++++++---------- 1 file changed, 35 insertions(+), 21 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 500cd6ee1a..cc8e335740 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -57,6 +57,7 @@ @accent: @catppuccin[@@flavor][@@accentColor]; @text-filter: @catppuccin-filters[@@flavor][@text]; + @green-filter: @catppuccin-filters[@@flavor][@green]; @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; color-scheme: if(@flavor = latte, light, dark); @@ -395,6 +396,30 @@ } /* filled-in buttons - this auto-generated class covers a lot of them */ + .neutral-button() { + + &:hover { + background-color: @hover-button; + > [class$="baseButton__content"] { + background-color: @hover-button; + } + color: @text; + } + color: @text; + background-color: @surface0; + border-color: @surface1; + path[fill="#000000"] { + fill: @text; + } + > [class$="baseButton__content"] { + color: @text; + background-color: @surface0; + border-color: @surface1; + } + [class$="text"] { + color: @text; + } + } .css-1rpus1y-baseButton__content { transition-property: background, transform, filter; border-color: @surface2; @@ -418,27 +443,7 @@ .searchButton__container button, a:has(.css-1rpus1y-baseButton__content), button:has(.css-1rpus1y-baseButton__content) { - &:hover { - background-color: @hover-button; - > [class$="baseButton__content"] { - background-color: @hover-button; - } - color: @text; - } - color: @text; - background-color: @surface0; - border-color: @surface1; - path[fill="#000000"] { - fill: @text; - } - > [class$="baseButton__content"] { - color: @text; - background-color: @surface0; - border-color: @surface1; - } - [class$="text"] { - color: @text; - } + .neutral-button() } /* the below styles are taken from canvas's common css sheet */ @@ -1418,6 +1423,15 @@ border-color: @surface2; } } + .answer_arrow.correct { + color: @mantle; + background-image: none; + background-color: @green; + text-shadow: none; + &::after { + filter: @green-filter; + } + } .muted-notice { background-color: @surface0; background-image: linear-gradient(to bottom, @base, @surface0); From 8eb6af654637c45a8af75c1349bd88ac299c559c Mon Sep 17 00:00:00 2001 From: pynappo Date: Thu, 6 Feb 2025 22:05:56 -0800 Subject: [PATCH 05/17] fix preview --- styles/canvas-lms/preview.webp | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/canvas-lms/preview.webp b/styles/canvas-lms/preview.webp index e6d85e1229..c2b73a166a 100644 --- a/styles/canvas-lms/preview.webp +++ b/styles/canvas-lms/preview.webp @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:712e2ed015cf003ec71dd63f750769703e9dcb84b64f62cdee5a1b3a54dd62f4 -size 199890 +oid sha256:8599b6758eb5b93229300e183c3f3ed20dc1f66591184177e082c29242e6c93e +size 197912 From 9f65db68408c5fe2e44392e6ccb42dec4225a805 Mon Sep 17 00:00:00 2001 From: pynappo Date: Thu, 13 Feb 2025 16:21:38 -0800 Subject: [PATCH 06/17] update filters --- styles/canvas-lms/catppuccin.user.less | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index cc8e335740..29e4baf070 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -1543,20 +1543,17 @@ .comments { border-color: @surface1; background-color: @surface0; - /* mild hack to invert the media comment symbol */ + /* hack: to style only the background-image, we move the background-image to ::before and then tweak the styles */ a.media-comment { padding: 0; background-image: none; } a.media-comment::before { - background-repeat: no-repeat; - background-position: left center; - line-height: 20px; - padding: 6px 10px 6px 16px; + padding: 0 5px 0 0; display: inline-block; - content: ""; - filter: invert(100%); - background-image: url("/dist/images/audio_comment-eeb35d0efe.gif"); + transform: translateY(2px) !important; + content: url("/dist/images/audio_comment-eeb35d0efe.gif"); + filter: @text-filter; } } } @@ -1642,7 +1639,7 @@ /* */ /* '); */ /* content: url("data:image/svg+xml,@{svg}"); */ - filter: invert(100%); + filter: @text-filter; } button[title="Embed"] svg path { fill: @text; @@ -2272,7 +2269,7 @@ } } #media_upload_holder button img { - filter: invert(1); + filter: @text-filter; } span[class$="toggleDetails__summary"] > span { color: @text; From aca7882a1f3415242534eef91a99a3a330c06bd0 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 20:17:05 +0000 Subject: [PATCH 07/17] Update comment Co-authored-by: uncenter --- styles/canvas-lms/catppuccin.user.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 29e4baf070..5049c9fe72 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -1543,7 +1543,7 @@ .comments { border-color: @surface1; background-color: @surface0; - /* hack: to style only the background-image, we move the background-image to ::before and then tweak the styles */ + /* To style only the background-image, we move the background-image to ::before and then tweak the styles. */ a.media-comment { padding: 0; background-image: none; From fdc63eee27db9904c6ffb7e281dedc25c3fcb9f2 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 12:24:47 -0800 Subject: [PATCH 08/17] refactor, remove styleNavMenu --- styles/canvas-lms/catppuccin.user.less | 41 +++++++++++++------------- 1 file changed, 20 insertions(+), 21 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 5049c9fe72..b8f2bae154 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -13,8 +13,6 @@ @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] - -@var checkbox styleNavMenu "Style navigation menu" 1 ==/UserStyle== */ @-moz-document domain("instructure.com"), domain("instructuremedia.com") { @@ -62,6 +60,17 @@ color-scheme: if(@flavor = latte, light, dark); + ::selection { + background-color: fade(@accent, 30%); + } + + input, + textarea { + &::placeholder { + color: @subtext0 !important; + } + } + /* GLOBALS/VARIABLES */ --ic-brand-primary: @accent; --ic-brand-primary-lightened-15: lighten(@accent, 5%); @@ -292,21 +301,15 @@ --ic-brand-global-nav-menu-item__badge-text--active: @mantle; --ic-brand-global-nav-ic-icon-svg-fill--active: @accent; --ic-brand-global-nav-avatar-border: @text; - @navmenu: if( - @styleNavMenu = 1, - { - --ic-brand-global-nav-bgd: @mantle; - --ic-brand-global-nav-menu-item__badge-bgd: @surface2; - --ic-brand-global-nav-menu-item__badge-text: @text; - --ic-brand-global-nav-menu-item__text-color: @text; - --ic-brand-global-nav-ic-icon-svg-fill: @text; - .menu-item-icon-container path[fill] { - fill: @text !important; - } - }, - {} - ); - @navmenu(); + + --ic-brand-global-nav-bgd: @mantle; + --ic-brand-global-nav-menu-item__badge-bgd: @surface2; + --ic-brand-global-nav-menu-item__badge-text: @text; + --ic-brand-global-nav-menu-item__text-color: @text; + --ic-brand-global-nav-ic-icon-svg-fill: @text; + .menu-item-icon-container path[fill] { + fill: @text !important; + } /* sidebar trays (e.g. slide in from right side) */ body > span > [class*="tray"] { @@ -1043,10 +1046,6 @@ } } - /* selection */ - ::selection { - background-color: fade(@accent, 30%); - } /* use more noticeable color for file preview selection */ #App *::selection { background-color: @accent; From f3e3ff81f263dbd31110c397f876bc956c8ca3a0 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 13:18:53 -0800 Subject: [PATCH 09/17] refactor, fix active tox buttons, update @hover-button --- styles/canvas-lms/catppuccin.user.less | 408 ++++++++++++++++++++++--- 1 file changed, 360 insertions(+), 48 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index b8f2bae154..3911954bcb 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -56,6 +56,7 @@ @text-filter: @catppuccin-filters[@@flavor][@text]; @green-filter: @catppuccin-filters[@@flavor][@green]; + @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; color-scheme: if(@flavor = latte, light, dark); @@ -86,11 +87,7 @@ /* hover colors, used based on whether canvas's css has a blue hover or grayed-out hover color */ @hover-regular: fade(@surface2, 50%); @hover-accent: mix(@base, @accent, 70%); - @hover-button: if( - (@flavor = latte), - darken(@surface0, 5%), - lighten(@surface0, 5%) - ); + @hover-button: @surface1; /* GENERAL UI CHANGES */ @@ -128,10 +125,10 @@ border-color: @surface2; } img:not( - [src^="/"], - [src*="cloudfront.net/dist"], - [src*="instructuremedia.com/build"] - ) { + [src^="/"], + [src*="cloudfront.net/dist"], + [src*="instructuremedia.com/build"] + ) { /* force a white background for user-uploaded images */ background-color: #fffd; } @@ -400,7 +397,6 @@ /* filled-in buttons - this auto-generated class covers a lot of them */ .neutral-button() { - &:hover { background-color: @hover-button; > [class$="baseButton__content"] { @@ -446,7 +442,7 @@ .searchButton__container button, a:has(.css-1rpus1y-baseButton__content), button:has(.css-1rpus1y-baseButton__content) { - .neutral-button() + .neutral-button(); } /* the below styles are taken from canvas's common css sheet */ @@ -737,7 +733,9 @@ /* ANNOUNCEMENTS */ .ic-item-row { box-shadow: @surface1 0 -1px 0 0; - box-shadow: 0 -1px @surface1, inset 0 -1px @surface1; + box-shadow: + 0 -1px @surface1, + inset 0 -1px @surface1; } [data-testid="pill-container"] * { color: @subtext0 !important; @@ -888,8 +886,8 @@ /* popup menus */ /* extra selectors are to avoid styling tooltips because their arrows are hard to style */ span[data-position-content^="Menu"]:not( - [data-position-content^="Menu__label"] - ), + [data-position-content^="Menu__label"] + ), span[data-position-content^="Popover"] { span[class$="arrow"]::after { filter: @surface2-filter; @@ -911,8 +909,8 @@ /* color picker menu (e.g. on dashboard) */ span[data-position-content^="Popover"]:has( - div[class$="view-tabs__container"] - ) { + div[class$="view-tabs__container"] + ) { div[class$="view-tab"] { background-color: @surface1; border-bottom-color: @surface2; @@ -1014,8 +1012,8 @@ /* dropdown menu */ span[data-position-content^="Menu"]:not( - [data-position-content^="Menu__label"] - ) { + [data-position-content^="Menu__label"] + ) { span { color: @text; } @@ -1051,13 +1049,6 @@ background-color: @accent; } - input, - textarea { - &::placeholder { - color: @subtext0 !important; - } - } - /* ICONS */ .nav-icon { background-color: @base; @@ -1465,7 +1456,7 @@ color: @lavender; } li.marked { - /* for some reason canvas's css has left in quotes so this just patches that */ + /* canvas's css has left in quotes, this just fixes that */ background-position: left 3px top 7px; } li i { @@ -1482,7 +1473,7 @@ border-color: @surface1; &.marked .flag_question { /* the flag image is a png containing multiple flags so can't really svg it */ - filter: brightness(if((@flavor = latte), 100%, 130%)); + filter: @yellow-filter; } .header { background-color: @surface0; @@ -1586,14 +1577,17 @@ color: fade(@text, 80%); fill: fade(@text, 80%); } - .tox-tbtn:hover, - .tox-split-button:hover, - .tox-tbtn.tox-tbtn--enabled:hover, - .tox-split-button .tox-tbtn.tox-split-button__chevron:hover { - background-color: fade(@surface0, 50%); - color: fade(@text, 80%); - svg { - fill: fade(@text, 80%); + .tox-tbtn, + .tox-split-button, + .tox-tbtn.tox-tbtn--enabled, + .tox-split-button .tox-tbtn.tox-split-button__chevron { + &:hover, + &:active { + background-color: fade(@surface0, 50%); + color: fade(@text, 80%); + svg { + fill: fade(@text, 80%); + } } } .tox-tbtn.tox-tbtn--enabled::after { @@ -1634,10 +1628,6 @@ fill: @text; } button[title="Embed Lucid Document"] image { - /* @svg: escape(' */ - /* */ - /* '); */ - /* content: url("data:image/svg+xml,@{svg}"); */ filter: @text-filter; } button[title="Embed"] svg path { @@ -1756,7 +1746,9 @@ color: @text; } .ic-discussion-row { - box-shadow: -1px -1px @surface1, inset -1px -1px @surface1; + box-shadow: + -1px -1px @surface1, + inset -1px -1px @surface1; } .discussion-entries { background-color: @base; @@ -2286,16 +2278,336 @@ /* deno-fmt-ignore */ @catppuccin: { - @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; - @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; - @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; - @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; + @latte: { + @rosewater: #dc8a78; + @flamingo: #dd7878; + @pink: #ea76cb; + @mauve: #8839ef; + @red: #d20f39; + @maroon: #e64553; + @peach: #fe640b; + @yellow: #df8e1d; + @green: #40a02b; + @teal: #179299; + @sky: #04a5e5; + @sapphire: #209fb5; + @blue: #1e66f5; + @lavender: #7287fd; + @text: #4c4f69; + @subtext1: #5c5f77; + @subtext0: #6c6f85; + @overlay2: #7c7f93; + @overlay1: #8c8fa1; + @overlay0: #9ca0b0; + @surface2: #acb0be; + @surface1: #bcc0cc; + @surface0: #ccd0da; + @base: #eff1f5; + @mantle: #e6e9ef; + @crust: #dce0e8; + }; + @frappe: { + @rosewater: #f2d5cf; + @flamingo: #eebebe; + @pink: #f4b8e4; + @mauve: #ca9ee6; + @red: #e78284; + @maroon: #ea999c; + @peach: #ef9f76; + @yellow: #e5c890; + @green: #a6d189; + @teal: #81c8be; + @sky: #99d1db; + @sapphire: #85c1dc; + @blue: #8caaee; + @lavender: #babbf1; + @text: #c6d0f5; + @subtext1: #b5bfe2; + @subtext0: #a5adce; + @overlay2: #949cbb; + @overlay1: #838ba7; + @overlay0: #737994; + @surface2: #626880; + @surface1: #51576d; + @surface0: #414559; + @base: #303446; + @mantle: #292c3c; + @crust: #232634; + }; + @macchiato: { + @rosewater: #f4dbd6; + @flamingo: #f0c6c6; + @pink: #f5bde6; + @mauve: #c6a0f6; + @red: #ed8796; + @maroon: #ee99a0; + @peach: #f5a97f; + @yellow: #eed49f; + @green: #a6da95; + @teal: #8bd5ca; + @sky: #91d7e3; + @sapphire: #7dc4e4; + @blue: #8aadf4; + @lavender: #b7bdf8; + @text: #cad3f5; + @subtext1: #b8c0e0; + @subtext0: #a5adcb; + @overlay2: #939ab7; + @overlay1: #8087a2; + @overlay0: #6e738d; + @surface2: #5b6078; + @surface1: #494d64; + @surface0: #363a4f; + @base: #24273a; + @mantle: #1e2030; + @crust: #181926; + }; + @mocha: { + @rosewater: #f5e0dc; + @flamingo: #f2cdcd; + @pink: #f5c2e7; + @mauve: #cba6f7; + @red: #f38ba8; + @maroon: #eba0ac; + @peach: #fab387; + @yellow: #f9e2af; + @green: #a6e3a1; + @teal: #94e2d5; + @sky: #89dceb; + @sapphire: #74c7ec; + @blue: #89b4fa; + @lavender: #b4befe; + @text: #cdd6f4; + @subtext1: #bac2de; + @subtext0: #a6adc8; + @overlay2: #9399b2; + @overlay1: #7f849c; + @overlay0: #6c7086; + @surface2: #585b70; + @surface1: #45475a; + @surface0: #313244; + @base: #1e1e2e; + @mantle: #181825; + @crust: #11111b; + }; }; /* deno-fmt-ignore */ @catppuccin-filters: { - @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; - @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; - @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; - @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; + @latte: { + @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) + saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); + @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) + saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); + @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) + hue-rotate(266deg) brightness(93%) contrast(97%); + @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) + hue-rotate(255deg) brightness(94%) contrast(100%); + @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) + hue-rotate(342deg) brightness(84%) contrast(94%); + @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) + hue-rotate(331deg) brightness(99%) contrast(82%); + @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) + hue-rotate(356deg) brightness(103%) contrast(99%); + @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) + hue-rotate(354deg) brightness(95%) contrast(83%); + @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) + hue-rotate(76deg) brightness(95%) contrast(66%); + @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) + hue-rotate(139deg) brightness(100%) contrast(82%); + @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) + hue-rotate(166deg) brightness(99%) contrast(97%); + @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) + saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); + @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) + hue-rotate(209deg) brightness(94%) contrast(105%); + @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) + saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); + @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) + hue-rotate(196deg) brightness(97%) contrast(91%); + @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) + saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); + @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) + saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); + @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) + hue-rotate(195deg) brightness(83%) contrast(91%); + @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) + saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); + @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) + hue-rotate(191deg) brightness(77%) contrast(81%); + @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) + hue-rotate(189deg) brightness(82%) contrast(88%); + @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) + hue-rotate(187deg) brightness(92%) contrast(88%); + @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) + saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); + @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) + hue-rotate(182deg) brightness(109%) contrast(94%); + @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) + hue-rotate(182deg) brightness(98%) contrast(92%); + @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) + hue-rotate(196deg) brightness(106%) contrast(82%); + }; + @frappe: { + @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) + saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); + @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) + saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); + @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) + hue-rotate(280deg) brightness(107%) contrast(91%); + @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) + hue-rotate(225deg) brightness(94%) contrast(91%); + @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) + hue-rotate(305deg) brightness(91%) contrast(99%); + @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) + hue-rotate(307deg) brightness(109%) contrast(90%); + @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) + hue-rotate(335deg) brightness(96%) contrast(94%); + @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) + hue-rotate(309deg) brightness(105%) contrast(80%); + @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) + hue-rotate(42deg) brightness(87%) contrast(89%); + @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) + hue-rotate(110deg) brightness(85%) contrast(81%); + @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) + hue-rotate(141deg) brightness(109%) contrast(81%); + @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) + saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); + @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) + hue-rotate(185deg) brightness(96%) contrast(95%); + @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) + saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); + @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) + hue-rotate(191deg) brightness(98%) contrast(96%); + @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) + saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); + @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) + saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); + @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) + saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); + @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) + saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); + @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) + saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); + @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) + saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); + @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) + saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); + @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) + saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); + @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) + hue-rotate(192deg) brightness(96%) contrast(97%); + @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) + hue-rotate(198deg) brightness(88%) contrast(75%); + @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) + hue-rotate(197deg) brightness(86%) contrast(79%); + }; + @macchiato: { + @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) + saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); + @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) + saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); + @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) + hue-rotate(280deg) brightness(102%) contrast(92%); + @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) + hue-rotate(222deg) brightness(104%) contrast(93%); + @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) + hue-rotate(305deg) brightness(110%) contrast(86%); + @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) + hue-rotate(306deg) brightness(93%) contrast(101%); + @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) + hue-rotate(330deg) brightness(103%) contrast(92%); + @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) + hue-rotate(314deg) brightness(101%) contrast(87%); + @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) + hue-rotate(48deg) brightness(92%) contrast(85%); + @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) + hue-rotate(110deg) brightness(87%) contrast(90%); + @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) + hue-rotate(142deg) brightness(96%) contrast(84%); + @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) + saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); + @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) + hue-rotate(183deg) brightness(99%) contrast(94%); + @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) + saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); + @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) + hue-rotate(192deg) brightness(104%) contrast(92%); + @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) + saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); + @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) + saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); + @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) + hue-rotate(191deg) brightness(92%) contrast(88%); + @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) + saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); + @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) + saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); + @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) + saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); + @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) + saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); + @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) + saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); + @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) + hue-rotate(194deg) brightness(90%) contrast(90%); + @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) + hue-rotate(200deg) brightness(93%) contrast(85%); + @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) + hue-rotate(202deg) brightness(98%) contrast(88%); + }; + @mocha: { + @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) + saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); + @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) + hue-rotate(315deg) brightness(107%) contrast(90%); + @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) + hue-rotate(283deg) brightness(101%) contrast(92%); + @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) + hue-rotate(224deg) brightness(96%) contrast(102%); + @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) + hue-rotate(294deg) brightness(104%) contrast(91%); + @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) + hue-rotate(306deg) brightness(116%) contrast(84%); + @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) + hue-rotate(338deg) brightness(98%) contrast(101%); + @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) + hue-rotate(313deg) brightness(102%) contrast(95%); + @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) + hue-rotate(63deg) brightness(104%) contrast(78%); + @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) + hue-rotate(108deg) brightness(93%) contrast(90%); + @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) + hue-rotate(164deg) brightness(106%) contrast(84%); + @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) + saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); + @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) + hue-rotate(180deg) brightness(98%) contrast(100%); + @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) + saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); + @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) + hue-rotate(190deg) brightness(100%) contrast(93%); + @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) + saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); + @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) + hue-rotate(192deg) brightness(84%) contrast(84%); + @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) + saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); + @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) + saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); + @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) + saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); + @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) + saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); + @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) + saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); + @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) + saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); + @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) + hue-rotate(202deg) brightness(93%) contrast(87%); + @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) + hue-rotate(202deg) brightness(95%) contrast(90%); + @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) + hue-rotate(220deg) brightness(95%) contrast(91%); + }; }; From 9d93e9506e638a9c4271747717f7d38fe894a884 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 14:01:17 -0800 Subject: [PATCH 10/17] revert accidental format --- styles/canvas-lms/catppuccin.user.less | 336 +------------------------ 1 file changed, 8 insertions(+), 328 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 3911954bcb..0cdb3baf6f 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -2278,336 +2278,16 @@ /* deno-fmt-ignore */ @catppuccin: { - @latte: { - @rosewater: #dc8a78; - @flamingo: #dd7878; - @pink: #ea76cb; - @mauve: #8839ef; - @red: #d20f39; - @maroon: #e64553; - @peach: #fe640b; - @yellow: #df8e1d; - @green: #40a02b; - @teal: #179299; - @sky: #04a5e5; - @sapphire: #209fb5; - @blue: #1e66f5; - @lavender: #7287fd; - @text: #4c4f69; - @subtext1: #5c5f77; - @subtext0: #6c6f85; - @overlay2: #7c7f93; - @overlay1: #8c8fa1; - @overlay0: #9ca0b0; - @surface2: #acb0be; - @surface1: #bcc0cc; - @surface0: #ccd0da; - @base: #eff1f5; - @mantle: #e6e9ef; - @crust: #dce0e8; - }; - @frappe: { - @rosewater: #f2d5cf; - @flamingo: #eebebe; - @pink: #f4b8e4; - @mauve: #ca9ee6; - @red: #e78284; - @maroon: #ea999c; - @peach: #ef9f76; - @yellow: #e5c890; - @green: #a6d189; - @teal: #81c8be; - @sky: #99d1db; - @sapphire: #85c1dc; - @blue: #8caaee; - @lavender: #babbf1; - @text: #c6d0f5; - @subtext1: #b5bfe2; - @subtext0: #a5adce; - @overlay2: #949cbb; - @overlay1: #838ba7; - @overlay0: #737994; - @surface2: #626880; - @surface1: #51576d; - @surface0: #414559; - @base: #303446; - @mantle: #292c3c; - @crust: #232634; - }; - @macchiato: { - @rosewater: #f4dbd6; - @flamingo: #f0c6c6; - @pink: #f5bde6; - @mauve: #c6a0f6; - @red: #ed8796; - @maroon: #ee99a0; - @peach: #f5a97f; - @yellow: #eed49f; - @green: #a6da95; - @teal: #8bd5ca; - @sky: #91d7e3; - @sapphire: #7dc4e4; - @blue: #8aadf4; - @lavender: #b7bdf8; - @text: #cad3f5; - @subtext1: #b8c0e0; - @subtext0: #a5adcb; - @overlay2: #939ab7; - @overlay1: #8087a2; - @overlay0: #6e738d; - @surface2: #5b6078; - @surface1: #494d64; - @surface0: #363a4f; - @base: #24273a; - @mantle: #1e2030; - @crust: #181926; - }; - @mocha: { - @rosewater: #f5e0dc; - @flamingo: #f2cdcd; - @pink: #f5c2e7; - @mauve: #cba6f7; - @red: #f38ba8; - @maroon: #eba0ac; - @peach: #fab387; - @yellow: #f9e2af; - @green: #a6e3a1; - @teal: #94e2d5; - @sky: #89dceb; - @sapphire: #74c7ec; - @blue: #89b4fa; - @lavender: #b4befe; - @text: #cdd6f4; - @subtext1: #bac2de; - @subtext0: #a6adc8; - @overlay2: #9399b2; - @overlay1: #7f849c; - @overlay0: #6c7086; - @surface2: #585b70; - @surface1: #45475a; - @surface0: #313244; - @base: #1e1e2e; - @mantle: #181825; - @crust: #11111b; - }; + @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; + @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; + @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; + @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; }; /* deno-fmt-ignore */ @catppuccin-filters: { - @latte: { - @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) - saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); - @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) - saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); - @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) - hue-rotate(266deg) brightness(93%) contrast(97%); - @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) - hue-rotate(255deg) brightness(94%) contrast(100%); - @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) - hue-rotate(342deg) brightness(84%) contrast(94%); - @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) - hue-rotate(331deg) brightness(99%) contrast(82%); - @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) - hue-rotate(356deg) brightness(103%) contrast(99%); - @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) - hue-rotate(354deg) brightness(95%) contrast(83%); - @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) - hue-rotate(76deg) brightness(95%) contrast(66%); - @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) - hue-rotate(139deg) brightness(100%) contrast(82%); - @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) - hue-rotate(166deg) brightness(99%) contrast(97%); - @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) - saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); - @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) - hue-rotate(209deg) brightness(94%) contrast(105%); - @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) - saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); - @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) - hue-rotate(196deg) brightness(97%) contrast(91%); - @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) - saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); - @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) - saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); - @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) - hue-rotate(195deg) brightness(83%) contrast(91%); - @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) - saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); - @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) - hue-rotate(191deg) brightness(77%) contrast(81%); - @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) - hue-rotate(189deg) brightness(82%) contrast(88%); - @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) - hue-rotate(187deg) brightness(92%) contrast(88%); - @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) - saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); - @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) - hue-rotate(182deg) brightness(109%) contrast(94%); - @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) - hue-rotate(182deg) brightness(98%) contrast(92%); - @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) - hue-rotate(196deg) brightness(106%) contrast(82%); - }; - @frappe: { - @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) - saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); - @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) - saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); - @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) - hue-rotate(280deg) brightness(107%) contrast(91%); - @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) - hue-rotate(225deg) brightness(94%) contrast(91%); - @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) - hue-rotate(305deg) brightness(91%) contrast(99%); - @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) - hue-rotate(307deg) brightness(109%) contrast(90%); - @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) - hue-rotate(335deg) brightness(96%) contrast(94%); - @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) - hue-rotate(309deg) brightness(105%) contrast(80%); - @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) - hue-rotate(42deg) brightness(87%) contrast(89%); - @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) - hue-rotate(110deg) brightness(85%) contrast(81%); - @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) - hue-rotate(141deg) brightness(109%) contrast(81%); - @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) - saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); - @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) - hue-rotate(185deg) brightness(96%) contrast(95%); - @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) - saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); - @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) - hue-rotate(191deg) brightness(98%) contrast(96%); - @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) - saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); - @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) - saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); - @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) - saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); - @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) - saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); - @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) - saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); - @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) - saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); - @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) - saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); - @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) - saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); - @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) - hue-rotate(192deg) brightness(96%) contrast(97%); - @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) - hue-rotate(198deg) brightness(88%) contrast(75%); - @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) - hue-rotate(197deg) brightness(86%) contrast(79%); - }; - @macchiato: { - @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) - saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); - @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) - saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); - @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) - hue-rotate(280deg) brightness(102%) contrast(92%); - @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) - hue-rotate(222deg) brightness(104%) contrast(93%); - @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) - hue-rotate(305deg) brightness(110%) contrast(86%); - @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) - hue-rotate(306deg) brightness(93%) contrast(101%); - @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) - hue-rotate(330deg) brightness(103%) contrast(92%); - @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) - hue-rotate(314deg) brightness(101%) contrast(87%); - @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) - hue-rotate(48deg) brightness(92%) contrast(85%); - @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) - hue-rotate(110deg) brightness(87%) contrast(90%); - @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) - hue-rotate(142deg) brightness(96%) contrast(84%); - @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) - saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); - @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) - hue-rotate(183deg) brightness(99%) contrast(94%); - @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) - saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); - @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) - hue-rotate(192deg) brightness(104%) contrast(92%); - @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) - saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); - @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) - saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); - @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) - hue-rotate(191deg) brightness(92%) contrast(88%); - @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) - saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); - @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) - saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); - @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) - saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); - @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) - saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); - @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) - saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); - @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) - hue-rotate(194deg) brightness(90%) contrast(90%); - @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) - hue-rotate(200deg) brightness(93%) contrast(85%); - @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) - hue-rotate(202deg) brightness(98%) contrast(88%); - }; - @mocha: { - @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) - saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); - @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) - hue-rotate(315deg) brightness(107%) contrast(90%); - @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) - hue-rotate(283deg) brightness(101%) contrast(92%); - @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) - hue-rotate(224deg) brightness(96%) contrast(102%); - @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) - hue-rotate(294deg) brightness(104%) contrast(91%); - @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) - hue-rotate(306deg) brightness(116%) contrast(84%); - @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) - hue-rotate(338deg) brightness(98%) contrast(101%); - @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) - hue-rotate(313deg) brightness(102%) contrast(95%); - @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) - hue-rotate(63deg) brightness(104%) contrast(78%); - @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) - hue-rotate(108deg) brightness(93%) contrast(90%); - @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) - hue-rotate(164deg) brightness(106%) contrast(84%); - @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) - saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); - @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) - hue-rotate(180deg) brightness(98%) contrast(100%); - @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) - saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); - @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) - hue-rotate(190deg) brightness(100%) contrast(93%); - @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) - saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); - @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) - hue-rotate(192deg) brightness(84%) contrast(84%); - @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) - saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); - @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) - saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); - @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) - saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); - @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) - saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); - @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) - saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); - @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) - saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); - @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) - hue-rotate(202deg) brightness(93%) contrast(87%); - @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) - hue-rotate(202deg) brightness(95%) contrast(90%); - @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) - hue-rotate(220deg) brightness(95%) contrast(91%); - }; + @latte: { @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%); @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%) saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%); @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%) hue-rotate(266deg) brightness(93%) contrast(97%); @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%) hue-rotate(255deg) brightness(94%) contrast(100%); @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%) hue-rotate(342deg) brightness(84%) contrast(94%); @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%) hue-rotate(331deg) brightness(99%) contrast(82%); @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%) hue-rotate(356deg) brightness(103%) contrast(99%); @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%) hue-rotate(354deg) brightness(95%) contrast(83%); @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%) hue-rotate(76deg) brightness(95%) contrast(66%); @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%) hue-rotate(139deg) brightness(100%) contrast(82%); @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%) hue-rotate(166deg) brightness(99%) contrast(97%); @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%) saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%); @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%) hue-rotate(209deg) brightness(94%) contrast(105%); @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%) saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%); @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%) hue-rotate(196deg) brightness(97%) contrast(91%); @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%) saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%); @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%) saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%); @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%) hue-rotate(195deg) brightness(83%) contrast(91%); @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%) saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%); @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%) hue-rotate(191deg) brightness(77%) contrast(81%); @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%) hue-rotate(189deg) brightness(82%) contrast(88%); @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%) hue-rotate(187deg) brightness(92%) contrast(88%); @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%) saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%); @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%) hue-rotate(182deg) brightness(109%) contrast(94%); @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%) hue-rotate(182deg) brightness(98%) contrast(92%); @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%) hue-rotate(196deg) brightness(106%) contrast(82%); }; + @frappe: { @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%); @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%) saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%); @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%) hue-rotate(280deg) brightness(107%) contrast(91%); @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%) hue-rotate(225deg) brightness(94%) contrast(91%); @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%) hue-rotate(305deg) brightness(91%) contrast(99%); @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%) hue-rotate(307deg) brightness(109%) contrast(90%); @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%) hue-rotate(335deg) brightness(96%) contrast(94%); @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%) hue-rotate(309deg) brightness(105%) contrast(80%); @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%) hue-rotate(42deg) brightness(87%) contrast(89%); @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%) hue-rotate(110deg) brightness(85%) contrast(81%); @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%) hue-rotate(141deg) brightness(109%) contrast(81%); @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%) saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%); @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%) hue-rotate(185deg) brightness(96%) contrast(95%); @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%) saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%); @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%) hue-rotate(191deg) brightness(98%) contrast(96%); @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%) saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%); @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%) saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%); @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%) saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%); @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%) saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%); @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%) saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%) saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%); @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%) saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%); @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%) saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%); @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%) hue-rotate(192deg) brightness(96%) contrast(97%); @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%) hue-rotate(198deg) brightness(88%) contrast(75%); @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%) hue-rotate(197deg) brightness(86%) contrast(79%); }; + @macchiato: { @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%) saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%); @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%) saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%); @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%) hue-rotate(280deg) brightness(102%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%) hue-rotate(222deg) brightness(104%) contrast(93%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%) hue-rotate(305deg) brightness(110%) contrast(86%); @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%) hue-rotate(306deg) brightness(93%) contrast(101%); @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%) hue-rotate(330deg) brightness(103%) contrast(92%); @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%) hue-rotate(314deg) brightness(101%) contrast(87%); @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%) hue-rotate(48deg) brightness(92%) contrast(85%); @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%) hue-rotate(110deg) brightness(87%) contrast(90%); @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%) hue-rotate(142deg) brightness(96%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%) saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%); @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%) hue-rotate(183deg) brightness(99%) contrast(94%); @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%); @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%); @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%) saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%); @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%) hue-rotate(191deg) brightness(92%) contrast(88%); @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%) saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%); @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%) saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%) saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%); @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%) saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%); @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%) saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%); @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%) hue-rotate(194deg) brightness(90%) contrast(90%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%) hue-rotate(200deg) brightness(93%) contrast(85%); @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%) hue-rotate(202deg) brightness(98%) contrast(88%); }; + @mocha: { @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%) saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%); @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%) hue-rotate(315deg) brightness(107%) contrast(90%); @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%) hue-rotate(283deg) brightness(101%) contrast(92%); @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%) hue-rotate(224deg) brightness(96%) contrast(102%); @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%) hue-rotate(294deg) brightness(104%) contrast(91%); @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%) hue-rotate(306deg) brightness(116%) contrast(84%); @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%) hue-rotate(338deg) brightness(98%) contrast(101%); @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%) hue-rotate(313deg) brightness(102%) contrast(95%); @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%) hue-rotate(63deg) brightness(104%) contrast(78%); @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%) hue-rotate(108deg) brightness(93%) contrast(90%); @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%) hue-rotate(164deg) brightness(106%) contrast(84%); @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%) saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%); @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%) hue-rotate(180deg) brightness(98%) contrast(100%); @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%) saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%); @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%) hue-rotate(190deg) brightness(100%) contrast(93%); @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%) saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%); @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%) hue-rotate(192deg) brightness(84%) contrast(84%); @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%) saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%); @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%) saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%); @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%) saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%); @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%) saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%); @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%) saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%); @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%) saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%); @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%) hue-rotate(202deg) brightness(93%) contrast(87%); @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%) hue-rotate(202deg) brightness(95%) contrast(90%); @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%) hue-rotate(220deg) brightness(95%) contrast(91%); }; }; From d5f235593a32c60bb9509686b42fdcb7ac4c39cb Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 14:03:48 -0800 Subject: [PATCH 11/17] style question flags with filters --- styles/canvas-lms/catppuccin.user.less | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 0cdb3baf6f..20eb1657fb 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -55,6 +55,7 @@ @accent: @catppuccin[@@flavor][@@accentColor]; @text-filter: @catppuccin-filters[@@flavor][@text]; + @blue-filter: @catppuccin-filters[@@flavor][@blue]; @green-filter: @catppuccin-filters[@@flavor][@green]; @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; @surface2-filter: @catppuccin-filters[@@flavor][@surface2]; @@ -1456,8 +1457,12 @@ color: @lavender; } li.marked { - /* canvas's css has left in quotes, this just fixes that */ - background-position: left 3px top 7px; + &::before { + content: url("/dist/images/flagged_question-e2565888dd.png"); + filter: @yellow-filter; + } + padding-left: 6px; + background-image: none; } li i { /* question mark icons */ @@ -1471,8 +1476,10 @@ } .question { border-color: @surface1; + .flag_question { + filter: @blue-filter; + } &.marked .flag_question { - /* the flag image is a png containing multiple flags so can't really svg it */ filter: @yellow-filter; } .header { From 0d2b77f1809e6a8c1fa4af93ec395bd3ab75a3a2 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 14:18:10 -0800 Subject: [PATCH 12/17] style inbox compose dialog --- styles/canvas-lms/catppuccin.user.less | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 20eb1657fb..f38bfd6ba5 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -1045,6 +1045,16 @@ } } + ul[role="menu"] { + div:has(> li[role="menuitem"][data-selected="true"]) { + color: @base; + background-color: @accent !important; + span { + color: @base; + } + } + } + /* use more noticeable color for file preview selection */ #App *::selection { background-color: @accent; From b567daa4c7051543cbc65634fbceeaac643cd0f7 Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 14:23:00 -0800 Subject: [PATCH 13/17] Use more fitting nav tray color --- styles/canvas-lms/catppuccin.user.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index f38bfd6ba5..3ca9087cf9 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -330,7 +330,7 @@ #nav-tray-portal { > span > span { - background-color: @mantle; + background-color: @base; [class$="listItem"] { color: @subtext0; } @@ -346,7 +346,7 @@ color: @text; } .help-tray li [class$="pill"] { - /* just new pill */ + /* new pill */ border-color: @green; color: @green; background-color: transparent; From ed781e03b010bc8e85d3768f98ce74dd7c027b5a Mon Sep 17 00:00:00 2001 From: pynappo Date: Tue, 18 Feb 2025 14:50:20 -0800 Subject: [PATCH 14/17] update button styles --- styles/canvas-lms/catppuccin.user.less | 28 ++++++++++++-------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 3ca9087cf9..d0831f0296 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -415,17 +415,12 @@ color: @text; background-color: @surface0; border-color: @surface1; + transition-property: background, transform, filter; } [class$="text"] { color: @text; } } - .css-1rpus1y-baseButton__content { - transition-property: background, transform, filter; - border-color: @surface2; - background-color: @surface0; - color: @text; - } .PlannerItem-styles__secondary button, .discussions-index-manage-menu > button, @@ -630,11 +625,7 @@ border-color: @accent; } - #apply_select_menus, - #ColorPicker__Apply, - .ActionButtons button[id^="Drilldown"], - a:has(.css-10t1mdw-baseButton__content), - button:has(.css-10t1mdw-baseButton__content) { + .accent-button() { &:disabled { filter: brightness(85%); } @@ -643,19 +634,26 @@ filter: brightness(115%); } } - background-color: darken(@accent, 20%); + background-color: @accent; border-color: @surface1; path[fill="#000000"] { - fill: @text; + fill: @mantle; } > [class$="baseButton__content"] { transition-property: all; - /* color: @text; */ - background-color: darken(@accent, 20%); + color: @mantle; + background-color: @accent; border-color: @surface1; } } + #apply_select_menus, + #ColorPicker__Apply, + .ActionButtons button[id^="Drilldown"], + #send-message-button { + .accent-button(); + } + .Button--icon-action, .Button--icon-action-rev { background-color: transparent; From a294ebc62b19e84047e249f67cfba46aae281e31 Mon Sep 17 00:00:00 2001 From: pynappo Date: Mon, 3 Mar 2025 13:40:57 -0800 Subject: [PATCH 15/17] fix answer arrows, format --- styles/canvas-lms/catppuccin.user.less | 56 +++++++++++++++++--------- 1 file changed, 37 insertions(+), 19 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index d0831f0296..8f77b1f590 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -55,6 +55,7 @@ @accent: @catppuccin[@@flavor][@@accentColor]; @text-filter: @catppuccin-filters[@@flavor][@text]; + @red-filter: @catppuccin-filters[@@flavor][@red]; @blue-filter: @catppuccin-filters[@@flavor][@blue]; @green-filter: @catppuccin-filters[@@flavor][@green]; @yellow-filter: @catppuccin-filters[@@flavor][@yellow]; @@ -126,10 +127,10 @@ border-color: @surface2; } img:not( - [src^="/"], - [src*="cloudfront.net/dist"], - [src*="instructuremedia.com/build"] - ) { + [src^="/"], + [src*="cloudfront.net/dist"], + [src*="instructuremedia.com/build"] + ) { /* force a white background for user-uploaded images */ background-color: #fffd; } @@ -732,9 +733,7 @@ /* ANNOUNCEMENTS */ .ic-item-row { box-shadow: @surface1 0 -1px 0 0; - box-shadow: - 0 -1px @surface1, - inset 0 -1px @surface1; + box-shadow: 0 -1px @surface1, inset 0 -1px @surface1; } [data-testid="pill-container"] * { color: @subtext0 !important; @@ -885,8 +884,8 @@ /* popup menus */ /* extra selectors are to avoid styling tooltips because their arrows are hard to style */ span[data-position-content^="Menu"]:not( - [data-position-content^="Menu__label"] - ), + [data-position-content^="Menu__label"] + ), span[data-position-content^="Popover"] { span[class$="arrow"]::after { filter: @surface2-filter; @@ -908,8 +907,8 @@ /* color picker menu (e.g. on dashboard) */ span[data-position-content^="Popover"]:has( - div[class$="view-tabs__container"] - ) { + div[class$="view-tabs__container"] + ) { div[class$="view-tab"] { background-color: @surface1; border-bottom-color: @surface2; @@ -1011,8 +1010,8 @@ /* dropdown menu */ span[data-position-content^="Menu"]:not( - [data-position-content^="Menu__label"] - ) { + [data-position-content^="Menu__label"] + ) { span { color: @text; } @@ -1422,15 +1421,36 @@ border-color: @surface2; } } - .answer_arrow.correct { + .catppuccin_answer_arrow(@color, @filter) { color: @mantle; background-image: none; - background-color: @green; text-shadow: none; + background-color: @color; + &::before, &::after { - filter: @green-filter; + filter: @filter; } } + .answer_arrow.correct { + .catppuccin_answer_arrow(@green, @green-filter); + } + .answer_arrow.info { + .catppuccin_answer_arrow(@text, @text-filter); + } + .answer_arrow.incorrect { + .catppuccin_answer_arrow(@red, @red-filter); + } + #questions.assessment_results .question .answers .answer.wrong_answer { + border: 2px solid @red; + } + #questions.assessment_results + .question + .answers + .answer.wrong_answer + .ui-selectmenu-status { + color: @red; + } + .muted-notice { background-color: @surface0; background-image: linear-gradient(to bottom, @base, @surface0); @@ -1761,9 +1781,7 @@ color: @text; } .ic-discussion-row { - box-shadow: - -1px -1px @surface1, - inset -1px -1px @surface1; + box-shadow: -1px -1px @surface1, inset -1px -1px @surface1; } .discussion-entries { background-color: @base; From 1da5d9cb726b5e79e2a4964bf49e9531f65e2a1a Mon Sep 17 00:00:00 2001 From: pynappo Date: Mon, 10 Mar 2025 02:33:02 -0700 Subject: [PATCH 16/17] use more colors from palette --- styles/canvas-lms/catppuccin.user.less | 54 +++++++++++++------------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index 8f77b1f590..b1b2d62f22 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -80,8 +80,8 @@ --ic-brand-primary-darkened-28: darken(@accent, 10%); --ic-brand-primary-darkened-10: darken(@accent, 3%); --ic-brand-font-color-dark: @text; - --ic-brand-font-color-dark-lightened-15: fade(@text, 85%); - --ic-brand-font-color-dark-lightened-30: lighten(@text, 30%); + --ic-brand-font-color-dark-lightened-15: @subtext1; + --ic-brand-font-color-dark-lightened-30: @subtext0; --ic-link-color: @blue; --ic-link-color-darkened-10: fade(@blue, 90%); --ic-link-color-lightened-10: lighten(@blue, 10%); @@ -175,14 +175,11 @@ } .user_content { - /* for highlighted text in user-created content, revert to regular-ish text color */ - [style~="background-color:"]:not([style~="color:"]) { + /* for highlighted non-links in user-created content, revert to regular-ish text color */ + [style~="background-color:"]:not([style~="color:"]) + :not(a.external span) { color: black; } - /* for links with backgrounds in user-created content, use the canvas link color */ - [style~="background-color:"] a.external span { - color: #0374b5; - } /* just a special exception for pure black text and pure white backgrounds */ [style*="color: rgb(0, 0, 0)"], [style*="color: black"], @@ -204,10 +201,6 @@ button[class$="link"]:not(.btn), a.external span { color: @blue; - &:hover, - &:active { - color: darken(@blue, 10%); - } } /* sticky footers (e.g. teacher-side course settings) */ @@ -602,7 +595,7 @@ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: @red; background-image: @red; - border-color: darken(@red, 10%); + border-color: @maroon; } .btn-unpublished:hover, @@ -612,12 +605,12 @@ .btn-unpublished.ui-button.ui-state-disabled, .btn-unpublished[disabled] { color: @crust; - background-color: darken(@red, 10%); + background-color: @maroon; } .btn-unpublished:focus { color: @crust; - background: darken(@red, 10%); + background: @maroon; box-shadow: inset 0 0 0 2px @crust; } /* end of copy-pasted styles */ @@ -699,6 +692,15 @@ } } + .ui-state-warning, + .dialog-warning .ui-dialog-titlebar, + .dialog-warning .ui-datepicker .ui-datepicker-header, + .ui-datepicker .dialog-warning .ui-datepicker-header { + border-color: @red; + background: none; + color: @text; + } + /* alerts */ div[class*="view-alert"] { color: @text; @@ -838,7 +840,7 @@ h2 { border-color: @surface1; } - background-color: fade(@base, 30%); + background-color: fade(@base, 80%); .details .header { color: @subtext0; } @@ -848,7 +850,7 @@ } #right-side .events_list { p { - color: fade(@text, 80%); + color: @subtext0; } .event-details::after { @@ -1609,8 +1611,8 @@ .tox-tbtn:focus, .tox-split-button:focus { background-color: fade(@overlay2, 50%); - color: fade(@text, 80%); - fill: fade(@text, 80%); + color: @subtext0; + fill: @subtext0; } .tox-tbtn, .tox-split-button, @@ -1618,10 +1620,10 @@ .tox-split-button .tox-tbtn.tox-split-button__chevron { &:hover, &:active { - background-color: fade(@surface0, 50%); - color: fade(@text, 80%); + background-color: @surface0; + color: @subtext0; svg { - fill: fade(@text, 80%); + fill: @subtext0; } } } @@ -1745,7 +1747,7 @@ border-color: @surface1; } .alert-info { - background-color: fade(#e5f2f8, 20%); + background-color: @surface0; color: @blue; * { color: @blue; @@ -2020,7 +2022,7 @@ /* PEOPLE */ .ic-Table.ic-Table--striped tbody tr:nth-child(odd) { - background-color: darken(@base, 3%); + background-color: @mantle; } /* COURSE NOTIFICATIONS MENU */ @@ -2044,7 +2046,7 @@ } #syllabus tr.date.date_passed td, #syllabus tr.date.date_passed th { - background-color: darken(@base, 3%); + background-color: @mantle; } #syllabus tr.detail_list td.not_last { border-color: @surface0; @@ -2079,7 +2081,7 @@ } .ef-file-preview-header { color: @text; - background-color: fade(@crust, 90%); + background-color: @mantle; } .ef-file-preview-header > * { border-color: @surface1; From b2055bf3ed6428746a272f1fcd2d051ab2d0bd99 Mon Sep 17 00:00:00 2001 From: uncenter Date: Tue, 11 Mar 2025 16:00:27 -0400 Subject: [PATCH 17/17] fix(canvas-lms): use `border-color` instead of `border` --- styles/canvas-lms/catppuccin.user.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/canvas-lms/catppuccin.user.less b/styles/canvas-lms/catppuccin.user.less index b1b2d62f22..2d764f001d 100644 --- a/styles/canvas-lms/catppuccin.user.less +++ b/styles/canvas-lms/catppuccin.user.less @@ -1443,7 +1443,7 @@ .catppuccin_answer_arrow(@red, @red-filter); } #questions.assessment_results .question .answers .answer.wrong_answer { - border: 2px solid @red; + border-color: @red; } #questions.assessment_results .question