yattho_view_components 0.0.1

data/app/components/yattho/alpha/banner.css

@@ -0,0 +1,131 @@
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8, 8px);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr minmax(0,auto) min-content;
+  grid-template-rows: min-content;
+
+  /* `sm` breakpoint variantion */
+}
+
+@media (max-width: 543.98px) {
+
+.Banner {
+    grid-template-areas:
+      'visual message close'
+      '. actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+}
+
+    .Banner .Banner-actions {
+        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
+    }
+  }
+
+/* Elements */
+
+.Banner .Banner-visual {
+    display: grid;
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: visual;
+    align-self: start;
+  }
+
+.Banner .Banner-visual > .octicon {
+      margin-block: calc(var(--base-size-4, 4px) / 2);
+    }
+
+.Banner .Banner-visual > * {
+      align-self: center;
+    }
+
+.Banner .Banner-message {
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: message;
+    align-self: center;
+  }
+
+.Banner .Banner-message p:last-child {
+      margin-bottom: 0;
+    }
+
+.Banner .Banner-message .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+    }
+
+.Banner .Banner-actions {
+    grid-area: actions;
+  }
+
+.Banner .Banner-actions:last-child {
+      align-self: center;
+    }
+
+/* is this used anywhere? could not find any use, but unsure */
+
+.Banner .Banner-close {
+    grid-area: close;
+    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
+  }
+
+.Banner .Banner-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+.Banner.Banner--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+  }
+
+.Banner.Banner--warning .Banner-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+
+.Banner.Banner--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+  }
+
+.Banner.Banner--error .Banner-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+
+.Banner.Banner--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+  }
+
+.Banner.Banner--success .Banner-visual .octicon {
+      color: var(--color-success-fg);
+    }
+
+/* Full-width */
+
+.Banner.Banner--full {
+    margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+@media (max-width: 767.98px) {
+    .Banner.Banner--full-whenNarrow {
+      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }

data/app/components/yattho/alpha/banner.css.json

@@ -0,0 +1 @@
+{"name":"alpha/banner","selectors":[".Banner",".Banner .Banner-actions",".Banner .Banner-visual",".Banner .Banner-visual > .octicon",".Banner .Banner-visual > *",".Banner .Banner-message",".Banner .Banner-message p:last-child",".Banner .Banner-message .Banner-title:not(:only-child)",".Banner .Banner-actions:last-child",".Banner .Banner-close",".Banner .Banner-visual .octicon",".Banner.Banner--warning",".Banner.Banner--warning .Banner-visual .octicon",".Banner.Banner--error",".Banner.Banner--error .Banner-visual .octicon",".Banner.Banner--success",".Banner.Banner--success .Banner-visual .octicon",".Banner.Banner--full",".Banner.Banner--full-whenNarrow"]}

data/app/components/yattho/alpha/banner.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AAAA,iBAAiB;;AAEjB;EACE,kBAAkB;EAClB,aAAa;EACb,gCAAgC;EAChC,8BAA8B;EAC9B,yFAAyF;EACzF,2FAA2F;EAC3F,qDAAqD;EACrD,sBAAsB;EACtB,mDAAmD;EACnD,iEAAiE;EACjE,+BAA+B;;EAE/B,+BAA+B;AA8GjC;;AA7GE;;AAdF;IAeI;;yBAEqB;IACrB,kDAAkD;IAClD,2CAA2C;AAwG/C;;IAtGI;QACI,2DAA2D;IAC/D;EACF;;AAEA,aAAa;;AAEb;IACE,aAAa;IACb,wDAAwD;IACxD,iBAAiB;IACjB,iBAAiB;EASnB;;AAPE;MACE,+CAA+C;IACjD;;AAEA;MACE,kBAAkB;IACpB;;AAGF;IACE,wDAAwD;IACxD,kBAAkB;IAClB,kBAAkB;EAUpB;;AARE;MACE,gBAAgB;IAClB;;AAEA;MACE,gBAAgB;MAChB,kDAAkD;IACpD;;AAGF;IACE,kBAAkB;EAKpB;;AAHE;MACE,kBAAkB;IACpB;;AAGF,8DAA8D;;AAC9D;IACE,gBAAgB;IAChB,iEAAiE;EACnE;;AAEA;IACE,6BAA6B;EAC/B;;AAEA;IACE,8BAA8B;IAC9B,+FAA+F;IAC/F,0CAA0C;EAK5C;;AAHE;MACE,gCAAgC;IAClC;;AAGF;IACE,8BAA8B;IAC9B,yFAAyF;IACzF,uCAAuC;EAKzC;;AAHE;MACE,6BAA6B;IAC/B;;AAGF;IACE,8BAA8B;IAC9B,2FAA2F;IAC3F,wCAAwC;EAK1C;;AAHE;MACE,8BAA8B;IAChC;;AAGF,eAAe;;AAEf;IACE,0EAA0E;IAC1E,eAAe;IACf,cAAc;IACd,gBAAgB;EAClB;;AAEA;IACE;MACE,0EAA0E;MAC1E,eAAe;MACf,cAAc;MACd,gBAAgB;IAClB;EACF","file":"banner.css","sourcesContent":["/* Banner alert */\n\n.Banner {\n  position: relative;\n  display: grid;\n  padding: var(--base-size-8, 8px);\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);\n  border-radius: var(--yattho-borderRadius-medium, 6px);\n  grid-auto-flow: column;\n  grid-template-areas: 'visual message actions close';\n  grid-template-columns: min-content 1fr minmax(0,auto) min-content;\n  grid-template-rows: min-content;\n\n  /* `sm` breakpoint variantion */\n  @media (max-width: 543.98px) {\n    grid-template-areas:\n      'visual message close'\n      '. actions actions';\n    grid-template-columns: min-content 1fr min-content;\n    grid-template-rows: min-content min-content;\n\n    & .Banner-actions {\n        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);\n    }\n  }\n\n  /* Elements */\n\n  & .Banner-visual {\n    display: grid;\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: visual;\n    align-self: start;\n\n    & > .octicon {\n      margin-block: calc(var(--base-size-4, 4px) / 2);\n    }\n\n    & > * {\n      align-self: center;\n    }\n  }\n\n  & .Banner-message {\n    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);\n    grid-area: message;\n    align-self: center;\n\n    & p:last-child {\n      margin-bottom: 0;\n    }\n\n    & .Banner-title:not(:only-child) {\n      margin-bottom: 0;\n      font-weight: var(--base-text-weight-semibold, 600);\n    }\n  }\n\n  & .Banner-actions {\n    grid-area: actions;\n\n    &:last-child {\n      align-self: center;\n    }\n  }\n\n  /* is this used anywhere? could not find any use, but unsure */\n  & .Banner-close {\n    grid-area: close;\n    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);\n  }\n\n  & .Banner-visual .octicon {\n    color: var(--color-accent-fg);\n  }\n\n  &.Banner--warning {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n    border-color: var(--color-attention-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-attention-fg);\n    }\n  }\n\n  &.Banner--error {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n    border-color: var(--color-danger-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-danger-fg);\n    }\n  }\n\n  &.Banner--success {\n    color: var(--color-fg-default);\n    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n    border-color: var(--color-success-muted);\n\n    & .Banner-visual .octicon {\n      color: var(--color-success-fg);\n    }\n  }\n\n  /* Full-width */\n\n  &.Banner--full {\n    margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n    border-right: 0;\n    border-left: 0;\n    border-radius: 0;\n  }\n\n  @media (max-width: 767.98px) {\n    &.Banner--full-whenNarrow {\n      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);\n      border-right: 0;\n      border-left: 0;\n      border-radius: 0;\n    }\n  }\n}"]}

