From d0375141f88fe4ec6d02b820343820dc9b1cd420 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 12:11:15 +0530 Subject: [PATCH 1/8] WIP - write type for manifest --- src/platform/types/theme.ts | 65 +++++++++++++++++++++++++++++++++++++ 1 file changed, 65 insertions(+) create mode 100644 src/platform/types/theme.ts diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts new file mode 100644 index 00000000..40c60f75 --- /dev/null +++ b/src/platform/types/theme.ts @@ -0,0 +1,65 @@ +/* +Copyright 2021 The Matrix.org Foundation C.I.C. + +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. +*/ + +export type ThemeManifest = { + // Version number of theme; must be incremented on each change! + version: number; + // A user-facing string that is the name for this theme-collection. + name: string; + /** + * This is produced during the build process and includes data + * that is needed to load themes at runtime. + */ + source?: { + /** + * This is mapping from theme-id to location of css file relative to build-output root. + * eg: {"element-light": "assets/theme-element-light.10f9bb22.css", ...} + * + * Here theme-id is 'theme-variant' where 'theme' is the key used to specify the manifest + * location for this theme-collection in vite.config.js (where the themeBuilder plugin is + * initialized) and 'variant' is the key used to specify the variant details in the values + * section below. + */ + "built-asset": Record; + // Location of css file that will be used for themes derived from this theme. + "runtime-asset": string; + // Array of derived-variables + "derived-variables": Array; + }; + values: { + /** + * Mapping from variant key to details pertaining to this theme-variant. + * This variant key is used for forming theme-id as mentioned above. + */ + variants: Record; + }; +}; + +type Variant = { + base: boolean; + /** + * If true, this variant is used a default dark/light variant and will be the selected theme + * when "Match system theme" is selected for this theme collection in settings. + */ + default: boolean; + // A user-facing string that is the name for this variant. + name: string; + /** + * Mapping from css variable to its value. + * eg: {"background-color-primary": "#21262b", ...} + * */ + variables: Record; +} From 9fbe8a4e324476d62d22de31fdded079d9f5a7a9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 15:02:15 +0530 Subject: [PATCH 2/8] Change description of version key --- src/platform/types/theme.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index 40c60f75..84203c78 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -15,7 +15,10 @@ limitations under the License. */ export type ThemeManifest = { - // Version number of theme; must be incremented on each change! + /** + * Version number of the theme manifest. + * This must be incremented when backwards incompatible changes are introduced. + */ version: number; // A user-facing string that is the name for this theme-collection. name: string; From b00bbc7daf3401957fcd24df28795832cd58562a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 15:03:41 +0530 Subject: [PATCH 3/8] Fix formatting --- src/platform/types/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index 84203c78..9b433910 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -63,6 +63,6 @@ type Variant = { /** * Mapping from css variable to its value. * eg: {"background-color-primary": "#21262b", ...} - * */ + */ variables: Record; } From 48da6c782c25901d696a9177719c95dece4f39e6 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 15:04:12 +0530 Subject: [PATCH 4/8] Remove base key --- src/platform/types/theme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index 9b433910..a0578f10 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -52,7 +52,6 @@ export type ThemeManifest = { }; type Variant = { - base: boolean; /** * If true, this variant is used a default dark/light variant and will be the selected theme * when "Match system theme" is selected for this theme collection in settings. From 7a3eabf39cc313a759c980ff8fa84e2014c89ef8 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 15:04:33 +0530 Subject: [PATCH 5/8] Formatting fix --- src/platform/types/theme.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index a0578f10..b01e6d5b 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -30,11 +30,11 @@ export type ThemeManifest = { /** * This is mapping from theme-id to location of css file relative to build-output root. * eg: {"element-light": "assets/theme-element-light.10f9bb22.css", ...} - * + * * Here theme-id is 'theme-variant' where 'theme' is the key used to specify the manifest - * location for this theme-collection in vite.config.js (where the themeBuilder plugin is + * location for this theme-collection in vite.config.js (where the themeBuilder plugin is * initialized) and 'variant' is the key used to specify the variant details in the values - * section below. + * section below. */ "built-asset": Record; // Location of css file that will be used for themes derived from this theme. From f658dc2e4b88abce5366fa8e83d8ff46caf6e1f9 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Wed, 15 Jun 2022 15:06:16 +0530 Subject: [PATCH 6/8] Make comment clearer --- src/platform/types/theme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index b01e6d5b..3e587e30 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -23,7 +23,7 @@ export type ThemeManifest = { // A user-facing string that is the name for this theme-collection. name: string; /** - * This is produced during the build process and includes data + * This is added to the manifest during the build process and includes data * that is needed to load themes at runtime. */ source?: { From 34eac94da3d2c5cf4c700f76ab0dc294b61bd02a Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Mon, 20 Jun 2022 21:27:02 +0530 Subject: [PATCH 7/8] Make everything optional Now typescript will force us to validate everything. --- src/platform/types/theme.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index 3e587e30..1c8ee7c3 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -export type ThemeManifest = { +export type ThemeManifest = Partial<{ /** * Version number of the theme manifest. * This must be incremented when backwards incompatible changes are introduced. @@ -26,7 +26,7 @@ export type ThemeManifest = { * This is added to the manifest during the build process and includes data * that is needed to load themes at runtime. */ - source?: { + source: { /** * This is mapping from theme-id to location of css file relative to build-output root. * eg: {"element-light": "assets/theme-element-light.10f9bb22.css", ...} @@ -49,9 +49,9 @@ export type ThemeManifest = { */ variants: Record; }; -}; +}>; -type Variant = { +type Variant = Partial<{ /** * If true, this variant is used a default dark/light variant and will be the selected theme * when "Match system theme" is selected for this theme collection in settings. @@ -64,4 +64,4 @@ type Variant = { * eg: {"background-color-primary": "#21262b", ...} */ variables: Record; -} +}>; From 0dfd24af22954c557cf2cc685ce00a2614159c64 Mon Sep 17 00:00:00 2001 From: RMidhunSuresh Date: Tue, 21 Jun 2022 12:52:10 +0530 Subject: [PATCH 8/8] Update info on path path is now relative to the manifest! --- src/platform/types/theme.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/platform/types/theme.ts b/src/platform/types/theme.ts index 1c8ee7c3..9a984277 100644 --- a/src/platform/types/theme.ts +++ b/src/platform/types/theme.ts @@ -28,8 +28,9 @@ export type ThemeManifest = Partial<{ */ source: { /** - * This is mapping from theme-id to location of css file relative to build-output root. - * eg: {"element-light": "assets/theme-element-light.10f9bb22.css", ...} + * This is a mapping from theme-id to location of css file relative to the location of the + * manifest. + * eg: {"element-light": "theme-element-light.10f9bb22.css", ...} * * Here theme-id is 'theme-variant' where 'theme' is the key used to specify the manifest * location for this theme-collection in vite.config.js (where the themeBuilder plugin is