[6.x] Consistent read only states

[jaygeorge]

Description of the Problem

(This all started as I was looking at this issue #14615)

I checked out all the different field types and noticed that their read-only state is either inconsistent or broken.

Below is an example of all the field types in read-only state.

There are numerous issues here:

• Button groups don't look read-only
• The Bard field looks out of place
• The table inside the Bard field doesn't render
• The code field is only half-styled
• Many other fields are not styled as read-only
• Relationship-type fields that are read-only without a selection are not rendered

What this PR Does

• Makes sure all fields receive consistent read-only styling
• Dark mode fixes/considerations for read-only states
• Fix Bard table rendering
• When read-only fields do not have a selection, at least output a placeholder
• Closes Missing Bard styling when in computed or readonly mode #14615

After

After - Dark mode

How to Reproduce

1. If you want to check these out it's probably easiest you have a blueprint with all the fields in. Here's the blueprint I used

tabs:
  main:
    display: Main
    sections:
      -
        display: Content
        collapsible: true
        fields:
          -
            handle: title
            field:
              type: text
              required: true
              localizable: false
              validate:
                - required
              visibility: read_only
          -
            handle: button_group_field
            field:
              options:
                -
                  key: Edit
                  value: null
                -
                  key: Integrations
                  value: null
                -
                  key: Results
                  value: null
                -
                  key: Configure
                  value: null
              type: button_group
              display: 'Button Group Field'
              localizable: false
              instructions: 'Help stuff'
              visibility: read_only
          -
            handle: content
            field:
              type: markdown
              localizable: true
              visibility: read_only
          -
            handle: bard_field
            field:
              container: assets
              remove_empty_nodes: false
              type: bard
              display: 'Bard Field'
              localizable: false
              visibility: read_only
              sets:
                set_1:
                  display: 'Set 1'
                  sets:
                    new_set:
                      display: 'New Set'
                      fields: {  }
                    set_2:
                      display: 'Set 2'
                      fields: {  }
          -
            handle: code_field
            field:
              type: code
              display: 'Code Field'
              localizable: false
              visibility: read_only
          -
            handle: textarea_field
            field:
              type: textarea
              display: 'Textarea Field'
              localizable: false
              visibility: read_only
          -
            handle: checkboxes_field
            field:
              options:
                -
                  key: 1
                  value: null
                -
                  key: 2
                  value: null
                -
                  key: 3
                  value: null
              type: checkboxes
              display: 'Checkboxes Field'
              localizable: false
              visibility: read_only
          -
            handle: dictionary_field
            field:
              dictionary: currencies
              type: dictionary
              display: 'Dictionary Field'
              localizable: false
              visibility: read_only
          -
            handle: radio_field
            field:
              options:
                -
                  key: 1
                  value: null
                -
                  key: 2
                  value: null
                -
                  key: 3
                  value: null
              type: radio
              display: 'Radio Field'
              localizable: false
              visibility: read_only
          -
            handle: range_field
            field:
              type: range
              display: 'Range Field'
              localizable: false
              visibility: read_only
          -
            handle: revealer_field
            field:
              type: revealer
              display: 'Revealer Field'
              localizable: false
              visibility: read_only
          -
            handle: select_field
            field:
              options:
                -
                  key: 1
                  value: null
                -
                  key: 2
                  value: null
                -
                  key: 3
                  value: null
              type: select
              display: 'Select Field'
              localizable: false
              visibility: read_only
          -
            handle: toggle_field
            field:
              type: toggle
              display: 'Toggle Field'
              localizable: false
              visibility: read_only
          -
            handle: width_field
            field:
              type: width
              display: 'Width Field'
              localizable: false
              visibility: read_only
          -
            handle: assets_field
            field:
              container: assets
              type: assets
              display: 'Assets Field'
              localizable: false
              width: 50
              visibility: read_only
          -
            handle: show_in_header
            field:
              type: toggle
              display: 'Show in header?'
              localizable: false
              width: 50
              visibility: read_only
          -
            handle: icon_field
            field:
              type: icon
              display: 'Icon Field'
              localizable: false
              visibility: read_only
          -
            handle: video_field
            field:
              type: video
              display: 'Video Field'
              localizable: false
              visibility: read_only
          -
            handle: float_field
            field:
              type: float
              display: 'Float Field'
              localizable: false
              visibility: read_only
          -
            handle: integer_field
            field:
              type: integer
              display: 'Integer Field'
              localizable: false
              visibility: read_only
          -
            handle: collections_field
            field:
              type: collections
              display: 'Collections Field'
              localizable: false
          -
            handle: entries_field
            field:
              type: entries
              display: 'Entries Field'
              localizable: false
              visibility: read_only
          -
            handle: form_field
            field:
              max_items: 1
              type: form
              display: 'Form Field'
              localizable: false
              visibility: read_only
          -
            handle: link_field
            field:
              type: link
              display: 'Link Field'
              localizable: false
              visibility: read_only
          -
            handle: navs_field
            field:
              type: navs
              display: 'Navs Field'
              localizable: false
              visibility: read_only
          -
            handle: sites_field
            field:
              type: sites
              display: 'Sites Field'
              localizable: false
              mode: typeahead
              visibility: read_only
          -
            handle: structures_field
            field:
              type: structures
              display: 'Structures Field'
              localizable: false
              visibility: read_only
          -
            handle: taxonomies_field
            field:
              type: taxonomies
              display: 'Taxonomies Field'
              localizable: false
              visibility: read_only
          -
            handle: taxonomy_terms_field
            field:
              type: terms
              display: 'Taxonomy Terms Field'
              localizable: false
              visibility: read_only
          -
            handle: user_groups_field
            field:
              type: user_groups
              display: 'User Groups Field'
              localizable: false
              visibility: read_only
          -
            handle: user_roles_field
            field:
              type: user_roles
              display: 'User Roles Field'
              localizable: false
              visibility: read_only
          -
            handle: users_field
            field:
              type: users
              display: 'Users Field'
              localizable: false
              visibility: read_only
          -
            handle: array_field
            field:
              type: array
              display: 'Array Field'
              localizable: false
              visibility: read_only
          -
            handle: grid_field
            field:
              type: grid
              display: 'Grid Field'
              localizable: false
              visibility: read_only
          -
            handle: group_field
            field:
              type: group
              display: 'Group Field'
              localizable: false
              visibility: read_only
          -
            handle: list_field
            field:
              type: list
              display: 'List Field'
              localizable: false
              visibility: read_only
          -
            handle: replicator_field
            field:
              type: replicator
              display: 'Replicator Field'
              localizable: false
              hide_display: true
              visibility: read_only
              sets:
                new_set_group:
                  display: 'New Set Group'
                  sets:
                    set_1:
                      display: 'Set 1'
                      fields: {  }
                    set_2:
                      display: 'Set 2'
                      fields: {  }
          -
            handle: table_field
            field:
              type: table
              display: 'Table Field'
              localizable: false
              visibility: read_only
          -
            handle: taggable_field
            field:
              type: taggable
              display: 'Taggable Field'
              localizable: false
              visibility: read_only
          -
            handle: color_field
            field:
              type: color
              display: 'Color Field'
              localizable: false
              visibility: read_only
          -
            handle: date_field
            field:
              type: date
              display: 'Date Field'
              localizable: false
              visibility: read_only
          -
            handle: html_field
            field:
              type: html
              display: 'HTML Field'
              localizable: false
              html: '<p>Test</p>'
          -
            handle: slug_field
            field:
              type: slug
              display: 'Slug Field'
              localizable: false
              visibility: read_only
          -
            handle: template_field
            field:
              type: template
              display: 'Template Field'
              localizable: false
              visibility: read_only
          -
            handle: time_field
            field:
              type: time
              display: 'Time Field'
              localizable: false
              visibility: read_only
          -
            handle: yaml_field
            field:
              type: yaml
              display: 'YAML Field'
              localizable: false
              visibility: read_only
  sidebar:
    display: Sidebar
    sections:
      -
        fields:
          -
            handle: slug
            field:
              type: slug
              localizable: true
              validate:
                - 'max:200'
                - 'new \Statamic\Rules\UniqueEntryValue({collection}, {id}, {site})'
              visibility: read_only
title: 'All Field'