launchpad-ui/packages/components/src/styles/Alert.module.css at 9eaf069cdb26f46933f809a0507529d2ef2a6d23 · launchdarkly/launchpad-ui · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/* Temporary color aliases for Alerts. This block should be removed when the new color system is implemented. */
:root,
[data-theme='default'] {
	--alert-color-border-neutral: var(--lp-color-gray-200);
	--alert-color-bg-neutral: var(--lp-color-gray-0);
	--alert-color-border-error: var(--lp-color-red-200);
	--alert-color-bg-error: var(--lp-color-red-0);
	--alert-color-border-info: var(--lp-color-blue-200);
	--alert-color-bg-info: var(--lp-color-blue-0);
	--alert-color-border-success: var(--lp-color-green-200);
	--alert-color-bg-success: var(--lp-color-green-0);
	--alert-color-border-warning: #fad88f;
	--alert-color-bg-warning: #fdfae4;
}
[data-theme='dark'] {
	--alert-color-border-neutral: var(--lp-color-gray-800);
	--alert-color-bg-neutral: var(--lp-color-gray-900);
	--alert-color-border-error: var(--lp-color-red-700);
	--alert-color-bg-error: #391620;
	--alert-color-border-info: var(--lp-color-blue-700);
	--alert-color-bg-info: #192142;
	--alert-color-border-success: var(--lp-color-green-700);
	--alert-color-bg-success: #14260d;
	--alert-color-border-warning: #932c00;
	--alert-color-bg-warning: #3c170c;
}

.base {
	display: flex;
	border-radius: var(--lp-border-radius-medium);
	gap: var(--lp-spacing-300);
	align-items: flex-start;

	&.error .icon {
		fill: var(--lp-color-fill-feedback-error);
	}

	&.info .icon {
		fill: var(--lp-color-fill-feedback-info);
	}

	&.success .icon {
		fill: var(--lp-color-fill-feedback-success);
	}

	&.warning .icon {
		fill: #e65d00;
	}
}

/* Stacked actions variant */
.default {
	padding: var(--lp-spacing-500);
	background-color: var(--alert-color-bg-neutral);
	border: 1px solid var(--alert-color-border-neutral);
	position: relative;
	min-height: var(--lp-size-48);

	&.error {
		border-color: var(--alert-color-border-error);
		background-color: var(--alert-color-bg-error);
	}

	&.info {
		border-color: var(--alert-color-border-info);
		background-color: var(--alert-color-bg-info);
	}

	&.success {
		border-color: var(--alert-color-border-success);
		background-color: var(--alert-color-bg-success);
	}

	&.warning {
		border-color: var(--alert-color-border-warning);
		background-color: var(--alert-color-bg-warning);
	}

	& .icon {
		transform: translateY(var(--lp-size-2));
	}

	.close {
		position: relative;
		bottom: var(--lp-spacing-300);
		left: var(--lp-spacing-300);
	}

	.buttonGroup {
		margin-top: var(--lp-spacing-500);
	}
}

/* Inline actions variant */
.actionsInline {
	padding: var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-300) var(--lp-spacing-500);

	& .content {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--lp-spacing-500);
	}

	& .icon {
		transform: translateY(var(--lp-spacing-300));
	}

	/* This magic number is used to ensure the text baseline is aligned with the trailing actions and dismiss buttons */
	& .text {
		padding: calc(var(--lp-spacing-300) - 2px) 0;
	}

	& .buttonGroup {
		margin-top: unset;
		margin-left: auto;
	}

	& .close {
		bottom: unset;
		left: unset;
	}
}

.content {
	min-width: 0;
	flex: 1;
	display: flex;
	flex-direction: column;
	font: var(--lp-text-body-2-regular);
	align-items: flex-start;
}

.text .heading,
.content .heading {
	font: var(--lp-text-body-2-semibold);
}

/* Sometimes we want to make text bold, but we need to make sure this maps to the correct font weight. */
.content strong,
.content b {
	font-weight: var(--lp-font-weight-semibold);
}

/* Inline variant styles */
.inline {
	align-items: center;

	& .close {
		margin-left: var(--lp-spacing-300);
	}
}