fix: add missing tokens for Button component (#1924)

openedx · Feb 17, 2023 · ba1211f · ba1211f
1 parent c19f5dd
commit ba1211f
Show file tree

Hide file tree

Showing 16 changed files with 1,896 additions and 372 deletions.
diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css
@@ -1,7 +1,7 @@
 /**
  * IMPORTANT: This file is the result of assembling design tokens
  * Do not edit directly
- * Generated on Tue, 31 Jan 2023 09:38:46 GMT
+ * Generated on Wed, 15 Feb 2023 14:44:39 GMT
  */
 
 .bg-dark {

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css
diff --git a/src/Button/Button.scss b/src/Button/Button.scss
diff --git a/src/Button/_mixins.scss b/src/Button/_mixins.scss
@@ -12,52 +12,3 @@
   // Manually declare to provide an override to the browser default
   @include border-radius($border-radius, 0);
 }
-
-// ------------------------
-// BELOW ARE EDX EXTENSIONS
-// ------------------------
-@mixin button-focus($ring-color) {
-  &.focus,
-  &:focus {
-    position: relative;
-    outline: 0;
-    box-shadow: none;
-
-    $distance: calc(#{$btn-focus-width} + #{$btn-focus-gap});
-    $distance-include-btn-border: calc(#{$distance} + #{$btn-border-width});
-
-    &::before {
-      content: "";
-      position: absolute;
-      top: calc(#{$distance-include-btn-border} * -1);
-      right: calc(#{$distance-include-btn-border} * -1);
-      bottom: calc(#{$distance-include-btn-border} * -1);
-      left: calc(#{$distance-include-btn-border} * -1);
-      border: solid $btn-focus-width $ring-color;
-      border-radius: calc(#{$btn-border-radius} + #{$distance});
-    }
-
-    &.btn-lg::before {
-      border-radius: calc(#{$btn-border-radius-lg} + #{$distance});
-    }
-
-    &.btn-sm::before {
-      border-radius: calc(#{$btn-border-radius-sm} + #{$distance});
-    }
-
-    &:active,
-    &.active {
-      &::before {
-        opacity: .75;
-      }
-    }
-
-    // Disabled buttons should not have focus rings
-    &:disabled,
-    &.disabled {
-      &::before {
-        display: none;
-      }
-    }
-  }
-}
diff --git a/src/Button/_variables.scss b/src/Button/_variables.scss
diff --git a/tokens/src/components/Button/brand.json b/tokens/src/components/Button/brand.json
@@ -16,11 +16,17 @@
       },
       "bg": {
         "brand": { "value": "{color.brand.base}", "type": "color", "source": "$btn-brand-bg" },
+        "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-bg" },
         "inverse-brand": {
           "value": "{color.btn.text.inverse-brand}",
           "type": "color",
           "source": "$btn-brand-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
+        },
+        "inverse-outline-brand": {
+          "value": "transparent",
+          "type": "color",
+          "source": "$btn-brand-inverse-outline-bg"
         }
       },
       "border": {
@@ -30,7 +36,8 @@
         },
         "inverse-outline-brand": {
           "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-outline-border-color"
-        }
+        },
+        "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-border-color" }
       },
       "hover": {
         "text": {
@@ -79,7 +86,8 @@
           },
           "inverse-outline-brand": {
             "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-hover-border-color"
-          }
+          },
+          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-hover-border-color" }
         }
       },
       "active": {
@@ -117,7 +125,8 @@
           },
           "inverse-outline-brand": {
             "value": "{color.theme.bg.brand}", "type": "color", "source": "$btn-brand-inverse-outline-active-bg"
-          }
+          },
+          "inverse-brand": { "value": "{color.gray.100}", "type": "color", "source": "$btn-brand-inverse-active-bg" }
         },
         "border": {
           "brand": {
@@ -128,26 +137,121 @@
             "type": "color",
             "source": "$btn-brand-outline-active-border-color"
           },
+          "inverse-brand": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-brand-inverse-active-border-color"
+          },
           "inverse-outline-brand": {
             "value": "transparent", "type": "color", "source": "$btn-brand-inverse-outline-active-border-color"
           }
         }
       },
       "focus": {
+        "text": {
+          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-focus-color" },
+          "inverse-brand": {
+            "value": "{color.btn.text.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-focus-color"
+          },
+          "outline-brand": {
+            "value": "{color.btn.text.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-focus-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "brand": {
-            "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
+            "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-focus-border-color"
           },
           "outline-brand": {
-            "value": "{color.theme.focus.brand}",
+            "value": "{color.btn.border.outline-brand}",
             "type": "color",
             "source": "$btn-brand-outline-focus-border-color"
           },
           "inverse-brand": {
             "value": "{color.white}", "type": "color", "source": "$btn-brand-inverse-focus-border-color"
           },
           "inverse-outline-brand": {
-            "value": "{color.white}", "type": "color",  "source": "$btn-brand-inverse-outline-focus-border-color"
+            "value": "{color.btn.border.inverse-outline-brand}", "type": "color",  "source": "$btn-brand-inverse-outline-focus-border-color"
+          }
+        },
+        "bg": {
+          "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-focus-bg" },
+          "inverse-brand": {
+            "value": "{color.btn.bg.inverse-brand}",
+            "source": "$btn-brand-inverse-focus-bg",
+            "type": "color"
+          },
+          "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-focus-bg" },
+          "inverse-outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "brand": { "value": "{color.theme.focus.brand}", "type": "color", "source": "$btn-brand-focus-outline-color" },
+          "outline-brand": {
+            "value": "{color.theme.focus.brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-focus-outline-color"
+          },
+          "inverse-brand": {
+            "value": "{color.btn.focus.border.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-focus-outline-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.focus.border.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "brand": { "value": "{color.btn.text.brand}", "type": "color", "source": "$btn-brand-disabled-color" },
+          "inverse-brand": { "value": "{color.brand.500}", "type": "color", "source": "$btn-brand-inverse-disabled-color" },
+          "outline-brand": {
+            "value": "{color.btn.hover.text.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-disabled-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "brand": { "value": "{color.btn.bg.brand}", "type": "color", "source": "$btn-brand-disabled-bg" },
+          "outline-brand": { "value": "inherit", "type": "color", "source": "$btn-brand-outline-disabled-bg" },
+          "inverse-brand": { "value": "transparent", "type": "color", "source": "$btn-brand-inverse-disabled-bg" },
+          "inverse-outline-brand": {
+            "value": "{color.btn.bg.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-bg"
+          }
+        },
+        "border": {
+          "brand": { "value": "{color.btn.border.brand}", "type": "color", "source": "$btn-brand-disabled-border-color" },
+          "outline-brand": {
+            "value": "{color.btn.border.outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-outline-disabled-border-color"
+          },
+          "inverse-brand": {
+            "value": "{color.btn.disabled.bg.inverse-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-disabled-border-color"
+          },
+          "inverse-outline-brand": {
+            "value": "{color.btn.text.inverse-outline-brand}",
+            "type": "color",
+            "source": "$btn-brand-inverse-outline-disabled-border-color"
           }
         }
       }

