perf(button): recentralize shared styles in base

adobe · Feb 4, 2021 · 85d3d0a · 85d3d0a
1 parent 8917a5e
commit 85d3d0a
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 193 deletions.
diff --git a/packages/button/src/spectrum-button-base.css b/packages/button/src/spectrum-button-base.css
@@ -10,3 +10,98 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host {
+    /* .spectrum-Button,
+   * .spectrum-ClearButton,
+   * .spectrum-LogicButton */
+    position: relative;
+    display: inline-flex;
+    box-sizing: border-box;
+    align-items: center;
+    justify-content: center;
+    overflow: visible;
+    margin: 0;
+    border-style: solid;
+    text-transform: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-appearance: button;
+    vertical-align: top;
+    transition: background var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-out,
+        border-color var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-out,
+        color var(--spectrum-global-animation-duration-100, 0.13s) ease-out,
+        box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
+    text-decoration: none;
+    font-family: var(
+        --spectrum-alias-body-text-font-family,
+        var(--spectrum-global-font-family-base)
+    );
+    line-height: 1.3;
+    user-select: none;
+    -webkit-user-select: none;
+    touch-action: none;
+    cursor: pointer;
+}
+:host(:focus) {
+    /* .spectrum-Button:focus,
+   * .spectrum-ClearButton:focus,
+   * .spectrum-LogicButton:focus */
+    outline: none;
+}
+:host(::-moz-focus-inner) {
+    /* .spectrum-Button::-moz-focus-inner,
+   * .spectrum-ClearButton::-moz-focus-inner,
+   * .spectrum-LogicButton::-moz-focus-inner */
+    border: 0;
+    border-style: none;
+    padding: 0;
+    margin-top: -2px;
+    margin-bottom: -2px;
+}
+:host(:disabled) {
+    /* .spectrum-Button:disabled,
+   * .spectrum-ClearButton:disabled,
+   * .spectrum-LogicButton:disabled */
+    cursor: default;
+}
+:host:after {
+    /* .spectrum-Button:after,
+   * .spectrum-ClearButton:after,
+   * .spectrum-LogicButton:after */
+    border-radius: calc(
+        var(--spectrum-button-primary-border-radius) +
+            var(
+                --spectrum-alias-focus-ring-gap,
+                var(--spectrum-global-dimension-static-size-25)
+            )
+    );
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    margin: calc(
+        var(
+                --spectrum-alias-focus-ring-gap,
+                var(--spectrum-global-dimension-static-size-25)
+            ) * -1
+    );
+    transition: opacity var(--spectrum-global-animation-duration-100, 0.13s)
+            ease-out,
+        margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
+}
+:host(:focus-visible):after {
+    /* .spectrum-Button.focus-ring:after,
+   * .spectrum-ClearButton.focus-ring:after,
+   * .spectrum-LogicButton.focus-ring:after */
+    margin: calc(
+        var(
+                --spectrum-alias-focus-ring-gap,
+                var(--spectrum-global-dimension-static-size-25)
+            ) * -2
+    );
+}
diff --git a/packages/button/src/spectrum-button.css b/packages/button/src/spectrum-button.css
@@ -10,106 +10,11 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    /* .spectrum-Button,
-   * .spectrum-ClearButton,
-   * .spectrum-LogicButton */
-    position: relative;
-    display: inline-flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-    margin: 0;
-    border-style: solid;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-appearance: button;
-    vertical-align: top;
-    transition: background var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        border-color var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        color var(--spectrum-global-animation-duration-100, 0.13s) ease-out,
-        box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
-    text-decoration: none;
-    font-family: var(
-        --spectrum-alias-body-text-font-family,
-        var(--spectrum-global-font-family-base)
-    );
-    line-height: 1.3;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: none;
-    cursor: pointer;
-}
-:host(:focus) {
-    /* .spectrum-Button:focus,
-   * .spectrum-ClearButton:focus,
-   * .spectrum-LogicButton:focus */
-    outline: none;
-}
-:host(::-moz-focus-inner) {
-    /* .spectrum-Button::-moz-focus-inner,
-   * .spectrum-ClearButton::-moz-focus-inner,
-   * .spectrum-LogicButton::-moz-focus-inner */
-    border: 0;
-    border-style: none;
-    padding: 0;
-    margin-top: -2px;
-    margin-bottom: -2px;
-}
-:host(:disabled) {
-    /* .spectrum-Button:disabled,
-   * .spectrum-ClearButton:disabled,
-   * .spectrum-LogicButton:disabled */
-    cursor: default;
-}
 ::slotted([slot='icon']) {
     /* .spectrum-Button .spectrum-Icon */
     max-height: 100%;
     flex-shrink: 0;
 }
