bitcamp-mystudy/styleguide.css at main · Bulgogi-Pizza/bitcamp-mystudy · 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
:root {
    --body-base-font-family: "Inter", Helvetica;
    --body-base-font-weight: 400;
    --body-base-font-size: 16px;
    --body-base-letter-spacing: 0px;
    --body-base-line-height: 139.9999976158142%;
    --body-base-font-style: normal;
    --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;
    --body-link-font-family: "Inter", Helvetica;
    --body-link-font-weight: 400;
    --body-link-font-size: 16px;
    --body-link-letter-spacing: 0px;
    --body-link-line-height: 139.9999976158142%;
    --body-link-font-style: normal;
    --color-text-default-default: var(--color-primitives-gray-900);
    --color-text-default-tertiary: var(--color-primitives-gray-400);
    --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-default-default: var(--color-primitives-gray-300);
    --color-border-brand-default: var(--color-primitives-brand-800);
    --color-text-neutral-default: var(--color-primitives-slate-900);
    --color-background-brand-hover: var(--color-primitives-brand-900);
    --color-primitives-gray-900: rgba(30, 30, 30, 1);
    --color-primitives-gray-400: rgba(179, 179, 179, 1);
    --color-primitives-brand-100: rgba(245, 245, 245, 1);
    --color-primitives-white-1000: rgba(255, 255, 255, 1);
    --color-primitives-white-400: rgba(255, 255, 255, 0.4);
    --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);
    --color-primitives-slate-900: rgba(48, 48, 48, 1);
    --color-primitives-slate-200: rgba(227, 227, 227, 1);
    --color-primitives-brand-300: rgba(217, 217, 217, 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-default-tertiary: var(--color-primitives-gray-400);
    --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-default-default: var(--color-primitives-gray-300);
    --color-border-brand-default: var(--color-primitives-brand-800);
    --color-text-neutral-default: var(--color-primitives-slate-900);
    --color-background-brand-hover: var(--color-primitives-brand-900);
}

[data-color-mode="SDS-dark"] {
    --color-text-default-default: var(--color-primitives-white-1000);
    --color-text-default-tertiary: var(--color-primitives-white-400);
    --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-default-default: var(--color-primitives-gray-600);
    --color-border-brand-default: var(--color-primitives-brand-100);
    --color-text-neutral-default: var(--color-primitives-slate-200);
    --color-background-brand-hover: var(--color-primitives-brand-300);
}