@patternfly/elements 4.0.2 → 4.2.0

package/pf-button/pf-button-tokens.css

@@ -1,39 +1,75 @@
 :host {
+	/** PaddingTop for the button */
 	--pf-c-button--PaddingTop: var(--pf-global--spacer--form-element, 0.375rem);
+	/** PaddingRight for the button */
 	--pf-c-button--PaddingRight: var(--pf-global--spacer--md, 1rem);
+	/** PaddingBottom for the button */
 	--pf-c-button--PaddingBottom: var(--pf-global--spacer--form-element, 0.375rem);
+	/** PaddingLeft for the button */
 	--pf-c-button--PaddingLeft: var(--pf-global--spacer--md, 1rem);
+	/** LineHeight for the button */
 	--pf-c-button--LineHeight: var(--pf-global--LineHeight--md, 1.5);
+	/** FontWeight for the button */
 	--pf-c-button--FontWeight: var(--pf-global--FontWeight--normal, 400);
+	/** FontSize for the button */
 	--pf-c-button--FontSize: var(--pf-global--FontSize--md, 1rem);
+	/** BackgroundColor for the button */
 	--pf-c-button--BackgroundColor: transparent;
+	/** BorderRadius for the button */
 	--pf-c-button--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** BorderRadius for the button after element */
 	--pf-c-button--after--BorderRadius: var(--pf-global--BorderRadius--sm, 3px);
+	/** BorderColor for the button after element */
 	--pf-c-button--after--BorderColor: transparent;
+	/** BorderWidth for the button after element */
 	--pf-c-button--after--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
+	/** BorderWidth for the button after element on hover */
 	--pf-c-button--hover--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** BorderWidth for the button after element on focus */
 	--pf-c-button--focus--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** BorderWidth for the button after element when active */
 	--pf-c-button--active--after--BorderWidth: var(--pf-global--BorderWidth--md, 2px);
+	/** Color for the button when disabled */
 	--pf-c-button--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
+	/** BackgroundColor for the button when disabled */
 	--pf-c-button--disabled--BackgroundColor: var(--pf-global--disabled-color--200, #d2d2d2);
+	/** BorderColor for the button after element when disabled */
 	--pf-c-button--disabled--after--BorderColor: transparent;
+	/** BackgroundColor for the primary button variant */
 	--pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the primary button variant */
 	--pf-c-button--m-primary--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant on hover */
 	--pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant on hover */
 	--pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant on focus */
 	--pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant on focus */
 	--pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the primary button variant when active */
 	--pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200, #004080);
+	/** Color for the primary button variant when active */
 	--pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100, #fff);
+	/** BackgroundColor for the secondary button variant */
 	--pf-c-button--m-secondary--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element */
 	--pf-c-button--m-secondary--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant */
 	--pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant on hover */
 	--pf-c-button--m-secondary--hover--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element on hover */
 	--pf-c-button--m-secondary--hover--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant on hover */
 	--pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant on focus */
 	--pf-c-button--m-secondary--focus--BackgroundColor: transparent;
+	/** BorderColor for the secondary button variant after element on focus */
 	--pf-c-button--m-secondary--focus--after--BorderColor: var(--pf-global--primary-color--100, #06c);
+	/** Color for the secondary button variant on focus */
 	--pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100, #06c);
+	/** BackgroundColor for the secondary button variant when active */
 	--pf-c-button--m-secondary--active--BackgroundColor: transparent;
 	--pf-c-button--m-secondary--active--after--BorderColor: var(--pf-global--primary-color--100, #06c);
 	--pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100, #06c);
@@ -168,6 +204,8 @@
 	--pf-c-button--m-primary__c-badge--BorderColor: var(--pf-global--BorderColor--300, #f0f0f0);
 	--pf-c-button--m-primary__c-badge--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
 
+  /** Internal button color property */
   --_button-color: var(--pf-c-button--m-primary--Color);
+  /** Internal button background color property */
   --_button-background-color: var(--pf-c-button--m-primary--BackgroundColor);
 }

package/pf-button/pf-button.d.ts

@@ -10,112 +10,7 @@ export type ButtonVariant = ('primary' | 'secondary' | 'tertiary' | 'control' |
  * new location, like another page inside of a web application, or an external site
  * such as help or documentation..
  * @summary Allows users to perform an action when triggered
- * @cssprop {<length>} [--pf-c-button--FontSize=1rem]
- * @cssprop            [--pf-c-button--FontWeight=400]
- * @cssprop {<number>} [--pf-c-button--LineHeight=1.5]
- * @cssprop {<length>} [--pf-c-button--PaddingTop=0.375rem]
- * @cssprop {<length>} [--pf-c-button--PaddingLeft=1rem]
- * @cssprop {<length>} [--pf-c-button--PaddingBottom=0.375rem]
- * @cssprop {<length>} [--pf-c-button--PaddingRight=1rem]
- * @cssprop {<length>|<percentage>} [--pf-c-button--BorderRadius=3px]
- * @cssprop {<color>}  [--pf-c-button--after--BorderColor=transparent]
- * @cssprop {<length>} [--pf-c-button--after--BorderRadius=3px]
- * @cssprop {<length>} [--pf-c-button--after--BorderWidth=1px]
- * @cssprop {<length>} [--pf-c-button--active--after--BorderWidth=2px]
- * @cssprop {<length>} [--pf-c-button--hover--after--BorderWidth=2px]
- * @cssprop {<length>} [--pf-c-button--focus--after--BorderWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-primary--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--BackgroundColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-primary--active--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--active--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-primary--focus--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--focus--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-primary--hover--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-primary--hover--BackgroundColor=#004080]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--active--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--focus--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--Color=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--hover--BorderColor=#06c]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--active--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--focus--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-tertiary--hover--BorderColor=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-danger--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--BackgroundColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-danger--active--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--active--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-danger--focus--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--focus--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-danger--hover--Color=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-danger--hover--BackgroundColor=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--Color=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--active--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--focus--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--Color=#a30000]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-secondary--m-danger--hover--BorderColor=#c9190b]
- * @cssprop {<color>}  [--pf-c-button--m-control--disabled--BackgroundColor=#f0f0f0]
- * @cssprop {<length>} [--pf-c-button--m-control--BorderRadius=0]
- * @cssprop {<length>} [--pf-c-button--m-control--after--BorderWidth=1px]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderTopColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderRightColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderBottomColor=#8a8d90]
- * @cssprop {<color>}  [--pf-c-button--m-control--after--BorderLeftColor=#f0f0f0]
- * @cssprop {<color>}  [--pf-c-button--m-control--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--active--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--active--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--focus--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--focus--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--BackgroundColor=#fff]
- * @cssprop {<color>}  [--pf-c-button--m-control--hover--BorderBottomColor=#06c]
- * @cssprop {<length>} [--pf-c-button--m-control--hover--after--BorderBottomWidth=2px]
- * @cssprop {<color>}  [--pf-c-button--disabled--Color=#6a6e73]
- * @cssprop {<color>}  [--pf-c-button--disabled--BackgroundColor=#d2d2d2]
- * @cssprop {<color>}  [--pf-c-button--disabled--after--BorderColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-warning--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--BackgroundColor=#f0ab00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--active--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--focus--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-warning--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-warning--hover--BackgroundColor=#c58c00]
- * @cssprop {<color>}  [--pf-c-button--m-plain--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--Color=#6a6e73]
- * @cssprop {<color>}  [--pf-c-button--m-plain--hover--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--hover--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--focus--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--focus--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--active--BackgroundColor=transparent]
- * @cssprop {<color>}  [--pf-c-button--m-plain--active--Color=#151515]
- * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--Color=#d2d2d2]
- * @cssprop {<color>}  [--pf-c-button--m-plain--disabled--BackgroundColor=transparent]
+ * @alias Button
  * @attr {string} [loading-label='loading'] - ARIA label for the loading indicator
  */
 export declare class PfButton extends LitElement {