From 3451211c2c87f00d669f174f27707a15e2a75ef4 Mon Sep 17 00:00:00 2001 From: Rebecca Le <543859+sevenseacat@users.noreply.github.com> Date: Mon, 30 Jan 2023 22:21:42 +0800 Subject: [PATCH] improvement: Colour unification (#84) --- assets/css/app.css | 2 +- assets/css/syntax.css | 436 +++--------------- lib/ash_hq_web/components/app_view/top_bar.ex | 8 +- lib/ash_hq_web/components/right_nav.ex | 56 +-- lib/ash_hq_web/components/search.ex | 222 ++++----- lib/ash_hq_web/components/tree_view.ex | 2 +- lib/ash_hq_web/components/version_pills.ex | 2 +- lib/ash_hq_web/pages/media.ex | 6 +- 8 files changed, 210 insertions(+), 524 deletions(-) diff --git a/assets/css/app.css b/assets/css/app.css index 29d3672..7f9404d 100644 --- a/assets/css/app.css +++ b/assets/css/app.css @@ -9,7 +9,7 @@ @import "./_components.css"; .search-hit { - color: #fb923c; + @apply text-primary-light-500 dark:text-primary-dark-300 } /* Alerts and form errors used by phx.new */ diff --git a/assets/css/syntax.css b/assets/css/syntax.css index 468ec1c..488708c 100644 --- a/assets/css/syntax.css +++ b/assets/css/syntax.css @@ -1,373 +1,69 @@ -.dark .inline { - background-color: #404040; - border-radius: 0.1rem; -} +/*! tomorrow night bright; https://github.com/MozMorris/tomorrow-pygments */ +.dark .highlight, .dark .highlight pre, .dark .highlight table { color: #eaeaea; } +.dark .highlight .c { color: #969896; } /* Comment */ +.dark .highlight .err { color: #d54e53; } /* Error */ +.dark .highlight .k { color: #c397d8; } /* Keyword */ +.dark .highlight .l { color: #e78c45; } /* Literal */ +.dark .highlight .n, .dark .highlight .h { color: #eaeaea; } /* Name */ +.dark .highlight .o { color: #70c0b1; } /* Operator */ +.dark .highlight .p { color: #eaeaea; } /* Punctuation */ +.dark .highlight .cm { color: #969896; } /* Comment.Multiline */ +.dark .highlight .cp { color: #969896; } /* Comment.Preproc */ +.dark .highlight .c1 { color: #969896; } /* Comment.Single */ +.dark .highlight .cs { color: #969896; } /* Comment.Special */ +.dark .highlight .gd { color: #d54e53; } /* Generic.Deleted */ +.dark .highlight .ge { font-style: italic; } /* Generic.Emph */ +.dark .highlight .gh { color: #eaeaea; font-weight: bold; } /* Generic.Heading */ +.dark .highlight .gi { color: #b9ca4a; } /* Generic.Inserted */ +.dark .highlight .gp { color: #969896; font-weight: bold; } /* Generic.Prompt */ +.dark .highlight .gs { font-weight: bold; } /* Generic.Strong */ +.dark .highlight .gu { color: #70c0b1; font-weight: bold; } /* Generic.Subheading */ +.dark .highlight .kc { color: #c397d8; } /* Keyword.Constant */ +.dark .highlight .kd { color: #c397d8; } /* Keyword.Declaration */ +.dark .highlight .kn { color: #70c0b1; } /* Keyword.Namespace */ +.dark .highlight .kp { color: #c397d8; } /* Keyword.Pseudo */ +.dark .highlight .kr { color: #c397d8; } /* Keyword.Reserved */ +.dark .highlight .kt { color: #e7c547; } /* Keyword.Type */ +.dark .highlight .ld { color: #b9ca4a; } /* Literal.Date */ +.dark .highlight .m { color: #e78c45; } /* Literal.Number */ +.dark .highlight .s { color: #b9ca4a; } /* Literal.String */ +.dark .highlight .na { color: #7aa6da; } /* Name.Attribute */ +.dark .highlight .nb { color: #eaeaea; } /* Name.Builtin */ +.dark .highlight .nc { color: #e7c547; } /* Name.Class */ +.dark .highlight .no { color: #d54e53; } /* Name.Constant */ +.dark .highlight .nd { color: #70c0b1; } /* Name.Decorator */ +.dark .highlight .ni { color: #eaeaea; } /* Name.Entity */ +.dark .highlight .ne { color: #d54e53; } /* Name.Exception */ +.dark .highlight .nf { color: #7aa6da; } /* Name.Function */ +.dark .highlight .nl { color: #eaeaea; } /* Name.Label */ +.dark .highlight .nn { color: #e7c547; } /* Name.Namespace */ +.dark .highlight .nx { color: #7aa6da; } /* Name.Other */ +.dark .highlight .py { color: #eaeaea; } /* Name.Property */ +.dark .highlight .nt { color: #70c0b1; } /* Name.Tag */ +.dark .highlight .nv { color: #d54e53; } /* Name.Variable */ +.dark .highlight .ow { color: #70c0b1; } /* Operator.Word */ +.dark .highlight .w { color: #eaeaea; } /* Text.Whitespace */ +.dark .highlight .mf { color: #e78c45; } /* Literal.Number.Float */ +.dark .highlight .mh { color: #e78c45; } /* Literal.Number.Hex */ +.dark .highlight .mi { color: #e78c45; } /* Literal.Number.Integer */ +.dark .highlight .mo { color: #e78c45; } /* Literal.Number.Oct */ +.dark .highlight .sb { color: #b9ca4a; } /* Literal.String.Backtick */ +.dark .highlight .sc { color: #eaeaea; } /* Literal.String.Char */ +.dark .highlight .sd { color: #969896; } /* Literal.String.Doc */ +.dark .highlight .s2 { color: #b9ca4a; } /* Literal.String.Double */ +.dark .highlight .se { color: #e78c45; } /* Literal.String.Escape */ +.dark .highlight .sh { color: #b9ca4a; } /* Literal.String.Heredoc */ +.dark .highlight .si { color: #e78c45; } /* Literal.String.Interpol */ +.dark .highlight .sx { color: #b9ca4a; } /* Literal.String.Other */ +.dark .highlight .sr { color: #b9ca4a; } /* Literal.String.Regex */ +.dark .highlight .s1 { color: #b9ca4a; } /* Literal.String.Single */ +.dark .highlight .ss { color: #b9ca4a; } /* Literal.String.Symbol */ +.dark .highlight .bp { color: #eaeaea; } /* Name.Builtin.Pseudo */ +.dark .highlight .vc { color: #d54e53; } /* Name.Variable.Class */ +.dark .highlight .vg { color: #d54e53; } /* Name.Variable.Global */ +.dark .highlight .vi { color: #d54e53; } /* Name.Variable.Instance */ +.dark .highlight .il { color: #e78c45; } /* Literal.Number.Integer.Long */ -.dark .highlight pre { - background-color: #404040 -} - -.dark .highlight .hll { - background-color: #404040 -} - -.dark .highlight .c { - color: #999999; - font-style: italic -} - -/* Comment */ -/* .dark .highlight .err { - color: #a61717; - background-color: #e3d2d2 -} */ - -/* Error */ -.dark .highlight .g { - color: #d0d0d0 -} - -/* Generic */ -.dark .highlight .k { - color: #6ab825; - font-weight: bold -} - -/* Keyword */ -.dark .highlight .l { - color: #d0d0d0 -} - -/* Literal */ -.dark .highlight .n { - color: #d0d0d0 -} - -/* Name */ -.dark .highlight .o { - color: #d0d0d0 -} - -/* Operator */ -.dark .highlight .x { - color: #d0d0d0 -} - -/* Other */ -.dark .highlight .p { - color: #d0d0d0 -} - -/* Punctuation */ -.dark .highlight .cm { - color: #999999; - font-style: italic -} - -/* Comment.Multiline */ -.dark .highlight .cp { - color: #cd2828; - font-weight: bold -} - -/* Comment.Preproc */ -.dark .highlight .c1 { - color: #999999; - font-style: italic -} - -/* Comment.Single */ -.dark .highlight .cs { - color: #e50808; - font-weight: bold; - background-color: #520000 -} - -/* Comment.Special */ -.dark .highlight .gd { - color: #d22323 -} - -/* Generic.Deleted */ -.dark .highlight .ge { - color: #d0d0d0; - font-style: italic -} - -/* Generic.Emph */ -.dark .highlight .gr { - color: #d22323 -} - -/* Generic.Error */ -.dark .highlight .gh { - color: #ffffff; - font-weight: bold -} - -/* Generic.Heading */ -.dark .highlight .gi { - color: #589819 -} - -/* Generic.Inserted */ -.dark .highlight .go { - color: #cccccc -} - -/* Generic.Output */ -.dark .highlight .gp { - color: #aaaaaa -} - -/* Generic.Prompt */ -.dark .highlight .gs { - color: #d0d0d0; - font-weight: bold -} - -/* Generic.Strong */ -.dark .highlight .gu { - color: #ffffff; - text-decoration: underline -} - -/* Generic.Subheading */ -.dark .highlight .gt { - color: #d22323 -} - -/* Generic.Traceback */ -.dark .highlight .kc { - color: #6ab825; - font-weight: bold -} - -/* Keyword.Constant */ -.dark .highlight .kd { - color: #6ab825; - font-weight: bold -} - -/* Keyword.Declaration */ -.dark .highlight .kn { - color: #6ab825; - font-weight: bold -} - -/* Keyword.Namespace */ -.dark .highlight .kp { - color: #6ab825 -} - -/* Keyword.Pseudo */ -.dark .highlight .kr { - color: #6ab825; - font-weight: bold -} - -/* Keyword.Reserved */ -.dark .highlight .kt { - color: #6ab825; - font-weight: bold -} - -/* Keyword.Type */ -.dark .highlight .ld { - color: #d0d0d0 -} - -/* Literal.Date */ -.dark .highlight .m { - color: #3677a9 -} - -/* Literal.Number */ -.dark .highlight .s { - color: #ed9d13 -} - -/* Literal.String */ -.dark .highlight .na { - color: #bbbbbb -} - -/* Name.Attribute */ -.dark .highlight .nb { - color: #24909d -} - -/* Name.Builtin */ -.dark .highlight .nc { - color: #447fcf; -} - -/* Name.Class */ -.dark .highlight .no { - color: #40ffff -} - -/* Name.Constant */ -.dark .highlight .nd { - color: #ffa500 -} - -/* Name.Decorator */ -.dark .highlight .ni { - color: #d0d0d0 -} - -/* Name.Entity */ -.dark .highlight .ne { - color: #bbbbbb -} - -/* Name.Exception */ -.dark .highlight .nf { - color: #447fcf -} - -/* Name.Function */ -.dark .highlight .nl { - color: #d0d0d0 -} - -/* Name.Label */ -.dark .highlight .nn { - color: #447fcf; -} - -/* Name.Namespace */ -.dark .highlight .nx { - color: #d0d0d0 -} - -/* Name.Other */ -.dark .highlight .py { - color: #d0d0d0 -} - -/* Name.Property */ -.dark .highlight .nt { - color: #6ab825; - font-weight: bold -} - -/* Name.Tag */ -.dark .highlight .nv { - color: #40ffff -} - -/* Name.Variable */ -.dark .highlight .ow { - color: #6ab825; - font-weight: bold -} - -/* Operator.Word */ -.dark .highlight .w { - color: #666666 -} - -/* Text.Whitespace */ -.dark .highlight .mf { - color: #3677a9 -} - -/* Literal.Number.Float */ -.dark .highlight .mh { - color: #3677a9 -} - -/* Literal.Number.Hex */ -.dark .highlight .mi { - color: #3677a9 -} - -/* Literal.Number.Integer */ -.dark .highlight .mo { - color: #3677a9 -} - -/* Literal.Number.Oct */ -.dark .highlight .sb { - color: #ed9d13 -} - -/* Literal.String.Backtick */ -.dark .highlight .sc { - color: #ed9d13 -} - -/* Literal.String.Char */ -.dark .highlight .sd { - color: #ed9d13 -} - -/* Literal.String.Doc */ -.dark .highlight .s2 { - color: #ed9d13 -} - -/* Literal.String.Double */ -.dark .highlight .se { - color: #ed9d13 -} - -/* Literal.String.Escape */ -.dark .highlight .sh { - color: #ed9d13 -} - -/* Literal.String.Heredoc */ -.dark .highlight .si { - color: #ed9d13 -} - -/* Literal.String.Interpol */ -.dark .highlight .sx { - color: #ffa500 -} - -/* Literal.String.Other */ -.dark .highlight .sr { - color: #ed9d13 -} - -/* Literal.String.Regex */ -.dark .highlight .s1 { - color: #ed9d13 -} - -/* Literal.String.Single */ -.dark .highlight .ss { - color: #ed9d13 -} - -/* Literal.String.Symbol */ -.dark .highlight .bp { - color: #24909d -} - -/* Name.Builtin.Pseudo */ -.dark .highlight .vc { - color: #40ffff -} - -/* Name.Variable.Class */ -.dark .highlight .vg { - color: #40ffff -} - -/* Name.Variable.Global */ -.dark .highlight .vi { - color: #40ffff -} - -/* Name.Variable.Instance */ -.dark .highlight .il { - color: #3677a9 -} .light .code-pre { background-color: #f3f4f6 /* base-light-100 */ @@ -457,4 +153,4 @@ .light .highlight .vc { color: #008080 } /* Name.Variable.Class */ .light .highlight .vg { color: #008080 } /* Name.Variable.Global */ .light .highlight .vi { color: #008080 } /* Name.Variable.Instance */ -.light .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ \ No newline at end of file +.light .highlight .il { color: #009999 } /* Literal.Number.Integer.Long */ diff --git a/lib/ash_hq_web/components/app_view/top_bar.ex b/lib/ash_hq_web/components/app_view/top_bar.ex index 2b418b4..8140060 100644 --- a/lib/ash_hq_web/components/app_view/top_bar.ex +++ b/lib/ash_hq_web/components/app_view/top_bar.ex @@ -43,28 +43,28 @@ defmodule AshHqWeb.Components.AppView.TopBar do Blog Forum Media diff --git a/lib/ash_hq_web/components/right_nav.ex b/lib/ash_hq_web/components/right_nav.ex index 669c647..d4fe0e2 100644 --- a/lib/ash_hq_web/components/right_nav.ex +++ b/lib/ash_hq_web/components/right_nav.ex @@ -9,56 +9,46 @@ defmodule AshHqWeb.Components.RightNav do ~F""" """ end + + def nav_link(assigns) do + ~F""" + + + {"#{@function.name}/#{@function.arity}"} + + """ + end end diff --git a/lib/ash_hq_web/components/search.ex b/lib/ash_hq_web/components/search.ex index 3e228e3..19ac260 100644 --- a/lib/ash_hq_web/components/search.ex +++ b/lib/ash_hq_web/components/search.ex @@ -10,19 +10,19 @@ defmodule AshHqWeb.Components.Search do alias Surface.Components.{Form, LivePatch} alias Surface.Components.Form.Checkbox - prop close, :event, required: true - prop libraries, :list, required: true - prop selected_versions, :map, required: true - prop selected_types, :list, required: true - prop change_types, :event, required: true - prop change_versions, :event, required: true - prop remove_version, :event, required: true - prop uri, :string, required: true + prop(close, :event, required: true) + prop(libraries, :list, required: true) + prop(selected_versions, :map, required: true) + prop(selected_types, :list, required: true) + prop(change_types, :event, required: true) + prop(change_versions, :event, required: true) + prop(remove_version, :event, required: true) + prop(uri, :string, required: true) - data search, :string, default: "" - data item_list, :list, default: [] - data selected_item, :string - data selecting_packages, :boolean, default: false + data(search, :string, default: "") + data(item_list, :list, default: []) + data(selected_item, :string) + data(selecting_packages, :boolean, default: false) def render(assigns) do ~F""" @@ -46,67 +46,64 @@ defmodule AshHqWeb.Components.Search do change_versions={@change_versions} /> -
-
-
- -
-
- +
+
+ +
+
+ +
+ + + +
+
+
+
+
+
Search For:
+ {#for type <- AshHq.Docs.Extensions.Search.Types.types()} +
+ + +
+ {/for} +
-
-
-
-
-
Search For:
- {#for type <- AshHq.Docs.Extensions.Search.Types.types()} -
- - -
- {/for} -
-
-
-
-
-
+
{render_items(assigns, @item_list)}
-
-
-
- Packages: +
+ +
-
@@ -116,54 +113,57 @@ defmodule AshHqWeb.Components.Search do defp render_items(assigns, items) do ~F""" - {#for item <- items} - -
-
-
- {render_item_type(assigns, item)} -
-
- {#for {path_item, index} <- Enum.with_index(item_path(item))} - {#if index != 0} - - {/if} -
- {path_item} +
+ {#for item <- items} + +
+
+
+ {render_item_type(assigns, item)} +
+
+ {#for {path_item, index} <- Enum.with_index(item_path(item))} + {#if index != 0} + + {/if} +
+ {path_item} +
+ {/for} + +
+ {#if Map.get(item, :name_matches)} + + {#else} + {item_name(item)} + {/if}
- {/for} - -
- {#if Map.get(item, :name_matches)} - - {#else} - {item_name(item)} - {/if}
+
+ {raw(item.search_headline)} +
-
- {raw(item.search_headline)} -
-
- - {/for} + + {/for} +
""" end defp render_item_type(assigns, item) do + icon_classes = "h-4 w-4 flex-none mt-1 mx-1" + case item_type(item) do "Forum" -> ~F""" - + """ "Mix Task" -> @@ -174,7 +174,7 @@ defmodule AshHqWeb.Components.Search do viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" - class="w-4 h-4" + class={icon_classes} > ~F""" - + """ :callback -> ~F""" - + """ :type -> ~F""" - + """ end "Module" -> ~F""" - + """ type when type in ["Dsl", "Option"] -> @@ -212,12 +212,12 @@ defmodule AshHqWeb.Components.Search do "Guide" -> ~F""" - + """ _ -> ~F""" - + """ end end diff --git a/lib/ash_hq_web/components/tree_view.ex b/lib/ash_hq_web/components/tree_view.ex index 7479783..2291c39 100644 --- a/lib/ash_hq_web/components/tree_view.ex +++ b/lib/ash_hq_web/components/tree_view.ex @@ -84,7 +84,7 @@ defmodule AshHqWeb.Components.TreeView do } } .indent-guide { - @apply border-l pl-4 -ml-3 border-primary-light-600 border-opacity-30; + @apply border-l pl-4 -ml-3 border-primary-light-600 dark:border-primary-dark-400 border-opacity-30 dark:border-opacity-30; }
  • diff --git a/lib/ash_hq_web/components/version_pills.ex b/lib/ash_hq_web/components/version_pills.ex index 389b715..40799e5 100644 --- a/lib/ash_hq_web/components/version_pills.ex +++ b/lib/ash_hq_web/components/version_pills.ex @@ -17,7 +17,7 @@ defmodule AshHqWeb.Components.VersionPills do
    {#for library <- @libraries} {#if @selected_versions[library.id] not in [nil, ""]} -
    +
    {library.name}{#if selected_version(library, @selected_versions[library.id]) != "latest"} | {selected_version(library, @selected_versions[library.id])} {/if} diff --git a/lib/ash_hq_web/pages/media.ex b/lib/ash_hq_web/pages/media.ex index f3acd6a..047c671 100644 --- a/lib/ash_hq_web/pages/media.ex +++ b/lib/ash_hq_web/pages/media.ex @@ -62,13 +62,13 @@ defmodule AshHqWeb.Pages.Media do
    Example Projects