This overrides file adds BEM classes to all Pyro components. It does not define any style.

This is great if you want to fully customize your own styles; all you have to do is define the classes in your CSS file.

Configuration

As with any Pyro overrides, you need to include the override file in your config.exs file:

config :pyro, :overrides, [PyroComponents.Overrides.BEM]copy

Then, just implement the component classes listed in Overrides in your CSS file.

In addition to the component classes, Pyro also expects the following utility classes to be implemented:

.hidden {
  display: none;
}copy

You can override specific settings by merging in your own overrides file, as described here. Additionally, the BEM overrides file supports a few application config options:

# Prefix applied to all BEM classes, useful for namespacing Pyro's components in a brownfield project.
# Defaults to `""`
config :pyro_components, :bem_prefix, "pyro-"

# Specify color variants. Defaults to all Tailwind colors families.
config :pyro_components, :bem_color_variants, ["red", "green", "brand"]

# Specify flash variants. Defaults to `~w[info error warning success]`
config :pyro_components, :bem_flash_variants, ["danger", "warning"]

# Specify size variants. Defaults to `~w[xs sm base lg xl]`
config :pyro_components, :bem_size_variants, ["normal", "huge"]

# Specify button variants. Defaults to `~w[solid outline]`
config :pyro_components, :bem_button_variants, ["normal", "ghost"]copy

Using with Tailwind

The class names are built dynamically, so if you want to use Tailwind, you will need to implement your styles without the layer directive to ensure they are always included, and you will need to ensure you put them before the utilities import for correct precedence:

@tailwind base;
@tailwind components;

/* This will always be included in your compiled CSS */
.button {
  /* ... */
}

@tailwind utilities;copy

Also, be sure to remove any Pyro-related files from your content list in tailwind.config.js, otherwise you will be including unused classes from other override skins.

• 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 :css_classes utilize the configured CSS merge utility

Overrides

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

  • :input_class PyroComponents.Overrides.BEM.input_class/1
  • :option_value_key :id
  • :option_label_key :label
  • :class "pyro_autocomplete"
  • :listbox_class "pyro_autocomplete__listbox"
  • :listbox_option_class "pyro_autocomplete__listbox_option"
  • :description_class "pyro_input__description"
  • :prompt "Search options"
  • :throttle_time 212

• Elixir.PyroComponents.Components.Core.a/1

  • :replace false
  • :class "pyro_a"

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

  • :variant "solid"
  • :colors ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]
  • :ping_class "pyro_button__ping"
  • :size "base"
  • :icon_class "pyro_button__icon"
  • :ping_animation_class "pyro_button__ping_animation"
  • :color "slate"
  • :sizes ["xs", "sm", "base", "lg", "xl"]
  • :variants ["solid", "outline"]
  • :class PyroComponents.Overrides.BEM.button_class/1

• Elixir.PyroComponents.Components.Core.code/1

  • :copy_label "Copy"
  • :class "pyro_code makeup"
  • :copy_class "pyro_code__copy"
  • :copy true

• Elixir.PyroComponents.Components.Core.color_scheme_switcher/1

  • :scheme PyroComponents.Overrides.BEM.color_scheme_switcher_scheme/1
  • :icon_light "hero-sun-solid"
  • :label_system "System"
  • :icon_system "hero-computer-desktop-mini"
  • :class "pyro_color_scheme_switcher"
  • :icon_dark "hero-moon-solid"
  • :label_dark "Dark"
  • :label_light "Light"

