polaris_view_components 0.13.6 → 1.0.0

data/app/components/polaris/text_style_component.rb

@@ -2,40 +2,44 @@
 
 module Polaris
   class TextStyleComponent < Polaris::Component
-    VARIATION_DEFAULT = :default
-    VARIATION_MAPPINGS = {
-      VARIATION_DEFAULT => "",
-      :positive => "Polaris-TextStyle--variationPositive",
-      :negative => "Polaris-TextStyle--variationNegative",
-      :strong => "Polaris-TextStyle--variationStrong",
-      :subdued => "Polaris-TextStyle--variationSubdued",
-      :code => "Polaris-TextStyle--variationCode"
-    }
-    VARIATION_OPTIONS = VARIATION_MAPPINGS.keys
+    VARIATION_OPTIONS = %i[positive negative strong subdued code]
 
     SIZE_DEFAULT = :default
     SIZE_MAPPINGS = {
-      SIZE_DEFAULT => "",
-      :small => "Polaris-TextStyle--sizeSmall"
+      SIZE_DEFAULT => :bodyMd,
+      :small => :bodySm
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
 
     def initialize(
-      variation: VARIATION_DEFAULT,
+      variation: nil,
       size: SIZE_DEFAULT,
       **system_arguments
     )
-      @system_arguments = system_arguments
-      @system_arguments[:tag] = "span"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        VARIATION_MAPPINGS[fetch_or_fallback(VARIATION_OPTIONS, variation, VARIATION_DEFAULT)],
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
+      @variation = variation
+      @system_arguments = system_arguments.tap do |opts|
+        opts[:as] = :span
+        opts[:color] = case variation
+        when :subdued then :subdued
+        when :positive then :success
+        when :negative then :critical
+        when :warning then :warning
+        end
+        opts[:font_weight] = case variation
+        when :strong then :semibold
+        end
+        opts[:variant] = SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
+      end
     end
 
     def call
-      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+      render(Polaris::TextComponent.new(**@system_arguments)) do
+        if @variation == :code
+          render(Polaris::InlineCodeComponent.new) { content }
+        else
+          content
+        end
+      end
     end
   end
 end

data/app/components/polaris/thumbnail_component.html.erb

@@ -1,4 +1,4 @@
-<%= render Polaris::BaseComponent.new(**@system_arguments) do %>
+<%= render Polaris::BaseComponent.new(**system_arguments) do %>
   <% if @source.present? %>
     <img src="<%= @source %>" alt="<%= @alt %>">
   <% else %>

data/app/components/polaris/thumbnail_component.rb

@@ -2,6 +2,10 @@
 
 module Polaris
   class ThumbnailComponent < Polaris::Component
+    include ActiveModel::Validations
+
+    attr_reader :size, :transparent
+
     SIZE_DEFAULT = :medium
     SIZE_MAPPINGS = {
       small: "Polaris-Thumbnail--sizeSmall",
@@ -9,29 +13,40 @@ module Polaris
       large: "Polaris-Thumbnail--sizeLarge"
     }
     SIZE_OPTIONS = SIZE_MAPPINGS.keys
+    validates :size, inclusion: {in: SIZE_OPTIONS}
+    validates :transparent, inclusion: {in: [true, false]}
 
     renders_one :icon, Polaris::IconComponent
 
     def initialize(
-      source: nil,
-      size: SIZE_DEFAULT,
       alt: nil,
+      size: SIZE_DEFAULT,
+      source: nil,
+      transparent: false,
       **system_arguments
     )
-      @source = source
       @alt = alt
+      @size = size
+      @source = source
+      @transparent = transparent
 
       @system_arguments = system_arguments
-      @system_arguments[:tag] = "span"
-      @system_arguments[:classes] = class_names(
-        @system_arguments[:classes],
-        "Polaris-Thumbnail",
-        SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)]
-      )
     end
 
     def renders?
       source.present? || icon.present?
     end
+
+    def system_arguments
+      @system_arguments.tap do |opts|
+        opts[:tag] = :span
+        opts[:classes] = class_names(
+          @system_arguments[:classes],
+          "Polaris-Thumbnail",
+          SIZE_MAPPINGS[fetch_or_fallback(SIZE_OPTIONS, @size, SIZE_DEFAULT)],
+          "Polaris-Thumbnail--transparent": @transparent
+        )
+      end
+    end
   end
 end

data/app/components/polaris/toast_component.html.erb

@@ -1,5 +1,5 @@
 <%= render(Polaris::BaseComponent.new(**system_arguments)) do %>
-  <div style="<%= polaris_inversed_colors %>">
+  <div>
     <div class="<%= toast_classes %>">
       <%= content %>
 

data/app/components/polaris/tokens/border.rb

@@ -0,0 +1,9 @@
+module Polaris
+  module Tokens
+    class Border
+      RADIUS_SCALE = %w[05 1 2 3 4 5 6 full]
+
+      WIDTH_SCALE = %w[1 2 3 4 5]
+    end
+  end
+end

