Add modern colors for datetime and table packages

packages/datetime/package.json

@@ -46,6 +46,7 @@
         "react-dom": "^15.3.0 || 16 || 17"
     },
     "devDependencies": {
+        "@blueprintjs/colors": "^5.0.0-alpha.0",
         "@blueprintjs/karma-build-scripts": "^2.0.2",
         "@blueprintjs/node-build-scripts": "^1.6.0",
         "@blueprintjs/test-commons": "^0.10.13",

packages/datetime/src/blueprint-datetime-modern.scss

@@ -0,0 +1,62 @@
+@import "~@blueprintjs/colors/lib/scss/colors";
+
+$datepicker-day-background-color-hover: rgba($gray3, 0.15);
+$datepicker-day-background-color-active: rgba($gray3, 0.3);
+$dark-datepicker-day-background-color-hover: rgba($gray3, 0.15);
+$dark-datepicker-day-background-color-active: rgba($gray3, 0.3);
+$daterangepicker-range-background-color: rgba($blue3, 0.1);
+$daterangepicker-range-background-color-selected: rgba($blue3, 0.1);
+$daterangepicker-range-background-color-selected-hover: rgba($blue3, 0.2);
+$dark-daterangepicker-range-background-color: rgba($blue3, 0.2);
+$dark-daterangepicker-range-background-color-selected: rgba($blue3, 0.2);
+$dark-daterangepicker-range-background-color-selected-hover: rgba($blue3, 0.4);
+
+@import "./blueprint-datetime";
+
+/* stylelint-disable selector-class-pattern */
+
+.#{$ns}-datepicker, .#{$ns}-daterangepicker {
+  .DayPicker-Day {
+    &.DayPicker-Day--selected {
+      &:active {
+        background-color: $blue1;
+      }
+
+      .#{$ns}-dark & {
+        &:hover {
+          background-color: $blue2;
+        }
+
+        &:active {
+          background-color: $blue1;
+        }
+      }
+    }
+  }
+}
+
+.#{$ns}-daterangepicker {
+  .DayPicker-Day {
+    &--hovered-range {
+      color: $blue2;
+    }
+
+    &--selected-range {
+      color: $blue2;
+
+      &:hover {
+        color: $blue2;
+      }
+    }
+
+    .#{$ns}-dark & {
+      &--hovered-range {
+        color: $light-gray5;
+      }
+
+      &--selected-range {
+        color: $light-gray5;
+      }
+    }
+  }
+}

packages/demo-app/src/examples/DatePickerExample.tsx

@@ -0,0 +1,30 @@
+/* Copyright 2020 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.*/
+
+import * as React from "react";
+
+import { Classes } from "@blueprintjs/core";
+import { DatePicker } from "@blueprintjs/datetime";
+
+import { ExampleCard } from "./ExampleCard";
+
+const WIDTH = 300;
+export const DatePickerExample = React.memo(() => {
+    return (
+        <ExampleCard width={WIDTH} horizontal={true} label="Date picker">
+            <DatePicker className={Classes.ELEVATION_1} />
+        </ExampleCard>
+    );
+});
+DatePickerExample.displayName = "DatePickerExample";

packages/demo-app/src/examples/DateRangePickerExample.tsx

@@ -0,0 +1,29 @@
+/* Copyright 2020 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.*/
+
+import * as React from "react";
+
+import { Classes } from "@blueprintjs/core";
+import { DateRangePicker } from "@blueprintjs/datetime";
+
+import { ExampleCard } from "./ExampleCard";
+
+export const DateRangePickerExample = React.memo(() => {
+    return (
+        <ExampleCard width={700} horizontal={true} label="Date range picker">
+            <DateRangePicker className={Classes.ELEVATION_1} />
+        </ExampleCard>
+    );
+});
+DateRangePickerExample.displayName = "DateRangerPickerExample";

packages/demo-app/src/examples/Examples.tsx

@@ -21,6 +21,8 @@ import { BreadcrumbExample } from "./BreadcrumbExample";
 import { ButtonExample } from "./ButtonExample";
 import { CalloutExample } from "./CalloutExample";
 import { CheckboxRadioExample } from "./CheckboxRadioExample";
