Skip to content

Commit 307e118

Browse files
dancormierdancormier
authored
refactor(code-block): use pseudo-private custom properties #1161 (#1163)
1 parent 4b994ce commit 307e118

File tree

1 file changed

+98
-116
lines changed

1 file changed

+98
-116
lines changed

‎lib/css/components/code-blocks.less‎

Lines changed: 98 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -1,121 +1,103 @@
1-
pre.s-code-block {
2-
font-size: var(--fs-body1);
3-
font-family: var(--ff-mono);
4-
line-height: var(--lh-md);
5-
color: var(--highlight-color);
6-
background-color: var(--highlight-bg);
7-
border-radius: var(--br-md);
8-
margin: 0;
9-
padding: var(--su12);
10-
overflow: auto;
1+
.s-code-block {
2+
--_cb-line-numbers-bg: var(--black-050);
113

12-
@scrollbar-styles();
13-
}
14-
15-
code[class*="language-"],
16-
pre.s-code-block > code {
17-
font-family: inherit;
4+
// CONTEXTUAL STYLES
5+
.dark-mode({
6+
--_cb-line-numbers-bg: var(--black-025);
7+
});
188

19-
.hljs-subst {
9+
// CHILD COMPONENTS
10+
code[class*="language-"] &,
11+
pre& > code {
12+
.hljs-built_in,
13+
.hljs-literal,
14+
.hljs-title {
15+
color: var(--highlight-literal);
16+
}
17+
.hljs-bullet,
18+
.hljs-code {
19+
color: var(--highlight-punctuation);
20+
}
21+
.hljs-doctag,
22+
.hljs-keyword,
23+
.hljs-meta-keyword,
24+
.hljs-meta,
25+
.hljs-section,
26+
.hljs-selector-class,
27+
.hljs-selector-pseudo,
28+
.hljs-selector-tag {
29+
color: var(--highlight-keyword);
30+
}
31+
.hljs-name,
32+
.hljs-number,
33+
.hljs-quote,
34+
.hljs-selector-id,
35+
.hljs-template-tag,
36+
.hljs-type {
37+
color: var(--highlight-namespace);
38+
}
39+
.hljs-link,
40+
.hljs-meta-string,
41+
.hljs-regexp,
42+
.hljs-selector-attr,
43+
.hljs-string,
44+
.hljs-symbol,
45+
.hljs-template-variable,
46+
.hljs-variable {
47+
color: var(--highlight-variable);
48+
}
49+
.hljs-addition {
50+
color: var(--highlight-addition);
51+
}
52+
.hljs-attr {
53+
color: var(--highlight-attribute);
54+
}
55+
.hljs-attribute {
56+
color: var(--highlight-symbol);
57+
}
58+
.hljs-comment {
59+
color: var(--highlight-comment);
60+
}
61+
.hljs-deletion {
62+
color: var(--highlight-deletion);
63+
}
64+
.hljs-emphasis {
65+
font-style: italic;
66+
}
67+
.hljs-strong {
68+
font-weight: bold;
69+
}
70+
.hljs-subst {
71+
color: var(--highlight-color);
72+
}
73+
74+
font-family: inherit;
75+
}
76+
pre& {
77+
.s-code-block--line-numbers {
78+
background-color: var(--_cb-line-numbers-bg);
79+
80+
border-color: var(--bc-medium);
81+
border-style: solid;
82+
border-width: 0 var(--su-static1) 0 0;
83+
color: var(--black-300);
84+
float: left;
85+
margin: calc(var(--su12) * -1);
86+
margin-right: var(--su12);
87+
padding: var(--su12);
88+
padding-right: var(--su6);
89+
text-align: right;
90+
}
91+
92+
@scrollbar-styles();
93+
background-color: var(--highlight-bg);
94+
border-radius: var(--br-md);
2095
color: var(--highlight-color);
96+
font-family: var(--ff-mono);
97+
font-size: var(--fs-body1);
98+
line-height: var(--lh-md);
99+
margin: 0;
100+
overflow: auto;
101+
padding: var(--su12);
21102
}
22-
23-
.hljs-comment {
24-
color: var(--highlight-comment);
25-
}
26-
27-
.hljs-keyword,
28-
.hljs-selector-tag,
29-
.hljs-meta-keyword,
30-
.hljs-doctag,
31-
.hljs-section {
32-
color: var(--highlight-keyword);
33-
}
34-
35-
.hljs-attr {
36-
color: var(--highlight-attribute);
37-
}
38-
39-
.hljs-attribute {
40-
color: var(--highlight-symbol);
41-
}
42-
43-
.hljs-name,
44-
.hljs-type,
45-
.hljs-number,
46-
.hljs-selector-id,
47-
.hljs-quote,
48-
.hljs-template-tag {
49-
color: var(--highlight-namespace);
50-
}
51-
52-
.hljs-selector-class {
53-
color: var(--highlight-keyword);
54-
}
55-
56-
.hljs-string,
57-
.hljs-regexp,
58-
.hljs-symbol,
59-
.hljs-variable,
60-
.hljs-template-variable,
61-
.hljs-link,
62-
.hljs-selector-attr {
63-
color: var(--highlight-variable);
64-
}
65-
66-
.hljs-meta,
67-
.hljs-selector-pseudo {
68-
color: var(--highlight-keyword);
69-
}
70-
71-
.hljs-built_in,
72-
.hljs-title,
73-
.hljs-literal {
74-
color: var(--highlight-literal);
75-
}
76-
77-
.hljs-bullet,
78-
.hljs-code {
79-
color: var(--highlight-punctuation);
80-
}
81-
82-
.hljs-meta-string {
83-
color: var(--highlight-variable);
84-
}
85-
86-
.hljs-deletion {
87-
color: var(--highlight-deletion);
88-
}
89-
90-
.hljs-addition {
91-
color: var(--highlight-addition);
92-
}
93-
94-
.hljs-emphasis {
95-
font-style: italic;
96-
}
97-
98-
.hljs-strong {
99-
font-weight: bold;
100-
}
101-
}
102-
103-
pre.s-code-block .s-code-block--line-numbers {
104-
float: left;
105-
color: var(--black-300);
106-
text-align: right;
107-
border-width: 0;
108-
border-style: solid;
109-
border-color: var(--bc-medium);
110-
border-right-width: 1px;
111-
margin: calc(var(--su12) * -1);
112-
margin-right: var(--su12);
113-
padding: var(--su12);
114-
padding-right: var(--su6);
115-
background-color: var(--black-050);
116-
117-
.dark-mode({
118-
background-color: var(--black-025);
119-
});
120103
}
121-

0 commit comments

Comments
 (0)