ariadne_view_components 0.0.1

data/lib/tasks/utilities.rake

@@ -0,0 +1,121 @@
+# frozen_string_literal: true
+
+namespace :utilities do
+  desc "Generate CSS utility classes"
+  task :build do
+    require "yaml"
+    require "json"
+    require File.expand_path("./../../lookbook/config/environment.rb", __dir__)
+    require "ariadne/classify/utilities"
+
+    # Keys that are looked for to be included in the utilities.yml file
+    SUPPORTED_KEYS = [
+      /^anim\b/,
+      /^color-bg\b/,
+      /^color-border\b/,
+      /^color-fg\b/,
+      /^col\b/,
+      /^container\b/,
+      /^clearfix\b/,
+      /^d\b/,
+      /^float\b/,
+      /^height\b/,
+      /^hide\b/,
+      /^m[trblxy]?\b/,
+      /^p[trblxy]?\b/,
+      /^position\b/,
+      /^wb\b/,
+      /^width\b/,
+      /^v\b/,
+    ].freeze
+
+    BREAKPOINTS = [nil, "sm", "md", "lg", "xl"].freeze
+    utility_data =
+      JSON.parse(
+        File.read(
+          File.expand_path(File.join("..", "..", "node_modules", "@primer", "css", "dist", "stats", "utilities.json"), __dir__)
+        )
+      )["selectors"]["values"]
+
+    custom_utility_data = YAML.load_file(
+      File.join(__dir__, "custom_utilities.yml")
+    )
+
+    layout_data =
+      JSON.parse(
+        File.read(
+          File.expand_path(File.join("..", "..", "node_modules", "@primer", "css", "dist", "stats", "layout.json"), __dir__)
+        )
+      )["selectors"]["values"]
+
+    css_data = utility_data + layout_data
+
+    output = {}
+
+    css_data.each do |selector|
+      selector.sub!(/^./, "")
+      selector.sub!(/:[^\s]*$/, "")
+
+      # Next if selector has ancestors or sibling selectors
+      next if selector.match?(/[:><~\[.]/)
+      next unless SUPPORTED_KEYS.any? { |key| selector =~ key }
+
+      # Dupe so we still have the selector at the end of slicing it up
+      classname = selector.dup
+      key = ""
+
+      # Look for a replacement key
+      Ariadne::Classify::Utilities::REPLACEMENT_KEYS.each do |k, v|
+        next unless classname.match?(Regexp.new(k))
+
+        key = v
+        classname.sub!(Regexp.new("#{k}-"), "")
+      end
+
+      # If we didn't find a replacement, grab the first text before hyphen
+      if classname == selector
+        key = classname.split("-").first
+        classname.sub!(/^[^-]+-/, "")
+      end
+
+      # Check if the next bit of the classname is a breakpoint
+      if classname.match?(/^(sm-|md-|lg-|xl-)/)
+        breakpoint = classname.split("-").first
+        classname.sub!(/^[^-]+-/, "")
+      end
+
+      # Change the rest from hyphens to underscores
+      classname.sub!(/-/, "_")
+
+      # convert padding/margin negative values ie n7 to -7
+      classname.sub!(/^n/, "-") if classname.match?(/^n[0-9]/)
+
+      # If key and classname are equal, then classname is boolean
+      classname = true if key == classname
+
+      key = key.to_sym
+
+      if classname.is_a?(String)
+        classname = classname.match?(/\A[-+]?[0-9]+\z/) ? classname.to_i : classname.to_sym
+      end
+
+      if output[key].nil?
+        output[key] = { classname => Array.new(5, nil) }
+      elsif output[key][classname].nil?
+        output[key][classname] = Array.new(5, nil)
+      end
+
+      output[key][classname][BREAKPOINTS.index(breakpoint)] = selector
+    end
+
+    output.transform_values! do |x|
+      x.transform_values { |y| y.reverse.drop_while(&:nil?).reverse }
+    end
+
+    output.merge!(custom_utility_data)
+
+    File.open("lib/ariadne/classify/utilities.yml", "w") do |f|
+      f.puts YAML.dump(output)
+    end
+  end
+end

data/lib/yard/docs_helper.rb

@@ -0,0 +1,83 @@
+# frozen_string_literal: true
+
+# :nocov:
+
+module YARD
+  # Helper methods to use for yard documentation
+  module DocsHelper
+    def one_of(enumerable, lower: false, sort: true)
+      # Sort the array if requested
+      if sort
+        enumerable = enumerable.sort do |a, b|
+          a.instance_of?(b.class) ? a <=> b : a.class.to_s <=> b.class.to_s
+        end
+      end
+
+      values =
+        case enumerable
+        when Hash
+          enumerable.map do |key, value|
+            "#{pretty_value(key)} (#{pretty_value(value)})"
+          end
+        else
+          enumerable.map do |key|
+            pretty_value(key)
+          end
+        end
+
+      prefix = "One of"
+      prefix = prefix.downcase if lower
+
+      "#{prefix} #{values.to_sentence(last_word_connector: ", or ")}."
+    end
+
+    def link_to_accessibility
+      "[Accessibility](#accessibility)"
+    end
+
+    def link_to_classes_docs
+      "[Classes and attributes](/classes-attributes)"
+    end
+
+    def link_to_attributes_docs
+      "[Classes and attributes](/classes-attributes)"
+    end
+
+    def link_to_typography_docs
+      "[Typography](/system-arguments#typography)"
+    end
+
+    def link_to_component(component)
+      (status_module, short_name) = status_module_and_short_name(component)
+      status_path = status_module.nil? ? "" : "/"
+
+      "[#{short_name}](/components/#{status_path}#{short_name.downcase})"
+    end
+
+    def link_to_heroicons
+      "[Heroicon](https://ariadne.style/heroicons/)"
+    end
+
+    def link_to_heading_practices
+      "[Learn more about best heading practices (WAI Headings)](https://www.w3.org/WAI/tutorials/page-structure/headings/)"
+    end
+
+    def status_module_and_short_name(component)
+      name_with_status = component.name.gsub(/Ariadne::|Component/, "")
+
+      m = name_with_status.match(/(?<status>Beta|Alpha|Deprecated)?(?<_colons>::)?(?<name>.*)/)
+      [m[:status]&.downcase, m[:name].gsub("::", "")]
+    end
+
+    def pretty_value(val)
+      case val
+      when nil
+        "`nil`"
+      when Symbol
+        "`:#{val}`"
+      else
+        "`#{val}`"
+      end
+    end
+  end
+end

data/lib/yard/renders_many_handler.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module YARD
+  # YARD Handler to parse `renders_many` calls.
+  class RendersManyHandler < YARD::Handlers::Ruby::Base
+    handles method_call(:renders_many)
+    namespace_only
+
+    process do
+      name = statement.parameters.first.jump(:tstring_content, :ident).source
+      object = YARD::CodeObjects::MethodObject.new(namespace, name)
+      register(object)
+      parse_block(statement.last, owner: object)
+
+      object.dynamic = true
+      object[:renders_many] = true
+    end
+  end
+end

data/lib/yard/renders_one_handler.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module YARD
+  # YARD Handler to parse `renders_one` calls.
+  class RendersOneHandler < YARD::Handlers::Ruby::Base
+    handles method_call(:renders_one)
+    namespace_only
+
+    process do
+      name = statement.parameters.first.jump(:tstring_content, :ident).source
+      object = YARD::CodeObjects::MethodObject.new(namespace, name)
+      register(object)
+      parse_block(statement.last, owner: object)
+
+      object.dynamic = true
+      object[:renders_one] = true
+    end
+  end
+end

data/static/arguments.yml

@@ -0,0 +1,251 @@
+---
+- component: BaseButton
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/base_button.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: type
+    type: Symbol
+    default: "`:button`"
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: size
+    type: Symbol
+    default: "`:m`"
+    description: One of `:l`, `:m`, `:s`, `:xl`, or `:xs`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Button
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/button_component.rb
+  parameters:
+  - name: tag
+    type: Symbol
+    default: "`:button`"
+    description: One of `:a`, `:button`, or `:summary`.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:info`, `:success`, or `:warning`.
+  - name: size
+    type: Symbol
+    default: "`BaseButton::DEFAULT_SIZE`"
+    description: One of `:l`, `:m`, `:s`, `:xl`, or `:xs`.
+  - name: type
+    type: Symbol
+    default: N/A
+    description: One of `:button`, `:reset`, or `:submit`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: ClipboardCopy
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/clipboard_copy_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:clipboard-copy`"
+    description: The rendered tag name
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: value
+    type: String
+    default: '`""`'
+    description: Text to copy into the users clipboard when they click the component.
+  - name: aria_label
+    type: String
+    default: '`""`'
+    description: Text for accessibility. Can also be passed in as part of `attributes`,
+      but it must be present.
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Counter
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/counter_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:span`"
+    description: The rendered tag name
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: count
+    type: Integer, Float::INFINITY, nil
+    default: "`0`"
+    description: 'The number to be displayed (e.x. # of issues, pull requests)'
+  - name: limit
+    type: Integer, nil
+    default: "`9_000`"
+    description: Maximum value to display. Pass `nil` for no limit. (e.x. if `count`
+      == 6,000 and `limit` == 5000, counter will display "5,000+")
+  - name: hide_if_zero
+    type: Boolean
+    default: "`false`"
+    description: If true, a `hidden` attribute is added to the counter if `count`
+      is zero.
+  - name: text
+    type: String
+    default: '`""`'
+    description: Text to display instead of count.
+  - name: round
+    type: Boolean
+    default: "`false`"
+    description: Whether to apply rounding logic to value.
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Flash
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/flash_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:div`"
+    description: The rendered tag name.
+  - name: dismissible
+    type: Boolean
+    default: "`false`"
+    description: Whether the component can be dismissed with an X button.
+  - name: icon
+    type: Symbol, String
+    default: N/A
+    description: Name of [Heroicon](https://ariadne.style/heroicons/) to use.
+  - name: scheme
+    type: Symbol
+    default: "`:default`"
+    description: One of `:danger`, `:default`, `:info`, `:success`, or `:warning`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Heading
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/heading_component.rb
+  parameters:
+  - name: tag
+    type: String
+    default: "`nil`"
+    description: One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Heroicon
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/heroicon_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:svg`"
+    description: The rendered tag name
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: icon
+    type: Symbol, String
+    default: N/A
+    description: Name of [Heroicon](https://ariadne.style/heroicons/) to use.
+  - name: variant
+    type: String
+    default: N/A
+    description: One of `outline` and `solid`.
+  - name: size
+    type: Symbol
+    default: "`:small`"
+    description: One of `:small` (`16`) and `:medium` (`24`).
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Image
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/image_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:img`"
+    description: The rendered tag name
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: src
+    type: String
+    default: N/A
+    description: The source url of the image.
+  - name: alt
+    type: String
+    default: N/A
+    description: Specifies an alternate text for the image.
+  - name: lazy
+    type: Boolean
+    default: "`false`"
+    description: Whether or not to lazily load the image.
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Text
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/text.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: "`:span`"
+    description: The rendered tag name
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"
+- component: Tooltip
+  source: https://github.com/yettoapp/ariadne/ruby/view_components/tree/main/app/components/ariadne/tooltip_component.rb
+  parameters:
+  - name: tag
+    type: Symbol, String
+    default: '`:"tool-tip"`'
+    description: The rendered tag name
+  - name: type
+    type: Symbol
+    default: "`:description`"
+    description: One of `:description` and `:label`.
+  - name: text
+    type: String
+    default: N/A
+    description: The text content of the tooltip. This should be brief and no longer
+      than a sentence.
+  - name: direction
+    type: Symbol
+    default: "`:s`"
+    description: One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`.
+  - name: classes
+    type: String
+    default: '`""`'
+    description: "[Classes and attributes](/classes-attributes)"
+  - name: attributes
+    type: Hash
+    default: "`{}`"
+    description: "[Classes and attributes](/classes-attributes)"

data/static/assets/view-components.svg

@@ -0,0 +1,18 @@
+<svg width="400" height="220" viewBox="0 0 400 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="400" height="220" fill="#1B1F23"/>
+<rect x="115" y="25" width="170" height="170" fill="#1B1F23" stroke="#79B8FF"/>
+<circle cx="130.597" cy="117.49" r="3.66652" stroke="#C8E1FF"/>
+<circle cx="255.666" cy="92.6387" r="7.33303" fill="#1B1F23" stroke="#C8E1FF"/>
+<rect x="222.26" y="161.673" width="20.3695" height="16.2956" fill="#044289"/>
+<rect x="205" y="162" width="12" height="16" fill="#044289"/>
+<rect x="258.925" y="161.673" width="28.5173" height="16.2956" fill="#044289"/>
+<rect x="106" y="66" width="49" height="17" fill="#005CC5"/>
+<path d="M165.632 51.8996C220.5 29.5 263.42 80.2095 206 99C148.58 117.791 174.28 166.185 222.259 136.23C253 117.037 262.499 142.847 249.962 152.118" stroke="#C8E1FF"/>
+<path d="M241.203 61.677L238.555 56.7883L241.203 51.8997L246.499 51.8997L249.147 56.7883L246.499 61.677H241.203Z" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M157.892 170.45L151.374 170.45L154.633 164.747L157.892 170.45Z" stroke="#2188FF" stroke-width="2" stroke-linejoin="round"/>
+<path d="M228.37 111.379C226.293 111.379 226.293 107.305 224.215 107.305C222.137 107.305 222.137 111.379 220.059 111.379C217.982 111.379 217.982 107.305 215.904 107.305C213.826 107.305 213.826 111.379 211.749 111.379C209.671 111.379 209.671 107.305 207.593 107.305" stroke="#2188FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M151.954 65H145.75C144.784 65 144 64.2165 144 63.25V51.75C144 50.7835 144.784 50 145.75 50H164.25C165.216 50 166 50.7835 166 51.75V63.25C166 64.2165 165.216 65 164.25 65H158.046C158.217 66.3751 158.851 67.6522 159.815 68.7568C160.008 68.9784 160.054 69.2926 159.933 69.5604C159.811 69.8281 159.544 70 159.25 70H150.75C150.456 70 150.189 69.8281 150.067 69.5604C149.945 69.2926 149.991 68.9784 150.185 68.7568C151.149 67.6522 151.783 66.3751 151.954 65ZM164.5 51.75V63.25C164.5 63.3881 164.388 63.5 164.25 63.5H145.75C145.612 63.5 145.5 63.3881 145.5 63.25V51.75C145.5 51.6119 145.612 51.5 145.75 51.5H164.25C164.388 51.5 164.5 51.6119 164.5 51.75ZM156.537 65C156.662 66.2662 157.101 67.445 157.76 68.5H152.24C152.899 67.445 153.337 66.2662 153.463 65H156.537Z" fill="#79B8FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M248.544 149.734C247.683 148.873 246.228 149.132 245.718 150.238L245.105 151.565C244.953 151.895 244.744 152.196 244.486 152.453C244.083 152.856 243.576 153.14 243.021 153.272L240.567 153.856C239.235 154.173 238.767 155.828 239.735 156.796L241.939 159L238.22 162.72C237.927 163.013 237.927 163.487 238.22 163.78C238.513 164.073 238.987 164.073 239.28 163.78L243 160.061L245.204 162.265C246.172 163.233 247.827 162.765 248.144 161.433L248.728 158.979C248.86 158.424 249.144 157.917 249.547 157.514C249.804 157.256 250.105 157.047 250.435 156.895L251.762 156.282C252.868 155.772 253.127 154.317 252.266 153.456L248.544 149.734ZM247.08 150.866C247.153 150.709 247.361 150.671 247.484 150.794L251.206 154.516C251.329 154.639 251.291 154.847 251.134 154.92L249.806 155.533C249.315 155.759 248.869 156.071 248.486 156.453C247.887 157.052 247.466 157.806 247.269 158.631L246.685 161.085C246.64 161.276 246.403 161.343 246.265 161.204L240.796 155.735C240.657 155.597 240.724 155.36 240.915 155.315L243.369 154.731C244.194 154.534 244.948 154.113 245.547 153.514C245.929 153.131 246.241 152.685 246.467 152.194L247.08 150.866Z" fill="#79B8FF"/>
+<path d="M186.5 106H175.5L170.5 111.5L181 123.5L191.5 112L186.5 106Z" fill="#1B1F23"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M174.873 105.26C174.943 105.179 175.03 105.113 175.128 105.068C175.226 105.023 175.332 105 175.44 105H186.75C186.86 105 186.969 105.024 187.068 105.071C187.168 105.118 187.256 105.186 187.326 105.27L192.326 111.27C192.443 111.41 192.505 111.589 192.5 111.771C192.494 111.954 192.423 112.128 192.298 112.262L181.548 123.762C181.478 123.837 181.393 123.897 181.299 123.938C181.204 123.979 181.103 124 181 124C180.897 124 180.796 123.979 180.701 123.938C180.607 123.897 180.522 123.837 180.452 123.762L169.702 112.262C169.575 112.127 169.503 111.95 169.5 111.764C169.496 111.579 169.561 111.399 169.682 111.259L174.872 105.259L174.873 105.26ZM175.783 106.5L171.258 111.73L181 122.153L190.75 111.723L186.399 106.5H175.783Z" fill="#79B8FF"/>
+</svg>

data/static/audited_at.json

@@ -0,0 +1,14 @@
+{
+  "Ariadne::BaseButton": "",
+  "Ariadne::BaseComponent": "",
+  "Ariadne::ButtonComponent": "",
+  "Ariadne::ClipboardCopyComponent": "",
+  "Ariadne::Content": "",
+  "Ariadne::CounterComponent": "",
+  "Ariadne::FlashComponent": "",
+  "Ariadne::HeadingComponent": "",
+  "Ariadne::HeroiconComponent": "",
+  "Ariadne::ImageComponent": "",
+  "Ariadne::Text": "",
+  "Ariadne::TooltipComponent": ""
+}

data/static/classes.yml

@@ -0,0 +1,89 @@
+---
+- ".-mx-1.5"
+- ".-mx-2"
+- ".-my-1.5"
+- ".bg-blue-50"
+- ".bg-gray-600"
+- ".bg-green-50"
+- ".bg-red-50"
+- ".bg-white"
+- ".bg-yellow-50"
+- ".border"
+- ".border-blue-300"
+- ".border-gray-300"
+- ".border-green-300"
+- ".border-red-300"
+- ".border-transparent"
+- ".border-yellow-300"
+- ".color-fg-success"
+- ".flex"
+- ".flex-shrink-0"
+- ".focus:outline-none"
+- ".focus:ring-2"
+- ".focus:ring-blue-600"
+- ".focus:ring-gray-500"
+- ".focus:ring-green-600"
+- ".focus:ring-indigo-500"
+- ".focus:ring-offset-2"
+- ".focus:ring-offset-blue-50"
+- ".focus:ring-offset-green-50"
+- ".focus:ring-offset-red-50"
+- ".focus:ring-offset-yellow-50"
+- ".focus:ring-red-600"
+- ".focus:ring-yellow-600"
+- ".font-bold"
+- ".font-extrabold"
+- ".font-medium"
+- ".hover:bg-blue-100"
+- ".hover:bg-gray-50"
+- ".hover:bg-gray-700"
+- ".hover:bg-green-100"
+- ".hover:bg-red-100"
+- ".hover:bg-yellow-100"
+- ".inline-flex"
+- ".items-center"
+- ".leading-4"
+- ".leading-7"
+- ".m-2"
+- ".ml-2"
+- ".ml-3"
+- ".mt-2"
+- ".mt-4"
+- ".p-1"
+- ".p-1.5"
+- ".p-4"
+- ".pl-3"
+- ".pt-5"
+- ".px-2.5"
+- ".px-3"
+- ".px-4"
+- ".px-6"
+- ".py-1.5"
+- ".py-2"
+- ".py-3"
+- ".rounded"
+- ".rounded-full"
+- ".rounded-m"
+- ".rounded-md"
+- ".shadow-sm"
+- ".sm:text-3xl"
+- ".sm:truncate"
+- ".sr-only"
+- ".text-2xl"
+- ".text-3xl"
+- ".text-base"
+- ".text-blue-500"
+- ".text-blue-700"
+- ".text-blue-800"
+- ".text-gray-700"
+- ".text-gray-900"
+- ".text-green-700"
+- ".text-green-800"
+- ".text-red-700"
+- ".text-red-800"
+- ".text-sm"
+- ".text-white"
+- ".text-xs"
+- ".text-yellow-600"
+- ".text-yellow-700"
+- ".text-yellow-800"