@indico-data/design-system 2.0.3 → 2.1.2

package/lib/index.d.ts

@@ -7,7 +7,6 @@ import { PermafrostComponent, IconName as IconName$1 } from '@/types';
 import { AriaButtonProps } from '@react-types/button';
 import { AriaRadioProps, RadioGroupProps as RadioGroupProps$1, AriaRadioGroupProps } from '@react-types/radio';
 import { DateRange } from 'react-day-picker';
-import * as styled_components_dist_types from 'styled-components/dist/types';
 import { ContainerProps, RowProps, ColProps } from 'react-grid-system';
 
 declare const GlobalStyles: () => react_jsx_runtime.JSX.Element;
@@ -445,25 +444,25 @@ declare const allColors: {
     readonly backgroundColor: "#182432";
 };
 
-type Props$s = PermafrostComponent & {
+type Props$q = PermafrostComponent & {
     content: React__default.ReactNode;
     header?: React__default.ReactNode | string;
     open?: boolean;
 };
-declare const Accordion: (props: Props$s) => react_jsx_runtime.JSX.Element;
+declare const Accordion: (props: Props$q) => react_jsx_runtime.JSX.Element;
 
-type Props$r = PermafrostComponent & {
+type Props$p = PermafrostComponent & {
     style?: object;
     children: React__default.ReactNode;
 };
-declare const Section: (props: Props$r) => react_jsx_runtime.JSX.Element;
+declare const Section: (props: Props$p) => react_jsx_runtime.JSX.Element;
 
-type Props$q = PermafrostComponent & {
+type Props$o = PermafrostComponent & {
     title?: string;
     style?: object;
     children: React__default.ReactNode;
 };
-declare const SectionBlock: (props: Props$q) => react_jsx_runtime.JSX.Element;
+declare const SectionBlock: (props: Props$o) => react_jsx_runtime.JSX.Element;
 
 type SectionBodyProps = PermafrostComponent & {
     style?: object;
@@ -471,12 +470,12 @@ type SectionBodyProps = PermafrostComponent & {
 };
 declare const SectionBody: (props: SectionBodyProps) => react_jsx_runtime.JSX.Element;
 
-type Props$p = PermafrostComponent & {
+type Props$n = PermafrostComponent & {
     style?: object;
     children?: React__default.ReactNode;
 };
 declare const SectionHeader: {
-    (props: Props$p): react_jsx_runtime.JSX.Element;
+    (props: Props$n): react_jsx_runtime.JSX.Element;
     defaultProps: {
         className: string;
         style: {};
@@ -508,7 +507,7 @@ declare function Button$1(props: ButtonProps$1): React__default.ReactElement;
 type IconButtonVariant = 'default' | 'primary' | 'destructive' | 'outline';
 type ButtonSize = 'normal' | 'large';
 
-type Props$o = PermafrostComponent & {
+type Props$m = PermafrostComponent & {
     /**
      * Adjusts vertical alignment of the text label, in relation to the icon
      */
@@ -534,9 +533,9 @@ type Props$o = PermafrostComponent & {
  *
  * @see {@link https://react-spectrum.adobe.com/blog/building-a-button-part-1.html}
  */
-declare function IconButton(props: Props$o): react_jsx_runtime.JSX.Element;
+declare function IconButton(props: Props$m): react_jsx_runtime.JSX.Element;
 
-type Props$n = PermafrostComponent & {
+type Props$l = PermafrostComponent & {
     defaultValue?: string;
     disabled?: boolean;
     horizontal?: boolean;
@@ -551,7 +550,7 @@ type Props$n = PermafrostComponent & {
     value?: string | number;
     validationErrors?: string[];
 };
-declare const BorderSelect: (props: Props$n) => react_jsx_runtime.JSX.Element;
+declare const BorderSelect: (props: Props$l) => react_jsx_runtime.JSX.Element;
 
 type ComboboxProps = {
     'aria-label'?: string;
@@ -599,7 +598,7 @@ type ComboboxOption = {
 type ComboboxSize = 'small' | 'medium';
 type ComboboxVariant = 'default' | 'light';
 
-type Props$m = PermafrostComponent & {
+type Props$k = PermafrostComponent & {
     disabled?: boolean;
     initialText?: string;
     options: {
@@ -613,7 +612,7 @@ type Props$m = PermafrostComponent & {
     onChange(e: React__default.ChangeEvent<HTMLSelectElement>): void;
     onClick?(e: React__default.MouseEvent<HTMLDivElement, MouseEvent>): void;
 };
-declare const Select: (props: Props$m) => react_jsx_runtime.JSX.Element;
+declare const Select: (props: Props$k) => react_jsx_runtime.JSX.Element;
 
 /**
  * Multiselect combobox component. If selections are not bound to outside state
@@ -654,7 +653,7 @@ declare const SingleCombobox: React__default.ForwardRefExoticComponent<Permafros
     onChange: (selectedOption: ComboboxOption) => void;
 } & React__default.RefAttributes<unknown>>;
 
-type Props$l = PermafrostComponent & {
+type Props$j = PermafrostComponent & {
     ariaLabel?: string;
     fill?: string;
     name: IconName$1;
@@ -667,9 +666,9 @@ type Props$l = PermafrostComponent & {
  * Generic icon component, hidden from Assistive Technology by default.
  * If icon should be available to AT, pass the desired name into the `ariaLabel` prop.
  */
-declare function Icon({ style, ...props }: Props$l): React__default.ReactElement | null;
+declare function Icon({ style, ...props }: Props$j): React__default.ReactElement | null;
 
-type Props$k = PermafrostComponent & {
+type Props$i = PermafrostComponent & {
     children: React__default.ReactNode | string;
     minLength?: number;
     onUpdate?(newValue: string): void;
@@ -678,9 +677,9 @@ type Props$k = PermafrostComponent & {
  * Wrapper component which enables text editing in place directly on a child component,
  * element, or plain text.
  */
-declare function EditableInput(props: Props$k): react_jsx_runtime.JSX.Element;
+declare function EditableInput(props: Props$i): react_jsx_runtime.JSX.Element;
 
-type Props$j = PermafrostComponent & {
+type Props$h = PermafrostComponent & {
     autoFocus?: boolean;
     decrement?(): void;
     disabled?: boolean;
@@ -700,9 +699,9 @@ type Props$j = PermafrostComponent & {
  * Basic numeric input field. A label is required, but may be visually hidden
  * using the `hiddenLabel` property.
  */
-declare function NumberInput(props: Props$j): React__default.ReactElement;
+declare function NumberInput(props: Props$h): React__default.ReactElement;
 
-type Props$i = PermafrostComponent & {
+type Props$g = PermafrostComponent & {
     inputBorder?: boolean;
     showClearInputIcon?: boolean;
     showSearchIcon?: boolean;
@@ -716,13 +715,13 @@ type Props$i = PermafrostComponent & {
     value?: string;
 };
 declare const SearchInput: {
-    (props: Props$i): react_jsx_runtime.JSX.Element;
+    (props: Props$g): react_jsx_runtime.JSX.Element;
     defaultProps: {
         className: string;
     };
 };
 
-type Props$h = PermafrostComponent & {
+type Props$f = PermafrostComponent & {
     autoComplete?: 'email' | 'current-password' | 'new-password' | string;
     autoFocus?: boolean;
     defaultValue?: string;
@@ -743,9 +742,9 @@ type Props$h = PermafrostComponent & {
     value?: string;
     readOnly?: boolean;
 };
-declare function TextInput(props: Props$h): React__default.ReactElement;
+declare function TextInput(props: Props$f): React__default.ReactElement;
 
-type Props$g = {
+type Props$e = {
     ['aria-label']: string;
     children?: React__default.ReactNode;
     hideFocusRing: boolean;
@@ -761,7 +760,7 @@ type Props$g = {
  * A group label must be included: either pass a string or markup into the
  * `label` prop, or include an `aria-label` or `aria-labelledby` attribute.
  */
-declare function RadioGroup$1({ children, ...props }: Props$g): react_jsx_runtime.JSX.Element;
+declare function RadioGroup$1({ children, ...props }: Props$e): react_jsx_runtime.JSX.Element;
 /**
  * A single radio button and its label.
  */
@@ -790,7 +789,7 @@ declare function Radio(props: AriaRadioProps & {
     isVisuallySelected?: (selectedValue: string) => void;
 }): react_jsx_runtime.JSX.Element;
 
-type Props$f = PermafrostComponent & {
+type Props$d = PermafrostComponent & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -802,9 +801,9 @@ type Props$f = PermafrostComponent & {
     selected?: Date | undefined;
     value: Date | undefined;
 };
-declare const DatePicker: (props: Props$f) => react_jsx_runtime.JSX.Element;
+declare const DatePicker: (props: Props$d) => react_jsx_runtime.JSX.Element;
 
-type Props$e = PermafrostComponent & {
+type Props$c = PermafrostComponent & {
     ariaLabel?: string;
     disableBeforeDate?: Date;
     disableAfterDate?: Date;
@@ -821,9 +820,9 @@ type Props$e = PermafrostComponent & {
     isOpen?: boolean;
     clearOnClose?: boolean;
 };
-declare const NoInputDatePicker: (props: Props$e) => react_jsx_runtime.JSX.Element;
+declare const NoInputDatePicker: (props: Props$c) => react_jsx_runtime.JSX.Element;
 
-type Props$d = PermafrostComponent & {
+type Props$b = PermafrostComponent & {
     ariaLabel?: string;
     size?: string;
     style?: {
@@ -831,24 +830,24 @@ type Props$d = PermafrostComponent & {
     };
     fill?: string;
 };
-declare function CircleSpinner(props: Props$d): React__default.ReactElement;
+declare function CircleSpinner(props: Props$b): React__default.ReactElement;
 
-type Props$c = PermafrostComponent & {
+type Props$a = PermafrostComponent & {
     width?: string;
 };
-declare function BarSpinner(props: Props$c): React__default.ReactElement;
+declare function BarSpinner(props: Props$a): React__default.ReactElement;
 
-type Props$b = PermafrostComponent & {
+type Props$9 = PermafrostComponent & {
     color?: string;
     overallSize?: string | number;
     rippleSize?: string | number;
     showRandomMessage?: boolean;
 };
-declare function CirclePulse(props: Props$b): React__default.ReactElement;
+declare function CirclePulse(props: Props$9): React__default.ReactElement;
 
 declare const RandomLoadingMessage: () => react_jsx_runtime.JSX.Element;
 
-type Props$a = PermafrostComponent & {
+type Props$8 = PermafrostComponent & {
     backgroundColor?: string;
     foregroundColor?: string;
     ringRadius?: number;
@@ -857,11 +856,11 @@ type Props$a = PermafrostComponent & {
     value: number;
     valueFontSize?: number;
 };
-declare function PercentageRing(props: Props$a): react_jsx_runtime.JSX.Element;
+declare function PercentageRing(props: Props$8): react_jsx_runtime.JSX.Element;
 
 declare const LoadingList: () => react_jsx_runtime.JSX.Element;
 
-type Props$9 = PermafrostComponent & {
+type Props$7 = PermafrostComponent & {
     accordion?: boolean;
     accordionDefaultOpen?: boolean;
     emptyListMessage?: string;
@@ -898,9 +897,9 @@ type Props$9 = PermafrostComponent & {
     title: string;
     totalCount?: number;
 };
-declare const ListTable: (props: Props$9) => react_jsx_runtime.JSX.Element;
+declare const ListTable: (props: Props$7) => react_jsx_runtime.JSX.Element;
 
-type Props$8 = PermafrostComponent & {
+type Props$6 = PermafrostComponent & {
     currentPage: number;
     limit: number;
     pageInfo: {
@@ -915,9 +914,9 @@ type Props$8 = PermafrostComponent & {
     getNextPage(cursor: number): void;
     getPreviousPage(cursor: number): void;
 };
-declare function Pagination(props: Props$8): react_jsx_runtime.JSX.Element;
+declare function Pagination(props: Props$6): react_jsx_runtime.JSX.Element;
 
-type Props$7 = PermafrostComponent & {
+type Props$5 = PermafrostComponent & {
     actionLink?: string;
     actionText?: string;
     buttonAction?(): void;
@@ -927,7 +926,7 @@ type Props$7 = PermafrostComponent & {
         'data-cy': string;
     };
 };
-declare function Shrug(props: Props$7): React__default.ReactElement;
+declare function Shrug(props: Props$5): React__default.ReactElement;
 
 type ModalBaseProps = PermafrostComponent & {
     children: React__default.ReactNode | React__default.ReactNode[];
@@ -955,7 +954,7 @@ type ModalBaseProps = PermafrostComponent & {
  */
 declare function ModalBase(props: ModalBaseProps): react_jsx_runtime.JSX.Element;
 
-type Props$6 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
+type Props$4 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
     describedBy?: string;
     clickOutsideHandler(e?: React__default.SyntheticEvent): void;
     confirmText?: string;
@@ -967,9 +966,9 @@ type Props$6 = PermafrostComponent & Pick<ModalBaseProps, 'open'> & {
     title?: string | React__default.ReactNode;
     width?: number;
 };
-declare function ConfirmModal(props: Props$6): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal(props: Props$4): react_jsx_runtime.JSX.Element;
 
-type Props$5 = {
+type Props$3 = {
     children: React__default.ReactNode | React__default.ReactNode[];
     className?: string;
     isLoading?: boolean;
@@ -981,113 +980,7 @@ type Props$5 = {
  *
  * todo: this is an extremely simple version of this component; as I get more familiar with LoadingIndicator use cases, this will be refactored. - jm 9/1/2020
  */
-declare function LoadingAwareContainer(props: Props$5): React__default.ReactElement;
-
-type CancelText$1 = {
-    confirmText: string;
-    message?: string;
-    rejectText: string;
-    title: string;
-};
-type Props$4 = PermafrostComponent & {
-    children: React__default.ReactNode;
-    /**
-     * text for the cancel confirmation modal
-     */
-    confirmCancel: CancelText$1;
-    disableNextStep?: boolean;
-    disablePrevStep?: boolean;
-    disableSubmit?: boolean;
-    isLastStep?: boolean;
-    /**
-     * for testing/mocking purposes
-     */
-    startingStep?: string;
-    steps: string[];
-    /**
-     * the text to appear on the submit button
-     */
-    submitButtonLabel: string;
-    /**
-     * Puts button in "busy" mode, and replaces button label with this text
-     */
-    submitProcessing?: string;
-    wizardTitle: string;
-    onCancel?(): void;
-    onNextPress?(): boolean;
-    /**
-     * returns the current step name to the parent component
-     */
-    onStepChange(stepName: string): void;
-    onSubmit(): void;
-    /**
-     * Allows for any custom attribute to be added directly to "next button" in wizard
-     */
-    nextButtonProps?: {
-        'data-cy': string;
-    };
-};
-declare function Wizard(props: Props$4): react_jsx_runtime.JSX.Element;
-
-declare const StyledWizard: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-declare const WizardCard: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-declare const WizardSection: styled_components.IStyledComponent<"web", styled_components_dist_types.FastOmit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-
-type CancelText = {
-    confirmText: string;
-    message?: string;
-    rejectText: string;
-    title: string;
-};
-type Props$3 = PermafrostComponent & {
-    children: React__default.ReactNode;
-    /**
-     * text for the cancel confirmation modal
-     */
-    confirmCancel: CancelText;
-    disableNextStep?: boolean;
-    disablePrevStep?: boolean;
-    disableSubmit?: boolean;
-    isLastStep?: boolean;
-    /**
-     * for testing/mocking purposes
-     */
-    startingStep?: string;
-    stepSchema: {
-        [key: string]: {
-            inputsRequiringValidation: string[];
-            description: string[];
-        };
-    };
-    /**
-     * the text to appear on the submit button
-     */
-    submitButtonLabel: string;
-    /**
-     * Puts button in "busy" mode, and replaces button label with this text
-     */
-    submitProcessing?: string;
-    wizardTitle: string;
-    onCancel?(): void;
-    onNextPress?(): boolean;
-    /**
-     * returns the current step name to the parent component
-     */
-    onStepChange(stepName: string): void;
-    onSubmit(): void;
-    /**
-     * Allows for any custom attribute to be added directly to "next button" in wizard
-     */
-    nextButtonProps?: {
-        'data-cy': string;
-    };
-    bottomNav?: boolean;
-    validationErrors?: any;
-    backgroundColor?: string;
-    color?: string;
-    buttonColor?: string;
-};
-declare function WizardWithSidebar(props: Props$3): react_jsx_runtime.JSX.Element;
+declare function LoadingAwareContainer(props: Props$3): React__default.ReactElement;
 
 type ListItem = {
     id: string;
@@ -1479,4 +1372,4 @@ interface ButtonProps {
 
 declare const Button: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, StyledWizard, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Tooltip, Wizard, WizardCard, WizardSection, WizardWithSidebar, color_d as colorUtils, faIcons, indicons, number_d as numberUtils, string_d as stringUtils };
+export { animation as ANIMATION, Radio as AbstractRadio, RadioGroup as AbstractRadioGroup, Accordion, breakpoints as BREAKPOINT, BarSpinner, BorderSelect, Button, allColors as COLORS, CirclePulse, CircleSpinner, Col, ConfirmModal, Container, DatePicker, Drawer, EditableInput, GlobalStyles, Icon, IconButton, Button$1 as LegacyButton, ListTable, LoadingAwareContainer, LoadingList, margin as MARGINS, MATH, mediaQueries as MEDIA_QUERIES, ModalBase, MultiCombobox, NoInputDatePicker, NumberInput, padding as PADDINGS, Pagination, PercentageRing, Radio$1 as Radio, RadioGroup$1 as RadioGroup, RandomLoadingMessage, Row, spacings as SPACING, SearchInput, Section, SectionBlock, SectionBody, SectionHeader, SectionTable, Select, Shrug, SingleCombobox, typography as TYPOGRAPHY, TextInput, TextTruncate, Toggle, Tooltip, color_d as colorUtils, faIcons, indicons, number_d as numberUtils, string_d as stringUtils };

package/lib/index.esm.css

@@ -96,66 +96,66 @@
 }
 
 :root [data-theme=dark] {
-  --pf-primary-color: #27374D;
-  --pf-primary-color-100: #E2E4E8;
-  --pf-primary-color-200: #B6BAC1;
-  --pf-primary-color-300: #898F9A;
-  --pf-primary-color-400: #5D6573;
-  --pf-primary-color-500: #27374D;
-  --pf-primary-color-600: #202C3A;
-  --pf-primary-color-700: #192228;
-  --pf-primary-color-800: #131816;
-  --pf-primary-color-900: #0D0E0E;
-  --pf-secondary-color: #526D82;
-  --pf-secondary-color-100: #E6E9EB;
-  --pf-secondary-color-200: #C0C7CD;
-  --pf-secondary-color-300: #99A5AF;
-  --pf-secondary-color-400: #738491;
-  --pf-secondary-color-500: #526D82;
-  --pf-secondary-color-600: #3F5866;
-  --pf-secondary-color-700: #2C434A;
-  --pf-secondary-color-800: #1A2E2E;
-  --pf-secondary-color-900: #071919;
-  --pf-gray-color: #DDE6ED;
-  --pf-gray-color-100: #F7F9FA;
-  --pf-gray-color-200: #EAF2F5;
-  --pf-gray-color-300: #DDE6ED;
-  --pf-gray-color-400: #D1DAE5;
-  --pf-gray-color-500: #C4CFDD;
-  --pf-gray-color-600: #B7C3D5;
-  --pf-gray-color-700: #AAB8CD;
-  --pf-gray-color-800: #9DACB5;
-  --pf-gray-color-900: #90A19D;
-  --pf-green-color: #82DD55;
-  --pf-green-color-100: #F0FFF2;
-  --pf-green-color-200: #E1FFD5;
-  --pf-green-color-300: #D2FFB8;
-  --pf-green-color-400: #C3FF9B;
-  --pf-green-color-500: #82DD55;
-  --pf-green-color-600: #6FC94A;
-  --pf-green-color-700: #5CB53F;
-  --pf-green-color-800: #4AA134;
-  --pf-green-color-900: #388D29;
-  --pf-orange-color: #EDB95E;
-  --pf-orange-color-100: #FFF7E6;
-  --pf-orange-color-200: #FFEDCC;
-  --pf-orange-color-300: #FFE4B2;
-  --pf-orange-color-400: #FFDA99;
-  --pf-orange-color-500: #EDB95E;
-  --pf-orange-color-600: #DAA54D;
-  --pf-orange-color-700: #C7913D;
-  --pf-orange-color-800: #B47D2D;
-  --pf-orange-color-900: #A1691D;
-  --pf-red-color: #E23636;
-  --pf-red-color-100: #FDECEC;
-  --pf-red-color-200: #FBD1D1;
-  --pf-red-color-300: #F9B6B6;
-  --pf-red-color-400: #F79B9B;
-  --pf-red-color-500: #E23636;
-  --pf-red-color-600: #C72F2F;
-  --pf-red-color-700: #AC2828;
-  --pf-red-color-800: #912121;
-  --pf-red-color-900: #761A1A;
+  --pf-primary-color: #262c3a;
+  --pf-primary-color-100: #8194c0;
+  --pf-primary-color-200: #5b6b8f;
+  --pf-primary-color-300: #3b455e;
+  --pf-primary-color-400: #323a4d;
+  --pf-primary-color-500: #262c3a;
+  --pf-primary-color-600: #1f2431;
+  --pf-primary-color-700: #1c2632;
+  --pf-primary-color-800: #1b202c;
+  --pf-primary-color-900: #141b24;
+  --pf-secondary-color: #0070f5;
+  --pf-secondary-color-100: #dceafd;
+  --pf-secondary-color-200: #b3d4fc;
+  --pf-secondary-color-300: #7ab5fa;
+  --pf-secondary-color-400: #4797f5;
+  --pf-secondary-color-500: #0070f5;
+  --pf-secondary-color-600: #0067e1;
+  --pf-secondary-color-700: #005ac4;
+  --pf-secondary-color-800: #004eac;
+  --pf-secondary-color-900: #004393;
+  --pf-gray-color: #bfc1c3;
+  --pf-gray-color-100: #efefef;
+  --pf-gray-color-200: #eaeaea;
+  --pf-gray-color-300: #dcdcdc;
+  --pf-gray-color-400: #d2d2d2;
+  --pf-gray-color-500: #bfc1c3;
+  --pf-gray-color-600: #a0a0a0;
+  --pf-gray-color-700: #828588;
+  --pf-gray-color-800: #797979;
+  --pf-gray-color-900: #585858;
+  --pf-green-color: #199d19;
+  --pf-green-color-100: #98ff98;
+  --pf-green-color-200: #76ff76;
+  --pf-green-color-300: #63eb63;
+  --pf-green-color-400: #41ca41;
+  --pf-green-color-500: #199d19;
+  --pf-green-color-600: #168116;
+  --pf-green-color-700: #106710;
+  --pf-green-color-800: #0d5a0d;
+  --pf-green-color-900: #0a500a;
+  --pf-orange-color: #da9534;
+  --pf-orange-color-100: #ffd599;
+  --pf-orange-color-200: #ffc676;
+  --pf-orange-color-300: #f7b75b;
+  --pf-orange-color-400: #f1ab48;
+  --pf-orange-color-500: #da9534;
+  --pf-orange-color-600: #c7892f;
+  --pf-orange-color-700: #a87428;
+  --pf-orange-color-800: #825b22;
+  --pf-orange-color-900: #68481a;
+  --pf-red-color: #f44d4f;
+  --pf-red-color-100: #ffa9aa;
+  --pf-red-color-200: #ff8a8b;
+  --pf-red-color-300: #ff7577;
+  --pf-red-color-400: #ff6466;
+  --pf-red-color-500: #f44d4f;
+  --pf-red-color-600: #cf4244;
+  --pf-red-color-700: #b4393a;
+  --pf-red-color-800: #9a3132;
+  --pf-red-color-900: #752324;
   --pf-error-color: var(--pf-red-color);
   --pf-success-color: var(--pf-green-color);
   --pf-warning-color: var(--pf-orange-color);
@@ -286,8 +286,9 @@
   padding-bottom: 10px;
 }
 
+:root,
 :root [data-theme=light],
-:root {
+:root [data-theme=dark] {
   --pf-button-font-weight-bold: var(--pf-font-weight-bold);
   --pf-button-font-weight-regular: var(--pf-button-font-weight-regular);
   --pf-button-background-primary-color: var(--pf-primary-color);
@@ -312,32 +313,44 @@
   --pf-button-error-text-color: var(--pf-white-color);
   --pf-button-outline-hover-error-color: var(--pf-red-color-100);
   --pf-button-background-success-color: var(--pf-success-color);
-  --pf-button-disabled-success-color: var(--pf-green-color-300);
   --pf-button-focus-success-color: var(--pf-green-color-900);
   --pf-button-hover-success-color: var(--pf-green-color-400);
   --pf-button-success-color: var(--pf-success-color);
   --pf-button-success-text-color: var(--pf-white-color);
   --pf-button-outline-hover-success-color: var(--pf-green-color-100);
   --pf-button-background-warning-color: var(--pf-warning-color);
-  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
   --pf-button-focus-warning-color: var(--pf-orange-color-900);
   --pf-button-hover-warning-color: var(--pf-orange-color-400);
   --pf-button-warning-color: var(--pf-warning-color);
   --pf-button-warning-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
-  --pf-button-background-info-color: var(--pf-info-color);
   --pf-button-disabled-info-color: var(--pf-gray-color-300);
   --pf-button-focus-info-color: var(--pf-gray-color-900);
-  --pf-button-hover-info-color: var(--pf-gray-color-400);
   --pf-button-info-color: var(--pf-info-color);
   --pf-button-info-text-color: var(--pf-white-color);
-  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
   --pf-button-gray-color: var(--pf-gray-color);
   --pf-button-gray-disabled-color: var(--pf-gray-color-400);
   --pf-button-outline-background-color: var(--pf-white-color);
   --pf-button-rounded: var(--pf-rounded);
 }
 
+:root [data-theme=light] {
+  --pf-button-disabled-success-color: var(--pf-green-color-300);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-300);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-100);
+  --pf-button-background-info-color: var(--pf-info-color);
+  --pf-button-hover-info-color: var(--pf-gray-color-400);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-100);
+}
+
+:root [data-theme=dark] {
+  --pf-button-disabled-success-color: var(--pf-green-color-400);
+  --pf-button-disabled-warning-color: var(--pf-orange-color-400);
+  --pf-button-outline-hover-warning-color: var(--pf-orange-color-300);
+  --pf-button-background-info-color: var(--pf-gray-color-800);
+  --pf-button-hover-info-color: var(--pf-gray-color-600);
+  --pf-button-outline-hover-info-color: var(--pf-gray-color-300);
+}
+
 .btn {
   display: inline-flex;
   padding: var(--pf-padding-0) var(--pf-padding-3);
@@ -699,6 +712,10 @@
   color: var(--pf-button-gray-disabled-color);
 }
 
+.btn--info {
+  background-color: var(--pf-button-background-info-color);
+}
+
 .btn--info.btn--text {
   background: transparent;
   color: var(--pf-button-info-color);