Skip to content

Commit

Permalink
feat: add tokens for nl-heading, nl-paragraph, nl-mark, nl-code-block…
Browse files Browse the repository at this point in the history
…, nl-skip-link, nl-number-badge and nl-data-badge
  • Loading branch information
Robbert committed Dec 11, 2024
1 parent 5c0b34c commit 64bf12a
Show file tree
Hide file tree
Showing 20 changed files with 225 additions and 64 deletions.
13 changes: 13 additions & 0 deletions proprietary/design-tokens/src/component/nl/code-block.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
{
"nl": {
"code-block": {
"background-color": { "value": "{utrecht.color.grey.95}" },
"color": { "value": "{utrecht.color.black}" },
"font-family": { "value": "\"Monaco\"" },
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"padding-block": { "value": "20px" },
"padding-inline": { "value": "20px" }
}
}
}
11 changes: 11 additions & 0 deletions proprietary/design-tokens/src/component/nl/code.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"nl": {
"code": {
"background-color": {},
"color": {},
"font-family": {},
"font-size": {},
"line-height": {}
}
}
}
22 changes: 22 additions & 0 deletions proprietary/design-tokens/src/component/nl/data-badge.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"nl": {
"data-badge": {
"background-color": {
"value": "{utrecht.color.grey.30}"
},
"border-radius": {
"value": "0"
},
"color": {
"value": "{utrecht.color.white}"
},
"font-weight": {},
"padding-block": {
"value": "{utrecht.space.block.xs}"
},
"padding-inline": {
"value": "{utrecht.space.inline.sm}"
}
}
}
}
48 changes: 48 additions & 0 deletions proprietary/design-tokens/src/component/nl/heading.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
{
"nl": {
"heading": {
"level-1": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.4xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" }
},
"level-2": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" }
},
"level-3": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" }
},
"level-4": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" }
},
"level-5": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" }
},
"level-6": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" }
}
}
}
}
8 changes: 8 additions & 0 deletions proprietary/design-tokens/src/component/nl/mark.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"nl": {
"mark": {
"background-color": { "value": "{utrecht.color.yellow.60}" },
"color": { "value": "{utrecht.color.black}" }
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"nl": {
"number-badge": {
"background-color": {
"value": "{utrecht.color.red.40}"
},
"border-radius": {
"value": "{nl.number-badge.font-size}"
},
"color": {
"value": "{utrecht.color.white}"
},
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"font-weight": {},
"padding-block": {
"value": "1ex"
},
"padding-inline": {
"value": "1ex"
}
}
}
}
20 changes: 20 additions & 0 deletions proprietary/design-tokens/src/component/nl/paragraph.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"nl": {
"paragraph": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"lead": {
"color": { "value": "{utrecht.document.color}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" }
},
"small": {
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }
}
}
}
}
16 changes: 16 additions & 0 deletions proprietary/design-tokens/src/component/nl/skip-link.tokens.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
{
"nl": {
"skip-link": {
"background-color": { "value": "{utrecht.topnav.list.background-color}" },
"color": { "value": "{utrecht.topnav.link.color}" },
"padding-block": { "value": "{utrecht.button.padding-block-start}" },
"padding-inline": { "value": "{utrecht.button.padding-inline-start}" },
"text-decoration": { "value": "{utrecht.link.text-decoration}" },
"focus-visible": {
"color": { "value": "{utrecht.topnav.link.focus.color}" },
"background-color": { "value": "{utrecht.topnav.link.focus.background-color}" },
"text-decoration": { "value": "{utrecht.link.focus-visible.text-decoration}" }
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@
"utrecht": {
"badge": {
"background-color": {
"value": "{utrecht.color.grey.30}"
"value": "{nl.data-badge.background-color}"
},
"border-radius": {
"value": "0"
"value": "{nl.data-badge.border-radius}"
},
"color": {
"value": "{utrecht.color.white}"
"value": "{nl.data-badge.color}"
},
"font-weight": {},
"padding-block": {
"value": "{utrecht.space.block.xs}"
"value": "{nl.data-badge.padding-block}"
},
"font-style": {
"value": "{utrecht.typography.font-style.normal}"
},
"padding-inline": {
"value": "{utrecht.space.inline.sm}"
"value": "{nl.data-badge.padding-inline}"
}
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
{
"utrecht": {
"code-block": {
"background-color": { "value": "{utrecht.color.grey.95}" },
"color": { "value": "{utrecht.color.black}" },
"font-family": {},
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"background-color": { "value": "{nl.code-block.background-color}" },
"color": { "value": "{nl.code-block.color}" },
"font-family": { "value": "{nl.code-block.font-family}" },
"font-size": { "value": "{nl.code-block.font-size}" },
"line-height": { "value": "{nl.code-block.line-height}" },
"margin-block-end": { "value": "{utrecht.space.block.lg}" },
"margin-block-start": { "value": "{utrecht.space.block.lg}" },
"margin-inline-end": {},
"margin-inline-start": {},
"padding-block-end": { "value": "20px" },
"padding-block-start": { "value": "20px" },
"padding-inline-end": { "value": "20px" },
"padding-inline-start": { "value": "20px" }
"padding-block-end": { "value": "{nl.code-block.padding-block}" },
"padding-block-start": { "value": "{nl.code-block.padding-block}" },
"padding-inline-end": { "value": "{nl.code-block.padding-inline}" },
"padding-inline-start": { "value": "{nl.code-block.padding-inline}" }
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-1": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.4xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" },
"font-family": { "value": "{nl.heading.level-1.font-family}" },
"font-size": { "value": "{nl.heading.level-1.font-size}" },
"font-weight": { "value": "{nl.heading.level-1.font-weight}" },
"line-height": { "value": "{nl.heading.level-1.line-height}" },
"margin-block-end": { "value": "0.67rem" },
"margin-block-start": { "value": "0.67rem" },
"text-transform": {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-2": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.bold.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" },
"font-family": { "value": "{nl.heading.level-2.font-family}" },
"font-size": { "value": "{nl.heading.level-2.font-size}" },
"font-weight": { "value": "{nl.heading.level-2.font-weight}" },
"line-height": { "value": "{nl.heading.level-2.line-height}" },
"margin-block-end": { "value": "0.3rem" },
"margin-block-start": { "value": "1.5rem" },
"text-transform": {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-3": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.sm}" },
"font-family": { "value": "{nl.heading.level-3.font-family}" },
"font-size": { "value": "{nl.heading.level-3.font-size}" },
"font-weight": { "value": "{nl.heading.level-3.font-weight}" },
"line-height": { "value": "{nl.heading.level-3.line-height}" },
"margin-block-end": { "value": "0.2rem" },
"margin-block-start": { "value": "1rem" },
"text-transform": {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-4": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.lg.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"font-family": { "value": "{nl.heading.level-4.font-family}" },
"font-size": { "value": "{nl.heading.level-4.font-size}" },
"font-weight": { "value": "{nl.heading.level-4.font-weight}" },
"line-height": { "value": "{nl.heading.level-4.line-height}" },
"margin-block-end": { "value": "0.3rem" },
"margin-block-start": { "value": "1.2rem" },
"text-transform": {}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-5": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"font-family": { "value": "{nl.heading.level-5.font-family}" },
"font-size": { "value": "{nl.heading.level-5.font-size}" },
"font-weight": { "value": "{nl.heading.level-5.font-weight}" },
"line-height": { "value": "{nl.heading.level-5.line-height}" },
"margin-block-end": { "value": "0.2rem" },
"margin-block-start": { "value": "1rem" }
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@
"utrecht": {
"heading-6": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"font-family": { "value": "{nl.heading.level-6.font-family}" },
"font-size": { "value": "{nl.heading.level-6.font-size}" },
"font-weight": { "value": "{nl.heading.level-6.font-weight}" },
"line-height": { "value": "{nl.heading.level-6.line-height}" },
"margin-block-end": {},
"margin-block-start": {}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"utrecht": {
"mark": {
"background-color": { "value": "{utrecht.color.yellow.60}" },
"color": { "value": "{utrecht.color.black}" }
"background-color": { "value": "{nl.mark.background-color}" },
"color": { "value": "{nl.mark.color}" }
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,21 @@
"utrecht": {
"number-badge": {
"background-color": {
"value": "{utrecht.color.red.40}"
"value": "{nl.number-badge.background-color}"
},
"border-radius": {
"value": "{utrecht.number-badge.font-size}"
"value": "{nl.number-badge.border-radius}"
},
"color": {
"value": "{utrecht.color.white}"
"value": "{nl.number-badge.color}"
},
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"font-size": { "value": "{nl.number-badge.font-size}" },
"font-weight": {},
"padding-block": {
"value": "1ex"
"value": "{nl.number-badge.padding-block}"
},
"padding-inline": {
"value": "1ex"
"value": "{nl.number-badge.padding-inline}"
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@
"utrecht": {
"paragraph": {
"color": {},
"font-family": { "value": "{utrecht.typography.sans-serif.font-family}" },
"font-size": { "value": "{utrecht.typography.scale.md.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" },
"font-family": { "value": "{nl.paragraph.font-family}" },
"font-size": { "value": "{nl.paragraph.font-size}" },
"font-weight": { "value": "{nl.paragraph.font-weight}" },
"line-height": { "value": "{nl.paragraph.line-height}" },
"margin-block-start": { "value": "{utrecht.space.block.md}" },
"margin-block-end": { "value": "0" },
"lead": {
"color": { "value": "{utrecht.document.color}" },
"font-size": { "value": "{utrecht.typography.scale.xl.font-size}" },
"font-weight": { "value": "{utrecht.typography.weight-scale.normal.font-weight}" },
"line-height": { "value": "{utrecht.typography.line-height.md}" }
"color": {},
"font-size": { "value": "{nl.paragraph.lead.font-size}" },
"font-weight": { "value": "{nl.paragraph.lead.font-weight}" },
"line-height": { "value": "{nl.paragraph.lead.line-height}" }
},
"small": {
"font-size": { "value": "{utrecht.typography.scale.sm.font-size}" }
Expand Down
Loading

0 comments on commit 64bf12a

Please sign in to comment.