data/app/components/polaris/tokens/color.rb

@@ -0,0 +1,132 @@
+module Polaris
+  module Tokens
+    class Color
+      BACKGROUND_ALIAS = %w[
+        bg
+        bg-active
+        bg-app
+        bg-app-active
+        bg-app-hover
+        bg-app-selected
+        bg-caution
+        bg-caution-strong
+        bg-caution-subdued
+        bg-caution-subdued-active
+        bg-caution-subdued-hover
+        bg-critical
+        bg-critical-strong
+        bg-critical-strong-active
+        bg-critical-strong-hover
+        bg-critical-subdued
+        bg-critical-subdued-active
+        bg-critical-subdued-hover
+        bg-disabled
+        bg-hover
+        bg-info
+        bg-info-strong
+        bg-info-subdued
+        bg-info-subdued-active
+        bg-info-subdued-hover
+        bg-input
+        bg-inset
+        bg-inset-strong
+        bg-interactive
+        bg-interactive-active
+        bg-interactive-disabled
+        bg-interactive-hover
+        bg-interactive-selected
+        bg-interactive-subdued
+        bg-interactive-subdued-active
+        bg-interactive-subdued-hover
+        bg-inverse
+        bg-inverse-active
+        bg-inverse-hover
+        bg-magic
+        bg-magic-hover
+        bg-magic-active
+        bg-magic-strong
+        bg-magic-subdued
+        bg-magic-subdued-hover
+        bg-magic-subdued-active
+        bg-primary
+        bg-primary-active
+        bg-primary-hover
+        bg-primary-subdued
+        bg-primary-subdued-active
+        bg-primary-subdued-hover
+        bg-primary-subdued-selected
+        bg-strong
+        bg-strong-active
+        bg-strong-hover
+        bg-subdued
+        bg-subdued-active
+        bg-subdued-hover
+        bg-success
+        bg-success-strong
+        bg-success-subdued
+        bg-success-subdued-active
+        bg-success-subdued-hover
+        bg-warning
+      ]
+
+      BORDER_ALIAS = %w[
+        border
+        border-caution
+        border-caution-subdued
+        border-critical
+        border-critical-active
+        border-critical-hover
+        border-critical-subdued
+        border-disabled
+        border-hover
+        border-info
+        border-info-subdued
+        border-input
+        border-input-hover
+        border-interactive
+        border-interactive-active
+        border-interactive-disabled
+        border-interactive-focus
+        border-interactive-hover
+        border-interactive-subdued
+        border-inverse
+        border-magic
+        border-magic-strong
+        border-primary
+        border-strong
+        border-strong-hover
+        border-subdued
+        border-success
+        border-success-subdued
+      ]
+
+      TEXT_ALIAS = %w[
+        text
+        text-caution
+        text-caution-strong
+        text-critical
+        text-critical-active
+        text-critical-strong
+        text-disabled
+        text-info
+        text-info-strong
+        text-interactive
+        text-interactive-active
+        text-interactive-disabled
+        text-interactive-hover
+        text-interactive-inverse
+        text-inverse
+        text-inverse-subdued
+        text-magic
+        text-magic-strong
+        text-on-color
+        text-primary
+        text-primary-hover
+        text-subdued
+        text-success
+        text-success-strong
+        text-warning-strong
+      ]
+    end
+  end
+end

data/app/components/polaris/tokens/shadow.rb

@@ -0,0 +1,18 @@
+module Polaris
+  module Tokens
+    class Shadow
+      ALIAS = %w[
+        inset-lg
+        inset-md
+        inset-sm
+        none
+        xs
+        sm
+        md
+        lg
+        xl
+        2xl
+      ]
+    end
+  end
+end

data/app/components/polaris/tokens/spacing.rb

@@ -0,0 +1,27 @@
+module Polaris
+  module Tokens
+    class Spacing
+      SCALE = %w[
+        0
+        025
+        05
+        1
+        2
+        3
+        4
+        5
+        6
+        8
+        10
+        12
+        16
+        20
+        24
+        28
+        32
+      ]
+
+      SCREEN_SIZES = %i[xs sm md lg xl]
+    end
+  end
+end

data/app/components/polaris/tokens.rb

@@ -0,0 +1,4 @@
+module Polaris
+  module Tokens
+  end
+end

data/app/components/polaris/top_bar/user_menu_component.html.erb

@@ -1,17 +1,32 @@
 <%= polaris_popover(alignment: :left) do |popover| %>
-  <% popover.activator do %>
+  <% popover.with_activator do %>
     <button
       type="button"
       class="Polaris-TopBar-Menu__Activator"
       data-action="polaris-popover#toggle click@window->polaris-popover#hide"
     >
