From 4c9e07e688c1af276273801bfa55942de0f20d01 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 3 Nov 2023 11:26:00 +0100 Subject: [PATCH 1/5] :sparkles: [open-formulieren/open-forms#3178] Define design tokens for the page footer This sets up the out-of-the-box design tokens supported by the upstream component, and additionally adds responsive token values for the Open Forms' specific extensions. --- src/community/utrecht/page-footer.tokens.json | 56 +++++++++++++++++++ src/components/page-footer/tokens.json | 5 ++ 2 files changed, 61 insertions(+) create mode 100644 src/community/utrecht/page-footer.tokens.json diff --git a/src/community/utrecht/page-footer.tokens.json b/src/community/utrecht/page-footer.tokens.json new file mode 100644 index 0000000..f37f3a6 --- /dev/null +++ b/src/community/utrecht/page-footer.tokens.json @@ -0,0 +1,56 @@ +{ + "utrecht": { + "page-footer": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Default Open Forms footer styling. Note: the openforms-theme applies some additional responsive tokens." + } + }, + + "color": {"value": "{of.color.bg}"}, + "background-color": {"value": "{of.color.primary}"}, + "background-image": {}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"}, + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"} + } + }, + "of": { + "utrecht-page-footer": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Open Forms' extensions on the utrecht-page-footer, for responsive styling." + } + }, + + "max-inline-size": {"value": "100%"}, + + "mobile": { + "padding-block-end": {"value": "10px"}, + "padding-block-start": {"value": "10px"}, + "padding-inline-end": {"value": "15px"}, + "padding-inline-start": {"value": "15px"} + }, + "tablet": { + "padding-block-end": {"value": "10px"}, + "padding-block-start": {"value": "10px"}, + "padding-inline-end": {"value": "15px"}, + "padding-inline-start": {"value": "15px"} + }, + "laptop": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"} + }, + "desktop": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"}, + "max-inline-size": {"value": "1200px"} + } + } + } +} diff --git a/src/components/page-footer/tokens.json b/src/components/page-footer/tokens.json index 93deaae..e9230bd 100644 --- a/src/components/page-footer/tokens.json +++ b/src/components/page-footer/tokens.json @@ -1,6 +1,11 @@ { "of": { "page-footer": { + "$extensions": { + "dte.metadata": { + "groupDescription": "DEPRECATED - use utrecht-page-footer tokens instead." + } + }, "bg": {"value": "{of.color.primary}"}, "fg": {"value": "{of.color.bg}"} } From a0a7765c4a0f9b263af8bf21ec4be3ee0dddef7c Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 3 Nov 2023 15:33:23 +0100 Subject: [PATCH 2/5] :recycle: [open-formulieren/open-forms#3178] Set up page header/footer tokens Added the default/fallback tokens and set up token aliases while deprecating old tokens. The deprecated tokens will be removed in Open Forms 3.0. --- src/community/utrecht/page-footer.tokens.json | 2 +- src/community/utrecht/page-header.tokens.json | 55 +++++++++++++++++++ src/components/page-header/tokens.json | 32 ++++++++++- 3 files changed, 85 insertions(+), 4 deletions(-) create mode 100644 src/community/utrecht/page-header.tokens.json diff --git a/src/community/utrecht/page-footer.tokens.json b/src/community/utrecht/page-footer.tokens.json index f37f3a6..aa9251f 100644 --- a/src/community/utrecht/page-footer.tokens.json +++ b/src/community/utrecht/page-footer.tokens.json @@ -3,7 +3,7 @@ "page-footer": { "$extensions": { "dte.metadata": { - "groupDescription": "Default Open Forms footer styling. Note: the openforms-theme applies some additional responsive tokens." + "groupDescription": "Default Open Forms footer styling." } }, diff --git a/src/community/utrecht/page-header.tokens.json b/src/community/utrecht/page-header.tokens.json new file mode 100644 index 0000000..8376ee7 --- /dev/null +++ b/src/community/utrecht/page-header.tokens.json @@ -0,0 +1,55 @@ +{ + "utrecht": { + "page-header": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Default Open Forms header styling." + } + }, + + "background-color": {"value": "#ffffff"}, + "color": {"value": "{of.color.fg}"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"}, + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"} + } + }, + + "of": { + + + "utrecht-page-header": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Open Forms' extensions on the utrecht-page-header, for responsive styling." + } + }, + + "mobile": { + "padding-block-end": {"value": "10px"}, + "padding-block-start": {"value": "10px"}, + "padding-inline-end": {"value": "15px"}, + "padding-inline-start": {"value": "10px"} + }, + "tablet": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"} + }, + "laptop": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"} + }, + "desktop": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"}, + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"} + } + } + } +} diff --git a/src/components/page-header/tokens.json b/src/components/page-header/tokens.json index 376d309..9da258f 100644 --- a/src/components/page-header/tokens.json +++ b/src/components/page-header/tokens.json @@ -1,6 +1,12 @@ { "of": { "page-header": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Color/spacing tokens are DEPRECATED - use utrecht-page-header tokens instead." + } + }, + "bg": {"value": "#ffffff"}, "mobile": { "padding": {"value": "10px 15px 10px 10px"} @@ -14,12 +20,32 @@ "desktop": { "padding": {"value": "{of.text.desktop.margin}"} }, + "logo-return-url": { - "min-height": {"value": "50px"}, - "min-width": {"value": "100px"}, + "$extensions": { + "dte.metadata": { + "groupDescription": "Open Forms extension for logo in the header." + } + }, + + "min-height": { + "value": "50px", + "comment": "DEPRECATED - use min-block-size instead." + }, + "min-width": { + "value": "100px", + "comment": "DEPRECATED - use min-inline-size instead." + }, + + "min-block-size": {"value": "{of.page-header.logo-return-url.min-height}"}, + "min-inline-size": {"value": "{of.page-header.logo-return-url.min-width}"}, + "mobile": { "min-height": {"value": "25px"}, - "min-width": {"value": "50px"} + "min-width": {"value": "50px"}, + + "min-block-size": {"value": "{of.page-header.logo-return-url.mobile.min-height}"}, + "min-inline-size": {"value": "{of.page-header.logo-return-url.mobile.min-width}"} } } } From 54033762b4fa7c3c7bf8f2615c75fb59d8990b57 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Fri, 3 Nov 2023 16:01:29 +0100 Subject: [PATCH 3/5] :sparkles: [open-formulieren/open-forms#3178] Incorporate paddings for desktop/mobile view The utrecht-page/utrecht-page-content design tokens replace the layout 'component' we had in the backend. --- .../utrecht/page-content.tokens.json | 21 +++++++++++++++++++ src/community/utrecht/page.tokens.json | 21 +++++++++++++++++++ 2 files changed, 42 insertions(+) create mode 100644 src/community/utrecht/page-content.tokens.json create mode 100644 src/community/utrecht/page.tokens.json diff --git a/src/community/utrecht/page-content.tokens.json b/src/community/utrecht/page-content.tokens.json new file mode 100644 index 0000000..203f7dc --- /dev/null +++ b/src/community/utrecht/page-content.tokens.json @@ -0,0 +1,21 @@ +{ + "utrecht": { + "page-content": { + "padding-block-end": {"value": "20px"}, + "padding-block-start": {"value": "20px"} + } + }, + "of": { + "utrecht-page-content": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Open Forms' extensions on the utrecht-page-content, for responsive styling." + } + }, + "mobile": { + "padding-block-end": {"value": "0"}, + "padding-block-start": {"value": "0"} + } + } + } +} diff --git a/src/community/utrecht/page.tokens.json b/src/community/utrecht/page.tokens.json new file mode 100644 index 0000000..6b3c156 --- /dev/null +++ b/src/community/utrecht/page.tokens.json @@ -0,0 +1,21 @@ +{ + "utrecht": { + "page": { + "padding-inline-end": {"value": "20px"}, + "padding-inline-start": {"value": "20px"} + } + }, + "of": { + "utrecht-page": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Open Forms' extensions on the utrecht-page, for responsive styling." + } + }, + "mobile": { + "padding-inline-end": {"value": "0"}, + "padding-inline-start": {"value": "0"} + } + } + } +} From a7876e371524fa9138e83fa94a6716b2b240fe70 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 9 Nov 2023 15:11:08 +0100 Subject: [PATCH 4/5] :sparkles: [open-formulieren/open-forms#3178] Added design tokens for app container component --- src/community/utrecht/page-header.tokens.json | 2 -- src/components/app.tokens.json | 23 +++++++++++++++++++ 2 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/components/app.tokens.json diff --git a/src/community/utrecht/page-header.tokens.json b/src/community/utrecht/page-header.tokens.json index 8376ee7..d55d7d1 100644 --- a/src/community/utrecht/page-header.tokens.json +++ b/src/community/utrecht/page-header.tokens.json @@ -17,8 +17,6 @@ }, "of": { - - "utrecht-page-header": { "$extensions": { "dte.metadata": { diff --git a/src/components/app.tokens.json b/src/components/app.tokens.json new file mode 100644 index 0000000..12ea00c --- /dev/null +++ b/src/components/app.tokens.json @@ -0,0 +1,23 @@ +{ + "of": { + "app": { + "$extensions": { + "dte.metadata": { + "groupDescription": "The outer SDK form 'app' wrapper." + } + }, + + "gap": {"value": "0"}, + + "mobile": { + "padding-block-end": {"value": "15px"}, + "padding-block-start": { + "value": "0", + "comment": "Allow room for the progress indicator" + }, + "padding-inline-end": {"value": "15px"}, + "padding-inline-start": {"value": "15px"} + } + } + } +} From 9ce92f2d96d604d39c196c689912bc9c66016157 Mon Sep 17 00:00:00 2001 From: Sergei Maertens Date: Thu, 9 Nov 2023 15:36:05 +0100 Subject: [PATCH 5/5] :sparkles: [open-formulieren/open-forms#3178] Add design tokens for app body/form styles --- src/components/form.tokens.json | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/components/form.tokens.json diff --git a/src/components/form.tokens.json b/src/components/form.tokens.json new file mode 100644 index 0000000..4e771ba --- /dev/null +++ b/src/components/form.tokens.json @@ -0,0 +1,20 @@ +{ + "of": { + "form": { + "$extensions": { + "dte.metadata": { + "groupDescription": "Layout configuration for main content." + } + }, + + "grid-column-gap": {"value": "20px"}, + + "progress-indicator": { + "mobile": { + "margin-inline-end": {"value": "calc(-1 * {of.app.mobile.padding-inline-end})"}, + "margin-inline-start": {"value": "calc(-1 * {of.app.mobile.padding-inline-start})"} + } + } + } + } +}