Issue #3337534 by VladimirAus, jannakha: Switch theme to use starterkit and...

Issue #3337534 by VladimirAus, jannakha: Switch theme to use starterkit and stable9 instead of stable and classy

README.md

@@ -17,7 +17,7 @@ and recompile css!)
 * Bootstrap 4 configuration within admin user interface
 * Interface for creating subtheme
 * Can be used as is (subtheme is required for template overrides)
-* Drupal 7, 8 and 9 compatible
+* Drupal 7, 9 and 10 compatible
 
 ## SASS compilation:
 

bootstrap4.info.yml

 name: Bootstrap4
 type: theme
 description: 'Theme with Bootstrap 4 css library'
-core_version_requirement: ^10.0
-base theme: classy
-
-dependencies:
-  - classy:classy
-
-ckeditor_stylesheets:
-  - css/style.css
+core_version_requirement: ^9.4 || ^10
+'base theme': stable9
+starterkit: true
+generator: 'starterkit_theme:10.0.2'
 
 libraries:
+  - bootstrap4/base
+  - bootstrap4/messages
+  - core/normalize
   - bootstrap4/bootstrap4-js-latest
   - bootstrap4/global-styling
 
-libraries-override:
-  classy/base:
-    css:
-      component:
-        css/components/tabs.css: false
+libraries-extend:
+  user/drupal.user:
+    - bootstrap4/user
+  core/drupal.dropbutton:
+    - bootstrap4/dropbutton
+  core/drupal.dialog:
+    - bootstrap4/dialog
+  file/drupal.file:
+    - bootstrap4/file
+  core/drupal.progress:
+    - bootstrap4/progress
+
+ckeditor_stylesheets:
+  - css/style.css
 
 regions:
   header: Header

bootstrap4.install

-<?php
-
-/**
- * @file
- * Contains install and update functions for bootstrap4 theme.
- */
-
-/**
- * Updates Bootstrap library to the latest version unless none was selected.
- */
-function bootstrap4_update_8100() {
-  $config = \Drupal::configFactory()
-    ->getEditable('bootstrap4.settings');
-
-  $configValue = '4.3.1';
-  $configCdnVariable = 'b4_cdn_version_';
-  $configLibVariable = 'b4_lib_version_';
-  $configVariants = ['css', 'js'];
-
-  foreach ($configVariants as $configVariant) {
-    $config
-      ->set($configLibVariable . $configVariant, ($config->get($configCdnVariable . $configVariant) !== '0') ? $configValue : '0')
-      ->clear($configCdnVariable . $configVariant);
-  }
-
-  $config->save();
-}
-
-/**
- * Clear all config values and resave only relevant.
- */
-function bootstrap4_update_8101() {
-  $configValues = [
-    'b4_body_schema' => '',
-    'b4_body_bg_schema' => '',
-    'b4_navbar_schema' => 'dark',
-    'b4_navbar_bg_schema' => 'dark',
-    'b4_footer_schema' => 'dark',
-    'b4_footer_bg_schema' => 'secondary',
-    'b4_top_container' => 'container',
-  ];
-
-  $config = \Drupal::configFactory()
-    ->getEditable('bootstrap4.settings');
-
-  // Load existing values.
-  foreach ($configValues as $configIndex => $configValue) {
-    if ($newValue = $config->get($configIndex)) {
-      $configValues[$configIndex] = $newValue;
-    }
-  }
-
-  // Clear config.
-  $config->delete();
-
-  // Resave config.
-  foreach ($configValues as $configIndex => $configValue) {
-    $config->set($configIndex, $configValue);
-  }
-
-  $config->save(TRUE);
-}
-
-/**
- * Set subtheme configuration.
- */
-function bootstrap4_update_8102() {
-  \Drupal::configFactory()
-    ->getEditable('bootstrap4.settings')
-    ->set('subtheme_folder', 'themes/custom')
-    ->set('subtheme_name', '')
-    ->set('subtheme_machine_name', '')
-    ->save(TRUE);
-}
-
-/**
- * Adding Website container type configuration to configuration.
- */
-function bootstrap4_update_8103() {
-  \Drupal::configFactory()
-    ->getEditable('bootstrap4.settings')
-    ->set('b4_top_container_config', '')
-    ->save(TRUE);
-}
-
-/**
- * Update configuration: remove subtheme values.
- */
-function bootstrap4_update_8220() {
-  \Drupal::configFactory()
-    ->getEditable('bootstrap4.settings')
-    ->clear('subtheme_folder')
-    ->clear('subtheme_name')
-    ->clear('subtheme_machine_name')
-    ->save(TRUE);
-}

