yattho_view_components 0.0.1

data/app/components/yattho/beta/avatar_stack.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAAA,gBAAgB;;AAEhB;sCACsC;;AAEtC;EACE,kBAAkB;EAClB,eAAe;EACf,YAAY;AAad;;AAXE;IACE,kBAAkB;EACpB;;AAEA;IACE,eAAe;EACjB;;AAEA;IACE,eAAe;EACjB;;AAGF;EACE,aAAa;EACb,uCAAuC;EACvC,oBAAoB;AAkDtB;;AAhDE;IACE,kBAAkB;IAClB,UAAU;IACV,aAAa;IACb,WAAW;IACX,YAAY;IACZ,uBAAuB;IACvB,mBAAmB;IACnB,6CAA6C;IAC7C,mFAAmF;IACnF,oDAAoD;IACpD,gBAAgB;IAChB,mCAAmC;EAoBrC;;AAlBE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,eAAe;IACjB;;AAEA;MACE,oDAAoD;IACtD;;AAEA,2BAA2B;;AAC3B;MACE,aAAa;MACb,UAAU;IACZ;;AAIA;MACE,iBAAiB;IACnB;;AAEA;MACE,aAAa;MACb,UAAU;IACZ;;AAEA;MACE,wBAAwB;IAC1B;;AAIJ;EACE,UAAU;EACV,eAAe;EACf,sCAAsC;AAqBxC;;AAnBE;;IAEE,kBAAkB;IAClB,cAAc;IACd,YAAY;IACZ,WAAW;IACX,kBAAkB;IAClB,8EAA8E;EAChF;;AAEA;IACE,WAAW;IACX,+CAA+C;EACjD;;AAEA;IACE,WAAW;IACX,0CAA0C;EAC5C;;AAGF,4BAA4B;;AAG1B;IACE,QAAQ;IACR,2BAA2B;EAU7B;;AARE;MACE,eAAe;MACf,gBAAgB;IAClB;;AAEA;MACE,cAAc;IAChB;;AAGF;IACE,0CAA0C;EAU5C;;AARE;MACE,UAAU;IACZ;;AAEA;MACE,UAAU;MACV,sCAAsC;IACxC;;AAGF;IACE,eAAe;IACf,kBAAkB;IAClB,eAAe;IACf,kFAAkF;EACpF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--color-canvas-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--color-canvas-default);\n    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n    border-radius: var(--yattho-borderRadius-small, 4px);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--yattho-borderRadius-small, 4px);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--color-canvas-subtle);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--color-avatar-stack-fade-more);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--color-avatar-stack-fade);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--color-avatar-stack-fade);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--color-canvas-subtle);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);\n  }\n}"]}

data/app/components/yattho/beta/avatar_stack.html.erb

@@ -0,0 +1,10 @@
+<%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+  <%= render body_component do %>
+    <% avatars.each_with_index do |avatar, i| %>
+      <% if i == 2 %>
+        <div class="avatar avatar-more"></div>
+      <% end %>
+      <%= avatar %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/yattho/beta/avatar_stack.pcss

@@ -0,0 +1,141 @@
+/* AvatarStack */
+
+/* Stacked avatars can be used to show who is participating in thread when
+** there is limited space available. */
+
+.AvatarStack {
+  position: relative;
+  min-width: 26px;
+  height: 20px;
+
+  & .AvatarStack-body {
+    position: absolute;
+  }
+
+  &.AvatarStack--two {
+    min-width: 36px;
+  }
+
+  &.AvatarStack--three-plus {
+    min-width: 46px;
+  }
+}
+
+.AvatarStack-body {
+  display: flex;
+  background: var(--color-canvas-default);
+  border-radius: 100px;
+
+  & .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    margin-right: -11px;
+    background-color: var(--color-canvas-default);
+    border-right: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
+    border-radius: var(--yattho-borderRadius-small, 4px);
+    box-shadow: none;
+    transition: margin 0.1s ease-in-out;
+
+    &:first-child {
+      z-index: 3;
+    }
+
+    &:last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+    & img {
+      border-radius: var(--yattho-borderRadius-small, 4px);
+    }
+
+    /* Account for 4+ avatars */
+    &:nth-child(n + 4) {
+      display: none;
+      opacity: 0;
+    }
+  }
+
+  &:hover {
+    & .avatar {
+      margin-right: 3px;
+    }
+
+    & .avatar:nth-child(n + 4) {
+      display: flex;
+      opacity: 1;
+    }
+
+    & .avatar-more {
+      display: none !important;
+    }
+  }
+}
+
+.avatar.avatar-more {
+  z-index: 1;
+  margin-right: 0;
+  background: var(--color-canvas-subtle);
+
+  &::before,
+  &::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: '';
+    border-radius: 2px;
+    outline: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
+  }
+
+  &::before {
+    width: 17px;
+    background: var(--color-avatar-stack-fade-more);
+  }
+
+  &::after {
+    width: 14px;
+    background: var(--color-avatar-stack-fade);
+  }
+}
+
+/* Right aligned variation */
+
+.AvatarStack--right {
+  & .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+
+    &:hover .avatar {
+      margin-right: 0;
+      margin-left: 3px;
+    }
+
+    & .avatar:not(:last-child) {
+      border-left: 0;
+    }
+  }
+
+  & .avatar.avatar-more {
+    background: var(--color-avatar-stack-fade);
+
+    &::before {
+      width: 5px;
+    }
+
+    &::after {
+      width: 2px;
+      background: var(--color-canvas-subtle);
+    }
+  }
+
+  & .avatar {
+    margin-right: 0;
+    margin-left: -11px;
+    border-right: 0;
+    border-left: var(--yattho-borderWidth-thin, 1px) solid var(--color-canvas-default);
+  }
+}

