From e2cadc3ecf5f7776543644ce8bfddd81a5acf665 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 13 Dec 2023 12:21:25 +0100 Subject: [PATCH] updated Noaberkracht theme --- .../src/brand/noaberkracht/color.tokens.json | 39 +++++++ .../conduction/card-wrapper.tokens.json | 1 + .../component/conduction/checkbox.tokens.json | 69 +++++++++++ .../conduction/download-card.tokens.json | 23 ++++ .../src/component/conduction/logo.tokens.json | 27 +++++ .../conduction/navigation.tokens.json | 67 +++++++++++ .../conduction/pagination.tokens.json | 109 +++++++++++------- .../component/conduction/select.tokens.json | 13 ++- .../conduction/table-wrapper.tokens.json | 21 ++++ .../src/component/conduction/tabs.tokens.json | 11 ++ .../component/conduction/tooltip.tokens.json | 17 +++ .../open-catalogi/rating.tokens.json | 12 ++ .../src/component/utrecht/badge.tokens.json | 15 +++ .../component/utrecht/breadcrumb.tokens.json | 35 ++++++ .../extra-tokens/breadcrumb.tokens.json | 21 ++++ .../extra-tokens/page-footer.tokens.json | 25 +++- .../extra-tokens/radio-button.tokens.json | 14 +++ .../utrecht/extra-tokens/table.tokens.json | 3 +- .../src/component/utrecht/link.tokens.json | 2 +- .../utrecht/radio-button.tokens.json | 68 +++++++++++ .../component/utrecht/separator.tokens.json | 10 ++ .../src/component/utrecht/surface.tokens.json | 2 +- .../src/config.json | 10 ++ 23 files changed, 569 insertions(+), 45 deletions(-) create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/checkbox.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/download-card.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/logo.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/navigation.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/table-wrapper.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/conduction/tooltip.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/open-catalogi/rating.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/badge.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/breadcrumb.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/radio-button.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/radio-button.tokens.json create mode 100644 proprietary/noaberkracht-design-tokens/src/component/utrecht/separator.tokens.json diff --git a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json index 09a3d6487..d740458f0 100644 --- a/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/brand/noaberkracht/color.tokens.json @@ -24,9 +24,34 @@ "value": "#003790", "comment": "Base/Blue from Huisstijlhandboek, base color of website is #012c9d" }, + "31": { + "value": "#012c9d" + }, + "31-10t": { + "value": "#012c9d1a", + "comment": "Blue with 10% transparency" + }, + "31-50t": { + "value": "#012c9d80", + "comment": "Blue with 50% transparency" + }, "31-60t": { "value": "#012c9d99", "comment": "Blue with 60% transparency" + }, + "31-80t": { + "value": "#012c9dcc", + "comment": "Blue with 80% transparency" + }, + "46": { + "value": "#1967d2" + }, + "59": { + "value": "#6780c4", + "comment": "Blue color for over 31-60t color" + }, + "93": { + "value": "#e5e9f5" } }, "yellow": { @@ -35,6 +60,20 @@ "comment": "Base/Yellow from Huisstijlhandboek, base color of website is #f0af00" } }, + "grey": { + "31": { + "value": "#4f4f4f" + }, + "46": { + "value": "#767676" + }, + "82": { + "value": "#d1d1d1" + }, + "97": { + "value": "#f7f7f7" + } + }, "lightgrey": { "96": { "value": "#f5f5f5", diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json index 80da59270..91d56cc9a 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/card-wrapper.tokens.json @@ -9,6 +9,7 @@ "border-bottom-style": {}, "border-bottom-width": {}, "border-radius": { "value": "22px" }, + "box-shadow": {}, "color": { "value": "{noaberkracht.color.blue.22}" }, "hover": { "background-color": {}, diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/checkbox.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/checkbox.tokens.json new file mode 100644 index 000000000..4bce1e052 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/checkbox.tokens.json @@ -0,0 +1,69 @@ +{ + "conduction": { + "input-checkbox": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.grey.46}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {}, + "hover": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.grey.31}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {} + }, + "checked": { + "color": { "value": "{noaberkracht.color.primary}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.primary}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {}, + "checkmark-url": {}, + "hover": { + "color": { "value": "{noaberkracht.color.primary-hover}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.primary-hover}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {} + } + }, + "disabled": { + "color": { "value": "{noaberkracht.color.grey.82}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.grey.82}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {}, + "hover": { + "color": { "value": "{noaberkracht.color.grey.82}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.grey.82}" }, + "border-radius": { "value": "3px" }, + "box-shadow": {} + } + }, + "focus": { + "outline-width": { "value": "2px" }, + "outline-style": { "value": "solid" }, + "outline-color": { "value": "{noaberkracht.color.black.0}" }, + "outline-offset": { "value": "2px" } + }, + "label": { + "color": { "value": "{utrecht.document.color}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": {}, + "font-family": { "value": "{utrecht.document.font-family}" }, + "container": { + "padding": { "value": "3px" }, + "margin": { "value": "3px" } + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/download-card.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/download-card.tokens.json new file mode 100644 index 000000000..9235f46bc --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/download-card.tokens.json @@ -0,0 +1,23 @@ +{ + "conduction": { + "download-card": { + "background-color": {}, + "title": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "font-size": { "value": "{noaberkracht.font-size.md}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "margin-inline-end": { "value": "{noaberkracht.size.sm}" } + }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.blue.22}" }, + "border-radius": { "value": "22px" }, + "icon-gap": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-end": { "value": "{noaberkracht.size.md}" }, + "padding-inline-start": { "value": "{noaberkracht.size.md}" }, + "padding-block-end": { "value": "{noaberkracht.size.md}" }, + "padding-block-start": { "value": "{noaberkracht.size.md}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/logo.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/logo.tokens.json new file mode 100644 index 000000000..5f4c73847 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/logo.tokens.json @@ -0,0 +1,27 @@ +{ + "conduction": { + "logo": { + "header": { + "inline-size": { "value": "130px" }, + "block-size": { "value": "75px" }, + "background-image": { + "value": "url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png')" + } + }, + "footer": { + "inline-size": { "value": "150px" }, + "block-size": { "value": "87px" }, + "background-image": { + "value": "url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png')" + } + }, + "navbar": { + "inline-size": { "value": "69px" }, + "block-size": { "value": "43px" }, + "background-image": { + "value": "url('https://werkenbijnoaberkracht.nl/assets/img/base/logo.png')" + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/navigation.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/navigation.tokens.json new file mode 100644 index 000000000..55a05169b --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/navigation.tokens.json @@ -0,0 +1,67 @@ +{ + "conduction": { + "primary": { + "top-nav": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "{noaberkracht.color.blue.59}" }, + "hover": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "{noaberkracht.color.blue.59}" }, + "box-shadow": {} + }, + "current": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "{noaberkracht.color.blue.59}" }, + "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" }, + "mobile": { + "box-shadow": { "value": "inset 4px 0 {noaberkracht.color.yellow.47}" } + } + }, + "dropdown": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "{noaberkracht.color.blue.59}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.blue.31-60t}" }, + "hover": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "{noaberkracht.color.blue.59}" }, + "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" } + } + }, + "item": { + "padding": { "value": "18px" }, + "border-radius": {} + }, + "padding-inline-end": { "value": "16px" }, + "padding-inline-start": { "value": "16px" }, + "padding-block-end": { "value": "16px" }, + "padding-block-start": { "value": "16px" } + } + }, + "secondary": { + "top-nav": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "transparent" }, + "hover": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "transparent" } + }, + "current": { + "color": { "value": "{noaberkracht.color.white.100}" }, + "background-color": { "value": "unset" }, + "box-shadow": { "value": "inset 0 -4px {noaberkracht.color.yellow.47}" } + }, + "font-size": { "value": "{noaberkracht.font-size.xs}" }, + "font-weight": { "value": "400" }, + "item": { + "padding": { "value": "18px" } + }, + "padding-inline-end": { "value": "16px" }, + "padding-inline-start": { "value": "16px" }, + "padding-block-end": { "value": "16px" }, + "padding-block-start": { "value": "16px" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json index b6af5eeb7..fc46133d7 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/pagination.tokens.json @@ -1,45 +1,76 @@ { "conduction": { "pagination": { - "container-background-color": { "value": "unset" }, - "container-padding-inline-start": { "value": "0px" }, - "container-padding-inline-end": { "value": "0px" }, - "container-padding-block-start": { "value": "0px" }, - "container-padding-block-end": { "value": "0px" }, - "item-gap": { "value": "{noaberkracht.size.2xs}" }, - "item-color": { "value": "{noaberkracht.color.black.0}" }, - "item-background-color": { "value": "{noaberkracht.color.white.100}" }, - "item-border-radius": { "value": "{noaberkracht.size.md}" }, - "item-padding-inline-start": { "value": "{noaberkracht.size.sm}" }, - "item-padding-inline-end": { "value": "{noaberkracht.size.sm}" }, - "item-padding-block-start": { "value": "{noaberkracht.size.xs}" }, - "item-padding-block-end": { "value": "{noaberkracht.size.xs}" }, - "item-font-size": { "value": "{utrecht.document.font-size}" }, - "item-font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, - "item-font-family": { "value": "{utrecht.document.font-family}" }, - "item-border-width": {}, - "item-border-style": {}, - "item-border-color": {}, - "navigation-button-padding-inline-start": { "value": "{noaberkracht.size.xs}" }, - "navigation-button-padding-inline-end": { "value": "{noaberkracht.size.xs}" }, - "navigation-button-padding-block-start": { "value": "0px" }, - "navigation-button-padding-block-end": { "value": "0px" }, - "disabled-color": {}, - "disabled-background-color": { "value": "{noaberkracht.color.lightgrey.96}" }, - "current-page-color": { "value": "{noaberkracht.color.white.100}" }, - "current-page-background-color": { "value": "{noaberkracht.color.yellow.47}" }, - "current-page-font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, - "current-page-text-decoration": { "value": "unset" }, - "current-page-border-width": {}, - "current-page-border-style": {}, - "current-page-border-color": {}, - "page-hover-color": { "value": "{noaberkracht.color.yellow.47}" }, - "page-hover-background-color": { "value": "{noaberkracht.color.white.100}" }, - "page-hover-text-decoration": { "value": "unset" }, - "page-hover-text-decoration-thickness": { "value": "0px" }, - "page-hover-border-width": {}, - "page-hover-border-style": {}, - "page-hover-border-color": {} + "container": { + "background-color": { "value": "unset" }, + "padding-inline-start": { "value": "0px" }, + "padding-inline-end": { "value": "0px" }, + "padding-block-start": { "value": "0px" }, + "padding-block-end": { "value": "0px" } + }, + "item": { + "gap": { "value": "{noaberkracht.size.2xs}" }, + "color": { "value": "{noaberkracht.color.blue.31}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "font-family": { "value": "{noaberkracht.typography.oceanwide.font-family}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-radius": { "value": "{noaberkracht.size.md}" } + }, + "navigation-button": { + "color": { "value": "{noaberkracht.color.blue.31-50t}" }, + "background-color": { "value": "transparent" }, + "border-color": {}, + "border-radius": {}, + "border-width": {}, + "padding-inline-start": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-end": { "value": "{noaberkracht.size.xs}" }, + "padding-block-start": { "value": "0px" }, + "padding-block-end": { "value": "0px" }, + "disabled": { + "color": {}, + "background-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-radius": {} + }, + "hover": { + "color": { "value": "{noaberkracht.color.blue.31-50t}" }, + "background-color": { "value": "{noaberkracht.color.blue.31-10t}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "border-radius": {} + } + }, + "current-page": { + "color": { "value": "{noaberkracht.color.blue.31}" }, + "background-color": { "value": "{noaberkracht.color.blue.31-10t}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.bold}" }, + "text-decoration": { "value": "unset" }, + "border-width": {}, + "border-style": {}, + "border-color": {} + }, + "page": { + "hover": { + "color": { "value": "{noaberkracht.color.blue.31}" }, + "background-color": { "value": "{noaberkracht.color.blue.31-10t}" }, + "text-decoration": { "value": "unset" }, + "text-decoration-thickness": { "value": "0px" }, + "border-width": {}, + "border-style": {}, + "border-color": {} + } + } } } } diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json index eabdf8aed..1e42f9531 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/select.tokens.json @@ -13,10 +13,19 @@ "list-option": { "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, "background-color": {}, + "color": { "value": "{noaberkracht.color.blue.31}" }, "hover": { "font-family": { "value": "{noaberkracht.typography.greycliff-cf.font-family}" }, - "color": {}, - "background-color": {} + "background-color": { "value": "{noaberkracht.color.blue.46}" }, + "color": { "value": "{noaberkracht.color.white.100}" } + }, + "selected": { + "background-color": { "value": "{noaberkracht.color.blue.46}" }, + "color": { "value": "{noaberkracht.color.white.100}" } + }, + "focus": { + "background-color": { "value": "{noaberkracht.color.blue.46}" }, + "color": { "value": "{noaberkracht.color.white.100}" } } }, "placeholder": { diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/table-wrapper.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/table-wrapper.tokens.json new file mode 100644 index 000000000..9227cb08a --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/table-wrapper.tokens.json @@ -0,0 +1,21 @@ +{ + "conduction": { + "table-wrapper": { + "scroll-button": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{utrecht.document.color}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "padding-block-start": {}, + "padding-block-end": {}, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "border-style": { "value": "solid" }, + "border-color": { "value": "{noaberkracht.color.lightgrey.96}" }, + "hover": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.yellow.47}" } + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json index b06c7c8fa..a0bf816be 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/tabs.tokens.json @@ -67,6 +67,17 @@ "border-color": {}, "border-top": {} } + }, + "scroll-button": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{utrecht.document.color}" }, + "border-width": {}, + "border-style": {}, + "border-color": {}, + "hover": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.yellow.47}" } + } } } } diff --git a/proprietary/noaberkracht-design-tokens/src/component/conduction/tooltip.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/conduction/tooltip.tokens.json new file mode 100644 index 000000000..54f6b3c80 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/conduction/tooltip.tokens.json @@ -0,0 +1,17 @@ +{ + "conduction": { + "tooltip": { + "background-color": { "value": "{noaberkracht.color.black.0}" }, + "color": { "value": "{noaberkracht.color.white.100}" }, + "padding-block-start": { "value": "{noaberkracht.size.xs}" }, + "padding-block-end": { "value": "{noaberkracht.size.xs}" }, + "padding-inline-start": { "value": "{noaberkracht.size.sm}" }, + "padding-inline-end": { "value": "{noaberkracht.size.sm}" }, + "border-width": { "value": "0px" }, + "border-style": { "value": "unset" }, + "border-color": { "value": "unset" }, + "border-radius": { "value": "0px" }, + "z-index": { "value": "9999" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/open-catalogi/rating.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/open-catalogi/rating.tokens.json new file mode 100644 index 000000000..e630a9164 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/open-catalogi/rating.tokens.json @@ -0,0 +1,12 @@ +{ + "open-catalogi": { + "rating": { + "rating-bar": { + "color": { "value": "{noaberkracht.color.blue.22}" }, + "background-color": {} + }, + "font-size": { "value": "{utrecht.document.font-size}" }, + "font-family": { "value": "{utrecht.document.font-family}" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge.tokens.json new file mode 100644 index 000000000..d7a52aa39 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/badge.tokens.json @@ -0,0 +1,15 @@ +{ + "utrecht": { + "badge": { + "background-color": { "value": "{noaberkracht.color.blue.31} " }, + "border-radius": { "value": "9999px" }, + "color": { "value": "{noaberkracht.color.white.100} " }, + "font-size": { "value": "{noaberkracht.font-size.sm}" }, + "font-weight": { "value": "{noaberkracht.typography.font-weight.normal}" }, + "line-height": {}, + "padding-block": { "value": "{noaberkracht.size.xs}" }, + "padding-inline": { "value": "{noaberkracht.size.xs}" }, + "text-transform": {} + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/breadcrumb.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/breadcrumb.tokens.json new file mode 100644 index 000000000..2a65df3c2 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/breadcrumb.tokens.json @@ -0,0 +1,35 @@ +{ + "utrecht": { + "breadcrumb-nav": { + "block-size": {}, + "font-family": { "value": "{utrecht.document.font-family}" }, + "font-size": {}, + "text-transform": {}, + "item": { + "padding-block-start": {}, + "padding-block-end": {}, + "padding-inline-end": {}, + "padding-inline-start": {} + }, + "link": { + "background-color": {}, + "color": { "value": "{noaberkracht.color.yellow.47}" }, + "focus": { + "background-color": {}, + "color": {} + }, + "current": { + "background-color": {}, + "color": { "value": "{noaberkracht.color.blue.22}" } + } + }, + "separator": { + "color": { "value": "{noaberkracht.color.yellow.47}" }, + "inline-size": {}, + "icon": { + "size": { "value": "{noaberkracht.font-size.sm}" } + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json new file mode 100644 index 000000000..368d9e6ca --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/breadcrumb.tokens.json @@ -0,0 +1,21 @@ +{ + "utrecht": { + "breadcrumb-nav": { + "background-color": {}, + "padding-inline-start": { "value": "0" }, + "padding-inline-end": { "value": "0" }, + "padding-block-start": { "value": "12px" }, + "padding-block-end": { "value": "12px" }, + "link": { + "disabled": { + "background-color": {}, + "color": { "value": "{noaberkracht.color.blue.22}" } + }, + "hover": { + "background-color": {}, + "color": { "value": "{noaberkracht.color.yellow.47}" } + } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json index dae9e4710..6d431c88a 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/page-footer.tokens.json @@ -6,7 +6,30 @@ "max-height": {}, "max-width": { "value": "150px" } }, - "background-position": {} + "background-size": {}, + "background-position": {}, + "mobile": { + "background-position": {} + }, + "icon": { + "color": {} + }, + "heading": { + "color": {}, + "font-family": {} + }, + "link": { + "color": {}, + "text-decoration": { "value": "underline" }, + "text-decoration-color": { "value": "unset" }, + "text-decoration-thickness": { "value": "{noaberkracht.size.4xs}" }, + "text-underline-offset": { "value": "{noaberkracht.size.3xs}" }, + "hover": { + "color": {}, + "text-decoration": { "value": "underline" }, + "text-decoration-thickness": { "value": "{noaberkracht.size.4xs}" } + } + } } } } diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/radio-button.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/radio-button.tokens.json new file mode 100644 index 000000000..021fd6d7a --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/radio-button.tokens.json @@ -0,0 +1,14 @@ +{ + "utrecht": { + "radio-button": { + "min-block-size": { "value": "16px" }, + "min-inline-size": { "value": "16px" }, + "checked-disabled": { + "border-color": { "value": "{noaberkracht.color.grey.82}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.grey.82}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json index 1104f49a8..625d0ecc7 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/extra-tokens/table.tokens.json @@ -1,7 +1,8 @@ { "utrecht": { "table": { - "background-color": {}, + "border-collapse": { "value": "collapse" }, + "background-color": { "value": "{noaberkracht.color.white.100}"}, "header": { "border-block-end-color": {}, "border-block-end-width": {}, diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json index aaf091f69..53a9d2df8 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/link.tokens.json @@ -3,7 +3,7 @@ "link": { "color": { "value": "{noaberkracht.color.blue.22}" }, "text-decoration": { "value": "underline" }, - "text-decoration-color": { "value": "{noaberkracht.color.blue.22}" }, + "text-decoration-color": { "value": "currentColor" }, "text-decoration-thickness": { "value": "{noaberkracht.size.4xs}" }, "text-underline-offset": { "value": "{noaberkracht.size.3xs}" }, "active": { diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/radio-button.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/radio-button.tokens.json new file mode 100644 index 000000000..7da6aded5 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/radio-button.tokens.json @@ -0,0 +1,68 @@ +{ + "utrecht": { + "radio-button": { + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "border-color": { "value": "{noaberkracht.color.grey.46}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "size": {}, + "margin-block-start": {}, + "icon": { + "size": { "value": "5px" } + }, + "active": { + "border-color": {}, + "border-width": {}, + "background-color": {}, + "color": {} + }, + "checked": { + "border-color": { "value": "{noaberkracht.color.primary}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.primary}" }, + "active": { + "border-color": { "value": "{noaberkracht.color.primary}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.primary}" } + }, + "hover": { + "border-color": { "value": "{noaberkracht.color.primary-hover}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.primary-hover}" } + }, + "focus": { + "border-color": { "value": "{noaberkracht.color.primary}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.primary}" } + } + }, + "hover": { + "border-color": { "value": "{noaberkracht.color.grey.31}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": {} + }, + "focus": { + "border-color": { "value": "{noaberkracht.color.primary}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.primary}" } + }, + "disabled": { + "border-color": { "value": "{noaberkracht.color.grey.82}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.grey.97}" }, + "color": { "value": "{noaberkracht.color.grey.82}" } + }, + "invalid": { + "border-color": { "value": "{noaberkracht.color.error}" }, + "border-width": { "value": "{noaberkracht.size.4xs}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, + "color": { "value": "{noaberkracht.color.error}" } + } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/separator.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/separator.tokens.json new file mode 100644 index 000000000..1fb4ce496 --- /dev/null +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/separator.tokens.json @@ -0,0 +1,10 @@ +{ + "utrecht": { + "separator": { + "color": { "value": "{noaberkracht.color.yellow.47}" }, + "block-size": { "value": "{noaberkracht.size.4xs}" }, + "margin-block-end": { "value": "0px" }, + "margin-block-start": { "value": "0px" } + } + } +} diff --git a/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json b/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json index e9c507c6c..cea6731fb 100644 --- a/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json +++ b/proprietary/noaberkracht-design-tokens/src/component/utrecht/surface.tokens.json @@ -1,7 +1,7 @@ { "utrecht": { "surface": { - "background-color": { "value": "{noaberkracht.color.white.98}" }, + "background-color": { "value": "{noaberkracht.color.white.100}" }, "color": {} } } diff --git a/proprietary/noaberkracht-design-tokens/src/config.json b/proprietary/noaberkracht-design-tokens/src/config.json index 6b6c0a548..50ad9c989 100644 --- a/proprietary/noaberkracht-design-tokens/src/config.json +++ b/proprietary/noaberkracht-design-tokens/src/config.json @@ -9,12 +9,15 @@ "react-utrecht-alert--error", "react-utrecht-alert--ok", "react-utrecht-badge-counter--default", + "react-utrecht-breadcrumb-nav--default", + "react-utrecht-breadcrumb-nav--separator", "react-utrecht-button--default", "react-utrecht-button--hover", "react-utrecht-button--primary-action-button", "react-utrecht-button--secondary-action-button", "react-utrecht-code--default", "react-utrecht-code-block--default", + "react-utrecht-document--default", "react-utrecht-heading-1--default", "react-utrecht-heading-2--default", "react-utrecht-heading-3--default", @@ -28,6 +31,13 @@ "react-utrecht-page-header--default", "react-utrecht-page-footer--default", "react-utrecht-paragraph--default", + "react-utrecht-radio-button--default", + "react-utrecht-radio-button--hover", + "react-utrecht-radio-button--focus", + "react-utrecht-radio-button--checked", + "react-utrecht-radio-button--checked-and-disabled", + "react-utrecht-radio-button--disabled", + "react-utrecht-separator--default", "react-utrecht-surface--default", "react-utrecht-table--default", "react-utrecht-textbox--default",