Unverified Commit ce2f2b5f authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3257274 by andy-blum, mherchel, mglaman, xjm, alexpott, mgifford,... 

Issue #3257274 by andy-blum, mherchel, mglaman, xjm, alexpott, mgifford, shaal, benjifisher, tim.plunkett, AaronMcHale, Antoniya, worldlinemine, tmaiochi, rkoller, andregp, ckrina: Implement color changing theme settings for Olivero
parent 9018da4a

core/misc/cspell/dictionary.txt

+3 −0
Original line number Diff line number Diff line
@@ -458,6 +458,7 @@ fatals 
favourite

favstar

fcgi

fdiv

februar

fetchmode

fffffg
@@ -489,6 +490,7 @@ fixnull 
flickr

flipfit

floatingspace

fmod

foaf

foat

focusring
@@ -571,6 +573,7 @@ herpderp 
herro

heure

heures

hexcode

hidpi

hilfetestmodul

hilited

core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroColorTest.js

0 → 100644
+134 −0
Original line number Diff line number Diff line 
const selectors = {

  schemePicker: '[data-drupal-selector="edit-color-scheme"]',

  primaryColor: {

    text: 'input[type="text"][name="base_primary_color"]',

    color: 'input[type="color"][name="base_primary_color_visual"]',

  },

  submit: '[data-drupal-selector="edit-submit"]',

  siteHeader: '.site-header__initial',

};



const colorSchemes = {

  default: {

    base_primary_color: '#1b9ae4',

  },

  firehouse: {

    base_primary_color: '#a30f0f',

  },

  ice: {

    base_primary_color: '#57919e',

  },

  plum: {

    base_primary_color: '#7a4587',

  },

  slate: {

    base_primary_color: '#47625b',

  },

};



module.exports = {

  '@tags': ['core', 'olivero'],

  before(browser) {

    browser

      .drupalInstall({

        setupFile:

          'core/tests/Drupal/TestSite/TestSiteOliveroInstallTestScript.php',

        installProfile: 'minimal',

      })

      // Create user that can search.

      .drupalCreateUser({

        name: 'user',

        password: '123',

        permissions: ['administer themes', 'view the administration theme'],

      })

      .drupalLogin({ name: 'user', password: '123' });

  },

  after(browser) {

    browser.drupalUninstall();

  },

  'Olivero Settings - color schemes update individual values': (browser) => {

    browser

      .drupalRelativeURL('/admin/appearance/settings/olivero')

      .waitForElementVisible(selectors.schemePicker)

      .click(`${selectors.schemePicker} option[value="firehouse"]`)

      .assert.value(

        selectors.primaryColor.text,

        colorSchemes.firehouse.base_primary_color,

      )

      .assert.value(

        selectors.primaryColor.color,

        colorSchemes.firehouse.base_primary_color,

      )

      .click(`${selectors.schemePicker} option[value="ice"]`)

      .assert.value(

        selectors.primaryColor.text,

        colorSchemes.ice.base_primary_color,

      )

      .assert.value(

        selectors.primaryColor.color,

        colorSchemes.ice.base_primary_color,

      )

      .click(`${selectors.schemePicker} option[value="plum"]`)

      .assert.value(

        selectors.primaryColor.text,

        colorSchemes.plum.base_primary_color,

      )

      .assert.value(

        selectors.primaryColor.color,

        colorSchemes.plum.base_primary_color,

      )

      .click(`${selectors.schemePicker} option[value="slate"]`)

      .assert.value(

        selectors.primaryColor.text,

        colorSchemes.slate.base_primary_color,

      )

      .assert.value(

        selectors.primaryColor.color,

        colorSchemes.slate.base_primary_color,

      )

      .click(`${selectors.schemePicker} option[value="default"]`)

      .assert.value(

        selectors.primaryColor.text,

        colorSchemes.default.base_primary_color,

      )

      .assert.value(

        selectors.primaryColor.color,

        colorSchemes.default.base_primary_color,

      );

  },

  'Olivero Settings - color inputs stay synchronized': (browser) => {

    browser

      .drupalRelativeURL('/admin/appearance/settings/olivero')

      .waitForElementVisible(selectors.primaryColor.text)

      .waitForElementVisible(selectors.primaryColor.color)

      .updateValue(selectors.primaryColor.text, '#ff0000')

      .assert.value(selectors.primaryColor.color, '#ff0000')

      .updateValue(selectors.primaryColor.text, '#00ff00')

      .assert.value(selectors.primaryColor.color, '#00ff00')

      .updateValue(selectors.primaryColor.text, '#0000ff')

      .assert.value(selectors.primaryColor.color, '#0000ff');

  },

  'Olivero Settings - color selections impact olivero theme': (browser) => {

    browser

      .drupalRelativeURL('/admin/appearance/settings/olivero')

      .waitForElementVisible(selectors.primaryColor.color)

      .updateValue(selectors.primaryColor.text, '#ff0000') // hsl(0, 100%, 50%)

      .click(selectors.submit)

      .waitForElementVisible(selectors.primaryColor.color)

      .drupalRelativeURL('/')

      .waitForElementVisible(selectors.siteHeader)

      .expect.element(selectors.siteHeader)

      .to.have.css('backgroundColor', 'rgb(255, 0, 0)');



    browser

      .drupalRelativeURL('/admin/appearance/settings/olivero')

      .waitForElementVisible(selectors.primaryColor.color)

      .updateValue(selectors.primaryColor.text, '#7a4587') // hsl(0, 100%, 50%)

      .click(selectors.submit)

      .waitForElementVisible(selectors.primaryColor.color)

      .drupalRelativeURL('/')

      .waitForElementVisible(selectors.siteHeader)

      .expect.element(selectors.siteHeader)

      .to.have.css('backgroundColor', 'rgb(122, 69, 135)');

  },

};

core/themes/olivero/config/install/olivero.settings.yml

+1 −0
Original line number Diff line number Diff line
@@ -12,3 +12,4 @@ third_party_settings: 
    module_link: true

mobile_menu_all_widths: 0

site_branding_bg_color: default

base_primary_color: '#1b9ae4'

core/themes/olivero/config/schema/olivero.schema.yml

+5 −2
Original line number Diff line number Diff line
@@ -17,7 +17,10 @@ olivero.settings: 
              label: 'Module Link'

    mobile_menu_all_widths:

      type: integer

      label: "Mobile menu all widths"

      label: 'Mobile menu all widths'

    site_branding_bg_color:

      type: string

      label: "Site branding background color"
 
      label: 'Site branding background color'

    base_primary_color:

      type: color_hex

      label: 'Base Primary Color'

core/themes/olivero/css/base/variables.css

+5 −4
Original line number Diff line number Diff line
@@ -149,10 +149,11 @@ 
   */

  --color--primary-hue: 202;

  --color--primary-saturation: 79%;

  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), 32%);

  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), 38%); /* Blue dark */

  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), 50%); /* Blue medium */

  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), 62%); /* Blue bright */

  --color--primary-lightness: 50;

  --color--primary-30: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.36)));

  --color--primary-40: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) - var(--color--primary-lightness)*0.24))); /* Blue dark */

  --color--primary-50: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*var(--color--primary-lightness))); /* Blue medium */

  --color--primary-60: hsl(var(--color--primary-hue), var(--color--primary-saturation), calc(1%*(var(--color--primary-lightness) + 24 - var(--color--primary-lightness)*0.24))); /* Blue bright */



  /**

   * Named Colors.