Problem/Motivation

Several comments, CSS classes and libraries still refer to Claro in Admin:

$ rg -i claro core/themes/admin|wc -l
98

Steps to reproduce

Proposed resolution

Reword comments, replace CSS class names, figure out what to do with libraries.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet

Issue fork drupal-3576496

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

longwave created an issue. See original summary.

thejimbirch’s picture

thejimbirch commented

Claro References Cleanup Checklist

The paths are relative to core/themes/admin

1. Comments (51 instances)

- js/tabledrag.js:45 - Comment: "Claro tabledrag structure"
- js/tabledrag.js:129 - Comment: "Moves added indents into Claro's wrapper element"
- js/details.js:3 - Comment: "Claro's polyfill enhancements for HTML5 details"
- js/ajax.js:3 - Comment: "Ajax theme overrides for Claro"
- js/dropbutton.js:3 - Comment: "Theme overrides for Claro"
- css/base/typography.pcss.css:3 - Comment: "with the base line height of Claro"
- css/base/typography.css:9 - Comment: "with the base line height of Claro"
- images/core/README.md:3-4 - Comment: References to moving Claro to Drupal core
- js/media-library.ui.js:3 - Comment: "Media Library overrides for Claro"
- css/base/variables.css:22 - Comment: "/* Claro focus ring */"
- css/base/variables.pcss.css:16 - Comment: "/* Claro focus ring */"
- js/autocomplete.js:3 - Comment: "Claro's enhancement for autocomplete form element"
- js/vertical-tabs.js:3 - Comment: "Overrides vertical tabs theming to enable Claro designs"
- js/tableselect.js:3 - Comment: "Extends table select functionality for Claro"
- css/theme/toolbar.icons.theme.css:12-13 - Comment: "If Claro is the admin theme..."
- css/theme/toolbar.icons.theme.pcss.css:5-6 - Comment: "If Claro is the admin theme..."
- css/theme/toolbar.theme.pcss.css:4-5 - Comment: "If Claro is the admin theme..."
- css/theme/toolbar.theme.css:10-11 - Comment: "If Claro is the admin theme..."
- css/state/toolbar.menu.css:10-11 - Comment: "If Claro is the admin theme..."
- css/state/toolbar.menu.pcss.css:4-5 - Comment: "If Claro is the admin theme..."
- css/components/toolbar.module.css:14-15 - Comment: "If Claro is the admin theme..."
- css/components/toolbar.module.pcss.css:8-9 - Comment: "If Claro is the admin theme..."
- css/components/pager.pcss.css:3 - Comment: "Styles for Claro's Pagination"
- css/components/pager.css:9 - Comment: "Styles for Claro's Pagination"
- css/components/tableselect.css:10 - Comment: "Table select styles for Claro"
- css/components/tableselect.pcss.css:3 - Comment: "Table select styles for Claro"
- css/components/views-ui.pcss.css:8 - Comment: "Claro positions the summary absolutely..."
- css/components/views-ui.pcss.css:102 - Comment: "supercede the Claro .form-item"
- css/components/views-ui.pcss.css:187 - Comment: "duplicates from core styles because Claro"
- css/components/views-ui.pcss.css:486 - Comment: "Fixes a Claro style that bleeds down..."
- css/components/views-ui.pcss.css:514 - Comment: "Claro's reset for .form-items is aggressive"
- css/components/views-ui.css:15 - Comment: "Claro positions the summary absolutely..."
- css/components/views-ui.css:119 - Comment: "supercede the Claro .form-item"
- css/components/views-ui.css:208 - Comment: "duplicates from core styles because Claro"
- css/components/views-ui.css:552 - Comment: "Fixes a Claro style that bleeds down..."
- css/components/views-ui.css:581 - Comment: "Claro's reset for .form-items is aggressive"
- css/components/tables.css:10 - Comment: "Claro styles for Tables"
- css/components/tables.pcss.css:3 - Comment: "Claro styles for Tables"
- css/components/menus-and-lists.css:11 - Comment: "used in claro-toolbar-menu..."
- css/components/menus-and-lists.pcss.css:4 - Comment: "used in claro-toolbar-menu..."
- css/components/button.pcss.css:3 - Comment: "Structural styles for Claro's UI buttons"
- css/components/button.css:10 - Comment: "Structural styles for Claro's UI buttons"
- css/components/system-status-report.pcss.css:3 - Comment: "Claro styles for the System Status Report"
- css/components/system-status-report.css:10 - Comment: "Claro styles for the System Status Report"
- css/components/system-status-report-general-info.css:10 - Comment: "Claro styles for the System Status general info"
- css/components/system-status-report-general-info.pcss.css:3 - Comment: "Claro styles for the System Status general info"
- css/components/help.pcss.css:3 - Comment: "Claro styles for the help component"
- css/components/help.css:10 - Comment: "Claro styles for the help component"
- css/components/jquery.ui/theme.pcss.css:3 - Comment: "Claro styles for jQuery UI"
- css/components/jquery.ui/theme.css:10 - Comment: "Claro styles for jQuery UI"

