@patternfly/patternfly 4.194.4 → 4.196.1

package/patternfly-theme-dark-prefers-color-scheme.scss

@@ -1,5 +0,0 @@
-@import "themes/dark/patternfly-theme-dark";
-
-@media (prefers-color-scheme: dark) {
-  @include pf-theme-dark();
-}

package/themes/dark/_chart-globals.scss

@@ -1,39 +0,0 @@
-@import "../../sass-utilities/colors";
-@import "../../sass-utilities/scss-variables";
-
-// Chart colors
-
-// blue
-$pf-chart-color-blue-100: #add6ff;
-$pf-chart-color-blue-200: #85c2ff;
-$pf-chart-color-blue-300: #47a3ff;
-$pf-chart-color-blue-400: #0a85ff;
-$pf-chart-color-blue-500: $pf-color-blue-400;
-
-// green
-$pf-chart-color-green-100: #d6eed3;
-$pf-chart-color-green-200: #aedca7;
-$pf-chart-color-green-300: #85cb7c;
-$pf-chart-color-green-400: #5cb950;
-$pf-chart-color-green-500: $pf-color-green-500;
-
-// cyan
-$pf-chart-color-cyan-100: #b9feff;
-$pf-chart-color-cyan-200: #86fdff;
-$pf-chart-color-cyan-300: #00b5b8;
-$pf-chart-color-cyan-400: #008c8f;
-$pf-chart-color-cyan-500: $pf-color-cyan-400;
-
-// purple
-$pf-chart-color-purple-100: #cec8e4;
-$pf-chart-color-purple-200: #a99fd1;
-$pf-chart-color-purple-300: #9183c3;
-$pf-chart-color-purple-400: #7968b6;
-$pf-chart-color-purple-500: $pf-color-purple-500;
-
-// red
-$pf-chart-color-red-100: #ffadad;
-$pf-chart-color-red-200: #ff7070;
-$pf-chart-color-red-300: #ff4747;
-$pf-chart-color-red-400: #ff0a0a;
-$pf-chart-color-red-500: $pf-color-red-200;

package/themes/dark/_patternfly-theme-dark.scss