data/app/components/yattho/beta/avatar_stack.rb

@@ -0,0 +1,92 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `AvatarStack` to stack multiple avatars together.
+    class AvatarStack < Yattho::Component
+      status :beta
+
+      ALIGN_DEFAULT = :left
+      ALIGN_OPTIONS = [ALIGN_DEFAULT, :right].freeze
+
+      DEFAULT_TAG = :div
+      TAG_OPTIONS = [DEFAULT_TAG, :span].freeze
+
+      DEFAULT_BODY_TAG = :div
+      BODY_TAG_OPTIONS = [DEFAULT_BODY_TAG, :span].freeze
+      # Required list of stacked avatars.
+      #
+      # @param kwargs [Hash] The same arguments as <%= link_to_component(Yattho::Beta::Avatar) %>.
+      renders_many :avatars, "Yattho::Beta::Avatar"
+
+      # @example Default
+      #   <%= render(Yattho::Beta::AvatarStack.new) do |component| %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example Align right
+      #   <%= render(Yattho::Beta::AvatarStack.new(align: :right)) do |component| %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @example With tooltip
+      #   <%= render(Yattho::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |component| %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% component.with_avatar(src: Yattho::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #   <% end  %>
+      #
+      # @param tag [Symbol] <%= one_of(Yattho::Beta::AvatarStack::TAG_OPTIONS) %>
+      # @param align [Symbol] <%= one_of(Yattho::Beta::AvatarStack::ALIGN_OPTIONS) %>
+      # @param tooltipped [Boolean] Whether to add a tooltip to the stack or not.
+      # @param body_arguments [Hash] Parameters to add to the Body. If `tooltipped` is set, has the same arguments as <%= link_to_component(Yattho::Tooltip) %>.
+      #   The default tag is <%= pretty_value(Yattho::Beta::AvatarStack::DEFAULT_BODY_TAG) %> but can be changed using `tag:`
+      #   to <%= one_of(Yattho::Beta::AvatarStack::BODY_TAG_OPTIONS, lower: true) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(tag: DEFAULT_TAG, align: ALIGN_DEFAULT, tooltipped: false, body_arguments: {}, **system_arguments)
+        @align = fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)
+        @system_arguments = system_arguments
+        @tooltipped = tooltipped
+        @body_arguments = body_arguments
+
+        body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
+        @body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
+        @body_arguments[:classes] = class_names(
+          "AvatarStack-body",
+          @body_arguments[:classes]
+        )
+
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+        @system_arguments[:classes] = class_names(
+          "AvatarStack",
+          system_arguments[:classes],
+          "AvatarStack--right" => @align == :right
+        )
+      end
+
+      def body_component
+        if @tooltipped
+          Yattho::Tooltip.new(**@body_arguments) # rubocop:disable Yattho/ComponentNameMigration
+        else
+          Yattho::BaseComponent.new(**@body_arguments)
+        end
+      end
+
+      def before_render
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "AvatarStack--two" => avatars.size == 2,
+          "AvatarStack--three-plus" => avatars.size > 2
+        )
+      end
+
+      def render?
+        avatars.any?
+      end
+    end
+  end
+end

