@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
114 lines • 2.37 kB
JavaScript
/* eslint-disable sort-keys */
/**
* Copyright (c) ACT, Inc. and its affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*
* @prettier
*/
/** Colors from E4S Web Design System */
// https://www.figma.com/file/4JazmqwcfRVZyRq6vRkf05/E4S-Web---Design-System?type=design&node-id=2946-25441&mode=design&t=5RBrs8ilrgqPDW2x-4
export var grayscale = {
white: '#FFFFFF',
lightestGray: '#F2F2F2',
lightGray: '#E2E2E2',
midGray: '#BDBDBD',
neutralGray: '#828282',
darkGray: '#424242',
black: '#222222',
};
/** AKA Rebrand Directive */
export var black = {
white: '#FFFFFF',
10: '#E4E8EA',
20: '#DADFE2',
40: '#CAD1D5',
60: '#666666',
80: '#002D61',
100: '#000000',
};
export var surface = {
grayscale: grayscale,
black: black
};
export var sapphire = {
15: '#DEE6F5',
30: '#BECEEA',
50: '#92ADDC',
70: '#668CCF',
100: '#255BBA',
};
export var navy = {
15: '#D9E0E7',
30: '#B3C0D0',
50: '#8096B0',
70: '#4D6C90',
100: '#002D61',
};
export var seafoam = {
15: '#F3FAF8',
30: '#E9F5F1',
50: '#E6F5F1',
70: '#C6E8DF',
100: '#ADDED1',
};
export var neon = {
15: '#FEFBE0',
30: '#FEF6C2',
50: '#FDF098',
70: '#FCEB70',
100: '#FBE232',
};
export var orange = {
15: '#FCE8E3',
30: '#F9D1C7',
50: '#F5B2A2',
70: '#F1947D',
100: '#EB6645',
};
export var fuchsia = {
15: '#F9E9F5',
30: '#F3D3EB',
50: '#EAB5DE',
70: '#E297D1',
100: '#D66BBD',
};
export var mist = {
15: '#F7F8F9',
30: '#EFF1F3',
50: '#E4E8EA',
70: '#D9DFE2',
100: '#C9D1D6',
};
export var teal = {
15: '#D9F3F2',
30: '#B3E6E5',
50: '#80D6D3',
70: '#4DC6C1',
100: '#00ADA7',
};
export var utility = {
danger: '#B00020',
tealT0: '#00ADA7',
tealT3: '#99DEDC',
savedCollegeHeartFill: '#F94868',
dangerAlertFill: '#EEDDE0',
blueAlertFill: '#D1E5F0',
successAlertFill: '#E1E9E2',
successAlert: '#2E7D32',
};
var colors = {
surface: surface,
sapphire: sapphire,
navy: navy,
seafoam: seafoam,
neon: neon,
orange: orange,
fuchsia: fuchsia,
mist: mist,
teal: teal,
utility: utility,
};
export default colors;
//# sourceMappingURL=colors.js.map