This is the default style configuration for Pyro components.

It can be helpful to view the source of this override configuration to get an idea of how to write your own style overrides.

• Captured functions with arity 1 and the arg named passed_assigns are passed component assigns at runtime, allowing complex conditional logic
• assign_overridables/1 preserves the definition order of attrs and assigns them in that order, preserving dependency chains
• Attrs with type :tails_classes utilize Tails, and are merged by the component to prevent weird precedence conflicts and HTML bloat

makeup

Makeup

• makeup_light: default_style/0
• makeup_dark: native_style/0

global-style

Global Style

@layer root {
  ::selection,
  ::-moz-selection {
    @apply text-white bg-sky-500 bg-opacity-100;
  }

  :root {
    --scrollbar-width: 0.5rem;
  }

  /* Firefox */

  * {
    scrollbar-width: auto;
    scrollbar-height: auto;
    scrollbar-color: theme(colors.sky.500) transparent;
  }

  /* Chrome, Edge, and Safari */

  *::-webkit-scrollbar {
    width: var(--scrollbar-width);
    height: var(--scrollbar-width);
  }

  *::-webkit-scrollbar-button {
    @apply bg-transparent h-0 w-0;
  }

  ::-webkit-scrollbar-corner {
    @apply bg-transparent;
  }

  *::-webkit-scrollbar-track {
    background: transparent;
  }

  *::-webkit-scrollbar-track-piece {
    @apply bg-transparent;
  }

  *::-webkit-scrollbar-thumb {
    @apply bg-sky-500 border-none rounded-full;
  }

  var {
    @apply not-italic rounded font-mono text-sm font-semibold px-2 py-px mx-px;
    @apply bg-slate-900 text-white;
    @apply dark:bg-white dark:text-slate-900;
  }

  html, body {
    @apply bg-white text-slate-900 dark:text-white dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800;
  }
}

