FIX-1030: Add a light theme to supported themes (#1046)

* FIX-1030: Add a light theme to supported themes

* Add theme to monorepo & documentation

Co-authored-by: Robert Snow <[email protected]>
Co-authored-by: Danni <[email protected]>

Author: 3 people

packages/@adobe/react-spectrum/src/index.ts

@@ -37,6 +37,7 @@ export {Heading, Keyboard, Text} from '@react-spectrum/text';
 export {TextArea, TextField} from '@react-spectrum/textfield';
 export {theme as darkTheme} from '@react-spectrum/theme-dark';
 export {theme as defaultTheme} from '@react-spectrum/theme-default';
+export {theme as lightTheme} from '@react-spectrum/theme-light';
 export {Content, Footer, Header, View} from '@react-spectrum/view';
 export {Well} from '@react-spectrum/well';
 export {Item, Section} from '@react-stately/collections';

packages/@react-spectrum/theme-light/README.md

@@ -0,0 +1,3 @@
+# @react-spectrum/theme-light
+
+This package is part of [react-spectrum](https://github.com/adobe/react-spectrum). See the repo for more details.

packages/@react-spectrum/theme-light/index.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+export * from './src';

packages/@react-spectrum/theme-light/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@react-spectrum/theme-light",
+  "version": "3.1.0",
+  "description": "Spectrum UI components in React",
+  "license": "Apache-2.0",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/types.d.ts",
+  "source": "src/index.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "targets": {
+    "main": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    },
+    "module": {
+      "includeNodeModules": [
+        "@adobe/spectrum-css-temp"
+      ]
+    }
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/adobe/react-spectrum"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.6.2",
+    "@react-types/provider": "^3.1.0"
+  },
+  "devDependencies": {
+    "@adobe/spectrum-css-temp": "^3.0.0-alpha.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/@react-spectrum/theme-light/src/index.ts

@@ -0,0 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you 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 REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/// <reference types="css-module-types" />
+
+import darkest from '@adobe/spectrum-css-temp/vars/spectrum-darkest.css';
+import global from '@adobe/spectrum-css-temp/vars/spectrum-global.css';
+import large from '@adobe/spectrum-css-temp/vars/spectrum-large.css';
+import lightest from '@adobe/spectrum-css-temp/vars/spectrum-lightest.css';
+import medium from '@adobe/spectrum-css-temp/vars/spectrum-medium.css';
+import {Theme} from '@react-types/provider';
+
+export let theme: Theme = {
+  global,
+  light: lightest,
+  dark: darkest,
+  medium,
+  large
+};

packages/dev/docs/pages/react-spectrum/theming.mdx

@@ -92,10 +92,12 @@ which define the values for the variables in each color scheme and platform scal
 a CSS class which includes the variables it defines, and `Provider` applies these classes according to
 media queries and prop settings.
 
-React Spectrum includes two themes by default. The `defaultTheme` uses the Spectrum `light` and `darkest` color themes
-and is suitable for most applications. The `darkTheme` uses the Spectrum `dark` and `darkest` color themes, and is
-suitable for applications that are optimal with a darker interface regardless of operating system setting
-(e.g. photo/video editors). See the [Spectrum color](https://spectrum.adobe.com/page/color/#Color-themes-and-modes)
+React Spectrum includes three themes by default. 
+1. The `defaultTheme` uses the Spectrum `light` and `darkest` color themes and is suitable for most applications.
+2. The `darkTheme` uses the Spectrum `dark` and `darkest` color themes, and is suitable for applications that are optimal with a darker interface regardless of operating system setting (e.g. photo/video editors). 
+3. The `lightTheme` uses the Spectrum `lightest` and `darkest` color themes, and is suitable for applications that require high brightness levels while in light mode and high contrast ratios while in dark mode.
+
+See the [Spectrum color](https://spectrum.adobe.com/page/color/#Color-themes-and-modes)
 page for more information.
 
 Import your desired theme and pass it to your application's `Provider` to apply it.