bootstrap4.libraries.yml

+base:
+  version: VERSION
+  css:
+    component:
+      css/components/action-links.css:
+        weight: -10
+      css/components/breadcrumb.css:
+        weight: -10
+      #      css/components/button.css:
+      #        weight: -10
+      css/components/container-inline.css:
+        weight: -10
+      css/components/details.css:
+        weight: -10
+      css/components/exposed-filters.css:
+        weight: -10
+      css/components/field.css:
+        weight: -10
+      css/components/form.css:
+        weight: -10
+      css/components/icons.css:
+        weight: -10
+      css/components/inline-form.css:
+        weight: -10
+      css/components/item-list.css:
+        weight: -10
+      #      css/components/link.css:
+      #        weight: -10
+      css/components/links.css:
+        weight: -10
+      css/components/menu.css:
+        weight: -10
+      css/components/more-link.css:
+        weight: -10
+      css/components/pager.css:
+        weight: -10
+      css/components/tabledrag.css:
+        weight: -10
+      css/components/tableselect.css:
+        weight: -10
+      css/components/tablesort.css:
+        weight: -10
+      #      css/components/tabs.css:
+      #        weight: -10
+      css/components/textarea.css:
+        weight: -10
+      css/components/ui-dialog.css:
+        weight: -10
+dialog:
+  version: VERSION
+  css:
+    component:
+      css/components/dialog.css:
+        weight: -10
+dropbutton:
+  version: VERSION
+  css:
+    component:
+      css/components/dropbutton.css:
+        weight: -10
+file:
+  version: VERSION
+  css:
+    component:
+      css/components/file.css:
+        weight: -10
+image-widget:
+  version: VERSION
+  css:
+    component:
+      css/components/image-widget.css: {  }
+indented:
+  version: VERSION
+  css:
+    component:
+      css/components/indented.css: {  }
+messages:
+  version: VERSION
+  css:
+    component:
+      css/components/messages.css:
+        weight: -10
+node:
+  version: VERSION
+  css:
+    component:
+      css/components/node.css:
+        weight: -10
+progress:
+  version: VERSION
+  css:
+    component:
+      css/components/progress.css:
+        weight: -10
+search-results:
+  version: VERSION
+  css:
+    component:
+      css/components/search-results.css: {  }
+user:
+  version: VERSION
+  css:
+    component:
+      css/components/user.css:
+        weight: -10
+
 bootstrap4-js-latest:
   version: 4.6.2
   js:

bootstrap4.post_update.php

+<?php
+
+/**
+ * @file
+ * Post update functions for Bootstrap 4.
+ */
+
+/**
+ * Enable new theme: stable9.
+ */
+function bootstrap4_post_update_install_stable9() {
+  // Remove classy and stable.
+  /** @var \Drupal\Core\Extension\ThemeInstallerInterface $theme_installer */
+  $theme_installer = \Drupal::service('theme_installer');
+  $theme_installer->install(['stable9']);
+}
+
+/**
+ * Uninstall old themes if present: stable and classy.
+ */
+function bootstrap4_post_update_uninstall_stable_classy() {
+  // Remove classy and stable.
+  /**@var \Drupal\Core\Extension\ThemeHandlerInterface $theme_handler */
+  $theme_handler = \Drupal::service('theme_handler');
+  /** @var \Drupal\Core\Extension\ThemeInstallerInterface $theme_installer */
+  $theme_installer = \Drupal::service('theme_installer');
+
+  foreach (['classy', 'stable'] as $theme) {
+    if ($theme_handler->themeExists($theme)) {
+      $theme_installer->uninstall([$theme]);
+    }
+  }
+}

bootstrap4.theme

@@ -271,7 +271,7 @@ function bootstrap4_form_system_theme_settings_subtheme_validate(array &$form, F
   }
   // Check for common theme names.
   if (in_array($form_state->getValue('subtheme_machine_name'), [
-    'bootstrap', 'bootstrap4', 'bootstrap5', 'claro', 'bartik', 'seven',
+    'bootstrap', 'bootstrap4', 'bootstrap5', 'claro', 'bartik', 'seven', 'stable', 'stable9',
   ])) {
     $form_state->setErrorByName('subtheme_machine_name', t('Subtheme name should not match existing themes.'));
   }

composer.json

@@ -6,9 +6,7 @@
   "license": "GPL-2.0-or-later",
   "homepage": "https://www.drupal.org/project/bootstrap4",
   "minimum-stability": "dev",
