@atlaskit/tokens 13.0.2 → 13.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,16 @@
|
|
|
1
1
|
# @atlaskit/tokens
|
|
2
2
|
|
|
3
|
+
## 13.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f63b64df22780`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f63b64df22780) -
|
|
8
|
+
Allow `0` and `'0'` as valid values for the `SizeIntrinsic` type. This means `width`, `height`,
|
|
9
|
+
`minWidth`, `minHeight`, `maxWidth`, `maxHeight`, and related block/inline size properties now
|
|
10
|
+
accept bare `0` without requiring `'0px'`. This is consistent with how CSS works (bare `0` is
|
|
11
|
+
valid without a unit) and matches the existing behaviour of `Space`, `BorderWidth`,
|
|
12
|
+
`BorderRadius`, and `Opacity` types.
|
|
13
|
+
|
|
3
14
|
## 13.0.2
|
|
4
15
|
|
|
5
16
|
### Patch Changes
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Strict design token based typedef representing a subset of safe CSS properties.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::26cd14173782b5329f576f0f33e340ce>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
|
|
@@ -17,7 +17,7 @@ export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)'
|
|
|
17
17
|
export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-selected)' | 'var(--ds-border-width-focused)' | 0 | '0';
|
|
18
18
|
export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
|
|
19
19
|
type NumericSize = `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}%`;
|
|
20
|
-
export type SizeIntrinsic = 'min-content' | 'max-content' | 'fit-content' | 'auto' | NumericSize | `min(${NumericSize}, ${NumericSize})` | `max(${NumericSize}, ${NumericSize})
|
|
20
|
+
export type SizeIntrinsic = 'min-content' | 'max-content' | 'fit-content' | 'auto' | NumericSize | `min(${NumericSize}, ${NumericSize})` | `max(${NumericSize}, ${NumericSize})` | 0 | '0';
|
|
21
21
|
export type Space = 'var(--ds-space-0)' | 'var(--ds-space-025)' | 'var(--ds-space-050)' | 'var(--ds-space-075)' | 'var(--ds-space-100)' | 'var(--ds-space-150)' | 'var(--ds-space-200)' | 'var(--ds-space-250)' | 'var(--ds-space-300)' | 'var(--ds-space-400)' | 'var(--ds-space-500)' | 'var(--ds-space-600)' | 'var(--ds-space-800)' | 'var(--ds-space-1000)' | 'var(--ds-space-negative-025)' | 'var(--ds-space-negative-050)' | 'var(--ds-space-negative-075)' | 'var(--ds-space-negative-100)' | 'var(--ds-space-negative-150)' | 'var(--ds-space-negative-200)' | 'var(--ds-space-negative-250)' | 'var(--ds-space-negative-300)' | 'var(--ds-space-negative-400)' | 0 | '0';
|
|
22
22
|
export type SpaceMargin = Space | 'auto' | '0 auto';
|
|
23
23
|
export type SpaceInset = Space | '50%';
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Strict design token based typedef representing a subset of safe CSS properties.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::26cd14173782b5329f576f0f33e340ce>>
|
|
7
7
|
* @codegenCommand yarn build tokens
|
|
8
8
|
*/
|
|
9
9
|
export type BackgroundColorHovered = 'var(--ds-background-accent-lime-subtlest-hovered)' | 'var(--ds-background-accent-lime-subtler-hovered)' | 'var(--ds-background-accent-lime-subtle-hovered)' | 'var(--ds-background-accent-lime-bolder-hovered)' | 'var(--ds-background-accent-red-subtlest-hovered)' | 'var(--ds-background-accent-red-subtler-hovered)' | 'var(--ds-background-accent-red-subtle-hovered)' | 'var(--ds-background-accent-red-bolder-hovered)' | 'var(--ds-background-accent-orange-subtlest-hovered)' | 'var(--ds-background-accent-orange-subtler-hovered)' | 'var(--ds-background-accent-orange-subtle-hovered)' | 'var(--ds-background-accent-orange-bolder-hovered)' | 'var(--ds-background-accent-yellow-subtlest-hovered)' | 'var(--ds-background-accent-yellow-subtler-hovered)' | 'var(--ds-background-accent-yellow-subtle-hovered)' | 'var(--ds-background-accent-yellow-bolder-hovered)' | 'var(--ds-background-accent-green-subtlest-hovered)' | 'var(--ds-background-accent-green-subtler-hovered)' | 'var(--ds-background-accent-green-subtle-hovered)' | 'var(--ds-background-accent-green-bolder-hovered)' | 'var(--ds-background-accent-teal-subtlest-hovered)' | 'var(--ds-background-accent-teal-subtler-hovered)' | 'var(--ds-background-accent-teal-subtle-hovered)' | 'var(--ds-background-accent-teal-bolder-hovered)' | 'var(--ds-background-accent-blue-subtlest-hovered)' | 'var(--ds-background-accent-blue-subtler-hovered)' | 'var(--ds-background-accent-blue-subtle-hovered)' | 'var(--ds-background-accent-blue-bolder-hovered)' | 'var(--ds-background-accent-purple-subtlest-hovered)' | 'var(--ds-background-accent-purple-subtler-hovered)' | 'var(--ds-background-accent-purple-subtle-hovered)' | 'var(--ds-background-accent-purple-bolder-hovered)' | 'var(--ds-background-accent-magenta-subtlest-hovered)' | 'var(--ds-background-accent-magenta-subtler-hovered)' | 'var(--ds-background-accent-magenta-subtle-hovered)' | 'var(--ds-background-accent-magenta-bolder-hovered)' | 'var(--ds-background-accent-gray-subtlest-hovered)' | 'var(--ds-background-accent-gray-subtler-hovered)' | 'var(--ds-background-accent-gray-subtle-hovered)' | 'var(--ds-background-accent-gray-bolder-hovered)' | 'var(--ds-background-input-hovered)' | 'var(--ds-background-inverse-subtle-hovered)' | 'var(--ds-background-neutral-hovered)' | 'var(--ds-background-neutral-subtle-hovered)' | 'var(--ds-background-neutral-bold-hovered)' | 'var(--ds-background-selected-hovered)' | 'var(--ds-background-selected-bold-hovered)' | 'var(--ds-background-brand-subtlest-hovered)' | 'var(--ds-background-brand-bold-hovered)' | 'var(--ds-background-brand-boldest-hovered)' | 'var(--ds-background-danger-hovered)' | 'var(--ds-background-danger-subtler-hovered)' | 'var(--ds-background-danger-bold-hovered)' | 'var(--ds-background-warning-hovered)' | 'var(--ds-background-warning-subtler-hovered)' | 'var(--ds-background-warning-bold-hovered)' | 'var(--ds-background-success-hovered)' | 'var(--ds-background-success-subtler-hovered)' | 'var(--ds-background-success-bold-hovered)' | 'var(--ds-background-discovery-hovered)' | 'var(--ds-background-discovery-subtler-hovered)' | 'var(--ds-background-discovery-bold-hovered)' | 'var(--ds-background-information-hovered)' | 'var(--ds-background-information-subtler-hovered)' | 'var(--ds-background-information-bold-hovered)' | 'var(--ds-surface-hovered)' | 'var(--ds-surface-overlay-hovered)' | 'var(--ds-surface-raised-hovered)';
|
|
@@ -17,7 +17,7 @@ export type BorderRadius = 'var(--ds-radius-xsmall)' | 'var(--ds-radius-small)'
|
|
|
17
17
|
export type BorderWidth = 'var(--ds-border-width)' | 'var(--ds-border-width-selected)' | 'var(--ds-border-width-focused)' | 0 | '0';
|
|
18
18
|
export type BorderShorthand = 'none' | `${BorderWidth} solid ${BorderColor}`;
|
|
19
19
|
type NumericSize = `${number}px` | `${number}rem` | `${number}vh` | `${number}vw` | `${number}%`;
|
|
20
|
-
export type SizeIntrinsic = 'min-content' | 'max-content' | 'fit-content' | 'auto' | NumericSize | `min(${NumericSize}, ${NumericSize})` | `max(${NumericSize}, ${NumericSize})
|
|
20
|
+
export type SizeIntrinsic = 'min-content' | 'max-content' | 'fit-content' | 'auto' | NumericSize | `min(${NumericSize}, ${NumericSize})` | `max(${NumericSize}, ${NumericSize})` | 0 | '0';
|
|
21
21
|
export type Space = 'var(--ds-space-0)' | 'var(--ds-space-025)' | 'var(--ds-space-050)' | 'var(--ds-space-075)' | 'var(--ds-space-100)' | 'var(--ds-space-150)' | 'var(--ds-space-200)' | 'var(--ds-space-250)' | 'var(--ds-space-300)' | 'var(--ds-space-400)' | 'var(--ds-space-500)' | 'var(--ds-space-600)' | 'var(--ds-space-800)' | 'var(--ds-space-1000)' | 'var(--ds-space-negative-025)' | 'var(--ds-space-negative-050)' | 'var(--ds-space-negative-075)' | 'var(--ds-space-negative-100)' | 'var(--ds-space-negative-150)' | 'var(--ds-space-negative-200)' | 'var(--ds-space-negative-250)' | 'var(--ds-space-negative-300)' | 'var(--ds-space-negative-400)' | 0 | '0';
|
|
22
22
|
export type SpaceMargin = Space | 'auto' | '0 auto';
|
|
23
23
|
export type SpaceInset = Space | '50%';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/tokens",
|
|
3
|
-
"version": "13.0.
|
|
3
|
+
"version": "13.0.3",
|
|
4
4
|
"description": "Design tokens are the single source of truth to name and store design decisions.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/button": "^23.11.0",
|
|
55
55
|
"@atlaskit/calendar": "^17.2.0",
|
|
56
56
|
"@atlaskit/checkbox": "^17.3.0",
|
|
57
|
-
"@atlaskit/code": "^17.
|
|
57
|
+
"@atlaskit/code": "^17.5.0",
|
|
58
58
|
"@atlaskit/css": "^0.19.0",
|
|
59
59
|
"@atlaskit/docs": "^11.8.0",
|
|
60
60
|
"@atlaskit/dropdown-menu": "^16.8.0",
|
|
@@ -67,10 +67,10 @@
|
|
|
67
67
|
"@atlaskit/lozenge": "^13.8.0",
|
|
68
68
|
"@atlaskit/popup": "^4.17.0",
|
|
69
69
|
"@atlaskit/primitives": "^19.0.0",
|
|
70
|
-
"@atlaskit/radio": "^8.
|
|
70
|
+
"@atlaskit/radio": "^8.6.0",
|
|
71
71
|
"@atlaskit/section-message": "^8.12.0",
|
|
72
72
|
"@atlaskit/select": "^21.10.0",
|
|
73
|
-
"@atlaskit/tag": "^14.
|
|
73
|
+
"@atlaskit/tag": "^14.13.0",
|
|
74
74
|
"@atlaskit/textarea": "^8.3.0",
|
|
75
75
|
"@atlaskit/textfield": "^8.3.0",
|
|
76
76
|
"@atlaskit/theme": "^23.2.0",
|
package/offerings.json
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
[
|
|
2
|
-
{
|
|
3
|
-
"name": "token",
|
|
4
|
-
"package": "@atlaskit/tokens",
|
|
5
|
-
"import": {
|
|
6
|
-
"name": "token",
|
|
7
|
-
"package": "@atlaskit/tokens",
|
|
8
|
-
"type": "named"
|
|
9
|
-
},
|
|
10
|
-
"type": "function",
|
|
11
|
-
"keywords": [
|
|
12
|
-
"token",
|
|
13
|
-
"design",
|
|
14
|
-
"system",
|
|
15
|
-
"color",
|
|
16
|
-
"spacing",
|
|
17
|
-
"typography",
|
|
18
|
-
"radius",
|
|
19
|
-
"theme",
|
|
20
|
-
"css",
|
|
21
|
-
"style",
|
|
22
|
-
"variable"
|
|
23
|
-
],
|
|
24
|
-
"categories": ["tokens"],
|
|
25
|
-
"shortDescription": "Design tokens provide consistent, semantic values for colors, spacing, typography, and other design properties across the Atlassian Design System. Use tokens instead of hardcoded values to ensure consistency and proper theming.",
|
|
26
|
-
"status": "general-availability",
|
|
27
|
-
"accessibilityGuidelines": [
|
|
28
|
-
"Use color tokens to ensure proper contrast ratios",
|
|
29
|
-
"Test color combinations for accessibility compliance",
|
|
30
|
-
"Use semantic color names (success, warning, danger) for better meaning"
|
|
31
|
-
],
|
|
32
|
-
"usageGuidelines": [
|
|
33
|
-
"AVOID hardcoding any CSS values where a token exists for that type; in many cases you may be forced to use a token",
|
|
34
|
-
"Use the `token()` function with CSS-in-JS",
|
|
35
|
-
"Use semantic token names for better maintainability"
|
|
36
|
-
],
|
|
37
|
-
"generativeInstructions": [
|
|
38
|
-
"./docs/ai/color-instructions.md",
|
|
39
|
-
"./docs/ai/spacing-instructions.md",
|
|
40
|
-
"./docs/ai/border-radius-instructions.md"
|
|
41
|
-
],
|
|
42
|
-
"examples": ["./examples/ai/basic.tsx"]
|
|
43
|
-
}
|
|
44
|
-
]
|