@layer component {
  .progress {
    @apply rounded w-full
  }
  .progress::-webkit-progress-bar {
    @apply rounded;
  }
  .progress::-webkit-progress-value {
    @apply rounded;
  }
  .progress::-moz-progress-bar {
    @apply rounded;
  }
  .progress.slate,
  .progress.slate::-webkit-progress-bar {
    @apply bg-slate-100 dark:bg-slate-900;
  }
  .progress.slate::-webkit-progress-value {
    @apply bg-slate-500;
  }
  .progress.slate::-moz-progress-bar {
    @apply bg-slate-500;
  }
  .progress.gray,
  .progress.gray::-webkit-progress-bar {
    @apply bg-gray-100 dark:bg-gray-900;
  }
  .progress.gray::-webkit-progress-value {
    @apply bg-gray-500;
  }
  .progress.gray::-moz-progress-bar {
    @apply bg-gray-500;
  }
  .progress.zinc,
  .progress.zinc::-webkit-progress-bar {
    @apply bg-zinc-100 dark:bg-zinc-900;
  }
  .progress.zinc::-webkit-progress-value {
    @apply bg-zinc-500;
  }
  .progress.zinc::-moz-progress-bar {
    @apply bg-zinc-500;
  }
  .progress.neutral,
  .progress.neutral::-webkit-progress-bar {
    @apply bg-neutral-100 dark:bg-neutral-900;
  }
  .progress.neutral::-webkit-progress-value {
    @apply bg-neutral-500;
  }
  .progress.neutral::-moz-progress-bar {
    @apply bg-neutral-500;
  }
  .progress.stone,
  .progress.stone::-webkit-progress-bar {
    @apply bg-stone-100 dark:bg-stone-900;
  }
  .progress.stone::-webkit-progress-value {
    @apply bg-stone-500;
  }
  .progress.stone::-moz-progress-bar {
    @apply bg-stone-500;
  }
  .progress.red,
  .progress.red::-webkit-progress-bar {
    @apply bg-red-100 dark:bg-red-900;
  }
  .progress.red::-webkit-progress-value {
    @apply bg-red-500;
  }
  .progress.red::-moz-progress-bar {
    @apply bg-red-500;
  }
  .progress.orange,
  .progress.orange::-webkit-progress-bar {
    @apply bg-orange-100 dark:bg-orange-900;
  }
  .progress.orange::-webkit-progress-value {
    @apply bg-orange-500;
  }
  .progress.orange::-moz-progress-bar {
    @apply bg-orange-500;
  }
  .progress.amber,
  .progress.amber::-webkit-progress-bar {
    @apply bg-amber-100 dark:bg-amber-900;
  }
  .progress.amber::-webkit-progress-value {
    @apply bg-amber-500;
  }
  .progress.amber::-moz-progress-bar {
    @apply bg-amber-500;
  }
  .progress.yellow,
  .progress.yellow::-webkit-progress-bar {
    @apply bg-yellow-100 dark:bg-yellow-900;
  }
  .progress.yellow::-webkit-progress-value {
    @apply bg-yellow-500;
  }
  .progress.yellow::-moz-progress-bar {
    @apply bg-yellow-500;
  }
  .progress.lime,
  .progress.lime::-webkit-progress-bar {
    @apply bg-lime-100 dark:bg-lime-900;
  }
  .progress.lime::-webkit-progress-value {
    @apply bg-lime-500;
  }
  .progress.lime::-moz-progress-bar {
    @apply bg-lime-500;
  }
  .progress.green,
  .progress.green::-webkit-progress-bar {
    @apply bg-green-100 dark:bg-green-900;
  }
  .progress.green::-webkit-progress-value {
    @apply bg-green-500;
  }
  .progress.green::-moz-progress-bar {
    @apply bg-green-500;
  }
  .progress.emerald,
  .progress.emerald::-webkit-progress-bar {
    @apply bg-emerald-100 dark:bg-emerald-900;
  }
  .progress.emerald::-webkit-progress-value {
    @apply bg-emerald-500;
  }
  .progress.emerald::-moz-progress-bar {
    @apply bg-emerald-500;
  }
  .progress.teal,
  .progress.teal::-webkit-progress-bar {
    @apply bg-teal-100 dark:bg-teal-900;
  }
  .progress.teal::-webkit-progress-value {
    @apply bg-teal-500;
  }
  .progress.teal::-moz-progress-bar {
    @apply bg-teal-500;
  }
  .progress.cyan,
  .progress.cyan::-webkit-progress-bar {
    @apply bg-cyan-100 dark:bg-cyan-900;
  }
  .progress.cyan::-webkit-progress-value {
    @apply bg-cyan-500;
  }
  .progress.cyan::-moz-progress-bar {
    @apply bg-cyan-500;
  }
  .progress.sky,
  .progress.sky::-webkit-progress-bar {
    @apply bg-sky-100 dark:bg-sky-900;
  }
  .progress.sky::-webkit-progress-value {
    @apply bg-sky-500;
  }
  .progress.sky::-moz-progress-bar {
    @apply bg-sky-500;
  }
  .progress.blue,
  .progress.blue::-webkit-progress-bar {
    @apply bg-blue-100 dark:bg-blue-900;
  }
  .progress.blue::-webkit-progress-value {
    @apply bg-blue-500;
  }
  .progress.blue::-moz-progress-bar {
    @apply bg-blue-500;
  }
  .progress.indigo,
  .progress.indigo::-webkit-progress-bar {
    @apply bg-indigo-100 dark:bg-indigo-900;
  }
  .progress.indigo::-webkit-progress-value {
    @apply bg-indigo-500;
  }
  .progress.indigo::-moz-progress-bar {
    @apply bg-indigo-500;
  }
  .progress.violet,
  .progress.violet::-webkit-progress-bar {
    @apply bg-violet-100 dark:bg-violet-900;
  }
  .progress.violet::-webkit-progress-value {
    @apply bg-violet-500;
  }
  .progress.violet::-moz-progress-bar {
    @apply bg-violet-500;
  }
  .progress.purple,
  .progress.purple::-webkit-progress-bar {
    @apply bg-purple-100 dark:bg-purple-900;
  }
  .progress.purple::-webkit-progress-value {
    @apply bg-purple-500;
  }
  .progress.purple::-moz-progress-bar {
    @apply bg-purple-500;
  }
  .progress.fuchsia,
  .progress.fuchsia::-webkit-progress-bar {
    @apply bg-fuchsia-100 dark:bg-fuchsia-900;
  }
  .progress.fuchsia::-webkit-progress-value {
    @apply bg-fuchsia-500;
  }
  .progress.fuchsia::-moz-progress-bar {
    @apply bg-fuchsia-500;
  }
  .progress.pink,
  .progress.pink::-webkit-progress-bar {
    @apply bg-pink-100 dark:bg-pink-900;
  }
  .progress.pink::-webkit-progress-value {
    @apply bg-pink-500;
  }
  .progress.pink::-moz-progress-bar {
    @apply bg-pink-500;
  }
  .progress.rose,
  .progress.rose::-webkit-progress-bar {
    @apply bg-rose-100 dark:bg-rose-900;
  }
  .progress.rose::-webkit-progress-value {
    @apply bg-rose-500;
  }
  .progress.rose::-moz-progress-bar {
    @apply bg-rose-500;
  }
}

