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