polaris_view_components 0.1.0

data/app/components/polaris/text_field_component.rb

@@ -0,0 +1,181 @@
+# frozen_string_literal: true
+
+module Polaris
+  class TextFieldComponent < Polaris::NewComponent
+    TYPE_DEFAULT = :text
+    TYPE_OPTIONS = %i[
+      text number email password search tel url date
+      datetime_local month time week currency
+    ]
+
+    ALIGN_DEFAULT = :default
+    ALIGN_MAPPINGS = {
+      ALIGN_DEFAULT => "",
+      :left => "Polaris-TextField__Input--alignLeft",
+      :center => "Polaris-TextField__Input--alignCenter",
+      :right => "Polaris-TextField__Input--alignRight",
+    }
+    ALIGN_OPTIONS = ALIGN_MAPPINGS.keys
+
+    attr_reader :value
+
+    renders_one :connected_left
+    renders_one :connected_right
+
+    def initialize(
+      form: nil,
+      attribute: nil,
+      name: nil,
+      value: nil,
+      type: TYPE_DEFAULT,
+      placeholder: nil,
+      maxlength: nil,
+      minlength: nil,
+      step: 1,
+      min: 0,
+      max: 1_000_000,
+      rows: 2,
+      prefix: nil,
+      suffix: nil,
+      multiline: false,
+      show_character_count: false,
+      clear_button: false,
+      monospaced: false,
+      align: ALIGN_DEFAULT,
+      label: nil,
+      label_hidden: false,
+      label_action: nil,
+      disabled: false,
+      required: false,
+      help_text: nil,
+      error: false,
+      wrapper_arguments: {},
+      input_options: {},
+      **system_arguments
+    )
+      @form = form
+      @attribute = attribute
+      @name = name
+      @value = value
+      @type = fetch_or_fallback(TYPE_OPTIONS, type, TYPE_DEFAULT)
+      @placeholder = placeholder
+      @maxlength = maxlength
+      @minlength = minlength
+      @step = step
+      @min = min
+      @max = max
+      @rows = rows
+      @prefix = prefix
+      @suffix = suffix
+      @multiline = multiline
+      @show_character_count = show_character_count
+      @clear_button = clear_button
+      @monospaced = monospaced
+      @align_class = ALIGN_MAPPINGS[fetch_or_fallback(ALIGN_OPTIONS, align, ALIGN_DEFAULT)]
+      @label = label
+      @label_hidden = label_hidden
+      @label_action = label_action
+      @disabled = disabled
+      @required = required
+      @help_text = help_text
+      @error = error
+      @wrapper_arguments = wrapper_arguments
+      @input_options = input_options
+      @system_arguments = system_arguments
+    end
+
+    def wrapper_arguments
+      {
+        form: @form,
+        attribute: @attribute,
+        name: @name,
+        label: @label,
+        label_hidden: @label_hidden,
+        label_action: @label_action,
+        required: @required,
+        help_text: @help_text,
+        error: @error,
+      }.deep_merge(@wrapper_arguments)
+    end
+
+    def system_arguments
+      {
+        tag: "div",
+        data: {
+          polaris_text_field_has_value_class: "Polaris-TextField--hasValue",
+          polaris_text_field_clear_button_hidden_class: "Polaris-TextField__ClearButton--hidden",
+        },
+      }.deep_merge(@system_arguments).tap do |opts|
+        opts[:classes] = class_names(
+          opts[:classes],
+          "Polaris-TextField",
+          "Polaris-TextField--disabled": @disabled,
+          "Polaris-TextField--error": @error,
+          "Polaris-TextField--hasValue": @value.present?,
+          "Polaris-TextField--multiline": @multiline,
+        )
+        prepend_option(opts[:data], :controller, "polaris-text-field")
+        if @show_character_count
+          opts[:data][:polaris_text_field_label_template_value] = character_count.label_template
+          opts[:data][:polaris_text_field_text_template_value] = character_count.text_template
+        end
+      end
+    end
+
+    def input_options
+      default_options = {
+        value: @value,
+        disabled: @disabled,
+        required: @required,
+        placeholder: @placeholder,
+        maxlength: @maxlength,
+        minlength: @minlength,
+        data: { polaris_text_field_target: "input" },
+      }
+      if @type == :number
+        default_options.merge!({
+          step: @step,
+          min: @min,
+          max: @max,
+        })
+      end
+      if @multiline
+        default_options[:rows] = @rows
+      end
+
+      default_options.deep_merge(@input_options).tap do |opts|
+        opts[:class] = class_names(
+          opts[:class],
+          "Polaris-TextField__Input",
+          @align_class,
+          "Polaris-TextField--monospaced": @monospaced,
+          "Polaris-TextField__Input--suffixed": @suffix.present?,
+        )
+        prepend_option(opts[:data], :action, "polaris-text-field#syncValue")
+      end
+    end
+
+    def input
+      case @type
+      when :text
+        @multiline ? "text_area" : "text_field"
+      when :tel then "telephone_field"
+      when :currency then "text_field"
+      else
+        "#{@type}_field"
+      end
+    end
+
+    def input_tag
+      "#{input}_tag"
+    end
+
+    def character_count
+      @character_count ||= CharacterCount.new(text_field: self, max_length: @maxlength)
+    end
+
+    def render_number_buttons?
+      @type == :number && !@disabled
+    end
+  end
+end