2. JavaScript Behavior Names (5 instances)

- js/tabledrag.js:12 - Drupal.behaviors.claroTableDrag
- js/details.js:16 - Drupal.behaviors.claroDetails
- js/media-library.ui.js:14 - Drupal.behaviors.MediaLibraryItemSelectionClaro
- js/autocomplete.js:9 - Drupal.behaviors.claroAutoCompete
- js/tableselect.js:362 - Drupal.behaviors.claroTableSelect

3. JavaScript once() IDs (5 instances)

- js/tabledrag.js:103 - 'claroTabledrag'
- js/details.js:20 - 'claroDetails'
- js/media-library.ui.js:20 - 'media-library-selection-info-claro-event'
- js/autocomplete.js:11 - 'claroAutoComplete'
- js/tableselect.js:365 - 'ClaroBulkActions'

4. JavaScript Class Names (2 instances)

- js/tableselect.js:7 - Drupal.ClaroBulkActions (class definition)
- js/tableselect.js:372 - new Drupal.ClaroBulkActions() (instantiation)

5. CSS Classes (11 instances)

- migration/css/theme/accent.css:85 - [data-gin-focus="claro"]
- css/components/tables.css:186 - .claro-autocomplete
- css/components/tables.css:187 - .claro-autocomplete > .form-element
- css/components/tables.css:188 - .ajax-new-content > .form-item > .claro-autocomplete
- css/components/tables.css:189 - .ajax-new-content > .form-item > .claro-autocomplete > .form-element
- css/components/tables.pcss.css:173-176 - .claro-autocomplete (4 instances in pcss version)
- css/components/autocomplete-loading.module.pcss.css:59 - .claro-autocomplete
- css/components/autocomplete-loading.module.pcss.css:65 - .claro-autocomplete__message
- css/components/autocomplete-loading.module.css:67 - .claro-autocomplete
- css/components/autocomplete-loading.module.css:73 - .claro-autocomplete__message

6. CSS Animation Names (4 instances)

- css/components/ajax-progress.module.css:64 - animation: claro-throbber
- css/components/ajax-progress.module.css:113 - @keyframes claro-throbber
- css/components/ajax-progress.module.pcss.css:53 - animation: claro-throbber
- css/components/ajax-progress.module.pcss.css:100 - @keyframes claro-throbber

7. Library References (9 instances - attach_library in Twig templates)

- templates/classy/field/file-video.html.twig:18 - claro/classy.file
- templates/classy/field/file-audio.html.twig:18 - claro/classy.file
- templates/classy/navigation/book-navigation.html.twig:31 - claro/classy.book-navigation
- templates/classy/dataset/forums.html.twig:17 - claro/classy.forum
- templates/classy/misc/progress-bar.html.twig:14 - claro/classy.progress
- templates/classy/content/search-result.html.twig:59 - claro/classy.search-results
- templates/classy/content/media-embed-error.html.twig:18 - claro/classy.media_embed_error
- templates/classy/content/node.html.twig:72 - claro/classy.node
- templates/classy/content/comment.html.twig:70 - claro/classy.indented

8. Settings/Configuration (1 instance)

- src/Settings.php:298 - 'claro' => $this->t('Claro Green') (color scheme setting)

quietone made their first commit to this issue’s fork.

quietone opened merge request !15233

quietone’s picture

quietone commented

Hoping that others can build on this I started an MR. I changed a few things but I don't do front end so it could be wrong.

quietone’s picture

quietone commented
Status: Active » Needs review

Changing to NR to get direction here.

quietone’s picture

quietone commented

Regarding the checklist. It is nice to have a list but what are the recommended changes?

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Postponed

We have a number of large CSS MRs incoming that @lauriii agreed to prioritize. Postponing this until we get those in, since they will inevitably cause conflicts.