diff --git a/tokens/src/components/Button/danger.json b/tokens/src/components/Button/danger.json
@@ -20,18 +20,21 @@
       },
       "bg": {
         "danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-bg" },
+        "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-bg" },
         "inverse-danger": {
           "value": "{color.btn.text.inverse-danger}",
           "type": "color",
           "source": "$btn-danger-inverse-bg",
           "modify": [{ "type": "color-yiq" }]
-        }
+        },
+        "inverse-outline-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-bg" }
       },
       "border": {
         "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-border-color" },
         "outline-danger": {
           "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-outline-border-color"
         },
+        "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-border-color" },
         "inverse-outline-danger": {
           "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-border-color"
         }
@@ -81,6 +84,7 @@
           "outline-danger": {
             "value": "{color.danger.900}", "type": "color", "source": "$btn-danger-outline-hover-border-color"
           },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-hover-border-color" },
           "inverse-outline-danger": {
             "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-hover-border-color"
           }
@@ -119,6 +123,7 @@
           "outline-danger": {
             "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-outline-active-bg"
           },
+          "inverse-danger": { "value": "{color.gray.100}", "type": "color", "source": "$btn-danger-inverse-active-bg" },
           "inverse-outline-danger": {
             "value": "{color.theme.bg.danger}", "type": "color", "source": "$btn-danger-inverse-outline-active-bg"
           }