+      <span class="Polaris-TopBar-UserMenu__Details">
+        <%= polaris_text(
+          as: :p,
+          font_weight: :medium,
+          truncate: true,
+          alignment: :start
+        ) do %>
+          <%= @name %>
+        <% end %>
+        <%= polaris_text(
+          as: :p,
+          variant: :bodySm,
+          truncate: true,
+          alignment: :start,
+          color: :subdued
+        ) do %>
+          <%= @detail %>
+        <% end %>
+      </span>
       <div class="Polaris-MessageIndicator__MessageIndicatorWrapper">
         <%= avatar %>
       </div>
-      <span class="Polaris-TopBar-UserMenu__Details">
-        <p class="Polaris-TopBar-UserMenu__Name"><%= @name %></p>
-        <p class="Polaris-TopBar-UserMenu__Detail"><%= @detail %></p>
-      </span>
     </button>
   <% end %>
 

data/app/components/polaris/vertical_stack_component.rb

@@ -0,0 +1,70 @@
+module Polaris
+  class VerticalStackComponent < Polaris::Component
+    AS_DEFAULT = :div
+    AS_OPTIONS = %i[div ul ol fieldset]
+
+    ALIGN_DEFAULT = :default
+    ALIGN_MAPPINGS = {
+      default: "",
+      start: "start",
+      center: "center",
+      end: "end",
+      space_around: "space-around",
+      space_between: "space-between",
+      space_evenly: "space-evenly"
+    }
+    ALIGN_OPTIONS = ALIGN_MAPPINGS.keys
+
+    INLINE_ALIGN_OPTIONS = %i[start center end baseline stretch]
+
+    def initialize(
+      as: AS_DEFAULT,
+      align: ALIGN_DEFAULT,
+      inline_align: nil,
+      gap: nil,
+      reverse_order: false,
+      **system_arguments
+    )
+      @system_arguments = system_arguments.tap do |args|
+        args[:tag] = fetch_or_fallback(AS_OPTIONS, as, AS_DEFAULT)
+        args[:classes] = class_names(
+          args[:classes],
+          "Polaris-VerticalStack",
+          "Polaris-VerticalStack--listReset": as.in?(%i[ul ol]),
+          "Polaris-VerticalStack--fieldsetReset": as == :fieldset
+        )
+        args[:style] = styles_list(
+          args[:style],
+          "--pc-vertical-stack-align": ALIGN_MAPPINGS[fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)],
+          "--pc-vertical-stack-inline-align": fetch_or_fallback(INLINE_ALIGN_OPTIONS, inline_align, allow_nil: true),
+          "--pc-vertical-stack-order": reverse_order ? "column-reverse" : "column",
+          **gap_value(gap)
+        )
+      end
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+
+    private
+
+    def gap_value(gap)
+      return {} unless gap
+
+      value = fetch_or_fallback_nested(
+        Tokens::Spacing::SCREEN_SIZES,
+        Tokens::Spacing::SCALE,
+        gap
+      )
+
+      if value.is_a?(Hash)
+        value.each_with_object({}) do |(key, value), hash|
+          hash["--pc-vertical-stack-gap-#{key}"] = "var(--p-space-#{value})"
+        end
+      else
+        {"--pc-vertical-stack-gap-xs": "var(--p-space-#{value})"}
+      end
+    end
+  end
+end

data/app/components/polaris/visually_hidden_component.rb

@@ -3,7 +3,7 @@
 module Polaris
   class VisuallyHiddenComponent < Polaris::Component
     def call
-      content_tag(:span, content, class: "Polaris-VisuallyHidden")
+      render(Polaris::TextComponent.new(as: :span, visually_hidden: true)) { content }
     end
   end
 end

data/app/helpers/polaris/fetch_or_fallback_helper.rb

@@ -25,7 +25,9 @@ module Polaris
 
     InvalidValueError = Class.new(StandardError)
 
-    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil, allow_nil: false)
+      return if allow_nil && given_value.nil?
+
       if allowed_values.include?(given_value)
         given_value
       else
@@ -49,5 +51,15 @@ module Polaris
         fallback
       end
     end
+
+    def fetch_or_fallback_nested(allowed_keys, allowed_values, given_value)
+      if given_value.is_a?(Hash)
+        given_value.each_with_object({}) do |(key, value), hash|
+          hash[fetch_or_fallback(allowed_keys, key)] = fetch_or_fallback(allowed_values, value)
+        end
+      else
+        fetch_or_fallback(allowed_values, given_value)
+      end
+    end
   end
 end

data/app/helpers/polaris/form_builder.rb