data/app/components/polaris/text_style_component.rb

@@ -0,0 +1,32 @@
+# frozen_string_literal: true
+
+module Polaris
+  class TextStyleComponent < Polaris::NewComponent
+    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
+
+    def initialize(
+      variation: VARIATION_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)],
+      )
+    end
+
+    def call
+      render(Polaris::BaseComponent.new(**@system_arguments)) { content }
+    end
+  end
+end

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

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

data/app/components/polaris/thumbnail_component.rb

@@ -0,0 +1,37 @@
+# frozen_string_literal: true
+
+module Polaris
+  class ThumbnailComponent < Polaris::NewComponent
+    SIZE_DEFAULT = :medium
+    SIZE_MAPPINGS = {
+      small: "Polaris-Thumbnail--sizeSmall",
+      medium: "Polaris-Thumbnail--sizeMedium",
+      large: "Polaris-Thumbnail--sizeLarge",
+    }
+    SIZE_OPTIONS = SIZE_MAPPINGS.keys
+
+    renders_one :icon, Polaris::IconComponent
+
+    def initialize(
+      source: nil,
+      size: SIZE_DEFAULT,
+      alt: nil,
+      **system_arguments
+    )
+      @source = source
+      @alt = alt
+
+      @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
+  end
+end

data/app/components/polaris/visually_hidden_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module Polaris
+  class VisuallyHiddenComponent < Polaris::NewComponent
+    def initialize
+    end
+
+    def call
+      content_tag(:span, content, class: "Polaris-VisuallyHidden")
+    end
+  end
+end

data/app/helpers/polaris/action_helper.rb

@@ -0,0 +1,14 @@
+module Polaris
+  module ActionHelper
+    def render_plain_action(action)
+      case action
+        when Hash
+          action = action(**action)
+      end
+
+      render Polaris::ButtonComponent.new(**action.to_h.except(:content), plain: true) do
+        action.content
+      end
+    end
+  end
+end

data/app/helpers/polaris/class_name_helper.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Polaris
+  module ClassNameHelper
+    def class_names(*args)
+      classes = []
+
+      args.each do |class_name|
+        case class_name
+        when String
+          classes << class_name if class_name.present?
+        when Hash
+          class_name.each do |key, val|
+            classes << key if val
+          end
+        when Array
+          classes << class_names(*class_name).presence
+        end
+      end
+
+      classes.compact.uniq.join(" ")
+    end
+  end
+end

data/app/helpers/polaris/conditional_helper.rb

@@ -0,0 +1,11 @@
+module Polaris
+  module ConditionalHelper
+    def conditional_wrapping_element(tag, options = {}, &block)
+      if options.delete(:show)
+        content_tag(tag, capture(&block), options)
+      else
+        capture(&block)
+      end
+    end
+  end
+end

data/app/helpers/polaris/fetch_or_fallback_helper.rb

@@ -0,0 +1,53 @@
+# frozen_string_literal: true
+
+# Polaris::FetchOrFallbackHelper
+# A little helper to enable graceful fallbacks
+#
+# Use this helper to quietly ensure a value is
+# one that you expect:
+#
+# allowed_values    - allowed options for *value*
+# given_value       - input being coerced
+# fallback          - returned if *given_value* is not included in *allowed_values*
+# deprecated_values - deprecated options for *value*. Will warn of deprecation if not in production
+#
+# fetch_or_fallback([1,2,3], 5, 2) => 2
+# fetch_or_fallback([1,2,3], 1, 2) => 1
+# fetch_or_fallback([1,2,3], nil, 2) => 2
+#
+# With deprecations:
+# fetch_or_fallback([1,2], 3, 2, deprecated_values: [3]) => 3
+# fetch_or_fallback([1,2], nil, 2, deprecated_values: [3]) => 2
+module Polaris
+  # :nodoc:
+  module FetchOrFallbackHelper
+    mattr_accessor :fallback_raises, default: true
+
+    InvalidValueError = Class.new(StandardError)
+
+    def fetch_or_fallback(allowed_values, given_value, fallback = nil, deprecated_values: nil)
+      if allowed_values.include?(given_value)
+        given_value
+      else
+        if fallback_raises && ENV["RAILS_ENV"] != "production" && ENV["STORYBOOK"] != "true"
+          raise InvalidValueError, <<~MSG
+            fetch_or_fallback was called with an invalid value.
+            Expected one of: #{allowed_values.inspect}
+            Got: #{given_value.inspect}
+            This will not raise in production, but will instead fallback to: #{fallback.inspect}
+          MSG
+        end
+
+        fallback
+      end
+    end
+
+    def fetch_or_fallback_boolean(given_value, fallback = false)
+      if [true, false].include?(given_value)
+        given_value
+      else
+        fallback
+      end
+    end
+  end
+end

