[core] feat: high contrast CSS with color adjustments to pass WCAG requirements

packages/core/package.json

@@ -21,7 +21,7 @@
     "compile:esm": "tsc -p ./src",
     "compile:cjs": "tsc -p ./src -m commonjs --outDir lib/cjs",
     "compile:esnext": "tsc -p ./src -t esnext --outDir lib/esnext",
-    "compile:css": "sass-compile ./src --functions ./scripts/sass-inline-svg.js",
+    "compile:css": "sass-compile ./src --functions ./scripts/sass-custom-functions.js",
     "dev": "run-p \"compile:esm -- --watch\" \"compile:css -- --watch\"",
     "dist": "run-s \"dist:*\"",
     "dist:bundle": "cross-env NODE_ENV=production webpack",

packages/core/scripts/sass-custom-functions.js

@@ -0,0 +1,32 @@
+/*
+ * Copyright 2019 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const inliner = require("sass-inline-svg");
+
+module.exports = {
+    /**
+     * Sass function to inline a UI icon svg and change its path color.
+     *
+     * Usage:
+     * svg-icon("16px/icon-name.svg", (path: (fill: $color)) )
+     */
+    "svg-icon": inliner("../../resources/icons", {
+        // run through SVGO first
+        optimize: true,
+        // minimal "uri" encoding is smaller than base64
+        encodingFormat: "uri"
+    }),
+};

packages/core/src/blueprint-hi-contrast.scss

@@ -0,0 +1,22 @@
+/*!
+
+Copyright 2019-present Palantir Technologies, Inc. All rights reserved.
+Licensed under the Apache License, Version 2.0.
+
+*/
+
+// override some intent colors to pass contrast requirements
+$pt-intent-primary: #106ba3 !default; // $blue2
+$pt-intent-success: #0d8050 !default; // $green2;
+$pt-intent-warning: #a66321 !default; // $orange1;
+$pt-intent-danger: #c23030 !default; // $red2;
+
+// Import files in the same order that they are documented in the docs
+@import "common/variables";
+@import "common/colors";
+
+@import "reset";
+@import "typography";
+@import "accessibility/focus-states";
+
+@import "components/index";

packages/core/src/blueprint.scss

@@ -11,6 +11,6 @@ Licensed under the Apache License, Version 2.0.
 
 @import "reset";
 @import "typography";
-@import "accessibility";
+@import "accessibility/focus-states";
 
 @import "components/index";