update: Move code higlight var to globals

This commit is contained in:
mbaharip
2025-01-24 17:49:58 +07:00
parent 40bae6385f
commit cd2a6ee781
2 changed files with 63 additions and 68 deletions
-56
View File
@@ -1,59 +1,3 @@
:root {
/**
* One Light theme for prism.js
* Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
*/
/* From colors.less */
--mono-1: hsl(230, 8%, 24%);
--mono-2: hsl(230, 6%, 44%);
--mono-3: hsl(230, 4%, 64%);
--hue-1: hsl(198, 99%, 37%);
--hue-2: hsl(221, 87%, 60%);
--hue-3: hsl(301, 63%, 40%);
--hue-4: hsl(119, 34%, 47%);
--hue-5: hsl(5, 74%, 59%);
--hue-5-2: hsl(344, 84%, 43%);
--hue-6: hsl(35, 99%, 36%);
--hue-6-2: hsl(35, 99%, 40%);
--syntax-fg: hsl(230, 8%, 24%);
--syntax-bg: hsl(230, 1%, 98%);
--syntax-gutter: hsl(230, 1%, 62%);
--syntax-guide: hsla(230, 8%, 24%, 0.2);
--syntax-accent: hsl(230, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(230, 1%, 90%);
--syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
--syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
}
.dark {
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/
/* From colors.less */
--mono-1: hsl(220, 14%, 71%);
--mono-2: hsl(220, 9%, 55%);
--mono-3: hsl(220, 10%, 40%);
--hue-1: hsl(187, 47%, 55%);
--hue-2: hsl(207, 82%, 66%);
--hue-3: hsl(286, 60%, 67%);
--hue-4: hsl(95, 38%, 62%);
--hue-5: hsl(355, 65%, 65%);
--hue-5-2: hsl(5, 48%, 51%);
--hue-6: hsl(29, 54%, 61%);
--hue-6-2: hsl(39, 67%, 69%);
--syntax-fg: hsl(220, 14%, 71%);
--syntax-bg: hsl(220, 13%, 18%);
--syntax-gutter: hsl(220, 14%, 45%);
--syntax-guide: hsla(220, 14%, 71%, 0.15);
--syntax-accent: hsl(220, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(220, 13%, 28%);
--syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
--syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
}
code[class*="language-"],
pre[class*="language-"],
pre {
+63 -12
View File
@@ -31,6 +31,34 @@
--chart-4: 0 0% 88.49%;
--chart-5: 211.29 103% 50%;
--radius: 0.5rem;
/**
* One Light theme for prism.js
* Based on Atom's One Light theme: https://github.com/atom/atom/tree/master/packages/one-light-syntax
*/
/* From colors.less */
--mono-1: hsl(230, 8%, 24%);
--mono-2: hsl(230, 6%, 44%);
--mono-3: hsl(230, 4%, 64%);
--hue-1: hsl(198, 99%, 37%);
--hue-2: hsl(221, 87%, 60%);
--hue-3: hsl(301, 63%, 40%);
--hue-4: hsl(119, 34%, 47%);
--hue-5: hsl(5, 74%, 59%);
--hue-5-2: hsl(344, 84%, 43%);
--hue-6: hsl(35, 99%, 36%);
--hue-6-2: hsl(35, 99%, 40%);
--syntax-fg: hsl(230, 8%, 24%);
--syntax-bg: hsl(230, 1%, 98%);
--syntax-gutter: hsl(230, 1%, 62%);
--syntax-guide: hsla(230, 8%, 24%, 0.2);
--syntax-accent: hsl(230, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(230, 1%, 90%);
--syntax-gutter-background-color-selected: hsl(230, 1%, 90%);
--syntax-cursor-line: hsla(230, 8%, 24%, 0.05);
@apply text-[100%];
}
.dark {
@@ -58,24 +86,38 @@
--chart-3: 217.5 9.09% 17.25%;
--chart-4: 214.29 5.04% 30.25%;
--chart-5: 226.73 61.43% 65.1%;
/**
* One Dark theme for prism.js
* Based on Atom's One Dark theme: https://github.com/atom/atom/tree/master/packages/one-dark-syntax
*/
/* From colors.less */
--mono-1: hsl(220, 14%, 71%);
--mono-2: hsl(220, 9%, 55%);
--mono-3: hsl(220, 10%, 40%);
--hue-1: hsl(187, 47%, 55%);
--hue-2: hsl(207, 82%, 66%);
--hue-3: hsl(286, 60%, 67%);
--hue-4: hsl(95, 38%, 62%);
--hue-5: hsl(355, 65%, 65%);
--hue-5-2: hsl(5, 48%, 51%);
--hue-6: hsl(29, 54%, 61%);
--hue-6-2: hsl(39, 67%, 69%);
--syntax-fg: hsl(220, 14%, 71%);
--syntax-bg: hsl(220, 13%, 18%);
--syntax-gutter: hsl(220, 14%, 45%);
--syntax-guide: hsla(220, 14%, 71%, 0.15);
--syntax-accent: hsl(220, 100%, 66%);
/* From syntax-variables.less */
--syntax-selection-color: hsl(220, 13%, 28%);
--syntax-gutter-background-color-selected: hsl(220, 13%, 26%);
--syntax-cursor-line: hsla(220, 100%, 80%, 0.04);
}
div.preview * {
@apply !transition-none;
}
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@layer base {
:root {
/* @apply text-[14px] tablet:text-[16px]; */
@apply text-[100%];
}
* {
@apply border-border;
/* @apply outline outline-1 outline-red-500; */
@@ -126,3 +168,12 @@ body {
@apply text-sm font-medium leading-none;
}
}
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@layer base {
}