@patternfly/patternfly 4.183.2 → 4.184.2

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

@@ -0,0 +1,118 @@
+// global imports
+@import "globals"; // dark global css
+@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

@@ -0,0 +1,94 @@
+@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

@@ -0,0 +1,16 @@
+// 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

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

package/themes/dark/mixins.scss

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

package/themes/dark/placeholders.scss

@@ -0,0 +1,30 @@
+@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

@@ -0,0 +1,85 @@
+// 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;