@actinc/dls
Version:
Design Language System (DLS) for ACT & Encoura front-end projects.
81 lines • 3.03 kB
JavaScript
/**
* 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.
*/
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
/* eslint-disable sort-keys */
import { common, green, grey, red, yellow } from '@mui/material/colors';
import { recomposeColor } from '@mui/material/styles';
import { figmaColorGenerator, generatePaletteColors } from './helpers';
export var COLOR_PALETTE = [
{ colorHEX: '#00ada7', colorName: 'teal' },
{ colorHEX: '#002d61', colorName: 'navy' },
{ colorHEX: '#fbe232', colorName: 'neon' },
{ colorHEX: '#eb6645', colorName: 'orange' },
{ colorHEX: '#added1', colorName: 'seafoam' },
{ colorHEX: '#d66bbd', colorName: 'fuchsia' },
{ colorHEX: '#c9d1d6', colorName: 'mist' },
{ colorHEX: '#255bba', colorName: 'sapphire' },
{ colorHEX: '#c7d0d8', colorName: 'surface' },
];
export var utilityError = figmaColorGenerator('#ff5252');
export var utilityInfo = figmaColorGenerator('#2196f3');
export var utilitySuccess = figmaColorGenerator('#4cAf50');
export var utilityWarning = figmaColorGenerator('#FFC107');
export var paletteColors = generatePaletteColors(COLOR_PALETTE);
export var almostBlack = '#2d3032';
export var palette = {
action: {
active: yellow[900],
activeHover: yellow[800],
hover: common.white,
},
background: {
default: 'rgb(82, 95, 101)',
scrim: recomposeColor({ type: 'rgba', values: [45, 48, 50, 0.65] }),
},
branding: __assign(__assign({}, paletteColors), { surface: __assign(__assign({}, paletteColors.surface), { almostBlack: almostBlack }) }),
info: {
main: common.white,
},
progress: {
failure: red[700],
idle: grey[300],
interrupted: paletteColors.orange[600],
success: green[400],
},
text: {
overDark: {
disabled: recomposeColor({ type: 'rgba', values: [244, 244, 244, 0.35] }),
high: '#FFFFFF',
medium: recomposeColor({ type: 'rgba', values: [244, 244, 244, 0.7] }),
},
overLight: {
disabled: recomposeColor({ type: 'rgba', values: [0, 0, 0, 0.26] }),
high: recomposeColor({ type: 'rgba', values: [0, 0, 0, 0.87] }),
medium: recomposeColor({ type: 'rgba', values: [0, 0, 0, 0.6] }),
},
},
utility: {
error: utilityError,
info: utilityInfo,
restingState: 'rgba(63, 81, 181, 0.5)',
success: utilitySuccess,
warning: utilityWarning,
white: '#ffffff',
},
};
export default palette;
//# sourceMappingURL=palette.js.map