@@ -1,119 +0,0 @@
-// global imports
-@import "globals"; // dark global css
-@import "../../sass-utilities/functions"; // functions
-@import "../../sass-utilities/colors"; // base colors
-@import "colors"; // dark colors
-@import "../../sass-utilities/scss-variables"; // base scss vars
-@import "scss-variables"; // dark scss vars
-@import "mixins"; // dark mixins
-@import "placeholders"; // dark placeholders
-@import "variables"; // dark global css vars
-
-// component imports
-@import "../../components/AboutModalBox/themes/dark/about-modal-box";
-@import "../../components/Accordion/themes/dark/accordion";
-@import "../../components/Alert/themes/dark/alert";
-@import "../../components/AppLauncher/themes/dark/app-launcher";
-@import "../../components/Badge/themes/dark/badge";
-@import "../../components/Banner/themes/dark/banner";
-@import "../../components/Breadcrumb/themes/dark/breadcrumb";
-@import "../../components/Button/themes/dark/button";
-@import "../../components/CalendarMonth/themes/dark/calendar-month";
-@import "../../components/Chip/themes/dark/chip";
-@import "../../components/ClipboardCopy/themes/dark/clipboard-copy";
-@import "../../components/CodeEditor/themes/dark/code-editor";
-@import "../../components/ContextSelector/themes/dark/context-selector";
-@import "../../components/DataList/themes/dark/data-list";
-@import "../../components/DatePicker/themes/dark/date-picker";
-@import "../../components/Drawer/themes/dark/drawer";
-@import "../../components/Dropdown/themes/dark/dropdown";
-@import "../../components/Form/themes/dark/form";
-@import "../../components/FormControl/themes/dark/form-control";
-@import "../../components/HelperText/themes/dark/helper-text";
-@import "../../components/Hint/themes/dark/hint";
-@import "../../components/InputGroup/themes/dark/input-group";
-@import "../../components/Label/themes/dark/label";
-@import "../../components/Login/themes/dark/login";
-@import "../../components/LogViewer/themes/dark/log-viewer";
-@import "../../components/Masthead/themes/dark/masthead";
-@import "../../components/Menu/themes/dark/menu";
-@import "../../components/MenuToggle/themes/dark/menu-toggle";
-@import "../../components/ModalBox/themes/dark/modal-box";
-@import "../../components/Nav/themes/dark/nav";
-@import "../../components/NotificationBadge/themes/dark/notification-badge";
-@import "../../components/NotificationDrawer/themes/dark/notification-drawer";
-@import "../../components/OptionsMenu/themes/dark/options-menu";
-@import "../../components/Page/themes/dark/page";
-@import "../../components/Pagination/themes/dark/pagination";
-@import "../../components/Popover/themes/dark/popover";
-@import "../../components/Progress/themes/dark/progress";
-@import "../../components/SearchInput/themes/dark/search-input";
-@import "../../components/Select/themes/dark/select";
-@import "../../components/SimpleList/themes/dark/simple-list";
-@import "../../components/Skeleton/themes/dark/skeleton";
-@import "../../components/Switch/themes/dark/switch";
-@import "../../components/Table/themes/dark/table";
-@import "../../components/Tabs/themes/dark/tabs";
-@import "../../components/Tile/themes/dark/tile";
-@import "../../components/ToggleGroup/themes/dark/toggle-group";
-@import "../../components/Tooltip/themes/dark/tooltip";
-@import "../../components/TreeView/themes/dark/tree-view";
-@import "../../components/Wizard/themes/dark/wizard";
-
-@mixin pf-theme-dark($pf-theme-dark-class: "") {
-  // global overrides
-  @include placeholders; // fixes pf-t-dark in dark theme
-  @include globals($pf-theme-dark-class); // global CSS
-  @include _variables($pf-theme-dark-class); // dark css vars
-
-  // component overrides
-  @include about-modal-box;
-  @include accordion;
-  @include alert;
-  @include app-launcher;
-  @include badge;
-  @include banner;
-  @include breadcrumb;
-  @include button;
-  @include calendar-month;
-  @include chip;
-  @include clipboard-copy;
-  @include code-editor;
-  @include context-selector;
-  @include data-list;
-  @include date-picker;
-  @include drawer;
-  @include dropdown;
-  @include form;
-  @include form-control;
-  @include helper-text;
-  @include hint;
-  @include input-group;
-  @include label;
-  @include login;
-  @include log-viewer;
-  @include masthead;
-  @include menu;
-  @include menu-toggle;
-  @include modal-box;
-  @include nav;
-  @include notification-badge;
-  @include notification-drawer;
-  @include options-menu;
-  @include page;
-  @include pagination;
-  @include popover;
-  @include progress;
-  @include search-input;
-  @include select;
-  @include simple-list;
-  @include skeleton;
-  @include switch;
-  @include table;
-  @include tabs;
-  @include tile;
-  @include toggle-group;
-  @include tooltip;
-  @include tree-view;
-  @include wizard;
-}

package/themes/dark/_variables.scss