• Elixir.PyroComponents.Components.Core.copy_to_clipboard/1

  • :size "base"
  • :variants ["solid", "outline"]
  • :ttl 3000
  • :icon_class "pyro_button__icon"
  • :sizes ["xs", "sm", "base", "lg", "xl"]
  • :message "Copied! 📋"
  • :class PyroComponents.Overrides.BEM.button_class/1
  • :color "slate"
  • :variant "solid"
  • :colors ["slate", "gray", "zinc", "neutral", "stone", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose"]

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

  • :icon_name "hero-exclamation-circle-mini"
  • :icon_class "pyro_error__icon"
  • :class "pyro_error"

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

  • :class "pyro_flash"
  • :kinds ["info", "error", "warning", "success"]
  • :message_class "pyro_flash__message"
  • :autoshow true
  • :title__icon_class "pyro_flash__title_icon"
  • :show_js PyroComponents.Overrides.BEM.flash_show_js/2
  • :hide_js PyroComponents.Overrides.BEM.flash_hide_js/2
  • :control_class "pyro_flash__control"
  • :title_class "pyro_flash__title"
  • :close_icon_class "pyro_flash__close_icon"
  • :close true
  • :ttl 10000
  • :close_icon_name "hero-x-mark-mini"
  • :icon_name PyroComponents.Overrides.BEM.flash_icon_name/1
  • :kind "info"
  • :title PyroComponents.Overrides.BEM.flash_title/1
  • :close_button_class "pyro_flash__close_button"
  • :progress_class "pyro_flash__progress"

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

  • :include_kinds ["info", "error", "warning", "success"]
  • :class "pyro_flash_group"

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

  • :actions_class "pyro_header__actions"
  • :class "pyro_header"
  • :subtitle_class "pyro_header__subtitle"
  • :title_class "pyro_header__title"

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

  • :class "pyro_icon"

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

  • :input_datetime_zoned_wrapper_class "pyro_input__input_datetime_zoned_wrapper"
  • :input_check_label_class "pyro_input__input_check_label"
  • :description_class "pyro_input__description"
  • :clear_on_escape true
  • :class "pyro_input"
  • :input_class PyroComponents.Overrides.BEM.input_class/1
  • :get_tz_options Pyro.Component.Helpers.all_timezones/0

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

  • :class "pyro_label"

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

  • :dt_class "pyro_list__dt"
  • :dd_class "pyro_list__dd"
  • :class "pyro_list"

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

  • :show_js PyroComponents.Overrides.BEM.modal_show_js/2
  • :class "pyro_modal"
  • :hide_js PyroComponents.Overrides.BEM.modal_hide_js/2

• Elixir.PyroComponents.Components.Core.nav_link/1

  • :class PyroComponents.Overrides.BEM.nav_link_class/1

• Elixir.PyroComponents.Components.Core.progress/1

  • :color "slate"
  • :size "base"
  • :class PyroComponents.Overrides.BEM.progress_class/1
  • :sizes ["xs", "sm", "base", "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"]

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

  • :class "pyro_simple_form"
  • :actions_class "pyro_simple_form__actions"

• Elixir.PyroComponents.Components.Core.slide_over/1

  • :header_class "pyro_slide_over__header"
  • :class PyroComponents.Overrides.BEM.slide_over_class/1
  • :header_close_button_class "pyro_slide_over__header_close_button"
  • :overlay_class "pyro_slide_over__overlay"
  • :close_icon_class "pyro_slide_over__close_icon"
  • :wrapper_class PyroComponents.Overrides.BEM.slide_over_wrapper_class/1
  • :content_class "pyro_slide_over__content"
  • :origins ["left", "right", "top", "bottom"]
  • :max_widths ["sm", "md", "lg", "xl", "2xl", "full"]
  • :close_icon_name "hero-x-mark-solid"
  • :max_width "base"
  • :header_inner_class "pyro_slide_over__header_inner"
  • :header_title_class "pyro_slide_over__header_title"
  • :origin "left"
  • :hide_js PyroComponents.Overrides.BEM.slide_over_hide_js/5

• Elixir.PyroComponents.Components.Core.spinner/1

  • :size "base"
  • :class PyroComponents.Overrides.BEM.spinner_class/1
  • :sizes ["xs", "sm", "base", "lg", "xl"]

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

  • :tbody_class "pyro_table__tbody"
  • :thead_class "pyro_table__thead"
  • :th_action_class "pyro_table__th_action"
  • :class "pyro_table"
  • :action_wrapper_class "pyro_table__action_wrapper"
  • :td_class "pyro_table__td"
  • :action_class "pyro_table__action"
  • :action_td_class "pyro_table__action_td"
  • :th_label_class "pyro_table__th_label"
  • :tr_class "pyro_table__tr"

• Elixir.PyroComponents.Components.Core.tooltip/1

  • :vertical_offset "2.25rem"
  • :tooltip_text_class "pyro_tooltip__text"
  • :tooltip_class "pyro_tooltip__tooltip"
  • :class "pyro_tooltip"
  • :horizontal_offset "0"
  • :icon_name "hero-question-mark-circle-solid"

• Elixir.PyroComponents.Components.DataTable.cell/1 (private)

  • :class "pyro_data_table__cell"

• Elixir.PyroComponents.Components.DataTable.data_table/1

  • :header_class "pyro_data_table__header"
  • :body_class "pyro_data_table__body"
  • :row_class "pyro_data_table__row"
  • :footer_wrapper_class "pyro_data_table__footer_wrapper"
  • :footer_class "pyro_data_table__footer"
  • :class "pyro_data_table"
  • :row_actions_class "pyro_data_table__row_actions"

• Elixir.PyroComponents.Components.DataTable.sort_icon/1 (private)

  • :index_class "pyro_data_table__sort_icon_index"
  • :sort_icon_name PyroComponents.Overrides.BEM.data_table_sort_icon_name/1
  • :class "pyro_data_table__sort_icon"

• Elixir.PyroComponents.Components.DataTable.th/1 (private)

  • :btn_class PyroComponents.Overrides.BEM.data_table_sort_btn_class/1
  • :class PyroComponents.Overrides.BEM.data_table_th_class/1

• Elixir.PyroComponents.Components.Pagination.pagination/1

  • :next_icon "hero-chevron-right-solid"
  • :first_icon_class "pyro_pagination__first_icon"
  • :previous_class "pyro_pagination__previous"
  • :next_icon_class "pyro_pagination__next_icon"
  • :class "pyro_pagination"
  • :first_icon "hero-chevron-double-left-solid"
  • :previous_icon_class "pyro_pagination__previous_icon"
  • :next_class "pyro_pagination__next"
  • :limit_form_input_option_class "pyro_pagination__limit_form_input_option"
  • :top_icon "hero-chevron-double-up-solid"
  • :limit_form_label_class "pyro_pagination__limit_form_label"
  • :first_class "pyro_pagination__first"
  • :top_class "pyro_pagination__top"
  • :top_icon_class "pyro_pagination__top_icon"
  • :last_icon "hero-chevron-double-right-solid"
  • :limit_form_class "pyro_pagination__limit_form"
  • :last_class "pyro_pagination__last"
  • :previous_icon "hero-chevron-left-solid"
  • :reset_class "pyro_pagination__reset"
  • :limit_form_input_class "pyro_pagination__limit_form_input"
  • :last_icon_class "pyro_pagination__last_icon"