Stop importing cockpit's base1/patternfly.css

This is deprecated API and will be dropped at some point, in favor of projects shipping their own CSS. Follow https://github.com/cockpit-project/starter-kit/blob/master/webpack.config.js approach on how to use PF CSS. Closes #96
cockpit-project · Jun 9, 2020 · 27a6f7f · 27a6f7f
1 parent 31eb206
commit 27a6f7f
Show file tree

Hide file tree

Showing 9 changed files with 976 additions and 6 deletions.
diff --git a/lib/patternfly/_fonts.scss b/lib/patternfly/_fonts.scss
@@ -0,0 +1,36 @@
+/*
+ * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/_fonts.scss
+ */
+
+@mixin printRedHatFont(
+$weightValue: 400,
+$weightName: "Regular",
+$familyName: "RedHatText",
+$style: "normal",
+$relative: true
+) {
+    $filePath: "../../static/fonts" + "/" + $familyName + "-" + $weightName;
+    @font-face {
+        font-family: $familyName;
+        src: url('#{$filePath}.woff2') format('woff2');
+        font-style: #{$style};
+        font-weight: $weightValue;
+        text-rendering: optimizeLegibility;
+    }
+}
+
+@include printRedHatFont(700, "Bold", $familyName: "RedHatDisplay");
+@include printRedHatFont(700, "BoldItalic", $style: "italic", $familyName: "RedHatDisplay");
+@include printRedHatFont(300, "Black", $familyName: "RedHatDisplay");
+@include printRedHatFont(300, "BlackItalic", $style: "italic", $familyName: "RedHatDisplay");
+@include printRedHatFont(300, "Italic", $style: "italic", $familyName: "RedHatDisplay");
+@include printRedHatFont(400, "Medium", $familyName: "RedHatDisplay");
+@include printRedHatFont(400, "MediumItalic", $style: "italic", $familyName: "RedHatDisplay");
+@include printRedHatFont(300, "Regular", $familyName: "RedHatDisplay");
+
+@include printRedHatFont(300, "Bold");
+@include printRedHatFont(300, "BoldItalic", $style: "italic");
+@include printRedHatFont(300, "Italic");
+@include printRedHatFont(700, "Medium");
+@include printRedHatFont(700, "MediumItalic", $style: "italic");
+@include printRedHatFont(400, "Regular");
diff --git a/lib/patternfly/patternfly-4-cockpit.scss b/lib/patternfly/patternfly-4-cockpit.scss
@@ -0,0 +1,15 @@
+/*
+ * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-4-cockpit.scss
+ */
+
+/* Set fake font and icon path variables - we are going to indentify these through
+ * patternfly.sed and remove the relevant font-face declarations
+ */
+$pf-global--font-path: 'patternfly-fonts-fake-path';
+$pf-global--fonticon-path: 'patternfly-icons-fake-path';
+$pf-global--disable-fontawesome: true !default; // Disable Font Awesome 5 Free
+
+@import '~@patternfly/patternfly/patternfly-base.scss';
+
+/* Import our own fonts since the PF4 font-face rules are filtered out with patternfly.sed */
+@import "./fonts";
diff --git a/lib/patternfly/patternfly-cockpit.scss b/lib/patternfly/patternfly-cockpit.scss
@@ -0,0 +1,11 @@
+/*
+ * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-cockpit.scss
+ */
+
+$icon-font-path: 'patternfly-icons-fake-path/';
+$font-path: 'patternfly-fonts-fake-path/';
+
+@import "./patternfly-overrides-variables";
+@import "~patternfly/dist/sass/patternfly";
+@import "./patternfly-4-cockpit.scss";
+@import "./patternfly-overrides.scss";
diff --git a/lib/patternfly/patternfly-overrides-variables.scss b/lib/patternfly/patternfly-overrides-variables.scss
@@ -0,0 +1,87 @@
+/*
+ * Keep in sync with https://github.com/cockpit-project/cockpit/tree/master/src/base1/patternfly-overrides-variables.scss
+ */
+
+//
+// Variables
+// --------------------------------------------------
+
+
+//== Colors
+//
+//## Gray and brand colors for use across Bootstrap.
+
+$gray-base:              #000;
+$gray-darker:            lighten($gray-base, 13.5%); // #222
+$gray-dark:              lighten($gray-base, 20%);   // #333
+$gray:                   lighten($gray-base, 33.5%); // #555
+$gray-light:             lighten($gray-base, 46.7%); // #777
+$gray-lighter:           lighten($gray-base, 93.5%); // #eee
+
+$brand-primary:         #06c;
+$brand-success:         #92d400;
+$brand-info:            #73bcf7;
+$brand-warning:         #f0ab00;
+$brand-danger:          #c9190b;
+
+
+//== Scaffolding
+//
+//## Settings for some of the most global styles.
+
+//** Background color for `<body>`.
+$body-bg:               #fafafa;
+//** Global text color on `<body>`.
+$text-color:            #151515;
+
+
+$navbar-pf-vertical-bg-color: $text-color;
+
+//** Global textual link color.
+//$link-color:            var(--pf-global--link--Color);
+//** Link hover color set via `darken()` function.
+//$link-hover-color:      var(--pf-global--link--Color--hover);
+$link-color: #06c;
+$link-hover-color: #004080;
+//** Link hover decoration.
+$link-hover-decoration: underline;
+
+//** Global color for active items (e.g., navs or dropdowns).
+$component-active-color:    var(--pf-global--active-color--100);
+//** Global background color for active items (e.g., navs or dropdowns).
+$component-active-bg:       $brand-primary;
+
+//== Buttons
+//
+//## For each of Bootstrap's buttons, define text, background and border color.
+
+$btn-font-weight:                normal;
+
+$btn-default-color:              $brand-primary;
+$btn-default-bg:                 #fff;
+$btn-default-border:             $brand-primary;
+
+$btn-primary-color:              #fff;
+$btn-primary-bg:                 $brand-primary;
+$btn-primary-border:             $brand-primary;
+
+$btn-success-color:              #fff;
+$btn-success-bg:                 $brand-success;
+$btn-success-border:             $btn-success-bg;
+
+$btn-info-color:                 #fff;
+$btn-info-bg:                    $brand-info;
+$btn-info-border:                $btn-info-bg;
+
+$btn-warning-color:              #fff;
+$btn-warning-bg:                 $brand-warning;
+$btn-warning-border:             $btn-warning-bg;
+
+$btn-danger-color:               #fff;
+$btn-danger-bg:                  $brand-danger;
+$btn-danger-border:              $btn-danger-bg;
+
+$btn-link-disabled-color:        $gray-light;
+
+$line-height-base: 1.5;
+$font-size-base  : 16px;