[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
update code styling
+24
-26
+21
-24
src/prism.css
+21
-24
src/prism.css
···
2
2
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript+abap+abnf+actionscript+ada+agda+al+antlr4+apacheconf+apex+apl+applescript+aql+arduino+arff+armasm+arturo+asciidoc+aspnet+asm6502+asmatmel+autohotkey+autoit+avisynth+avro-idl+awk+bash+basic+batch+bbcode+bbj+bicep+birb+bison+bnf+bqn+brainfuck+brightscript+bro+bsl+c+csharp+cpp+cfscript+chaiscript+cil+cilkc+cilkcpp+clojure+cmake+cobol+coffeescript+concurnas+csp+cooklang+coq+crystal+css-extras+csv+cue+cypher+d+dart+dataweave+dax+dhall+diff+django+dns-zone-file+docker+dot+ebnf+editorconfig+eiffel+ejs+elixir+elm+etlua+erb+erlang+excel-formula+fsharp+factor+false+firestore-security-rules+flow+fortran+ftl+gml+gap+gcode+gdscript+gedcom+gettext+gherkin+git+glsl+gn+linker-script+go+go-module+gradle+graphql+groovy+haml+handlebars+haskell+haxe+hcl+hlsl+hoon+http+hpkp+hsts+ichigojam+icon+icu-message-format+idris+ignore+inform7+ini+io+j+java+javadoc+javadoclike+javastacktrace+jexl+jolie+jq+jsdoc+js-extras+json+json5+jsonp+jsstacktrace+js-templates+julia+keepalived+keyman+kotlin+kumir+kusto+latex+latte+less+lilypond+liquid+lisp+livescript+llvm+log+lolcode+lua+magma+makefile+markdown+markup-templating+mata+matlab+maxscript+mel+mermaid+metafont+mizar+mongodb+monkey+moonscript+n1ql+n4js+nand2tetris-hdl+naniscript+nasm+neon+nevod+nginx+nim+nix+nsis+objectivec+ocaml+odin+opencl+openqasm+oz+parigp+parser+pascal+pascaligo+psl+pcaxis+peoplecode+perl+php+phpdoc+php-extras+plant-uml+plsql+powerquery+powershell+processing+prolog+promql+properties+protobuf+pug+puppet+pure+purebasic+purescript+python+qsharp+q+qml+qore+r+racket+cshtml+jsx+tsx+reason+regex+rego+renpy+rescript+rest+rip+roboconf+robotframework+ruby+rust+sas+sass+scss+scala+scheme+shell-session+smali+smalltalk+smarty+sml+solidity+solution-file+soy+sparql+splunk-spl+sqf+sql+squirrel+stan+stata+iecst+stylus+supercollider+swift+systemd+t4-templating+t4-cs+t4-vb+tap+tcl+tt2+textile+toml+tremor+turtle+twig+typescript+typoscript+unrealscript+uorazor+uri+v+vala+vbnet+velocity+verilog+vhdl+vim+visual-basic+warpscript+wasm+web-idl+wgsl+wiki+wolfram+wren+xeora+xml-doc+xojo+xquery+yaml+yang+zig */
3
3
code[class*='language-'],
4
4
pre[class*='language-'] {
5
-
color: #000;
5
+
color: var(--color-base-900);
6
6
background: 0 0;
7
7
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
8
8
font-size: 1em;
···
28
28
}
29
29
:not(pre) > code[class*='language-'],
30
30
pre[class*='language-'] {
31
-
background: #2d2d2d;
31
+
background: var(--color-base-100);
32
32
}
33
33
:not(pre) > code[class*='language-'] {
34
34
padding: 0.1em;
···
40
40
.token.comment,
41
41
.token.doctype,
42
42
.token.prolog {
43
-
color: #708090;
43
+
color: var(--color-base-500);
44
44
}
45
45
.token.punctuation {
46
-
color: #999;
47
-
}
48
-
.token.namespace {
49
-
opacity: 0.7;
46
+
color: var(--color-base-800);
50
47
}
51
48
.token.boolean,
52
49
.token.constant,
···
55
52
.token.property,
56
53
.token.symbol,
57
54
.token.tag {
58
-
color: #905;
55
+
color: var(--color-accent-800);
59
56
}
60
57
.token.attr-name,
61
58
.token.builtin,
···
63
60
.token.inserted,
64
61
.token.selector,
65
62
.token.string {
66
-
color: #690;
63
+
color: var(--color-accent-700);
67
64
}
68
65
.language-css .token.string,
69
66
.style .token.string,
70
67
.token.entity,
71
68
.token.operator,
72
69
.token.url {
73
-
color: #9a6e3a;
70
+
color: oklch(from var(--color-accent-700) l c calc(h + 60));
74
71
}
75
72
.token.atrule,
76
73
.token.attr-value,
77
74
.token.keyword {
78
-
color: #07a;
75
+
color: oklch(from var(--color-accent-700) l c calc(h + 30));
79
76
}
80
77
.token.class-name,
81
78
.token.function {
82
-
color: #dd4a68;
79
+
color: var(--color-accent-800);
83
80
}
84
81
.token.important,
85
82
.token.regex,
86
83
.token.variable {
87
-
color: #e90;
84
+
color: var(--color-accent-800);
88
85
}
89
86
.token.bold,
90
87
.token.important {
···
100
97
.dark {
101
98
code[class*='language-'],
102
99
pre[class*='language-'] {
103
-
color: #ccc;
100
+
color: var(--color-base-200);
104
101
}
105
102
106
103
.token.block-comment,
···
108
105
.token.comment,
109
106
.token.doctype,
110
107
.token.prolog {
111
-
color: #999;
108
+
color: var(--color-base-500);
112
109
}
113
110
.token.punctuation {
114
-
color: #ccc;
111
+
color: var(--color-base-300);
115
112
}
116
113
.token.attr-name,
117
114
.token.deleted,
118
115
.token.namespace,
119
116
.token.tag {
120
-
color: #e2777a;
117
+
color: var(--color-accent-300);
121
118
}
122
119
.token.function-name {
123
-
color: #6196cc;
120
+
color: oklch(from var(--color-accent-300) l c calc(h + 30));
124
121
}
125
122
.token.boolean,
126
123
.token.function,
127
124
.token.number {
128
-
color: #f08d49;
125
+
color: var(--color-accent-200);
129
126
}
130
127
.token.class-name,
131
128
.token.constant,
132
129
.token.property,
133
130
.token.symbol {
134
-
color: #f8c555;
131
+
color: var(--color-accent-200);
135
132
}
136
133
.token.atrule,
137
134
.token.builtin,
138
135
.token.important,
139
136
.token.keyword,
140
137
.token.selector {
141
-
color: #cc99cd;
138
+
color: oklch(from var(--color-accent-300) l c calc(h + 30));
142
139
}
143
140
.token.attr-value,
144
141
.token.char,
145
142
.token.regex,
146
143
.token.string,
147
144
.token.variable {
148
-
color: #7ec699;
145
+
color: var(--color-accent-200);
149
146
}
150
147
.token.entity,
151
148
.token.operator,
152
149
.token.url {
153
-
color: #67cdcc;
150
+
color: oklch(from var(--color-accent-300) l c calc(h + 60));
154
151
}
155
152
.token.bold,
156
153
.token.important {
···
163
160
cursor: help;
164
161
}
165
162
.token.inserted {
166
-
color: green;
163
+
color: oklch(from var(--color-accent-400) l c calc(h + 90));
167
164
}
168
165
}
-2
src/routes/docs/philosophy/Philosophy.md
-2
src/routes/docs/philosophy/Philosophy.md
+3
src/lib/components/base/prose/Prose.svelte
+3
src/lib/components/base/prose/Prose.svelte
···
65
65
:global(.prose pre) {
66
66
background-color: var(--color-base-100);
67
67
color: var(--color-base-900);
68
+
border: 1px solid var(--color-base-200);
68
69
}
69
70
70
71
:global(.dark .prose pre) {
71
72
background-color: var(--color-base-900);
72
73
color: var(--color-base-50);
74
+
75
+
border: 1px solid var(--color-base-800);
73
76
}
74
77
</style>