diff --git a/Gemfile b/Gemfile index 20cc5c78c..30e888a75 100644 --- a/Gemfile +++ b/Gemfile @@ -46,6 +46,7 @@ gem 'mail' gem 'nokogiri' gem 'view_component', require: 'view_component/engine' gem 'tzinfo-data' +gem 'hsluv' group :production, :staging do gem 'unicorn', :platforms => :ruby diff --git a/Gemfile.lock b/Gemfile.lock index 981f6b6d3..77e06c81d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -191,6 +191,7 @@ GEM ffi (~> 1.0) globalid (0.4.2) activesupport (>= 4.2.0) + hsluv (1.0.1) http (4.4.1) addressable (~> 2.3) http-cookie (~> 1.0) @@ -444,6 +445,7 @@ DEPENDENCIES factory_bot ffaker flamegraph + hsluv http http-cookie! ipaddress_2 diff --git a/app/controllers/static_controller.rb b/app/controllers/static_controller.rb index 331f20a42..ab71cb717 100644 --- a/app/controllers/static_controller.rb +++ b/app/controllers/static_controller.rb @@ -22,6 +22,9 @@ class StaticController < ApplicationController redirect_to wiki_page_path("help:dtext") unless request.format.js? end + def colors + end + def opensearch end diff --git a/app/javascript/src/styles/base/020_base.scss b/app/javascript/src/styles/base/020_base.scss index 05b912423..41ba4cd62 100644 --- a/app/javascript/src/styles/base/020_base.scss +++ b/app/javascript/src/styles/base/020_base.scss @@ -65,7 +65,7 @@ img { input, select, textarea { background: var(--form-input-background); - border: var(--form-input-border); + border: 1px solid var(--form-input-border-color); color: var(--form-input-text-color); padding-left: 0.25em; font: var(--body-font); @@ -112,7 +112,7 @@ table tfoot { } details { - border-bottom: 1px solid var(--details-border); + border-bottom: 1px solid var(--details-border-color); summary { cursor: pointer; diff --git a/app/javascript/src/styles/base/040_colors.css b/app/javascript/src/styles/base/040_colors.css index 537f5d37d..799b96d81 100644 --- a/app/javascript/src/styles/base/040_colors.css +++ b/app/javascript/src/styles/base/040_colors.css @@ -1,442 +1,502 @@ -:root { - --body-background-color: white; +html { + /* + * Generated by app/logical/color_palette.rb. + * See https://danbooru.donmai.us/static/colors. + * + * <%= ColorPalette.css_rules %> + * bin/rails runner "puts ColorPalette.css_rules" + */ - --text-color: hsl(0, 0%, 15%); - --inverse-text-color: white; - --muted-text-color: hsl(0, 0%, 55%); - --header-color: hsl(0, 0%, 15%); + --grey-0: #f6f6f8; /* hsluv(265, 17.5, 97.0) */ + --grey-1: #e8e8ec; /* hsluv(265, 17.5, 92.0) */ + --grey-2: #d1d1da; /* hsluv(265, 17.5, 84.0) */ + --grey-3: #ababbc; /* hsluv(265, 17.5, 70.5) */ + --grey-4: #9192a7; /* hsluv(265, 17.5, 61.0) */ + --grey-5: #777892; /* hsluv(265, 17.5, 51.2) */ + --grey-6: #5b5c79; /* hsluv(265, 17.5, 40.0) */ + --grey-7: #3f4058; /* hsluv(265, 17.5, 28.0) */ + --grey-8: #2c2d3f; /* hsluv(265, 17.5, 19.0) */ + --grey-9: #1e1e2c; /* hsluv(265, 17.5, 12.0) */ + --red-0: #fff4f4; /* hsluv(12, 100, 97.0) */ + --red-1: #fbe3e3; /* hsluv(12, 80, 92.0) */ + --red-2: #ffc3c3; /* hsluv(12, 100, 84.0) */ + --red-3: #ff8a8b; /* hsluv(12, 100, 70.5) */ + --red-4: #ff5a5b; /* hsluv(12, 100, 61.0) */ + --red-5: #ed2426; /* hsluv(12, 90, 51.2) */ + --red-6: #c00004; /* hsluv(12, 100, 40.0) */ + --red-7: #861011; /* hsluv(12, 90, 28.0) */ + --red-8: #5c1313; /* hsluv(12, 75, 19.0) */ + --red-9: #391313; /* hsluv(12, 50, 12.0) */ + --orange-0: #fff4f0; /* hsluv(37, 100, 97.0) */ + --orange-1: #ffe2d5; /* hsluv(37, 100, 92.0) */ + --orange-2: #ffc5a5; /* hsluv(37, 100, 84.0) */ + --orange-3: #fd9200; /* hsluv(37, 100, 70.5) */ + --orange-4: #d97c00; /* hsluv(37, 100, 61.0) */ + --orange-5: #b56700; /* hsluv(37, 100, 51.2) */ + --orange-6: #8d4f00; /* hsluv(37, 100, 40.0) */ + --orange-7: #653700; /* hsluv(37, 100, 28.0) */ + --orange-8: #482500; /* hsluv(37, 100, 19.0) */ + --orange-9: #331900; /* hsluv(37, 100, 12.0) */ + --yellow-0: #fcf6ea; /* hsluv(68, 60, 97.0) */ + --yellow-1: #f7e7c3; /* hsluv(68, 60, 92.0) */ + --yellow-2: #ead084; /* hsluv(68, 60, 84.0) */ + --yellow-3: #ccaa00; /* hsluv(68, 100, 70.5) */ + --yellow-4: #ae9100; /* hsluv(68, 100, 61.0) */ + --yellow-5: #917800; /* hsluv(68, 100, 51.2) */ + --yellow-6: #705d00; /* hsluv(68, 100, 40.0) */ + --yellow-7: #504100; /* hsluv(68, 100, 28.0) */ + --yellow-8: #382d00; /* hsluv(68, 100, 19.0) */ + --yellow-9: #271f04; /* hsluv(68, 90, 12.0) */ + --green-0: #edfaee; /* hsluv(130, 40, 97.0) */ + --green-1: #cbf2ce; /* hsluv(130, 40, 92.0) */ + --green-2: #93e49a; /* hsluv(130, 50, 84.0) */ + --green-3: #35c64a; /* hsluv(130, 90, 70.5) */ + --green-4: #00ab2c; /* hsluv(130, 100, 61.0) */ + --green-5: #008e23; /* hsluv(130, 100, 51.2) */ + --green-6: #006e19; /* hsluv(130, 100, 40.0) */ + --green-7: #004e0f; /* hsluv(130, 100, 28.0) */ + --green-8: #003708; /* hsluv(130, 100, 19.0) */ + --green-9: #002604; /* hsluv(130, 100, 12.0) */ + --azure-0: #f1f7ff; /* hsluv(242, 100, 97.0) */ + --azure-1: #d9eaff; /* hsluv(242, 100, 92.0) */ + --azure-2: #afd5ff; /* hsluv(242, 100, 84.0) */ + --azure-3: #4bb4ff; /* hsluv(242, 100, 70.5) */ + --azure-4: #009be6; /* hsluv(242, 100, 61.0) */ + --azure-5: #0081c0; /* hsluv(242, 100, 51.2) */ + --azure-6: #006496; /* hsluv(242, 100, 40.0) */ + --azure-7: #00466b; /* hsluv(242, 100, 28.0) */ + --azure-8: #00314d; /* hsluv(242, 100, 19.0) */ + --azure-9: #002237; /* hsluv(242, 100, 12.0) */ + --blue-0: #f4f6ff; /* hsluv(257, 100, 97.0) */ + --blue-1: #e1e8ff; /* hsluv(257, 100, 92.0) */ + --blue-2: #c3d0ff; /* hsluv(257, 100, 84.0) */ + --blue-3: #8caaff; /* hsluv(257, 100, 70.5) */ + --blue-4: #5d8fff; /* hsluv(257, 100, 61.0) */ + --blue-5: #0075f8; /* hsluv(257, 100, 51.2) */ + --blue-6: #005ac3; /* hsluv(257, 100, 40.0) */ + --blue-7: #003f8d; /* hsluv(257, 100, 28.0) */ + --blue-8: #002c66; /* hsluv(257, 100, 19.0) */ + --blue-9: #001e4a; /* hsluv(257, 100, 12.0) */ + --purple-0: #f9f5ff; /* hsluv(282, 100, 97.0) */ + --purple-1: #ece5f8; /* hsluv(282, 70, 92.0) */ + --purple-2: #ddc9fb; /* hsluv(282, 90, 84.0) */ + --purple-3: #c797ff; /* hsluv(282, 100, 70.5) */ + --purple-4: #b871ff; /* hsluv(282, 100, 61.0) */ + --purple-5: #ab3fff; /* hsluv(282, 100, 51.2) */ + --purple-6: #9000df; /* hsluv(282, 100, 40.0) */ + --purple-7: #6700a1; /* hsluv(282, 100, 28.0) */ + --purple-8: #421765; /* hsluv(282, 80, 19.0) */ + --purple-9: #2f0e49; /* hsluv(282, 80, 12.0) */ - --link-color: hsl(213, 100%, 50%); - --link-hover-color: hsl(213, 100%, 75%); + --white: #FFFFFF; + --black: #000000; +} - --error-background-color: hsl(0, 100%, 95%); /* light red */ - --success-background-color: hsl(120, 100%, 95%); /* light green */ - --warning-background-color: hsl(50, 100%, 93%); /* light yellow */ - --target-background: #FFC; +html { + --body-background-color: var(--white); + --text-color: var(--black); - --subnav-menu-background-color: #F5F5FF; + --inverse-text-color: var(--white); + --muted-text-color: var(--grey-4); + --header-color: var(--grey-9); + --link-color: var(--blue-5); + --link-hover-color: var(--blue-3); - --responsive-menu-background-color: var(--link-hover-color); - --responsive-sidebar-submit-button-background-color: #EEE; - --responsive-sidebar-submit-button-border: 1px solid rgb(197, 197, 197); + --error-background-color: var(--red-1); + --success-background-color: var(--green-0); + --target-background: var(--yellow-0); + + --subnav-menu-background-color: var(--blue-0); + --responsive-menu-background-color: var(--blue-1); --form-input-text-color: var(--text-color); --form-input-background: var(--body-background-color); - --form-input-border: 1px solid #CCC; - --form-input-placeholder-text-color: grey; - --form-input-validation-error-border-color: red; + --form-input-border-color: var(--grey-2); + --form-input-placeholder-text-color: var(--grey-4); + --form-input-validation-error-border-color: var(--red-4); - --form-button-text-color: var(--form-input-text-color); - --form-button-background: #EEE; - --form-button-border: var(--form-input-border); - --form-button-hover-background: #F5F5F5; - --form-button-hover-box-shadow: 0 0 2px grey; - --form-button-active-background: #DDD; - --form-button-active-border: var(--form-button-border); - --form-button-active-color: var(--form-button-text-color); - --button-primary-text-color: white; + --form-button-text-color: var(--text-color); + --form-button-background: var(--grey-1); + --form-button-border-color: var(--grey-2); + --form-button-hover-background: var(--grey-0); + --form-button-hover-box-shadow-color: var(--grey-5); + --form-button-active-background: var(--grey-2); + + --button-primary-text-color: var(--white); --button-primary-background-color: var(--link-color); - --button-primary-hover-background-color: hsl(213, 100%, 40%); - --button-primary-disabled-color: grey; + --button-primary-hover-background-color: var(--link-hover-color); + --button-primary-disabled-color: var(--grey-5); --button-outline-primary-color: var(--link-color); --quick-search-form-background: var(--body-background-color); - --user-upgrade-basic-background-color: #F5F5FF; - --user-upgrade-gold-background-color: #FFF380; - --user-upgrade-platinum-background-color: #EEE; + --user-upgrade-basic-background-color: var(--blue-0); + --user-upgrade-gold-background-color: var(--yellow-1); + --user-upgrade-platinum-background-color: var(--blue-1); - --table-header-border: 2px solid #666; - --table-row-border: 1px solid #CCC; - --table-row-hover-background: hsl(213, 100%, 95%); - --table-even-row-background: #FAFAFA; + --table-header-border-color: var(--grey-2); + --table-row-border-color: var(--grey-2); + --table-row-hover-background: var(--blue-1); + --table-even-row-background: var(--grey-0); - --preview-pending-color: #00F; - --preview-flagged-color: #F00; - --preview-deleted-color: black; - --preview-has-children-color: #0F0; - --preview-has-parent-color: #CC0; + --preview-pending-color: var(--blue-5); + --preview-flagged-color: var(--red-4); + --preview-deleted-color: var(--grey-9); + --preview-has-children-color: var(--green-3); + --preview-has-parent-color: var(--orange-3); - --preview-icon-color: white; + --preview-icon-color: var(--inverse-text-color); --preview-icon-background: rgba(0, 0, 0, 0.5); - --modqueue-tag-warning-color: var(--error-background-color); + --modqueue-tag-warning-color: var(--red-1); - --uploads-dropzone-background: #EEE; + --uploads-dropzone-background: var(--grey-1); --uploads-dropzone-progress-bar-foreground-color: var(--link-color); --uploads-dropzone-progress-bar-background-color: var(--link-hover-color); - --forum-vote-up-color: green; - --forum-vote-meh-color: goldenrod; - --forum-vote-down-color: red; - --forum-topic-status-new-color: hsla(0, 50%, 55%, 1); - --forum-topic-status-pending-color: hsla(210, 25%, 55%, 1); - --forum-topic-status-approved-color: hsla(120, 25%, 55%, 1); - --forum-topic-status-rejected-color: hsla(0, 25%, 55%, 1); + --forum-vote-up-color: var(--green-5); + --forum-vote-meh-color: var(--orange-3); + --forum-vote-down-color: var(--red-5); - --moderation-report-text-color: red; - --moderation-report-background-color: var(--error-background-color); + --forum-topic-status-new-color: var(--red-4); + --forum-topic-status-pending-color: var(--azure-5); + --forum-topic-status-approved-color: var(--green-4); + --forum-topic-status-rejected-color: var(--red-4); - --comment-sticky-background-color: var(--subnav-menu-background-color); + --moderation-report-text-color: var(--red-5); + --moderation-report-background-color: var(--red-1); - --details-border: #DDD; + --comment-sticky-background-color: var(--blue-0); --post-tooltip-background-color: var(--body-background-color); - --post-tooltip-border-color: hsla(210, 100%, 3%, 0.15); - --post-tooltip-box-shadow: 0 4px 14px -2px hsla(210, 100%, 3%, 0.10); - --post-tooltip-header-background-color: var(--subnav-menu-background-color); - --post-tooltip-info-color: #555; - --post-tooltip-scrollbar-background: #999999; - --post-tooltip-scrollbar-border: 0 none white; - --post-tooltip-scrollbar-thumb-color: #AAAAAA; - --post-tooltip-scrollbar-track-background: #EEEEEE; - --post-tooltip-scrollbar-track-border: 0 none white; + --post-tooltip-border-color: var(--grey-2); + --post-tooltip-box-shadow-color: rgba(0, 0, 0, 0.15); + --post-tooltip-header-background-color: var(--blue-0); + --post-tooltip-info-color: var(--muted-text-color); - --user-tooltip-positive-feedback-color: orange; - --user-tooltip-negative-feedback-color: red; + --post-tooltip-scrollbar-background: var(--grey-4); + --post-tooltip-scrollbar-thumb-color: var(--grey-5); + --post-tooltip-scrollbar-track-background: var(--grey-1); + + --user-tooltip-positive-feedback-color: var(--orange-3); + --user-tooltip-negative-feedback-color: var(--red-5); --preview-current-post-background: rgba(0, 0, 0, 0.1); - --autocomplete-selected-background-color: var(--subnav-menu-background-color); - --autocomplete-border: 1px solid #CCC; + --autocomplete-selected-background-color: var(--blue-0); + --autocomplete-border-color: var(--grey-2); --autocomplete-tag-autocorrect-underline: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAHElEQVQYV2NkQAL/GRj+M4IJBgY4zQhSABMEsQHMOAgCT5YN9gAAAABJRU5ErkJggg==); - --diff-list-added-color: green; - --diff-list-removed-color: red; - --diff-list-obsolete-added-color: darkGreen; - --diff-list-obsolete-removed-color: darkRed; + --diff-list-added-color: var(--green-5); + --diff-list-removed-color: var(--red-5); + --diff-list-obsolete-added-color: var(--green-7); + --diff-list-obsolete-removed-color: var(--red-7); - --wiki-page-versions-diff-del-background: #FCC; - --wiki-page-versions-diff-ins-background: #CFC; + --wiki-page-versions-diff-del-background: var(--red-2); + --wiki-page-versions-diff-ins-background: var(--green-2); - --post-notice-border: 1px solid #DDD; - --post-parent-notice-background: var(--success-background-color); - --post-child-notice-background: var(--warning-background-color); - --post-pending-notice-background: #D8D8FC; - --post-banned-notice-background: var(--error-background-color); - --post-deleted-notice-background: var(--error-background-color); - --post-resized-notice-background: #EED8FC; - --post-search-notice-background: #EEE; + --post-notice-border-color: var(--grey-1); + --post-parent-notice-background: var(--green-0); + --post-child-notice-background: var(--yellow-0); + --post-pending-notice-background: var(--blue-0); + --post-banned-notice-background: var(--red-1); + --post-deleted-notice-background: var(--red-1); + --post-resized-notice-background: var(--purple-1); + --post-search-notice-background: var(--grey-0); - --post-artist-commentary-container-background: #F8F8F8; - --post-artist-commentary-container-border: 1px solid #CCC; + --post-artist-commentary-container-background: var(--grey-0); + --post-artist-commentary-container-border-color: var(--grey-1); --note-body-background: #FFE; - --note-body-text-color: var(--text-color); - --note-body-border: 1px solid black; - --note-box-border: 1px solid black; + --note-body-text-color: var(--black); + --note-body-border-color: var(--black); + --note-box-border-color: var(--black); --note-box-shadow: 0 0 0 1px white; - --unsaved-note-box-border: 1px solid red; - --movable-note-box-border: 1px solid green; - --note-preview-border: 1px solid red; - --note-preview-background: white; - --note-highlight-color: blue; + + --unsaved-note-box-border-color: var(--red-4); + --movable-note-box-border-color: var(--blue-5); + --note-preview-border-color: var(--red-4); + --note-preview-background: var(--note-body-background); + --note-highlight-color: var(--blue-5); --note-tn-color: var(--muted-text-color); - --series-pool-color: #A0A; - --series-pool-hover-color: #B6B; + --series-pool-color: var(--copyright-tag-color); + --series-pool-hover-color: var(--copyright-tag-hover-color); --collection-pool-color: var(--general-tag-color); --collection-pool-hover-color: var(--general-tag-hover-color); - --fetch-source-data-border: 1px solid #666; + --fetch-source-data-border-color: var(--grey-2); - --post-mode-menu-edit-background: #5C5; - --post-mode-menu-tag-script-background: #D6D; - --post-mode-menu-add-fav-background: #FFA; - --post-mode-menu-remove-fav-background: #FFA; - --post-mode-menu-vote-up-background: #AFA; - --post-mode-menu-vote-down-background: #FAA; - --post-mode-menu-translation-background: #5CD; + --post-mode-menu-edit-background: var(--green-2); + --post-mode-menu-tag-script-background: var(--purple-2); + --post-mode-menu-add-fav-background: var(--yellow-2); + --post-mode-menu-remove-fav-background: var(--yellow-2); + --post-mode-menu-vote-up-background: var(--blue-2); + --post-mode-menu-vote-down-background: var(--red-2); + --post-mode-menu-translation-background: var(--blue-2); --tag-count-color: var(--muted-text-color); - --low-post-count-color: red; + --low-post-count-color: var(--red-5); - --remove-favorite-button: deeppink; + --remove-favorite-button: var(--red-4); - --ugoira-seek-slider-background: #EEE; - --ugoira-seek-slider-progressbar-background: white; + --ugoira-seek-slider-background: var(--grey-0); + --ugoira-seek-slider-progressbar-background: var(--white); - --keyboard-shortcut-color: white; - --keyboard-shortcut-background-color: #333; + --keyboard-shortcut-color: var(--inverse-text-color); + --keyboard-shortcut-background-color: var(--grey-6); - --error-message-color: #A00; + --error-message-color: var(--red-5); - --login-link-color: #E00; - --footer-border: 1px solid #DDD; - --details-border: #DDD; + --login-link-color: var(--red-5); + --footer-border-color: var(--grey-1); + --details-border-color: var(--grey-2); --jquery-ui-widget-content-background: var(--body-background-color); --jquery-ui-widget-content-text-color: var(--text-color); - --jquery-ui-dialog-box-shadow: 2px 2px 1px grey; + --jquery-ui-dialog-box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color); - --notice-error-background: var(--error-background-color); - --notice-error-border: 1px solid #FBC7C6; - --notice-info-background: var(--warning-background-color); - --notice-info-border: 1px solid #CCC999; + --notice-error-background: var(--red-1); + --notice-error-border-color: var(--red-2); + --notice-info-background: var(--yellow-0); + --notice-info-border-color: var(--yellow-1); - --dtext-blockquote-border-color: #999; - --dtext-code-background: #EEE; - --dtext-expand-border: 1px inset #666; - --dtext-spoiler-background-color: black; - --dtext-spoiler-hover-color: white; + --dtext-blockquote-border-color: var(--grey-4); + --dtext-code-background: var(--grey-1); + --dtext-expand-border: 1px solid var(--grey-3); + --dtext-spoiler-background-color: var(--text-color); + --dtext-spoiler-hover-color: var(--inverse-text-color); - --wiki-page-other-name-background-color: #EEE; + --wiki-page-other-name-background-color: var(--blue-0); - --paginator-arrow-background-color: white; + --paginator-arrow-background-color: var(--inverse-text-color); --paginator-arrow-color: var(--link-color); + --artist-tag-color: var(--red-6); + --artist-tag-hover-color: var(--red-5); + --copyright-tag-color: var(--purple-6); + --copyright-tag-hover-color: var(--purple-5); + --character-tag-color: var(--green-4); + --character-tag-hover-color: var(--green-3); --general-tag-color: var(--link-color); --general-tag-hover-color: var(--link-hover-color); - --character-tag-color: #0A0; - --character-tag-hover-color: #6B6; - --copyright-tag-color: #A0A; - --copyright-tag-hover-color: #B6B; - --artist-tag-color: #A00; - --artist-tag-hover-color: #B66; - --meta-tag-color: #F80; - --meta-tag-hover-color: #FA6; + --meta-tag-color: var(--orange-3); + --meta-tag-hover-color: var(--orange-2); - --user-admin-color: red; - --user-moderator-color: orange; - --user-builder-color: #6633FF; - --user-platinum-color: gray; - --user-gold-color: #00F; - --user-member-color: var(--link-color); - --user-restricted-color: var(--link-color); - --user-banned-color: black; + --user-admin-color: var(--artist-tag-color); + --user-moderator-color: var(--character-tag-color); + --user-builder-color: var(--copyright-tag-color); + --user-platinum-color: var(--grey-5); + --user-gold-color: var(--meta-tag-color); + --user-member-color: var(--general-tag-color); + --user-restricted-color: var(--general-tag-color); + --user-banned-color: var(--grey-8); - --user-verified-email-color: #0A0; - --user-unverified-email-color: #F80; + --user-verified-email-color: var(--green-4); + --user-unverified-email-color: var(--yellow-2); - --news-updates-background: #EEE; - --news-updates-border: 2px solid #666; + --news-updates-background: var(--grey-0); + --news-updates-border-color: var(--grey-1); - --related-tags-container-background: #EEE; + --related-tags-container-background: var(--blue-0); --selected-related-tag-background-color: var(--link-color); - --selected-related-tag-color: white; + --selected-related-tag-color: var(--inverse-text-color); } /* variables that aren't defined in the dark theme fall back to the :root theme */ body[data-current-user-theme="dark"] { - --grey-1: #1f202c; /* hsluv(265, 15, 12.50); */ - --grey-2: #2c2c3c; /* hsluv(265, 15, 18.75); */ - --grey-3: #393a4d; /* hsluv(265, 15, 25.00); */ - --grey-4: #9596a8; /* hsluv(265, 15, 62.50); */ - --grey-5: #c9c9d2; /* hsluv(265, 15, 81.25); */ - --grey-6: #e4e4e8; /* hsluv(265, 15, 90.625); */ - --red-0: #652828; /* hsluv(12, 50, 25); */ - --red-3: #af4a4b; /* hsluv(12, 50, 45); */ - --red-1: #f07a7b; /* hsluv(12, 80, 65); */ - --red-2: #f3a4a4; /* hsluv(12, 80, 75); */ - --yellow-0: #625121; /* hsluv(65, 80, 35); */ - --yellow-1: #e8c259; /* hsluv(65, 80, 80); */ - --yellow-2: #fae0a8; /* hsluv(65, 80, 90); */ - --green-0: #164423; /* hsluv(135, 80, 25); */ - --green-3: #2d7942; /* hsluv(135, 80, 45); */ - --green-1: #46b265; /* hsluv(135, 80, 65); */ - --green-2: #53d077; /* hsluv(135, 80, 75); */ - --aqua-0: #293f3d; /* hsluv(180, 50, 25); */ - --aqua-1: #4aada3; /* hsluv(180, 80, 65); */ - --aqua-2: #57cabe; /* hsluv(180, 80, 75); */ - --blue-0: #2c3d51; /* hsluv(245, 50, 25); */ - --blue-3: #356ea1; /* hsluv(245, 80, 45); */ - --blue-1: #51a3ec; /* hsluv(245, 80, 65); */ - --blue-2: #8fbcf1; /* hsluv(245, 80, 75); */ - --indigo-0: #323573; /* hsluv(265, 50, 25); */ - --indigo-1: #9396ec; /* hsluv(265, 80, 65); */ - --indigo-2: #b2b4f1; /* hsluv(265, 80, 75); */ - --purple-0: #473067; /* hsluv(280, 50, 25); */ - --purple-1: #b38bec; /* hsluv(280, 80, 65); */ - --purple-2: #c7adf1; /* hsluv(280, 80, 75); */ + --body-background-color: var(--grey-9); + --text-color: var(--grey-2); - /* main background colors */ - --body-background-color: var(--grey-1); - - --error-background-color: var(--red-0); - --success-background-color: var(--green-0); - --warning-background-color: var(--yellow-0); - - --subnav-menu-background-color: var(--grey-2); - --responsive-menu-background-color: var(--grey-3); - --footer-border: 1px solid var(--grey-3); - --details-border: var(--grey-3); - - --table-header-border: 2px solid var(--grey-3); - --table-even-row-background: var(--grey-2); - --table-row-hover-background: var(--grey-3); - --table-row-border: 1px solid var(--grey-3); - - /* main text colors */ - --text-color: var(--grey-5); - --inverse-text-color: white; + --inverse-text-color: var(--grey-0); --muted-text-color: var(--grey-4); - --header-color: var(--grey-6); + --header-color: var(--grey-1); + --link-color: var(--azure-4); + --link-hover-color: var(--azure-3); - --link-color: var(--blue-1); - --link-hover-color: var(--blue-2); + --error-background-color: var(--red-9); + --success-background-color: var(--green-9); + --target-background: var(--azure-8); - --artist-tag-color: var(--red-1); - --artist-tag-hover-color: var(--red-2); - --copyright-tag-color: var(--purple-1); - --copyright-tag-hover-color: var(--purple-2); - --character-tag-color: var(--green-1); - --character-tag-hover-color: var(--green-2); - --general-tag-color: var(--blue-1); - --general-tag-hover-color: var(--blue-2); - --meta-tag-color: var(--yellow-1); - --meta-tag-hover-color: var(--yellow-2); + --subnav-menu-background-color: var(--grey-8); + --responsive-menu-background-color: var(--grey-8); - --series-pool-color: var(--copyright-tag-color); - --series-pool-hover-color: var(--copyright-tag-hover-color); - --collection-pool-color: var(--general-tag-color); - --collection-pool-hover-color: var(--general-tag-hover-color); + --form-input-text-color: var(--grey-2); + --form-input-background: var(--grey-7); + --form-input-border-color: var(--grey-5); + --form-input-placeholder-text-color: var(--grey-3); + --form-input-validation-error-border-color: var(--red-4); - --user-banned-color: var(--grey-1); - --user-restricted-color: var(--blue-1); - --user-member-color: var(--blue-1); - --user-gold-color: var(--yellow-1); - --user-platinum-color: var(--grey-4); - --user-builder-color: var(--purple-1); - --user-moderator-color: var(--green-1); - --user-admin-color: var(--red-1); + --form-button-text-color: var(--grey-9); + --form-button-background: var(--grey-2); + --form-button-border-color: var(--grey-4); + --form-button-hover-background: var(--grey-0); + --form-button-hover-box-shadow-color: var(--grey-5); + --form-button-active-background: var(--grey-3); - --user-verified-email-color: var(--green-1); - --user-unverified-email-color: var(--yellow-1); - - /* misc specific colors */ - --autocomplete-selected-background-color: var(--grey-3); - --autocomplete-border: 1px solid var(--grey-4); - - --comment-sticky-background-color: var(--blue-0); - - --diff-list-added-color: var(--green-1); - --diff-list-removed-color: var(--red-1); - --diff-list-obsolete-added-color: var(--green-3); - --diff-list-obsolete-removed-color: var(--red-3); - - --dtext-blockquote-border-color: var(--grey-4); - --dtext-code-background: var(--grey-2); - --dtext-expand-border: 1px inset var(--grey-4); - --dtext-spoiler-background-color: black; - --dtext-spoiler-hover-color: var(--text-color); - - --form-input-text-color: var(--grey-5); - --form-input-background: var(--grey-3); - --form-input-border: 1px solid var(--grey-4); - --form-input-placeholder-text-color: var(--grey-4); - --form-input-validation-error-border-color: var(--red-1); - - --form-button-text-color: var(--grey-1); - --form-button-background: var(--grey-5); - --form-button-border: 1px solid var(--grey-4); - --form-button-hover-background: white; - --form-button-hover-box-shadow: 0 0 2px var(--grey-5); - --form-button-active-background: var(--grey-5); - --form-button-active-border: 1px solid var(--grey-5); - --form-button-active-color: white; - --button-primary-text-color: white; + --button-primary-text-color: var(--white); --button-primary-background-color: var(--link-color); --button-primary-hover-background-color: var(--link-hover-color); --button-primary-disabled-color: var(--grey-4); + --button-outline-primary-color: var(--azure-4); - --forum-vote-up-color: var(--green-1); - --forum-vote-meh-color: var(--yellow-1); - --forum-vote-down-color: var(--red-1); - --forum-topic-status-new-color: var(--red-3); - --forum-topic-status-pending-color: var(--blue-3); - --forum-topic-status-approved-color: var(--green-3); - --forum-topic-status-rejected-color: var(--red-3); + --quick-search-form-background: var(--grey-9); - --moderation-report-text-color: var(--red-1); - --moderation-report-background-color: var(--red-0); + --user-upgrade-basic-background-color: var(--grey-8); + --user-upgrade-gold-background-color: var(--grey-7); + --user-upgrade-platinum-background-color: var(--blue-9); - --jquery-ui-widget-content-text-color: var(--text-color); - --jquery-ui-widget-content-background: var(--grey-2); - --jquery-ui-dialog-box-shadow: 0 0 8px var(--grey-1); + --table-header-border-color: var(--grey-7); + --table-row-border-color: var(--grey-7); + --table-even-row-background: var(--grey-8); + --table-row-hover-background: var(--grey-7); - --keyboard-shortcut-color: var(--grey-1); - --keyboard-shortcut-background-color: var(--grey-5); + --preview-pending-color: var(--azure-4); + --preview-flagged-color: var(--red-5); + --preview-deleted-color: var(--grey-3); + --preview-has-children-color: var(--green-3); + --preview-has-parent-color: var(--orange-3); - --modqueue-tag-warning-color: var(--error-background-color); + --modqueue-tag-warning-color: var(--red-7); - --news-updates-background: var(--grey-3); - --news-updates-border: 2px solid var(--grey-4); + --uploads-dropzone-background: var(--grey-8); + --uploads-dropzone-progress-bar-foreground-color: var(--link-color); + --uploads-dropzone-progress-bar-background-color: var(--link-hover-color); - --note-body-text-color: var(--grey-1); - --unsaved-note-box-border: 1px solid var(--red-1); - --movable-note-box-border: 1px solid var(--green-1); - --note-preview-border: 1px solid var(--red-1); - --note-highlight-color: var(--blue-1); + --forum-vote-up-color: var(--green-4); + --forum-vote-meh-color: var(--yellow-2); + --forum-vote-down-color: var(--red-4); - --notice-error-background: var(--red-0); - --notice-error-border: 1px solid var(--grey-4); - --notice-info-background: var(--blue-0); - --notice-info-border: 1px solid var(--blue-1); + --forum-topic-status-new-color: var(--red-4); + --forum-topic-status-pending-color: var(--blue-4); + --forum-topic-status-approved-color: var(--green-4); + --forum-topic-status-rejected-color: var(--red-4); - --paginator-arrow-background-color: white; - --paginator-arrow-color: var(--link-color); + --moderation-report-text-color: var(--red-4); + --moderation-report-background-color: var(--red-9); - --post-artist-commentary-container-background: var(--grey-3); - --post-artist-commentary-container-border: 1px solid var(--grey-3); + --comment-sticky-background-color: var(--azure-8); - --post-mode-menu-edit-background: var(--green-0); - --post-mode-menu-tag-script-background: var(--indigo-0); - --post-mode-menu-add-fav-background: var(--yellow-0); - --post-mode-menu-remove-fav-background: var(--yellow-0); - --post-mode-menu-vote-up-background: var(--red-0); - --post-mode-menu-vote-down-background: var(--red-0); - --post-mode-menu-translation-background: var(--blue-0); + --post-tooltip-background-color: var(--grey-8); + --post-tooltip-border-color: var(--grey-7); + --post-tooltip-header-background-color: var(--grey-8); + --post-tooltip-info-color: var(--grey-2); - --post-notice-border: 1px solid var(--grey-3); - --post-search-notice-background: var(--grey-3); - --post-child-notice-background: var(--yellow-0); - --post-parent-notice-background: var(--green-0); - --post-resized-notice-background: var(--purple-0); - --post-pending-notice-background: var(--indigo-0); - --post-deleted-notice-background: var(--red-0); - --post-banned-notice-background: var(--red-0); - - --post-tooltip-background-color: var(--grey-3); - --post-tooltip-border-color: var(--grey-4); - --post-tooltip-header-background-color: var(--grey-3); - --post-tooltip-info-color: var(--grey-5); --post-tooltip-scrollbar-background: var(--grey-4); - --post-tooltip-scrollbar-border: none; --post-tooltip-scrollbar-thumb-color: var(--grey-5); --post-tooltip-scrollbar-track-background: var(--grey-1); - --post-tooltip-scrollbar-track-border: none; --user-tooltip-positive-feedback-color: var(--yellow-1); --user-tooltip-negative-feedback-color: var(--red-1); - --preview-pending-color: var(--blue-1); - --preview-flagged-color: var(--red-1); - --preview-deleted-color: var(--grey-5); - --preview-has-children-color: var(--green-1); - --preview-has-parent-color: var(--yellow-1); + --autocomplete-selected-background-color: var(--grey-7); + --autocomplete-border-color: var(--grey-4); - --related-tags-container-background: var(--grey-3); + --diff-list-added-color: var(--green-4); + --diff-list-removed-color: var(--red-4); + --diff-list-obsolete-added-color: var(--green-6); + --diff-list-obsolete-removed-color: var(--red-6); + + --wiki-page-versions-diff-del-background: var(--red-8); + --wiki-page-versions-diff-ins-background: var(--green-8); + + --post-notice-border-color: var(--grey-7); + --post-parent-notice-background: var(--green-8); + --post-child-notice-background: var(--yellow-8); + --post-pending-notice-background: var(--blue-8); + --post-banned-notice-background: var(--red-8); + --post-deleted-notice-background: var(--red-8); + --post-resized-notice-background: var(--purple-8); + --post-search-notice-background: var(--grey-8); + + --post-artist-commentary-container-background: var(--grey-8); + --post-artist-commentary-container-border-color: var(--grey-7); + + --unsaved-note-box-border-color: var(--red-5); + --movable-note-box-border-color: var(--blue-5); + --note-preview-border-color: var(--red-5); + --note-highlight-color: var(--blue-5); + + --series-pool-color: var(--copyright-tag-color); + --series-pool-hover-color: var(--copyright-tag-hover-color); + + --collection-pool-color: var(--general-tag-color); + --collection-pool-hover-color: var(--general-tag-hover-color); + + --fetch-source-data-border-color: var(--grey-4); + + --post-mode-menu-edit-background: var(--green-8); + --post-mode-menu-tag-script-background: var(--purple-8); + --post-mode-menu-add-fav-background: var(--yellow-8); + --post-mode-menu-remove-fav-background: var(--yellow-8); + --post-mode-menu-vote-up-background: var(--blue-8); + --post-mode-menu-vote-down-background: var(--red-8); + --post-mode-menu-translation-background: var(--blue-8); + + --low-post-count-color: var(--red-4); + + --remove-favorite-button: var(--red-4); + + --ugoira-seek-slider-background: var(--grey-2); + --ugoira-seek-slider-progressbar-background: var(--grey-0); + + --keyboard-shortcut-color: var(--grey-0); + --keyboard-shortcut-background-color: var(--grey-7); + + --error-message-color: var(--red-4); + + --login-link-color: var(--red-4); + --footer-border-color: var(--grey-7); + --details-border-color: var(--grey-7); + + --jquery-ui-widget-content-text-color: var(--text-color); + --jquery-ui-widget-content-background: var(--grey-8); + --jquery-ui-dialog-box-shadow: 0 4 14px -2px var(--grey-1); + + --notice-error-background: var(--red-8); + --notice-error-border-color: var(--red-7); + --notice-info-background: var(--azure-8); + --notice-info-border-color: var(--azure-6); + + --dtext-blockquote-border-color: var(--grey-4); + --dtext-code-background: var(--grey-8); + --dtext-expand-border: 1px inset var(--grey-4); + --dtext-spoiler-background-color: black; + --dtext-spoiler-hover-color: var(--grey-0); + + --wiki-page-other-name-background-color: var(--grey-8); + + --paginator-arrow-background-color: var(--grey-0); + --paginator-arrow-color: var(--link-color); + + --artist-tag-color: var(--red-3); + --artist-tag-hover-color: var(--red-2); + --copyright-tag-color: var(--purple-3); + --copyright-tag-hover-color: var(--purple-2); + --character-tag-color: var(--green-3); + --character-tag-hover-color: var(--green-2); + --general-tag-color: var(--azure-4); + --general-tag-hover-color: var(--azure-3); + --meta-tag-color: var(--yellow-2); + --meta-tag-hover-color: var(--yellow-1); + + --user-admin-color: var(--artist-tag-color); + --user-moderator-color: var(--character-tag-color); + --user-builder-color: var(--copyright-tag-color); + --user-platinum-color: var(--grey-4); + --user-gold-color: var(--meta-tag-color); + --user-member-color: var(--general-tag-color); + --user-restricted-color: var(--general-tag-color); + --user-banned-color: var(--grey-6); + + --user-verified-email-color: var(--green-3); + --user-unverified-email-color: var(--yellow-2); + + --news-updates-background: var(--grey-7); + --news-updates-border-color: var(--grey-6); + + --related-tags-container-background: var(--grey-8); --selected-related-tag-background-color: var(--link-color); - --selected-related-tag-color: white; - - --target-background: var(--blue-0); - - --uploads-dropzone-background: var(--grey-3); - --uploads-dropzone-progress-bar-foreground-color: var(--link-color); - --uploads-dropzone-progress-bar-background-color: var(--link-hover-color); - - --user-upgrade-basic-background-color: var(--grey-2); - --user-upgrade-gold-background-color: var(--indigo-0); - --user-upgrade-platinum-background-color: var(--blue-0); - - --wiki-page-other-name-background-color: var(--grey-3); - --wiki-page-versions-diff-del-background: var(--red-0); - --wiki-page-versions-diff-ins-background: var(--green-0); - - --low-post-count-color: var(--red-1); - --login-link-color: var(--red-1); - --remove-favorite-button: var(--red-1); - --fetch-source-data-border: 1px solid var(--grey-4); - --quick-search-form-background: var(--grey-1); + --selected-related-tag-color: var(--inverse-text-color); } diff --git a/app/javascript/src/styles/common/autocomplete.scss b/app/javascript/src/styles/common/autocomplete.scss index 24ca1e129..10281ebc1 100644 --- a/app/javascript/src/styles/common/autocomplete.scss +++ b/app/javascript/src/styles/common/autocomplete.scss @@ -1,6 +1,6 @@ .ui-autocomplete.ui-widget { font-size: var(--text-sm); - border: var(--autocomplete-border); + border: 1px solid var(--autocomplete-border-color); div.ui-menu-item-wrapper { padding: 0.25em 0.4em; diff --git a/app/javascript/src/styles/common/buttons.scss b/app/javascript/src/styles/common/buttons.scss index 0e4fdf520..5127d4cf2 100644 --- a/app/javascript/src/styles/common/buttons.scss +++ b/app/javascript/src/styles/common/buttons.scss @@ -14,16 +14,16 @@ input[type="button"], input[type="submit"], button { padding: 0.25em 1em; background: var(--form-button-background); - border: var(--form-button-border); + border: 1px solid var(--form-button-border-color); color: var(--form-button-text-color); &:hover { - box-shadow: var(--form-button-hover-box-shadow); + box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color); background: var(--form-button-hover-background); } &:active { - box-shadow: var(--form-button-hover-box-shadow); + box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color); background: var(--form-button-active-background); } } diff --git a/app/javascript/src/styles/common/jquery_ui_custom.scss b/app/javascript/src/styles/common/jquery_ui_custom.scss index 85137ce8c..751361603 100644 --- a/app/javascript/src/styles/common/jquery_ui_custom.scss +++ b/app/javascript/src/styles/common/jquery_ui_custom.scss @@ -61,7 +61,7 @@ div.ui-dialog { .ui-button { margin: 0; padding: 0.25em 1em; - border: var(--form-button-border); + border: 1px solid var(--form-button-border-color); background: var(--form-button-background); color: var(--form-button-text-color); @@ -75,12 +75,12 @@ div.ui-dialog { } &:hover { - box-shadow: var(--form-button-hover-box-shadow); + box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color); background: var(--form-button-hover-background); } &:active { - box-shadow: var(--form-button-hover-box-shadow); + box-shadow: 0 0 2px var(--form-button-hover-box-shadow-color); background: var(--form-button-active-background); color: var(--form-button-text-color); } diff --git a/app/javascript/src/styles/common/main_layout.scss b/app/javascript/src/styles/common/main_layout.scss index 60177ba70..e3c034c0d 100644 --- a/app/javascript/src/styles/common/main_layout.scss +++ b/app/javascript/src/styles/common/main_layout.scss @@ -17,7 +17,7 @@ footer#page-footer { margin-top: 1em; text-align: center; padding: 1em 0 1em; - border-top: var(--footer-border); + border-top: 1px solid var(--footer-border-color); .social-icon img { vertical-align: bottom; diff --git a/app/javascript/src/styles/common/news.scss b/app/javascript/src/styles/common/news.scss index 15f4840ab..9fde715f3 100644 --- a/app/javascript/src/styles/common/news.scss +++ b/app/javascript/src/styles/common/news.scss @@ -1,7 +1,7 @@ div#news-updates { padding: 5px; background: var(--news-updates-background); - border-bottom: var(--news-updates-border); + border-bottom: 2px solid var(--news-updates-border-color); overflow: hidden; font-size: 0.8em; diff --git a/app/javascript/src/styles/common/notices.scss b/app/javascript/src/styles/common/notices.scss index 7d415fc77..1e0b36a76 100644 --- a/app/javascript/src/styles/common/notices.scss +++ b/app/javascript/src/styles/common/notices.scss @@ -41,10 +41,10 @@ div#notice { .notice-info { background: var(--notice-info-background); - border: var(--notice-info-border); + border: 1px solid var(--notice-info-border-color); } .notice-error { background: var(--notice-error-background); - border: var(--notice-error-border); + border: 1px solid var(--notice-error-border-color); } diff --git a/app/javascript/src/styles/common/tables.scss b/app/javascript/src/styles/common/tables.scss index 91378da69..b5103517d 100644 --- a/app/javascript/src/styles/common/tables.scss +++ b/app/javascript/src/styles/common/tables.scss @@ -5,7 +5,7 @@ table.striped { tbody { tr { - border-bottom: var(--table-row-border); + border-bottom: 1px solid var(--table-row-border-color); &:hover { background: var(--table-row-hover-background); @@ -15,7 +15,7 @@ table.striped { thead { tr { - border-bottom: var(--table-header-border); + border-bottom: 1px solid var(--table-header-border-color); } th { diff --git a/app/javascript/src/styles/common/utilities.scss b/app/javascript/src/styles/common/utilities.scss index 5de2ddf5e..125d3174c 100644 --- a/app/javascript/src/styles/common/utilities.scss +++ b/app/javascript/src/styles/common/utilities.scss @@ -23,6 +23,7 @@ $spacer: 0.25rem; /* 4px */ .mb-2 { margin-bottom: 2 * $spacer; } .mb-4 { margin-bottom: 4 * $spacer; } +.mb-8 { margin-bottom: 8 * $spacer; } .ml-4 { margin-left: 4 * $spacer; } diff --git a/app/javascript/src/styles/specific/common_tooltips.scss b/app/javascript/src/styles/specific/common_tooltips.scss index e86da725b..b15282604 100644 --- a/app/javascript/src/styles/specific/common_tooltips.scss +++ b/app/javascript/src/styles/specific/common_tooltips.scss @@ -9,7 +9,7 @@ div[data-tippy-root].tooltip-loading { color: var(--text-color); background-color: var(--post-tooltip-background-color); background-clip: padding-box; - box-shadow: var(--post-tooltip-box-shadow); + box-shadow: 0 4px 14px -2px var(--post-tooltip-box-shadow-color); /* bordered arrow styling; see https://github.com/atomiks/tippyjs/blob/master/src/scss/themes/light-border.scss */ &[data-placement^=bottom] { diff --git a/app/javascript/src/styles/specific/notes.scss b/app/javascript/src/styles/specific/notes.scss index e522b3f88..b538ae27a 100644 --- a/app/javascript/src/styles/specific/notes.scss +++ b/app/javascript/src/styles/specific/notes.scss @@ -10,7 +10,7 @@ display: none; position: absolute; font-size: 14px; - border: var(--note-body-border); + border: 1px solid var(--note-body-border-color); background: var(--note-body-background); color: var(--note-body-text-color); min-width: 140px; @@ -88,7 +88,7 @@ align-items: center; text-align: center; position: absolute !important; - border: var(--note-box-border); + border: 1px solid var(--note-box-border-color); min-width: 5px; min-height: 5px; width: 100px; @@ -105,11 +105,11 @@ } &.unsaved { - border: var(--unsaved-note-box-border); + border: 2px solid var(--unsaved-note-box-border-color); } &.movable { - border: var(--movable-note-box-border); + border: 2px solid var(--movable-note-box-border-color); } &.embedded { @@ -118,7 +118,7 @@ opacity: 1; &:hover { - border: var(--note-box-border); + border: 1px solid var(--note-box-border-color); box-shadow: var(--note-box-shadow); &.editing, @@ -160,7 +160,7 @@ div#note-preview { position: absolute; cursor: crosshair; - border: var(--note-preview-border); + border: 2px solid var(--note-preview-border-color); opacity: 0.6; display: none; background: var(--note-preview-background); diff --git a/app/javascript/src/styles/specific/posts.scss b/app/javascript/src/styles/specific/posts.scss index 82fc193c1..30a95a5b5 100644 --- a/app/javascript/src/styles/specific/posts.scss +++ b/app/javascript/src/styles/specific/posts.scss @@ -102,7 +102,7 @@ div#c-posts { margin: 0.5em 0; padding: 0.5em; overflow: hidden; - border: var(--post-notice-border); + border: 1px solid var(--post-notice-border-color); p { margin-bottom: 0; @@ -172,7 +172,7 @@ div#c-posts { } #artist-commentary { - border: var(--post-artist-commentary-container-border); + border: 1px solid var(--post-artist-commentary-container-border-color); border-radius: 3px; background: var(--post-artist-commentary-container-background); margin-bottom: 0.5em; @@ -219,7 +219,7 @@ div#c-posts, div#c-uploads { /* Fetch source data box */ div#source-info { border-radius: 4px; - border: var(--fetch-source-data-border); + border: 1px solid var(--fetch-source-data-border-color); &:not(.loading) #source-info-loading { display: none; } &.loading #source-info-content { display: none; } diff --git a/app/logical/color_palette.rb b/app/logical/color_palette.rb new file mode 100644 index 000000000..45b2b8c83 --- /dev/null +++ b/app/logical/color_palette.rb @@ -0,0 +1,46 @@ +module ColorPalette + module_function + + HUES = { + grey: 265, + red: 12, + orange: 37, + yellow: 68, + green: 130, + azure: 242, + blue: 257, + purple: 282, + } + + SATURATIONS = { + grey: [17.5]*10, + red: [100, 80, 100, 100, 100, 90, 100, 90, 75, 50], + yellow: [60, 60, 60, 100, 100, 100, 100, 100, 100, 90], + green: [40, 40, 50, 90, 100, 100, 100, 100, 100, 100], + purple: [100, 70, 90, 100, 100, 100, 100, 100, 80, 80], + } + + LIGHTNESSES = [ + 97.0, # 0 + 92.0, # 1 + 84.0, # 2 + 70.5, # 3 + 61.0, # 4 + 51.2, # 5 + 40.0, # 6 + 28.0, # 7 + 19.0, # 8 + 12.0, # 9 + ] + + def css_rules + HUES.flat_map do |name, hue| + LIGHTNESSES.each_with_index.map do |lightness, i| + saturation = SATURATIONS.dig(name, i) || 100 + hex = Hsluv.hsluv_to_hex(hue, saturation, lightness) + + "--#{name}-#{i}: #{hex}; /* hsluv(#{hue}, #{saturation}, #{lightness}) */" + end + end.join("\n") + end +end diff --git a/app/views/static/colors.html.erb b/app/views/static/colors.html.erb new file mode 100644 index 000000000..ef6006687 --- /dev/null +++ b/app/views/static/colors.html.erb @@ -0,0 +1,86 @@ +
+
+

Colors

+ +
+ + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + + <% ColorPalette::HUES.each do |hue, _| %> + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + <% end %> +
<%= i %>
<%= hue %>)">
+ + + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + + <% ColorPalette::HUES.each do |hue, _| %> + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + <% end %> +
<%= i %>
<%= hue %>)"> + Aa +
+ + + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + + <% ColorPalette::HUES.each do |hue, _| %> + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + <% end %> +
<%= i %>
<%= hue %>)"> + Aa + Aa +
+ + + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + + <% ColorPalette::HUES.each do |hue, _| %> + + + <% ColorPalette::LIGHTNESSES.each_with_index do |_, i| %> + + <% end %> + + <% end %> +
<%= i %>
<%= hue %>)"> + Aa +
+
+
+
diff --git a/app/views/users/_statistics.html.erb b/app/views/users/_statistics.html.erb index 4a2d93129..f72744ad8 100644 --- a/app/views/users/_statistics.html.erb +++ b/app/views/users/_statistics.html.erb @@ -53,7 +53,7 @@ <%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email. Click here to verify your email.") %> <% end %> <% else %> - <%= exclamation_icon(class: "user-email-unverified", title: "Unverified email") %> + <%= exclamation_icon(class: "user-unverified-email-icon", title: "Unverified email") %> <% end %> <% else %> none diff --git a/config/routes.rb b/config/routes.rb index 4f4c12c15..61010d9ed 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -317,6 +317,7 @@ Rails.application.routes.draw do get "/static/keyboard_shortcuts" => "static#keyboard_shortcuts", :as => "keyboard_shortcuts" get "/static/bookmarklet" => "static#bookmarklet", :as => "bookmarklet" get "/static/site_map" => "static#site_map", :as => "site_map" + get "/static/colors" => "static#colors", :as => "colors" get "/static/contact" => "static#contact", :as => "contact" get "/static/dtext_help" => "static#dtext_help", :as => "dtext_help" get "/static/terms_of_service", to: redirect("/terms_of_service")