data/app/components/yattho/beta/base_button.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module Yattho
+  module Beta
+    # Use `BaseButton` to render an unstyled `<button>` tag that can be customized.
+    class BaseButton < Yattho::Component
+      status :beta
+
+      DEFAULT_TAG = :button
+      TAG_OPTIONS = [DEFAULT_TAG, :a, :summary].freeze
+
+      DEFAULT_TYPE = :button
+      TYPE_OPTIONS = [DEFAULT_TYPE, :reset, :submit].freeze
+
+      # @example Block
+      #   <%= render(Yattho::Beta::BaseButton.new(block: :true)) { "Block" } %>
+      #   <%= render(Yattho::Beta::BaseButton.new(block: :true, scheme: :primary)) { "Primary block" } %>
+      #
+      # @param tag [Symbol] <%= one_of(Yattho::Beta::BaseButton::TAG_OPTIONS) %>
+      # @param type [Symbol] <%= one_of(Yattho::Beta::BaseButton::TYPE_OPTIONS) %>
+      # @param block [Boolean] Whether button is full-width with `display: block`.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(
+        tag: DEFAULT_TAG,
+        type: DEFAULT_TYPE,
+        block: false,
+        **system_arguments
+      )
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = fetch_or_fallback(TAG_OPTIONS, tag, DEFAULT_TAG)
+
+        if @system_arguments[:tag] == :button
+          @system_arguments[:type] =
+            fetch_or_fallback(TYPE_OPTIONS, type, DEFAULT_TYPE)
+        end
+
+        @system_arguments[:classes] = class_names(
+          system_arguments[:classes],
+          "btn-block" => block
+        )
+      end
+
+      def call
+        render(Yattho::BaseComponent.new(**@system_arguments)) { content }
+      end
+    end
+  end
+end

data/app/components/yattho/beta/blankslate.css

@@ -0,0 +1,90 @@
+/* blankslate */
+
+.blankslate {
+  position: relative;
+  padding: var(--base-size-32, 32px);
+  text-align: center;
+}
+
+.blankslate p {
+    color: var(--color-fg-muted);
+  }
+
+.blankslate code {
+    padding: 2px 5px 3px;
+    font-size: var(--yattho-text-body-size-medium, 14px);
+    background: var(--color-canvas-default);
+    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
+    border-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+.blankslate img {
+    width: 56px;
+    height: 56px;
+  }
+
+.blankslate-icon {
+  margin-right: var(--yattho-control-small-gap, 4px);
+  margin-bottom: var(--yattho-stack-gap-condensed, 8px);
+  margin-left: var(--yattho-control-small-gap, 4px);
+  color: var(--color-fg-muted);
+}
+
+.blankslate-image {
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4, 4px);
+}
+
+.blankslate-action {
+  margin-top: var(--yattho-stack-gap-normal, 16px);
+}
+
+.blankslate-action:first-of-type {
+    margin-top: var(--yattho-stack-gap-spacious, 24px);
+  }
+
+.blankslate-action:last-of-type {
+    margin-bottom: var(--yattho-stack-gap-condensed, 8px);
+  }
+
+.blankslate-capped {
+  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
+}
+
+.blankslate-spacious {
+  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+
+.blankslate-large img {
+    width: 80px;
+    height: 80px;
+  }
+
+.blankslate-large h3 {
+    margin: var(--yattho-stack-gap-normal, 16px) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    font-size: 24px;
+  }
+
+.blankslate-large p {
+    font-size: var(--yattho-text-body-size-large, 16px);
+  }
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+
+.blankslate-clean-background {
+  border: 0;
+}

data/app/components/yattho/beta/blankslate.css.json

@@ -0,0 +1 @@
+{"name":"beta/blankslate","selectors":[".blankslate",".blankslate p",".blankslate code",".blankslate img",".blankslate-icon",".blankslate-image",".blankslate-heading",".blankslate-action",".blankslate-action:first-of-type",".blankslate-action:last-of-type",".blankslate-capped",".blankslate-spacious",".blankslate-narrow",".blankslate-large img",".blankslate-large h3",".blankslate-large p",".blankslate-clean-background"]}

data/app/components/yattho/beta/blankslate.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAAA,eAAe;;AAEf;EACE,kBAAkB;EAClB,kCAAkC;EAClC,kBAAkB;AAkBpB;;AAhBE;IACE,4BAA4B;EAC9B;;AAEA;IACE,oBAAoB;IACpB,oDAAoD;IACpD,uCAAuC;IACvC,2EAA2E;IAC3E,qDAAqD;EACvD;;AAEA;IACE,WAAW;IACX,YAAY;EACd;;AAGF;EACE,kDAAkD;EAClD,qDAAqD;EACrD,iDAAiD;EACjD,4BAA4B;AAC9B;;AAEA;EACE,mDAAmD;AACrD;;AAEA;EACE,sCAAsC;AACxC;;AAEA;EACE,gDAAgD;AASlD;;AAPE;IACE,kDAAkD;EACpD;;AAEA;IACE,qDAAqD;EACvD;;AAGF;EACE,gGAAgG;AAClG;;AAEA;EACE,4DAA4D;AAC9D;;AAEA;EACE,gBAAgB;EAChB,cAAc;AAChB;;AAEA;wCACwC;;AAEtC;IACE,WAAW;IACX,YAAY;EACd;;AAEA;IACE,8CAA8C;;IAE9C,iGAAiG;IACjG,eAAe;EACjB;;AAEA;IACE,mDAAmD;EACrD;;AAGF;kDACkD;;AAClD;EACE,SAAS;AACX","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32, 32px);\n  text-align: center;\n\n  & p {\n    color: var(--color-fg-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--yattho-text-body-size-medium, 14px);\n    background: var(--color-canvas-default);\n    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);\n    border-radius: var(--yattho-borderRadius-medium, 6px);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--yattho-control-small-gap, 4px);\n  margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  margin-left: var(--yattho-control-small-gap, 4px);\n  color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--yattho-stack-gap-normal, 16px);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4, 4px);\n}\n\n.blankslate-action {\n  margin-top: var(--yattho-stack-gap-normal, 16px);\n\n  &:first-of-type {\n    margin-top: var(--yattho-stack-gap-spacious, 24px);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--yattho-stack-gap-condensed, 8px);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--yattho-stack-gap-normal, 16px) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--yattho-text-body-size-large, 16px);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}"]}

