Rename theme to Claro (#69)

.github/pull_request_template.m

@@ -1,6 +1,6 @@
 ## Issue
 
-https://github.com/drupalux/seven/issues/<TODO>
+https://github.com/drupalux/claro/issues/<TODO>
 
 ## Screenshot / UI changes
 

README.md

@@ -1,4 +1,4 @@
-# Clone of the 'seven' theme
+# Claro Drupal admin theme
 
 ## Pre-requisites
 Before starting, ensure that you are using at least the latest LTS release of Node.js, once Node.js has been installed, we recommend to install yarn

seven.breakpoints.yml → claro.breakpoints.yml

@@ -1,10 +1,10 @@
-seven.mobile:
+claro.mobile:
   label: mobile
   mediaQuery: '(min-width: 0em)'
   weight: 0
   multipliers:
     - 1x
-seven.wide:
+claro.wide:
   label: wide
   mediaQuery: 'screen and (min-width: 40em)'
   weight: 1

seven.info.yml → claro.info.yml

@@ -2,16 +2,16 @@
 # minor releases.
 # Change record https://www.drupal.org/node/2582945.
 # As the UI of Drupal improves between minor versions, the mark up and assets
-# in the Seven theme will change. The Seven theme is not backwards
-# compatible. If you wish to modify the output or assets of Seven you can:
-# 1. Copy the whole of Seven and rename it as your own administration theme. You
+# in the Claro theme will change. The Claro theme is not backwards
+# compatible. If you wish to modify the output or assets of Claro you can:
+# 1. Copy the whole of Claro and rename it as your own administration theme. You
 # will need to manually manage your own updates if you want to stay up to
-# date with Seven's bug fixes and feature support.
+# date with Claro's bug fixes and feature support.
 #
-# 2. Sub-theme Seven. This is only recommended if you want to make minor
-# tweaks and understand that Seven could break your modifications as it
+# 2. Sub-theme Claro. This is only recommended if you want to make minor
+# tweaks and understand that Claro could break your modifications as it
 # changes.
-name: Seven
+name: Claro
 type: theme
 base theme: classy
 description: 'The default administration theme for Drupal 8 was designed with clean lines, simple blocks, and sans-serif font to emphasize the tools and tasks at hand.'
@@ -20,7 +20,7 @@ package: Core
 version: VERSION
 core: 8.x
 libraries:
- - seven/global-styling
+ - claro/global-styling
 libraries-override:
   system/base:
     css:
@@ -41,21 +41,21 @@ libraries-override:
       component:
         assets/vendor/jquery.ui/themes/base/dialog.css: false
   classy/dialog:
-    seven/seven.drupal.dialog
+    claro/claro.drupal.dialog
   classy/base:
     css:
       component:
         css/components/details.css: false
 
 libraries-extend:
   core/ckeditor:
-    - seven/ckeditor-dialog
+    - claro/ckeditor-dialog
   core/drupal.vertical-tabs:
-    - seven/vertical-tabs
+    - claro/vertical-tabs
   core/jquery.ui:
-    - seven/seven.jquery.ui
+    - claro/claro.jquery.ui
   tour/tour-styling:
-    - seven/tour-styling
+    - claro/tour-styling
 quickedit_stylesheets:
   - css/dist/components/quickedit.css
 regions:

seven.libraries.yml → claro.libraries.yml

@@ -61,7 +61,7 @@ maintenance-page:
       css/dist/theme/maintenance-page.css: {}
   dependencies:
     - system/maintenance
-    - seven/global-styling
+    - claro/global-styling
 
 install-page:
   version: VERSION
@@ -71,7 +71,7 @@ install-page:
     theme:
       css/dist/theme/install-page.css: {}
   dependencies:
-    - seven/maintenance-page
+    - claro/maintenance-page
 
 drupal.nav-tabs:
   version: VERSION
@@ -102,13 +102,13 @@ vertical-tabs:
     component:
       css/dist/components/vertical-tabs.css: {}
 
-seven.jquery.ui:
+claro.jquery.ui:
   version: VERSION
   css:
     component:
       css/dist/components/jquery.ui/theme.css: { weight: -1 }
 
-seven.drupal.dialog:
+claro.drupal.dialog:
   version: VERSION
   css:
     theme:

seven.theme → claro.theme

@@ -2,7 +2,7 @@
 
 /**
  * @file
- * Functions to support theming in the Seven theme.
+ * Functions to support theming in the Claro theme.
  */
 
 use Drupal\Core\Form\FormStateInterface;
@@ -11,7 +11,7 @@ use Drupal\media\MediaForm;
 /**
  * Implements hook_preprocess_HOOK() for HTML document templates.
  */
-function seven_preprocess_html(&$variables) {
+function claro_preprocess_html(&$variables) {
   // If on a node add or edit page, add a node-layout class.
   $path_args = explode('/', \Drupal::request()->getPathInfo());
   if ($suggestions = theme_get_suggestions($path_args, 'page', '-')) {
@@ -30,18 +30,18 @@ function seven_preprocess_html(&$variables) {
  * because they will be processed by Twig and drupal_render will
  * be invoked.
  */
-function seven_preprocess_menu_local_tasks(&$variables) {
+function claro_preprocess_menu_local_tasks(&$variables) {
   if (!empty($variables['primary'])) {
     $variables['primary']['#attached'] = [
       'library' => [
-        'seven/drupal.nav-tabs',
+        'claro/drupal.nav-tabs',
       ],
     ];
   }
   elseif (!empty($variables['secondary'])) {
     $variables['secondary']['#attached'] = [
       'library' => [
-        'seven/drupal.nav-tabs',
+        'claro/drupal.nav-tabs',
       ],
     ];
   }
@@ -50,14 +50,14 @@ function seven_preprocess_menu_local_tasks(&$variables) {
 /**
  * Implements hook_preprocess_HOOK() for menu-local-task templates.
  */
-function seven_preprocess_menu_local_task(&$variables) {
+function claro_preprocess_menu_local_task(&$variables) {
   $variables['attributes']['class'][] = 'tabs__tab';
 }
 
 /**
  * Implements hook_preprocess_HOOK() for list of available node type templates.
  */
-function seven_preprocess_node_add_list(&$variables) {
+function claro_preprocess_node_add_list(&$variables) {
   if (!empty($variables['content'])) {
     /** @var \Drupal\node\NodeTypeInterface $type */
     foreach ($variables['content'] as $type) {
@@ -73,7 +73,7 @@ function seven_preprocess_node_add_list(&$variables) {
  * Displays the list of available custom block types for creation, adding
  * separate variables for the label and url.
  */
-function seven_preprocess_block_content_add_list(&$variables) {
+function claro_preprocess_block_content_add_list(&$variables) {
   if (!empty($variables['content'])) {
     foreach ($variables['content'] as $type) {
       $variables['types'][$type->id()]['label'] = $type->label();
@@ -88,7 +88,7 @@ function seven_preprocess_block_content_add_list(&$variables) {
  *
  * Disables contextual links for all blocks.
  */
-function seven_preprocess_block(&$variables) {
+function claro_preprocess_block(&$variables) {
   if (isset($variables['title_suffix']['contextual_links'])) {
     unset($variables['title_suffix']['contextual_links']);
     unset($variables['elements']['#contextual_links']);
@@ -100,7 +100,7 @@ function seven_preprocess_block(&$variables) {
 /**
  * Implements hook_preprocess_HOOK() for block admin page templates.
  */
-function seven_preprocess_admin_block_content(&$variables) {
+function claro_preprocess_admin_block_content(&$variables) {
   if (!empty($variables['content'])) {
     foreach ($variables['content'] as $key => $item) {
       $variables['content'][$key]['url'] = $item['url']->toString();
@@ -111,18 +111,19 @@ function seven_preprocess_admin_block_content(&$variables) {
 /**
  * Implements hook_preprocess_HOOK() for menu-local-action templates.
  */
-function seven_preprocess_menu_local_action(array &$variables) {
+function claro_preprocess_menu_local_action(array &$variables) {
   $variables['link']['#options']['attributes']['class'][] = 'button--primary';
   $variables['link']['#options']['attributes']['class'][] = 'button--small';
 
   // We require Modernizr's touch test for button styling.
   $variables['#attached']['library'][] = 'core/modernizr';
+  $variables['#attached']['library'][] = 'core/modernizr';
 }
 
 /**
  * Implements hook_element_info_alter().
  */
-function seven_element_info_alter(&$type) {
+function claro_element_info_alter(&$type) {
   // We require Modernizr for button styling.
   if (isset($type['button'])) {
     $type['button']['#attached']['library'][] = 'core/modernizr';
@@ -132,27 +133,27 @@ function seven_element_info_alter(&$type) {
 /**
  * Implements hook_preprocess_install_page().
  */
-function seven_preprocess_install_page(&$variables) {
-  // Seven has custom styling for the install page.
-  $variables['#attached']['library'][] = 'seven/install-page';
+function claro_preprocess_install_page(&$variables) {
+  // Claro has custom styling for the install page.
+  $variables['#attached']['library'][] = 'claro/install-page';
 }
 
 /**
  * Implements hook_preprocess_maintenance_page().
  */
-function seven_preprocess_maintenance_page(&$variables) {
-  // Seven has custom styling for the maintenance page.
-  $variables['#attached']['library'][] = 'seven/maintenance-page';
+function claro_preprocess_maintenance_page(&$variables) {
+  // Claro has custom styling for the maintenance page.
+  $variables['#attached']['library'][] = 'claro/maintenance-page';
 }
 
 /**
  * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\node\NodeForm.
  *
  * Changes vertical tabs to container.
  */
-function seven_form_node_form_alter(&$form, FormStateInterface $form_state) {
+function claro_form_node_form_alter(&$form, FormStateInterface $form_state) {
   $form['#theme'] = ['node_edit_form'];
-  $form['#attached']['library'][] = 'seven/node-form';
+  $form['#attached']['library'][] = 'claro/node-form';
 
   $form['advanced']['#type'] = 'container';
   $form['meta']['#type'] = 'container';
@@ -167,14 +168,14 @@ function seven_form_node_form_alter(&$form, FormStateInterface $form_state) {
 /**
  * Implements hook_form_BASE_FORM_ID_alter() for \Drupal\media\MediaForm.
  */
-function seven_form_media_form_alter(&$form, FormStateInterface $form_state) {
+function claro_form_media_form_alter(&$form, FormStateInterface $form_state) {
   // Only attach CSS from core if this form comes from Media core, and not from
   // the contrib Media Entity 1.x branch.
   if (\Drupal::moduleHandler()->moduleExists('media') && $form_state->getFormObject() instanceof MediaForm) {
     // @todo Revisit after https://www.drupal.org/node/2892304 is in. It
     // introduces a footer region to these forms which will allow for us to
     // display a top border over the published checkbox by defining a
     // media-edit-form.html.twig template the same way node does.
-    $form['#attached']['library'][] = 'seven/media-form';
+    $form['#attached']['library'][] = 'claro/media-form';
   }
 }

config/schema/claro.schema.yml

@@ -0,0 +1,5 @@
+# Schema for the configuration files of the Claro theme.
+
+claro.settings:
+  type: theme_settings
+  label: 'Claro settings'

css/base/typography.css

@@ -1,6 +1,6 @@
 /**
 * Reusable utility classes that apply vertical spacing consistency and in line
-* with the base line height of Seven.
+* with the base line height of Claro.
 */
 .leader {
   margin-top: 20px;

css/components/buttons.css

@@ -1,6 +1,6 @@
 /**
  * @file
- * Structural styles for Seven’s UI buttons
+ * Structural styles for Claro’s UI buttons
  *
  * Apply these classes to any element (<link>, <button>, <input>, etc.) that
  * should appear as a button.

css/components/details.css

@@ -4,24 +4,24 @@
  *
  * @see collapse.js
  */
-.seven-details {
+.claro-details {
   margin-top: 1em;
   margin-bottom: 1em;
   background-color: #fcfcfa;
   border: 1px solid #bfbfbf;
   border-radius: 3px;
 }
-.seven-details__summary {
+.claro-details__summary {
   cursor: pointer;
   text-shadow: 0 1px 0 white;
   color: #0074bd;
 }
-.seven-details__summary:hover,
-.seven-details__summary:focus,
-.seven-details[open] > .seven-details__summary {
+.claro-details__summary:hover,
+.claro-details__summary:focus,
+.claro-details[open] > .claro-details__summary {
   color: #004f80;
 }
-.seven-details__wrapper {
+.claro-details__wrapper {
   padding: 0 1.5em 1em 1.5em;
 }
 

css/components/dropbutton.component.css

@@ -32,7 +32,7 @@
 }
 
 /**
- * Overwrite Sevens button styling.
+ * Overwrite Claros button styling.
  */
 .js .dropbutton-widget .button {
   background: transparent;
@@ -159,7 +159,7 @@
 
 /**
  * Rare instances when a dropbutton is actually just a button.
- * Copied from Seven's buttons.css.
+ * Copied from Claro's buttons.css.
  */
 .dropbutton-single .dropbutton-widget {
   border: 0;