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