Comments (4)
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:
- Use strokes (borders) on an object (doesn't work on no-fill objects)
- Use Effect styles on an object (can stack multiple)
- 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). And 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, browser support or WCAG conformance you are aiming for (WCAG 2.2 Focus appearance).
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
- ...
Example of different focus styles (columns) across filled, outline and naked button (rows)
So my question at the end is, does this really require a separate category or is it simply a Composite token that takes multiple values?
from community-group.
Hi @lucijanblagonic! It be a composite token that accepts multiple values.
from community-group.
{ "focus": { "$type": "outline", "$value": { "color": "#00000080", "width": "4px", "style": "solid", "offset": "2px", } } }
or
{ "focus": { "$type": "outline", "$value": { "color": "#00000080", "width": "4px", "style": "solid", } } }
I am hesitating whether to make the offset attribute a new token category so that it can be used in various scenarios.
from community-group.
Reviewed by Format Editors 5/17/23
- Does this warrant revisiting the existing Border type? (to possibly make it more flexible, renaming to "Stroke"?)
- Is "Outline" something that makes sense beyond the web platform? How about iOS & Android?
- Possibly related to #98
from community-group.
Related Issues (20)
- Consider using type: "$alias" for explicity
- Define how far design tokens are expected to be interoperable. HOT 1
- Remove REM/EM from specification? HOT 25
- Error in Font Weight example in spec?
- Standardizing the Handoff - Conceptual HOT 10
- Extensible Types HOT 2
- grid type HOT 6
- Specification / recommendation for custom types HOT 4
- Token Operations
- The $ property name prefix should be unnecessary with a well-structured schema HOT 10
- [Discussion]: How to transform composite tokens HOT 5
- Transition token documentation issue HOT 1
- Suggestion: colorList type for DataViz HOT 6
- Most recent edition (07/2023) missing from main page on w3c community group HOT 1
- A comment about history of design tokens HOT 2
- Type: Text alignment HOT 8
- Custom Types / Interpritations
- Is there a way to still include boolean and string type functionality? HOT 1
- Be explicit about whether or not empty groups are allowed HOT 4
- Alias $type inheritance? HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from community-group.