feat: flip goku and gohan. Fix all components and docs [MDS-693]

lib/moon/components/accordion.ex

@@ -23,7 +23,7 @@ defmodule Moon.Components.Accordion do
   )
 
   prop(pull_a_side_class, :css_class)
-  prop(bg_color, :css_class, default: "bg-gohan")
+  prop(bg_color, :css_class, default: "bg-goku")
 
   slot(title, required: true)
   slot(header_content)

lib/moon/components/avatar/avatar.ex

@@ -8,7 +8,7 @@ defmodule Moon.Components.Avatar do
   prop(image_url, :string)
   prop(name, :string)
   prop(color, :css_class, default: "text-bulma")
-  prop(bg_color, :css_class, default: "bg-gohan")
+  prop(bg_color, :css_class, default: "bg-goku")
   prop(is_uppercase, :boolean, default: true)
 
   prop(size, :string, default: "md", values: ~w(xs sm md lg xl 2xl))

lib/moon/components/breadcrumb/subcomponents/collapsed.ex

@@ -57,10 +57,10 @@ defmodule Moon.Components.Breadcrumb.Collapsed do
           />
           <ol
             id={"#{@id}_flyout"}
-            class="absolute hidden left-0 top-full bg-gohan p-1 mt-2 flex-col gap-2 shadow-moon-xl rounded-moon-s-xs z-[10000] min-w-[12rem]"
+            class="absolute hidden left-0 top-full bg-goku p-1 mt-2 flex-col gap-2 shadow-moon-xl rounded-moon-s-xs z-[10000] min-w-[12rem]"
           >
             {#for crumb <- @collapsed_breadcrumbs}
-              <li class="flex flex-col items-stretch text-bulma text-moon-14 brcrumb-li rounded-sm cursor-pointer hover:bg-goku">
+              <li class="flex flex-col items-stretch text-bulma text-moon-14 brcrumb-li rounded-sm cursor-pointer hover:bg-gohan">
                 <a href={crumb.link}>{crumb.name}</a>
               </li>
             {/for}

lib/moon/components/calendar/day.ex

@@ -9,7 +9,7 @@ defmodule Moon.Components.Calendar.Day do
 
   def render(assigns) do
     ~F"""
-    <div class="rounded-lg bg-gohan aspect-square">
+    <div class="rounded-lg bg-goku aspect-square">
       <div class={"text-moon-10 md:text-moon-16 lg:text-moon-18 text-right pt-2 pr-3 #{@text_color}"}>
         {day_label(@day)}
       </div>

lib/moon/components/calendar/week.ex

@@ -12,7 +12,7 @@ defmodule Moon.Components.Calendar.Week do
       class="grid gap-1"
       style="grid-template-columns: repeat(7, minmax(3rem, 1fr)); min-height: 75vh;"
     >
-      <div :for={day <- week_days(@date, @week_starts_on)} class="relative rounded-lg bg-gohan">
+      <div :for={day <- week_days(@date, @week_starts_on)} class="relative rounded-lg bg-goku">
         <div class={
           "absolute text-moon-10 md:text-moon-16 lg:text-moon-18 top-2 right-3",
           "text-piccolo": Timex.to_date(day) == Timex.today()

lib/moon/components/card.ex

@@ -14,7 +14,7 @@ defmodule Moon.Components.Card do
 
   def render(assigns) do
     ~F"""
-    <div class={"p-6 bg-gohan #{@class}", rounded: @rounded}>
+    <div class={"p-6 bg-goku #{@class}", rounded: @rounded}>
       <div class="flex items-center justify-between gap-4">
         <Heading size={20}>{@title}</Heading>
 

lib/moon/components/card_v2.ex

@@ -5,7 +5,7 @@ defmodule Moon.Components.CardV2 do
 
   prop(rounded, :css_class, default: "rounded-md")
   prop(class, :css_class)
-  prop(background_color_class, :css_class, default: "bg-gohan")
+  prop(background_color_class, :css_class, default: "bg-goku")
   prop(border_color_class, :css_class)
   prop(top_class, :css_class)
   prop(left_bottom_class, :css_class)

lib/moon/components/chip.ex

@@ -79,11 +79,11 @@ defmodule Moon.Components.Chip do
     do: "text-piccolo bg-opacity-12 #{active_class}"
 
   defp active_btn_class(false, _, inactive_class),
-    do: "text-bulma bg-gohan #{inactive_class}"
+    do: "text-bulma bg-goku #{inactive_class}"
 
   defp get_bg_color(active, variant) do
     if variant == "default" do
-      if active, do: "bg-piccolo", else: "bg-gohan"
+      if active, do: "bg-piccolo", else: "bg-goku"
     else
       "bg-transparent"
     end

lib/moon/components/datepicker.ex

@@ -66,16 +66,16 @@ defmodule Moon.Components.Datepicker do
 
       <:content>
         <div class={
-          "p-2 pr-3 origin-top-left absolute left-0 bg-gohan flex shadow-lg rounded text-moon-14 z-10 mt-2",
+          "p-2 pr-3 origin-top-left absolute left-0 bg-goku flex shadow-lg rounded text-moon-14 z-10 mt-2",
           hidden: !@show
         }>
           <!-- Ranges -->
           <div :if={length(@ranges) > 0} class="space-y-0.5 w-48 mr-4">
             <div
               :for={range <- @ranges}
               class={
-                "py-2 px-3 hover:bg-goku rounded cursor-pointer",
-                "bg-goku": range == @selected_range
+                "py-2 px-3 hover:bg-gohan rounded cursor-pointer",
+                "bg-gohan": range == @selected_range
               }
               :on-click="select_range"
               phx-value-range={range}

lib/moon/components/datepicker/month.ex

@@ -81,7 +81,7 @@ defmodule Moon.Components.Datepicker.Month do
 
   defp day_container_class(day, start_date, nil, _) do
     if Timex.to_date(day) == Timex.to_date(start_date) do
-      "bg-goku rounded"
+      "bg-gohan rounded"
     end
   end
 
@@ -95,10 +95,10 @@ defmodule Moon.Components.Datepicker.Month do
         nil
 
       date_day == start_day ->
-        "bg-goku rounded"
+        "bg-gohan rounded"
 
       date_day == end_day ->
-        "bg-goku rounded"
+        "bg-gohan rounded"
 
       Timex.between?(day, start_date, end_date) ->
         week_start_class(day, week_starts_on)
@@ -110,9 +110,9 @@ defmodule Moon.Components.Datepicker.Month do
 
   defp week_start_class(day, week_starts_on) do
     cond do
-      Timex.weekday(day) == week_starts_on -> "bg-goku rounded-l"
-      Timex.weekday(day) == week_starts_on + 6 -> "bg-goku rounded-r"
-      true -> "bg-goku"
+      Timex.weekday(day) == week_starts_on -> "bg-gohan rounded-l"
+      Timex.weekday(day) == week_starts_on + 6 -> "bg-gohan rounded-r"
+      true -> "bg-gohan"
     end
   end
 

lib/moon/components/dialog/modal.ex

@@ -29,7 +29,7 @@ defmodule Moon.Components.Dialog.Modal.Panel do
       id={@id}
       testid={@testid}
       :on-click-away={@close}
-      class="inline-block align-bottom rounded shadow-xl transition-all sm:align-middle sm:max-w-lg sm:w-full bg-gohan z-40 relative overflow-hidden"
+      class="inline-block align-bottom rounded shadow-xl transition-all sm:align-middle sm:max-w-lg sm:w-full bg-goku z-40 relative overflow-hidden"
     >
       <#slot />
     </div>

lib/moon/components/drawer.ex

@@ -16,7 +16,7 @@ defmodule Moon.Components.Drawer.Dialog do
     dialog_content_height = if slot_assigned?(:footer), do: "h-5/6", else: "h-screen"
 
     ~F"""
-    <div class="relative w-full h-full bg-gohan">
+    <div class="relative w-full h-full bg-goku">
       <PullAside class="py-4 px-6">
         <:left>
           {#if slot_assigned?(:title)}
@@ -36,7 +36,7 @@ defmodule Moon.Components.Drawer.Dialog do
         </div>
       {/if}
       {#if slot_assigned?(:footer)}
-        <div class="absolute bottom-0 left-0 right-0 bg-gohan">
+        <div class="absolute bottom-0 left-0 right-0 bg-goku">
           <Divider />
           <div class="p-4">
             <#slot {@footer} />
@@ -59,7 +59,7 @@ defmodule Moon.Components.Drawer do
 
   def render(assigns) do
     ~F"""
-    <div id={@id} class={"fixed top-0 right-0 bottom-0 bg-gohan z-40", @class} data-testid={@testid}>
+    <div id={@id} class={"fixed top-0 right-0 bottom-0 bg-goku z-40", @class} data-testid={@testid}>
       <#slot />
     </div>
     """

lib/moon/components/dropdown.ex

@@ -16,7 +16,7 @@ defmodule Moon.Components.Dropdown do
 
   def render(assigns) do
     ~F"""
-    <div class="box-content bg-gohan h-auto rounded-lg #{@class}">
+    <div class="box-content bg-goku h-auto rounded-lg #{@class}">
       <div class="relative" :if={@on_search_change}>
         <IconZoom class="absolute top-4 left-4" />
         <Form for={@search_name} change={@on_search_change}>

lib/moon/components/dropdown_menu_button.ex

@@ -9,7 +9,7 @@ defmodule Moon.Components.DropdownMenuButton do
   prop(height, :integer, default: 10)
   prop(width, :integer, default: 10)
   prop(text_color, :string, default: "text-trunks")
-  prop(hover_bg_color, :string, default: "bg-goku-120")
+  prop(hover_bg_color, :string, default: "bg-gohan-120")
   prop(placement, :string, default: "bottom-end")
   prop(show, :boolean, default: false)
   prop(on_toggle, :event, required: true)

lib/moon/components/dropdown_menu_items.ex

@@ -10,7 +10,7 @@ defmodule Moon.Components.DropdownMenuItems do
 
   def render(assigns) do
     ~F"""
-    <div class={"px-1 py-2 rounded-lg bg-gohan shadow text-left w-#{@width} space-y-#{@gap} #{@class}"}>
+    <div class={"px-1 py-2 rounded-lg bg-goku shadow text-left w-#{@width} space-y-#{@gap} #{@class}"}>
       <#slot />
     </div>
     """
@@ -26,7 +26,7 @@ defmodule Moon.Components.DropdownMenuItem do
 
   def render(assigns) do
     ~F"""
-    <div class="p-3 text-moon-14 rounded cursor-pointer hover:bg-goku">
+    <div class="p-3 text-moon-14 rounded cursor-pointer hover:bg-gohan">
       <#slot />
     </div>
     """

lib/moon/components/file_input.ex

@@ -11,7 +11,7 @@ defmodule Moon.Components.FileInput.ListOfFiles do
     ~F"""
     <div>
       {#for entry <- @conf.entries}
-        <div class="flex gap-2 bg-goku p-2 rounded align-middle">
+        <div class="flex gap-2 bg-gohan p-2 rounded align-middle">
           <div class="overflow-hidden" style="max-width: 50px"><.live_img_preview entry={entry} width="100" /></div>
           <div class="w-full">{entry.client_name} ({get_size(entry.client_size)} KB)</div>
           <div style="width: 300px"><ProgressLinear value={entry.progress} /></div>

lib/moon/components/line_chart_card.ex

@@ -15,14 +15,14 @@ defmodule Moon.Components.LineChartCard do
 
   def render(assigns) do
     ~F"""
-    <div class="bg-gohan p-6 rounded-sm">
+    <div class="bg-goku p-6 rounded-sm">
       <div class="flex items-center mt-0.5 mb-6">
         <div class="grow text-moon-20 text-bulma">
           {@title}
         </div>
 
         <div class="flex-none" :if={length(@select_options) > 0}>
-          <Select options={@select_options} class="pl-2 rounded-sm text-moon-12 text-trunks bg-goku" />
+          <Select options={@select_options} class="pl-2 rounded-sm text-moon-12 text-trunks bg-gohan" />
         </div>
 
         <button type="button" class="flex-none ml-3 p-2">
@@ -35,9 +35,9 @@ defmodule Moon.Components.LineChartCard do
           <button
             :for={filter <- @filters}
             class={
-              "p-3 font-normal text-left rounded-sm hover:bg-goku",
-              "bg-gohan": !filter.is_active,
-              "bg-goku": filter.is_active
+              "p-3 font-normal text-left rounded-sm hover:bg-gohan",
+              "bg-goku": !filter.is_active,
+              "bg-gohan": filter.is_active
             }
             style="min-width: 120px;"
             type="button"

lib/moon/components/list_items/single_line_item.ex

@@ -5,8 +5,8 @@ defmodule Moon.Components.ListItems.SingleLineItem do
   use Moon.StatelessComponent
 
   prop(size, :string, values: ~w(md lg xl), default: "md")
-  prop(background_color, :string, values: Moon.colors(), default: "bg-gohan")
-  prop(active_background_color, :string, values: Moon.colors(), default: "bg-goku")
+  prop(background_color, :string, values: Moon.colors(), default: "bg-goku")
+  prop(active_background_color, :string, values: Moon.colors(), default: "bg-gohan")
   prop(current, :boolean, default: false)
   prop(left_grow, :boolean, default: false)
   prop(right_grow, :boolean, default: false)

lib/moon/components/popover/default_content.ex

@@ -10,7 +10,7 @@ defmodule Moon.Components.Popover.DefaultContent do
     ~F"""
     <div class={
       "overflow-auto rounded-moon-i-md box-border border border-solid",
-      "border-beerus drop-shadow-2xl bg-gohan"
+      "border-beerus drop-shadow-2xl bg-goku"
     }>
       <TopToDown>
         <#slot {@default} />

lib/moon/components/select.ex

@@ -34,7 +34,7 @@ defmodule Moon.Components.Select do
     select = ~F"""
     <Surface.Components.Form.Select
       class={
-        "text-trunks pr-3.5 bg-no-repeat bg-goku hover:bg-goku-120
+        "text-trunks pr-3.5 bg-no-repeat bg-gohan hover:bg-gohan-120
                hover:cursor-pointer focus:cursor-pointer border border-solid
                border-beerus focus:text-bulma disabled:cursor-not-allowed focus:border-piccolo focus:outline-none",
         "rounded-moon-s-sm": @rounded,

lib/moon/components/select/dropdown.ex

@@ -38,7 +38,7 @@ defmodule Moon.Components.Select.Dropdown do
   def render(assigns) do
     ~F"""
     <div class={
-      "z-10 rounded-moon-i-md shadow-lg bg-gohan focus:outline-none p-1 grid grid-cols-1 gap-1 text-moon-16",
+      "z-10 rounded-moon-i-md shadow-lg bg-goku focus:outline-none p-1 grid grid-cols-1 gap-1 text-moon-16",
       @class
     }>
       {#if !@select_id}

lib/moon/components/select_trigger.ex

@@ -18,7 +18,7 @@ defmodule Moon.Components.SelectTrigger do
     ~F"""
     <button
       class={
-        "w-full text-left border border-solid rounded border-beerus bg-gohan flex items-center focus:border-piccolo active:border-piccolo #{@class}",
+        "w-full text-left border border-solid rounded border-beerus bg-goku flex items-center focus:border-piccolo active:border-piccolo #{@class}",
         "text-moon-14 h-10 px-3": @size == "md",
         "text-moon-16 h-12 px-4": @size == "lg",
         "text-moon-16 h-14 px-4": @size == "xl",

lib/moon/components/single_item_select.ex

@@ -40,7 +40,7 @@ defmodule Moon.Components.SingeItemSelect do
 
   def render(assigns) do
     ~F"""
-    <div class={"bg-gohan shadow rounded-lg p-1 overflow-y-scroll #{@class}"} style={@style || ""}>
+    <div class={"bg-goku shadow rounded-lg p-1 overflow-y-scroll #{@class}"} style={@style || ""}>
       <#slot />
       <div :for={option <- @options}>
         <Item item_id={option.value} selected={@value == option.value} on_click={@on_change}>

lib/moon/components/single_select.ex

@@ -42,15 +42,15 @@ defmodule Moon.Components.SingleSelect do
       </SelectTrigger>
 
       <ul
-        class="absolute z-10 w-full px-1 py-2 mt-2 space-y-1 overflow-auto rounded-lg shadow-lg bg-gohan max-h-56 focus:outline-none"
+        class="absolute z-10 w-full px-1 py-2 mt-2 space-y-1 overflow-auto rounded-lg shadow-lg bg-goku max-h-56 focus:outline-none"
         tabindex="-1"
         role="listbox"
         id={"#{@id}-listbox"}
         style="display: none;"
       >
         {#for option <- @options}
           <li
-            class="relative p-3 py-2 pl-3 text-moon-14 rounded-sm cursor-pointer text-bulma hover:bg-goku"
+            class="relative p-3 py-2 pl-3 text-moon-14 rounded-sm cursor-pointer text-bulma hover:bg-gohan"
             role="option"
             :on-click={select_option(@id, @on_select, @target, option.value)}
           >

lib/moon/components/slide_over.ex

@@ -16,15 +16,15 @@ defmodule Moon.Components.SlideOver do
     ~F"""
     {!-- Overlay --}
     <div :on-click={@on_close} class="fixed inset-0 z-20" />
-    <div class="w-screen max-w-2xl fixed top-0 right-0 bottom-0 w-1/2 p-6 z-20 bg-gohan shadow overflow-y-auto">
+    <div class="w-screen max-w-2xl fixed top-0 right-0 bottom-0 w-1/2 p-6 z-20 bg-goku shadow overflow-y-auto">
       {!-- SlideOver Header --}
       <div class="flex items-center justify-between mb-6">
         <Heading size="20">
           <#slot {@heading} />
         </Heading>
         <div class="flex items-center">
           <#slot {@options} />
-          <div class="p-2 rounded bg-goku cursor-pointer" :on-click={@on_close}>
+          <div class="p-2 rounded bg-gohan cursor-pointer" :on-click={@on_close}>
             <IconCloseRounded font_size="1.5rem" />
           </div>
         </div>

lib/moon/components/switch.ex

@@ -65,7 +65,7 @@ defmodule Moon.Components.Switch do
         class={
           "relative inline-flex shrink-0 transition-colors duration-200 ease-in-out border-transparent rounded-full cursor-pointer outline-none focus:outline-none bg-piccolo shadow-md",
           "bg-piccolo": is_selected(@checked, @form, @field),
-          "bg-goku": !is_selected(@checked, @form, @field),
+          "bg-gohan": !is_selected(@checked, @form, @field),
           "border-2 w-7 focus:ring-1 focus:ring-offset-1": @size == "small",
           "border-4 w-10 focus:ring-2 focus:ring-offset-1": @size == "medium",
           "border-4 w-14 focus:ring-2 focus:ring-offset-2": @size == "large"
@@ -89,7 +89,7 @@ defmodule Moon.Components.Switch do
         <span
           aria-hidden="true"
           class={
-            "inline-block transition duration-200 ease-in-out translate-x-0 bg-goku rounded-full shadow-md pointer-events-none ring-0 shadow-md",
+            "inline-block transition duration-200 ease-in-out translate-x-0 bg-gohan rounded-full shadow-md pointer-events-none ring-0 shadow-md",
             "w-3 h-3": @size == "small",
             "w-4 h-4": @size == "medium",
             "w-6 h-6": @size == "large",

lib/moon/components/switcher.ex

@@ -15,7 +15,7 @@ defmodule Moon.Components.Switcher do
         :for={item <- @items}
         class={
           "p-1.5 lg:ps-2.5 lg:pe-3.5 font-medium text-sm rounded-md",
-          "bg-gohan text-bulma": item == @selected_item,
+          "bg-goku text-bulma": item == @selected_item,
           "text-trunks": item != @selected_item
         }
         :on-click={@click}

lib/moon/components/table.ex

@@ -26,7 +26,7 @@ defmodule Moon.Components.Table do
   prop(class, :css_class)
   prop(row_class, :css_class)
   prop(id, :string)
-  prop(even_row_class, :css_class, default: "bg-gohan")
+  prop(even_row_class, :css_class, default: "bg-goku")
 
   prop(has_no_cell_borders, :boolean, default: false)
 
@@ -68,7 +68,7 @@ defmodule Moon.Components.Table do
               <tr
                 class={merge(
                   "#{@even_row_class}": @selected != "#{item.id}" && rem(row_index, 2) == 0,
-                  "bg-goku-120": @selected == "#{item.id}",
+                  "bg-gohan-120": @selected == "#{item.id}",
                   "#{@row_class}": true
                 )}
                 :on-click={@row_click}

lib/moon/components/tabs.ex

@@ -8,7 +8,7 @@ defmodule Moon.Components.Tabs do
 
   def render(assigns) do
     ~F"""
-    <div class="border-b border-goku-40">
+    <div class="border-b border-gohan-40">
       <Reel>
         <#slot />
       </Reel>