-  "require": {
-    "drupal/classy": "^1.0"
-  },
+  "require": { },
   "authors": [
     {
       "name": "Janna M (jannakha)",

config/schema/bootstrap4.schema.yml

-bootstrap5.settings:
+bootstrap4.settings:
   type: config_object
   label: 'Bootstrap 4 theme settings'
   mapping:

css/components/action-links.css

+/**
+ * @file
+ * Styles for link buttons and action links.
+ */
+
+.action-links {
+  margin: 1em 0;
+  padding: 0;
+  list-style: none;
+}
+[dir="rtl"] .action-links {
+  /* This is required to win over specificity of [dir="rtl"] ul */
+  margin-right: 0;
+}
+.action-links li {
+  display: inline-block;
+  margin: 0 0.3em;
+}
+.action-links li:first-child {
+  margin-left: 0; /* LTR */
+}
+[dir="rtl"] .action-links li:first-child {
+  margin-right: 0;
+  margin-left: 0.3em;
+}
+.button-action {
+  display: inline-block;
+  padding: 0.2em 0.5em 0.3em;
+  text-decoration: none;
+  line-height: 160%;
+}
+.button-action:before {
+  margin-left: -0.1em; /* LTR */
+  padding-right: 0.2em; /* LTR */
+  content: "+";
+  font-weight: 900;
+}
+[dir="rtl"] .button-action:before {
+  margin-right: -0.1em;
+  margin-left: 0;
+  padding-right: 0;
+  padding-left: 0.2em;
+}

css/components/breadcrumb.css

+/**
+ * @file
+ * Styles for breadcrumbs.
+ */
+
+.breadcrumb {
+  padding-bottom: 0.5em;
+}
+.breadcrumb ol {
+  margin: 0;
+  padding: 0;
+}
+[dir="rtl"] .breadcrumb ol {
+  /* This is required to win over specificity of [dir="rtl"] ol */
+  margin-right: 0;
+}
+.breadcrumb li {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  list-style-type: none;
+}
+/* IE8 does not support :not() and :last-child. */
+.breadcrumb li:before {
+  content: " \BB ";
+}
+.breadcrumb li:first-child:before {
+  content: none;
+}

css/components/button.css

+/**
+ * @file
+ * Visual styles for buttons.
+ */
+
+.button,
+.image-button {
+  margin-right: 1em;
+  margin-left: 1em;
+}
+.button:first-child,
+.image-button:first-child {
+  margin-right: 0;
+  margin-left: 0;
+}

css/components/container-inline.css

+/**
+ * @file
+ * Inline items.
+ */
+
+.container-inline label:after,
+.container-inline .label:after {
+  content: ":";
+}
+.form-type-radios .container-inline label:after,
+.form-type-checkboxes .container-inline label:after {
+  content: "";
+}
+.form-type-radios .container-inline .form-type-radio,
+.form-type-checkboxes .container-inline .form-type-checkbox {
+  margin: 0 1em;
+}
+.container-inline .form-actions,
+.container-inline.form-actions {
+  margin-top: 0;
+  margin-bottom: 0;
+}

css/components/details.css

+/**
+ * @file
+ * Collapsible details.
+ *
+ * @see collapse.js
+ * @see http://nicolasgallagher.com/css-background-image-hacks/
+ */
+
+details {
+  margin-top: 1em;
+  margin-bottom: 1em;
+  border: 1px solid #ccc;
+}
+details > .details-wrapper {
+  padding: 0.5em 1.5em;
+}
+/* @todo Regression: The summary of uncollapsible details are no longer
+     vertically aligned with the .details-wrapper in browsers without native
+     details support. */
+summary {
+  padding: 0.2em 0.5em;
+  cursor: pointer;
+}

css/components/dialog.css

+/**
+ * @file
+ * Presentational styles for Drupal dialogs.
+ */
+
+.ui-dialog {
+  position: absolute;
+  z-index: 1260;
+  overflow: visible;
+  padding: 0;
+  color: #000;
+  border: solid 1px #ccc;
+  background: #fff;
+}
+
+@media all and (max-width: 48em) { /* 768px */
+  .ui-dialog {
+    width: 92% !important;
+  }
+}
+.ui-dialog .ui-dialog-titlebar {
+  border-width: 0 0 1px 0;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 0;
+  background: #f3f4ee;
+  font-weight: bold;
+}
+.ui-dialog .ui-dialog-titlebar-close {
+  border: 0;
+  background: none;
+}
+.ui-dialog .ui-dialog-buttonpane {
+  margin-top: 0;
+  padding: 0.3em 1em;
+  border-width: 1px 0 0 0;
+  border-color: #ccc;
+  background: #f3f4ee;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog .ui-dialog-buttonpane .ui-button-text-only .ui-button-text {
+  padding: 0;
+}
+
+/* Form action buttons are moved in dialogs. Remove empty space. */
+.ui-dialog .ui-dialog-content .form-actions {
+  margin: 0;
+  padding: 0;
+}
+.ui-dialog .ajax-progress-throbber {
+  position: fixed;
+  z-index: 1000;
+  top: 48.5%;
+  /* Can't do center:50% middle: 50%, so approximate it for a typical window size. */
+  left: 49%;
+  width: 24px;
+  height: 24px;
+  padding: 4px;
+  opacity: 0.9;
+  border-radius: 7px;
+  background-color: #232323;
+  background-image: url(../../images/icons/loading-small.gif);
+  background-repeat: no-repeat;
+  background-position: center center;
+}
+.ui-dialog .ajax-progress-throbber .throbber,
+.ui-dialog .ajax-progress-throbber .message {
+  display: none;
+}

css/components/dropbutton.css

+/**
+ * @file
+ * General styles for dropbuttons.
+ */
+
+.js .dropbutton-widget {
+  border: 1px solid #ccc;
+  background-color: white;
+}
+.js .dropbutton-widget:hover {
+  border-color: #b8b8b8;
+}
+.dropbutton .dropbutton-action > * {
+  padding: 0.1em 0.5em;
+  white-space: nowrap;
+}
+.dropbutton .secondary-action {
+  border-top: 1px solid #e8e8e8;
+}
+.dropbutton-multiple .dropbutton {
+  border-right: 1px solid #e8e8e8; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple .dropbutton {
+  border-right: 0 none;
+  border-left: 1px solid #e8e8e8;
+}
+.dropbutton-multiple .dropbutton .dropbutton-action > * {
+  margin-right: 0.25em; /* LTR */
+}
+[dir="rtl"] .dropbutton-multiple .dropbutton .dropbutton-action > * {
+  margin-right: 0;
+  margin-left: 0.25em;
+}

css/components/exposed-filters.css

+/**
+ * @file
+ * Visual styles for exposed filters.
+ */
+
+.exposed-filters .filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .filters {
+  float: right;
+  margin-right: 0;
+  margin-left: 1em;
+}
+.exposed-filters .form-item {
+  margin: 0 0 0.1em 0;
+  padding: 0;
+}
+.exposed-filters .form-item label {
+  float: left; /* LTR */
+  width: 10em;
+  font-weight: normal;
+}
+[dir="rtl"] .exposed-filters .form-item label {
+  float: right;
+}
+.exposed-filters .form-select {
+  width: 14em;
+}
+/* Current filters */
+.exposed-filters .current-filters {
+  margin-bottom: 1em;
+}
+.exposed-filters .current-filters .placeholder {
+  font-weight: bold;
+  font-style: normal;
+}
+.exposed-filters .additional-filters {
+  float: left; /* LTR */
+  margin-right: 1em; /* LTR */
+}
+[dir="rtl"] .exposed-filters .additional-filters {
+  float: right;
+  margin-right: 0;
+  margin-left: 1em;
+}

css/components/field.css

+/**
+ * @file
+ * Visual styles for fields.
+ */
+
+.field__label {
+  font-weight: bold;
+}
+.field--label-inline .field__label,
+.field--label-inline .field__items {
+  float: left; /* LTR */
+}
+.field--label-inline .field__label,
+.field--label-inline > .field__item,
+.field--label-inline .field__items {
+  padding-right: 0.5em;
+}
+[dir="rtl"] .field--label-inline .field__label,
+[dir="rtl"] .field--label-inline .field__items {
+  padding-right: 0;
+  padding-left: 0.5em;
+}
+.field--label-inline .field__label::after {
+  content: ":";
+}

css/components/file.css

+/**
+ * @file
+ * Default style for file module.
+ */
+
+/* File icons. */
+
+.file {
+  display: inline-block;
+  min-height: 16px;
+  padding-left: 20px; /* LTR */
+  background-repeat: no-repeat;
+  background-position: left center; /* LTR */
+}
+[dir="rtl"] .file {
+  padding-right: 20px;
+  padding-left: inherit;
+  background-position: right center;
+}
+.file--general,
+.file--application-octet-stream {
+  background-image: url(../../images/icons/application-octet-stream.png);
+}
+.file--package-x-generic {
+  background-image: url(../../images/icons/package-x-generic.png);
+}
+.file--x-office-spreadsheet {
+  background-image: url(../../images/icons/x-office-spreadsheet.png);
+}
+.file--x-office-document {
+  background-image: url(../../images/icons/x-office-document.png);
+}
+.file--x-office-presentation {
+  background-image: url(../../images/icons/x-office-presentation.png);
+}
+.file--text-x-script {
+  background-image: url(../../images/icons/text-x-script.png);
+}
+.file--text-html {
+  background-image: url(../../images/icons/text-html.png);
+}
+.file--text-plain {
+  background-image: url(../../images/icons/text-plain.png);
+}
+.file--application-pdf {
+  background-image: url(../../images/icons/application-pdf.png);
+}
+.file--application-x-executable {
+  background-image: url(../../images/icons/application-x-executable.png);
+}
+.file--audio {
+  background-image: url(../../images/icons/audio-x-generic.png);
+}
+.file--video {
+  background-image: url(../../images/icons/video-x-generic.png);
+}
+.file--text {
+  background-image: url(../../images/icons/text-x-generic.png);
+}
+.file--image {
+  background-image: url(../../images/icons/image-x-generic.png);
+}

css/components/form.css

+/**
+ * @file
+ * Visual styles for form components.
+ */
+
+form .field-multiple-table {
+  margin: 0;
+}
+form .field-multiple-table .field-multiple-drag {
+  width: 30px;
+  padding-right: 0; /* LTR */
+}
+[dir="rtl"] form .field-multiple-table .field-multiple-drag {
+  padding-left: 0;
+}
+form .field-multiple-table .field-multiple-drag .tabledrag-handle {
+  padding-right: 0.5em; /* LTR */
+}
+[dir="rtl"] form .field-multiple-table .field-multiple-drag .tabledrag-handle {
+  padding-right: 0;
+  padding-left: 0.5em;
+}
+form .field-add-more-submit {
+  margin: 0.5em 0 0;
+}
+
+/**
+ * Markup generated by Form API.
+ */
+.form-item,
+.form-actions {
+  margin-top: 1em;
+  margin-bottom: 1em;
+}
+tr.odd .form-item,
+tr.even .form-item {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.form-composite > .fieldset-wrapper > .description,
+.form-item .description {
+  font-size: 0.85em;
+}
+label.option {
+  display: inline;
+  font-weight: normal;
+}
+.form-composite > legend,
+.label {
+  display: inline;
+  margin: 0;
+  padding: 0;
+  font-size: inherit;
+  font-weight: bold;
+}
+.form-checkboxes .form-item,
+.form-radios .form-item {
+  margin-top: 0.4em;
+  margin-bottom: 0.4em;
+}
+.form-type-radio .description,
+.form-type-checkbox .description {
+  margin-left: 2.4em; /* LTR */
+}
+[dir="rtl"] .form-type-radio .description,
+[dir="rtl"] .form-type-checkbox .description {
+  margin-right: 2.4em;
+  margin-left: 0;
+}
+.marker {
+  color: #e00;
+}
+.form-required:after {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin: 0 0.3em;
+  content: "";
+  vertical-align: super;
+  /* Use a background image to prevent screen readers from announcing the text. */
+  background-image: url(../../images/icons/required.svg);
+  background-repeat: no-repeat;
+  background-size: 6px 6px;
+}
+abbr.tabledrag-changed,
+abbr.ajax-changed {
+  border-bottom: none;
+}
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+  border: 2px solid red;
+}
+
+/* Inline error messages. */
+.form-item--error-message:before {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  content: "";
+  vertical-align: sub;
+  background: url(../../images/icons/error.svg) no-repeat;
+  background-size: contain;
+}

css/components/icons.css

+/**
+ * @file
+ * Visual styles for icons.
+ */
+
+.icon-help {
+  padding: 1px 0 1px 20px; /* LTR */
+  background: url(../../images/icons/help.png) 0 50% no-repeat; /* LTR */
+}
+[dir="rtl"] .icon-help {
+  padding: 1px 20px 1px 0;
+  background-position: 100% 50%;
+}
+.feed-icon {
+  display: block;
+  overflow: hidden;
+  width: 16px;
+  height: 16px;
+  text-indent: -9999px;
+  background: url(../../images/icons/feed.svg) no-repeat;
+}