data/app/helpers/polaris/form_builder.rb

@@ -0,0 +1,16 @@
+module Polaris
+  class FormBuilder < ActionView::Helpers::FormBuilder
+    def polaris_text_field(method, **options, &block)
+      options[:error] ||= errors_for(method)
+      @template.render(
+        Polaris::TextFieldComponent.new(form: self, attribute: method, **options, &block)
+      )
+    end
+
+    def errors_for(method)
+      return if object.blank?
+      return unless object.errors.key?(method)
+      object.errors[method].join(', ').html_safe
+    end
+  end
+end

data/app/helpers/polaris/option_helper.rb

@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module Polaris
+  module OptionHelper
+    def prepend_option(options, key, value)
+      options[key] = [value, options[key]].compact.join(" ")
+    end
+
+    def append_option(options, key, value)
+      options[key] = [options[key], value].compact.join(" ")
+    end
+  end
+end

data/app/helpers/polaris/view_helper.rb

@@ -0,0 +1,66 @@
+module Polaris
+  # Module to allow shorthand calls for Polaris components
+  module ViewHelper
+    HELPERS = {
+      avatar:                   "Polaris::AvatarComponent",
+      badge:                    "Polaris::BadgeComponent",
+      banner:                   "Polaris::BannerComponent",
+      button:                   "Polaris::ButtonComponent",
+      button_group:             "Polaris::ButtonGroupComponent",
+      callout_card:             "Polaris::CalloutCardComponent",
+      caption:                  "Polaris::CaptionComponent",
+      card:                     "Polaris::CardComponent",
+      checkbox:                 "Polaris::CheckboxComponent",
+      choice_list:              "Polaris::ChoiceListComponent",
+      description_list:         "Polaris::DescriptionListComponent",
+      display_text:             "Polaris::DisplayTextComponent",
+      dropzone:                 "Polaris::Dropzone::Component",
+      empty_state:              "Polaris::EmptyStateComponent",
+      exception_list:           "Polaris::ExceptionListComponent",
+      footer_help:              "Polaris::FooterHelpComponent",
+      form_layout:              "Polaris::FormLayoutComponent",
+      heading:                  "Polaris::HeadingComponent",
+      icon:                     "Polaris::IconComponent",
+      inline_error:             "Polaris::InlineErrorComponent",
+      layout:                   "Polaris::LayoutComponent",
+      link:                     "Polaris::LinkComponent",
+      list:                     "Polaris::ListComponent",
+      page:                     "Polaris::PageComponent",
+      page_actions:             "Polaris::PageActionsComponent",
+      pagination:               "Polaris::PaginationComponent",
+      progress_bar:             "Polaris::ProgressBarComponent",
+      radio_button:             "Polaris::RadioButtonComponent",
+      select:                   "Polaris::SelectComponent",
+      shopify_navigation:       "Polaris::ShopifyNavigationComponent",
+      stack:                    "Polaris::StackComponent",
+      subheading:               "Polaris::SubheadingComponent",
+      spinner:                  "Polaris::SpinnerComponent",
+      text_container:           "Polaris::TextContainerComponent",
+      text_field:               "Polaris::TextFieldComponent",
+      text_style:               "Polaris::TextStyleComponent",
+      thumbnail:                "Polaris::ThumbnailComponent",
+      visually_hidden:          "Polaris::VisuallyHiddenComponent",
+    }.freeze
+
+    HELPERS.each do |name, component|
+      define_method "polaris_#{name}" do |*args, **kwargs, &block|
+        render component.constantize.new(*args, **kwargs), &block
+      end
+    end
+
+    def polaris_icon_source(name)
+      path = ViewComponents::Engine.root.join("app", "assets", "icons", "polaris", "#{name}.svg")
+      file = File.read(path)
+      doc = Nokogiri::HTML::DocumentFragment.parse(file)
+      svg = doc.at_css 'svg'
+      svg[:class] = "Polaris-Icon__Svg"
+      svg[:focusable] = false
+      svg[:"aria-hidden"] = true
+      doc.to_html.html_safe
+    end
+
+    def polaris_body_styles
+      %Q(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;)
+    end
+  end
+end