@atlaskit/tokens
Version:
Design tokens are the single source of truth to name and store design decisions.
270 lines (269 loc) • 8.53 kB
JavaScript
/**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::dacfb9678c4e6bee99dafbec63f62895>>
* @codegenCommand yarn build tokens
*/
var tokens = [{
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
},
"value": "2px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for small detail elements: badges, checkboxes, avatar labels, keyboard shortcuts."
},
"value": "Radius02"
},
"name": "radius.xsmall",
"path": ["radius", "xsmall"],
"cleanName": "radius.xsmall"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["4px"],
"introduced": "6.1.0",
"description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
},
"value": "4px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["4px"],
"introduced": "6.1.0",
"description": "Use for supporting elements: labels, lozenges, timestamps, tags, dates, tooltip containers, imagery inside a table, compact buttons."
},
"value": "Radius04"
},
"name": "radius.small",
"path": ["radius", "small"],
"cleanName": "radius.small"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["6px"],
"introduced": "6.1.0",
"description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
},
"value": "6px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["6px"],
"introduced": "6.1.0",
"description": "Use for interactive elements: buttons, inputs, text areas, selects, navigation items, smart links."
},
"value": "Radius06"
},
"name": "radius.medium",
"path": ["radius", "medium"],
"cleanName": "radius.medium"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["8px"],
"introduced": "6.1.0",
"description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
},
"value": "8px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["8px"],
"introduced": "6.1.0",
"description": "Use for containment elements: cards, in-page containers, floating UI, dropdown menus."
},
"value": "Radius08"
},
"name": "radius.large",
"path": ["radius", "large"],
"cleanName": "radius.large"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["12px"],
"introduced": "6.1.0",
"description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
},
"value": "12px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["12px"],
"introduced": "6.1.0",
"description": "Use for large page elements: full-page containers, large containers, modals, Kanban columns, tables."
},
"value": "Radius12"
},
"name": "radius.xlarge",
"path": ["radius", "xlarge"],
"cleanName": "radius.xlarge"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["12px"],
"introduced": "8.1.0",
"description": "Use for video player containers."
},
"value": "16px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["12px"],
"introduced": "8.1.0",
"description": "Use for video player containers."
},
"value": "Radius16"
},
"name": "radius.xxlarge",
"path": ["radius", "xxlarge"],
"cleanName": "radius.xxlarge"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["50%"],
"introduced": "6.1.0",
"description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
},
"value": "9999px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["50%"],
"introduced": "6.1.0",
"description": "Use for circular elements (user/people related): avatars, names, user-related UI, emoji reactions."
},
"value": "Radius99"
},
"name": "radius.full",
"path": ["radius", "full"],
"cleanName": "radius.full"
}, {
"attributes": {
"group": "shape",
"state": "active",
"introduced": "6.2.0",
"description": "Use this specific radius token exclusively for the tile component system."
},
"value": "25%",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"introduced": "6.2.0",
"description": "Use this specific radius token exclusively for the tile component system."
},
"value": "RadiusPercentage25"
},
"name": "radius.tile",
"path": ["radius", "tile"],
"cleanName": "radius.tile"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["1px"],
"introduced": "1.5.2",
"description": "The default width for all standard component borders and dividers."
},
"value": "1px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["1px"],
"introduced": "1.5.2",
"description": "The default width for all standard component borders and dividers."
},
"value": "BorderWidth1"
},
"name": "border.width.[default]",
"path": ["border", "width", "[default]"],
"cleanName": "border.width"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for the width of a border or visual indicator that communicates selection, such as an active tab or a chosen item. Pair with color.border.selected. Do not use as a substitute for a separate keyboard focus indicator."
},
"value": "2px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for the width of a border or visual indicator that communicates selection, such as an active tab or a chosen item. Pair with color.border.selected. Do not use as a substitute for a separate keyboard focus indicator."
},
"value": "BorderWidth2"
},
"name": "border.width.selected",
"path": ["border", "width", "selected"],
"cleanName": "border.width.selected"
}, {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for the width of the focus ring on an interactive element that currently has keyboard or input focus. Pair with color.border.focused. When the element is also selected, keep the selection indicator and add the focus ring."
},
"value": "2px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "Use for the width of the focus ring on an interactive element that currently has keyboard or input focus. Pair with color.border.focused. When the element is also selected, keep the selection indicator and add the focus ring."
},
"value": "BorderWidth2"
},
"name": "border.width.focused",
"path": ["border", "width", "focused"],
"cleanName": "border.width.focused"
}];
export default tokens;