overrides

Overrides

• Elixir.Pyro.Components.Autocomplete.render/1

  • :listbox_option_class Pyro.Overrides.Default.autocomplete_listbox_option_class/1
  • :option_label_key :label
  • :input_class Pyro.Overrides.Default.input_class/1
  • :class "grid gap-1 content-start"
  • :listbox_class ["absolute z-10 grid content-start top-0 left-0", "sm:text-sm sm:leading-6", "bg-white text-slate-900 dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800 dark:text-white", "border border-slate-300 rounded-lg", "shadow-lg "]
  • :prompt "Search options"
  • :throttle_time 212
  • :option_value_key :id
  • :description_class "text-xs text-slate-600 dark:text-slate-400"

• Elixir.Pyro.Components.Core.back/1

  • :class "font-black border-b-2 border-dotted text-slate-900 border-slate-900 dark:text-white dark:border-white hover:text-sky-500 hover:border-sky-500 active:text-sky-500 active:border-sky-500 active:border-solid"
  • :icon_name "hero-chevron-left-solid"
  • :icon_class "w-3 h-3 stroke-current align-baseline"

• Elixir.Pyro.Components.Core.button/1

  • :shape "rounded"
  • :case "uppercase"
  • :ping_class Pyro.Overrides.Default.button_ping_class/1
  • :variant "solid"
  • :icon_class Pyro.Overrides.Default.button_icon_class/1
  • :size "md"
  • :color "sky"
  • :sizes ["xs", "sm", "md", "lg", "xl"]
  • :class Pyro.Overrides.Default.button_class/1
  • :colors ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :shapes ["rounded", "square", "pill"]
  • :variants ["solid", "inverted", "outline"]

• Elixir.Pyro.Components.Core.error/1

  • :class "phx-no-feedback:hidden flex gap-1 text-sm leading-6 text-red-600 dark:text-red-500"
  • :icon_class "h-5 w-5 flex-none inline"
  • :icon_name "hero-exclamation-circle-mini"