data/app/components/yattho/alpha/banner.html.erb

@@ -0,0 +1,33 @@
+<%= render(Yattho::BaseComponent.new(**@wrapper_arguments)) do %>
+  <%= render(Yattho::BaseComponent.new(**@system_arguments)) do %>
+    <% if @icon %>
+      <div class="Banner-visual">
+        <%= render(Yattho::Beta::Octicon.new(icon: @icon)) %>
+      </div>
+    <% end %>
+    <%= render(Yattho::BaseComponent.new(**@message_arguments)) do %>
+      <p class="Banner-title" data-target="<%= catalyst_target(field: "titleText") %>"><%= content %></p>
+      <% if @description %>
+        <p><%= @description %></p>
+      <% end %>
+    <% end %>
+    <% if action %>
+      <div class="flash-action Banner-actions">
+        <%= action %>
+      </div>
+    <% end %>
+    <% if @dismissible %>
+      <div class="flash-close Banner-close">
+        <%= render(
+          Yattho::Beta::IconButton.new(
+            scheme: :invisible,
+            icon: :x,
+            aria: { label: "Dismiss" },
+            data: { action: catalyst_action(event: "click", function: "dismiss") },
+            autofocus: true
+          )
+        ) %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/yattho/alpha/banner.pcss

@@ -0,0 +1,126 @@
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8, 8px);
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border: var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) solid var(--color-accent-muted);
+  border-radius: var(--yattho-borderRadius-medium, 6px);
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr minmax(0,auto) min-content;
+  grid-template-rows: min-content;
+
+  /* `sm` breakpoint variantion */
+  @media (max-width: 543.98px) {
+    grid-template-areas:
+      'visual message close'
+      '. actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+
+    & .Banner-actions {
+        margin: var(--base-size-8, 8px) 0 0 var(--base-size-8, 8px);
+    }
+  }
+
+  /* Elements */
+
+  & .Banner-visual {
+    display: grid;
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: visual;
+    align-self: start;
+
+    & > .octicon {
+      margin-block: calc(var(--base-size-4, 4px) / 2);
+    }
+
+    & > * {
+      align-self: center;
+    }
+  }
+
+  & .Banner-message {
+    padding: var(--base-size-6, 6px) var(--base-size-8, 8px);
+    grid-area: message;
+    align-self: center;
+
+    & p:last-child {
+      margin-bottom: 0;
+    }
+
+    & .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: var(--base-text-weight-semibold, 600);
+    }
+  }
+
+  & .Banner-actions {
+    grid-area: actions;
+
+    &:last-child {
+      align-self: center;
+    }
+  }
+
+  /* is this used anywhere? could not find any use, but unsure */
+  & .Banner-close {
+    grid-area: close;
+    margin-left: var(--yattho-controlStack-medium-gap-condensed, 8px);
+  }
+
+  & .Banner-visual .octicon {
+    color: var(--color-accent-fg);
+  }
+
+  &.Banner--warning {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+    border-color: var(--color-attention-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-attention-fg);
+    }
+  }
+
+  &.Banner--error {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+    border-color: var(--color-danger-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-danger-fg);
+    }
+  }
+
+  &.Banner--success {
+    color: var(--color-fg-default);
+    background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+    border-color: var(--color-success-muted);
+
+    & .Banner-visual .octicon {
+      color: var(--color-success-fg);
+    }
+  }
+
+  /* Full-width */
+
+  &.Banner--full {
+    margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+  @media (max-width: 767.98px) {
+    &.Banner--full-whenNarrow {
+      margin-top: calc(var(--yattho-borderWidth-thin, max(1px, 0.0625rem)) * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }
+}

data/app/components/yattho/alpha/banner.rb

@@ -0,0 +1,138 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Alpha
+    # Use `Banner` to highlight important information.
+    class Banner < Yattho::Component
+      status :alpha
+
+      # A button or custom content that will render on the right-hand side of the component.
+      #
+      # To render a button, call the `with_action_button` method, which accepts the arguments accepted by <%= link_to_component(Yattho::Beta::Button) %>.
+      #
+      # To render custom content, call the `with_action_content` method and pass a block that returns HTML.
+      renders_one :action, types: {
+        button: lambda { |**system_arguments|
+          deny_tag_argument(**system_arguments)
+
+          Yattho::Beta::Button.new(**system_arguments)
+        },
+
+        content: lambda { |**system_arguments|
+          deny_tag_argument(**system_arguments)
+          system_arguments[:tag] = :div
+
+          Yattho::BaseComponent.new(**system_arguments)
+        }
+      }
+
+      DEFAULT_SCHEME = :default
+      SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "Banner--warning",
+        :danger => "Banner--error",
+        :success => "Banner--success"
+      }.freeze
+
+      LEGACY_SCHEME_MAPPINGS = {
+        DEFAULT_SCHEME => "",
+        :warning => "flash-warn",
+        :danger => "flash-error",
+        :success => "flash-success"
+      }.freeze
+
+      DEFAULT_ICONS = {
+        default: :bell,
+        warning: :alert,
+        danger: :stop,
+        success: :'check-circle'
+      }.freeze
+
+      # @example Schemes
+      #   <div style="display: grid; row-gap: 15px">
+      #     <%= render(Yattho::Alpha::Banner.new) { "This is a banner message!" } %>
+      #     <%= render(Yattho::Alpha::Banner.new(scheme: :warning)) { "This is a warning banner!" } %>
+      #     <%= render(Yattho::Alpha::Banner.new(scheme: :danger)) { "This is a danger banner!" } %>
+      #     <%= render(Yattho::Alpha::Banner.new(scheme: :success)) { "This is a success banner!" } %>
+      #   </div>
+      #
+      # @example Full width
+      #   <%= render(Yattho::Alpha::Banner.new(full: true)) { "This is a full width banner!" } %>
+      #
+      # @example Dismissible
+      #   <%= render(Yattho::Alpha::Banner.new(dismissible: true, reappear: true)) { "This is a dismissible banner!" } %>
+      #
+      # @example Custom icon
+      #   <%= render(Yattho::Alpha::Banner.new(icon: :people)) { "This is a banner with a custom icon!" } %>
+      #
+      # @example With action button
+      #   <%= render(Yattho::Alpha::Banner.new) do |component| %>
+      #     This is a banner with an action button!
+      #     <% component.with_action_button(size: :small) { "Take action" } %>
+      #   <% end %>
+      #
+      # @example With custom action
+      #   <%= render(Yattho::Alpha::Banner.new) do |component| %>
+      #     Comment saved!
+      #     <% component.with_action_content do %>
+      #       <%= render(Yattho::IconButton.new(icon: :pencil, mr: 1, "aria-label": "Edit")) %>
+      #     <% end %>
+      #   <% end %>
+      #
+      # @param full [Boolean] Whether the component should take up the full width of the screen.
+      # @param full_when_narrow [Boolean] Whether the component should take up the full width of the screen when rendered inside smaller viewports.
+      # @param dismissible [Boolean] Whether the component can be dismissed with an "x" button.
+      # @param description [String] Description text rendered underneath the message.
+      # @param icon [Symbol] The name of an <%= link_to_octicons %> icon to use. If no icon is provided, a default one will be chosen based on the scheme.
+      # @param scheme [Symbol] <%= one_of(Yattho::Alpha::Banner::SCHEME_MAPPINGS.keys) %>
+      # @param reappear [Boolean] Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(full: false, full_when_narrow: false, dismissible: false, description: nil, icon: nil,
+                     scheme: DEFAULT_SCHEME, reappear: false, **system_arguments)
+        @scheme = fetch_or_fallback(SCHEME_MAPPINGS.keys, scheme, DEFAULT_SCHEME)
+        @icon = icon || DEFAULT_ICONS[@scheme]
+        @dismissible = dismissible
+        @description = description
+        @reappear = reappear
+
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "Banner",
+          "flash", # legacy
+          SCHEME_MAPPINGS[@scheme],
+          LEGACY_SCHEME_MAPPINGS[@scheme],
+          'Banner--full': full,
+          'flash-full': full, # legacy
+          'Banner--full-whenNarrow': full_when_narrow
+        )
+
+        @message_arguments = {
+          tag: :div,
+          classes: "Banner-message"
+        }
+
+        @wrapper_arguments = {
+          tag: custom_element_name
+        }
+
+        @wrapper_arguments[:data] = { reappear: @reappear } if @reappear
+      end
+
+      private
+
+      def custom_element_name
+        "x-banner"
+      end
+
+      def catalyst_action(event:, function:)
+        "#{event}:#{custom_element_name}##{function}"
+      end
+
+      def catalyst_target(field:)
+        "#{custom_element_name}.#{field}"
+      end
+    end
+  end
+end

