launchpad-ui/packages/components/src/styles/Switch.module.css at c664c42642cfd54068bf4aa824771aadca6cd939 · 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
:root,
[data-theme='default'] {
	--switch-handle-shadow: 0 0 1px 0 rgb(33 33 33 / 0.75), 0 0 2px 0 rgb(33 33 33 / 0.75), 0 0 1px 0
		rgb(33 33 33 / 0.35);
	--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 117 66 / 0.75), 0 0 2px 0 rgb(0 117 66 / 0.06), 0
		0 1px 0 rgb(0 117 66 / 0.35);
}

[data-theme='dark'] {
	--switch-handle-shadow: 0 0 1px 0 rgb(0 0 0 / 0.5), 0 0 2px 0 rgb(0 0 0 / 0.4), 0 0 1px 0
		rgb(0 0 0 / 0.25);
	--switch-handle-shadow-selected: 0 0 1px 0 rgb(0 0 0 / 0.4), 0 0 2px 0 rgb(0 0 0 / 0.2), 0 0 1px 0
		rgb(0 0 0 / 0.15);
}

.switch {
	composes: interactive from './base.module.css';
	display: flex;
	align-items: center;
	gap: var(--lp-spacing-200);
	isolation: isolate;
}

.track {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--lp-spacing-200);
	padding: var(--lp-spacing-200);
	width: 3.375rem;
	height: var(--lp-size-24);
	border-radius: var(--lp-border-radius-large);
	transition:
		all var(--lp-duration-200) ease-in-out,
		outline,
		outline-offset 0ms;
	container-type: inline-size;
	background-color: var(--lp-color-bg-interactive-secondary-hover);
	border: 1px solid var(--lp-color-border-interactive-secondary-base);
}

.handle {
	display: block;
	background-color: var(--lp-color-fill-interactive-primary);
	width: var(--lp-size-16);
	height: var(--lp-size-16);
	border-radius: var(--lp-border-radius-large);
	box-shadow: var(--switch-handle-shadow);
	transition: transform var(--lp-duration-200) ease-in-out;
	transform: translateX(0%);
	z-index: 1;
}

.label {
	position: absolute;
	right: var(--lp-spacing-300);
	font: var(--lp-text-body-2-semibold);
	color: var(--lp-color-text-ui-primary-base);
}

.switch[data-focus-visible] {
	& .track {
		outline: 2px solid var(--lp-color-border-interactive-focus);
		outline-offset: -2px;
		z-index: 1;
	}
}

.switch[data-selected] {
	& .track {
		background-color: var(--lp-color-positive-500);
		border: 1px solid var(--lp-color-positive-600);
	}

	& .handle {
		transform: translateX(calc(100% + var(--lp-spacing-400)));
		box-shadow: var(--switch-handle-shadow-selected);
	}

	& .label {
		color: var(--lp-color-text-interactive-primary-base);
		left: var(--lp-spacing-300);
		text-shadow: 0 0 1px rgb(40 40 40 / 0.7);
	}
}

.switch[data-disabled] {
	opacity: 60%;
}