Comments (3)
One additional property that could be useful is stroke alignment: whether it draws inside the edge of the object on top of the fill, or outside of the object.
Figma | CSS | WinUI |
---|---|---|
Inner | background-clip: border-box |
BackgroundSizing="OuterBorderEdge" |
Outer | background-clip: padding-box |
BackgroundSizing="InnerBorderEdge" |
from community-group.
I think there’s a unique problem with the string | object
polymorphism here which doesn’t exist on other tokens.
font
, for example, may be a string | string[]
. But if string
is passed, you could normalize that by simply placing that in an array, and it would be equivalent (in other words, you can “expand” one type into another). This form of polymorphism is easy to deal with because they aren’t necessarily distinct types; one is simply a shorthand for another.
I would expect for strokeStyle
the string
value should be “expandable” to the object value, but that doesn’t seem to be the case. If I’m reading this right, the object value would always be the dashed
style? If so, I’d suggest the following:
{
"alert-border-style": {
"$type": "strokeStyle",
"$value": {
"style": "dashed",
"dashArray": ["0.5rem", "0.25rem"],
"lineCap": "round"
}
}
}
Having a "style"
that corresponds to the string value (feel free to bikeshed the name; I’m not opinionated about “style”) allows the two types to be interchangeable. So "$value": "dashed"
and "$value": { "style": "dashed" }
are two ways to write the same thing.
Of course, that begs the question of whether or not other styles ("$value": { "style": "solid" }
) also have attributes that could be set. I’d probably lean toward simply letting the implementor decide which additional attributes apply and which don’t (e.g. say dashArray
was set on a solid
stroke and the tool author decided to ignore that attribute without throwing an error). But I could realistically see a core set of attributes applying to multiple styles and not being mutually-exclusive to one.
Alternate suggestion: if each different stroke type needs different values and there is little to no overlap, (i.e. there are “sub-types,”) I’d argue those are actually not the same type and need to be split apart.
In that instance, splitting apart one stroke into multiple e.g. $type: "solidStroke"
, $type: "dashedStroke"
, etc., would make it easier both on the author and the tool implementor than dealing with complex polymorphic types where one part of $value
has implications on the rest of the shape (hidden types).
from community-group.
I think if we're coping dashArray
or lineCap
. Because we're also referring here to SVG. There should also be other values like:
lineJoin: "round" | "bevel" | "miter"
miterLimit: number
dashOffset: number
from community-group.
Related Issues (20)
- 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
- [Meta] Do functions/transforms happen before tokens.json (i.e. to generate it)? Or within tokens.json? 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.