@@ -1,94 +0,0 @@
-@mixin _variables($pf-theme-dark-class) {
-  @at-root :root#{&} {
-    // palette changes
-    --pf-global--palette--black-50: #{$pf-color-black-50};
-    --pf-global--palette--black-100: #{$pf-color-black-100};
-    --pf-global--palette--black-200: #{$pf-color-black-200};
-    --pf-global--palette--black-300: #{$pf-color-black-300};
-    --pf-global--palette--black-400: #{$pf-color-black-400};
-    --pf-global--palette--black-500: #{$pf-color-black-500};
-    --pf-global--palette--black-600: #{$pf-color-black-600};
-    --pf-global--palette--black-700: #{$pf-color-black-700};
-    --pf-global--palette--black-800: #{$pf-color-black-800};
-    --pf-global--palette--black-900: #{$pf-color-black-900};
-    --pf-global--palette--red-9999: #{$pf-color-red-9999};
-    --pf-global--palette--red-8888: #{$pf-color-red-8888};
-    --pf-global--palette--blue-300: #{$pf-color-blue-300};
-
-    // background colors
-    --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
-    --pf-global--BackgroundColor--200: #{$pf-global--BackgroundColor--200};
-    --pf-global--BackgroundColor--300: #{$pf-global--BackgroundColor--300};
-    --pf-global--BackgroundColor--400: #{$pf-global--BackgroundColor--400};
-    --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
-    --pf-global--BorderColor--200: #{$pf-global--BorderColor--200};
-    --pf-global--BorderColor--300: #{$pf-global--BorderColor--300};
-    --pf-global--BorderColor--400: #{$pf-global--BorderColor--400};
-
-    // text colors
-    --pf-global--Color--100: #{$pf-global--Color--100};
-    --pf-global--Color--200: #{$pf-global--Color--200};
-    --pf-global--active-color--100: #{$pf-global--active-color--100};
-    --pf-global--primary-color--100: #{$pf-global--primary-color--100};
-    --pf-global--primary-color--300: #{$pf-global--primary-color--300};
-    --pf-global--success-color--100: #{$pf-global--success-color--100};
-    --pf-global--warning-color--100: #{$pf-global--warning-color--100};
-    --pf-global--warning-color--200: #{$pf-global--warning-color--200};
-    --pf-global--danger-color--100: #{$pf-global--danger-color--100};
-    --pf-global--danger-color--200: #{$pf-global--danger-color--200};
-    --pf-global--link--Color: #{$pf-global--link--Color};
-    --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
-    --pf-global--disabled-color--100: #{$pf-global--disabled-color--100};
-    --pf-global--disabled-color--200: #{$pf-global--disabled-color--200};
-    --pf-global--disabled-color--300: #{$pf-global--disabled-color--300};
-
-    // icons
-    --pf-global--icon--Color--light: #{$pf-global--icon--Color--light};
-    --pf-global--icon--Color--dark: #{$pf-global--icon--Color--dark};
-
-    // theme color resets
-    --pf-global--Color--dark-100: #{$pf-global--Color--dark-100};
-    --pf-global--Color--dark-200: #{$pf-global--Color--dark-200};
-    --pf-global--Color--light-100: #{$pf-global--Color--light-100};
-    --pf-global--Color--light-200: #{$pf-global--Color--light-200};
-    --pf-global--Color--light-300: #{$pf-global--Color--light-300};
-    --pf-global--BorderColor--dark-100: #{$pf-global--BorderColor--dark-100};
-    --pf-global--BorderColor--light-100: #{$pf-global--BorderColor--light-100};
-    --pf-global--primary-color--light-100: #{$pf-global--primary-color--light-100};
-    --pf-global--primary-color--dark-100: #{$pf-global--primary-color--dark-100};
-    --pf-global--link--Color--light: #{$pf-global--link--Color--light};
-    --pf-global--link--Color--light--hover: #{$pf-global--link--Color--light--hover};
-    --pf-global--link--Color--dark: #{$pf-global--link--Color--dark};
-    --pf-global--link--Color--dark--hover: #{$pf-global--link--Color--dark--hover};
-    --pf-global--BackgroundColor--light-100: #{$pf-global--BackgroundColor--light-100};
-    --pf-global--BackgroundColor--light-200: #{$pf-global--BackgroundColor--light-200};
-    --pf-global--BackgroundColor--light-300: #{$pf-global--BackgroundColor--light-300};
-    --pf-global--BackgroundColor--dark-100: #{$pf-global--BackgroundColor--dark-100};
-    --pf-global--BackgroundColor--dark-200: #{$pf-global--BackgroundColor--dark-200};
-    --pf-global--BackgroundColor--dark-300: #{$pf-global--BackgroundColor--dark-300};
-    --pf-global--BackgroundColor--dark-400: #{$pf-global--BackgroundColor--dark-400};
-
-    // Shadows
-    --pf-global--BoxShadow--sm: #{$pf-global--BoxShadow--sm};
-    --pf-global--BoxShadow--sm-top: #{$pf-global--BoxShadow--sm-top};
-    --pf-global--BoxShadow--sm-right: #{$pf-global--BoxShadow--sm-right};
-    --pf-global--BoxShadow--sm-bottom: #{$pf-global--BoxShadow--sm-bottom};
-    --pf-global--BoxShadow--sm-left: #{$pf-global--BoxShadow--sm-left};
-    --pf-global--BoxShadow--md: #{$pf-global--BoxShadow--md};
-    --pf-global--BoxShadow--md-top: #{$pf-global--BoxShadow--md-top};
-    --pf-global--BoxShadow--md-right: #{$pf-global--BoxShadow--md-right};
-    --pf-global--BoxShadow--md-bottom: #{$pf-global--BoxShadow--md-bottom};
-    --pf-global--BoxShadow--md-left: #{$pf-global--BoxShadow--md-left};
-    --pf-global--BoxShadow--lg: #{$pf-global--BoxShadow--lg};
-    --pf-global--BoxShadow--lg-top: #{$pf-global--BoxShadow--lg-top};
-    --pf-global--BoxShadow--lg-right: #{$pf-global--BoxShadow--lg-right};
-    --pf-global--BoxShadow--lg-bottom: #{$pf-global--BoxShadow--lg-bottom};
-    --pf-global--BoxShadow--lg-left: #{$pf-global--BoxShadow--lg-left};
-    --pf-global--BoxShadow--xl: #{$pf-global--BoxShadow--xl};
-    --pf-global--BoxShadow--xl-top: #{$pf-global--BoxShadow--xl-top};
-    --pf-global--BoxShadow--xl-right: #{$pf-global--BoxShadow--xl-right};
-    --pf-global--BoxShadow--xl-bottom: #{$pf-global--BoxShadow--xl-bottom};
-    --pf-global--BoxShadow--xl-left: #{$pf-global--BoxShadow--xl-left};
-    --pf-global--BoxShadow--inset: #{$pf-global--BoxShadow--inset};
-  }
-}

