-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathstyleguide.css
56 lines (49 loc) · 2.37 KB
/
styleguide.css
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
:root {
--single-line-body-base-font-family: "Inter", Helvetica;
--single-line-body-base-font-weight: 400;
--single-line-body-base-font-size: 16px;
--single-line-body-base-letter-spacing: 0px;
--single-line-body-base-line-height: 100%;
--single-line-body-base-font-style: normal;
--color-text-default-default: var(--color-primitives-gray-900);
--color-text-brand-on-brand: var(--color-primitives-brand-100);
--color-background-default-default: var(--color-primitives-white-1000);
--color-background-brand-default: var(--color-primitives-brand-800);
--color-border-brand-default: var(--color-primitives-brand-800);
--color-border-default-default: var(--color-primitives-gray-300);
--color-primitives-gray-900: rgba(30, 30, 30, 1);
--color-primitives-brand-100: rgba(245, 245, 245, 1);
--color-primitives-white-1000: rgba(255, 255, 255, 1);
--color-primitives-brand-900: rgba(30, 30, 30, 1);
--color-primitives-brand-800: rgba(44, 44, 44, 1);
--color-primitives-gray-300: rgba(217, 217, 217, 1);
--color-primitives-gray-600: rgba(68, 68, 68, 1);
--size-space-400: 16px;
--size-space-300: 12px;
--size-space-200: 8px;
--size-radius-200: 8px;
--size-space-600: 24px;
}
/*
To enable a theme in your HTML, simply add one of the following data attributes to an HTML element, like so:
<body data-color-mode="SDS-light">
<!-- the rest of your content -->
</body>
You can apply the theme on any DOM node, not just the `body`
*/
[data-color-mode="SDS-light"] {
--color-text-default-default: var(--color-primitives-gray-900);
--color-text-brand-on-brand: var(--color-primitives-brand-100);
--color-background-default-default: var(--color-primitives-white-1000);
--color-background-brand-default: var(--color-primitives-brand-800);
--color-border-brand-default: var(--color-primitives-brand-800);
--color-border-default-default: var(--color-primitives-gray-300);
}
[data-color-mode="SDS-dark"] {
--color-text-default-default: var(--color-primitives-white-1000);
--color-text-brand-on-brand: var(--color-primitives-brand-900);
--color-background-default-default: var(--color-primitives-gray-900);
--color-background-brand-default: var(--color-primitives-brand-100);
--color-border-brand-default: var(--color-primitives-brand-100);
--color-border-default-default: var(--color-primitives-gray-600);
}