+import { DatePickerExample } from "./DatePickerExample";
+import { DateRangePickerExample } from "./DateRangePickerExample";
 import { DialogExample } from "./DialogExample";
 import { EditableTextExample } from "./EditableTextExample";
 import { HtmlCodeExample } from "./HtmlCodeExample";
@@ -30,6 +32,7 @@ import { InputExample } from "./InputExample";
 import { MenuExample } from "./MenuExample";
 import { SliderExample } from "./SliderExample";
 import { SwitchExample } from "./SwitchExample";
+import { TableExample } from "./TableExample";
 import { TabsExample } from "./TabsExample";
 import { TagExample } from "./TagExample";
 import { TextExample } from "./TextExample";
@@ -45,7 +48,8 @@ export class Examples extends React.PureComponent {
                 <ButtonExample />
                 <CalloutExample />
                 <CheckboxRadioExample />
-                {/* Add DatePickerExample */}
+                <DatePickerExample />
+                <DateRangePickerExample />
                 <DialogExample className={className} />
                 <EditableTextExample />
                 <HtmlCodeExample />
@@ -55,7 +59,7 @@ export class Examples extends React.PureComponent {
                 <MenuExample />
                 <SliderExample />
                 <SwitchExample />
-                {/* Add TableExample */}
+                <TableExample />
                 <TabsExample />
                 <TagExample />
                 <TextExample />

packages/demo-app/src/examples/TableExample.tsx

@@ -0,0 +1,53 @@
+/* Copyright 2020 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.*/
+
+import * as React from "react";
+
+import { Cell, Column, ColumnHeaderCell, Table2 } from "@blueprintjs/table";
+
+import { ExampleCard } from "./ExampleCard";
+
+const WIDTH = 600;
+export const TableExample = React.memo(() => {
+    const cellRenderer = React.useCallback(
+        (rowIndex: number, columnIndex: number) => <Cell>{`${rowIndex}, ${columnIndex}`}</Cell>,
+        [],
+    );
+    const columnHeaderCellRenderer = React.useCallback(
+        (index: number) => <ColumnHeaderCell name={`Column ${index}`} />,
+        [],
+    );
+    return (
+        <ExampleCard width={WIDTH} horizontal={true} label="Table">
+            <Table2 numRows={4}>
+                <Column
+                    cellRenderer={cellRenderer}
+                    columnHeaderCellRenderer={columnHeaderCellRenderer}
+                    key="column-1"
+                />
+                <Column
+                    cellRenderer={cellRenderer}
+                    columnHeaderCellRenderer={columnHeaderCellRenderer}
+                    key="column-2"
+                />
+                <Column
+                    cellRenderer={cellRenderer}
+                    columnHeaderCellRenderer={columnHeaderCellRenderer}
+                    key="column-2"
+                />
+            </Table2>
+        </ExampleCard>
+    );
+});
+TableExample.displayName = "TableExample";

packages/demo-app/src/index.scss

@@ -1,4 +1,6 @@
 @import "~@blueprintjs/core/lib/css/blueprint-modern.css";
+@import "~@blueprintjs/datetime/lib/css/blueprint-datetime-modern.css";
+@import "~@blueprintjs/table/lib/css/table-modern.css";
 @import "~@blueprintjs/popover2/lib/css/blueprint-popover2.css";
 
 @import "./styles/examples";

packages/table/package.json

@@ -46,6 +46,7 @@
         "react-dom": "^15.3.0 || 16 || 17"
     },
     "devDependencies": {
+        "@blueprintjs/colors": "^5.0.0-alpha.0",
         "@blueprintjs/node-build-scripts": "^1.6.0",
         "@blueprintjs/test-commons": "^0.10.13",
         "enzyme": "^3.11.0",

packages/table/src/table-modern.scss

@@ -0,0 +1,7 @@
+@import "~@blueprintjs/colors/lib/scss/colors";
+@import "./table";
+
+.#{$ns}-dark & .#{$ns}-table-selection-region {
+  background-color: rgba($blue4, 0.1);
+  border: $cell-border-width solid $blue4;
+}