• Elixir.Pyro.Components.Core.flash/1

  • :title_class "flex items-center gap-1.5 text-sm font-semibold leading-6"
  • :kinds ["info", "error", "warning", "success", "slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :ttl 10000
  • :message_class "text-sm whitespace-pre-wrap"
  • :control_class "grid grid-cols-[1fr,auto] items-center gap-1"
  • :show_js Pyro.Overrides.Default.flash_show_js/2
  • :icon_name Pyro.Overrides.Default.flash_icon_name/1
  • :autoshow true
  • :hide_js Pyro.Overrides.Default.flash_hide_js/2
  • :class Pyro.Overrides.Default.flash_class/1
  • :close_icon_class "h-5 w-5 stroke-current opacity-40 group-hover:opacity-70 block -mr-2"
  • :progress_class "border border-black/25"
  • :kind "slate"
  • :close true
  • :close_icon_name "hero-x-mark-mini"
  • :title Pyro.Overrides.Default.flash_title/1

• Elixir.Pyro.Components.Core.flash_group/1

  • :include_kinds ["info", "error", "warning", "success", "slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :class "absolute top-2 right-2 grid gap-2"

• Elixir.Pyro.Components.Core.header/1

  • :subtitle_class "mt-2 text-sm leading-6 text-slate-600 dark:text-slate-200"
  • :class Pyro.Overrides.Default.header_class/1
  • :actions_class "no-flex flex gap-2"
  • :title_class Pyro.Overrides.Default.header_title_class/1

• Elixir.Pyro.Components.Core.icon/1

  • :class "h-4 w-4 inline-block align-text-bottom"

• Elixir.Pyro.Components.Core.input/1

  • :description_class "text-xs text-slate-600 dark:text-slate-400"
  • :input_check_label_class "flex items-center gap-2 text-sm leading-6 text-slate-800 dark:text-slate-100 font-semibold"
  • :clear_on_escape true
  • :class "grid gap-1 content-start"
  • :input_class Pyro.Overrides.Default.input_class/1

• Elixir.Pyro.Components.Core.label/1

  • :class "block text-sm font-semibold leading-6 text-slate-800 dark:text-slate-100"

• Elixir.Pyro.Components.Core.list/1

  • :dd_class ""
  • :class "grid grid-cols-[auto,1fr] gap-2"
  • :dt_class "font-black leading-6"

• Elixir.Pyro.Components.Core.modal/1

  • :hide_js Pyro.Overrides.Default.modal_hide_js/2
  • :class "relative z-50 hidden"
  • :show_js Pyro.Overrides.Default.modal_show_js/2

• Elixir.Pyro.Components.Core.simple_form/1

  • :class "grid gap-2 bg-white text-slate-900 dark:text-white dark:bg-gradient-to-tr dark:from-slate-900 dark:to-slate-800"
  • :actions_class "mt-2 flex items-center justify-between gap-6"

• Elixir.Pyro.Components.Core.table/1

  • :tbody_class "relative divide-y divide-slate-100 border-t border-slate-200 text-sm leading-6 "
  • :action_class "relative ml-4 font-semibold leading-6 hover:text-slate-700"
  • :th_label_class "p-0 pb-4 pr-6 font-normal"
  • :td_class Pyro.Overrides.Default.table_td_class/1
  • :thead_class "text-left text-[0.8125rem] leading-6"
  • :action_wrapper_class "relative whitespace-nowrap py-4 text-right text-sm font-medium"
  • :tr_class "relative group hover:bg-slate-50"
  • :action_td_class "p-0 w-14"
  • :th_action_class "relative p-0 pb-4"
  • :class "w-full"

• Elixir.Pyro.Components.Extra.a/1

  • :class "font-black border-b-2 border-dotted text-slate-900 border-slate-900 dark:text-white dark:border-white hover:text-sky-500 hover:border-sky-500 active:text-sky-500 active:border-sky-500 active:border-solid"
  • :replace false

• Elixir.Pyro.Components.Extra.code/1

  • :class ["makeup whitespace-pre-wrap p-4 rounded relative", "shadow-md shadow-slate-900/5 dark:shadow-slate-300/5"]
  • :copy_class "absolute top-1 right-1"
  • :copy true
  • :copy_label "Copy"

• Elixir.Pyro.Components.Extra.copy_to_clipboard/1

  • :icon_class Pyro.Overrides.Default.button_icon_class/1
  • :colors ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :color "sky"
  • :variants ["solid", "inverted", "outline"]
  • :shapes ["rounded", "square", "pill"]
  • :message "Copied! 📋"
  • :size "md"
  • :class Pyro.Overrides.Default.button_class/1
  • :variant "solid"
  • :ttl 3000
  • :sizes ["xs", "sm", "md", "lg", "xl"]
  • :shape "rounded"
  • :case "uppercase"

• Elixir.Pyro.Components.Extra.nav_link/1

  • :is_current Pyro.Overrides.Default.nav_link_is_current/1
  • :class Pyro.Overrides.Default.nav_link_class/1

• Elixir.Pyro.Components.Extra.progress/1

  • :class Pyro.Overrides.Default.progress_class/1
  • :sizes ["xs", "sm", "md", "lg", "xl"]
  • :colors ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :size "md"
  • :color "sky"

• Elixir.Pyro.Components.Extra.spinner/1

  • :sizes ["xs", "sm", "md", "lg", "xl"]
  • :class Pyro.Overrides.Default.spinner_class/1
  • :size "md"

• Elixir.Pyro.Components.Extra.tooltip/1

  • :icon_name "hero-question-mark-circle-solid"
  • :tooltip_class ["absolute invisible select-none group-hover:visible normal-case block z-10", "shadow-md shadow-slate-900/5 dark:shadow-slate-300/5"]
  • :class "group hover:relative inline-block select-none hover:bg-sky-500 rounded cursor-help"
  • :vertical_offset "2.25rem"
  • :horizontal_offset "0"
  • :tooltip_text_class "bg-sky-500 text-white min-w-[20rem] p-2 rounded text-sm font-normal whitespace-pre"

• Elixir.Pyro.Components.SmartForm.render_field/1

  • :field_group_label_class "font-black col-span-full"
  • :field_group_class Pyro.Overrides.Default.smart_form_field_group_class/1

• Elixir.Pyro.Components.SmartForm.smart_form/1

  • :autocomplete "off"
  • :class Pyro.Overrides.Default.smart_form_class/1
  • :actions_class "mt-2 flex items-center justify-between gap-6"