Feat(web): Introduce Plain Button #DS-1454

packages/web/src/scss/components/Button/README.md

@@ -6,6 +6,7 @@ Variants:
 <button type="button" class="Button Button--primary Button--medium">Primary Button</button>
 <button type="button" class="Button Button--secondary Button--medium">Secondary Button</button>
 <button type="button" class="Button Button--tertiary Button--medium">Tertiary Button</button>
+<button type="button" class="Button Button--plain Button--medium">Plain Button</button>
 <button type="button" class="Button Button--success Button--medium">Success button</button>
 <button type="button" class="Button Button--informative Button--medium">Informative button</button>
 <button type="button" class="Button Button--warning Button--medium">Warning button</button>

packages/web/src/scss/components/Button/_Button.scss

@@ -41,9 +41,7 @@
         background-color: var(--#{tokens.$css-variable-prefix}button-background-color-state-active);
     }
 
-    &:disabled,
-    &.is-disabled,
-    &.Button--disabled {
+    &:is(:disabled, .is-disabled, .Button--disabled) {
         pointer-events: none;
         cursor: cursors.$disabled;
     }
@@ -72,14 +70,18 @@
     padding-inline: 0;
 }
 
-.Button:disabled:not(.Button--loading),
-.Button.is-disabled:not(.Button--loading),
-.Button.Button--disabled:not(.Button--loading) {
+.Button:is(:disabled, .is-disabled, .Button--disabled):not(.Button--loading) {
     color: theme.$disabled-color;
     border-color: theme.$disabled-border-color;
     background-color: theme.$disabled-background-color;
 }
 
+// We need to override the default disabled styles for plain buttons, because we want them to be still plain.
+.Button--plain:is(:disabled, .is-disabled, .Button--disabled):not(.Button--loading) {
+    border-color: transparent;
+    background-color: transparent;
+}
+
 .Button.Button--loading {
     position: relative;
     overflow: hidden; // 1.

packages/web/src/scss/components/Button/index.html

@@ -1,6 +1,6 @@
 {{#> web/layout/default title="Button" parentPageName="Components" }}
 
-{{setVar "colors" "primary" "secondary" "tertiary" "success" "informative" "warning" "danger" }}
+{{setVar "colors" "primary" "secondary" "tertiary" "plain" "success" "informative" "warning" "danger" }}
 {{setVar "sizes" "small" "medium" "large" }}
 
 <section class="UNSTABLE_Section">