UNPKG

@redocly/theme

Version:

Shared UI components lib

93 lines (78 loc) • 4.83 kB
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
import { css } from "styled-components"; export const admonition = css` /* === Admonitions === */ /** * @tokens Admonition typography */ --admonition-font-size: var(--font-size-base); // @presenter FontSize --admonition-font-weight: var(--font-weight-regular); // @presenter FontWeight --admonition-line-height: var(--line-height-base); // @presenter LineHeight --admonition-heading-font-size: var(--font-size-base); // @presenter FontSize --admonition-heading-font-weight: var(--font-weight-semibold); // @presenter FontWeight --admonition-heading-line-height: var(--line-height-base); // @presenter LineHeight --admonition-heading-letter-spacing: 0; // @presenter LetterSpacing --admonition-heading-transform: none; --admonition-heading-text-color: var(--color-warm-grey-11); // @presenter Color /** * @tokens Admonition spacing * @presenter Spacing */ --admonition-gap: var(--spacing-sm); // @presenter Spacing --admonition-text-gap: var(--spacing-xxs); // @presenter Spacing --admonition-margin: var(--spacing-base) 0 var(--spacing-md) 0; // @presenter Spacing --admonition-padding: var(--spacing-sm) var(--spacing-base); // @presenter Spacing --admonition-icon-margin: calc(var(--spacing-unit) / 2) 0; // @presenter Spacing --admonition-icon-size: 18px; // @presenter Spacing /** * @tokens Admonition border */ --admonition-border-radius: var(--border-radius-lg); // @presenter BorderRadius --admonition-border-style: var(--border-style); --admonition-border-width: 1px; /** * @tokens Admonition type info */ --admonition-info-bg-color: var(--color-info-bg); // @presenter Color --admonition-info-heading-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-info-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-info-icon-color: var(--color-info-active); // @presenter Color --admonition-info-border-color: var(--color-info-border); // @presenter Color --admonition-info-border-style: var(--admonition-border-style); --admonition-info-border-width: var(--admonition-border-width); --admonition-info-border: var(--admonition-info-border-width) var(--admonition-info-border-style) var(--admonition-info-border-color); // @presenter Border /** * @tokens Admonition type warning */ /* warning */ --admonition-warning-bg-color: var(--color-warning-bg); // @presenter Color --admonition-warning-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-warning-heading-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-warning-icon-color: var(--color-warning-active); // @presenter Color --admonition-warning-border-color: var(--color-warning-border); // @presenter Color --admonition-warning-border-style: var(--admonition-border-style); // @presenter Color --admonition-warning-border-width: var(--admonition-border-width); // @presenter Color --admonition-warning-border: var(--admonition-warning-border-width) var(--admonition-warning-border-style) var(--admonition-warning-border-color); // @presenter Border /** * @tokens Admonition type danger */ --admonition-danger-bg-color: var(--color-error-bg); // @presenter Color --admonition-danger-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-danger-heading-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-danger-icon-color: var(--color-error-active); // @presenter Color --admonition-danger-border-color: var(--color-error-border); // @presenter Color --admonition-danger-border-style: var(--admonition-border-style); // @presenter Color --admonition-danger-border-width: var(--admonition-border-width); // @presenter Color --admonition-danger-border: var(--admonition-danger-border-width) var(--admonition-danger-border-style) var(--admonition-danger-border-color); // @presenter Border /** * @tokens Admonition type success */ --admonition-success-bg-color: var(--color-success-bg); // @presenter Color --admonition-success-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-success-heading-text-color: var(--admonition-heading-text-color); // @presenter Color --admonition-success-icon-color: var(--color-success-active); // @presenter Color --admonition-success-border-color: var(--color-success-border); // @presenter Color --admonition-success-border-style: var(--admonition-border-style); // @presenter Color --admonition-success-border-width: var(--admonition-border-width); // @presenter Color --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border // @tokens End `;