From c1749e50c162b7c7fa8b779b12c9aff204f716e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 17:07:15 +0200 Subject: [PATCH 1/8] feat(tokens): add newest tokens (#3758) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Travaglini Alessio <158268546+Vandapanda@users.noreply.github.com> Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../tokens/tokensstudio-generated/tokens.json | 345 ++++++++++++------ 1 file changed, 230 insertions(+), 115 deletions(-) diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json index 0549fddcbc..24bf7a1396 100644 --- a/packages/tokens/tokensstudio-generated/tokens.json +++ b/packages/tokens/tokensstudio-generated/tokens.json @@ -810,7 +810,7 @@ }, "bg-inverted": { "$type": "color", - "$value": "{post.core.color.sandgrey.100}" + "$value": "{post.core.color.colorless}" }, "stroke-inverted": { "$type": "color", @@ -836,7 +836,7 @@ }, "bg-inverted": { "$type": "color", - "$value": "{post.core.color.sandgrey.070}" + "$value": "{post.core.color.sandgrey.alpha.lightsand.10}" }, "stroke-inverted": { "$type": "color", @@ -862,7 +862,7 @@ }, "bg-inverted": { "$type": "color", - "$value": "{post.core.color.sandgrey.060}" + "$value": "{post.core.color.sandgrey.alpha.lightsand.30}" }, "stroke-inverted": { "$type": "color", @@ -916,7 +916,7 @@ }, "bg-inverted": { "$type": "color", - "$value": "{post.core.color.sandgrey.070}" + "$value": "{post.core.color.sandgrey.alpha.lightsand.10}" }, "stroke-inverted": { "$type": "color", @@ -942,7 +942,7 @@ }, "bg-inverted": { "$type": "color", - "$value": "{post.core.color.sandgrey.060}" + "$value": "{post.core.color.sandgrey.alpha.lightsand.30}" }, "stroke-inverted": { "$type": "color", @@ -2209,6 +2209,10 @@ "size2": { "$type": "sizing", "$value": "{post.core.dimension.24}" + }, + "size3": { + "$type": "sizing", + "$value": "{post.core.dimension.40}" } }, "textfields": { @@ -2986,7 +2990,7 @@ }, "8": { "$type": "fontSizes", - "$value": "{post.core.font-size.14}" + "$value": "{post.core.font-size.16}" }, "9": { "$type": "fontSizes", @@ -3910,6 +3914,72 @@ } } }, + "Components/Avatar": { + "post": { + "avatar": { + "size": { + "$type": "sizing", + "$value": "{post.device.sizing.interactive.icon.size3}" + }, + "enabled-bg": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.enabled.bg2}" + }, + "enabled-fg": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.enabled.fg3}" + }, + "border-width": { + "$type": "borderWidth", + "$value": "{post.device.border-width.default}" + }, + "border-radius": { + "$type": "borderRadius", + "$value": "{post.device.border-radius.round}" + }, + "font-size": { + "$type": "fontSizes", + "$value": "{post.device.font-size.8}" + }, + "focus": { + "outline-width": { + "$type": "borderWidth", + "$value": "{post.device.border-width.focus}" + }, + "outline": { + "offset": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.2}" + }, + "color": { + "$type": "color", + "$value": "{post.mode.color.interactive.focus.stroke}" + } + } + }, + "image": { + "hover-opacity": { + "$type": "color", + "$value": "{post.core.color.sandgrey.alpha.lightsand.50}" + } + }, + "hover-bg": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.hover.bg2}" + }, + "border": { + "color": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.enabled.stroke3}" + } + }, + "hover-fg": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.hover.fg3}" + } + } + } + }, "Components/Badge": { "post": { "badge": { @@ -5435,92 +5505,6 @@ "Components/List": { "post": { "list": { - "simple": { - "checks": { - "sizing": { - "icon": { - "$type": "sizing", - "$value": "{post.device.sizing.icon.1}" - } - }, - "padding": { - "icon": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.16}" - }, - "text": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.6}" - }, - "block": { - "outer": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.5}" - } - } - }, - "gap": { - "inline": { - "text": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.inline.2}" - } - }, - "block": { - "text": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.block.3}" - } - } - }, - "icon": { - "container": { - "inline": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.4}" - }, - "block": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.18}" - } - } - } - }, - "bullets": { - "spacing": { - "padding": { - "text": { - "$type": "spacing", - "$value": "{post.device.spacing.padding.block.6}" - } - }, - "gap": { - "inline": { - "text": { - "$type": "spacing", - "$value": "{post.device.spacing.gap.inline.10}" - } - } - } - } - } - }, - "checks": { - "color": { - "icon-bg": { - "$type": "color", - "$value": "{post.mode.color.surface.accent4.bg}" - }, - "icon-fg": { - "$type": "color", - "$value": "{post.mode.color.surface.accent4.fg}" - }, - "text-fg": { - "$type": "color", - "$value": "{post.mode.color.interactive.primary.enabled.fg1}" - } - } - }, "item": { "padding": { "inline": { @@ -5624,6 +5608,114 @@ "$value": "{post.device.spacing.padding.block.18}" } } + }, + "margin": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.8}" + } + }, + "bg": { + "$type": "color", + "$value": "{post.mode.color.surface.default.bg}" + } + } + } + }, + "Components/List simple": { + "post": { + "list": { + "simple": { + "checks": { + "sizing": { + "icon": { + "$type": "sizing", + "$value": "{post.device.sizing.icon.1}" + } + }, + "padding": { + "icon": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.16}" + }, + "text": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.6}" + }, + "block": { + "outer": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.5}" + } + } + }, + "gap": { + "inline": { + "text": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.inline.2}" + } + }, + "block": { + "text": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.block.3}" + } + } + }, + "icon": { + "container": { + "inline": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.4}" + }, + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.18}" + } + } + } + }, + "bullets": { + "spacing": { + "padding": { + "text": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.6}" + } + }, + "gap": { + "inline": { + "text": { + "$type": "spacing", + "$value": "{post.device.spacing.gap.inline.10}" + } + } + } + } + } + }, + "checks": { + "color": { + "icon-bg": { + "$type": "color", + "$value": "{post.mode.color.surface.accent4.bg}" + }, + "icon-fg": { + "$type": "color", + "$value": "{post.mode.color.surface.accent4.fg}" + }, + "text-fg": { + "$type": "color", + "$value": "{post.mode.color.interactive.primary.enabled.fg1}" + } + }, + "margin": { + "block": { + "$type": "spacing", + "$value": "{post.device.spacing.padding.block.8}" + } + } } } } @@ -8079,6 +8171,7 @@ "post.core.dimension.96": "c284ed2b1cd135012ce6f9a7b7709b031550b4ab", "post.core.dimension.100": "a6b405b6955da9114e41712fd7f8413e018c81c9", "post.core.dimension.112": "483e4eb70ead94af3bac5727f4021e10f46e6eaf", + "post.core.dimension.1280": "80e7b3e1755e8cdce684d233544da4d76fd698dc", "post.core.dimension.5-5": "972288dd1addb9aae5e34073da7683bc7f0a99fd", "post.core.dimension.6-5": "ef1aee12a8f7f938117c4de244a4f37d7dfad29f", "post.core.dimension.4-5": "4bdff2ecd88fa32f393698921bced3153c49b909", @@ -8109,8 +8202,7 @@ "post.core.letter-spacing.none": "195c468fa2f255470e6e8077bfc5cb14da225064", "post.core.font-family.frutiger": "7a8104756190e8b94f97c29243dd5d7d142a7065", "post.core.font-family.swiss-post": "5547f71fafbe8166ac0384fd4e8862796da43fea", - "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20", - "post.core.dimension.1280": "80e7b3e1755e8cdce684d233544da4d76fd698dc" + "post.core.font-family.caveat": "15b599e49f27297ab4aced39752df2cf43f2bb20" } }, { @@ -8578,6 +8670,7 @@ "post.device.spacing.padding.inline.1": "6dd0e239a4087795199f786e69f14b6a93ff485c", "post.device.spacing.padding.inline.4": "255cacee7bf87ef4ca8143f3234f5ae6239e9c53", "post.device.spacing.padding.block.5": "12aa516946fda5276cad33a82917f9a28cc78bf1", + "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604", "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8", "post.device.border-radius.1": "bf9efed364999a9ef84bdb512985ac9f6fdbec1d", "post.device.border-radius.round": "055c77f9d3dcf72433a5321df80ed3a62e9501b2", @@ -8733,6 +8826,7 @@ "post.device.spacing.padding.block.15": "b2a434eb28279be77246ffac732334fe984ed0b1", "post.device.spacing.padding.block.18": "606cdbae432937aed9642fc93f74af42c0aaeac4", "post.device.spacing.padding.block.19": "35c06becdcfcbcaca8aa9be55c071d8a595fc0b0", + "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604", "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8", "post.device.sizing.interactive.button.height.5": "436a60e0ceb2a414cf67c83f22509f2eaeeba7cb", "post.device.sizing.interactive.button.icon.6": "3a79fafdf0edac10e89188baab62e2b2a37e4d67", @@ -8871,6 +8965,7 @@ "post.device.sizing.interactive.icon.width": "8fea35207b61496ef007e6cf83e7983d1386be76", "post.device.sizing.interactive.icon.size": "a7269590e4d43349d7c74194f91278bacc6d7955", "post.device.sizing.interactive.icon.size2": "7cea78d105586f14c382f30667405f5ac18545f6", + "post.device.sizing.interactive.icon.size3": "2d6b0a326866829ebae61170bdd76c65456bd604", "post.device.sizing.interactive.textfields.icon": "c6ce6c8537f69d8dcd20f710c1fcd38ee7915e4c", "post.device.sizing.interactive.textfields.dropdown": "2c0942fd50bd63a9509f8550fc6a38642e9001d8", "post.device.sizing.interactive.stepper.indicator": "da5a12871e0e8fd98b8d214909c46c5d775861dc", @@ -8911,8 +9006,8 @@ "post.device.border-width.alternative2": "ee4d9dfc6effe80e3529f2cf085a3e3c60cdda30", "post.device.border-width.alternative1": "3304b579ebb55075ec45251e69d38c803cecf378", "post.device.grid.sizing.gutter": "c96f1602983aa56f2a1a13cbba9b908b06fd0e05", - "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c", - "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9" + "post.device.grid.sizing.container.max-width": "a4dfb3cf0e2934a7d714a31ae35fded45be08be9", + "post.device.grid.padding.inline.container": "ac3bea992f765c2b35b8b7b8e0213bc1471cd22c" } }, { @@ -9230,7 +9325,9 @@ "Utilities/Color": "source", "Components/App store badge": "enabled", "Components/Form footer": "enabled", - "Components/Grid": "enabled" + "Components/Grid": "enabled", + "Components/List simple": "enabled", + "Components/Avatar": "enabled" }, "$figmaCollectionId": "VariableCollectionId:808:5504", "$figmaModeId": "808:0", @@ -9243,6 +9340,14 @@ "post.app-store.focus.outline.color": "77f9914002cf889b0f53dab6fdc611a16e147a5e", "post.app-store.focus.outline-width": "db9852513a3a04b96d048ed203f1019be482843d", "post.app-store.border-radius": "aa40618f5c2c44b080a7da802ff1cfee577cdc7f", + "post.avatar.size": "fdc1484ed63e645974c9a435ca62dd46b26a84e0", + "post.avatar.border-width": "2baed26616e4f57e9f0d918307a9ab81b5943a1f", + "post.avatar.border-radius": "678ffd41a7a2b40ecda04f9934a7c5f3a46af947", + "post.avatar.font-size": "a6f355062eaa456bf2a08bd812e990d0e799ef28", + "post.avatar.focus.outline-width": "00c1775287d56489f956cac4b326066f6484a341", + "post.avatar.focus.outline.offset": "5bd301c5170ad3d660fb070eca4341ced50b5008", + "post.avatar.focus.outline.color": "c0afc6c16022ba4ac8d1119fb79d2b6e8326a665", + "post.avatar.border.color": "90487aa720710673a56fdd65f24fe8d00ff0aeaa", "post.badge.bg": "c20dfd9639c61755321be20d24f88bfb50fc9832", "post.badge.fg": "4b08c2c1f32eab0e4964da479f7d856f8d776cef", "post.badge.stroke": "76ca5d074874c7609f45effffb5684cdb0ae7962", @@ -9383,6 +9488,7 @@ "post.checkbox.focus.border-radius": "f4e43b666081d5a3bbd1ea30f5e8e580dbb21f96", "post.checkbox.gap.block.group": "c87709f94c2c59282e5bcfc93d28ea57339d29be", "post.checkbox.gap.inline.text-start": "6a0ccb17874af047442e69a9ea84440679f3a4e7", + "post.checkbox.gap.inline.group": "e65d5b65b7b21225e8e823f960cdc68f730d225b", "post.checkbox.icon.border-width": "df706a4acde93afd0c8a6c08650212691c753a4d", "post.checkbox.icon.size": "bacfefb76323eaf5cbec8ca21a1b228051dfc310", "post.checkbox.icon.padding.container": "e9e51839824fee21aa30c8e627bc8d8506989bf7", @@ -9391,7 +9497,6 @@ "post.checkbox.border-radius": "d7f2f321d3f6aa26b82e92bdddc71e8278b2d45a", "post.checkbox.group.legend.font-size": "5b0316a7c8f172a8c450b37de8030c2fafdd3b64", "post.checkbox.label.padding.block": "1f0dbe15a811f9ac9a6699131a7925b19b90da68", - "post.checkbox.gap.inline.group": "e65d5b65b7b21225e8e823f960cdc68f730d225b", "post.dropdown.multi-select.menu.category-title.padding.block.outer": "ee99f5a05a5b1c84a69b677a1834d61fead11820", "post.dropdown.multi-select.menu.category-title.padding.block.inner": "0c237bda42bc614b0d40c3063b8cd837f6764301", "post.dropdown.multi-select.menu.category-title.padding.inline.inner": "3818d730a903399bea6f0a252a8fcad51001a230", @@ -9490,19 +9595,6 @@ "post.icon-button.border-width": "ce734619b02f237a105c715ec54a4564e98aa0a0", "post.lead.font-size": "faf5dba2f96d4f89a72ee8e380d9c5dabd286beb", "post.lead-font-weight": "5f2c7a3dd41d479f8b11e5b1dbfe462152e54aa0", - "post.list.simple.checks.sizing.icon": "bb5abf0a86b093084f08e078f8f4ad9947a52b72", - "post.list.simple.checks.padding.icon": "59c39e7014cf31f71f657d6a7034186a35e63012", - "post.list.simple.checks.padding.text": "a8a03d1e0221fd52a61abb27246f0ee435aea686", - "post.list.simple.checks.padding.block.outer": "fc4a948d80c33f7f485e1559a701c795b136185c", - "post.list.simple.checks.gap.inline.text": "6c150a26e38d619d9d0e35a364b2fba9d86a60d7", - "post.list.simple.checks.gap.block.text": "6cf9bbb003a5295246f02134089019f9abda52ca", - "post.list.simple.checks.icon.container.inline": "7b56b23c45c26a3d4bd0dd76f84e74cede898c57", - "post.list.simple.checks.icon.container.block": "670186a5b10d70027009f3e318cc99fc0a2c822f", - "post.list.simple.bullets.spacing.padding.text": "f20b175bc4f0a3da29a9c6838af1231fa0a67400", - "post.list.simple.bullets.spacing.gap.inline.text": "7a53d3141b532fd4204d2ab1fc49c676b10c0107", - "post.list.checks.color.icon-bg": "fae4fd2c5bc7dec515b82a34ae4279361d3aad86", - "post.list.checks.color.icon-fg": "16cd2459165982f548ff3971fba0746e6be362a1", - "post.list.checks.color.text-fg": "570728a610b063ec0e5c8abb631f23173079187d", "post.list.item.padding.inline.start": "f7f1ba4ae736cfe139c14f5d2da5834c6555c8c0", "post.list.item.padding.inline.end": "f89ce359dcd178ea9994cf93e962e4c8ac437b7e", "post.list.item.padding.block.start": "11f6bc404467908a5a162c5d014ba825e488fe4a", @@ -9513,14 +9605,30 @@ "post.list.item.enabled-fg": "4a570668b7059b0822f1e137471f2d255cc62f19", "post.list.item.hover-fg": "f7051e304ecb770746a86ddbc231512baa96245b", "post.list.item.focus.outline.offset": "d066bc28e9b22c828149b8612a34becf5837f5f6", + "post.list.item.focus.outline.color": "0846e0ff8d338fd370fbff218c1ec6c81ba02ed3", "post.list.item.focus.outline-width": "116e43c79d38c471881a79d5eb170f810ee72640", + "post.list.item.focus.outline-radius": "da1e12bc7bde2114427b1ed43baeb55c0c7dd5eb", "post.list.item.border-width": "bcd8aacad9ea04c34d9b9a6195caff661a48f581", "post.list.icon.container.padding.block": "2c63130c7c5cc820bceda75d7711862518504a8b", "post.list.icon.container.padding.inline": "59b199c894c721103fb3826da4dad5363f85bfdf", "post.list.icon.size": "26403e806c4c3551bc29609b720cd1ee98b77132", "post.list.switch.padding.block": "f4d818760b6afc45e334e50776ad152fb18d54d9", - "post.list.item.focus.outline.color": "0846e0ff8d338fd370fbff218c1ec6c81ba02ed3", - "post.list.item.focus.outline-radius": "da1e12bc7bde2114427b1ed43baeb55c0c7dd5eb", + "post.list.margin.block": "d53e96d1e948088deafee9bd8fb5a84edacb868e", + "post.list.bg": "3ae4e2a10ad075b1d4d5f45253a54cd648336989", + "post.list.simple.checks.sizing.icon": "bb5abf0a86b093084f08e078f8f4ad9947a52b72", + "post.list.simple.checks.padding.icon": "59c39e7014cf31f71f657d6a7034186a35e63012", + "post.list.simple.checks.padding.text": "a8a03d1e0221fd52a61abb27246f0ee435aea686", + "post.list.simple.checks.padding.block.outer": "fc4a948d80c33f7f485e1559a701c795b136185c", + "post.list.simple.checks.gap.inline.text": "6c150a26e38d619d9d0e35a364b2fba9d86a60d7", + "post.list.simple.checks.gap.block.text": "6cf9bbb003a5295246f02134089019f9abda52ca", + "post.list.simple.checks.icon.container.inline": "7b56b23c45c26a3d4bd0dd76f84e74cede898c57", + "post.list.simple.checks.icon.container.block": "670186a5b10d70027009f3e318cc99fc0a2c822f", + "post.list.simple.bullets.spacing.padding.text": "f20b175bc4f0a3da29a9c6838af1231fa0a67400", + "post.list.simple.bullets.spacing.gap.inline.text": "7a53d3141b532fd4204d2ab1fc49c676b10c0107", + "post.list.checks.color.icon-bg": "fae4fd2c5bc7dec515b82a34ae4279361d3aad86", + "post.list.checks.color.icon-fg": "16cd2459165982f548ff3971fba0746e6be362a1", + "post.list.checks.color.text-fg": "570728a610b063ec0e5c8abb631f23173079187d", + "post.list.checks.margin.block": "d299b40b073470d2b17eab110d34bdd43233bd69", "post.infobox.sizing.icon": "7dd519c929ff034c7e25825ed27a3d0bf99bdc1d", "post.infobox.spacing.gap.inline": "ac6c1c2265e3a937117dc72b1fc0181204661585", "post.clickable.spacing.padding.icon": "4ef4cc91db7e7d5643bfedae838969e76322b6fe", @@ -9590,6 +9698,7 @@ "post.radio-button.focus.outline.offset": "28cb3442544ef6bf2eb3dc1ad8a550d38269ac61", "post.radio-button.gap.block.group": "9c16987226587efbda8b6ca5dac00608be1e4408", "post.radio-button.gap.inline.text-start": "54a8f76477a5a63522d360c6816e113b363647a5", + "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f", "post.radio-button.icon.padding.block.inner": "f32af0ee66b9ed5d12d8b4f13d7c53e4c3d917e7", "post.radio-button.icon.padding.block.container": "7226e0dc94e9d28902b5f19ffc2849b9a09a3e96", "post.radio-button.icon.padding.inline.inner": "5002aa9fc58b02f27ae1920ed02a8eb25171ffe6", @@ -9601,7 +9710,6 @@ "post.radio-button.padding.block.group": "990db7096901d16ae10b01800015dece8805bd03", "post.radio-button.group.legend.font-size": "173ff3bf123931fc8325fe9156404613a57b8b78", "post.radio-button.label.padding.block": "9aa1af7161cf43024101355d41b51c12692a6bf9", - "post.radio-button.gap.inline.group": "0d348d17ca88dc80d153be265c58c3ff2c501b4f", "post.select.enabled-bg": "56831cf2f49031708c75a392aa1d337d53265db8", "post.select.enabled-fg": "f84ea1c81840d02a75bcf62682632a8853f85ad7", "post.select.hover-bg": "1c8c858d517f620cf044cb2cb8ebfa29233d2115", @@ -9813,7 +9921,12 @@ "post.validation.list.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2", "post.validation.list.padding.block.text": "37b3685608b0a7ee4bdc297d80ea55c77856c2ee", "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795", - "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371" + "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371", + "post.avatar.enabled-bg": "1863e011a6589c655c1f6ce1b3fa63e4153719e2", + "post.avatar.enabled-fg": "9fbe58313d6bf87fab98be4e81191e79f1a038b0", + "post.avatar.image.hover-opacity": "2659b79bad8b084a6be14379c73d2b9fe8ff893c", + "post.avatar.hover-bg": "ac1cb946a9c9eba579dc69e06ddbb685dbce5dd8", + "post.avatar.hover-fg": "a23cdafe5339df135a601e47dce7964ed8269528" } }, { @@ -9937,6 +10050,7 @@ "Elements/ListNumber", "Elements/Legend", "Components/App store badge", + "Components/Avatar", "Components/Badge", "Components/Banner", "Components/Breadcrumb", @@ -9949,6 +10063,7 @@ "Components/Icon button", "Components/Lead", "Components/List", + "Components/List simple", "Components/Notifications", "Components/Popover", "Components/Radio button", From 3c3cc5d2cbb946aa9d24c04a7e3032b3602ac49b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 17:11:39 +0200 Subject: [PATCH 2/8] fix(styles): mixed decls for floating-label (#3742) --- packages/styles/src/components/floating-label.scss | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss index 0fa0c65dab..b756a57e85 100644 --- a/packages/styles/src/components/floating-label.scss +++ b/packages/styles/src/components/floating-label.scss @@ -100,14 +100,15 @@ } &.form-control-sm { - &[type='date']::-webkit-calendar-picker-indicator { - margin-top: -(spacing.$size-small-regular); - } font-size: forms.$form-floating-label-font-size-placeholder-sm; height: forms.$form-floating-label-height-sm; min-height: forms.$form-floating-label-height-sm; padding-inline: forms.$form-floating-padding-x-sm; + &[type='date']::-webkit-calendar-picker-indicator { + margin-top: -(spacing.$size-small-regular); + } + ~ label { font-size: forms.$form-floating-label-font-size-placeholder-sm; padding-top: forms.$form-floating-label-padding-t-sm; From 8163e97b18791ea26ff749d164221cd0175a5796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 17:11:56 +0200 Subject: [PATCH 3/8] fix(style): mixed decls in notification mixin (#3741) --- packages/styles/.stylelintrc | 5 +---- packages/styles/src/mixins/_notification.scss | 20 ++++++++++++------- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/styles/.stylelintrc b/packages/styles/.stylelintrc index afc29c9fc2..1ad112b652 100644 --- a/packages/styles/.stylelintrc +++ b/packages/styles/.stylelintrc @@ -1,9 +1,6 @@ { "plugins": ["stylelint-scss"], - "extends": [ - "stylelint-config-sass-guidelines", - "stylelint-prettier/recommended" - ], + "extends": ["stylelint-config-sass-guidelines", "stylelint-prettier/recommended"], "rules": { "max-nesting-depth": 5, "selector-max-compound-selectors": 5, diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss index c861a4509b..700760279a 100644 --- a/packages/styles/src/mixins/_notification.scss +++ b/packages/styles/src/mixins/_notification.scss @@ -79,10 +79,13 @@ @mixin notification-body($size) { $hr-margin-block: map.get(notification.$notification-hr-margin-block-map, $size); - display: flex; - flex-direction: column; - justify-content: center; - gap: notification.$notification-body-gap; + /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */ + & { + display: flex; + flex-direction: column; + justify-content: center; + gap: notification.$notification-body-gap; + } a { font-weight: notification.$notification-link-font-weight; @@ -124,9 +127,12 @@ @mixin notification-dismissible($size, $close: 'btn-close') { $padding-x: map.get(notification.$notification-padding-x-map, $size); - pointer-events: auto; - position: relative; - padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size; + /* stylelint-disable-next-line scss/selector-no-redundant-nesting-selector */ + & { + pointer-events: auto; + position: relative; + padding-inline-end: $padding-x + notification.$notification-gap + close.$close-size; + } > .#{$close} { position: absolute; From 47c16371c5e9c614d8dca821d818cf3c40ac8405 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 17:19:16 +0200 Subject: [PATCH 4/8] chore(documentation): update design system team in footer (#3706) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> --- .../.storybook/blocks/footer.tsx | 99 +++++++++++++++---- .../.storybook/blocks/layout/layout.scss | 82 ++++++++++++--- 2 files changed, 148 insertions(+), 33 deletions(-) diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx index a64503e76b..2f58d78201 100644 --- a/packages/documentation/.storybook/blocks/footer.tsx +++ b/packages/documentation/.storybook/blocks/footer.tsx @@ -1,26 +1,78 @@ import React from 'react'; -interface Developer { +interface TeamMember { name: string; title: string; - avatar: string; + githubImageId: string; + githubUsername: string; } -const DEVELOPERS: Developer[] = [ +const TEAM_MEMBERS: TeamMember[] = [ { name: 'Philipp Gfeller', - title: 'Lead UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4', + title: 'Lead Potato', + githubImageId: '1659006', + githubUsername: 'gfellerph', }, { name: 'Alizé Debray', - title: 'UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4', + title: 'UI Mademoiselle', + githubImageId: '33580481', + githubUsername: 'alizedebray', }, { name: 'Oliver Schürch', + title: 'Señor Developer', + githubImageId: '9716662', + githubUsername: 'oliverschuerch', + }, + { + name: 'Myrta Sakellariou', + title: 'Mama Pigxel', + githubImageId: '66249294', + githubUsername: 'myrta2302', + }, + { + name: 'Lea Gardavaud', + title: 'UI Developer', + githubImageId: '183501002', + githubUsername: 'leagrdv', + }, + { + name: 'Alona Zherdetska', + title: 'Component Fairy', + githubImageId: '138328641', + githubUsername: 'alionazherdetska', + }, + { + name: 'Tim Schär', title: 'UI Developer', - avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4', + githubImageId: '59233938', + githubUsername: 'schaertim', + }, + { + name: 'Rouven Steiger', + title: 'Art Guy EDK', + githubImageId: '104423005', + githubUsername: 'rouvenpost', + }, + { + name: 'Christian Zundel', + title: 'UX Designer', + githubImageId: '119845956', + githubUsername: 'Cian77', + }, + { + name: 'Alessio Travaglini', + title: 'Token Orchestrator', + githubImageId: '158268546', + githubUsername: 'Vandapanda', + }, + { + name: 'Romain Veya', + title: 'UI Developer', + githubImageId: '111903046', + githubUsername: 'veyaromain', }, ]; @@ -43,20 +95,25 @@ export default (params: { pathToStoryFile?: String }) => (
-

Support

-
- {DEVELOPERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => ( -
- -
-

- {developer.name} -

-

{developer.title}

-
-
+

Design System Team Members

+
+
Date: Tue, 15 Oct 2024 17:31:16 +0200 Subject: [PATCH 5/8] chore(icons): remove data-* attributes from output files (#3747) --- packages/icons/svgo.config.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/icons/svgo.config.ts b/packages/icons/svgo.config.ts index 58039aac5c..c133772b09 100644 --- a/packages/icons/svgo.config.ts +++ b/packages/icons/svgo.config.ts @@ -27,7 +27,7 @@ export default { name: 'removeAttrs', params: { elemSeparator: '::', - attrs: ['style', 'svg::(width|height|xml:space)'], + attrs: ['style', 'data-.*', 'svg::(width|height|xml:space)'], }, }, ], From bd15df3d17b8c1f8d628bb4acbba50f7d839ad57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 17:32:29 +0200 Subject: [PATCH 6/8] chore: remove mixed-decls build configs (#3743) --- packages/documentation/vite.config.js | 7 ------- packages/styles/gulpfile.js | 2 -- 2 files changed, 9 deletions(-) diff --git a/packages/documentation/vite.config.js b/packages/documentation/vite.config.js index fff54bb396..af7680cc71 100644 --- a/packages/documentation/vite.config.js +++ b/packages/documentation/vite.config.js @@ -23,11 +23,4 @@ export default { ], exclude: ['@swisspost/design-system-styles'], }, - css: { - preprocessorOptions: { - scss: { - silenceDeprecations: ['mixed-decls'], - }, - }, - }, }; diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js index 62cb06a352..1a663b1e9b 100644 --- a/packages/styles/gulpfile.js +++ b/packages/styles/gulpfile.js @@ -121,7 +121,6 @@ gulp.task('sass', () => { outputStyle: 'compressed', includePaths: options.includePaths, quietDeps: true, - silenceDeprecations: ['mixed-decls'], }), ) .pipe(gulpPostCss([autoprefixer()])) @@ -139,7 +138,6 @@ gulp.task('sass:dev', () => { gulpSass({ includePaths: options.includePaths, quietDeps: true, - silenceDeprecations: ['mixed-decls'], }), ) .pipe(gulpPostCss([autoprefixer()])) From 9f38b686b128397f2e2267ddb54157aa5ed5b05a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <33580481+alizedebray@users.noreply.github.com> Date: Tue, 15 Oct 2024 18:01:13 +0200 Subject: [PATCH 7/8] chore(intranet-header): fix dropdown nav-link documentation (#3722) --- .changeset/loud-dingos-remember.md | 5 +++++ .../intranet-header-navigation-bar.sample.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) create mode 100644 .changeset/loud-dingos-remember.md diff --git a/.changeset/loud-dingos-remember.md b/.changeset/loud-dingos-remember.md new file mode 100644 index 0000000000..18303aed33 --- /dev/null +++ b/.changeset/loud-dingos-remember.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': patch +--- + +Fixed the dropdown toggle in the example of the intranet header with a navigation bar. diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html index d304a71b41..63a6b6b8a0 100644 --- a/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html +++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html @@ -3,7 +3,7 @@
  • Link 1
  • Link 2
  • - Dropdown +
    Dropdown link 1 Dropdown link 2 From 224f190cb66805914d05a7ebdbb7892cbbde4c1e Mon Sep 17 00:00:00 2001 From: Muhammad Bashir Date: Wed, 16 Oct 2024 12:51:46 +0200 Subject: [PATCH 8/8] feat: add paragraph style (#3569) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add paragraph style only. --------- Co-authored-by: karimim Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com> Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> Co-authored-by: Oliver Schürch --- .changeset/sixty-items-promise.md | 5 +++ .changeset/strange-bottles-impress.md | 5 +++ .../elements/paragraph/paragraph.docs.mdx | 17 +++++++++ .../elements/paragraph/paragraph.stories.ts | 37 +++++++++++++++++++ packages/styles/src/elements/_index.scss | 1 + packages/styles/src/elements/paragraph.scss | 17 +++++++++ 6 files changed, 82 insertions(+) create mode 100644 .changeset/sixty-items-promise.md create mode 100644 .changeset/strange-bottles-impress.md create mode 100644 packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx create mode 100644 packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts create mode 100644 packages/styles/src/elements/paragraph.scss diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md new file mode 100644 index 0000000000..d6de1b72b9 --- /dev/null +++ b/.changeset/sixty-items-promise.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-styles': minor +--- + +Added paragraph style. diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md new file mode 100644 index 0000000000..79f561cfb8 --- /dev/null +++ b/.changeset/strange-bottles-impress.md @@ -0,0 +1,5 @@ +--- +'@swisspost/design-system-documentation': minor +--- + +Added paragraph element. diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx new file mode 100644 index 0000000000..d9be9afb9c --- /dev/null +++ b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx @@ -0,0 +1,17 @@ +import { Canvas, Controls, Meta } from '@storybook/blocks'; +import * as ParagraphStories from './paragraph.stories'; +import StylesPackageImport from '@/shared/styles-package-import.mdx'; + + + +
    + # Paragraph + + +
    + +Default paragraph without size variants. + + diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts new file mode 100644 index 0000000000..2a9d17b4a5 --- /dev/null +++ b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts @@ -0,0 +1,37 @@ +import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components'; +import { html } from 'lit'; +import { MetaExtended } from '@root/types'; + +const meta: MetaExtended = { + id: '7ecd87f1-de96-4e39-a057-ba1798eb69593', + title: 'Foundations/Typography/Paragraph', + parameters: { + badges: [], + design: { + type: 'figma', + url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=Zs4iDGVBTA88pChW-0', + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + decorators: [ + (story: StoryFn, context: StoryContext) => html`
    ${story(context.args, context)}
    `, + ], + render: () => html` +

    + This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +

    +

    + This is a paragraph. It is a block of text that is separated from other blocks of text by a + blank line. It is usually indented at the beginning of the first line. The first word of a + paragraph is often indented more than the rest of the paragraph. +

    + `, +}; diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss index d2c8cd0147..e4233fb679 100644 --- a/packages/styles/src/elements/_index.scss +++ b/packages/styles/src/elements/_index.scss @@ -1,4 +1,5 @@ @use 'reset'; @use 'body'; +@use 'paragraph'; @use 'heading'; @use 'fieldset-legend'; diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss new file mode 100644 index 0000000000..12e638dd65 --- /dev/null +++ b/packages/styles/src/elements/paragraph.scss @@ -0,0 +1,17 @@ +@use 'sass:map'; +@use '../functions/tokens'; +@use '../tokens/elements'; + +tokens.$default-map: elements.$post-paragraph; + +p { + margin-block: tokens.get('paragraph-margin-block-start'); + + &:first-child { + margin-block-start: 0; + } + + &:last-child { + margin-block-end: 0; + } +}