@@ -20,7 +20,7 @@ module Polaris
         [
           render(Polaris::ListComponent.new) do |list|
             object.errors.full_messages.each do |error|
-              list.item { error.html_safe }
+              list.with_item { error.html_safe }
             end
           end,
           (template.capture { yield(banner) } if block_given?)

data/app/helpers/polaris/styles_list_helper.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Polaris
+  module StylesListHelper
+    def styles_list(*args)
+      list = []
+
+      args.each do |style|
+        case style
+        when Hash
+          style.each do |key, val|
+            list << [key, val] if val
+          end
+        when Array
+          list << styles_list(*style).presence
+        end
+      end
+
+      list.compact.uniq.map { |k, v| "#{k}: #{v}" }.join(";")
+    end
+  end
+end

data/app/helpers/polaris/view_helper.rb

@@ -10,6 +10,8 @@ module Polaris
       avatar:                   "Polaris::AvatarComponent",
       badge:                    "Polaris::BadgeComponent",
       banner:                   "Polaris::BannerComponent",
+      bleed:                    "Polaris::BleedComponent",
+      box:                      "Polaris::BoxComponent",
       button:                   "Polaris::ButtonComponent",
       button_group:             "Polaris::ButtonGroupComponent",
       callout_card:             "Polaris::CalloutCardComponent",
@@ -23,6 +25,7 @@ module Polaris
       data_table:               "Polaris::DataTableComponent",
       description_list:         "Polaris::DescriptionListComponent",
       display_text:             "Polaris::DisplayTextComponent",
+      divider:                  "Polaris::DividerComponent",
       dropzone:                 "Polaris::DropzoneComponent",
       empty_search_results:     "Polaris::EmptySearchResultsComponent",
       empty_state:              "Polaris::EmptyStateComponent",
@@ -32,19 +35,25 @@ module Polaris
       frame:                    "Polaris::FrameComponent",
       filters:                  "Polaris::FiltersComponent",
       heading:                  "Polaris::HeadingComponent",
+      horizontal_grid:          "Polaris::HorizontalGridComponent",
+      horizontal_stack:         "Polaris::HorizontalStackComponent",
       icon:                     "Polaris::IconComponent",
       index_table:              "Polaris::IndexTableComponent",
+      inline_code:              "Polaris::InlineCodeComponent",
+      inline:                   "Polaris::InlineComponent",
       inline_error:             "Polaris::InlineErrorComponent",
       keyboard_key:             "Polaris::KeyboardKeyComponent",
       layout:                   "Polaris::LayoutComponent",
       link:                     "Polaris::LinkComponent",
       list:                     "Polaris::ListComponent",
       modal:                    "Polaris::ModalComponent",
+      modal_section:            "Polaris::Modal::SectionComponent",
       navigation:               "Polaris::NavigationComponent",
       option_list:              "Polaris::OptionListComponent",
       page:                     "Polaris::PageComponent",
       page_actions:             "Polaris::PageActionsComponent",
       pagination:               "Polaris::PaginationComponent",
+      placeholder:              "Polaris::PlaceholderComponent",
       progress_bar:             "Polaris::ProgressBarComponent",
       popover:                  "Polaris::PopoverComponent",
       radio_button:             "Polaris::RadioButtonComponent",
@@ -65,11 +74,13 @@ module Polaris
       spacer:                   "Polaris::SpacerComponent",
       tabs:                     "Polaris::TabsComponent",
       tag:                      "Polaris::TagComponent",
+      text:                     "Polaris::TextComponent",
       text_container:           "Polaris::TextContainerComponent",
       text_field:               "Polaris::TextFieldComponent",
       text_style:               "Polaris::TextStyleComponent",
       thumbnail:                "Polaris::ThumbnailComponent",
       toast:                    "Polaris::ToastComponent",
+      vertical_stack:           "Polaris::VerticalStackComponent",
       visually_hidden:          "Polaris::VisuallyHiddenComponent"
     }.freeze
     # standard:enable Layout/HashAlignment
@@ -97,12 +108,12 @@ module Polaris
       doc.to_html.html_safe
     end
 
