Skip to content

Commit

Permalink
Dark Mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@malzariey
malzariey committed Jan 5, 2025
1 parent 2179d73 commit 751246d
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 54 deletions.
24 changes: 12 additions & 12 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

21 changes: 10 additions & 11 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,27 +2,26 @@
"private": true,
"type": "module",
"scripts": {
"dev:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-lexical-editor.css --postcss --watch",
"dev:styles": "npx tailwindcss -i resources/css/index.css --config tailwind.config.js -o resources/dist/filament-lexical-editor.css --postcss --watch",
"dev:scripts": "node bin/build.js --dev",
"build:styles": "npx tailwindcss -i resources/css/index.css -o resources/dist/filament-lexical-editor.css --postcss --minify && npm run purge",
"build:styles": "npx tailwindcss -i resources/css/index.css --config tailwind.config.js -o resources/dist/filament-lexical-editor.css --postcss --minify",
"build:scripts": "node bin/build.js",
"purge": "filament-purge -i resources/dist/filament-lexical-editor.css -o resources/dist/filament-lexical-editor.css -v 3.x",
"dev": "npm-run-all --parallel dev:*",
"build": "npm-run-all build:*"
},
"devDependencies": {
"@awcodes/filament-plugin-purge": "^1.1.1",
"@tailwindcss/forms": "^0.5.4",
"@tailwindcss/typography": "^0.5.9",
"autoprefixer": "^10.4.14",
"esbuild": "^0.19.2",
"@awcodes/filament-plugin-purge": "^1.1.2",
"@tailwindcss/forms": "^0.5.9",
"@tailwindcss/typography": "^0.5.15",
"autoprefixer": "^10.4.20",
"esbuild": "^0.19.12",
"npm-run-all": "^4.1.5",
"postcss": "^8.4.26",
"postcss": "^8.4.49",
"postcss-import": "^15.1.0",
"prettier": "^2.7.1",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.1.13",
"tailwindcss": "^3.3.3"

"tailwindcss": "^3.4.17"
},
"dependencies": {
"@lexical/code": "^0.22.0",
Expand Down
Binary file modified raw/main/art/dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified raw/main/art/light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 34 additions & 23 deletions resources/css/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
@import "../../vendor/filament/filament/resources/css/theme.css";
@import "@melloware/coloris/dist/coloris.css";


@tailwind base;
@tailwind components;
@tailwind utilities;

.editor header {
max-width: 580px;
margin: auto;
Expand Down Expand Up @@ -37,7 +43,6 @@
}

.editor-shell .editor-container {
background: #fff;
position: relative;
display: block;
border-bottom-left-radius: 10px;
Expand Down Expand Up @@ -425,11 +430,16 @@ i.horizontal-rule {
}

.icon.font-color {
background-image: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%20512%20512'%3e%3cpath%20fill='%23777'%20d='M221.631%20109%20109.92%20392h58.055l24.079-61h127.892l24.079%2061h58.055L290.369%20109Zm-8.261%20168L256%20169l42.63%20108Z'/%3e%3c/svg%3e")
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' width='14' height='14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7.99 7.74'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M3.05,0L0,7.74h1.59l.66-1.67h3.5l.66,1.67h1.59L4.93,0h-1.88ZM2.83,4.59l1.17-2.95,1.17,2.95h-2.33Z'/%3E%3C/svg%3E");
padding: 2px;
background-origin: content-box;
background-repeat: no-repeat;
}

.icon.bg-color {
background-image: url("data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2048%2048'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20fill='%23fff'%20fill-opacity='.01'%20d='M0%200h48v48H0z'/%3e%3cpath%20fill-rule='evenodd'%20clip-rule='evenodd'%20d='M37%2037a4%204%200%200%200%204-4c0-1.473-1.333-3.473-4-6-2.667%202.527-4%204.527-4%206a4%204%200%200%200%204%204Z'%20fill='%23777'/%3e%3cpath%20d='m20.854%205.504%203.535%203.536'%20stroke='%23777'%20stroke-width='4'%20stroke-linecap='round'/%3e%3cpath%20d='M23.682%208.333%208.125%2023.889%2019.44%2035.203l15.556-15.557L23.682%208.333Z'%20stroke='%23777'%20stroke-width='4'%20stroke-linejoin='round'/%3e%3cpath%20d='m12%2020.073%2016.961%205.577M4%2043h40'%20stroke='%23777'%20stroke-width='4'%20stroke-linecap='round'/%3e%3c/svg%3e")
background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' width='16' height='16' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.67 13.83'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; fill-rule: evenodd; stroke-miterlimit: 10; %7D .cls-1, .cls-2, .cls-3 %7B stroke: %23231f20; %7D .cls-2 %7B stroke-linejoin: round; %7D .cls-2, .cls-3 %7B fill: none; stroke-width: 1.33px; %7D .cls-3 %7B stroke-linecap: round; stroke-miterlimit: 1.33; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-3' d='M6.28.67l1.18,1.18'/%3E%3Cg%3E%3Cpath class='cls-2' d='M7.23,1.61L2.04,6.8l3.77,3.77,5.19-5.19-3.77-3.77Z'/%3E%3Cg%3E%3Cpath class='cls-1' d='M11.67,11.17c.74,0,1.33-.6,1.33-1.33,0-.49-.44-1.16-1.33-2-.89.84-1.33,1.51-1.33,2,0,.74.6,1.33,1.33,1.33Z'/%3E%3Cpath class='cls-3' d='M3.33,5.52l5.65,1.86M.67,13.17h13.33'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");


}

.icon.table {
Expand Down Expand Up @@ -1465,7 +1475,6 @@ button.action-button:disabled {
.toolbar {
display: flex;
margin-bottom: 1px;
background: #fff;
padding: 4px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
Expand Down Expand Up @@ -1502,25 +1511,21 @@ button.toolbar-item i.format {
width: 18px;
vertical-align: -.25em;
display: flex;
opacity: .6
}

button.toolbar-item:disabled .icon,button.toolbar-item:disabled .text,button.toolbar-item:disabled i.format,button.toolbar-item:disabled .chevron-down {
opacity: .2
}

button.toolbar-item.active {
background-color: #dfe8fa
@apply bg-blue-300;

}

button.toolbar-item.active i {
opacity: 1
}

.toolbar-item:hover:not([disabled]) {
background-color: #eee
}

.toolbar .code-language {
width: 150px
}
Expand All @@ -1545,7 +1550,7 @@ button.toolbar-item.active i {
-webkit-user-select: none;
user-select: none;
line-height: 16px;
background-size: contain
background-size: contain;
}

.toolbar i.chevron-down,.toolbar-item i.chevron-down {
Expand All @@ -1572,16 +1577,28 @@ button.toolbar-item.active i {
border: 1px solid #eee;
border-radius: 10px;
/*background-image: url();*/
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='currentColor' class='bi bi-fonts' viewBox='0 0 20 20'%3E%3Cpath d='M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z' /%3E%3C/svg%3E") left 0.6rem no-repeat,
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center right no-repeat !important;
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' width='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.01 14.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.89,0H.12l-.12,3.69h.72C1.11,1.37,1.86,1.02,4.76.92l.64-.02v11.74c0,.99-.22,1.23-1.95,1.38v.78h6.12v-.78c-1.74-.15-1.96-.39-1.96-1.38V.9l.65.02c2.9.09,3.65.45,4.04,2.77h.72l-.12-3.69Z'/%3E%3C/svg%3E") 0.2rem center no-repeat,
url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1'%0Awidth='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 5.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23231f20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.75.75l4,4L8.75.75'/%3E%3C/svg%3E") right 0.2rem center no-repeat !important;
padding: 0 0.5em 0 1.5em;
height: 100%;
}

.font-family:is(.dark *){
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13.01 14.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.89,0H.12l-.12,3.69h.72C1.11,1.37,1.86,1.02,4.76.92l.64-.02v11.74c0,.99-.22,1.23-1.95,1.38v.78h6.12v-.78c-1.74-.15-1.96-.39-1.96-1.38V.9l.65.02c2.9.09,3.65.45,4.04,2.77h.72l-.12-3.69Z'/%3E%3C/svg%3E") 0.2rem center no-repeat,
url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1'%0Awidth='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 8.68'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.37px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1.18,1.18l6.32,6.32L13.82,1.18'/%3E%3C/svg%3E") right 0.2rem center no-repeat !important;
padding: 0 1em 0 1.5em;
}

[dir=rtl] .font-family {
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='currentColor' class='bi bi-fonts' viewBox='0 0 20 20'%3E%3Cpath d='M12.258 3h-8.51l-.083 2.46h.479c.26-1.544.758-1.783 2.693-1.845l.424-.013v7.827c0 .663-.144.82-1.3.923v.52h4.082v-.52c-1.162-.103-1.306-.26-1.306-.923V3.602l.431.013c1.934.062 2.434.301 2.693 1.846h.479L12.258 3z' /%3E%3C/svg%3E") right 0.6rem no-repeat,
url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center left no-repeat !important;
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' width='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.01 14.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23231f20; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.89,0H.12l-.12,3.69h.72C1.11,1.37,1.86,1.02,4.76.92l.64-.02v11.74c0,.99-.22,1.23-1.95,1.38v.78h6.12v-.78c-1.74-.15-1.96-.39-1.96-1.38V.9l.65.02c2.9.09,3.65.45,4.04,2.77h.72l-.12-3.69Z'/%3E%3C/svg%3E") right 0.2rem center no-repeat,
url("data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1'%0Awidth='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 5.5'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23231f20; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M.75.75l4,4L8.75.75'/%3E%3C/svg%3E") 0.2rem center no-repeat !important;
padding: 0 2em 0 0.5em;
}

[dir=rtl] .font-family:is(.dark *){
background: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 13.01 14.81'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23fff; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M12.89,0H.12l-.12,3.69h.72C1.11,1.37,1.86,1.02,4.76.92l.64-.02v11.74c0,.99-.22,1.23-1.95,1.38v.78h6.12v-.78c-1.74-.15-1.96-.39-1.96-1.38V.9l.65.02c2.9.09,3.65.45,4.04,2.77h.72l-.12-3.69Z'/%3E%3C/svg%3E") right 0.2rem center no-repeat,
url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1'%0Awidth='15' height='15' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 8.68'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: none; stroke: %23fff; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.37px; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M1.18,1.18l6.32,6.32L13.82,1.18'/%3E%3C/svg%3E") 0.2rem center no-repeat !important;
padding: 0 2em 0 1.5em;
}


Expand All @@ -1593,9 +1610,7 @@ button.toolbar-item.active i {
width: 150px;
padding: 0 10px;
margin: 1px;
background: white;


@apply bg-white dark:bg-black;
}

.toolbar .divider {
Expand Down Expand Up @@ -1938,7 +1953,6 @@ button.item.dropdown-item-active i {
.code-action-menu-container button.menu-item i.format {
height: 16px;
width: 16px;
opacity: .6;
display: flex;
color: #00000080;
background-size: contain
Expand Down Expand Up @@ -2472,14 +2486,12 @@ i.send {

.lexical__h1 {
font-size: 24px;
color: #050505;
font-weight: 400;
margin: 0
}

.lexical__h2 {
font-size: 15px;
color: #65676b;
font-weight: 700;
margin: 0;
text-transform: uppercase
Expand Down Expand Up @@ -4549,7 +4561,6 @@ body {
margin-top: 2px;
vertical-align: -.25em;
display: flex;
opacity: .6
}

.floating-text-format-popup button.popup-item:disabled i.format {
Expand Down Expand Up @@ -4930,7 +4941,7 @@ input[type=number] {
}

.add-icon {
background-image: url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2017'%3e%3cpath%20fill=''%20d='M10%207H6V3H4v4H0v2h4v4h2V9h4z'/%3e%3c/svg%3e");
background-image: url("data:image/svg+xml,%3csvg%20width='18'%20height='18'%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2010%2017'%3e%3cpath%20fill='000000'%20d='M10%207H6V3H4v4H0v2h4v4h2V9h4z'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: center
}
Expand Down
3 changes: 2 additions & 1 deletion resources/dist/filament-lexical-editor.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion resources/views/components/text-color-dialog.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="flex" x-tooltip="'{{ $title }}'">
<button type="button" x-ref="{{$ref}}" class="toolbar-item color-picker gap-1">
<input x-ref="{{$ref}}_input" data-coloris class="w-1 h-1 ">
<span class="icon {{$icon}}"></span><i class="chevron-down"></i></button>
<span class="icon dark:invert {{$icon}}"></span><i class="dark:invert chevron-down"></i></button>
</div>
2 changes: 1 addition & 1 deletion resources/views/components/toolbar-item.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@
x-ref="{{__('messages.direction') == "rtl" && $rtlRef != null ? $rtlRef : $ref}}"
aria-label="{{__('messages.direction') == "rtl" && $rtlTitle != null ? $rtlTitle : $title}}"
x-tooltip="'{{__('messages.direction') == "rtl" && $rtlTitle != null ? $rtlTitle . " ($rtlShortcut)" : $title . (filled($shortcut) ? " ($shortcut)" : "" ) }}'" type="button">
<i class="{{$iconClass}} {{__('messages.direction') == "rtl" && $rtlIcon != null ? $rtlIcon : $icon}}"></i>
<i class="{{$iconClass}} dark:invert {{__('messages.direction') == "rtl" && $rtlIcon != null ? $rtlIcon : $icon}}"></i>
</button>
</div>
4 changes: 2 additions & 2 deletions resources/views/components/toolbar.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
title="{{ __('messages.redo') }}" shortcut="Ctrl+Y" icon="redo"/>
@break
@case(ToolbarItem::FONT_FAMILY)
<div class="relative w-52">
<div class="relative w-52 h-11 py-1">
<select x-ref="fontFamily" class="toolbar-item spaced font-family"
x-tooltip="'{{ __('messages.font_family') }}'">
<option value="Arial" style="font-family: Arial,serif">Arial</option>
Expand Down Expand Up @@ -85,7 +85,7 @@
<x-filament-lexical-editor::toolbar-item ref="decrement" class="font-decrement"
title="{{ __('messages.decrease_font_size') }}" shortcut="Ctrl+Shift+,"
icon-class="format" icon="minus-icon"/>
<input type="number" title="Font size" x-ref="fontSize" class="toolbar-item font-size-input w-15 " min="8"
<input type="number" title="Font size" x-ref="fontSize" class="toolbar-item font-size-input w-16 " min="8"
max="72" value="15">
<x-filament-lexical-editor::toolbar-item ref="increment" class="font-increment"
title="{{ __('messages.increase_font_size') }}" shortcut="Ctrl+Shift+."
Expand Down
11 changes: 8 additions & 3 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,13 @@ const preset = require('./vendor/filament/filament/tailwind.config.preset')
module.exports = {
presets: [preset],
content: [
'./app/Filament/**/*.php',
'./resources/views/filament/**/*.blade.php',
'./vendor/filament/**/*.blade.php',
'./resources/views/**/*.blade.php',
],
safelist:[
'dark:invert',
'w-8',

]


}

0 comments on commit 751246d

Please sign in to comment.