@svadmin/lite 0.16.11 → 0.22.0

package/dist/lite-code-theme.css

@@ -0,0 +1,139 @@
+/**
+ * Opt-in code token theme for @svadmin/lite.
+ *
+ * `lite.css` ships IE11-safe literal token colours. Import this stylesheet
+ * instead (or after it) when the target baseline supports CSS custom
+ * properties, then override the variables per container to re-theme every
+ * Markdown / rich text / insight / comment / notification surface at once:
+ *
+ *   .lite-code-block { --lite-token-keyword: #7FD1FF; }
+ *
+ * Variables fall back to the same palette that `lite.css` hardcodes, so the
+ * stylesheet is safe to import on its own.
+ */
+.lite-markdown-preview,
+.lite-rich-preview,
+.lite-insight-content,
+.lite-comments__rich,
+.lite-notification-center__rich,
+.lite-activity-rich {
+  --lite-token-comment: #86909C;
+  --lite-token-keyword: #165DFF;
+  --lite-token-string: #007A5A;
+  --lite-token-number: #C2410C;
+  --lite-token-function: #7A3EA8;
+  --lite-token-type: #0E7490;
+}
+
+.lite-markdown-preview .tok-comment,
+.lite-rich-preview .tok-comment,
+.lite-insight-content .tok-comment,
+.lite-comments__rich .tok-comment,
+.lite-notification-center__rich .tok-comment,
+.lite-activity-rich .tok-comment {
+  color: var(--lite-token-comment, #86909C);
+  font-style: italic;
+}
+
+.lite-markdown-preview .tok-keyword,
+.lite-rich-preview .tok-keyword,
+.lite-insight-content .tok-keyword,
+.lite-comments__rich .tok-keyword,
+.lite-notification-center__rich .tok-keyword,
+.lite-activity-rich .tok-keyword {
+  color: var(--lite-token-keyword, #165DFF);
+  font-weight: 600;
+}
+
+.lite-markdown-preview .tok-string,
+.lite-rich-preview .tok-string,
+.lite-insight-content .tok-string,
+.lite-comments__rich .tok-string,
+.lite-notification-center__rich .tok-string,
+.lite-activity-rich .tok-string {
+  color: var(--lite-token-string, #007A5A);
+}
+
+.lite-markdown-preview .tok-number,
+.lite-rich-preview .tok-number,
+.lite-insight-content .tok-number,
+.lite-comments__rich .tok-number,
+.lite-notification-center__rich .tok-number,
+.lite-activity-rich .tok-number {
+  color: var(--lite-token-number, #C2410C);
+}
+
+.lite-markdown-preview .tok-function,
+.lite-rich-preview .tok-function,
+.lite-insight-content .tok-function,
+.lite-comments__rich .tok-function,
+.lite-notification-center__rich .tok-function,
+.lite-activity-rich .tok-function {
+  color: var(--lite-token-function, #7A3EA8);
+}
+
+.lite-markdown-preview .tok-type,
+.lite-rich-preview .tok-type,
+.lite-insight-content .tok-type,
+.lite-comments__rich .tok-type,
+.lite-notification-center__rich .tok-type,
+.lite-activity-rich .tok-type {
+  color: var(--lite-token-type, #0E7490);
+}
+/**
+ * Dark preset. Add `lite-dark` to any ancestor (or the preview container) to
+ * swap the palette and the code block / table-of-contents chrome:
+ *
+ *   <div class="lite-dark"><div class="lite-markdown-preview">…</div></div>
+ *
+ * Hosts with their own theme root can map it instead, for example
+ * `[data-theme="dark"] { --lite-token-keyword: … }`.
+ */
+.lite-dark {
+  --lite-token-comment: #8B949E;
+  --lite-token-keyword: #7FD1FF;
+  --lite-token-string: #9BE39B;
+  --lite-token-number: #FFC17A;
+  --lite-token-function: #C4A7FF;
+  --lite-token-type: #79D7D0;
+  color: #E6EDF3;
+}
+
+.lite-dark pre,
+.lite-dark .lite-code-block {
+  background: #161B22;
+  border-color: #30363D;
+  color: #E6EDF3;
+}
+
+.lite-dark pre code {
+  color: #E6EDF3;
+}
+
+.lite-dark .lite-toc {
+  background: #161B22;
+  border-color: #30363D;
+}
+
+.lite-dark .lite-toc__list a {
+  color: #7FD1FF;
+}
+
+.lite-dark blockquote {
+  border-left-color: #30363D;
+  color: #C9D1D9;
+}
+
+.lite-dark table th,
+.lite-dark table td {
+  border-color: #30363D;
+}
+
+.lite-dark table th {
+  background: #161B22;
+}
+
+.lite-dark .lite-footnotes {
+  border-top-color: #30363D;
+  color: #C9D1D9;
+}