@@ -132,17 +137,36 @@
             "type": "color",
             "source": "$btn-danger-outline-active-border-color"
           },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-active-border-color" },
           "inverse-outline-danger": {
             "value": "transparent", "type": "color", "source": "$btn-danger-inverse-outline-active-border-color" }
         }
       },
       "focus": {
+        "text": {
+          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-focus-color" },
+          "inverse-danger": {
+            "value": "{color.btn.text.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-focus-color"
+          },
+          "outline-danger": {
+            "value": "{color.btn.text.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-focus-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.text.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-focus-color"
+          }
+        },
         "border": {
           "danger": {
-            "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
+            "value": "{color.btn.focus.bg.danger}", "type": "color", "source": "$btn-danger-focus-border-color"
           },
           "outline-danger": {
-            "value": "{color.theme.focus.danger}",
+            "value": "{color.btn.border.outline-danger}",
             "type": "color",
             "source": "$btn-danger-outline-focus-border-color"
           },
@@ -152,6 +176,70 @@
           "inverse-outline-danger": {
             "value": "{color.white}", "type": "color", "source": "$btn-danger-inverse-outline-focus-border-color"
           }
+        },
+        "bg": {
+          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-focus-bg" },
+          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-focus-bg" },
+          "inverse-danger": { "value": "{color.btn.bg.inverse-danger}", "type": "color", "source": "$btn-danger-inverse-focus-bg" },
+          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-focus-bg" }
+        },
+        "outline": {
+          "danger": { "value": "{color.theme.focus.danger}", "type": "color", "source": "$btn-danger-focus-outline-color" },
+          "outline-danger": {
+            "value": "{color.theme.focus.danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-focus-outline-color"
+          },
+          "inverse-danger": {
+            "value": "{color.btn.focus.border.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-focus-outline-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.focus.border.inverse-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-focus-outline-color"
+          }
+        }
+      },
+      "disabled": {
+        "text": {
+          "danger": { "value": "{color.btn.text.danger}", "type": "color", "source": "$btn-danger-disabled-color" },
+          "outline-danger": {
+            "value": "{color.btn.hover.text.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-disabled-color"
+          },
+          "inverse-danger": { "value": "{color.danger.base}", "type": "color", "source": "$btn-danger-inverse-disabled-color" },
+          "inverse-outline-danger": {
+            "value": "{color.btn.text.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-disabled-color"
+          }
+        },
+        "bg": {
+          "danger": { "value": "{color.btn.bg.danger}", "type": "color", "source": "$btn-danger-disabled-bg" },
+          "outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-outline-disabled-bg" },
+          "inverse-danger": { "value": "transparent", "type": "color", "source": "$btn-danger-inverse-disabled-bg" },
+          "inverse-outline-danger": { "value": "inherit", "type": "color", "source": "$btn-danger-inverse-outline-disabled-bg" }
+        },
+        "border": {
+          "danger": { "value": "{color.btn.border.danger}", "type": "color", "source": "$btn-danger-disabled-border-color" },
+          "outline-danger": {
+            "value": "{color.btn.border.outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-outline-disabled-border-color"
+          },
+          "inverse-danger": {
+            "value": "transparent",
+            "type": "color",
+            "source": "$btn-danger-inverse-disabled-border-color"
+          },
+          "inverse-outline-danger": {
+            "value": "{color.btn.border.inverse-outline-danger}",
+            "type": "color",
+            "source": "$btn-danger-inverse-outline-disabled-border-color"
+          }
         }
       }
     }