- From: Lucijan Blagonić via GitHub <sysbot+gh@w3.org>
- Date: Wed, 19 Apr 2023 14:02:40 +0000
- To: public-design-tokens-log@w3.org
Hi @VIPofJoy! To expand on this a bit as I've been doing a bit of work on focus outlines recently (I assume this is what you are showing) and specifically how to implement them in Figma. There are 3 ways from what I have seen: 1. Use strokes (borders) on an object (doesn't work on no-fill objects) 2. Use Effect styles on an object (can stack multiple) 3. Use an extra element positioned above the object (like your example) There are also inset focus states, not just on the outside (dense UIs, or hidden overflow items like menus). There are also several ways how outlines can be implemented in code, you can use `outline` or even `box-shadow`. You might tend to use one over the other, depending on the flexibility, complexity of design or browser support you are aiming for. With all that being said, focus outlines should support the following: * outline/border type (solid, dotted, dashed...) * outline/border width (1px, 2px...) * offset (1px, 2px...) * stacking multiple together * ... So my question at the end is, does this really require a separate category or is it simply a [Composite token](https://second-editors-draft.tr.designtokens.org/format/#composite-design-token) that takes multiple values? -- GitHub Notification of comment by lucijanblagonic Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/213#issuecomment-1514793338 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 19 April 2023 14:02:42 UTC