@vegastack/design-tokens 0.7.79 → 0.7.80
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/utilities.css +86 -0
- package/package.json +1 -1
package/dist/utilities.css
CHANGED
|
@@ -868,3 +868,89 @@
|
|
|
868
868
|
.dark [data-brand-artwork="dark"] {
|
|
869
869
|
display: contents;
|
|
870
870
|
}
|
|
871
|
+
|
|
872
|
+
/* ---------------------------------------------------------------------------
|
|
873
|
+
* Syntax highlighting — `CodeBlock` and `TextEdit`'s code block.
|
|
874
|
+
*
|
|
875
|
+
* lowlight (highlight.js grammars) marks tokens with `.hljs-*` classes; these
|
|
876
|
+
* map them onto the semantic palette, so code reads in both themes with no
|
|
877
|
+
* theme of its own: plain ink, keywords in `tag-pink-text`, names in
|
|
878
|
+
* `info-text`, strings in `brand-text`, numbers and literals in
|
|
879
|
+
* `tag-orange-text`, attributes and variables in `tag-cyan-text`, types in
|
|
880
|
+
* `tag-lime-text`, comments muted. Only AA text tokens: each clears 4.5:1 on
|
|
881
|
+
* full `muted` (the darkest code ground in light, lightest in dark) in both
|
|
882
|
+
* themes. Every value is a theme-split token, so the dark half follows `.dark`
|
|
883
|
+
* through the cascade.
|
|
884
|
+
* Plain selectors (not utilities), for the same reason as the BrandIcon swap
|
|
885
|
+
* above: a consumer's Tailwind build never scans the component source.
|
|
886
|
+
* ------------------------------------------------------------------------- */
|
|
887
|
+
.hljs {
|
|
888
|
+
color: var(--foreground);
|
|
889
|
+
}
|
|
890
|
+
/* 13px code with relaxed leading — below the ramp's `text-sm`, on purpose, as Notion's code. */
|
|
891
|
+
.hljs,
|
|
892
|
+
.hljs code {
|
|
893
|
+
font-size: 0.8125rem;
|
|
894
|
+
line-height: 1.625;
|
|
895
|
+
}
|
|
896
|
+
.hljs-comment,
|
|
897
|
+
.hljs-quote {
|
|
898
|
+
color: var(--muted-foreground);
|
|
899
|
+
font-style: italic;
|
|
900
|
+
}
|
|
901
|
+
.hljs-keyword,
|
|
902
|
+
.hljs-selector-tag,
|
|
903
|
+
.hljs-doctag,
|
|
904
|
+
.hljs-meta .hljs-keyword,
|
|
905
|
+
.hljs-name {
|
|
906
|
+
color: var(--tag-pink-text);
|
|
907
|
+
}
|
|
908
|
+
.hljs-title,
|
|
909
|
+
.hljs-title.function_,
|
|
910
|
+
.hljs-title.class_,
|
|
911
|
+
.hljs-section,
|
|
912
|
+
.hljs-selector-id,
|
|
913
|
+
.hljs-selector-class {
|
|
914
|
+
color: var(--info-text);
|
|
915
|
+
}
|
|
916
|
+
.hljs-string,
|
|
917
|
+
.hljs-regexp,
|
|
918
|
+
.hljs-char.escape_,
|
|
919
|
+
.hljs-meta .hljs-string {
|
|
920
|
+
color: var(--brand-text);
|
|
921
|
+
}
|
|
922
|
+
.hljs-number,
|
|
923
|
+
.hljs-literal,
|
|
924
|
+
.hljs-symbol,
|
|
925
|
+
.hljs-bullet,
|
|
926
|
+
.hljs-built_in,
|
|
927
|
+
.hljs-link {
|
|
928
|
+
color: var(--tag-orange-text);
|
|
929
|
+
}
|
|
930
|
+
.hljs-attr,
|
|
931
|
+
.hljs-attribute,
|
|
932
|
+
.hljs-property,
|
|
933
|
+
.hljs-variable,
|
|
934
|
+
.hljs-template-variable,
|
|
935
|
+
.hljs-params,
|
|
936
|
+
.hljs-selector-attr,
|
|
937
|
+
.hljs-selector-pseudo {
|
|
938
|
+
color: var(--tag-cyan-text);
|
|
939
|
+
}
|
|
940
|
+
.hljs-type,
|
|
941
|
+
.hljs-title.class_.inherited__,
|
|
942
|
+
.hljs-meta {
|
|
943
|
+
color: var(--tag-lime-text);
|
|
944
|
+
}
|
|
945
|
+
.hljs-addition {
|
|
946
|
+
color: var(--success-text);
|
|
947
|
+
}
|
|
948
|
+
.hljs-deletion {
|
|
949
|
+
color: var(--destructive-text);
|
|
950
|
+
}
|
|
951
|
+
.hljs-emphasis {
|
|
952
|
+
font-style: italic;
|
|
953
|
+
}
|
|
954
|
+
.hljs-strong {
|
|
955
|
+
font-weight: 600;
|
|
956
|
+
}
|