-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Proposal: changes to type: $dimension and type: $duration tokens #244
Open
drwpow
wants to merge
3
commits into
main
Choose a base branch
from
drwpow/dimension-proposal
base: main
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
+95
−43
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -51,7 +51,12 @@ $translucent-shadow: hsla(300, 100%, 50%, 0.5); | |||||
|
||||||
## Dimension | ||||||
|
||||||
Represents an amount of distance in a single dimension in the UI, such as a position, width, height, radius, or thickness. The `$type` property MUST be set to the string `dimension`. The value must be a string containing a number (either integer or floating-point) followed by either a "px" or "rem" unit (future spec iterations may add support for additional units). This includes `0` which also MUST be followed by either a "px" or "rem" unit. | ||||||
Represents an amount of distance in a single dimension in the UI, such as a position, width, height, radius, or thickness. The `$type` property MUST be set to the string `dimension`. The value MUST be an object containing a numeric `value` (integer or floating-point) and `unit` of measurement (`"px"` or `"rem"`). | ||||||
|
||||||
| Key | Type | Required | Description | | ||||||
| :------ | :------: | :------: | :----------------------------------------------------------------- | | ||||||
| `value` | `number` | Y | An integer or floating-point value representing the numeric value. | | ||||||
| `unit` | `string` | Y | Unit of distance. Supported values: `"px"`, `"rem"`. | | ||||||
|
||||||
For example: | ||||||
|
||||||
|
@@ -60,22 +65,30 @@ For example: | |||||
```json | ||||||
{ | ||||||
"spacing-stack-0": { | ||||||
"$value": "0rem", | ||||||
"$value": { | ||||||
"value": 0, | ||||||
"unit": "px" | ||||||
}, | ||||||
"$type": "dimension" | ||||||
}, | ||||||
"spacing-stack-1": { | ||||||
"$value": "0.25rem", | ||||||
"$value": { | ||||||
"value": 0.5, | ||||||
"unit": "rem" | ||||||
}, | ||||||
"$type": "dimension" | ||||||
} | ||||||
} | ||||||
``` | ||||||
|
||||||
</aside> | ||||||
|
||||||
The "px" and "rem" units are to be interpreted the same way they are in CSS: | ||||||
### Validation | ||||||
|
||||||
- **px**: Represents an idealized pixel on the viewport. The equivalent in Android is dp and iOS is pt. Translation tools SHOULD therefore convert to these or other equivalent units as needed. | ||||||
- **rem**: Represents a multiple of the system's default font size (which MAY be configurable by the user). 1rem is 100% of the default font size. The equivalent of 1rem on Android is 16sp. Not all platforms have an equivalent to rem, so translation tools MAY need to do a lossy conversion to a fixed px size by assuming a default font size (usually 16px) for such platforms. | ||||||
- `$value.unit` may only be `"px"` or `"rem"`. | ||||||
- **px**: Represents an idealized pixel on the viewport. The equivalent in Android is `dp` and iOS is `pt`. Translation tools SHOULD therefore convert to these or other equivalent units as needed. | ||||||
- **rem**: Represents a multiple of the system's default font size (which MAY be configurable by the user). 1rem is 100% of the default font size. The equivalent of 1rem on Android is 16sp. Not all platforms have an equivalent to rem, so translation tools MAY need to do a lossy conversion to a fixed px size by assuming a default font size (usually 16px) for such platforms. | ||||||
- `$value.unit` is still requird even if `$value.value` is `0`. | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
|
||||||
## Font family | ||||||
|
||||||
|
@@ -148,27 +161,39 @@ Example: | |||||
|
||||||
## Duration | ||||||
|
||||||
Represents the length of time in milliseconds an animation or animation cycle takes to complete, such as 200 milliseconds. The `$type` property MUST be set to the string `duration`. The value MUST be a string containing a number (either integer or floating-point) followed by an "ms" unit. A millisecond is a unit of time equal to one thousandth of a second. | ||||||
Represents the length of time in milliseconds an animation or animation cycle takes to complete, such as 200 milliseconds. The `$type` property MUST be set to the string `duration`. The value MUST be an object containing a numeric `value` (either integer or floating-point) and a `unit` of milliseconds (`"ms"`) or seconds (`"s"`). A millisecond is a unit of time equal to one thousandth of a second. | ||||||
|
||||||
| Key | Type | Required | Description | | ||||||
| :------ | :------: | :------: | :------------------------------------------------------------------- | | ||||||
| `value` | `number` | Y | An integer or floating-point value representing the numeric value. | | ||||||
| `unit` | `string` | Y | Unit of time. Supported values: `"ms"` (millisecond), `"s"`(second). | | ||||||
drwpow marked this conversation as resolved.
Show resolved
Hide resolved
|
||||||
|
||||||
For example: | ||||||
|
||||||
<aside class="example"> | ||||||
|
||||||
```json | ||||||
{ | ||||||
"Duration-100": { | ||||||
"$value": "100ms", | ||||||
"Duration-Quick": { | ||||||
"$value": { | ||||||
"value": 100, | ||||||
"unit": "ms" | ||||||
}, | ||||||
"$type": "duration" | ||||||
}, | ||||||
"Duration-200": { | ||||||
"$value": "200ms", | ||||||
"Duration-Long": { | ||||||
"$value": { "value": 1.5, "unit": "s" }, | ||||||
"$type": "duration" | ||||||
} | ||||||
} | ||||||
``` | ||||||
|
||||||
</aside> | ||||||
|
||||||
### Validation | ||||||
|
||||||
- `$value.unit` may only be `"ms"` or `"s"` | ||||||
|
||||||
## Cubic Bézier | ||||||
|
||||||
Represents how the value of an animated property progresses towards completion over the duration of an animation, effectively creating visual effects such as acceleration, deceleration, and bounce. The `$type` property MUST be set to the string `cubicBezier`. The value MUST be an array containing four numbers. These numbers represent two points (P1, P2) with one x coordinate and one y coordinate each [P1x, P1y, P2x, P2y]. The y coordinates of P1 and P2 can be any real number in the range [-∞, ∞], but the x coordinates are restricted to the range [0, 1]. | ||||||
|
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Note: this new subheading is inconsistent with the other sections. This was done thinking back to #200 that observes the spec could be more explicit about validation.
This would be a change from the current structure of validation rules existing in prose, usually in the initial description. However, in many places, those aren’t exhaustive/complete (for good reason—it’d be hard to read).
All that said, we don’t have to introduce these subheadings in this PR; we could fold everything into prose form to match the existing format.