@atlaskit/tokens
Version:
Design tokens are the single source of truth to name and store design decisions.
276 lines (274 loc) • 8.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
/**
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
* @codegen <<SignedSource::139953049673c5a74ab686e4a2ddaf50>>
* @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": "The width used to indicate a selected element, such as an active tab or a chosen item."
},
"value": "2px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "The width used to indicate a selected element, such as an active tab or a chosen item."
},
"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": "The width used for the focus ring on interactive elements."
},
"value": "2px",
"filePath": "schema/themes/atlassian-shape/shape.tsx",
"isSource": true,
"original": {
"attributes": {
"group": "shape",
"state": "active",
"suggest": ["2px"],
"introduced": "6.1.0",
"description": "The width used for the focus ring on interactive elements."
},
"value": "BorderWidth2"
},
"name": "border.width.focused",
"path": ["border", "width", "focused"],
"cleanName": "border.width.focused"
}];
var _default = exports.default = tokens;