package/themes/dark/colors.scss

@@ -1,16 +0,0 @@
-// color palette changes
-$pf-color-black-50: #e0e0e0;
-$pf-color-black-100: #c6c7c8;
-$pf-color-black-200: #aaabac;
-$pf-color-black-300: #868789;
-$pf-color-black-400: #57585a;
-$pf-color-black-500: #444548;
-$pf-color-black-600: #36373a;
-$pf-color-black-700: #26292d;
-$pf-color-black-800: #1b1d21;
-$pf-color-black-850: #212427;
-$pf-color-black-900: #0f1214;
-$pf-color-black-1000: #030303;
-$pf-color-red-9999: #fe5142;
-$pf-color-red-8888: #fe6a5d;
-$pf-color-blue-300: #1fa7f8;

package/themes/dark/globals.scss

@@ -1,7 +0,0 @@
-@mixin globals($pf-theme-dark-class) {
-  @at-root :root#{&} {
-    // stylelint-disable property-no-unknown
-    color-scheme: dark;
-    // stylelint-enable
-  }
-}

package/themes/dark/mixins.scss

@@ -1,5 +0,0 @@
-@mixin pf-t-dark($color: "--pf-global--Color--100") {
-  color: var(#{$color});
-
-  @extend %pf-t-dark;
-}

package/themes/dark/placeholders.scss

@@ -1,30 +0,0 @@
-@mixin placeholders() {
-  %pf-t-dark {
-    // global
-    --pf-global--Color--100: #{$pf-global--Color--100};
-    --pf-global--Color--200: #{$pf-global--Color--200};
-    --pf-global--BorderColor--100: #{$pf-global--BorderColor--100};
-    --pf-global--primary-color--100: #{$pf-global--primary-color--100};
-    --pf-global--link--Color: #{$pf-global--link--Color};
-    --pf-global--link--Color--hover: #{$pf-global--link--Color--hover};
-    --pf-global--BackgroundColor--100: #{$pf-global--BackgroundColor--100};
-
-    .pf-c-button {
-      // primary button
-      --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
-      --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
-      --pf-c-button--m-primary--focus--Color: var(--pf-global--Color--light-100);
-      --pf-c-button--m-primary--active--Color: var(--pf-global--Color--light-100);
-      --pf-c-button--m-primary--BackgroundColor: var(--pf-global--primary-color--300);
-      --pf-c-button--m-primary--hover--BackgroundColor: var(--pf-global--primary-color--200);
-      --pf-c-button--m-primary--focus--BackgroundColor: var(--pf-global--primary-color--200);
-      --pf-c-button--m-primary--active--BackgroundColor: var(--pf-global--primary-color--200);
-
-      // secondary button
-      --pf-c-button--m-secondary--Color: var(--pf-global--primary-color--100);
-      --pf-c-button--m-secondary--hover--Color: var(--pf-global--primary-color--100);
-      --pf-c-button--m-secondary--focus--Color: var(--pf-global--primary-color--100);
-      --pf-c-button--m-secondary--active--Color: var(--pf-global--primary-color--100);
-    }
-  }
-}

package/themes/dark/scss-variables.scss

@@ -1,85 +0,0 @@
-// background colors
-$pf-global--BackgroundColor--100: $pf-color-black-800; // primary background color
-$pf-global--BackgroundColor--200: $pf-color-black-900; // secondary background color
-$pf-global--BackgroundColor--300: $pf-color-black-700; // floats on top of other elements
-$pf-global--BackgroundColor--400: $pf-color-black-600; // form control & item hover on --pf-global--BackgroundColor--300
-$pf-global--BorderColor--100: $pf-color-black-500; // primary border color
-$pf-global--BorderColor--200: $pf-color-black-500; // secondary border color
-$pf-global--BorderColor--300: $pf-color-black-400;
-$pf-global--BorderColor--400: $pf-color-black-200; // form control bottom border
-
-// text colors
-$pf-global--Color--100: $pf-color-white; // primary text color
-$pf-global--Color--200: $pf-color-black-200; // secondary text color
-$pf-global--active-color--100: $pf-color-blue-300;
-$pf-global--primary-color--100: $pf-color-blue-300; // primary blue against dark background - background, text, etc
-$pf-global--primary-color--300: $pf-color-blue-400; // primary blue with white text on top for contrast
-$pf-global--success-color--100: $pf-color-green-400;
-$pf-global--warning-color--100: $pf-color-gold-400;
-$pf-global--warning-color--200: $pf-color-gold-300;
-$pf-global--danger-color--100: $pf-color-red-9999;
-$pf-global--danger-color--200: $pf-color-red-8888;
-$pf-global--link--Color: $pf-color-blue-300;
-$pf-global--link--Color--hover: $pf-color-blue-200;
-$pf-global--disabled-color--100: $pf-color-black-400; // disabled text on regular background color
-$pf-global--disabled-color--200: $pf-color-black-500; // disabled background color
-$pf-global--disabled-color--300: $pf-color-black-200; // disabled text on disabled background color
-
-// icons
-$pf-global--icon--Color--light: $pf-color-black-300;
-
-// theme color resets
-$pf-global--Color--dark-100: $pf-global--Color--100;
-$pf-global--Color--dark-200: $pf-global--Color--200;
-$pf-global--Color--light-100: $pf-global--Color--100;
-$pf-global--Color--light-200: $pf-global--Color--200;
-$pf-global--Color--light-300: $pf-global--Color--300;
-$pf-global--BorderColor--dark-100: $pf-global--BorderColor--100;
-$pf-global--BorderColor--light-100: $pf-global--BorderColor--100;
-$pf-global--primary-color--light-100: $pf-global--primary-color--100;
-$pf-global--primary-color--dark-100: $pf-global--primary-color--100;
-$pf-global--link--Color--light: $pf-global--link--Color;
-$pf-global--link--Color--light--hover: $pf-global--link--Color--hover;
-$pf-global--link--Color--dark: $pf-global--link--Color;
-$pf-global--link--Color--dark--hover: $pf-global--link--Color--hover;
-$pf-global--BackgroundColor--light-100: $pf-global--BackgroundColor--100;
-$pf-global--BackgroundColor--light-200: $pf-global--BackgroundColor--200;
-$pf-global--BackgroundColor--light-300: $pf-global--BackgroundColor--300;
-$pf-global--BackgroundColor--dark-100: $pf-global--BackgroundColor--100;
-$pf-global--BackgroundColor--dark-200: $pf-global--BackgroundColor--200;
-$pf-global--BackgroundColor--dark-300: $pf-global--BackgroundColor--300;
-$pf-global--BackgroundColor--dark-400: $pf-global--BackgroundColor--400;
-$pf-global--icon--Color--light: $pf-color-black-200;
-$pf-global--icon--Color--dark: $pf-color-black-200;
-
-// Shadows
-// small
-$pf-global--BoxShadow--sm: 0 pf-size-prem(1px) pf-size-prem(2px) 0 rgba($pf-color-black-1000, .48), 0 0 pf-size-prem(2px) 0 rgba($pf-color-black-1000, .24);
-$pf-global--BoxShadow--sm-top: 0 pf-size-prem(-2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
-$pf-global--BoxShadow--sm-right: pf-size-prem(2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
-$pf-global--BoxShadow--sm-bottom: 0 pf-size-prem(2px) pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
-$pf-global--BoxShadow--sm-left: pf-size-prem(-2px) 0 pf-size-prem(4px) pf-size-prem(-1px) rgba($pf-color-black-1000, .64);
-
-// medium
-$pf-global--BoxShadow--md: 0 pf-size-prem(4px) pf-size-prem(8px) pf-size-prem(0) rgba($pf-color-black-1000, .48), 0 0 pf-size-prem(4px) 0 rgba($pf-color-black-1000, .24);
-$pf-global--BoxShadow--md-top: 0 pf-size-prem(-8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--md-right: pf-size-prem(8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--md-bottom: 0 pf-size-prem(8px) pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--md-left: pf-size-prem(-8px) 0 pf-size-prem(8px) pf-size-prem(-6px) rgba($pf-color-black-1000, .72);
-
-// large
-$pf-global--BoxShadow--lg: 0 pf-size-prem(8px) pf-size-prem(16px) 0 rgba($pf-color-black-1000, .64), 0 0 pf-size-prem(6px) 0 rgba($pf-color-black-1000, .32);
-$pf-global--BoxShadow--lg-top: 0 pf-size-prem(-12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--lg-right: pf-size-prem(12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--lg-bottom: 0 pf-size-prem(12px) pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
-$pf-global--BoxShadow--lg-left: pf-size-prem(-12px) 0 pf-size-prem(12px) pf-size-prem(-8px) rgba($pf-color-black-1000, .72);
-
-// x-large
-$pf-global--BoxShadow--xl: 0 pf-size-prem(16px) pf-size-prem(32px) 0 rgba($pf-color-black-1000, .64), 0 0 pf-size-prem(8px) 0 rgba($pf-color-black-1000, .4);
-$pf-global--BoxShadow--xl-top: 0 pf-size-prem(-16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
-$pf-global--BoxShadow--xl-right: pf-size-prem(16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
-$pf-global--BoxShadow--xl-bottom: 0 pf-size-prem(16px) pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
-$pf-global--BoxShadow--xl-left: pf-size-prem(-16px) 0 pf-size-prem(16px) pf-size-prem(-8px) rgba($pf-color-black-1000, .8);
-
-// inset
-$pf-global--BoxShadow--inset: inset 0 0 pf-size-prem(10) 0 $pf-color-black-1000;