From f8ab832dfd1124697ae3b524dea45b1d120124c6 Mon Sep 17 00:00:00 2001 From: jiroghianni Date: Mon, 11 Dec 2023 16:33:57 +0100 Subject: [PATCH] [#1910] Removed unneeded components --- README.md | 14 ++ bin/check_token_nesting.py | 116 +++++++------- src/common/color.tokens.json | 16 +- src/common/layout.tokens.json | 2 +- src/common/typography.tokens.json | 9 +- src/community/utrecht/action.tokens.json | 22 --- src/community/utrecht/alert.tokens.json | 56 ------- src/community/utrecht/button.tokens.json | 146 ------------------ src/community/utrecht/calendar.tokens.json | 78 ---------- src/community/utrecht/checkbox.tokens.json | 58 ------- src/community/utrecht/data-list.tokens.json | 23 --- src/community/utrecht/focus.tokens.json | 10 -- .../utrecht/form-control.tokens.json | 10 -- .../form-field-description.tokens.json | 15 -- src/community/utrecht/form-field.tokens.json | 16 -- src/community/utrecht/form-label.tokens.json | 9 -- src/community/utrecht/link.tokens.json | 22 --- .../utrecht/page-content.tokens.json | 21 --- src/community/utrecht/page-footer.tokens.json | 56 ------- src/community/utrecht/page-header.tokens.json | 53 ------- src/community/utrecht/page.tokens.json | 21 --- src/community/utrecht/paragraph.tokens.json | 8 - .../utrecht/radio-button.tokens.json | 70 --------- src/community/utrecht/select.tokens.json | 34 ---- src/community/utrecht/textarea.tokens.json | 24 --- src/community/utrecht/textbox.tokens.json | 28 ---- src/community/utrecht/typography.tokens.json | 7 - .../utrecht/unordered-list.tokens.json | 19 --- src/components/app.tokens.json | 40 ----- .../buttons/button-modifiers.tokens.json | 75 --------- src/components/buttons/button.tokens.json | 27 ---- src/components/card.tokens.json | 11 -- src/components/checkbox-field.tokens.json | 23 --- src/components/editgrid.tokens.json | 45 ------ src/components/errors.tokens.json | 15 -- src/components/fields/checkbox.tokens.json | 7 - src/components/fields/cosign.tokens.json | 7 - src/components/fields/field.tokens.json | 7 - src/components/fields/fieldset.tokens.json | 11 -- src/components/fields/file-upload.tokens.json | 9 -- src/components/fields/input.tokens.json | 7 - src/components/fields/select.tokens.json | 39 ----- src/components/headings/heading-1.tokens.json | 14 ++ src/components/headings/heading-2.tokens.json | 14 ++ src/components/headings/heading-3.tokens.json | 13 ++ src/components/headings/heading-4.tokens.json | 13 ++ src/components/helptext.tokens.json | 23 --- src/components/input-container.tokens.json | 30 ---- src/components/input-group.tokens.json | 16 -- src/components/label.tokens.json | 7 - src/components/language-selection.tokens.json | 17 -- src/components/list.tokens.json | 15 -- src/components/login-button-logo/tokens.json | 22 --- src/components/login-options.tokens.json | 11 -- src/components/page-footer/tokens.json | 13 -- src/components/page-header/logo.tokens.json | 9 -- src/components/page-header/tokens.json | 53 ------- src/components/progress-indicator.tokens.json | 44 ------ src/components/radio-field.tokens.json | 23 --- .../summary-row/summary-row.tokens.json | 9 -- src/components/tooltip.tokens.json | 26 ---- style-dictionary.config.json | 27 ++-- 62 files changed, 158 insertions(+), 1527 deletions(-) delete mode 100644 src/community/utrecht/action.tokens.json delete mode 100644 src/community/utrecht/alert.tokens.json delete mode 100644 src/community/utrecht/button.tokens.json delete mode 100644 src/community/utrecht/calendar.tokens.json delete mode 100644 src/community/utrecht/checkbox.tokens.json delete mode 100644 src/community/utrecht/data-list.tokens.json delete mode 100644 src/community/utrecht/focus.tokens.json delete mode 100644 src/community/utrecht/form-control.tokens.json delete mode 100644 src/community/utrecht/form-field-description.tokens.json delete mode 100644 src/community/utrecht/form-field.tokens.json delete mode 100644 src/community/utrecht/form-label.tokens.json delete mode 100644 src/community/utrecht/link.tokens.json delete mode 100644 src/community/utrecht/page-content.tokens.json delete mode 100644 src/community/utrecht/page-footer.tokens.json delete mode 100644 src/community/utrecht/page-header.tokens.json delete mode 100644 src/community/utrecht/page.tokens.json delete mode 100644 src/community/utrecht/paragraph.tokens.json delete mode 100644 src/community/utrecht/radio-button.tokens.json delete mode 100644 src/community/utrecht/select.tokens.json delete mode 100644 src/community/utrecht/textarea.tokens.json delete mode 100644 src/community/utrecht/textbox.tokens.json delete mode 100644 src/community/utrecht/typography.tokens.json delete mode 100644 src/community/utrecht/unordered-list.tokens.json delete mode 100644 src/components/app.tokens.json delete mode 100644 src/components/buttons/button-modifiers.tokens.json delete mode 100644 src/components/buttons/button.tokens.json delete mode 100644 src/components/card.tokens.json delete mode 100644 src/components/checkbox-field.tokens.json delete mode 100644 src/components/editgrid.tokens.json delete mode 100644 src/components/errors.tokens.json delete mode 100644 src/components/fields/checkbox.tokens.json delete mode 100644 src/components/fields/cosign.tokens.json delete mode 100644 src/components/fields/field.tokens.json delete mode 100644 src/components/fields/fieldset.tokens.json delete mode 100644 src/components/fields/file-upload.tokens.json delete mode 100644 src/components/fields/input.tokens.json delete mode 100644 src/components/fields/select.tokens.json create mode 100644 src/components/headings/heading-1.tokens.json create mode 100644 src/components/headings/heading-2.tokens.json create mode 100644 src/components/headings/heading-3.tokens.json create mode 100644 src/components/headings/heading-4.tokens.json delete mode 100644 src/components/helptext.tokens.json delete mode 100644 src/components/input-container.tokens.json delete mode 100644 src/components/input-group.tokens.json delete mode 100644 src/components/label.tokens.json delete mode 100644 src/components/language-selection.tokens.json delete mode 100644 src/components/list.tokens.json delete mode 100644 src/components/login-button-logo/tokens.json delete mode 100644 src/components/login-options.tokens.json delete mode 100644 src/components/page-footer/tokens.json delete mode 100644 src/components/page-header/logo.tokens.json delete mode 100644 src/components/page-header/tokens.json delete mode 100644 src/components/progress-indicator.tokens.json delete mode 100644 src/components/radio-field.tokens.json delete mode 100644 src/components/summary-row/summary-row.tokens.json delete mode 100644 src/components/tooltip.tokens.json diff --git a/README.md b/README.md index 4288ae4..33477d0 100644 --- a/README.md +++ b/README.md @@ -16,6 +16,12 @@ structure of these design tokens. ## Usage +Install the correct modules: + +```bash +npm install +``` + **Using tokens** If you are only _consuming_ the design tokens, the easiest integration path is adding this @@ -41,6 +47,14 @@ npm start to start the watcher which will re-build on changes. +To prettify files: + +Run: + +```bash +npm run format +``` + ## Naming pattern Because of the way style-dictionary works, you have to pay close attention to the structure of the diff --git a/bin/check_token_nesting.py b/bin/check_token_nesting.py index 8ba8d38..677713c 100755 --- a/bin/check_token_nesting.py +++ b/bin/check_token_nesting.py @@ -1,9 +1,12 @@ #!/usr/bin/env python # -# Check the token definitions and the output files for expected number of leaf nodes. +# checking the correctness of the design tokens by comparing the expected number of +# leaf nodes in the source JSON files with the number of emitted variables in the +# generated CSS file. The script itself focuses on the structure of the +# design tokens and how they are translated into CSS variables. # # This linter helps preventing nesting mistakes since style-dictionary has some -# peculiar behavour when nesting tokens and a 'value' key is discovered. +# peculiar behaviour when nesting tokens and a 'value' key is discovered. # # Run as ./bin/check_token_nesting.py # @@ -17,74 +20,75 @@ CONFIG_FILE = ROOT_DIR / "style-dictionary.config.json" -def get_emitted_var_count() -> int: - test_file = ROOT_DIR / "dist" / "root.css" - if not test_file.exists(): - print( - f"Test file {test_file} does not exist, please run 'npm run build' first." - ) - sys.exit(1) +def get_emitted_var_count(file_path: str) -> int: + test_file = ROOT_DIR / "dist" / file_path + if not test_file.exists(): + print( + f"Test file {test_file} does not exist, please run 'npm run build' first.") + sys.exit(1) - num_found = 0 - test_prefix = "--" - with open(test_file, "r") as infile: - for line in infile: - if line.strip().startswith(test_prefix): - num_found += 1 + num_found = 0 + test_prefix = "--" + with open(test_file, "r") as infile: + for line in infile: + if line.strip().startswith(test_prefix): + num_found += 1 - return num_found + return num_found def count_leaf_nodes(data: dict) -> int: - num_leaf_nodes = 0 - for key, value in data.items(): - if key in "value": - if isinstance(value, (dict, list)): - raise TypeError("The 'value' key value must be a scalar") - num_leaf_nodes += 1 - continue - - if key == "comment": - continue - - if key.startswith("$"): - continue - - if isinstance(value, dict): - num_leaf_nodes += count_leaf_nodes(value) - else: - raise TypeError("Expected nested object") + num_leaf_nodes = 0 + for key, value in data.items(): + if key in "value": + if isinstance(value, (dict, list)): + raise TypeError("The 'value' key value must be a scalar") + num_leaf_nodes += 1 + continue + + if key == "comment": + continue + + if key.startswith("$"): + continue - return num_leaf_nodes + if isinstance(value, dict): + num_leaf_nodes += count_leaf_nodes(value) + else: + raise TypeError("Expected nested object") + + return num_leaf_nodes def main(): - os.chdir(ROOT_DIR) + os.chdir(ROOT_DIR) + + with open(CONFIG_FILE, "r") as config_file: + config = json.load(config_file) - with open(CONFIG_FILE, "r") as config_file: - config = json.load(config_file) + NUM_LEAVES = 0 - NUM_LEAVES = 0 + # check the source files + for path_glob in config["source"]: + for path in ROOT_DIR.glob(path_glob): + with open(path, "r") as source_file: + tokens_definition = json.load(source_file) - # check the source files - for path_glob in config["source"]: - for path in ROOT_DIR.glob(path_glob): - with open(path, "r") as source_file: - tokens_definition = json.load(source_file) + NUM_LEAVES += count_leaf_nodes(tokens_definition) - NUM_LEAVES += count_leaf_nodes(tokens_definition) + print(f"Found {NUM_LEAVES} leaf nodes in the source JSON files.") - print(f"Found {NUM_LEAVES} leaf nodes in the source JSON files.") - num_emitted = get_emitted_var_count() - if NUM_LEAVES != num_emitted: - print( - f"Found {num_emitted} emitted variables, while {NUM_LEAVES} were expected.", - file=sys.stdout - ) - sys.exit(1) - else: - print("OK.") + # Update this part to reflect the new file structure + num_emitted = get_emitted_var_count("css/index.css") + if NUM_LEAVES != num_emitted: + print( + f"Found {num_emitted} emitted variables, while {NUM_LEAVES} were expected.", + file=sys.stdout + ) + sys.exit(1) + else: + print("OK.") if __name__ == "__main__": - main() + main() diff --git a/src/common/color.tokens.json b/src/common/color.tokens.json index e6a442a..53fd266 100644 --- a/src/common/color.tokens.json +++ b/src/common/color.tokens.json @@ -7,7 +7,7 @@ } }, "primary": { - "value": "#01689B", + "value": "#0065BD", "comment": "The primary color makes up a large part of the theme, it is used in buttons, accents and link color for example.", "$extensions": { "dte.metadata": { @@ -18,7 +18,7 @@ }, "primary-light": {"value": "#d3e3ec"}, "secondary": { - "value": "#cee0ea", + "value": "#006A0F", "comment": "The secondary compliments the primary color and serves as the default for a number of more fine-grained tokens.", "$extensions": { "dte.metadata": { @@ -27,6 +27,16 @@ } } }, + "accent": { + "value": "#E10019", + "comment": "The accent color is usually the main identity color for a municipality", + "$extensions": { + "dte.metadata": { + "isCurated": true, + "category": "color" + } + } + }, "info": { "value": "#007bc7", "comment": "The highlight color for informational states and/or messages.", @@ -79,7 +89,7 @@ }, "fg": { "value": "#000000", - "comment": "Font/foreground color for the (main) user interface.", + "comment": "Black foreground color for the (main) user interface.", "$extensions": { "dte.metadata": { "isCurated": true, diff --git a/src/common/layout.tokens.json b/src/common/layout.tokens.json index 75819fc..ad367e0 100644 --- a/src/common/layout.tokens.json +++ b/src/common/layout.tokens.json @@ -1,7 +1,7 @@ { "oi": { "layout": { - "bg": {"value": "#E6E6E6"} + "bg": {"value": "#FFFFFF"} } } } diff --git a/src/common/typography.tokens.json b/src/common/typography.tokens.json index 19bef34..5baed2c 100644 --- a/src/common/typography.tokens.json +++ b/src/common/typography.tokens.json @@ -8,12 +8,12 @@ }, "text": { "margin": {"value": "20px"}, - "font-size": {"value": "1rem"}, + "font-size": {"value": "16px"}, "big": { - "font-size": {"value": "1.125rem"} + "font-size": {"value": "24px"} }, "small": { - "font-size": {"value": "0.875rem"} + "font-size": {"value": "14px"} }, "mobile": { "margin": {"value": "{oi.text.margin}"} @@ -31,6 +31,9 @@ "typography": { "sans-serif": { "font-family": {"value": "Roboto, sans-serif"} + }, + "heading": { + "font-family": {"value": "Roboto Medium, sans-serif"} } } } diff --git a/src/community/utrecht/action.tokens.json b/src/community/utrecht/action.tokens.json deleted file mode 100644 index 29f687d..0000000 --- a/src/community/utrecht/action.tokens.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "utrecht": { - "action": { - "activate": { - "cursor": {"value": "pointer"} - }, - "disabled": { - "cursor": { - "value": "not-allowed" - } - }, - "inert": { - "cursor": {"value": "default"} - }, - "submit": { - "cursor": { - "value": "pointer" - } - } - } - } -} diff --git a/src/community/utrecht/alert.tokens.json b/src/community/utrecht/alert.tokens.json deleted file mode 100644 index f8326a2..0000000 --- a/src/community/utrecht/alert.tokens.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "utrecht": { - "alert": { - "icon": { - "gap": { - "value": "16px" - }, - "error": { - "color": { - "value": "{oi.color.danger}" - } - }, - "info": { - "color": { - "value": "{oi.color.info}" - } - }, - "warning": { - "color": { - "value": "{oi.color.warning}" - } - }, - "ok": { - "color": { - "value": "{oi.color.success}" - } - } - }, - "padding-block-end": {"value": "20px"}, - "padding-block-start": {"value": "20px"}, - "padding-inline-start": {"value": "20px"}, - "padding-inline-end": {"value": "20px"}, - "error": { - "background-color": { - "value": "#f8d7da", - "comment": "from formio.form.css .formio-error" - } - }, - "info": { - "background-color": { - "value": "#d9ebf7" - } - }, - "warning": { - "background-color": { - "value": "#fff3cd" - } - }, - "ok": { - "background-color": { - "value": "#ddffdd" - } - } - } - } -} diff --git a/src/community/utrecht/button.tokens.json b/src/community/utrecht/button.tokens.json deleted file mode 100644 index 546f8c5..0000000 --- a/src/community/utrecht/button.tokens.json +++ /dev/null @@ -1,146 +0,0 @@ -{ - "utrecht": { - "button": { - "background-color": {"value": "{oi.button.bg}"}, - "border-color": {"value": "rgba(0,0,0,0)"}, - "border-radius": {"value": "0"}, - "border-width": {"value": "2px"}, - "color": {"value": "{oi.button.fg}"}, - "font-size": {"value": "{oi.text.big.font-size}"}, - "line-height": {"value": "1.333"}, - "min-block-size": {"value": "0"}, - "min-inline-size": {"value": "0"}, - "padding-block-start": {"value": "10.003px"}, - "padding-block-end": {"value": "10.003px"}, - "padding-inline-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"}, - - "focus": { - "border-color": {"value": "transparent"} - }, - - "hover": { - "background-color": {"value": "{oi.button.hover.bg}"}, - "border-color": {"value": "#5e5e5e"}, - "color": {"value": "{oi.button.fg}"} - }, - - "active": { - "background-color": {"value": "{oi.button.active.bg}"}, - "border-color": {"value": "{oi.color.border}"}, - "color": {"value": "{oi.button.active.fg}"} - }, - - "primary-action": { - "background-color": {"value": "{oi.button.primary.bg}"}, - "border-color": {"value": "{oi.color.primary}"}, - "color": {"value": "{oi.button.primary.fg}"}, - - "hover": { - "background-color": {"value": "{oi.button.primary.hover.bg}"}, - "border-color": {"value": "#01537c"}, - "color": {"value": "{oi.button.primary.fg}"} - }, - - "active": { - "background-color": {"value": "{oi.button.primary.active.bg}"}, - "border-color": {"value": "rgba(0,0,0,0)"}, - "color": {"value": "{oi.button.primary.active.fg}"} - }, - - "focus": { - "border-color": {"value": "transparent"} - }, - - "danger": { - "background-color": {"value": "{oi.button.danger.bg}"}, - "border-color": {"value": "#aa2218"}, - "color": {"value": "{oi.button.danger.fg}"}, - - "hover": { - "background-color": {"value": "{oi.button.danger.hover.bg}"}, - "border-color": {"value": "#881b13"}, - "color": {"value": "{oi.button.danger.fg}"} - }, - - "active": { - "background-color": {"value": "{oi.button.danger.active.bg}"}, - "border-color": {"value": "rgba(0,0,0,0)"}, - "color": {"value": "{oi.button.danger.active.fg}"} - }, - - "focus": { - "border-color": {"value": "transparent"} - } - } - }, - - "secondary-action": { - "border-color": {"value": "#5e5e5e"}, - - "focus": { - "border-color": {"value": "transparent"} - }, - - "danger": { - "background-color": {"value": "{oi.color.danger}"}, - "color": {"value": "#fce9e8"}, - - "focus": { - "border-color": {"value": "transparent"} - } - } - }, - - "subtle": { - "border": { - "color": { - "value": "rgba(0,0,0,0)" - } - }, - "hover": { - "background": { - "color": { - "value": "{oi.color.bg}" - } - } - }, - "danger": { - "color": { - "value": "{oi.color.danger}" - }, - "background": { - "color": { - "value": "{oi.color.bg}" - } - }, - "hover": { - "background": { - "color": { - "value": "{oi.color.bg}" - } - } - }, - "active": { - "background": { - "color": { - "value": "#a02017" - } - } - } - } - }, - - "disabled": { - "background": { - "color": { - "value": "#b0b0b0" - } - }, - "color": { - "value": "#ffffff" - } - } - } - } -} diff --git a/src/community/utrecht/calendar.tokens.json b/src/community/utrecht/calendar.tokens.json deleted file mode 100644 index 0d11edf..0000000 --- a/src/community/utrecht/calendar.tokens.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "utrecht": { - "calendar": { - "background-color": {"value": "{oi.color.bg}"}, - "table": { - "padding-block-start": {}, - "padding-block-end": {}, - "weeks-item": { - "width": {"value": "44px"}, - "padding-block-start": {"value": "4px"}, - "padding-block-end": {"value": "10px"}, - "line-height": {"value": "24px"} - }, - "days-item-day": { - "size": {"value": "44px"}, - "color": {"value": "{oi.color.fg}"}, - "border-width": {"value": "2px"}, - "border-color": {"value": "transparent"}, - "hover": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "{oi.button.hover.color-border}"}, - "color": {"value": "{oi.color.fg}"} - }, - "focus": { - "border-color": {"value": "{oi.button.focus.color-border}"} - }, - "active": { - "background-color": {"value": "{oi.button.active.bg}"}, - "color": {"value": "{oi.button.active.fg}"}, - "border-color": {"value": "{oi.button.active.color-border}"} - }, - "out-of-the-month": { - "color": {"value": "{oi.color.fg-muted}"}, - "border-color": {"value": "transparent"}, - "background-color": {} - }, - "is-today": { - "color": {"value": "{oi.color.primary}"}, - "font-weight": {"value": "700"}, - "border-color": {"value": "{oi.color.primary}"}, - "background-color": {"value": "{oi.color.primary-light}"} - }, - "emphasis": { - "color": {}, - "font-weight": {}, - "border-color": {"value": "transparent"}, - "background-color": {} - }, - "selected": { - "color": {"value": "{oi.button.primary.fg}"}, - "font-weight": {}, - "border-color": {"value": "{oi.button.primary.color-border}"}, - "background-color": {"value": "{oi.button.primary.bg}"} - }, - "disabled": { - "color": {"value": "#666666"}, - "border-color": {"value": "transparent"}, - "background-color": {"value": "#e6e6e6"} - } - } - }, - "navigation": { - "background-color": {"value": "{oi.color.bg}"}, - "color": {"value": "{oi.color.fg}"}, - "padding-block-start": {"value": "4px"}, - "padding-block-end": {"value": "4px"}, - "label": { - "min-inline-size": {"value": "200px"}, - "color": {"value": "{oi.color.fg}"}, - "font-size": {"value": "{oi.text.font-size}"} - } - }, - "icon": { - "size": {"value": "24px"} - } - } - } -} diff --git a/src/community/utrecht/checkbox.tokens.json b/src/community/utrecht/checkbox.tokens.json deleted file mode 100644 index 49440ee..0000000 --- a/src/community/utrecht/checkbox.tokens.json +++ /dev/null @@ -1,58 +0,0 @@ -{ - "utrecht": { - "checkbox": { - "background-color": {"value": "{oi.color.bg}"}, - "border-color": {"value": "{oi.field-border.color}"}, - "border-radius": {"value": "0"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oi.color.fg}"}, - "margin-inline-end": {"value": "12px"}, - "size": {"value": "24px"}, - "icon": { - "size": {} - }, - "active": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "hover": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "focus": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "disabled": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "checked": { - "border-color": {}, - "border-width": {}, - "background-color": {"value": "{oi.color.primary}"}, - "color": {"value": "{oi.color.bg}"} - }, - "indeterminate": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "invalid": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - } - } - } -} diff --git a/src/community/utrecht/data-list.tokens.json b/src/community/utrecht/data-list.tokens.json deleted file mode 100644 index c6ea013..0000000 --- a/src/community/utrecht/data-list.tokens.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "utrecht": { - "data-list": { - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "0"}, - "item-key": { - "font-weight": {"value": 700} - }, - "rows": { - "column": { - "inline-size": {"value": "80%"}, - "min-inline-size": {"value": "25ch"} - }, - "item": { - "margin-block-start": {"value": "16px"} - }, - "item-value": { - "margin-block-start": {"value": "0"} - } - } - } - } -} diff --git a/src/community/utrecht/focus.tokens.json b/src/community/utrecht/focus.tokens.json deleted file mode 100644 index ee6cfd0..0000000 --- a/src/community/utrecht/focus.tokens.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "utrecht": { - "focus": { - "outline-color": {"value": "#000"}, - "outline-offset": {"value": "0"}, - "outline-style": {"value": "solid"}, - "outline-width": {"value": "2px"} - } - } -} diff --git a/src/community/utrecht/form-control.tokens.json b/src/community/utrecht/form-control.tokens.json deleted file mode 100644 index ba6df27..0000000 --- a/src/community/utrecht/form-control.tokens.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "utrecht": { - "form-control": { - "background-color": {"value": "{oi.color.bg}"}, - "read-only": { - "background-color": {"value": "{oi.color.read-only.bg}"} - } - } - } -} diff --git a/src/community/utrecht/form-field-description.tokens.json b/src/community/utrecht/form-field-description.tokens.json deleted file mode 100644 index 846f4a3..0000000 --- a/src/community/utrecht/form-field-description.tokens.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "utrecht": { - "form-field-description": { - "color": {"value": "{oi.color.fg}"}, - "font-family": {"value": "{oi.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oi.text.font-size}"}, - "font-style": {"value": "normal"}, - "invalid": { - "color": {"value": "{oi.color.danger}"} - }, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "8px"} - } - } -} diff --git a/src/community/utrecht/form-field.tokens.json b/src/community/utrecht/form-field.tokens.json deleted file mode 100644 index 87f478d..0000000 --- a/src/community/utrecht/form-field.tokens.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "utrecht": { - "form-field": { - "invalid": { - "border-inline-start": { - "color": {"value": "{oi.color.danger}"}, - "width": {"value": "4px"} - }, - "padding-inline-start": {"value": "16px"} - }, - "label": { - "margin-block-end": {"value": "8px"} - } - } - } -} diff --git a/src/community/utrecht/form-label.tokens.json b/src/community/utrecht/form-label.tokens.json deleted file mode 100644 index 56ba592..0000000 --- a/src/community/utrecht/form-label.tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "utrecht": { - "form-label": { - "color": {"value": "{oi.color.fg}"}, - "font-weight": {"value": "{oi.label.font-weight}"}, - "font-size": {"value": "{oi.text.big.font-size}"} - } - } -} diff --git a/src/community/utrecht/link.tokens.json b/src/community/utrecht/link.tokens.json deleted file mode 100644 index e4b7204..0000000 --- a/src/community/utrecht/link.tokens.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "utrecht": { - "link": { - "color": {"value": "{oi.color.primary}"}, - "text-decoration": { - "value": "underline" - }, - "hover": { - "color": {"value": "{oi.color.primary}"}, - "text-decoration": { - "value": "none" - } - }, - "current": { - "font-weight": {"value": "bold"} - }, - "placeholder": { - "color": {"value": "{oi.color.fg-muted}"} - } - } - } -} diff --git a/src/community/utrecht/page-content.tokens.json b/src/community/utrecht/page-content.tokens.json deleted file mode 100644 index c004bfd..0000000 --- a/src/community/utrecht/page-content.tokens.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "utrecht": { - "page-content": { - "padding-block-end": {"value": "20px"}, - "padding-block-start": {"value": "20px"} - } - }, - "oi": { - "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-footer.tokens.json b/src/community/utrecht/page-footer.tokens.json deleted file mode 100644 index 688c603..0000000 --- a/src/community/utrecht/page-footer.tokens.json +++ /dev/null @@ -1,56 +0,0 @@ -{ - "utrecht": { - "page-footer": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Default Open Forms footer styling." - } - }, - - "color": {"value": "{oi.color.bg}"}, - "background-color": {"value": "{oi.color.primary}"}, - "background-image": {}, - "padding-inline-end": {"value": "20px"}, - "padding-inline-start": {"value": "20px"}, - "padding-block-end": {"value": "20px"}, - "padding-block-start": {"value": "20px"} - } - }, - "oi": { - "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/community/utrecht/page-header.tokens.json b/src/community/utrecht/page-header.tokens.json deleted file mode 100644 index 0a17728..0000000 --- a/src/community/utrecht/page-header.tokens.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "utrecht": { - "page-header": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Default Open Forms header styling." - } - }, - - "background-color": {"value": "#ffffff"}, - "color": {"value": "{oi.color.fg}"}, - "padding-inline-end": {"value": "20px"}, - "padding-inline-start": {"value": "20px"}, - "padding-block-end": {"value": "20px"}, - "padding-block-start": {"value": "20px"} - } - }, - - "oi": { - "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/community/utrecht/page.tokens.json b/src/community/utrecht/page.tokens.json deleted file mode 100644 index c62d3b3..0000000 --- a/src/community/utrecht/page.tokens.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "utrecht": { - "page": { - "padding-inline-end": {"value": "20px"}, - "padding-inline-start": {"value": "20px"} - } - }, - "oi": { - "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"} - } - } - } -} diff --git a/src/community/utrecht/paragraph.tokens.json b/src/community/utrecht/paragraph.tokens.json deleted file mode 100644 index 1388ec1..0000000 --- a/src/community/utrecht/paragraph.tokens.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "utrecht": { - "paragraph": { - "margin-block-end": {"value": 0}, - "margin-block-start": {"value": 0} - } - } -} diff --git a/src/community/utrecht/radio-button.tokens.json b/src/community/utrecht/radio-button.tokens.json deleted file mode 100644 index 8a8c323..0000000 --- a/src/community/utrecht/radio-button.tokens.json +++ /dev/null @@ -1,70 +0,0 @@ -{ - "utrecht": { - "radio-button": { - "size": {"value": "24px"}, - "border-color": {"value": "{oi.field-border.color}"}, - "color": {"value": "{oi.color.fg}"}, - "border-width": {"value": "1px"}, - "background-color": {"value": "{oi.color.bg}"}, - "border-radius": {"value": "0"}, - "margin-inline-end": {"value": "12px"}, - "icon": { - "size": {"value": "30%"} - }, - - "active": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "focus": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "hover": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "disabled": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "checked": { - "border-color": {}, - "border-width": {}, - "background-color": {"value": "{oi.color.primary}"}, - "color": {"value": "{oi.color.bg}"}, - "active": { - "background-color": {}, - "border-color": {}, - "border-width": {}, - "color": {} - }, - "focus": { - "border-color": {}, - "border-width": {}, - "background-color": {}, - "color": {} - }, - "hover": { - "background-color": {}, - "border-width": {}, - "border-color": {}, - "color": {} - } - }, - "invalid": { - "border-color": {}, - "border-width": {}, - "color": {} - } - } - } -} diff --git a/src/community/utrecht/select.tokens.json b/src/community/utrecht/select.tokens.json deleted file mode 100644 index ee638f9..0000000 --- a/src/community/utrecht/select.tokens.json +++ /dev/null @@ -1,34 +0,0 @@ -{ - "utrecht": { - "select": { - "background-color": {"value": "{oi.color.bg}"}, - "border-bottom-width": {}, - "border-color": {"value": "{oi.color.border}"}, - "border-radius": {"value": "0"}, - "border-width": {"value": "1px"}, - "color": {}, - "font-family": {}, - "font-size": {}, - "max-inline-size": {"value": "100%"}, - "padding-block-end": {"value": "12px"}, - "padding-block-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "12px"}, - "disabled": { - "background-color": {"value": "{oi.color.read-only.bg}"}, - "border-color": {}, - "color": {} - }, - "focus": { - "background-color": {}, - "border-color": {}, - "color": {} - }, - "invalid": { - "background-color": {}, - "border-color": {}, - "border-width": {} - } - } - } -} diff --git a/src/community/utrecht/textarea.tokens.json b/src/community/utrecht/textarea.tokens.json deleted file mode 100644 index eba531d..0000000 --- a/src/community/utrecht/textarea.tokens.json +++ /dev/null @@ -1,24 +0,0 @@ -{ - "utrecht": { - "textarea": { - "background-color": {"value": "{oi.color.bg}"}, - "border-bottom-width": {"value": "1px"}, - "border-color": {"value": "{oi.color.border}"}, - "border-radius": {"value": "0"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oi.color.fg}"}, - "font-family": {"value": "{oi.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oi.text.font-size}"}, - "line-height": {"value": "1.5"}, - "max-inline-size": {"value": "none"}, - "padding-block-end": {"value": "12px"}, - "padding-block-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "12px"}, - "placeholder-color": {"value": "{oi.color.fg-muted}"}, - "disabled": { - "background-color": {"value": "#e9ecef"} - } - } - } -} diff --git a/src/community/utrecht/textbox.tokens.json b/src/community/utrecht/textbox.tokens.json deleted file mode 100644 index bf0d1db..0000000 --- a/src/community/utrecht/textbox.tokens.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "utrecht": { - "textbox": { - "background-color": {"value": "{oi.color.bg}"}, - "border-color": {"value": "{oi.color.border}"}, - "border-radius": {"value": "0"}, - "border-width": {"value": "1px"}, - "color": {"value": "{oi.color.fg}"}, - "font-family": {"value": "{oi.typography.sans-serif.font-family}"}, - "font-size": {"value": "{oi.text.font-size}"}, - "line-height": {"value": "1.5"}, - "max-inline-size": {"value": "none"}, - "padding-block-end": {"value": "12px"}, - "padding-block-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "12px"}, - "placeholder": { - "color": {"value": "{oi.color.fg-muted}"} - }, - "disabled": { - "background-color": {"value": "{oi.color.read-only.bg}"} - }, - "read-only": { - "background-color": {"value": "{oi.color.read-only.bg}"} - } - } - } -} diff --git a/src/community/utrecht/typography.tokens.json b/src/community/utrecht/typography.tokens.json deleted file mode 100644 index b2c508a..0000000 --- a/src/community/utrecht/typography.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "utrecht": { - "document": { - "font-family": {"value": "{oi.typography.sans-serif.font-family}"} - } - } -} diff --git a/src/community/utrecht/unordered-list.tokens.json b/src/community/utrecht/unordered-list.tokens.json deleted file mode 100644 index a685ef0..0000000 --- a/src/community/utrecht/unordered-list.tokens.json +++ /dev/null @@ -1,19 +0,0 @@ -{ - "utrecht": { - "unordered-list": { - "font-size": {}, - "line-height": {}, - "margin-block-start": {"value": "12px"}, - "margin-block-end": {"value": "20px"}, - "padding-inline-start": {}, - "item": { - "margin-block-start": {"value": "4px"}, - "margin-block-end": {}, - "padding-inline-start": {"value": "8px"} - }, - "marker": { - "color": {} - } - } - } -} diff --git a/src/components/app.tokens.json b/src/components/app.tokens.json deleted file mode 100644 index 9e934d5..0000000 --- a/src/components/app.tokens.json +++ /dev/null @@ -1,40 +0,0 @@ -{ - "oi": { - "app": { - "$extensions": { - "dte.metadata": { - "groupDescription": "The outer SDK form 'app' wrapper." - } - }, - "body": { - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - "mobile": { - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "15px"} - } - }, - - "grid-column-gap": {"value": "20px"}, - - "mobile": { - "grid-row-gap": {"value": "0"}, - "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"} - }, - - "progress-indicator": { - "mobile": { - "inset-block-start": {"value": "0"}, - "margin-inline-end": {"value": "calc(-1 * {oi.app.mobile.padding-inline-end})"}, - "margin-inline-start": {"value": "calc(-1 * {oi.app.mobile.padding-inline-start})"} - } - } - } - } -} diff --git a/src/components/buttons/button-modifiers.tokens.json b/src/components/buttons/button-modifiers.tokens.json deleted file mode 100644 index 649106d..0000000 --- a/src/components/buttons/button-modifiers.tokens.json +++ /dev/null @@ -1,75 +0,0 @@ -{ - "oi": { - "button": { - "hover": { - "bg": {"value": "#cccccc"}, - "color-border": {"value": "#5e5e5e"} - }, - "active": { - "fg": {"value": "{oi.color.fg}"}, - "bg": {"value": "#bfbfbf"}, - "color-border": {"value": "#5e5e5e"} - }, - "focus": { - "color-border": {"value": "{oi.color.focus.border}"} - }, - "focus-visible": { - "color-border": {"value": "{oi.color.focus.border}"} - }, - - "anchor": { - "hover": { - "bg": {"value": "transparent"}, - "color-border": {"value": "transparent"} - }, - "active": { - "fg": {"value": "#014e74"}, - "bg": {"value": "transparent"}, - "color-border": {"value": "transparent"} - }, - "focus": { - "color-border": {"value": "{oi.color.focus.border}"} - }, - "focus-visible": { - "color-border": {"value": "{oi.color.focus.border}"} - } - }, - - "primary": { - "hover": { - "bg": {"value": "#016698"}, - "color-border": {"value": "#01537c"} - }, - "active": { - "fg": {"value": "#bfbfbf"}, - "bg": {"value": "#01608f"}, - "color-border": {"value": "#01537c"} - }, - "focus": { - "color-border": {"value": "#000000"} - }, - "focus-visible": { - "color-border": {"value": "#000000"} - } - }, - - "danger": { - "hover": { - "bg": {"value": "#aa2218"}, - "color-border": {"value": "#881b13"} - }, - "active": { - "fg": {"value": "#ee837d"}, - "bg": {"value": "#a02017"}, - "color-border": {"value": "#881b13"} - }, - "focus": { - "color-border": {"value": "#000000"} - }, - "focus-visible": { - "color-border": {"value": "#000000"} - } - } - } - } -} diff --git a/src/components/buttons/button.tokens.json b/src/components/buttons/button.tokens.json deleted file mode 100644 index d61c7ef..0000000 --- a/src/components/buttons/button.tokens.json +++ /dev/null @@ -1,27 +0,0 @@ -{ - "oi": { - "button": { - "fg": {"value": "{oi.color.fg}"}, - "bg": {"value": "{oi.color.bg}"}, - "color-border": {"value": "{oi.color.border}"}, - - "anchor": { - "fg": {"value": "{utrecht.link.color}"}, - "bg": {"value": "transparent"}, - "color-border": {"value": "transparent"} - }, - - "primary": { - "fg": {"value": "#ffffff"}, - "bg": {"value": "#0177b2"}, - "color-border": {"value": "{oi.color.primary}"} - }, - - "danger": { - "fg": {"value": "#fce9e8"}, - "bg": {"value": "{oi.color.danger}"}, - "color-border": {"value": "#aa2218"} - } - } - } -} diff --git a/src/components/card.tokens.json b/src/components/card.tokens.json deleted file mode 100644 index 72ec805..0000000 --- a/src/components/card.tokens.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "oi": { - "card": { - "background-color": {"value": "{oi.color.bg}"}, - "padding-block-end": {"value": "40px"}, - "padding-block-start": {"value": "40px"}, - "padding-inline-end": {"value": "40px"}, - "padding-inline-start": {"value": "40px"} - } - } -} diff --git a/src/components/checkbox-field.tokens.json b/src/components/checkbox-field.tokens.json deleted file mode 100644 index f65451e..0000000 --- a/src/components/checkbox-field.tokens.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "oi": { - "utrecht-form-field": { - "checkbox": { - "margin-block-start": {"value": "8px"}, - "label": { - "margin-block-end": {"value": 0} - } - } - }, - "utrecht-form-label": { - "checkbox": { - "focus-within": { - "outline": {"value": "1px solid {oi.color.primary}"} - }, - "padding-block-start": {"value": "11px"}, - "padding-block-end": {"value": "11px"}, - "padding-inline-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"} - } - } - } -} diff --git a/src/components/editgrid.tokens.json b/src/components/editgrid.tokens.json deleted file mode 100644 index 18d1f23..0000000 --- a/src/components/editgrid.tokens.json +++ /dev/null @@ -1,45 +0,0 @@ -{ - "oi": { - "editgrid": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Theming for the editgrid (repeating group) component." - } - }, - - "line-height": {"value": 1.5}, - "gap": { - "value": "8px", - "comment": "Spacing consistent with label (bottom) and help text (top) margins." - }, - - "item": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Tokens for a single item in a repeating group." - } - }, - - "gap": {"value": "12px"}, - "border": {"value": "solid 1px {oi.color.border}"}, - "padding-block-end": {"value": "24px"}, - "padding-block-start": {"value": "24px"}, - "padding-inline-end": {"value": "24px"}, - "padding-inline-start": {"value": "24px"} - }, - - "item-heading": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Appearance of item/group legend/heading." - } - }, - - "font-family": {"value": "{oi.typography.sans-serif.font-family}"}, - "font-size": {"value": "0.875rem"}, - "line-height": {"value": "1.2"}, - "margin-block-end": {"value": "24px"} - } - } - } -} diff --git a/src/components/errors.tokens.json b/src/components/errors.tokens.json deleted file mode 100644 index 5699622..0000000 --- a/src/components/errors.tokens.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "oi": { - "utrecht-form-field-description": { - "errors": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Open Forms extensions of utrecht-form-field-description (for errors)" - } - }, - "font-weight": {"value": "bold"}, - "line-height": {"value": 1.33} - } - } - } -} diff --git a/src/components/fields/checkbox.tokens.json b/src/components/fields/checkbox.tokens.json deleted file mode 100644 index 14b544c..0000000 --- a/src/components/fields/checkbox.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "oi": { - "checkbox": { - "bg": {"value": "#F3F3F3"} - } - } -} diff --git a/src/components/fields/cosign.tokens.json b/src/components/fields/cosign.tokens.json deleted file mode 100644 index 0549e73..0000000 --- a/src/components/fields/cosign.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "oi": { - "cosign": { - "bg": {"value": "{oi.checkbox.bg}"} - } - } -} diff --git a/src/components/fields/field.tokens.json b/src/components/fields/field.tokens.json deleted file mode 100644 index 347c1da..0000000 --- a/src/components/fields/field.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "oi": { - "field-border": { - "color": {"value": "#979797"} - } - } -} diff --git a/src/components/fields/fieldset.tokens.json b/src/components/fields/fieldset.tokens.json deleted file mode 100644 index ecc32eb..0000000 --- a/src/components/fields/fieldset.tokens.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "oi": { - "fieldset": { - "legend": { - "color": { - "value": "{oi.color.primary}" - } - } - } - } -} diff --git a/src/components/fields/file-upload.tokens.json b/src/components/fields/file-upload.tokens.json deleted file mode 100644 index ab2bc70..0000000 --- a/src/components/fields/file-upload.tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "oi": { - "file-upload": { - "drop-area": { - "padding": {"value": "15px"} - } - } - } -} diff --git a/src/components/fields/input.tokens.json b/src/components/fields/input.tokens.json deleted file mode 100644 index 50429ba..0000000 --- a/src/components/fields/input.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "oi": { - "input": { - "font-weight": {"value": "bold"} - } - } -} diff --git a/src/components/fields/select.tokens.json b/src/components/fields/select.tokens.json deleted file mode 100644 index d8fa51c..0000000 --- a/src/components/fields/select.tokens.json +++ /dev/null @@ -1,39 +0,0 @@ -{ - "oi": { - "select": { - "$extensions": { - "dte.metadata": { - "groupDescription": "(Deprecated) select component theming." - } - }, - "highlighted": { - "bg": { - "value": "#E6E6E6" - } - } - }, - "select-menu": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Select component theming, partially based on utrecht-select." - } - }, - "background-color": {"value": "{oi.color.bg}"}, - "border": {"value": "solid 1px {oi.color.border}"}, - "border-radius": {"value": "0"}, - "box-shadow": {"value": "0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)"}, - "margin-block-end": {"value": "0"}, - "margin-block-start": {"value": "-1px"}, - "option": { - "font-weight": {"value": "normal"}, - "padding-block-end": {"value": "10px"}, - "padding-block-start": {"value": "10px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "12px"}, - "focus": { - "background-color": {"value": "#E6E6E6"} - } - } - } - } -} diff --git a/src/components/headings/heading-1.tokens.json b/src/components/headings/heading-1.tokens.json new file mode 100644 index 0000000..997fb83 --- /dev/null +++ b/src/components/headings/heading-1.tokens.json @@ -0,0 +1,14 @@ +{ + "oi": { + "heading-1": { + "color": {"value": "{oi.color.fg}"}, + "font-family": {"value": "{oi.typography.heading.font-family}"}, + "font-size": {"value": "32px"}, + "font-weight": {"value": "500"}, + "letter-spacing": {"value": "normal"}, + "line-height": {"value": "41px"}, + "margin-block-end": {"value": "0"}, + "margin-block-start": {"value": "0"} + } + } +} diff --git a/src/components/headings/heading-2.tokens.json b/src/components/headings/heading-2.tokens.json new file mode 100644 index 0000000..053cc21 --- /dev/null +++ b/src/components/headings/heading-2.tokens.json @@ -0,0 +1,14 @@ +{ + "oi": { + "heading-2": { + "color": {"value": "{oi.color.fg}"}, + "font-family": {"value": "{oi.typography.heading.font-family}"}, + "font-size": {"value": "24px"}, + "font-weight": {"value": "500"}, + "letter-spacing": {"value": "normal"}, + "line-height": {"value": "34px"}, + "margin-block-end": {"value": "0"}, + "margin-block-start": {"value": "0"} + } + } +} diff --git a/src/components/headings/heading-3.tokens.json b/src/components/headings/heading-3.tokens.json new file mode 100644 index 0000000..c0a8f79 --- /dev/null +++ b/src/components/headings/heading-3.tokens.json @@ -0,0 +1,13 @@ +{ + "oi": { + "heading-3": { + "color": {"value": "{oi.color.fg}"}, + "font-family": {"value": "{oi.typography.heading.font-family}"}, + "font-size": {"value": "20px"}, + "font-weight": {"value": "500"}, + "line-height": {"value": "30px"}, + "margin-block-end": {"value": "0"}, + "margin-block-start": {"value": "0"} + } + } +} diff --git a/src/components/headings/heading-4.tokens.json b/src/components/headings/heading-4.tokens.json new file mode 100644 index 0000000..8e23289 --- /dev/null +++ b/src/components/headings/heading-4.tokens.json @@ -0,0 +1,13 @@ +{ + "oi": { + "heading-4": { + "color": {"value": "{oi.color.fg}"}, + "font-family": {"value": "{oi.typography.heading.font-family}"}, + "font-size": {"value": "16px"}, + "font-weight": {"value": "500"}, + "line-height": {"value": "26px"}, + "margin-block-end": {"value": "0"}, + "margin-block-start": {"value": "0"} + } + } +} diff --git a/src/components/helptext.tokens.json b/src/components/helptext.tokens.json deleted file mode 100644 index 85ac0d3..0000000 --- a/src/components/helptext.tokens.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "oi": { - "helptext": { - "bg": {"value": "#d3e3ec"}, - "fg": {"value": "{oi.color.fg}"} - }, - "utrecht-form-field-description": { - "$extensions": { - "dte.metadata": { - "groupDescription": "Open Forms extensions of utrecht-form-field-description" - } - }, - "background-color": {"value": "#d3e3ec"}, - "border-left": { - "color": {"value": "{oi.color.info}"}, - "width": {"value": "4px"} - }, - "line-height": {"value": "1.5"}, - "padding-block": {"value": "11px"}, - "padding-inline": {"value": "16px"} - } - } -} diff --git a/src/components/input-container.tokens.json b/src/components/input-container.tokens.json deleted file mode 100644 index 0b54870..0000000 --- a/src/components/input-container.tokens.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "oi": { - "input-container": { - "affix": { - "background-color": {"value": "transparent"}, - "border-color": {"value": "transparent"}, - "border-style": {"value": "none"}, - "border-width": {"value": 0}, - "padding-inline": { - "value": "{utrecht.textbox.padding-inline-start} {utrecht.textbox.padding-inline-end}" - }, - "padding-block": { - "value": "{utrecht.textbox.padding-block-start} {utrecht.textbox.padding-block-end}" - }, - "line-height": {"value": "{utrecht.textbox.line-height}"} - }, - "gap": {}, - "prefix": { - "border-start-start-radius": {}, - "border-end-start-radius": {}, - "margin-inline-end": {} - }, - "suffix": { - "border-start-end-radius": {}, - "border-end-end-radius": {}, - "margin-inline-start": {} - } - } - } -} diff --git a/src/components/input-group.tokens.json b/src/components/input-group.tokens.json deleted file mode 100644 index 66db1f5..0000000 --- a/src/components/input-group.tokens.json +++ /dev/null @@ -1,16 +0,0 @@ -{ - "oi": { - "input-group": { - "justify-content": {"value": "flex-start"}, - "align-items": {"value": "center"}, - "gap": {"value": "12px"}, - "invalid": { - "border-inline-start": { - "color": {"value": "transparent"}, - "width": {"value": "0"} - }, - "padding-inline-start": {"value": "0"} - } - } - } -} diff --git a/src/components/label.tokens.json b/src/components/label.tokens.json deleted file mode 100644 index cc3832f..0000000 --- a/src/components/label.tokens.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "oi": { - "label": { - "font-weight": {"value": "normal"} - } - } -} diff --git a/src/components/language-selection.tokens.json b/src/components/language-selection.tokens.json deleted file mode 100644 index b1182eb..0000000 --- a/src/components/language-selection.tokens.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "oi": { - "language-selection": { - "gap": {"value": ".2em"}, - - "in-app": { - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "0"}, - - "mobile": { - "padding-block-end": {"value": "0"}, - "padding-block-start": {"value": "15px"} - } - } - } - } -} diff --git a/src/components/list.tokens.json b/src/components/list.tokens.json deleted file mode 100644 index 43aba2b..0000000 --- a/src/components/list.tokens.json +++ /dev/null @@ -1,15 +0,0 @@ -{ - "oi": { - "list": { - "gap": {"value": "20px"}, - - "compact": { - "gap": {"value": "8px"} - }, - - "extra-compact": { - "gap": {"value": "0"} - } - } - } -} diff --git a/src/components/login-button-logo/tokens.json b/src/components/login-button-logo/tokens.json deleted file mode 100644 index 7d13ce3..0000000 --- a/src/components/login-button-logo/tokens.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "oi": { - "login-button-logo": { - "dark": { - "focus": { - "color-border": {"value": "{oi.color.focus.border}"} - }, - "focus-visible": { - "color-border": {"value": "{oi.color.focus.border}"} - } - }, - "light": { - "focus": { - "color-border": {"value": "#000000"} - }, - "focus-visible": { - "color-border": {"value": "#000000"} - } - } - } - } -} diff --git a/src/components/login-options.tokens.json b/src/components/login-options.tokens.json deleted file mode 100644 index 520e707..0000000 --- a/src/components/login-options.tokens.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "oi": { - "login-options": { - "cosign": { - "background-color": {"value": "{oi.color.read-only.bg}"}, - "padding-block": {"value": "0.6em"}, - "padding-inline": {"value": "0.6em"} - } - } - } -} diff --git a/src/components/page-footer/tokens.json b/src/components/page-footer/tokens.json deleted file mode 100644 index a8f320c..0000000 --- a/src/components/page-footer/tokens.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "oi": { - "page-footer": { - "$extensions": { - "dte.metadata": { - "groupDescription": "DEPRECATED - use utrecht-page-footer tokens instead." - } - }, - "bg": {"value": "{oi.color.primary}"}, - "fg": {"value": "{oi.color.bg}"} - } - } -} diff --git a/src/components/page-header/logo.tokens.json b/src/components/page-header/logo.tokens.json deleted file mode 100644 index 22d548e..0000000 --- a/src/components/page-header/logo.tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "oi": { - "header-logo": { - "url": {"value": "none"}, - "width": {"value": "auto"}, - "height": {"value": "auto"} - } - } -} diff --git a/src/components/page-header/tokens.json b/src/components/page-header/tokens.json deleted file mode 100644 index 1353613..0000000 --- a/src/components/page-header/tokens.json +++ /dev/null @@ -1,53 +0,0 @@ -{ - "oi": { - "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"} - }, - "tablet": { - "padding": {"value": "{oi.text.tablet.margin}"} - }, - "laptop": { - "padding": {"value": "{oi.text.laptop.margin}"} - }, - "desktop": { - "padding": {"value": "{oi.text.desktop.margin}"} - }, - - "logo-return-url": { - "$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": "{oi.page-header.logo-return-url.min-height}"}, - "min-inline-size": {"value": "{oi.page-header.logo-return-url.min-width}"}, - - "mobile": { - "min-height": {"value": "25px"}, - "min-width": {"value": "50px"}, - - "min-block-size": {"value": "{oi.page-header.logo-return-url.mobile.min-height}"}, - "min-inline-size": {"value": "{oi.page-header.logo-return-url.mobile.min-width}"} - } - } - } - } -} diff --git a/src/components/progress-indicator.tokens.json b/src/components/progress-indicator.tokens.json deleted file mode 100644 index 227d55d..0000000 --- a/src/components/progress-indicator.tokens.json +++ /dev/null @@ -1,44 +0,0 @@ -{ - "oi": { - "progress-indicator": { - "background-color": {"value": "{oi.color.bg}"}, - "inset-block-start": {"value": "{oi.app.grid-column-gap}"}, - "mobile": { - "box-shadow": {"value": "0px 0px 2px 0px rgba(0, 0, 0, 0.2)"}, - "padding-block-end": {"value": "15px"}, - "padding-block-start": {"value": "15px"}, - "padding-inline-end": {"value": "15px"}, - "padding-inline-start": {"value": "15px"} - }, - "mobile-header": { - "color": {"value": "inherit"}, - "font-family": {"value": "{oi.typography.sans-serif.font-family}"}, - "font-size": {"value": "1.125rem"}, - "gap": {"value": "0px"}, - "icon": { - "flex-basis": {"value": "30px"} - }, - "line-height": {"value": "1.1333"} - }, - "nav": { - "gap": { - "comment": "Spacing between title and link list.", - "value": "20px" - }, - "mobile": { - "list": { - "gap": {"value": "15px"} - }, - "padding-block-end": {"value": "15px"}, - "padding-block-start": {"value": "15px"}, - "padding-inline-end": {"value": "15px"}, - "padding-inline-start": {"value": "15px"} - } - }, - "padding-block-end": {"value": "40px"}, - "padding-block-start": {"value": "40px"}, - "padding-inline-end": {"value": "40px"}, - "padding-inline-start": {"value": "40px"} - } - } -} diff --git a/src/components/radio-field.tokens.json b/src/components/radio-field.tokens.json deleted file mode 100644 index 4768b13..0000000 --- a/src/components/radio-field.tokens.json +++ /dev/null @@ -1,23 +0,0 @@ -{ - "oi": { - "utrecht-form-field": { - "radio": { - "margin-block-start": {"value": "8px"}, - "label": { - "margin-block-end": {"value": 0} - } - } - }, - "utrecht-form-label": { - "radio": { - "focus-within": { - "outline": {"value": "1px solid {oi.color.primary}"} - }, - "padding-block-start": {"value": "11px"}, - "padding-block-end": {"value": "11px"}, - "padding-inline-start": {"value": "12px"}, - "padding-inline-end": {"value": "12px"} - } - } - } -} diff --git a/src/components/summary-row/summary-row.tokens.json b/src/components/summary-row/summary-row.tokens.json deleted file mode 100644 index a4430bb..0000000 --- a/src/components/summary-row/summary-row.tokens.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "oi": { - "summary-row": { - "spacing": { - "value": "10px" - } - } - } -} diff --git a/src/components/tooltip.tokens.json b/src/components/tooltip.tokens.json deleted file mode 100644 index 29dc316..0000000 --- a/src/components/tooltip.tokens.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "oi": { - "tooltip": { - "arrow": { - "color": {"value": "#ae9e49"}, - "height": {"value": "16px"}, - "width": {"value": "8px"} - }, - "background-color": {"value": "#fff3cd"}, - "border-color": {"value": "{oi.tooltip.arrow.color}"}, - "border-width": {"value": "1px"}, - "box-shadow": { - "value": "1px 0 0 #e6e6e6, -1px 0 0 #e6e6e6, 0 1px 0 #e6e6e6, 0 -1px 0 #e6e6e6, 0 3px 13px rgba(0, 0, 0, 0.08)" - }, - "font-size": {"value": "1rem"}, - "offset": {"value": "10px"}, - "padding-block-end": {"value": "6px"}, - "padding-block-start": {"value": "6px"}, - "padding-inline-end": {"value": "12px"}, - "padding-inline-start": {"value": "12px"} - }, - "tooltip-icon": { - "color": {"value": "{oi.color.fg-muted}"} - } - } -} diff --git a/style-dictionary.config.json b/style-dictionary.config.json index 09aa4f9..f4d4d11 100644 --- a/style-dictionary.config.json +++ b/style-dictionary.config.json @@ -4,15 +4,22 @@ "./src/**/*.tokens.json" ], "platforms": { - "css-theme": { + "css": { "transforms": ["attribute/cti", "name/cti/kebab", "color/hsl-4"], - "buildPath": "dist/", + "buildPath": "dist/css/", "files": [ { "destination": "index.css", "format": "css/variables", "options": { - "selector": ".openinwoner-theme", + "outputReferences": true + } + }, + { + "destination": "components/headings.css", + "format": "css/variables", + "options": { + "selector": ".heading-1", "outputReferences": true } } @@ -30,20 +37,6 @@ } } ] - }, - "js": { - "transforms": ["attribute/cti", "name/cti/camel", "color/hsl-4"], - "buildPath": "dist/", - "files": [ - { - "destination": "index.js", - "format": "javascript/es6" - }, - { - "destination": "tokens.js", - "format": "javascript/module" - } - ] } } }