93 lines
2.6 KiB
SCSS
93 lines
2.6 KiB
SCSS
// 2025 branding
|
|
$core-fleet-black: #192147;
|
|
$core-fleet-green: #009a7d;
|
|
$core-fleet-white: #ffffff;
|
|
$ui-fleet-black-75: #515774;
|
|
$ui-fleet-black-50: #8b8fa2;
|
|
$ui-fleet-black-33: #b3b6c1;
|
|
$ui-fleet-black-25: #c5c7d1;
|
|
$ui-fleet-black-10: #e2e4ea;
|
|
$ui-fleet-black-5: #f4f4f6;
|
|
$core-focused-outline: $core-fleet-black;
|
|
|
|
// 2025 secondary colors
|
|
$ui-fleet-black-75-over: darken(#515774, 5%);
|
|
$ui-fleet-black-75-down: darken(#515774, 10%);
|
|
$core-fleet-green-over: darken(#009a7d, 5%);
|
|
$core-fleet-green-down: darken(#009a7d, 10%);
|
|
$ui-fleet-black-5-down: #f0f1f4; // As specified in design system
|
|
|
|
// Core
|
|
$core-fleet-blue: #3e4771;
|
|
$core-vibrant-blue: #6a67fe;
|
|
$core-vibrant-red: #ff5c83;
|
|
$core-fleet-purple: #ae6ddf;
|
|
$core-dark-blue-grey: #506e92;
|
|
$site-nav-on-hover: #0e1533;
|
|
|
|
// UI
|
|
$ui-fleet-blue-10: #f9fafc;
|
|
$ui-dark-blue-gray: #afbec1;
|
|
$ui-blue-gray: #dbe3e5;
|
|
$ui-gray: #e3e3e3;
|
|
$ui-light-grey: #fafafa;
|
|
$ui-off-white: #f9fafc; // rgba(249, 250, 252, 1)
|
|
$ui-shadow: #e9e9e9;
|
|
$ui-vibrant-blue-50: rgba(106, 103, 254, 0.5);
|
|
$ui-vibrant-blue-25: #d9d9fe;
|
|
$ui-vibrant-blue-10: #f1f0ff; // rgba(241, 240, 255, 1)
|
|
$tooltip-bg: #3e4771;
|
|
|
|
// Notifications & status & specific messages
|
|
$ui-offline: #8b8fa2;
|
|
$ui-success: #3db67b;
|
|
$ui-warning: #ebbc43;
|
|
$ui-error: #d66c7b;
|
|
$ui-info: #6a67fe;
|
|
$ui-yellow-banner: #fef7e0;
|
|
$ui-yellow-banner-outline: #ece0bb;
|
|
|
|
// Rainbow
|
|
$rainbow-orange: #faa669;
|
|
$rainbow-green: #63c740;
|
|
$rainbow-blue: #5cabdf;
|
|
|
|
// Gradients
|
|
$gradient-background: #eff6fa; // 2025 gradient start color
|
|
$gradients-dark-gradient: linear-gradient(270deg, #201e43 0%, #353d62 100%);
|
|
$gradients-dark-gradient-vertical: linear-gradient(
|
|
360deg,
|
|
#201e43 0%,
|
|
#353d62 100%
|
|
);
|
|
$gradients-bright-gradient: linear-gradient(180deg, #ae6ddf 0%, #6a67fe 100%);
|
|
|
|
// Colors for over (hover) and down (active) buttons styles
|
|
$core-vibrant-red-over: #e93661;
|
|
$core-vibrant-red-down: #cb3559;
|
|
$core-vibrant-blue-over: #5d5ae7;
|
|
$core-vibrant-blue-down: #4b4ab4;
|
|
$ui-success-over: #36a26d;
|
|
$ui-success-down: #2b7f56;
|
|
$core-fleet-blue-over: #303860;
|
|
$core-fleet-blue-down: $core-fleet-black;
|
|
|
|
$transparent: rgba(255, 255, 255, 0);
|
|
|
|
// Opaque colors for table shadows
|
|
// l = lowest color a = (255-l)/255
|
|
$ui-vibrant-blue-10-alpha: (255-240)/255; // rgba(241, 240, 255)
|
|
$ui-vibrant-blue-10-opaque: rgba(
|
|
(241-240) / $ui-vibrant-blue-10-alpha,
|
|
(240-240) / $ui-vibrant-blue-10-alpha,
|
|
(255-240) / $ui-vibrant-blue-10-alpha,
|
|
$ui-vibrant-blue-10-alpha
|
|
);
|
|
$ui-off-white-alpha: (255-249)/255; // rgba(249, 250, 252)
|
|
$ui-off-white-opaque: rgba(
|
|
(249-249) / $ui-off-white-alpha,
|
|
(250-249) / $ui-off-white-alpha,
|
|
(252-249) / $ui-off-white-alpha,
|
|
$ui-off-white-alpha
|
|
);
|