diff --git a/app/javascript/controllers/code_example_controller.js b/app/javascript/controllers/code_example_controller.js index d95a41517..eddb25937 100644 --- a/app/javascript/controllers/code_example_controller.js +++ b/app/javascript/controllers/code_example_controller.js @@ -6,7 +6,7 @@ export default class extends Controller { connect() { const codeBar = document.createElement("div") - codeBar.classList.add("w-full", "px-3", "py-2", "bg-code-header", "dark:bg-gray-700", "items-center", "flex", "justify-between", "font-mono", "rounded-t") + codeBar.classList.add("w-full", "px-3", "py-2", "bg-code-header", "items-center", "flex", "justify-between", "font-mono", "rounded-t") codeBar.innerHTML = "

Example

" this.blockTarget.append(codeBar) @@ -36,8 +36,8 @@ export default class extends Controller { .then((response) => response.json()) .then((data) => { const resultDiv = document.createElement("pre") - const output = ` Experimental Feature` - resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "bg-gray-300", "text-gray-700", "dark:bg-gray-900", "dark:text-gray-200", "font-mono", "relative") + const output = ` Experimental Feature` + resultDiv.classList.add("w-full", "my-2", "p-3", "rounded", "text-executed-result", "bg-executed-result-background", "font-mono", "relative") resultDiv.innerHTML = output.concat(data.output) snippet.insertAdjacentElement('afterend', resultDiv) diff --git a/app/javascript/controllers/theme-switch_controller.js b/app/javascript/controllers/theme-switch_controller.js new file mode 100644 index 000000000..2a66325be --- /dev/null +++ b/app/javascript/controllers/theme-switch_controller.js @@ -0,0 +1,40 @@ +import { Controller } from "stimulus" + +function setLightMode(target) { + target.classList.replace("dark-switch", "light-switch") + document.body.dataset.theme = 'light' +} + +function setDarkMode(target) { + target.classList.replace("light-switch", "dark-switch") + document.body.dataset.theme = 'dark' +} + +export default class extends Controller { + static targets = ["switch"] + + connect() { + const osDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches + const supportsLocalStorage = 'localStorage' in window + + if (supportsLocalStorage) { + const darkMode = localStorage.getItem('rubyapi-darkMode') + + if (darkMode !== null && darkMode === '1') { + setDarkMode(this.switchTarget) + } else if (osDarkMode && darkMode === null) { + setDarkMode(this.switchTarget) + } + } + } + + toggle() { + if (this.switchTarget.classList.contains('light-switch')) { + setDarkMode(this.switchTarget) + localStorage.setItem('rubyapi-darkMode', '1') + } else { + setLightMode(this.switchTarget) + localStorage.setItem('rubyapi-darkMode', '0') + } + } +} diff --git a/app/javascript/packs/app/application.scss b/app/javascript/packs/app/application.scss index b862f1a8b..049cba017 100644 --- a/app/javascript/packs/app/application.scss +++ b/app/javascript/packs/app/application.scss @@ -36,10 +36,6 @@ code { @apply bg-gray-300 rounded leading-relaxed text-sm text-gray-700; } -@screen dark { - code { @apply bg-gray-700 text-gray-400; } -} - pre:not(.ruby) { @apply overflow-auto font-mono; } @@ -49,19 +45,23 @@ pre:not(.ruby) { .current { & { @apply text-white bg-red-500; } - - @screen dark { - & { @apply bg-gray-700 text-gray-200; } - } } .page a, .next a, .prev a, .last a, .first a, .current { & { @apply px-2 inline-block text-center py-0 rounded; } &:hover { @apply text-white bg-red-600; } + } +} + +[data-theme="dark"] { + code { @apply bg-gray-700 text-gray-400; } - @screen dark { - &:hover { @apply bg-gray-900 text-gray-200; } - } + .pagination .current { + @apply bg-gray-700 text-gray-200; + } + + .page a, .next a, .prev a, .last a, .first a, .current { + &:hover { @apply bg-gray-900 text-gray-200; } } } @@ -71,4 +71,17 @@ pre:not(.ruby) { } } +.light-switch:before { + content: '☾'; +} + +.dark-switch:before { + content: '☼'; +} + +.dev-search-query { + @apply bg-gray-900 border-gray-800; + color: #5FB3B3; +} + /* purgecss end ignore */ diff --git a/app/views/home/index.html.slim b/app/views/home/index.html.slim index f64927b93..d09e3cc18 100644 --- a/app/views/home/index.html.slim +++ b/app/views/home/index.html.slim @@ -13,7 +13,7 @@ } } -div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6" +div class="bg-home-container-background text-white md:pt-3 md:pb-6" header id="header" class="text-white flex items-center h-16" nav class="w-full max-w-screen-xl mx-auto" role="navigation" aria-label="main navigation" div class="flex items-center justify-between px-6" @@ -23,31 +23,34 @@ div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6" = inline_svg_pack_tag "media/packs/app/logo.svg", class: "hidden md:block w-48" div class="md:w-2/12 w-6/12" div class="flex flex-row-reverse" + div class="block relative ml-4" data-controller="theme-switch" + button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme" + div.light-switch data-target="theme-switch.switch" div class="block relative ml-4" data-controller="github-links" - button class="relative z-20 text-xl hover:text-red-100 dark:hover:text-gray-400" data-action="click->github-links#toggle" + button class="relative z-20 text-xl hover:text-github-links-hover" data-action="click->github-links#toggle" i class="fab fa-github hover:fill-current" button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="github-links.linksOverlay" tabindex="-1" data-action="click->github-links#out" - div class="dropdown absolute z-50 w-64 text-gray-700 bg-white dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList" - a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/ruby/ruby" target="_blank" rel="noopener" - div class="text-gray-800 dark:text-gray-200 fill-current" + div class="dropdown absolute z-50 w-64 text-github-links bg-github-links-background shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList" + a class="block p-2 rounded hover:bg-github-link-hover-background" href="https://github.com/ruby/ruby" target="_blank" rel="noopener" + div class="text-github-link fill-current" i class="fab fa-github inline-block mr-2" h1 class="inline text-lg font-semibold" ruby/ruby p class="text-xs py-1" Ruby is an interpreted object-oriented programming language often used for web development. It also offers many scripting features to process plain text and serialized files, or manage system tasks. It is simple, straightforward, and extensible. hr class="my-2" - a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener" - div class="text-gray-800 dark:text-gray-200 fill-current" + a class="block p-2 rounded hover:bg-github-link-hover-background" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener" + div class="text-github-link fill-current" i class="fab fa-github inline-block mr-2" h1 class="inline text-lg font-semibold" rubyapi/rubyapi p class="text-xs py-1" Ruby API is a Ruby on Rails app that makes browsing and searching Ruby's documentation easy and fast for users. div class="relative" data-controller="ruby-version" - button class="relative z-20 text-xl pl-2 hover:text-red-100 dark:hover:text-gray-400 hover:fill-current" data-action="click->ruby-version#toggle" + button class="relative z-20 text-xl pl-2 hover:text-ruby-version-hover hover:fill-current" data-action="click->ruby-version#toggle" | #{ruby_version} i class="ml-2 fas fa-caret-down" button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="ruby-version.versionOverlay" tabindex="-1" data-action="click->ruby-version#out" - div class="dropdown absolute w-32 bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList" + div class="dropdown text-ruby-version-list bg-ruby-version-list-background absolute w-32 shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList" - available_ruby_versions.each do |version| - a class="block px-4 py-1 text-l hover:bg-gray-200 dark:hover:bg-gray-800" href="#{route_for_version version}" + a class="block px-4 py-1 text-l hover:bg-ruby-version-list-item-hover-background" href="#{route_for_version version}" | #{version} div class="flex flex-col justify-center items-center p-6 md:pt-6 pt-0 text-center" h2 class="md:text-3xl text-2xl font-light my-3" Search and Explore Ruby Documentation @@ -61,33 +64,33 @@ div class="bg-red-600 dark:bg-gray-700 text-white md:pt-3 md:pb-6" div class="p-6 max-w-screen-xl mx-auto" div class="flex flex-wrap" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" String - p class="py-1 dark:text-gray-500" A String object holds and manipulates an arbitrary sequence of bytes, typically representing characters. + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" String + p class="py-1 text-core-class" A String object holds and manipulates an arbitrary sequence of bytes, typically representing characters. = link_to "Read more", object_path(object: "string", version: ruby_version), class: "text-blue-400 hover:underline" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Integer - p class="py-1 dark:text-gray-500" Represent whole numbers in Ruby + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" Integer + p class="py-1 text-core-class" Represent whole numbers in Ruby br = link_to "Read more", object_path(object: "integer", version: ruby_version), class: "text-blue-400 hover:underline" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Array - p class="py-1 dark:text-gray-500" Arrays are ordered, integer-indexed collections of any object. + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" Array + p class="py-1 text-core-class" Arrays are ordered, integer-indexed collections of any object. = link_to "Read more", object_path(object: "array", version: ruby_version), class: "text-blue-400 hover:underline" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Hash - p class="py-1 dark:text-gray-500" A Hash is a dictionary-like collection of unique keys and their values. + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" Hash + p class="py-1 text-core-class" A Hash is a dictionary-like collection of unique keys and their values. = link_to "Read more", object_path(object: "hash", version: ruby_version), class: "text-blue-400 hover:underline" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Symbol - p class="py-1 dark:text-gray-500" Symbol objects represent names and some strings inside the Ruby interpreter. + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" Symbol + p class="py-1 text-core-class" Symbol objects represent names and some strings inside the Ruby interpreter. = link_to "Read more", object_path(object: "symbol", version: ruby_version), class: "text-blue-400 hover:underline" div class="block w-full md:w-6/12 md:p-3 py-3" - div class="p-3 h-full border border-gray-300 dark:border-gray-700 rounded" - h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200" Kernel - p class="py-1 dark:text-gray-500" The Kernel module is included by class Object, so its methods are available in every Ruby object. - = link_to "Read more", object_path(object: "kernel", version: ruby_version), class: "text-blue-400 hover:underline" \ No newline at end of file + div class="p-3 h-full border border-core-class-border rounded" + h2 class="text-xl font-semibold text-core-class-title" Kernel + p class="py-1 text-core-class" The Kernel module is included by class Object, so its methods are available in every Ruby object. + = link_to "Read more", object_path(object: "kernel", version: ruby_version), class: "text-blue-400 hover:underline" diff --git a/app/views/layouts/_header.html.slim b/app/views/layouts/_header.html.slim index fc9e55629..94a49f0c7 100644 --- a/app/views/layouts/_header.html.slim +++ b/app/views/layouts/_header.html.slim @@ -1,5 +1,5 @@ -# frozen_string_literal: true -header id="header" class="text-white bg-red-600 dark:bg-gray-700 flex items-center fixed top-0 inset-x-0 z-50 h-16" +header id="header" class="text-white bg-header-background flex items-center fixed top-0 inset-x-0 z-50 h-16" nav class="w-full max-w-screen-xl mx-auto" role="navigation" aria-label="main navigation" div class="flex items-center justify-between px-3" div class="lg:w-2/12 w-2/12" @@ -11,33 +11,36 @@ header id="header" class="text-white bg-red-600 dark:bg-gray-700 flex items-cent = form_tag search_url(version: ruby_version), method: :get do button type="submit" class="absolute left inset-y-0 px-4" aria-label="search" span data-target="search.button" class="fa fa-search" - input id="search" name="q" data-target="search.input" data-action="keyup->search#autocomplete" class="bg-red-800 dark:bg-gray-800 rounded px-3 pl-10 py-2 w-full outline-none placeholder-white placeholder-opacity-100 focus:bg-white focus:text-black" value="#{search_query}" type="text" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Search Ruby Documentation" aria-label="Search" title="Search" + input id="search" name="q" data-target="search.input" data-action="keyup->search#autocomplete" class="bg-header-autocomplete-background rounded px-3 pl-10 py-2 w-full outline-none placeholder-white placeholder-opacity-100 focus:bg-white focus:text-black" value="#{search_query}" type="text" autocapitalize="off" autocorrect="off" autocomplete="off" placeholder="Search Ruby Documentation" aria-label="Search" title="Search" div data-target="search.autocomplete" class="w-full bg-white absolute shadow-lg rounded-bl rounded-br -mt-1" div class="w-2/12" div class="flex flex-row-reverse" + div class="block relative ml-4" data-controller="theme-switch" + button id="darkmode-toggle" class="relative z-20 text-xl" data-action="theme-switch#toggle" aria-label="Toggle theme" title="Toggle theme" + div.light-switch data-target="theme-switch.switch" div class="hidden md:block relative ml-4" data-controller="github-links" - button class="relative z-20 text-xl hover:text-red-100 dark:hover:text-gray-400" data-action="click->github-links#toggle" + button class="relative z-20 text-xl hover:text-header-github-link-hover" data-action="click->github-links#toggle" i class="fab fa-github hover:fill-current" button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="github-links.linksOverlay" tabindex="-1" data-action="click->github-links#out" - div class="dropdown absolute z-50 w-64 text-gray-700 bg-white dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList" - a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/ruby/ruby" target="_blank" rel="noopener" - div class="text-gray-800 dark:text-gray-200 fill-current" + div class="dropdown absolute z-50 w-64 text-header-github-links bg-header-github-links-background shadow-xl rounded py-2 right-0 invisible p-2 z-50" data-target="github-links.linksList" + a class="block p-2 rounded hover:bg-header-github-link-hover-background" href="https://github.com/ruby/ruby" target="_blank" rel="noopener" + div class="text-header-github-repo fill-current" i class="fab fa-github inline-block mr-2" h1 class="inline text-lg font-semibold" ruby/ruby p class="text-xs py-1" Ruby is an interpreted object-oriented programming language often used for web development. It also offers many scripting features to process plain text and serialized files, or manage system tasks. It is simple, straightforward, and extensible. hr class="my-2" - a class="block p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-800" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener" - div class="text-gray-800 dark:text-gray-200 fill-current" + a class="block p-2 rounded hover:bg-header-github-link-hover-background" href="https://github.com/rubyapi/rubyapi" target="_blank" rel="noopener" + div class="text-header-github-repo fill-current" i class="fab fa-github inline-block mr-2" h1 class="inline text-lg font-semibold" rubyapi/rubyapi p class="text-xs py-1" Ruby API is a Ruby on Rails app that makes browsing and searching Ruby's documentation easy and fast for users. div class="relative" data-controller="ruby-version" - button class="relative z-20 md:text-xl text-l pl-2 hover:text-red-100 dark:hover:text-gray-400 hover:fill-current" data-action="click->ruby-version#toggle" aria-label="Show github links" + button class="relative z-20 md:text-xl text-l pl-2 hover:text-header-github-link-hover hover:fill-current" data-action="click->ruby-version#toggle" aria-label="Show github links" | #{ruby_version} i class="ml-2 fas fa-caret-down" button class="dropdown-overlay fixed inset-0 w-full h-full bg-black opacity-25 cursor-default invisible z-50" data-target="ruby-version.versionOverlay" tabindex="-1" data-action="click->ruby-version#out" - div class="dropdown absolute w-32 bg-white text-gray-700 dark:bg-gray-900 dark:text-gray-400 shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList" + div class="dropdown absolute w-32 text-header-ruby-version-list bg-header-ruby-version-list-background shadow-xl rounded py-2 right-0 invisible z-50" data-target="ruby-version.versionList" - available_ruby_versions.each do |version| - a class="block px-4 py-1 text-l hover:bg-gray-200 dark:hover:bg-gray-800" href="#{route_for_version version}" - | #{version} \ No newline at end of file + a class="block px-4 py-1 text-l hover:bg-header-github-link-hover-background" href="#{route_for_version version}" + | #{version} diff --git a/app/views/layouts/application.html.slim b/app/views/layouts/application.html.slim index 953e42e48..19b4aab5a 100644 --- a/app/views/layouts/application.html.slim +++ b/app/views/layouts/application.html.slim @@ -10,6 +10,6 @@ html lang="en" = javascript_pack_tag 'application', defer: true = content_for(:head) - body class="bg-white text-gray-700 dark:bg-gray-800 dark:text-gray-400" + body class="text-body bg-background" data-theme="light" = render "layouts/header" unless homepage? = yield diff --git a/app/views/objects/show.html.slim b/app/views/objects/show.html.slim index 92bc76e3f..3f2da7532 100644 --- a/app/views/objects/show.html.slim +++ b/app/views/objects/show.html.slim @@ -8,61 +8,61 @@ div class="max-w-screen-xl mx-auto px-3 md:px-0 lg:flex" div class="overflow-y-auto mt-24 pl-3 pr-6 h-93" - unless @object.ruby_methods.select(&:class_method?).empty? div class="mb-3" - h3 class="font-bold text-gray-700 dark:text-gray-200 p-1 px-2" + h3 class="font-bold text-object-method-title p-1 px-2" | Class Methods ul class="font-mono text-sm" - @object.ruby_methods.select(&:class_method?).sort_by(&:name).each do |m| li - a href="##{method_anchor(m)}" class="inline-block w-full py-1 px-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700" + a href="##{method_anchor(m)}" class="inline-block w-full py-1 px-2 rounded hover:bg-object-method-link-hover-background" | :: #{m.name} - unless @object.ruby_methods.select(&:instance_method?).empty? div class="mb-3" - h3 class="font-bold text-gray-700 dark:text-gray-200 p-1 px-2" + h3 class="font-bold text-object-method-title p-1 px-2" | Instance Methods ul class="font-mono text-sm" - @object.ruby_methods.select(&:instance_method?).sort_by(&:name).each do |m| li - a href="##{method_anchor(m)}" class="inline-block w-full py-1 px-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700" + a href="##{method_anchor(m)}" class="inline-block w-full py-1 px-2 rounded hover:bg-object-method-link-hover-background" | # #{m.name} div class="w-full mt-16 lg:mt-20 lg:w-3/4" div class="md:p-3 py-3" div class="flex flex-wrap" div class="w-full md:w-6/12" - h1 class="lg:text-3xl text-xl text-gray-800 dark:text-gray-200 font-semibold" + h1 class="lg:text-3xl text-xl text-object-title font-semibold" a href="#{object_url(version: ruby_version, object: @object.path)}" | #{@object.name} div class="w-full md:w-6/12 md:text-right mt-2 md:mt-0 cursor-default" - if @object.class_object? - span class="py-1 px-2 rounded bg-gray-200 dark:bg-gray-700 text-sm" + span class="py-1 px-2 rounded bg-object-label-background text-sm" | Class - elsif @object.module_object? - span class="py-1 px-3 rounded bg-gray-200 dark:bg-gray-700 text-sm" + span class="py-1 px-3 rounded bg-object-label-background text-sm" | Module div class="ruby-documentation" == @object.description - hr + hr class="border-core-class-border" - @object.ruby_methods.sort_by(&:name).each do |m| div class="md:p-3 py-3 my-3" a style="display: block; position: relative; top: -80px; visibility: hidden;" id="#{method_anchor m}" div class="flex flex-wrap" div class="w-full md:w-10/12" - if m.call_sequence.empty? - h4 class="lg:text-2xl text-lg text-gray-900 dark:text-gray-200 font-semibold" + h4 class="lg:text-2xl text-lg text-object-callseq-title font-semibold" a href="##{method_anchor(m)}" | #{m.name} - else a href="##{method_anchor(m)}" - m.call_sequence.each do |seq| - h4 class="lg:text-2xl text-lg text-gray-900 dark:text-gray-200 font-semibold" + h4 class="lg:text-2xl text-lg text-object-callseq-title font-semibold" = seq div class="flex md:justify-end w-full md:w-2/12 mt-3 md:mt-0 font-mono" - if m.instance_method? - a class="px-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" title="Instance Method" + a class="px-2 h-6 inline-block rounded bg-object-type-background algin-middle cursor-default hover:text-object-type-hover hover:bg-object-type-hover-background hover:fill-current" title="Instance Method" | # - elsif m.class_method? - a class="px-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 algin-middle cursor-default hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" title="Class Method" + a class="px-2 h-6 inline-block rounded bg-object-type-background algin-middle cursor-default hover:text-object-type-hover hover:bg-object-type-hover-background hover:fill-current" title="Class Method" | :: - a class="px-1 ml-2 h-6 inline-block rounded bg-gray-200 dark:bg-gray-700 align-middle hover:bg-gray-300 hover:text-gray-800 dark:hover:bg-gray-900 dark:hover:text-gray-400 hover:fill-current" href="#{github_url m}" target="_blank" rel="noopener" title="View source on Github" + a class="px-1 ml-2 h-6 inline-block rounded bg-object-type-background align-middle hover:text-object-type-hover hover:bg-object-type-hover-background hover:fill-current" href="#{github_url m}" target="_blank" rel="noopener" title="View source on Github" i class="fab fa-github" div class="ruby-documentation py-1" - if m.description.empty? diff --git a/app/views/search/index.html.slim b/app/views/search/index.html.slim index 979bd960f..58330a245 100644 --- a/app/views/search/index.html.slim +++ b/app/views/search/index.html.slim @@ -4,17 +4,17 @@ div class="max-w-screen-xl mx-auto md:px-6 px-3 pt-20" div class="md:p-3 py-3 pb-5 border-b border-gray-200" - h1 class="md:text-3xl text-xl font-semibold text-gray-800 dark:text-gray-200" + h1 class="md:text-3xl text-xl font-semibold text-search-title" | Results for: "#{search_query}" - @search.results.each do |r| - div class="md:p-3 py-3 my-1 rounded dark:text-gray-500" + div class="md:p-3 py-3 my-1 rounded text-result-text" div class="flex" div class="w-full" - if r.is_a? RubyMethod - h4 class="md:text-2xl text-lg overflow-wrap-break-word font-semibold text-gray-800 dark:text-white" + h4 class="md:text-2xl text-lg overflow-wrap-break-word font-semibold text-result-title" = link_to r.identifier, result_url(r, version: ruby_version) - else - h4 class="md:text-2xl text-lg overflow-wrap-break-word font-semibold text-gray-800 dark:text-white" + h4 class="md:text-2xl text-lg overflow-wrap-break-word font-semibold text-result-title" = link_to r.constant, result_url(r, version: ruby_version) - if r.description.empty? div No documentation available @@ -28,11 +28,11 @@ div class="max-w-screen-xl mx-auto md:px-6 px-3 pt-20" div class="border-t border-gray-200 mt-1 py-2" span class="text-gray-600" | Search took: #{@search.response["took"]}ms - span + span |  ·  span class="text-gray-600" | Total Results: #{@search.total} - if Rails.env.development? - div class="border border-gray-200 p-3 mt-1 bg-gray-100" - pre + div class="border p-3 mt-1 dev-search-query" + pre class="json" = JSON.pretty_generate @search.query diff --git a/package.json b/package.json index d1b0dcf64..4a4645d57 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,8 @@ "mustache": "^4.0.1", "postcss-cssnext": "^3.1.0", "stimulus": "^1.1.1", - "tailwindcss": "^1.2.0" + "tailwindcss": "^1.2.0", + "tailwindcss-theming": "^2.4.3" }, "devDependencies": { "webpack-dev-server": "^3.10.3" diff --git a/tailwind.config.js b/tailwind.config.js index d79d764e7..6cd466e70 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,33 +1,10 @@ const _ = require('lodash') module.exports = { - theme: { - extend: { - screens: { - dark: {'raw': '(prefers-color-scheme: dark)'}, - }, - colors: { - code: { - "header": "#2f3e46", - "background": "#1b2b34", - "text": "#d8dee9" - }, - red: { - "100": "#f2d7d8", - "200": "#f3b8bc", - "300": "#f399a5", - "400": "#f0667f", - "500": "#ea3a66", - "600": "#e1175a", - "700": "#d10f4a", - "800": "#bb0c3f", - "900": "#a20c36", - }, - } - } - }, + theme: {}, variants: {}, plugins: [ + require('./theme.config'), ({ addUtilities, addVariant, config, e, theme }) => { addUtilities(_.map(config('theme.screens'), (value, key) => { return { diff --git a/theme.config.js b/theme.config.js new file mode 100644 index 000000000..145f9cd0e --- /dev/null +++ b/theme.config.js @@ -0,0 +1,163 @@ +const { ThemeBuilder, Theme } = require('tailwindcss-theming'); + +const lightTheme = new Theme() + .name('light') + .default() + .assignable() + .colors({ + // Tailwind‘s colors + 'white': '#ffffff', + 'black': '#000', + + 'blue-400': '#63b3ed', + + 'gray-100': '#f7fafc', + 'gray-200': '#edf2f7', + 'gray-300': '#e2e8f0', + 'gray-400': '#cbd5e0', + 'gray-500': '#a0aec0', + 'gray-600': '#718096', + 'gray-700': '#4a5568', + 'gray-800': '#2d3748', + 'gray-900': '#1a202c', + + // RubyAPI‘s custom red + 'red-100': '#f2d7d8', + 'red-200': '#f3b8bc', + 'red-300': '#f399a5', + 'red-400': '#f0667f', + 'red-500': '#ea3a66', + 'red-600': '#e1175a', + 'red-700': '#d10f4a', + 'red-800': '#bb0c3f', + 'red-900': '#a20c36', + + 'background': '#ffffff', + 'body': '#4a5568', + + 'home-container-background': '#e1175a', + 'github-links-hover': '#f2d7d8', + 'github-links': '#4a5568', + 'github-links-background': '#ffffff', + 'github-link-hover-background': '#edf2f7', + 'github-link': '#2d3748', + 'ruby-version-hover': '#f2d7d8', + 'ruby-version-list': '#4a5568', + 'ruby-version-list-background': '#ffffff', + 'ruby-version-list-item-hover-background': '#edf2f7', + 'core-class-border': '#e2e8f0', + 'core-class-title': '#2d3748', + 'core-class': '#4a5568', + 'header-background': '#e1175a', + 'header-autocomplete-background': '#bb0c3f', + 'header-github-link-hover': '#f2d7d8', + 'header-github-links': '#4a5568', + 'header-github-links-background': '#ffffff', + 'header-github-link-hover-background': '#edf2f7', + 'header-github-repo': '#2d3748', + 'header-ruby-version-list': '#4a5568', + 'header-ruby-version-list-background': '#ffffff', + 'object-method-title': '#4a5568', + 'object-method-link-hover-background': '#edf2f7', + 'object-title': '#2d3748', + 'object-label-background': '#edf2f7', + 'object-callseq-title': '#1a202c', + 'object-type': '#edf2f7', + 'object-type-background': '#edf2f7', + 'object-type-hover-background': '#e2e8f0', + 'object-type-hover': '#2d3748', + 'search-title': '#2d3748', + 'result-text': '#4a5568', + 'result-title': '#2d3748', + 'experiment-notice': '#4a5568', + 'experiment-notice-background': '#cbd5e0', + 'executed-result': '#4a5568', + 'executed-result-background': '#e2e8f0', + + 'code-header': '#2f3e46', + 'code-background': '#1b2b34', + 'code-text': '#d8dee9', + }) +; + +const darkTheme = new Theme() + .name('dark') + .colors({ + // Tailwind‘s colors + 'white': '#fff', + 'black': '#000', + + 'blue-400': '#63b3ed', + + 'gray-100': '#f7fafc', + 'gray-200': '#edf2f7', + 'gray-300': '#e2e8f0', + 'gray-400': '#cbd5e0', + 'gray-500': '#a0aec0', + 'gray-600': '#718096', + 'gray-700': '#4a5568', + 'gray-800': '#2d3748', + 'gray-900': '#1a202c', + + // RubyAPI‘s custom red + 'red-100': '#f2d7d8', + 'red-200': '#f3b8bc', + 'red-300': '#f399a5', + 'red-400': '#f0667f', + 'red-500': '#ea3a66', + 'red-600': '#e1175a', + 'red-700': '#d10f4a', + 'red-800': '#bb0c3f', + 'red-900': '#a20c36', + + 'background':'#2d3748', + 'body': '#cbd5e0', + + 'home-container-background': '#4a5568', + 'github-links-hover': '#cbd5e0', + 'github-links': '#cbd5e0', + 'github-links-background': '#1a202c', + 'github-link-hover-background': '#2d3748', + 'github-link': '#edf2f7', + 'ruby-version-hover': '#cbd5e0', + 'ruby-version-list': '#cbd5e0', + 'ruby-version-list-background': '#1a202c', + 'ruby-version-list-item-hover-background': '#2d3748', + 'core-class-border': '#4a5568', + 'core-class-title': '#edf2f7', + 'core-class': '#a0aec0', + 'header-background': '#4a5568', + 'header-autocomplete-background': '#2d3748', + 'header-github-link-hover': '#cbd5e0', + 'header-github-links': '#cbd5e0', + 'header-github-links-background': '#1a202c', + 'header-github-link-hover-background': '#2d3748', + 'header-github-repo': '#edf2f7', + 'header-ruby-version-list': '#cbd5e0', + 'header-ruby-version-list-background': '#1a202c', + 'object-method-title': '#edf2f7', + 'object-method-link-hover-background': '#4a5568', + 'object-title': '#edf2f7', + 'object-label-background': '#4a5568', + 'object-callseq-title': '#edf2f7', + 'object-type-background': '#4a5568', + 'object-type-hover-background': '#1a202c', + 'object-type-hover': '#cbd5e0', + 'search-title': '#edf2f7', + 'result-text': '#a0aec0', + 'result-title': '#ffffff', + 'experiment-notice': '#edf2f7', + 'experiment-notice-background': '#2d3748', + 'executed-result': '#edf2f7', + 'executed-result-background': '#1a202c', + + 'code-header': '#4a5568', + 'code-background': '#1b2b34', + 'code-text': '#d8dee9', + }) +; + +module.exports = new ThemeBuilder() + .asDataThemeAttribute() + .default(lightTheme) + .dark(darkTheme); diff --git a/yarn.lock b/yarn.lock index f12ce523a..9c6d8477f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -871,6 +871,11 @@ resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.28.tgz#1091bdfe63b3f139441e9cba27aa022bff97d8b2" integrity sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg== +"@ctrl/tinycolor@^2.5.3": + version "2.6.1" + resolved "https://registry.yarnpkg.com/@ctrl/tinycolor/-/tinycolor-2.6.1.tgz#0e78cc836a1fd997a9a22fa1c26c555411882160" + integrity sha512-xKN3lAA+xbNhP+JX3sLhzA65IGiKqun/Yf9jBlZX7Og0SxlCrrqKxqTd6ccn20fv3Cgcvq6KnjPhnmS+v7uAwQ== + "@fortawesome/fontawesome-svg-core@^1.2.28": version "1.2.28" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.28.tgz#e5b8c8814ef375f01f5d7c132d3c3a2f83a3abf9" @@ -7730,6 +7735,13 @@ svgo@^1.0.0: unquote "~1.1.1" util.promisify "~1.0.0" +tailwindcss-theming@^2.4.3: + version "2.4.3" + resolved "https://registry.yarnpkg.com/tailwindcss-theming/-/tailwindcss-theming-2.4.3.tgz#af50736c1dd8235d837b2f82bd788b587f5cf45d" + integrity sha512-QIX29c1hunS5PYCvlQ32ulV/0j94Fu/Rq/UkFzHBkrUi22Ohv5Zg5/w6zArJu9Tv4OqaYgsBb/aWEqJfKY5wlQ== + dependencies: + "@ctrl/tinycolor" "^2.5.3" + tailwindcss@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.2.0.tgz#5df317cebac4f3131f275d258a39da1ba3a0f291"