SAK-46594 Lessons adjust subpage button colors for WCAG AA (sakaiproj…

…ect#10120)
botimer · Jan 10, 2022 · c2149b4 · c2149b4
1 parent 1fd3813
commit c2149b4
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 12 deletions.
diff --git a/library/src/morpheus-master/sass/modules/tool/lessonbuilder/_lessonbuilder.scss b/library/src/morpheus-master/sass/modules/tool/lessonbuilder/_lessonbuilder.scss
@@ -184,17 +184,16 @@
 	// Example usage 
 	//      @include sakaiLessonsLayoutColorScheme('--sakai-color-gray', 'lighter', 'gray');
 
-		$shade1: #{$color}--#{$lighterOrDarker}-4;
-		$shade2: #{$color}--#{$lighterOrDarker}-5;
-		$shade3: #{$color}--#{$lighterOrDarker}-3;
+		$shade1: #{$color}--#{$lighterOrDarker}-1;
+		$shade2: #{$color}--#{$lighterOrDarker}-2;
+		$shade3: #{$color};
 		$shade4: #{$color}--#{$lighterOrDarker}-7;
-		@if $lighterOrDarker == 'darker' {
-			$shade1: #{$color}--#{$lighterOrDarker}-3;
-			$shade2: #{$color}--#{$lighterOrDarker}-4;
-			$shade3: #{$color}--#{$lighterOrDarker}-2;
-			$shade4: #{$color}--#{$lighterOrDarker}-6;
+		@if $lighterOrDarker == "darker" {
+			$shade1: #{$color}--#{$lighterOrDarker}-4;
+			$shade2: #{$color}--#{$lighterOrDarker}-5;
+			$shade3: #{$color}--#{$lighterOrDarker}-3;
+			$shade4: #{$color}--#{$lighterOrDarker}-7;
 		}
-
 		.coln#{$name}, .coln#{$name}-trans {
 			background: var(--sakai-background-color-1);
 			border: 1px solid var($shade1);
@@ -242,8 +241,19 @@
 
 		.usebutton.n#{$name},
 		.usebutton.n#{$name}-trans {
-			background-color: var(#{$shade1}) !important;
-			color: white !important;
+			@extend .sakai-colorize#{$shade2};
+			border: 1px solid var(#{$shade2});
+
+			&:hover,
+			&:focus {
+			@extend .sakai-colorize#{$shade1};
+			border: 1px solid var(#{$shade1});
+			}
+
+			&:active {
+			@extend .sakai-colorize#{$shade3};
+			border: 1px solid var(#{$shade3});
+			}
 		}
 	}
 

diff --git a/library/src/morpheus-master/sass/themes/_base.scss b/library/src/morpheus-master/sass/themes/_base.scss
@@ -183,5 +183,5 @@ $theme-color-interval: 9 !default;
   @include defineColorHSL(--sakai-color-orange, 30, 93%, 44%);
   @include defineColorHSL(--sakai-color-purple, 240, 94%, 63%);
   @include defineColorHSL(--sakai-color-red, 357, 100%, 40%);
-  @include defineColorHSL(--sakai-lessons-navy, 211, 21%, 33%);
+  @include defineColorHSL(--sakai-lessons-navy, 214, 100%, 20%);
 }