data/app/components/yattho/beta/blankslate.html.erb

@@ -0,0 +1,17 @@
+<%= wrapper do %>
+  <%= render Yattho::BaseComponent.new(**@system_arguments) do %>
+    <%= visual %>
+    <%= heading %>
+    <%= description %>
+    <% if primary_action.present? %>
+      <div class="blankslate-action">
+        <%= primary_action %>
+      </div>
+    <% end %>
+    <% if secondary_action.present? %>
+      <div class="blankslate-action">
+        <%= secondary_action %>
+      </div>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/yattho/beta/blankslate.pcss

@@ -0,0 +1,90 @@
+/* blankslate */
+
+.blankslate {
+  position: relative;
+  padding: var(--base-size-32, 32px);
+  text-align: center;
+
+  & p {
+    color: var(--color-fg-muted);
+  }
+
+  & code {
+    padding: 2px 5px 3px;
+    font-size: var(--yattho-text-body-size-medium, 14px);
+    background: var(--color-canvas-default);
+    border: var(--yattho-borderWidth-thin, 1px) solid var(--color-border-muted);
+    border-radius: var(--yattho-borderRadius-medium, 6px);
+  }
+
+  & img {
+    width: 56px;
+    height: 56px;
+  }
+}
+
+.blankslate-icon {
+  margin-right: var(--yattho-control-small-gap, 4px);
+  margin-bottom: var(--yattho-stack-gap-condensed, 8px);
+  margin-left: var(--yattho-control-small-gap, 4px);
+  color: var(--color-fg-muted);
+}
+
+.blankslate-image {
+  margin-bottom: var(--yattho-stack-gap-normal, 16px);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4, 4px);
+}
+
+.blankslate-action {
+  margin-top: var(--yattho-stack-gap-normal, 16px);
+
+  &:first-of-type {
+    margin-top: var(--yattho-stack-gap-spacious, 24px);
+  }
+
+  &:last-of-type {
+    margin-bottom: var(--yattho-stack-gap-condensed, 8px);
+  }
+}
+
+.blankslate-capped {
+  border-radius: 0 0 var(--yattho-borderRadius-medium, 6px) var(--yattho-borderRadius-medium, 6px);
+}
+
+.blankslate-spacious {
+  padding: var(--base-size-80, 80px) var(--base-size-40, 40px);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+.blankslate-large {
+  & img {
+    width: 80px;
+    height: 80px;
+  }
+
+  & h3 {
+    margin: var(--yattho-stack-gap-normal, 16px) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    font-size: 24px;
+  }
+
+  & p {
+    font-size: var(--yattho-text-body-size-large, 16px);
+  }
+}
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+.blankslate-clean-background {
+  border: 0;
+}