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

Issue #3217926 by mherchel, andy-blum, jwitkowski79: Olivero: Rename and... 

Issue #3217926 by mherchel, andy-blum, jwitkowski79: Olivero: Rename and consolidate all color CSS variable names
parent f3b24d25

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

+5 −5
Changes for core/themes/olivero/css/base/base.css: 5 added lines, 5 removed lines.
Original line number Diff line number Diff line
@@ -39,8 +39,8 @@ html { 


body {

  margin: 0;

  color: var(--color--gray-10);

  background-color: var(--color--gray-95);

  color: var(--color--gray-20);

  background-color: var(--color--gray-100);

  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='50' height='84' viewBox='0 0 50 84'%3e  %3cpath opacity='0.05' fill='%230e6ba6' d='M25,61.7C25,68.5,19.4,74,12.5,74S0,68.5,0,61.7c0-5.7,3.9-9.6,7.4-12.9c2.3-2.2,4.5-4.4,5.1-6.8c0.7,2.4,2.8,4.6,5.1,6.8C21.1,52.2,25,56,25,61.7z M42.6,6.8c-2.3-2.2-4.5-4.4-5.1-6.8c-0.7,2.4-2.9,4.6-5.1,6.8C28.9,10.2,25,14,25,19.7C25,26.5,30.6,32,37.5,32S50,26.5,50,19.7C50,14,46.1,10.2,42.6,6.8z'/%3e%3c/svg%3e");

  background-position: top left /* LTR */

}
@@ -56,11 +56,11 @@ body.is-fixed { 
}



a {

  color: var(--color--blue-20)

  color: var(--color--primary-40)

}



a:hover {

    color: var(--color--blue-50);

    color: var(--color--primary-50);

  }



a:focus {
@@ -148,7 +148,7 @@ h5, 
h6 {

  margin-top: var(--sp);

  margin-bottom: var(--sp);

  color: var(--color--gray-0);

  color: var(--color--gray-5);

  font-family: var(--font-sans);

  font-weight: bold

}

core/themes/olivero/css/base/base.pcss.css

+5 −5
Changes for core/themes/olivero/css/base/base.pcss.css: 5 added lines, 5 removed lines.
Original line number Diff line number Diff line
@@ -21,8 +21,8 @@ html { 


body {

  margin: 0;

  color: var(--color--gray-10);

  background-color: var(--color--gray-95);

  color: var(--color--gray-20);

  background-color: var(--color--gray-100);

  background-image: url("../../images/background.svg");

  background-position: top left; /* LTR */
@@ -38,10 +38,10 @@ body { 
}



a {

  color: var(--color--blue-20);

  color: var(--color--primary-40);



  &:hover {

    color: var(--color--blue-50);

    color: var(--color--primary-50);

  }



  &:focus {
@@ -120,7 +120,7 @@ h4, 
h5,

h6 {

  margin-block: var(--sp);

  color: var(--color--gray-0);

  color: var(--color--gray-5);

  font-family: var(--font-sans);

  font-weight: bold;

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

+21 −25
Changes for core/themes/olivero/css/base/variables.css: 21 added lines, 25 removed lines.
Original line number Diff line number Diff line
@@ -126,37 +126,33 @@ 


  /**

   * Gray colors.

   *

   * Color number roughly corresponds to its luminosity.

   */

  --color--gray-hue: 201;

  --color--gray-saturation: 15%;

  --color--gray-0: hsl(var(--color--gray-hue), var(--color--gray-saturation), 6%); /* Black 1 */

  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%);

  --color--gray-8: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);

  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */

  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Black 3 */

  --color--gray-25: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */

  --color--gray-28: hsl(var(--color--gray-hue), var(--color--gray-saturation), 55%); /* Gray Dark 2 */

  --color--gray-30: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */

  --color--gray-40: hsl(var(--color--gray-hue), var(--color--gray-saturation), 66%); /* Gray medium 1 */

  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */

  --color--gray-50: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */

  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */

  --color--gray-75: hsl(var(--color--gray-hue), var(--color--gray-saturation), 89%);

  --color--gray-80: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */

  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 96%);

  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */

  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */

  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);

  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */

  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */

  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */

  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */

  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */

  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */

  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */

  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */



  /**

   * Blue colors.

   * Primary colors.

   *

   * Color number roughly corresponds to its luminosity.

   */

  --color--blue-hue: 202;

  --color--blue-saturation: 79%;

  --color--blue-10: hsl(var(--color--blue-hue), var(--color--blue-saturation), 32%);

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

  --color--blue-30: hsl(var(--color--blue-hue), var(--color--blue-saturation), 50%); /* Blue dark 2 */

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

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

  --color--blue-90: hsl(var(--color--blue-hue), var(--color--blue-saturation), 93%); /* Blue bright 5 */

  --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 */



  /**

   * Named Colors.

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

+21 −25
Changes for core/themes/olivero/css/base/variables.pcss.css: 21 added lines, 25 removed lines.
Original line number Diff line number Diff line
@@ -87,37 +87,33 @@ 


  /**

   * Gray colors.

   *

   * Color number roughly corresponds to its luminosity.

   */

  --color--gray-hue: 201;

  --color--gray-saturation: 15%;

  --color--gray-0: hsl(var(--color--gray-hue), var(--color--gray-saturation), 6%); /* Black 1 */

  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%);

  --color--gray-8: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);

  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */

  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Black 3 */

  --color--gray-25: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */

  --color--gray-28: hsl(var(--color--gray-hue), var(--color--gray-saturation), 55%); /* Gray Dark 2 */

  --color--gray-30: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */

  --color--gray-40: hsl(var(--color--gray-hue), var(--color--gray-saturation), 66%); /* Gray medium 1 */

  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */

  --color--gray-50: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */

  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */

  --color--gray-75: hsl(var(--color--gray-hue), var(--color--gray-saturation), 89%);

  --color--gray-80: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */

  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 96%);

  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */

  --color--gray-5: hsl(var(--color--gray-hue), var(--color--gray-saturation), 5%); /* Black */

  --color--gray-10: hsl(var(--color--gray-hue), var(--color--gray-saturation), 11%);

  --color--gray-20: hsl(var(--color--gray-hue), var(--color--gray-saturation), 20%); /* Black 2 */

  --color--gray-45: hsl(var(--color--gray-hue), var(--color--gray-saturation), 44%); /* Gray Dark */

  --color--gray-60: hsl(var(--color--gray-hue), var(--color--gray-saturation), 57%); /* Gray medium */

  --color--gray-65: hsl(var(--color--gray-hue), var(--color--gray-saturation), 63%); /* Black 4 */

  --color--gray-70: hsl(var(--color--gray-hue), var(--color--gray-saturation), 72%); /* Gray medium 2 */

  --color--gray-90: hsl(var(--color--gray-hue), var(--color--gray-saturation), 88%); /* Gray light */

  --color--gray-95: hsl(var(--color--gray-hue), var(--color--gray-saturation), 93%); /* Gray light 1 */

  --color--gray-100: hsl(var(--color--gray-hue), var(--color--gray-saturation), 97%); /* Gray light 2 */



  /**

   * Blue colors.

   * Primary colors.

   *

   * Color number roughly corresponds to its luminosity.

   */

  --color--blue-hue: 202;

  --color--blue-saturation: 79%;

  --color--blue-10: hsl(var(--color--blue-hue), var(--color--blue-saturation), 32%);

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

  --color--blue-30: hsl(var(--color--blue-hue), var(--color--blue-saturation), 50%); /* Blue dark 2 */

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

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

  --color--blue-90: hsl(var(--color--blue-hue), var(--color--blue-saturation), 93%); /* Blue bright 5 */

  --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 */



  /**

   * Named Colors.

core/themes/olivero/css/components/action-links.css

+1 −1
Changes for core/themes/olivero/css/components/action-links.css: 1 added line, 1 removed line.
Original line number Diff line number Diff line
@@ -51,7 +51,7 @@ 
    display: inline-block

  }

.action-links li a {

      color: var(--color--blue-20);

      color: var(--color--primary-40);

    }

.action-links-item {

  display: inline-block;