css: make available cancel, delete & submit button via pk-button-* classes (#75933)

gadjo/static/css/_colors.scss

@@ -0,0 +1,44 @@
+// colors chart
+
+$blue: #386ede;
+$blue-dusty: #215D9C;
+$blue-dark: #003388;
+$cyan: #00d6eb;
+$orange: hsl(30, 100%, 46%);
+$red: hsl(355, 80%, 45%);
+$brown: hsl(10, 70%, 30%);
+$yellow-dark: hsl(60, 98%, 30%);
+$green: hsl(120, 57%, 35%);
+$green-dark: hsl(150, 57%, 25%);
+$pink: hsl(320, 70%, 60%);
+
+html {
+	--blue: #{$blue};
+	--blue-dusty: #{$blue-dusty};
+	--cyan: #{$cyan};
+	--orange: #{$orange};
+	--red: #{$red};
+	--brown: #{$brown};
+	--yellow-dark: #{$yellow-dark};
+	--green: #{$green};
+	--green-dark: #{$green-dark};
+	--pink: #{$pink};
+}
+
+// colors attribution
+
+$font-color: #3c3c33;
+$primary-color: $blue; 
+$secondary-color: $cyan;
+$link-color: $primary-color;
+
+html {
+	--primary-color: #{$primary-color};
+	--secondary-color: #{$secondary-color};
+	--font-color: #{$font-color};
+	--font-color-light: #666;
+	--link-color: #{$primary-color};
+	--link-hover-color: #{$blue-dark};
+	--link-disabled-color: #aaa;
+	--background: #ecf0f3;
+}

gadjo/static/css/_forms.scss

@@ -10,10 +10,7 @@ $widget-focus-color: $widget-color;
 $widget-focus-outline: 1px solid $primary-color;
 $widget-focus-outline-offset: 0;
 
-$button-color: $primary-color;
-$button-cancel-color: darken(grayscale($button-color), 10%);
-$button-delete-color: #CD2026;
-$button-submit-color: #215D9C;
+$button-delete-color: $red;
 $button-focus-outline: $widget-focus-outline !default;
 $button-focus-outline-offset: $widget-focus-outline-offset !default;
 
@@ -91,6 +88,11 @@ a.button {
 }
 
 %button {
+	--color: var(--primary-color);
+	--outline-color: var(--primary-color);
+	--hover-color: white;
+	--hover-background: var(--color);
+
 	display: inline-block;
 	padding: 5px 15px;
 	cursor: pointer;
@@ -101,12 +103,12 @@ a.button {
 	font-weight: bold;
 	background: white;
 	text-align: center;
-	border: 1px solid $button-color;
-	color: $button-color;
+	border: 1px solid var(--color);
+	color: var(--color);
 	&[aria-pressed=true], &:hover {
-		border-color: darken($button-color, 20%);
-		background: $button-color;
-		color: white;
+		border-color: hsla(0, 0%, 0%, 0.6);
+		background: var(--hover-background);
+		color: var(--hover-color);
 	}
 
 	&.disabled, &:disabled {
@@ -117,38 +119,34 @@ a.button {
 		border-color: #888;
 		pointer-events: none;
 	}
-	&:active { border-color: darken($button-color, 10%); }
+	&:active { border-color: hsla(0, 0%, 0%, 0.3); }
 	&:focus {
 		@if $button-focus-outline == none {
 			outline: 1px dotted $button-background;
 		} @else {
-			outline: $button-focus-outline;
+			outline: 1px solid var(--outline-color);
 			outline-offset: $button-focus-outline-offset;
 		}
 	}
 	transition: border-color 0.2s ease, box-shadow 0.2s linear;
 }
 
-a.button, a.pk-button, button, input[type=submit], div.buttons input, div.buttons a.cancel {
+a.button, a.pk-button, a[class*=pk-button], a.pk-big-button, a[class*="pk-big-button"], button, input[type=submit], div.buttons input, div.buttons a.cancel {
 	@extend %button;
 }
 
+a.pk-big-button, a[class*="pk-big-button"] {
+	padding: 2rem 4rem;
+}
+
 input[type=submit] {
 	height: 2.3rem;
 }
 
-a.cancel-button, button.cancel-button, div.buttons .cancel-button input, div.buttons a.cancel, div.buttons .cancel-button button {
-	color: $button-cancel-color;
-	border-color: $button-cancel-color;
-	&:hover {
-		background: #eee;
-		color: $button-cancel-color;
-		border-color: darken($button-cancel-color, 20%);
-	}
-	&:active { border-color: darken($button-cancel-color, 10%); }
-	&:focus {
-		outline-color: darken($button-cancel-color, 10%);
-	}
+a.cancel-button, button.cancel-button, a.pk-button-cancel, a.pk-big-button-cancel, div.buttons .cancel-button input, div.buttons a.cancel, div.buttons .cancel-button button {
+	--color: #727272;
+	--hover-color: var(--color);
+	--hover-background: #eee;
 }
 
 div.buttons {
@@ -166,29 +164,13 @@ div.buttons {
 	}
 }
 
-a.delete-button, button.delete-button, div.buttons .delete-button input, div.buttons .delete-button button {
-	color: $button-delete-color;
-	border-color: $button-delete-color;
-	&:hover {
-		background: $button-delete-color;
-		color: white;
-		border-color: darken($button-delete-color, 20%);
-	}
-	&:active { border-color: darken($button-delete-color, 10%); }
-	&:focus {
-		outline-color: darken($button-delete-color, 10%);
-	}
+a.delete-button, button.delete-button, a.pk-button-delete, a.pk-big-button-delete, div.buttons .delete-button input, div.buttons .delete-button button {
+	--color: #{$button-delete-color};
+	--outline-color: #{darken($button-delete-color, 10%)};
 }
 
-a.submit-button, button.submit-button, div.buttons .submit-button input, div.buttons .submit-button button {
-	color: $button-submit-color;
-	border-color: $button-submit-color;
-	&:hover {
-		color: white;
-		background: $button-submit-color;
-		border-color: darken($button-submit-color, 20%);
-	}
-	&:active { border-color: darken($button-submit-color, 10%); }
+a.submit-button, button.submit-button, a.pk-button-submit, a.pk-big-button-submit, div.buttons .submit-button input, div.buttons .submit-button button {
+	--color: var(--blue-dusty);
 }
 
 form.disabled-during-submit {
@@ -698,7 +680,7 @@ div.godo--editor {
 			border-bottom-right-radius: 3px;
 		}
 		&.active {
-			background: $button-color;
+			background: var(--color);
 			color: white;
 		}
 	}

gadjo/static/css/_portal.scss

@@ -49,12 +49,6 @@ div#portal-agent-content, aside#sidebar {
 				}
 			}
 		}
-		a.pk-button, a.pk-big-button {
-			@extend %button;
-		}
-		a.pk-big-button {
-			padding: 2rem 4rem;
-		}
 		&.pk-button, &.pk-big-button {  // when used on link cells
 			padding: 0;
 			a {

gadjo/static/css/gadjo.scss

@@ -2,8 +2,8 @@
 
 @import 'opensans';
 @import 'utils';
+@import 'colors';
 
-$font-color: #3c3c33;
 $mobile-limit: 760px;
 $font-family: "Open Sans", sans-serif;
 $sidepage-background: white;
@@ -15,16 +15,7 @@ $sidepage-border-width: 4px;
 
 $cell-border-radius: 3px;
 
-// blue
-$primary-color: #386ede; $secondary-color: #00d6eb;
 
-// red/orange
-//$primary-color: #ff375e; $secondary-color: #ff5a47;
-
-// purple
-//$primary-color: #6f2b92; $secondary-color: #e72588;
-
-$link-color: $primary-color;
 
 /* generalities */
 
@@ -41,9 +32,9 @@ html, body {
 	@media print {
 		font-size: 14px;
 	}
-	color: $font-color;
-	background: #ecf0f3;
-	background: linear-gradient(#ecf0f3, white);
+	color: var(--font-color);
+	background: var(--background);
+	background: linear-gradient(var(--background), white);
 }
 
 html {
@@ -56,20 +47,20 @@ body {
 }
 
 a {
-	color: $link-color;
+	color: var(--link-color);
 	text-decoration: none;
 	border-width: 0;
-	border-bottom: 1px dotted $link-color;
+	border-bottom: 1px dotted var(--link-color);
 	transition: color 200ms ease-out;
 	&:hover {
-		color: #003388;
+		color: var(--link-hover-color);
 		border-style: solid;
 	}
 	img {
 		border: 0;
 	}
 	&.disabled {
-		color: #aaa;
+		color: var();
 		border: none;
 		cursor: default;
 	}
@@ -131,7 +122,7 @@ ul.user-info {
 	top: 0px;
 	right: 0px;
 	z-index: 100;
-	background: $secondary-color;
+	background: var(--secondary-color);
 	li {
 		display: inline-block;
 		vertical-align: middle;
@@ -150,7 +141,7 @@ ul.user-info {
 		padding-left: 3em;
 	}
 	.ui-avatar {
-		color: $primary-color;
+		color: var(--primary-color);
 		vertical-align: middle;
 		font-size: $header-height * 0.35;
 		background: white;
@@ -209,7 +200,7 @@ ul.user-info {
 /* header */
 
 div#header {
-	background: $primary-color;
+	background: var(--primary-color);
 	padding-left: 0px;
 	position: relative;
 	height: $header-height;
@@ -476,7 +467,7 @@ div#main-content {
 		width: auto;
 		max-width: 100%;
 	}
-	color: #666;
+	color: var(--font-color-light);
 	position: relative;
 	#sidebar-toggle {
 		left: -10px;
@@ -604,13 +595,13 @@ ul.apps li a {
 	border: 1px solid #ccc;
 	text-decoration: none;
 	transition: all .2s ease-in-out;
-	color: $primary-color;
+	color: var(--primary-color);
 	border-radius: 15px;
 }
 
 ul.apps li a:hover {
 	border: 1px solid #333;
-	color: $primary-color;
+	color: var(--primary-color);
 	border-radius: 25px;
 }
 
@@ -728,7 +719,7 @@ p.paginator span {
 }
 
 p.paginator span.this-page {
-	background: $primary-color;
+	background: var(--primary-color);
 	border-color: #5B616B;
 	color: white;
 }
@@ -810,7 +801,7 @@ ul.objects-list li span.tag {
 	box-sizing: border-box;
 	border-radius: 1ex;
 	padding: 0 1ex;
-	background: $primary-color;
+	background: var(--primary-color);
 	color: white;
 }
 
@@ -831,13 +822,13 @@ span.meta {
 	position: relative;
 	padding: 0 0.5ex;
 	&.meta-success {
-		color: #268c26;
+		color: var(--green);
 	}
 	&.meta-warning {
-		color: #eb7500;
+		color: var(--orange);
 	}
 	&.meta-error {
-		color: #cf1726;
+		color: var(--red);
 	}
 	&.meta-disabled {
 		color: #555;
@@ -934,7 +925,7 @@ body {
 	position: absolute;
 	top: 50px;
 	right: $sidepage-width - $sidepage-left-space - 10px + $sidepage-border-width / 2;
-	background: $primary-color;
+	background: var(--primary-color);
 	color: white;
 	height: 20px;
 	width: 20px;
@@ -975,14 +966,14 @@ body.sidepage-expanded #sidepage span#applabel::before {
 	min-height: 100%;
 	min-height: calc(100% - #{$header-height} - 1px); /* #top 40px + border 1px */
 	box-sizing: border-box;
-	border-right: $sidepage-border-width solid $primary-color;
+	border-right: $sidepage-border-width solid var(--primary-color);
 	transition: all 0ms ease;
 	&::before {
 		content: "";
 		position: absolute;
 		left: -$sidepage-left-space;
 		width: $sidepage-left-space;
-		background: linear-gradient(to bottom, $primary-color 0%, $secondary-color 130vh);
+		background: linear-gradient(to bottom, var(--primary-color) 0%, var(--secondary-color) 130vh);
 		height: 100%;
 		top: 0px;
 	}
@@ -1003,7 +994,7 @@ body.sidepage-expanded #sidepage span#applabel::before {
 		white-space: nowrap;
 		text-overflow: ellipsis;
 		overflow: hidden;
-		color: $primary-color;
+		color: var(--link-color);
 	}
 }
 
@@ -1208,7 +1199,7 @@ $appicons: add, agendas, announces, bankcard, book, calendar, cards, categories,
 		}
 	}
 	&.highlight {
-		background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
+		background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
 		border-radius: $cell-border-radius;
 		padding: 1rem;
 		padding-bottom: 5px;
@@ -1250,7 +1241,7 @@ div.section {
 		margin-top: 0;
 		margin-bottom: 0;
 		background: $primary-color;
-		background: linear-gradient(to right, $primary-color 30%, $secondary-color 100%);
+		background: linear-gradient(to right, var(--primary-color) 30%, var(--secondary-color) 100%);
 		color: white;
 		a:not(.button) {
 			color: white;