Add demo theme. (#9)

.github/workflows/build-app.yml

@@ -21,6 +21,8 @@ jobs:
         run: unzip -q exb.zip -d exb
       - name: Copy Custom Widgets
         run: cp -r widgets/* exb/ArcGISExperienceBuilder/client/your-extensions/widgets
+      - name: Copy Custom Themes
+        run: cp -r themes/* exb/ArcGISExperienceBuilder/client/your-extensions/themes
       - name: Create App directory
         run: mkdir public && cd public && mkdir apps && cd apps
         working-directory: exb/ArcGISExperienceBuilder/server

apps/0/config.json

@@ -991,7 +991,7 @@
   },
   "exbVersion": "1.10.0",
   "mainSizeMode": "LARGE",
-  "theme": "themes/default/",
+  "theme": "themes/demo-theme/",
   "forBuilderAttributes": {
     "lockLayout": false
   },

themes/demo-theme/README.md

@@ -0,0 +1,61 @@
+# Sample theme
+
+This sample contains the minimal required files to create a custom theme.
+
+## How to use the sample
+
+Clone the [sample repo](https://github.com/esri/arcgis-experience-builder-sdk-resources) and copy this theme's folder (within `themes`) to the `client/your-extensions/themes` folder of your Experience Builder installation.
+
+## How it works
+
+When a custom theme is selected, the theme manager from the Jimu framework will read the custom variables in the `variables.json` and merge them with the default ones to create a new variables object at runtime. The variables object is then applied to the style modules (including the custom ones from `style.ts`) to dynamically generate CSS style sheets.
+
+### Override theme variables
+
+The `variables.json` file in the sample theme folder contains all variables from the default theme, which can be overridden with different values.
+
+A simple example:
+
+```json
+{
+  "colors": {
+    "primary": "red"
+  },
+  "typography": {
+    "fontFamilyBase": "Impact, Arial",
+    "fontSizeBase": "1rem"
+  }
+}
+```
+
+> NOTE: In order to have your theme customization to be reflected correct, please remove any unchanged variables from the demo `variables.json` file to avoid unneeded theme overrides.
+
+### Style Modules
+
+Any custom CSS styles can be added inside of the `style.ts` file.
+
+Global styles can be added to the `globalStyles` function and exported as a module with the name of "Global".
+
+Styles for UI components can be added the same way: wrap the CSS in a function and export it as a module with the same name as the component. For example, the `buttonStyles` function is exported as "Button" in the sample `style.ts` file.
+
+Uncomment the code inside of `style.ts` to see examples.
+
+### Localization
+
+Themes support localization files to provide translation texts for different locales to use, such as `_themeLabel` used by the theme setting panel in the builder to display the name of the theme.
+
+Register supported locales in the `manifest.json` as:
+
+``` json
+  "translatedLocales": [
+    "en",
+    "ar",
+    "zh-cn"
+  ]
+```
+
+Each locale needs to have a supporting translation file added under the `/translations` directory named as `{locale}.js`, except for "en", which has its file named `default.ts`.
+
+For example, the "ar" locale should have an `ar.js` file in the `/translations` folder.
+
+Then add and edit the text in each locale file, such as the `_themeLabel` string mentioned above.

themes/demo-theme/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "demo-theme",
+  "label": "Demo Theme",
+  "type": "theme",
+  "thumbnails ": [],
+  "font": {
+    "fontFamily": "Avenir Next",
+    "color": "#484848"
+  },
+  "version": "1.13.0",
+  "exbVersion": "1.13.0",
+  "author": "Esri R&D Center Beijing",
+  "description": "This is a demo theme containing all customizable theme variables.",
+  "copyright": "",
+  "license": "http://www.apache.org/licenses/LICENSE-2.0",
+  "translatedLocales": [
+    "en",
+    "zh-cn"
+  ]
+}

themes/demo-theme/style.ts

@@ -0,0 +1,49 @@
+/**
+  Licensing
+
+  Copyright 2020 Esri
+
+  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.
+
+  A copy of the license is available in the repository's
+  LICENSE file.
+*/
+
+/*
+* Sample code:
+* Uncomment the following sections to add:
+* 1. global style: import the Roboto font from external url.
+* 2. Button component style override: font size change for all Button components.
+*/
+
+// import { css, IMThemeVariables } from 'jimu-core';
+
+// const globalStyles = () => {
+//   return css`
+//     /* Change the "fontFamilyBase" property in variables.json to "Roboto"
+//     *  to use this font.
+//     */
+//     @import url("https://fonts.googleapis.com/css?family=Roboto");
+//   `
+// };
+
+// const buttonStyles = (props) => {
+//   const theme: IMThemeVariables = props.theme;
+//   return css`
+//     font-size: ${theme?.typography.sizes.display3};
+//   `
+// };
+
+// // global styles
+// export { globalStyles as Global};
+// // Button component styles
+// export { buttonStyles as Button};

themes/demo-theme/translations/default.ts

@@ -0,0 +1,3 @@
+export default {
+  _themeLabel: 'Demo',
+}

themes/demo-theme/translations/zh-cn.js

@@ -0,0 +1,3 @@
+System.register([], function (_export) {return {execute: function () {_export({
+  _themeLabel: '演示',
+})}}});