-    def polaris_body_styles
-      %(background-color: rgb(246, 246, 247); color: rgb(32, 34, 35); --p-background:rgba(246, 246, 247, 1); --p-background-hovered:rgba(241, 242, 243, 1); --p-background-pressed:rgba(237, 238, 239, 1); --p-background-selected:rgba(237, 238, 239, 1); --p-surface:rgba(255, 255, 255, 1); --p-surface-neutral:rgba(228, 229, 231, 1); --p-surface-neutral-hovered:rgba(219, 221, 223, 1); --p-surface-neutral-pressed:rgba(201, 204, 208, 1); --p-surface-neutral-disabled:rgba(241, 242, 243, 1); --p-surface-neutral-subdued:rgba(246, 246, 247, 1); --p-surface-subdued:rgba(250, 251, 251, 1); --p-surface-disabled:rgba(250, 251, 251, 1); --p-surface-hovered:rgba(246, 246, 247, 1); --p-surface-pressed:rgba(241, 242, 243, 1); --p-surface-depressed:rgba(237, 238, 239, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(255, 255, 255, 0.5); --p-shadow-from-dim-light:rgba(0, 0, 0, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(0, 0, 0, 0.15); --p-hint-from-direct-light:rgba(0, 0, 0, 0.15); --p-on-surface-background:rgba(241, 242, 243, 1); --p-border:rgba(140, 145, 150, 1); --p-border-neutral-subdued:rgba(186, 191, 195, 1); --p-border-hovered:rgba(153, 158, 164, 1); --p-border-disabled:rgba(210, 213, 216, 1); --p-border-subdued:rgba(201, 204, 207, 1); --p-border-depressed:rgba(87, 89, 89, 1); --p-border-shadow:rgba(174, 180, 185, 1); --p-border-shadow-subdued:rgba(186, 191, 196, 1); --p-divider:rgba(225, 227, 229, 1); --p-icon:rgba(92, 95, 98, 1); --p-icon-hovered:rgba(26, 28, 29, 1); --p-icon-pressed:rgba(68, 71, 74, 1); --p-icon-disabled:rgba(186, 190, 195, 1); --p-icon-subdued:rgba(140, 145, 150, 1); --p-text:rgba(32, 34, 35, 1); --p-text-disabled:rgba(140, 145, 150, 1); --p-text-subdued:rgba(109, 113, 117, 1); --p-interactive:rgba(44, 110, 203, 1); --p-interactive-disabled:rgba(189, 193, 204, 1); --p-interactive-hovered:rgba(31, 81, 153, 1); --p-interactive-pressed:rgba(16, 50, 98, 1); --p-focused:rgba(69, 143, 255, 1); --p-surface-selected:rgba(242, 247, 254, 1); --p-surface-selected-hovered:rgba(237, 244, 254, 1); --p-surface-selected-pressed:rgba(229, 239, 253, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(255, 255, 255, 1); --p-action-secondary-disabled:rgba(255, 255, 255, 1); --p-action-secondary-hovered:rgba(246, 246, 247, 1); --p-action-secondary-pressed:rgba(241, 242, 243, 1); --p-action-secondary-depressed:rgba(109, 113, 117, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(241, 241, 241, 1); --p-action-primary-hovered:rgba(0, 110, 82, 1); --p-action-primary-pressed:rgba(0, 94, 70, 1); --p-action-primary-depressed:rgba(0, 61, 44, 1); --p-icon-on-primary:rgba(255, 255, 255, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 123, 92, 1); --p-text-primary-hovered:rgba(0, 108, 80, 1); --p-text-primary-pressed:rgba(0, 92, 68, 1); --p-surface-primary-selected:rgba(241, 248, 245, 1); --p-surface-primary-selected-hovered:rgba(179, 208, 195, 1); --p-surface-primary-selected-pressed:rgba(162, 188, 176, 1); --p-border-critical:rgba(253, 87, 73, 1); --p-border-critical-subdued:rgba(224, 179, 178, 1); --p-border-critical-disabled:rgba(255, 167, 163, 1); --p-icon-critical:rgba(215, 44, 13, 1); --p-surface-critical:rgba(254, 211, 209, 1); --p-surface-critical-subdued:rgba(255, 244, 244, 1); --p-surface-critical-subdued-hovered:rgba(255, 240, 240, 1); --p-surface-critical-subdued-pressed:rgba(255, 233, 232, 1); --p-surface-critical-subdued-depressed:rgba(254, 188, 185, 1); --p-text-critical:rgba(215, 44, 13, 1); --p-action-critical:rgba(216, 44, 13, 1); --p-action-critical-disabled:rgba(241, 241, 241, 1); --p-action-critical-hovered:rgba(188, 34, 0, 1); --p-action-critical-pressed:rgba(162, 27, 0, 1); --p-action-critical-depressed:rgba(108, 15, 0, 1); --p-icon-on-critical:rgba(255, 255, 255, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(216, 44, 13, 1); --p-interactive-critical-disabled:rgba(253, 147, 141, 1); --p-interactive-critical-hovered:rgba(205, 41, 12, 1); --p-interactive-critical-pressed:rgba(103, 15, 3, 1); --p-border-warning:rgba(185, 137, 0, 1); --p-border-warning-subdued:rgba(225, 184, 120, 1); --p-icon-warning:rgba(185, 137, 0, 1); --p-surface-warning:rgba(255, 215, 157, 1); --p-surface-warning-subdued:rgba(255, 245, 234, 1); --p-surface-warning-subdued-hovered:rgba(255, 242, 226, 1); --p-surface-warning-subdued-pressed:rgba(255, 235, 211, 1); --p-text-warning:rgba(145, 106, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(152, 198, 205, 1); --p-icon-highlight:rgba(0, 160, 172, 1); --p-surface-highlight:rgba(164, 232, 242, 1); --p-surface-highlight-subdued:rgba(235, 249, 252, 1); --p-surface-highlight-subdued-hovered:rgba(228, 247, 250, 1); --p-surface-highlight-subdued-pressed:rgba(213, 243, 248, 1); --p-text-highlight:rgba(52, 124, 132, 1); --p-border-success:rgba(0, 164, 124, 1); --p-border-success-subdued:rgba(149, 201, 180, 1); --p-icon-success:rgba(0, 127, 95, 1); --p-surface-success:rgba(174, 233, 209, 1); --p-surface-success-subdued:rgba(241, 248, 245, 1); --p-surface-success-subdued-hovered:rgba(236, 246, 241, 1); --p-surface-success-subdued-pressed:rgba(226, 241, 234, 1); --p-text-success:rgba(0, 128, 96, 1); --p-decorative-one-icon:rgba(126, 87, 0, 1); --p-decorative-one-surface:rgba(255, 201, 107, 1); --p-decorative-one-text:rgba(61, 40, 0, 1); --p-decorative-two-icon:rgba(175, 41, 78, 1); --p-decorative-two-surface:rgba(255, 196, 176, 1); --p-decorative-two-text:rgba(73, 11, 28, 1); --p-decorative-three-icon:rgba(0, 109, 65, 1); --p-decorative-three-surface:rgba(146, 230, 181, 1); --p-decorative-three-text:rgba(0, 47, 25, 1); --p-decorative-four-icon:rgba(0, 106, 104, 1); --p-decorative-four-surface:rgba(145, 224, 214, 1); --p-decorative-four-text:rgba(0, 45, 45, 1); --p-decorative-five-icon:rgba(174, 43, 76, 1); --p-decorative-five-surface:rgba(253, 201, 208, 1); --p-decorative-five-text:rgba(79, 14, 31, 1); --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:''; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px;)
+    def polaris_html_styles
+      %(--pc-frame-global-ribbon-height:0px; --pc-frame-offset:0px;)
     end
 
-    def polaris_inversed_colors
-      %(--p-background:rgba(11, 12, 13, 1); --p-background-hovered:rgba(11, 12, 13, 1); --p-background-pressed:rgba(11, 12, 13, 1); --p-background-selected:rgba(11, 12, 13, 1); --p-surface:rgba(32, 33, 35, 1); --p-surface-neutral:rgba(49, 51, 53, 1); --p-surface-neutral-hovered:rgba(49, 51, 53, 1); --p-surface-neutral-pressed:rgba(49, 51, 53, 1); --p-surface-neutral-disabled:rgba(49, 51, 53, 1); --p-surface-neutral-subdued:rgba(68, 71, 74, 1); --p-surface-subdued:rgba(26, 28, 29, 1); --p-surface-disabled:rgba(26, 28, 29, 1); --p-surface-hovered:rgba(47, 49, 51, 1); --p-surface-pressed:rgba(62, 64, 67, 1); --p-surface-depressed:rgba(80, 83, 86, 1); --p-surface-search-field:rgba(47, 49, 51, 1); --p-backdrop:rgba(0, 0, 0, 0.5); --p-overlay:rgba(33, 33, 33, 0.5); --p-shadow-from-dim-light:rgba(255, 255, 255, 0.2); --p-shadow-from-ambient-light:rgba(23, 24, 24, 0.05); --p-shadow-from-direct-light:rgba(255, 255, 255, 0.15); --p-hint-from-direct-light:rgba(185, 185, 185, 0.2); --p-border:rgba(80, 83, 86, 1); --p-border-neutral-subdued:rgba(130, 135, 139, 1); --p-border-hovered:rgba(80, 83, 86, 1); --p-border-disabled:rgba(103, 107, 111, 1); --p-border-subdued:rgba(130, 135, 139, 1); --p-border-depressed:rgba(142, 145, 145, 1); --p-border-shadow:rgba(91, 95, 98, 1); --p-border-shadow-subdued:rgba(130, 135, 139, 1); --p-divider:rgba(69, 71, 73, 1); --p-icon:rgba(166, 172, 178, 1); --p-icon-hovered:rgba(225, 227, 229, 1); --p-icon-pressed:rgba(166, 172, 178, 1); --p-icon-disabled:rgba(84, 87, 90, 1); --p-icon-subdued:rgba(120, 125, 129, 1); --p-text:rgba(227, 229, 231, 1); --p-text-disabled:rgba(111, 115, 119, 1); --p-text-subdued:rgba(153, 159, 164, 1); --p-interactive:rgba(54, 163, 255, 1); --p-interactive-disabled:rgba(38, 98, 182, 1); --p-interactive-hovered:rgba(103, 175, 255, 1); --p-interactive-pressed:rgba(136, 188, 255, 1); --p-icon-interactive:rgba(54, 163, 255, 1); --p-focused:rgba(38, 98, 182, 1); --p-surface-selected:rgba(2, 14, 35, 1); --p-surface-selected-hovered:rgba(7, 29, 61, 1); --p-surface-selected-pressed:rgba(13, 43, 86, 1); --p-icon-on-interactive:rgba(255, 255, 255, 1); --p-text-on-interactive:rgba(255, 255, 255, 1); --p-action-secondary:rgba(77, 80, 83, 1); --p-action-secondary-disabled:rgba(32, 34, 35, 1); --p-action-secondary-hovered:rgba(84, 87, 91, 1); --p-action-secondary-pressed:rgba(96, 100, 103, 1); --p-action-secondary-depressed:rgba(123, 127, 132, 1); --p-action-primary:rgba(0, 128, 96, 1); --p-action-primary-disabled:rgba(0, 86, 64, 1); --p-action-primary-hovered:rgba(0, 150, 113, 1); --p-action-primary-pressed:rgba(0, 164, 124, 1); --p-action-primary-depressed:rgba(0, 179, 136, 1); --p-icon-on-primary:rgba(230, 255, 244, 1); --p-text-on-primary:rgba(255, 255, 255, 1); --p-text-primary:rgba(0, 141, 106, 1); --p-text-primary-hovered:rgba(0, 158, 120, 1); --p-text-primary-pressed:rgba(0, 176, 133, 1); --p-surface-primary-selected:rgba(12, 18, 16, 1); --p-surface-primary-selected-hovered:rgba(40, 48, 44, 1); --p-surface-primary-selected-pressed:rgba(54, 64, 59, 1); --p-border-critical:rgba(227, 47, 14, 1); --p-border-critical-subdued:rgba(227, 47, 14, 1); --p-border-critical-disabled:rgba(131, 23, 4, 1); --p-icon-critical:rgba(218, 45, 13, 1); --p-surface-critical:rgba(69, 7, 1, 1); --p-surface-critical-subdued:rgba(69, 7, 1, 1); --p-surface-critical-subdued-hovered:rgba(68, 23, 20, 1); --p-surface-critical-subdued-pressed:rgba(107, 16, 3, 1); --p-surface-critical-subdued-depressed:rgba(135, 24, 5, 1); --p-text-critical:rgba(233, 128, 122, 1); --p-action-critical:rgba(205, 41, 12, 1); --p-action-critical-disabled:rgba(187, 37, 10, 1); --p-action-critical-hovered:rgba(227, 47, 14, 1); --p-action-critical-pressed:rgba(250, 53, 17, 1); --p-action-critical-depressed:rgba(253, 87, 73, 1); --p-icon-on-critical:rgba(255, 248, 247, 1); --p-text-on-critical:rgba(255, 255, 255, 1); --p-interactive-critical:rgba(253, 114, 106, 1); --p-interactive-critical-disabled:rgba(254, 172, 168, 1); --p-interactive-critical-hovered:rgba(253, 138, 132, 1); --p-interactive-critical-pressed:rgba(253, 159, 155, 1); --p-border-warning:rgba(153, 112, 0, 1); --p-border-warning-subdued:rgba(153, 112, 0, 1); --p-icon-warning:rgba(104, 75, 0, 1); --p-surface-warning:rgba(153, 112, 0, 1); --p-surface-warning-subdued:rgba(77, 59, 29, 1); --p-surface-warning-subdued-hovered:rgba(82, 63, 32, 1); --p-surface-warning-subdued-pressed:rgba(87, 67, 34, 1); --p-text-warning:rgba(202, 149, 0, 1); --p-border-highlight:rgba(68, 157, 167, 1); --p-border-highlight-subdued:rgba(68, 157, 167, 1); --p-icon-highlight:rgba(44, 108, 115, 1); --p-surface-highlight:rgba(0, 105, 113, 1); --p-surface-highlight-subdued:rgba(18, 53, 57, 1); --p-surface-highlight-subdued-hovered:rgba(20, 58, 62, 1); --p-surface-highlight-subdued-pressed:rgba(24, 65, 70, 1); --p-text-highlight:rgba(162, 239, 250, 1); --p-border-success:rgba(0, 135, 102, 1); --p-border-success-subdued:rgba(0, 135, 102, 1); --p-icon-success:rgba(0, 94, 70, 1); --p-surface-success:rgba(0, 94, 70, 1); --p-surface-success-subdued:rgba(28, 53, 44, 1); --p-surface-success-subdued-hovered:rgba(31, 58, 48, 1); --p-surface-success-subdued-pressed:rgba(35, 65, 54, 1); --p-text-success:rgba(88, 173, 142, 1); --p-decorative-one-icon:rgba(255, 186, 67, 1); --p-decorative-one-surface:rgba(142, 102, 9, 1); --p-decorative-one-text:rgba(255, 255, 255, 1); --p-decorative-two-icon:rgba(245, 182, 192, 1); --p-decorative-two-surface:rgba(206, 88, 20, 1); --p-decorative-two-text:rgba(255, 255, 255, 1); --p-decorative-three-icon:rgba(0, 227, 141, 1); --p-decorative-three-surface:rgba(0, 124, 90, 1); --p-decorative-three-text:rgba(255, 255, 255, 1); --p-decorative-four-icon:rgba(0, 221, 218, 1); --p-decorative-four-surface:rgba(22, 124, 121, 1); --p-decorative-four-text:rgba(255, 255, 255, 1); --p-decorative-five-icon:rgba(244, 183, 191, 1); --p-decorative-five-surface:rgba(194, 51, 86, 1); --p-decorative-five-text:rgba(255, 255, 255, 1); --p-border-radius-slim:0.2rem; --p-border-radius-base:0.4rem; --p-border-radius-wide:0.8rem; --p-border-radius-full:50%; --p-card-shadow:0px 0px 5px var(--p-shadow-from-ambient-light), 0px 1px 2px var(--p-shadow-from-direct-light); --p-popover-shadow:-1px 0px 20px var(--p-shadow-from-ambient-light), 0px 1px 5px var(--p-shadow-from-direct-light); --p-modal-shadow:0px 26px 80px var(--p-shadow-from-dim-light), 0px 0px 1px var(--p-shadow-from-dim-light); --p-top-bar-shadow:0 2px 2px -1px var(--p-shadow-from-direct-light); --p-button-drop-shadow:0 1px 0 rgba(0, 0, 0, 0.05); --p-button-inner-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.2); --p-button-pressed-inner-shadow:inset 0 1px 0 rgba(0, 0, 0, 0.15); --p-override-none:none; --p-override-transparent:transparent; --p-override-one:1; --p-override-visible:visible; --p-override-zero:0; --p-override-loading-z-index:514; --p-button-font-weight:500; --p-non-null-content:""; --p-choice-size:2rem; --p-icon-size:1rem; --p-choice-margin:0.1rem; --p-control-border-width:0.2rem; --p-banner-border-default:inset 0 0.1rem 0 0 var(--p-border-neutral-subdued), inset 0 0 0 0.1rem var(--p-border-neutral-subdued); --p-banner-border-success:inset 0 0.1rem 0 0 var(--p-border-success-subdued), inset 0 0 0 0.1rem var(--p-border-success-subdued); --p-banner-border-highlight:inset 0 0.1rem 0 0 var(--p-border-highlight-subdued), inset 0 0 0 0.1rem var(--p-border-highlight-subdued); --p-banner-border-warning:inset 0 0.1rem 0 0 var(--p-border-warning-subdued), inset 0 0 0 0.1rem var(--p-border-warning-subdued); --p-banner-border-critical:inset 0 0.1rem 0 0 var(--p-border-critical-subdued), inset 0 0 0 0.1rem var(--p-border-critical-subdued); --p-badge-mix-blend-mode:luminosity; --p-thin-border-subdued:0.1rem solid var(--p-border-subdued); --p-text-field-spinner-offset:0.2rem; --p-text-field-focus-ring-offset:-0.4rem; --p-text-field-focus-ring-border-radius:0.7rem; --p-button-group-item-spacing:-0.1rem; --p-duration-1-0-0:100ms; --p-duration-1-5-0:150ms; --p-ease-in:cubic-bezier(0.5, 0.1, 1, 1); --p-ease:cubic-bezier(0.4, 0.22, 0.28, 1); --p-range-slider-thumb-size-base:1.6rem; --p-range-slider-thumb-size-active:2.4rem; --p-range-slider-thumb-scale:1.5; --p-badge-font-weight:400; --p-frame-offset:0px; color: rgb(227, 229, 231);)
+    def polaris_body_styles
+      %(background-color: var(--p-color-bg-app);color: var(--p-color-text);)
     end
   end
 end

data/lib/install/install.rb

@@ -8,16 +8,21 @@ if APPLICATION_LAYOUT_PATH.exist?
   insert_into_file APPLICATION_LAYOUT_PATH.to_s, "\n    <%= stylesheet_link_tag \"polaris_view_components\" %>", before: /\s*<\/head>/
 
   if File.read(APPLICATION_LAYOUT_PATH).include?("<body>")
+    say "Add Polaris inline styles for <html> in application layout"
+    gsub_file APPLICATION_LAYOUT_PATH.to_s, "<html", "<html style=\"<%= polaris_html_styles %>\""
+
     say "Add Polaris inline styles for <body> in application layout"
     gsub_file APPLICATION_LAYOUT_PATH.to_s, "<body>", "<body style=\"<%= polaris_body_styles %>\">"
   else
     say "<body> tag is not found in application layout.", :red
+    say "        Replace <html> with <html style=\"<%= polaris_html_styles %>\"> in your custom layour."
     say "        Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
   end
 else
   say "Default application.html.erb is missing!", :red
   say "        1. Add <%= stylesheet_link_tag \"polaris_view_components\" %> within the <head> tag in your custom layout."
-  say "        2. Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
+  say "        2. Replace <html> with <html style=\"<%= polaris_html_styles %>\"> in your custom layour."
+  say "        3. Replace <body> with <body style=\"<%= polaris_body_styles %>\"> in your custom layour."
 end
 
 if IMPORTMAP_BINSTUB.exist?