lib/fluint_ui/theme/default_theme.ex

defmodule FlintUI.Theme.Default do
  @moduledoc """
  Theme defaults.
  """

  def size_variants, do: ~w(xs sm md lg xl)a

  def semantic_colors, do: ~w(
    primary secondary tertiary
    success danger warning info
    neutral
  )a

  def shade_colors, do: ~w(black white gray)a

  def radius,
    do: %{
      none: "rounded-none",
      default: "rounded",
      sm: "rounded-sm",
      md: "rounded-md",
      lg: "rounded-lg",
      xl: "rounded-xl",
      xxl: "rounded-2xl",
      xxxl: "rounded-3xl",
      full: "rounded-full"
    }

  def values do
    %{
      name: "default",
      ui: %{
        badge: %{
          default: %{size: :md, radius: :full, variant: :subtle, color: :dark},
          base: %{
            font: "font-medium",
            radius: radius(),
            size: %{
              xs: "text-[9px] leading-3 px-1.5 h-4",
              sm: "text-[11px] leading-3 px-1.5 h-[1.125rem]",
              md: "text-xs px-2 h-5",
              lg: "text-sm px-2.5 h-6",
              xl: "text-sm px-3 h-7"
            },
            root: "fl-badge inline-flex items-center justify-center",
            inner: "fl-badge-inner inline-flex items-center justify-center gap-x-0.5",
            addon: "fl-badge-addon inline-flex items-center justify-center gap-x-0.5"
          },
          variants: %{
            subtle: %{
              light:
                "bg-gray-50/50 dark:bg-gray-300/10 text-gray-400 dark:text-gray-200 ring-1 ring-inset ring-gray-400/20 dark:ring-gray-200/20",
              dark:
                "bg-gray-100 dark:bg-gray-500/10 text-gray-800 dark:text-gray-500 ring-1 ring-inset ring-gray-700/10 dark:ring-gray-500/20",
              gray:
                "bg-gray-50 dark:bg-gray-400/10 text-gray-600 dark:text-gray-400 ring-1 ring-inset ring-gray-500/10 dark:ring-gray-400/20",
              primary:
                "bg-primary-50 dark:bg-primary-400/10 text-primary-700 dark:text-primary-400 ring-1 ring-inset ring-primary-700/10 dark:ring-primary-400/20",
              secondary:
                "bg-secondary-50 dark:bg-secondary-400/10 text-secondary-700 dark:text-secondary-400 ring-1 ring-inset ring-secondary-700/10 dark:ring-secondary-400/20",
              tertiary:
                "bg-tertiary-50 dark:bg-tertiary-400/10 text-tertiary-700 dark:text-tertiary-400 ring-1 ring-inset ring-tertiary-700/10 dark:ring-tertiary-400/20",
              success:
                "bg-success-50 dark:bg-success-400/10 text-success-700 dark:text-success-400 ring-1 ring-inset ring-success-600/20 dark:ring-success-500/20",
              danger:
                "bg-danger-50 dark:bg-danger-400/10 text-danger-700 dark:text-danger-400 ring-1 ring-inset ring-danger-600/10 dark:ring-danger-400/20",
              warning:
                "bg-warning-50 dark:bg-warning-400/10 text-warning-800 dark:text-warning-400 ring-1 ring-inset ring-warning-600/20 dark:ring-warning-400/20",
              info:
                "bg-info-50 dark:bg-info-400/10 text-info-700 dark:text-info-400 ring-1 ring-inset ring-info-700/10 dark:ring-info-400/30",
              neutral:
                "bg-neutral-50 dark:bg-neutral-400/10 text-neutral-600 dark:text-neutral-400 ring-1 ring-inset ring-neutral-500/10 dark:ring-neutral-400/20"
            },
            light: %{
              light: "",
              dark: "",
              gray: "",
              primary: "",
              secondary: "",
              tertiary: "",
              success: "",
              danger: "",
              warning: "",
              info: "",
              neutral: ""
            },
            outline: %{
              light: "",
              dark: "",
              gray: "",
              primary: "",
              secondary: "",
              tertiary: "",
              success: "",
              danger: "",
              warning: "",
              info: "",
              neutral: ""
            },
            dashed: %{
              light: "",
              dark: "",
              gray: "",
              primary: "",
              secondary: "",
              tertiary: "",
              success: "",
              danger: "",
              warning: "",
              info: "",
              neutral: ""
            },
            solid: %{
              light: "",
              dark: "",
              gray: "",
              primary: "",
              secondary: "",
              tertiary: "",
              success: "",
              danger: "",
              warning: "",
              info: "",
              neutral: ""
            },
            dot: %{
              light: "",
              dark: "",
              gray: "",
              primary: "",
              secondary: "",
              tertiary: "",
              success: "",
              danger: "",
              warning: "",
              info: "",
              neutral: ""
            }
          }
        }
      }
    }
  end
end