Skip to content

Commit 960827e

Browse files
luke-parallaxluke-parallax
committed
UI & theme updates
1 parent f13e928 commit 960827e

File tree

5 files changed

+139
-172
lines changed

5 files changed

+139
-172
lines changed

‎resources/css/index.css‎

Lines changed: 38 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,46 @@
11
@import '../../vendor/filament/filament/resources/css/theme.css';
2-
@import "../../vendor/tempest/highlight/src/Themes/highlight-light-lite.css";
32

4-
.filament-syntax-entry-component .grid {
5-
@apply block;
3+
.syntax-entry-component .grid {
4+
@apply grid-cols-1;
65
}
76

8-
.filament-syntax-entry {
9-
@apply font-mono rounded-xl overflow-hidden shadow-sm ring-1;
7+
.syntax-entry-theme-filament {
8+
@apply p-6 bg-gray-50 dark:bg-gray-950 font-mono text-sm text-gray-950 dark:text-white leading-6 rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10;
109

11-
.hljs {
12-
@apply block p-6 overflow-x-scroll;
10+
.hl-keyword {
11+
@apply text-blue-600;
12+
}
13+
14+
.hl-property,
15+
.hl-value,
16+
.hl-variable {
17+
@apply text-gray-950 dark:text-white;
18+
}
19+
20+
.hl-type {
21+
@apply text-red-600;
22+
}
23+
24+
.hl-generic {
25+
@apply text-purple-600;
26+
}
27+
28+
.hl-comment span,
29+
.hl-comment {
30+
@apply text-gray-600;
31+
}
32+
33+
.hl-blur {
34+
@apply blur-sm;
35+
}
36+
37+
.hl-strong {
38+
@apply font-bold;
39+
}
40+
41+
.hl-attribute,
42+
.hl-em {
43+
@apply italic;
1344
}
1445
}
1546

16-
:is(.dark .filament-syntax-entry) {
17-
@apply ring-white/10;
18-
}
19-
20-
:not(.dark .filament-syntax-entry) {
21-
@apply ring-gray-950/5;
22-
}

‎resources/dist/filament-syntax-entry.css‎

Lines changed: 61 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -3272,6 +3272,10 @@ select {
32723272
overflow-x: clip;
32733273
}
32743274

3275+
.overflow-x-scroll {
3276+
overflow-x: scroll;
3277+
}
3278+
32753279
.truncate {
32763280
overflow: hidden;
32773281
text-overflow: ellipsis;
@@ -4221,98 +4225,84 @@ select {
42214225
transform: translateZ(0);
42224226
}
42234227

4224-
:root {
4225-
--background-color: #f3f3f3;
4226-
--text-color: #000;
4227-
--keyword-color: #4285F4;
4228-
--property-color: #34A853;
4229-
--type-color: #EA4334;
4230-
--generic-color: #9d3af6;
4231-
--value-color: #000;
4232-
--comment-color: #888888;
4233-
}
4234-
4235-
.hl-keyword {
4236-
color: var(--keyword-color);
4237-
}
4238-
4239-
.hl-property {
4240-
color: var(--property-color);
4241-
}
4242-
4243-
.hl-attribute {
4244-
font-family: "Radon", inherit, monospace;
4245-
}
4246-
4247-
.hl-type {
4248-
color: var(--type-color);
4249-
}
4250-
4251-
.hl-generic .hl-type,
4252-
.hl-generic {
4253-
color: var(--generic-color);
4254-
}
4255-
4256-
.hl-value {
4257-
color: var(--value-color);
4228+
.syntax-entry-component .grid {
4229+
grid-template-columns: repeat(1, minmax(0, 1fr));
42584230
}
42594231

4260-
.hl-comment {
4261-
color: var(--comment-color);
4232+
.syntax-entry-theme-filament {
4233+
border-radius: 0.75rem;
4234+
--tw-bg-opacity: 1;
4235+
background-color: rgba(var(--gray-50), var(--tw-bg-opacity));
4236+
padding: 1.5rem;
4237+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
4238+
font-size: 0.875rem;
4239+
line-height: 1.5rem;
4240+
--tw-text-opacity: 1;
4241+
color: rgba(var(--gray-950), var(--tw-text-opacity));
4242+
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
4243+
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
4244+
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
4245+
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
4246+
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4247+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
4248+
--tw-ring-color: rgba(var(--gray-950), 0.05);
42624249
}
42634250

4264-
.hl-blur {
4265-
filter: blur(2px);
4251+
:is(.dark .syntax-entry-theme-filament) {
4252+
--tw-bg-opacity: 1;
4253+
background-color: rgba(var(--gray-950), var(--tw-bg-opacity));
4254+
--tw-text-opacity: 1;
4255+
color: rgb(255 255 255 / var(--tw-text-opacity));
4256+
--tw-ring-color: rgb(255 255 255 / 0.1);
42664257
}
42674258

4268-
.hl-strong {
4269-
font-weight: bold;
4259+
.syntax-entry-theme-filament .hl-keyword {
4260+
--tw-text-opacity: 1;
4261+
color: rgb(37 99 235 / var(--tw-text-opacity));
42704262
}
42714263

4272-
.hl-em {
4273-
font-style: italic;
4264+
.syntax-entry-theme-filament .hl-property,
4265+
.syntax-entry-theme-filament .hl-value,
4266+
.syntax-entry-theme-filament .hl-variable {
4267+
--tw-text-opacity: 1;
4268+
color: rgba(var(--gray-950), var(--tw-text-opacity));
42744269
}
42754270

4276-
.hl-addition {
4277-
display: inline-block;
4278-
min-width: 100%;
4279-
background-color: #00FF0033;
4271+
:is(.dark .syntax-entry-theme-filament .hl-property),:is(.dark
4272+
.syntax-entry-theme-filament .hl-value),:is(.dark
4273+
.syntax-entry-theme-filament .hl-variable) {
4274+
--tw-text-opacity: 1;
4275+
color: rgb(255 255 255 / var(--tw-text-opacity));
42804276
}
42814277

4282-
.hl-deletion {
4283-
display: inline-block;
4284-
min-width: 100%;
4285-
background-color: #FF000022;
4278+
.syntax-entry-theme-filament .hl-type {
4279+
--tw-text-opacity: 1;
4280+
color: rgb(220 38 38 / var(--tw-text-opacity));
42864281
}
42874282

4288-
.filament-syntax-entry-component .grid {
4289-
display: block;
4283+
.syntax-entry-theme-filament .hl-generic {
4284+
--tw-text-opacity: 1;
4285+
color: rgb(147 51 234 / var(--tw-text-opacity));
42904286
}
42914287

4292-
.filament-syntax-entry {
4293-
overflow: hidden;
4294-
border-radius: 0.75rem;
4295-
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
4296-
--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
4297-
--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
4298-
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
4299-
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
4300-
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
4301-
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
4288+
.syntax-entry-theme-filament .hl-comment span,
4289+
.syntax-entry-theme-filament .hl-comment {
4290+
--tw-text-opacity: 1;
4291+
color: rgba(var(--gray-600), var(--tw-text-opacity));
43024292
}
43034293

4304-
.filament-syntax-entry .hljs {
4305-
display: block;
4306-
overflow-x: scroll;
4307-
padding: 1.5rem;
4294+
.syntax-entry-theme-filament .hl-blur {
4295+
--tw-blur: blur(4px);
4296+
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
43084297
}
43094298

4310-
:is(.dark .filament-syntax-entry) {
4311-
--tw-ring-color: rgb(255 255 255 / 0.1);
4299+
.syntax-entry-theme-filament .hl-strong {
4300+
font-weight: 700;
43124301
}
43134302

4314-
:not(.dark .filament-syntax-entry) {
4315-
--tw-ring-color: rgba(var(--gray-950), 0.05);
4303+
.syntax-entry-theme-filament .hl-attribute,
4304+
.syntax-entry-theme-filament .hl-em {
4305+
font-style: italic;
43164306
}
43174307

43184308
:is(.dark .dark\:prose-invert) {
@@ -6056,3 +6046,4 @@ input:focus-visible+.\[input\:focus-visible\+\&\]\:ring-gray-950\/10 {
60566046
:is(.dark input:focus-visible+.dark\:\[input\:focus-visible\+\&\]\:ring-white\/20) {
60576047
--tw-ring-color: rgb(255 255 255 / 0.2);
60586048
}
6049+

‎resources/views/syntax-entry.blade.php‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<x-dynamic-component class="filament-syntax-entry-component" :component="$getEntryWrapperView()" :entry="$entry" wire:ignore>
1+
<x-dynamic-component class="syntax-entry-component" :component="$getEntryWrapperView()" :entry="$entry" wire:ignore>
22
<div
3-
class="filament-syntax-entry"
3+
class="overflow-x-scroll syntax-entry-theme-{{ $getTheme() }}"
44
x-load-css="[@js(\Filament\Support\Facades\FilamentAsset::getStyleHref(
55
id: 'filament-syntax-entry-styles',
66
package: 'parallax/filament-syntax-entry'

‎src/SyntaxEntry.php‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,12 @@ class SyntaxEntry extends Entry implements HasAffixActions
2121

2222
protected string | Closure | null $theme = 'filament';
2323

24-
protected string | Closure | null $darkModeTheme = 'filament-dark';
25-
2624
public function getValue(): HtmlString
2725
{
2826
$state = $this->getState();
2927
$language = $this->language;
3028
$toParse = !is_string($state) || $language === 'json' ? json_encode($state, JSON_PRETTY_PRINT) : $state;
31-
$parsed = (new Highlighter())->parse($toParse, 'json');
29+
$parsed = (new Highlighter())->parse($toParse, $language);
3230

3331
return Str::of($parsed)->toHtmlString();
3432
}

0 commit comments

Comments
 (0)