Module: StimulusPlumbers::Themes::Tailwind::Button

Included in:

StimulusPlumbers::Themes::TailwindTheme

Defined in:

lib/stimulus_plumbers/themes/tailwind/button.rb

Constant Summary

VARIANTS =

{
  primary:     %w[
    bg-(--sp-color-primary)
    text-(--sp-color-primary-fg)
    hover:bg-(--sp-color-primary)/90
    focus-visible:ring-(--sp-focus-ring-color)
  ].freeze,
  secondary:   %w[
    bg-(--sp-color-muted)
    text-(--sp-color-fg)
    hover:bg-(--sp-color-border)
  ].freeze,
  outline:     %w[
    border border-(--sp-color-border)
    bg-transparent
    text-(--sp-color-fg)
    hover:bg-(--sp-color-muted)
  ].freeze,
  destructive: %w[
    bg-(--sp-color-destructive)
    text-(--sp-color-destructive-fg)
    hover:bg-(--sp-color-destructive)/90
  ].freeze,
  ghost:       %w[hover:bg-(--sp-color-muted) text-(--sp-color-fg)].freeze,
  link:        %w[text-(--sp-color-primary) underline-offset-4 hover:underline].freeze
}.freeze

SIZES =

{
  sm: %w[h-8 px-(--sp-space-3) text-(--sp-text-sm)].freeze,
  md: %w[h-9 px-(--sp-space-4) text-(--sp-text-base)].freeze,
  lg: %w[h-11 px-(--sp-space-6) text-(--sp-text-lg)].freeze
}.freeze

FLEX_ALIGN =

{
  row: {
    left:   "justify-start",
    center: %w[justify-center items-center].freeze,
    right:  "justify-end",
    top:    "items-start",
    bottom: "items-end"
  }.freeze,
  col: {
    top:    "justify-start",
    center: %w[justify-center items-center].freeze,
    bottom: "justify-end",
    left:   "items-start",
    right:  "items-end"
  }.freeze
}.freeze

BASE =

%w[
  inline-flex items-center justify-center gap-2 font-medium
  rounded-(--sp-radius-md) transition-colors
  focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
  disabled:pointer-events-none disabled:opacity-50
].freeze

GROUP_BASE =

%w[flex gap-(--sp-space-2)].freeze