data/app/components/yattho/alpha/button_marketing.css

@@ -0,0 +1,211 @@
+.btn-mktg {
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),
+    var(--color-mktg-btn-bg) !important;
+  -webkit-appearance: none !important;
+          appearance: none !important;
+}
+
+.btn-mktg {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+
+  /* stylelint-disable-next-line yattho/spacing */
+  padding: 0.9rem 1.5rem 1.1rem;
+
+  /* stylelint-disable-next-line yattho/typography */
+  font-size: 1rem;
+  font-weight: var(--base-text-weight-semibold, 600);
+  line-height: 1;
+  color: var(--color-canvas-default);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -webkit-user-select: none;
+          user-select: none;
+  border: 0;
+
+  /* stylelint-disable-next-line yattho/borders */
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s, outline 0.2s ease;
+}
+
+.btn-mktg::before {
+    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;
+  }
+
+.btn-mktg::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    content: '';
+
+    /* stylelint-disable-next-line yattho/colors */
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
+  }
+
+.btn-mktg:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+.btn-mktg:hover {
+    text-decoration: none;
+  }
+
+.btn-mktg:hover::before, .btn-mktg:focus::before, .btn-mktg:focus-visible::before, .btn-mktg.focus::before {
+      opacity: 1;
+    }
+
+/* fallback :focus state */
+
+.btn-mktg:focus {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: 2px;
+    box-shadow: none;
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.btn-mktg:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.btn-mktg:focus-visible {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+.btn-mktg:active::before {
+      opacity: 0.5 !important;
+    }
+
+.btn-mktg.disabled,
+  .btn-mktg[disabled] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+
+.btn-muted-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+}
+
+.btn-muted-mktg {
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+}
+
+.btn-muted-mktg::before {
+    display: none;
+  }
+
+.btn-muted-mktg:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+.btn-muted-mktg:active {
+    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;
+  }
+
+.btn-muted-mktg:active {
+
+    /* stylelint-disable-next-line yattho/box-shadow */
+  }
+
+.btn-muted-mktg:disabled {
+    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;
+  }
+
+.btn-muted-mktg:disabled {
+
+    /* stylelint-disable-next-line yattho/box-shadow */
+  }
+
+.btn-subtle-mktg {
+  color: var(--color-fg-default) !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.btn-subtle-mktg::before {
+    background: none !important;
+  }
+
+.btn-subtle-mktg:hover {
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+.btn-signup-mktg {
+  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;
+}
+
+.btn-signup-mktg {
+
+  /* stylelint-disable-next-line yattho/colors */
+  color: #fff;
+
+  /* stylelint-disable-next-line yattho/colors */
+}
+
+.btn-signup-mktg::before {
+    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;
+  }
+
+.btn-signup-mktg::before {
+
+    /* stylelint-disable-next-line yattho/colors */
+  }
+
+/* fallback :focus state */
+
+.btn-signup-mktg:focus {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: 2px;
+    box-shadow: none;
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.btn-signup-mktg:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.btn-signup-mktg:focus-visible {
+    outline: 2px solid var(--color-accent-fg);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+/* Size modifiers */
+
+.btn-small-mktg {
+
+  /* stylelint-disable-next-line yattho/spacing */
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+  padding: 16px 30px 20px !important;
+}
+
+.btn-large-mktg {
+
+  /* stylelint-disable-next-line yattho/spacing */
+
+  /* stylelint-disable-next-line yattho/typography */
+  font-size: 1.25rem;
+}

data/app/components/yattho/alpha/button_marketing.css.json

@@ -0,0 +1 @@
+{"name":"alpha/button_marketing","selectors":[".btn-mktg",".btn-mktg::before",".btn-mktg:hover",".btn-mktg:hover::before"," .btn-mktg:focus::before"," .btn-mktg:focus-visible::before"," .btn-mktg.focus::before",".btn-mktg:focus",".btn-mktg:focus:not(:focus-visible)",".btn-mktg:focus-visible",".btn-mktg:active::before",".btn-mktg.disabled","\n  .btn-mktg[disabled]",".btn-muted-mktg",".btn-muted-mktg::before",".btn-muted-mktg:hover",".btn-muted-mktg:active",".btn-muted-mktg:disabled",".btn-subtle-mktg",".btn-subtle-mktg::before",".btn-subtle-mktg:hover",".btn-signup-mktg",".btn-signup-mktg::before",".btn-signup-mktg:focus",".btn-signup-mktg:focus:not(:focus-visible)",".btn-signup-mktg:focus-visible",".btn-small-mktg",".btn-large-mktg"]}

data/app/components/yattho/alpha/button_marketing.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["button_marketing.pcss","../../../../lib/postcss_mixins/focusOutline.pcss"],"names":[],"mappings":"AAAA;EAiBE;;uCAEqC;EAMrC,mCAA2B;UAA3B,2BAA2B;AA6D7B;;AAtFA;EACE,kBAAkB;EAClB,UAAU;EACV,qBAAqB;;EAErB,+CAA+C;EAC/C,6BAA6B;;EAE7B,kDAAkD;EAClD,eAAe;EACf,kDAAkD;EAClD,cAAc;EACd,kCAAkC;EAClC,kBAAkB;EAClB,mBAAmB;EACnB,sBAAsB;EACtB,yBAAiB;UAAjB,iBAAiB;EAIjB,SAAS;;EAET,+CAA+C;EAC/C,uBAAuB;EACvB,8CAA8C;AA8DhD;;AA3DE;IAUE,yGAAyG;EAK3G;;AAfA;IACE,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,SAAS;IACT,OAAO;IACP,WAAW;IACX,WAAW;;IAEX,8CAA8C;IAE9C,sBAAsB;IACtB,UAAU;IACV,wBAAwB;IACxB,6BAA6B;EAC/B;;AAEA;IAEE,yDAAyD;EAC3D;;AAHA;IACE,qBAAqB;EAEvB;;AAME;MACE,UAAU;IACZ;;AAGF,0BAA0B;;AAC1B;IC1DA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;;ID2Dd,0DAA0D;EAK5D;;AAJE;MACE,8BAA8B;MAC9B,gBAAgB;IAClB;;AAGF,wBAAwB;;AACxB;ICrEA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;EDqEhB;;AAGE;MACE,uBAAuB;IACzB;;AAGF;;IAEE,oBAAoB;IACpB,eAAe;IACf,YAAY;EACd;;AAGF;EACE,yCAAyC;EACzC,2BAA2B;AAsB7B;;AAxBA;EAGE,gDAAgD;AAqBlD;;AAnBE;IACE,aAAa;EACf;;AAEA;IACE,+DAA+D;EACjE;;AAEA;IAGE,8DAA8D;EAChE;;AAJA;;IAEE,kDAAkD;EAEpD;;AAEA;IAGE,6DAA6D;EAC/D;;AAJA;;IAEE,kDAAkD;EAEpD;;AAGF;EACE,yCAAyC;EACzC,2BAA2B;EAC3B,2BAA2B;AAS7B;;AAPE;IACE,2BAA2B;EAC7B;;AAEA;IACE,+DAA+D;EACjE;;AAGF;EAME,uHAAuH;AAuBzH;;AA7BA;;EAEE,8CAA8C;EAC9C,WAAW;;EAEX,8CAA8C;AAwBhD;;AArBE;IAGE,qGAAqG;EACvG;;AAJA;;IAEE,8CAA8C;EAEhD;;AAEA,0BAA0B;;AAC1B;IC9IA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;;ID+Id,0DAA0D;EAK5D;;AAJE;MACE,8BAA8B;MAC9B,gBAAgB;IAClB;;AAGF,wBAAwB;;AACxB;ICzJA,yCAAgC;IAChC,mBAA8B;IAC9B,gBAAgB;EDyJhB;;AAGF,mBAAmB;;AAEnB;;EAEE,+CAA+C;EAC/C,gCAAgC;AAClC;;AAEA;EAGE,kCAAkC;AAIpC;;AAPA;;EAEE,+CAA+C;;EAG/C,kDAAkD;EAClD,kBAAkB;AACpB","file":"button_marketing.css","sourcesContent":[".btn-mktg {\n  position: relative;\n  z-index: 1;\n  display: inline-block;\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.9rem 1.5rem 1.1rem;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1rem;\n  font-weight: var(--base-text-weight-semibold, 600);\n  line-height: 1;\n  color: var(--color-canvas-default);\n  text-align: center;\n  white-space: nowrap;\n  vertical-align: middle;\n  user-select: none;\n  background:\n    linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%),\n    var(--color-mktg-btn-bg) !important;\n  border: 0;\n\n  /* stylelint-disable-next-line yattho/borders */\n  border-radius: 0.375rem;\n  transition: box-shadow 0.2s, outline 0.2s ease;\n  appearance: none !important;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    z-index: -1;\n    content: '';\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(255, 255, 255, 15%) 0%, rgba(255, 255, 255, 0%) 100%) !important;\n    border-radius: inherit;\n    opacity: 0;\n    transition: opacity 0.2s;\n    background-blend-mode: normal;\n  }\n\n  &:hover {\n    text-decoration: none;\n    box-shadow: var(--color-mktg-btn-shadow-hover) !important;\n  }\n\n  &:hover,\n  &:focus,\n  &:focus-visible,\n  &.focus {\n    &::before {\n      opacity: 1;\n    }\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg);\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n\n  &:active {\n    &::before {\n      opacity: 0.5 !important;\n    }\n  }\n\n  &.disabled,\n  &[disabled] {\n    pointer-events: none;\n    cursor: default;\n    opacity: 0.5;\n  }\n}\n\n.btn-muted-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: var(--color-mktg-btn-shadow-outline);\n\n  &::before {\n    display: none;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n\n  &:active {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-default) 0 0 0 3px inset !important;\n  }\n\n  &:disabled {\n\n    /* stylelint-disable-next-line yattho/box-shadow */\n    box-shadow: var(--color-fg-subtle) 0 0 0 1px inset !important;\n  }\n}\n\n.btn-subtle-mktg {\n  color: var(--color-fg-default) !important;\n  background: none !important;\n  box-shadow: none !important;\n\n  &::before {\n    background: none !important;\n  }\n\n  &:hover {\n    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;\n  }\n}\n\n.btn-signup-mktg {\n\n  /* stylelint-disable-next-line yattho/colors */\n  color: #fff;\n\n  /* stylelint-disable-next-line yattho/colors */\n  background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%), rgb(46, 164, 79) !important;\n\n  &::before {\n\n    /* stylelint-disable-next-line yattho/colors */\n    background: linear-gradient(180deg, rgba(52, 183, 89, 15%) 0%, rgba(46, 164, 79, 0%) 100%) !important;\n  }\n\n  /* fallback :focus state */\n  &:focus {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n\n    /* remove fallback :focus if :focus-visible is supported */\n    &:not(:focus-visible) {\n      outline: solid 1px transparent;\n      box-shadow: none;\n    }\n  }\n\n  /* default focus state */\n  &:focus-visible {\n    @mixin focusOutline 2px, var(--color-accent-fg) ;\n  }\n}\n\n/* Size modifiers */\n\n.btn-small-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 0.625rem 1rem 0.8125rem;\n}\n\n.btn-large-mktg {\n\n  /* stylelint-disable-next-line yattho/spacing */\n  padding: 16px 30px 20px !important;\n\n  /* stylelint-disable-next-line yattho/typography */\n  font-size: 1.25rem;\n}","@define-mixin focusOutline $outlineOffset: -2px, $outlineColor: var(--color-accent-fg) {\n  outline: 2px solid $outlineColor;\n  outline-offset: $outlineOffset;\n  box-shadow: none;\n}"]}