Skip to content

Commit c5bf941

Browse files
committed
docs: update theme
1 parent da73dfa commit c5bf941

File tree

3 files changed

+163
-162
lines changed

3 files changed

+163
-162
lines changed

packages/docs/src/components/Header.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ const Header: FC = () => {
120120
href="https://coreui.io/about/services/?docs=coreui-header-button"
121121
variant="outline"
122122
>
123-
<CIcon icon={cilHandshake} /> Hire Us
123+
<CIcon className="me-2" icon={cilHandshake} />
124124
</CButton>
125125
<CButton
126126
className="d-lg-inline-block my-2 my-md-0 ms-md-3"

packages/docs/src/styles/_component-examples.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,6 @@
352352
padding: .75rem ($cd-gutter-x * .5);
353353
margin-bottom: 1rem;
354354
background-color: var(--cd-pre-bg);
355-
border: 1px solid var(--cui-border-color);
356355

357356
@include media-breakpoint-up(md) {
358357
padding: .75rem 1.25rem;
@@ -416,6 +415,7 @@
416415
}
417416

418417
.docs-example + .highlight {
418+
border: 1px solid var(--cui-border-color);
419419
border-top-width: 0;
420420
@include border-top-radius(0);
421-
}
421+
}

packages/docs/src/styles/_prism.scss

Lines changed: 160 additions & 159 deletions
Original file line numberDiff line numberDiff line change
@@ -6,162 +6,163 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
66
* @author Rose Pritchard
77
*/
88

