Skip to content

Commit

Permalink
refactor: updated xxllnc theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@remko48
remko48 committed Dec 13, 2023
1 parent 822100f commit 2667f3b
Show file tree
Hide file tree
Showing 21 changed files with 569 additions and 42 deletions.
42 changes: 42 additions & 0 deletions proprietary/xxllnc-design-tokens/src/brand/xxllnc/color.tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,10 +35,26 @@
}
},
"black": {
"0": {
"value": "#000000"
},
"0-22t": {
"value": "#00000038",
"comment": "Black with 22% transparency"
},
"6": {
"value": "#0e0d10"
},
"10": {
"value": "#1a1a1a"
},
"12-6-7t": {
"value": "#1e1e2010",
"comment": "Black with transparency between 6% and 7%"
},
"14": {
"value": "#202125"
},
"16": {
"value": "#28282c",
"comment": "Base/Black"
Expand All @@ -52,28 +68,54 @@
},
"21": {
"value": "#333338"
},
"23": {
"value": "#39383f"
}
},
"grey": {
"31": {
"value": "#4f4f4f"
},
"43": {
"value": "#6d6d6d"
},
"46": {
"value": "#767676"
},
"90": {
"value": "#e5e5e5"
},
"82": {
"value": "#d1d1d1"
},
"90-hover": {
"value": "#e5e5e5cc",
"comment": "Grey with 80% transparency"
},
"92": {
"value": "#eaeaea",
"comment": "Base/Grey"
},
"97": {
"value": "#f7f7f7"
}
},
"lightgrey": {
"86": {
"value": "#dbdbdb"
},
"87": {
"value": "#dddddd"
},
"96": {
"value": "#f5f5f5"
}
},
"blue": {
"66": {
"value": "#5897fb"
}
}
}
}
Expand Down
1 change: 1 addition & 0 deletions proprietary/xxllnc-design-tokens/src/component/conduction/card-wrapper.tokens.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
"border-bottom-style": {},
"border-bottom-width": {},
"border-radius": { "value": "{xxllnc.size.md}" },
"box-shadow": {},
"color": { "value": "{xxllnc.color.white.95}" },
"hover": {
"background-color": {},
Expand Down
69 changes: 69 additions & 0 deletions proprietary/xxllnc-design-tokens/src/component/conduction/checkbox.tokens.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{
"conduction": {
"input-checkbox": {
"color": { "value": "{xxllnc.color.white.100}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.grey.46}" },
"border-radius": { "value": "3px" },
"box-shadow": {},
"hover": {
"color": { "value": "{xxllnc.color.white.100}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.grey.31}" },
"border-radius": { "value": "3px" },
"box-shadow": {}
},
"checked": {
"color": { "value": "{xxllnc.color.primary}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.primary}" },
"border-radius": { "value": "3px" },
"box-shadow": {},
"checkmark-url": {},
"hover": {
"color": { "value": "{xxllnc.color.primary-hover}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.primary-hover}" },
"border-radius": { "value": "3px" },
"box-shadow": {}
}
},
"disabled": {
"color": { "value": "{xxllnc.color.grey.82}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.grey.82}" },
"border-radius": { "value": "3px" },
"box-shadow": {},
"hover": {
"color": { "value": "{xxllnc.color.grey.82}" },
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.grey.82}" },
"border-radius": { "value": "3px" },
"box-shadow": {}
}
},
"focus": {
"outline-width": { "value": "2px" },
"outline-style": { "value": "solid" },
"outline-color": { "value": "{xxllnc.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" }
}
}
}
}
}
23 changes: 23 additions & 0 deletions proprietary/xxllnc-design-tokens/src/component/conduction/download-card.tokens.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"conduction": {
"download-card": {
"background-color": { "value": "transparent" },
"title": {
"color": { "value": "{utrecht.document.color}" },
"font-size": { "value": "{xxllnc.font-size.lg}" },
"font-weight": { "value": "{xxllnc.typography.font-weight.bold}" },
"font-family": { "value": "{xxllnc.typography.sans-serif.font-family}" },
"margin-inline-end": { "value": "{xxllnc.size.sm}" }
},
"border-width": { "value": "{xxllnc.size.4xs}" },
"border-style": { "value": "solid" },
"border-color": { "value": "{xxllnc.color.grey.82}" },
"border-radius": { "value": "{xxllnc.size.md}" },
"icon-gap": { "value": "{xxllnc.size.xs}" },
"padding-inline-end": { "value": "{xxllnc.size.md}" },
"padding-inline-start": { "value": "{xxllnc.size.md}" },
"padding-block-end": { "value": "{xxllnc.size.md}" },
"padding-block-start": { "value": "{xxllnc.size.md}" }
}
}
}
27 changes: 27 additions & 0 deletions proprietary/xxllnc-design-tokens/src/component/conduction/logo.tokens.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"conduction": {
"logo": {
"header": {
"inline-size": { "value": "70px" },
"block-size": { "value": "20px" },
"background-image": {
"value": "url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzUuNCA0Mi4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNzUuNCA0Mi4yOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik03OC4zLDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE05NC44LDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE02NC41LDkuNEw1My40LDIwLjhsLTExLTExLjRsLTQuOCw0LjlsMTEuMSwxMS40TDM3LjYsMzcuMQoJbDQuOCw0LjlsMTEuMS0xMS40bDExLDExLjRsNC44LTQuOUw1OC4yLDI1LjdsMTEuMS0xMS40TDY0LjUsOS40eiBNMjcuMiw5LjRMMTYuMSwyMC44TDUuMSw5LjRsLTQuOCw0LjlsMTEuMSwxMS40TDAuMywzNy4xTDUuMSw0MgoJbDExLjEtMTEuNGwxMSwxMS40bDQuOC00LjlMMjAuOSwyNS43TDMyLDE0LjNMMjcuMiw5LjR6IE0xMjQuOCwxMC43Yy04LjIsMC0xNC4zLDUuMi0xNC4zLDE0LjF2MTUuOWg3LjJWMjVjMC00LjgsMy03LjMsNy4xLTcuMwoJczcuMSwyLjYsNy4xLDcuM3YxNS44aDcuMnYtMTZDMTM5LjEsMTUuOCwxMzMsMTAuNywxMjQuOCwxMC43eiBNMTYwLjQsMzQuOGMtNC41LDAtOC4yLTMuOS04LjItOC44YzAtNC44LDMuNy04LjgsOC4yLTguOAoJYzMuNCwwLDYuMywyLjIsNy41LDUuM2g3LjJjLTEuMy03LTcuMS0xMS44LTE0LjYtMTEuOGMtOC44LDAtMTUuMiw2LjUtMTUuMiwxNS40YzAsOC44LDYuNCwxNS4zLDE1LjIsMTUuMwoJYzcuNSwwLDEzLjMtNC44LDE0LjYtMTEuN2gtNy4yQzE2Ni42LDMyLjYsMTYzLjcsMzQuOCwxNjAuNCwzNC44eiIvPgo8L3N2Zz4K')"
}
},
"footer": {
"inline-size": { "value": "120px" },
"block-size": { "value": "100px" },
"background-image": {
"value": "url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzUuNCA0Mi4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNzUuNCA0Mi4yOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik03OC4zLDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE05NC44LDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE02NC41LDkuNEw1My40LDIwLjhsLTExLTExLjRsLTQuOCw0LjlsMTEuMSwxMS40TDM3LjYsMzcuMQoJbDQuOCw0LjlsMTEuMS0xMS40bDExLDExLjRsNC44LTQuOUw1OC4yLDI1LjdsMTEuMS0xMS40TDY0LjUsOS40eiBNMjcuMiw5LjRMMTYuMSwyMC44TDUuMSw5LjRsLTQuOCw0LjlsMTEuMSwxMS40TDAuMywzNy4xTDUuMSw0MgoJbDExLjEtMTEuNGwxMSwxMS40bDQuOC00LjlMMjAuOSwyNS43TDMyLDE0LjNMMjcuMiw5LjR6IE0xMjQuOCwxMC43Yy04LjIsMC0xNC4zLDUuMi0xNC4zLDE0LjF2MTUuOWg3LjJWMjVjMC00LjgsMy03LjMsNy4xLTcuMwoJczcuMSwyLjYsNy4xLDcuM3YxNS44aDcuMnYtMTZDMTM5LjEsMTUuOCwxMzMsMTAuNywxMjQuOCwxMC43eiBNMTYwLjQsMzQuOGMtNC41LDAtOC4yLTMuOS04LjItOC44YzAtNC44LDMuNy04LjgsOC4yLTguOAoJYzMuNCwwLDYuMywyLjIsNy41LDUuM2g3LjJjLTEuMy03LTcuMS0xMS44LTE0LjYtMTEuOGMtOC44LDAtMTUuMiw2LjUtMTUuMiwxNS40YzAsOC44LDYuNCwxNS4zLDE1LjIsMTUuMwoJYzcuNSwwLDEzLjMtNC44LDE0LjYtMTEuN2gtNy4yQzE2Ni42LDMyLjYsMTYzLjcsMzQuOCwxNjAuNCwzNC44eiIvPgo8L3N2Zz4K')"
}
},
"navbar": {
"inline-size": { "value": "70px" },
"block-size": { "value": "20px" },
"background-image": {
"value": "url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxNzUuNCA0Mi4yIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNzUuNCA0Mi4yOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxwYXRoIGQ9Ik03OC4zLDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE05NC44LDQwLjdoNy4yVjAuNGgtNy4yVjQwLjd6IE02NC41LDkuNEw1My40LDIwLjhsLTExLTExLjRsLTQuOCw0LjlsMTEuMSwxMS40TDM3LjYsMzcuMQoJbDQuOCw0LjlsMTEuMS0xMS40bDExLDExLjRsNC44LTQuOUw1OC4yLDI1LjdsMTEuMS0xMS40TDY0LjUsOS40eiBNMjcuMiw5LjRMMTYuMSwyMC44TDUuMSw5LjRsLTQuOCw0LjlsMTEuMSwxMS40TDAuMywzNy4xTDUuMSw0MgoJbDExLjEtMTEuNGwxMSwxMS40bDQuOC00LjlMMjAuOSwyNS43TDMyLDE0LjNMMjcuMiw5LjR6IE0xMjQuOCwxMC43Yy04LjIsMC0xNC4zLDUuMi0xNC4zLDE0LjF2MTUuOWg3LjJWMjVjMC00LjgsMy03LjMsNy4xLTcuMwoJczcuMSwyLjYsNy4xLDcuM3YxNS44aDcuMnYtMTZDMTM5LjEsMTUuOCwxMzMsMTAuNywxMjQuOCwxMC43eiBNMTYwLjQsMzQuOGMtNC41LDAtOC4yLTMuOS04LjItOC44YzAtNC44LDMuNy04LjgsOC4yLTguOAoJYzMuNCwwLDYuMywyLjIsNy41LDUuM2g3LjJjLTEuMy03LTcuMS0xMS44LTE0LjYtMTEuOGMtOC44LDAtMTUuMiw2LjUtMTUuMiwxNS40YzAsOC44LDYuNCwxNS4zLDE1LjIsMTUuMwoJYzcuNSwwLDEzLjMtNC44LDE0LjYtMTEuN2gtNy4yQzE2Ni42LDMyLjYsMTYzLjcsMzQuOCwxNjAuNCwzNC44eiIvPgo8L3N2Zz4K')"
}
}
}
}
}
67 changes: 67 additions & 0 deletions proprietary/xxllnc-design-tokens/src/component/conduction/navigation.tokens.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
{
"conduction": {
"primary": {
"top-nav": {
"color": { "value": "{xxllnc.color.black.23}" },
"background-color": { "value": "{xxllnc.color.grey.92}" },
"hover": {
"color": { "value": "{xxllnc.color.black.23}" },
"background-color": { "value": "{xxllnc.color.black.12-6-7t}" },
"box-shadow": {}
},
"current": {
"color": { "value": "{xxllnc.color.black.23}" },
"background-color": { "value": "{xxllnc.color.black.12-6-7t}" },
"box-shadow": {},
"mobile": {
"box-shadow": {}
}
},
"dropdown": {
"color": { "value": "{xxllnc.color.lightgrey.86}" },
"background-color": { "value": "{xxllnc.color.black.6}" },
"border-width": {},
"border-style": {},
"border-color": {},
"hover": {
"color": { "value": "{xxllnc.color.grey.92}" },
"background-color": { "value": "{xxllnc.color.black.6}" },
"box-shadow": {}
}
},
"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": "{xxllnc.color.black.23}" },
"background-color": { "value": "transparent" },
"hover": {
"color": { "value": "{xxllnc.color.black.23}" },
"background-color": { "value": "{xxllnc.color.black.12-6-7t}" }
},
"current": {
"color": { "value": "{xxllnc.color.black.23}" },
"background-color": { "value": "unset" },
"box-shadow": { "value": "inset 0 -4px {xxllnc.color.primary}" }
},
"font-size": { "value": "{xxllnc.font-size.md}" },
"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" }
}
}
}
}
109 changes: 70 additions & 39 deletions proprietary/xxllnc-design-tokens/src/component/conduction/pagination.tokens.json
View file
Original file line number Diff line number Diff line change
@@ -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": "{xxllnc.size.2xs}" },
"item-color": { "value": "{xxllnc.color.primary}" },
"item-background-color": { "value": "{xxllnc.color.white.100}" },
"item-border-radius": { "value": "{xxllnc.size.xl}" },
"item-padding-inline-start": { "value": "12px" },
"item-padding-inline-end": { "value": "12px" },
"item-padding-block-start": { "value": "{xxllnc.size.xs}" },
"item-padding-block-end": { "value": "{xxllnc.size.xs}" },
"item-font-size": { "value": "{utrecht.document.font-size}" },
"item-font-weight": { "value": "{xxllnc.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": "" },
"navigation-button-padding-inline-end": { "value": "" },
"navigation-button-padding-block-start": { "value": "0px" },
"navigation-button-padding-block-end": { "value": "0px" },
"disabled-color": { "value": "{xxllnc.color.grey.90}" },
"disabled-background-color": { "value": "unset" },
"current-page-color": { "value": "{xxllnc.color.white.100}" },
"current-page-background-color": { "value": "{xxllnc.color.black.21}" },
"current-page-font-weight": { "value": "{xxllnc.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": "{xxllnc.color.primary}" },
"page-hover-background-color": { "value": "{xxllnc.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": "{xxllnc.size.2xs}" },
"color": { "value": "{xxllnc.color.primary}" },
"background-color": { "value": "{xxllnc.color.white.100}" },
"padding-inline-start": { "value": "12px" },
"padding-inline-end": { "value": "12px" },
"padding-block-start": { "value": "{xxllnc.size.xs}" },
"padding-block-end": { "value": "{xxllnc.size.xs}" },
"font-size": { "value": "{utrecht.document.font-size}" },
"font-weight": { "value": "{xxllnc.typography.font-weight.normal}" },
"font-family": { "value": "{utrecht.document.font-family}" },
"border-width": {},
"border-style": {},
"border-color": {},
"border-radius": { "value": "{xxllnc.size.xl}" }
},
"navigation-button": {
"color": { "value": "{xxllnc.color.white.100}" },
"background-color": { "value": "{xxllnc.color.black.17}" },
"border-color": {},
"border-radius": {},
"border-width": { "value": "0px" },
"padding-inline-start": { "value": "" },
"padding-inline-end": { "value": "" },
"padding-block-start": { "value": "0px" },
"padding-block-end": { "value": "0px" },
"disabled": {
"color": { "value": "{xxllnc.color.grey.90}" },
"background-color": { "value": "unset" },
"border-width": { "value": "0px" },
"border-style": {},
"border-color": {},
"border-radius": {}
},
"hover": {
"color": { "value": "{xxllnc.color.white.100}" },
"background-color": { "value": "{xxllnc.color.black.17-hover}" },
"border-width": { "value": "0px" },
"border-style": {},
"border-color": {},
"border-radius": {}
}
},
"current-page": {
"color": { "value": "{xxllnc.color.white.100}" },
"background-color": { "value": "{xxllnc.color.black.17}" },
"font-weight": { "value": "{xxllnc.typography.font-weight.bold}" },
"text-decoration": { "value": "unset" },
"border-width": {},
"border-style": {},
"border-color": {}
},
"page": {
"hover": {
"color": { "value": "{xxllnc.color.grey.90-hover}" },
"background-color": { "value": "{xxllnc.color.black.17-hover}" },
"text-decoration": { "value": "unset" },
"text-decoration-thickness": { "value": "0px" },
"border-width": {},
"border-style": {},
"border-color": {}
}
}
}
}
}
Loading

0 comments on commit 2667f3b

Please sign in to comment.