-:host:after {
-    /* .spectrum-Button:after,
-   * .spectrum-ClearButton:after,
-   * .spectrum-LogicButton:after */
-    border-radius: calc(
-        var(--spectrum-button-primary-border-radius) +
-            var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            )
-    );
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    margin: calc(
-        var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * -1
-    );
-    transition: opacity var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
-}
-:host(:focus-visible):after {
-    /* .spectrum-Button.focus-ring:after,
-   * .spectrum-ClearButton.focus-ring:after,
-   * .spectrum-LogicButton.focus-ring:after */
-    margin: calc(
-        var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * -2
-    );
-}
 #label {
     /* .spectrum-Button-label */
     align-self: center;

diff --git a/packages/button/src/spectrum-clear-button.css b/packages/button/src/spectrum-clear-button.css
@@ -10,101 +10,6 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 
 THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
-:host {
-    /* .spectrum-Button,
-   * .spectrum-ClearButton,
-   * .spectrum-LogicButton */
-    position: relative;
-    display: inline-flex;
-    box-sizing: border-box;
-    align-items: center;
-    justify-content: center;
-    overflow: visible;
-    margin: 0;
-    border-style: solid;
-    text-transform: none;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-appearance: button;
-    vertical-align: top;
-    transition: background var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        border-color var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        color var(--spectrum-global-animation-duration-100, 0.13s) ease-out,
-        box-shadow var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
-    text-decoration: none;
-    font-family: var(
-        --spectrum-alias-body-text-font-family,
-        var(--spectrum-global-font-family-base)
-    );
-    line-height: 1.3;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: none;
-    cursor: pointer;
-}
-:host(:focus) {
-    /* .spectrum-Button:focus,
-   * .spectrum-ClearButton:focus,
-   * .spectrum-LogicButton:focus */
-    outline: none;
-}
-:host(::-moz-focus-inner) {
-    /* .spectrum-Button::-moz-focus-inner,
-   * .spectrum-ClearButton::-moz-focus-inner,
-   * .spectrum-LogicButton::-moz-focus-inner */
-    border: 0;
-    border-style: none;
-    padding: 0;
-    margin-top: -2px;
-    margin-bottom: -2px;
-}
-:host(:disabled) {
-    /* .spectrum-Button:disabled,
-   * .spectrum-ClearButton:disabled,
-   * .spectrum-LogicButton:disabled */
-    cursor: default;
-}
-:host:after {
-    /* .spectrum-Button:after,
-   * .spectrum-ClearButton:after,
-   * .spectrum-LogicButton:after */
-    border-radius: calc(
-        var(--spectrum-button-primary-border-radius) +
-            var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            )
-    );
-    content: '';
-    display: block;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    margin: calc(
-        var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * -1
-    );
-    transition: opacity var(--spectrum-global-animation-duration-100, 0.13s)
-            ease-out,
-        margin var(--spectrum-global-animation-duration-100, 0.13s) ease-out;
-}
-:host(:focus-visible):after {
-    /* .spectrum-Button.focus-ring:after,
-   * .spectrum-ClearButton.focus-ring:after,
-   * .spectrum-LogicButton.focus-ring:after */
-    margin: calc(
-        var(
-                --spectrum-alias-focus-ring-gap,
-                var(--spectrum-global-dimension-static-size-25)
-            ) * -2
-    );
-}
 :host {
     /* .spectrum-ClearButton */
     background-color: var(

diff --git a/packages/button/src/spectrum-config.js b/packages/button/src/spectrum-config.js
@@ -25,7 +25,9 @@ const config = {
                 },
             ],
             exclude: [/\.spectrum-ClearButton/],
-            excludeSourceSelector: [/^(?!(.*),(.*),(.*),(.*),(.*))/],
+            excludeSourceSelector: [
+                /^(?!(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*))/,
+            ],
         },
         {
             name: 'button',
@@ -99,7 +101,9 @@ const config = {
                 },
             ],
             exclude: [/\.spectrum-ClearButton/],
-            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*)$/],
+            excludeSourceSelector: [
+                /^(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*)$/,
+            ],
         },
         {
             name: 'clear-button',
@@ -145,7 +149,9 @@ const config = {
                 },
             ],
             exclude: [/\.spectrum-Button/],
-            excludeSourceSelector: [/^(.*),(.*),(.*),(.*),(.*)$/],
+            excludeSourceSelector: [
+                /^(\.spectrum-Button.*),(\.spectrum-ClearButton.*),(\.spectrum-LogicButton.*)$/,
+            ],
         },
     ],
 };