@octopusdeploy/design-system-tokens
Version:
The design systems tokens. This package contains the raw tokens in their original format, and compiled to an appropriate format for consumption by the design system components.
201 lines (200 loc) • 4.79 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.textDecoration = exports.textCase = exports.space = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontSize = exports.fontFamily = exports.dialog = exports.colorScales = exports.borderWidth = exports.borderRadius = void 0;
exports.borderRadius = {
"circle": "9999px",
"extraLarge": "16px",
"extraSmall": "2px",
"large": "8px",
"medium": "6px",
"none": "0px",
"small": "4px"
};
exports.borderWidth = {
"1": "1px",
"2": "2px",
"3": "3px",
"4": "4px",
"none": "0px"
};
exports.colorScales = {
"black": "#000000",
"blue": {
"100": "#F2F8FD",
"200": "#CDE4F7",
"300": "#87BFEC",
"400": "#449BE1",
"500": "#1A77CA",
"600": "#155EA0",
"700": "#0F4778",
"800": "#093051",
"900": "#041A2D"
},
"green": {
"100": "#EEFAF5",
"200": "#B8E7D3",
"300": "#5ECD9E",
"400": "#00AB62",
"500": "#00874D",
"600": "#006A3D",
"700": "#00502E",
"800": "#00361F",
"900": "#001E11"
},
"grey": {
"100": "#F7F7F7",
"200": "#E1E1E1",
"300": "#B9B9B9",
"400": "#959595",
"500": "#757575",
"600": "#5C5C5C",
"700": "#454545",
"800": "#2E2E2E",
"900": "#191919"
},
"navy": {
"100": "#F4F6F8",
"200": "#DAE2E9",
"300": "#A9BBCB",
"400": "#7C98B4",
"500": "#557999",
"600": "#3E607D",
"700": "#2E475D",
"800": "#1F303F",
"900": "#111A23"
},
"orange": {
"100": "#FFF5ED",
"200": "#FFDABF",
"300": "#FFA461",
"400": "#EA7325",
"500": "#C45317",
"600": "#A13C14",
"700": "#7E2812",
"800": "#59170D",
"900": "#340B07"
},
"purple": {
"100": "#F8F5FD",
"200": "#E7DEF8",
"300": "#C5AEEE",
"400": "#A683E5",
"500": "#895ED3",
"600": "#7043B7",
"700": "#572B97",
"800": "#3B1D66",
"900": "#21103A"
},
"red": {
"100": "#FFF3F3",
"200": "#FFD8D8",
"300": "#FF9F9F",
"400": "#FF5D5D",
"500": "#D63D3D",
"600": "#AA3030",
"700": "#802424",
"800": "#571818",
"900": "#310E0E"
},
"slate": {
"100": "#F5F6F8",
"200": "#DEE1E6",
"300": "#B2B9C5",
"400": "#8A96A7",
"500": "#68778D",
"600": "#515D70",
"700": "#3D4653",
"800": "#282F38",
"900": "#16191F"
},
"white": "#FFFFFF",
"yellow": {
"100": "#FFF7D9",
"200": "#FFDF62",
"300": "#E5B203",
"400": "#B98F02",
"500": "#927002",
"600": "#745801",
"700": "#584201",
"800": "#3B2C00",
"900": "#201800"
}
};
exports.dialog = {
"mainPanel": {
"width": {
"extraLarge": "1000px",
"large": "800px",
"medium": "600px",
"small": "480px"
}
},
"maxHeight": "800px",
"sidePanel": {
"fadeDuration": "100ms",
"slideDuration": "300ms",
"width": "400px"
}
};
exports.fontFamily = {
"system-ui": "BlinkMacSystemFont, -apple-system, \"Segoe UI\", \"Oxygen Sans\", Ubuntu, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol",
"system-ui-monospace": "ui-monospace, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", \"Oxygen Mono\", \"Ubuntu Mono\", monospace"
};
exports.fontSize = {
"2xLarge": "2rem",
"3xLarge": "3rem",
"base": "1rem",
"large": "1.25rem",
"medium": "0.875rem",
"small": "0.8125rem",
"xLarge": "1.5rem",
"xSmall": "0.75rem"
};
exports.fontWeight = {
"400": "400",
"500": "500",
"600": "600",
"700": "700"
};
exports.letterSpacing = {
"none": "0",
"tight": "-0.006rem",
"wide": "0.006rem",
"wider": "0.013rem"
};
exports.lineHeight = {
"2xLarge": "2.75rem",
"3xLarge": "3.5rem",
"large": "2rem",
"medium": "1.75rem",
"small": "1.5rem",
"xLarge": "2.5rem",
"xSmall": "1.25rem"
};
exports.space = {
"0": "0",
"1": "0.063rem",
"12": "0.75rem",
"16": "1rem",
"2": "0.125rem",
"24": "1.5rem",
"32": "2rem",
"4": "0.25rem",
"40": "2.5rem",
"48": "3rem",
"56": "3.5rem",
"6": "0.375rem",
"64": "4rem",
"72": "4.5rem",
"8": "0.5rem",
"80": "5rem"
};
exports.textCase = {
"lowercase": "lowercase",
"none": "none",
"uppercase": "uppercase"
};
exports.textDecoration = {
"none": "none",
"underline": "underline"
};