css: introduce pk-button-(delete|submit|cancel) (#77725)

help/fr/misc-css-classes.page

@@ -154,9 +154,21 @@ de classes CSS réutilisables.
       <td><p><code>pk-big-button</code></p></td>
       <td><p>Applique une apparence de bouton de grande taille à un lien.</p></td>
     </tr>
+    <tr>
+      <td><p><code>pk-button-delete, pk-big-button-delete</code></p></td>
+      <td><p>Applique une apparence de bouton de type "supprimer" (si le style est défini pour votre thème)</p></td>
+    </tr>
+    <tr>
+      <td><p><code>pk-button-submit, pk-big-button-submit</code></p></td>
+      <td><p>Applique une apparence de bouton de type "valider" (si le style est défini pour votre thème)</p></td>
+    </tr>
+    <tr>
+      <td><p><code>pk-button-cancel, pk-big-button-cancel</code></p></td>
+      <td><p>Applique une apparence de bouton de type "annuler" (si le style est défini pour votre thème)</p></td>
+    </tr>
   </table>
 
-  <note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code>
+  <note><p>Les classes <code>pk-button</code> et <code>pk-big-button</code> listées ci-dessus
   peuvent également être appliquées aux cellules de type « Lien ».</p></note>
 </section>
 

static/includes/_forms.scss

@@ -24,7 +24,11 @@ $widget-focus-box-shadow: none !default;
 
 $button-focus-outline: $widget-focus-outline !default;
 $button-focus-outline-offset: $widget-focus-outline-offset !default;
-$cancel-button-style: "%button" !default; // "%button" || "%inverted-button" || .custom-selector
+
+// *-button-style : "%button" || "%inverted-button" || .custom-selector
+$cancel-button-style: "%button" !default; 
+$delete-button-style: "%button" !default; 
+$submit-button-style: "%button" !default; 
 
 $widget-custom-radio-checkbox: false !default;
 $widget-custom-radio-checkbox-color: $button-background !default;
@@ -182,9 +186,14 @@ div.buttons div {
 }
 
 %button {
-	background: $button-background;
+	--color: #{$button-color};
+	--background: #{$button-background};
+	--hover-color: #{$button-hover-color};
+	--hover-background: #{$button-hover-background};
+
+	background: var(--background);
 	text-align: center;
-	color: $button-color;
+	color: var(--color);
 	padding: $widget-padding;
 	cursor: pointer;
 	border: $button-border;
@@ -198,8 +207,8 @@ div.buttons div {
 
 	&[aria-pressed=true], &:hover {
 		box-shadow: 0px 0px 5px #777;
-		background: $button-hover-background;
-		color: $button-hover-color;
+		background: var(--hover-background);
+		color: var(--hover-color);
 	}
 
 	&:disabled {
@@ -238,6 +247,14 @@ div.buttons div {
 	@extend #{$cancel-button-style};
 }
 
+%delete-button {
+	@extend #{$delete-button-style};
+}
+
+%submit-button {
+	@extend #{$submit-button-style};
+}
+
 .fargo-pick-popup button,
 button.ui-button,
 a#a2-continue,
@@ -252,6 +269,11 @@ div.buttons .cancel-button button {
 	@extend %cancel-button;
 }
 
+.gru-content button.submit-button,
+div.buttons .submit-button button {
+	@extend %submit-button;
+}
+
 .gru-content form.disabled-during-submit {
 	// this class is added to forms in w.c.s. when a button is clicked.
 	div.buttons {

static/includes/_godo.scss

@@ -29,10 +29,14 @@
 	&--valid,
 	&--remove,
 	&--cancel {
-		@extend %button !optional;
 		margin-right: 0;
 	}
-	&--remove,
+	&--valid {
+		@extend %submit-button !optional;
+	}
+	&--remove {
+		@extend %delete-button !optional;
+	}
 	&--cancel {
 		@extend %cancel-button !optional;
 	}

static/includes/_library.scss

@@ -6,7 +6,8 @@
 
 @import 'table';
 
-.pk-button, .pk-big-button {
+.pk-button, .pk-big-button,
+[class*='pk-button-'], [class*='pk-big-button-'] {
 	@at-root #{selector-unify("a", &)},
 	&.link-cell ul > li > a
 	{
@@ -27,7 +28,25 @@
 		}
 	}
 }
-.pk-big-button {
+.pk-button-cancel, .pk-big-button-cancel {
+	@at-root #{selector-unify("a", &)},
+	&.link-cell ul > li > a {
+		@extend %cancel-button;
+	}
+}
+.pk-button-submit, .pk-big-button-submit {
+	@at-root #{selector-unify("a", &)},
+	&.link-cell ul > li > a {
+		@extend %submit-button;
+	}
+}
+.pk-button-delete, .pk-big-button-delete {
+	@at-root #{selector-unify("a", &)},
+	&.link-cell ul > li > a {
+		@extend %delete-button;
+	}
+}
+.pk-big-button, [class*='pk-big-button-'] {
 	@at-root #{selector-unify("a", &)},
 	&.link-cell ul > li > a {
 		padding: 2rem 4rem;

static/includes/wcs/_bulk.scss

@@ -815,6 +815,7 @@ div.section.foldable {
 		margin-bottom: 0.5rem;
 	}
 	.remove-button {
+		@extend %delete-button;
 		position: absolute;
 		display: flex;
 		align-items: center;