9-
:root,
10-
[data-coreui-theme="light"] {
11-
// --base00: #fff;
12-
// --base01: #f5f5f5;
13-
--base02: #c8c8fa;
14-
--base03: #565c64;
15-
--base04: #666;
16-
--base05: #333;
17-
--base06: #fff;
18-
--base07: #{$teal-700}; // #9a6700
19-
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
20-
--base09: #{$cyan-700}; // #087990
21-
--base0A: #{$purple-500}; // #795da3
22-
--base0B: #{$blue-700}; // #183691
23-
--base0C: #{$blue-700}; // #183691
24-
--base0D: #{$purple-500}; // #795da3
25-
--base0E: #{$pink-600}; // #a71d5d
26-
--base0F: #333;
27-
}
28-
29-
@include color-mode(dark, true) {
30-
// --base00: #282c34;
31-
// --base01: #353b45;
32-
--base02: #3e4451;
33-
--base03: #868e96;
34-
--base04: #868e96;
35-
--base05: #abb2bf;
36-
--base06: #b6bdca;
37-
--base07: #{$orange-300}; // #d19a66
38-
--base08: #{$cyan-300};
39-
--base09: #{$orange-300}; // #d19a66
40-
--base0A: #{$yellow-200}; // #e5c07b
41-
--base0B: #{$teal-300}; // #98c379
42-
--base0C: #{$teal-300}; // #56b6c2
43-
--base0D: #{$blue-300}; // #61afef
44-
--base0E: #{$indigo-200}; // #c678dd
45-
--base0F: #{$red-300}; // #be5046
46-
47-
.language-diff .gd {
48-
color: $red-400;
49-
}
50-
.language-diff .gi {
51-
color: $green-400;
52-
}
53-
}
54-
55-
code[class*='language-'],
56-
pre[class*='language-'] {
57-
// color: #ccc;
58-
background: none;
59-
font-family: var(--cui-font-monospace);
60-
font-size: .875em;
61-
text-align: left;
62-
white-space: pre;
63-
64-
-moz-tab-size: 4;
65-
-o-tab-size: 4;
66-
tab-size: 4;
67-
68-
-webkit-hyphens: none;
69-
-moz-hyphens: none;
70-
-ms-hyphens: none;
71-
hyphens: none;
72-
}
73-
74-
/* Code blocks */
75-
pre[class*='language-'] {
76-
padding: 1em;
77-
margin: 0.5em 0;
78-
}
79-
80-
pre[class*='language-']:not(.language-sass):not(.language-text):not(.language-css) {
81-
overflow: scroll;
82-
max-height: 500px;
83-
}
84-
85-
/* Inline code */
86-
:not(pre) > code[class*='language-'] {
87-
padding: 0.1em;
88-
border-radius: 0.3em;
89-
white-space: normal;
90-
}
91-
92-
.token.comment,
93-
.token.block-comment,
94-
.token.prolog,
95-
.token.doctype,
96-
.token.cdata {
97-
color: var(--base03);
98-
}
99-
100-
.token.tag {
101-
color: var(--base08);
102-
}
103-
104-
.token.attr-name,
105-
.token.namespace,
106-
.token.deleted {
107-
color: var(--base0A);
108-
}
109-
110-
.token.punctuation {
111-
color: var(--base05);
112-
}
113-
114-
.token.function-name {
115-
color: var(--base0A);
116-
}
117-
118-
.token.boolean,
119-
.token.number,
120-
.token.function {
121-
color: var(--base09);
122-
}
123-
124-
.token.property,
125-
.token.class-name,
126-
.token.constant,
127-
.token.symbol {
128-
color: var(--base0A);
129-
}
130-
131-
.token.selector,
132-
.token.important,
133-
.token.atrule,
134-
.token.keyword,
135-
.token.builtin {
136-
color: var(--base0E);
137-
}
138-
139-
.token.string,
140-
.token.char,
141-
.token.attr-value,
142-
.token.regex,
143-
.token.variable {
144-
color: var(--base0C);
145-
}
146-
147-
.token.operator,
148-
.token.entity,
149-
.token.url {
150-
color: var(--base05);
151-
}
152-
153-
.token.important,
154-
.token.bold {
155-
font-weight: bold;
156-
}
157-
.token.italic {
158-
font-style: italic;
159-
}
160-
161-
.token.entity {
162-
cursor: help;
163-
}
164-
165-
.token.inserted {
166-
color: green;
167-
}
9+
:root,
10+
[data-coreui-theme="light"] {
11+
// --base00: #fff;
12+
// --base01: #f5f5f5;
13+
--base02: #c8c8fa;
14+
--base03: #565c64;
15+
--base04: #666;
16+
--base05: #333;
17+
--base06: #fff;
18+
--base07: #{$teal-700}; // #9a6700
19+
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00
20+
--base09: #{$cyan-700}; // #087990
21+
--base0A: #{$purple-500}; // #795da3
22+
--base0B: #{$blue-700}; // #183691
23+
--base0C: #{$blue-700}; // #183691
24+
--base0D: #{$purple-500}; // #795da3
25+
--base0E: #{$pink-600}; // #a71d5d
26+
--base0F: #333;
27+
}
28+
29+
@include color-mode(dark, true) {
30+
// --base00: #282c34;
31+
// --base01: #353b45;
32+
--base02: #3e4451;
33+
--base03: #868e96;
34+
--base04: #868e96;
35+
--base05: #abb2bf;
36+
--base06: #b6bdca;
37+
--base07: #{$orange-300}; // #d19a66
38+
--base08: #{$cyan-300};
39+
--base09: #{$orange-300}; // #d19a66
40+
--base0A: #{$yellow-200}; // #e5c07b
41+
--base0B: #{$teal-300}; // #98c379
42+
--base0C: #{$teal-300}; // #56b6c2
43+
--base0D: #{$blue-300}; // #61afef
44+
--base0E: #{$indigo-200}; // #c678dd
45+
--base0F: #{$red-300}; // #be5046
46+
47+
.language-diff .gd {
48+
color: $red-400;
49+
}
50+
.language-diff .gi {
51+
color: $green-400;
52+
}
53+
}
54+
55+
code[class*='language-'],
56+
pre[class*='language-'] {
57+
background: none;
58+
font-family: var(--cui-font-monospace);
59+
font-size: .875em;
60+
text-align: left;
61+
white-space: pre;
62+
63+
-moz-tab-size: 4;
64+
-o-tab-size: 4;
65+
tab-size: 4;
66+
67+
-webkit-hyphens: none;
68+
-moz-hyphens: none;
69+
-ms-hyphens: none;
70+
hyphens: none;
71+
}
72+
73+
pre[class*='language-']:not(.language-sass):not(.language-text):not(.language-css) {
74+
overflow: scroll;
75+
max-height: 500px;
76+
}
77+
78+
.token.comment,
79+
.token.block-comment,
80+
.token.prolog,
81+
.token.doctype,
82+
.token.cdata {
83+
color: var(--base03);
84+
}
85+
86+
.token.tag {
87+
color: var(--base08);
88+
}
89+
90+
.token.attr-name,
91+
.token.namespace,
92+
.token.deleted {
93+
color: var(--base0A);
94+
}
95+
96+
.token.punctuation {
97+
color: var(--base05);
98+
}
99+
100+
.token.function-name {
101+
color: var(--base0A);
102+
}
103+
104+
.token.boolean,
105+
.token.number,
106+
.token.function {
107+
color: var(--base09);
108+
}
109+
110+
.token.property,
111+
.token.class-name,
112+
.token.constant,
113+
.token.symbol {
114+
color: var(--base0A);
115+
}
116+
117+
.token.selector,
118+
.token.important,
119+
.token.atrule,
120+
.token.keyword,
121+
.token.builtin {
122+
color: var(--base0E);
123+
}
124+
125+
.token.string,
126+
.token.char,
127+
.token.attr-value,
128+
.token.regex,
129+
.token.variable {
130+
color: var(--base0C);
131+
}
132+
133+
.token.operator,
134+
.token.entity,
135+
.token.url {
136+
color: var(--base05);
137+
}
138+
139+
.token.important,
140+
.token.bold {
141+
font-weight: bold;
142+
}
143+
.token.italic {
144+
font-style: italic;
145+
}
146+
147+
.token.entity {
148+
cursor: help;
149+
}
150+
151+
.token.inserted {
152+
color: green;
153+
}
154+
155+
.language-bash,
156+
.language-sh {
157+
.token-line::before {
158+
color: var(--base03);
159+
content: "$ ";
160+
user-select: none;
161+
}
162+
}
163+
164+
.language-powershell::before {
165+
color: var(--base0C);
166+
content: "PM> ";
167+
user-select: none;
168+
}

0 commit comments

Comments
 (0)