mirror of
https://github.com/logseq/logseq.git
synced 2026-04-29 00:24:51 +00:00
Feat: New UI components (#10694)
* enhance(plugin): call apis with the sdk ns * enhance(plugin): types * enhance(api): get value from the computed style * enhance(api): types * enhance(plugin): types * enhance(plugin): types * fix: lint * fix(apis): incorrect shortcut command registion for block editing mode #10392 * fix(api): types * enhance(apis): support register shortcuts with multi binding vals * fix(plugins): normalize command key to make the internal keyword legal * chore(plugin): build libs core * chore(plugin): bump version * enhance(apis): normalize apis cljs data * chore(plugin): update libs user sdk * chore(plugin): CHANGELOG.md * fix: typo * feat(ui): add package * Update .gitignore * feat(ui): set up shui infrastructure * feat(ui): add storybook macro * enhance(ui): storybook themes * feat(ui): adapt ui button to classic * enhance(ui): shui story * feat(ui): shui toaster * enhance(ui): shui toaster * feat(ui): imperative API for shui toaster * enhance(shui): update API for shui toaster * enhance(shui): update hooks for shui toaster * enhance(shui): remove debug * feat(ui): story for the shui toaster * feat(ui): story * feat(ui): story docs * feat(ui): more variants for the shui toaster * feat(ui): story * fix(ux): support querying plugins with right space chars * feat(ui): add shui `Alert` component * enhance(ui): shui demo * feat(ui): add logseq UI readme * enhance(ui): default shui theme * feat(ui): add shui `Badge` component & demo * fix(ui): outline theme for shui button * feat(ui): custom icon for the toaster item * feat(ui): add shui dropdown & demo * feat(ui): WIP shui form related components * feat(ui): WIP shui form-related components * feat(ui): WIP shui form * feat(ui): WIP shui form state for validation * fix(ui): missing rounded for ui button * feat(ui): add yup for shui form as default validation resolver * enhance(ui): simplify validation schema input for the shui form * fix(ui): accent ring color for input * feat(ui): add shui switch * feat(ui): add shui checkbox & switch * feat(ui): add shui radio group * fix(ui): missing file * feat(ui): add Textarea component * feat(ui): add shui card & skeleton * feat(ui): add shui context menu component & demo * fix(ui): accent color for the context menu item * feat(ui): add shui select component & demo * enhance(ui): ui css priority * feat(ui): add shui calendar & ui details * feat(ui): add shui popover * feat(ui): add date picker & demo * feat(ui): add shui dialog * feat(ui): WIP add shui dialog * feat(ui): WIP shui dialog as modal * feat(ui): WIP imperative APIs for the shui modal * feat(ui): imperative APIs for the shui modal/alert * feat(ui): support imperative API alert!/confirm! return promise * feat(ui): simplify shui components resources * feat(ui): response layout for the demo ui page * feat(ui): simplify colors * feat(ui): simplify colors * feat(ui): simplify colors * refactor(ui): WIP Adapt to the new button component * refactor(ui): polish new button & colors * fix(ui): the new theme color for the plugin settings nav item link * fix(ui): blockquote colors * enhance(ui): more custom colors for shui button * feat(ui): WIP make logseq green as a theme color * enhance(ui): polish logseq classical theme color * fix(ui): theme details of all pages * enhance(ui): polish logseq theme color for dark mode * fix(ui): missing table style * refactor(ui): simplify the all shui buttons & shortcuts for the cmdk component * fix(ui): missing file * refactor(ui): clear up stuff * fix(ui): theme color related issues * enhance(ui): polish button style * enhance(ui): polish the keymap setting pane * fix(ui): hint button from the cmdk pane footer * fix(ui): logseq colors for the storybook * enhance(ui): stories for the shui components * fix(ui): active color for the old toggle component * enhance(ui): keep the constant size of the settings pane * fix(ui): polish search input for the plugins pane * enhance(ui): polish number list bullet colors * feat(ui): add shui tooltip component * chore: build ui * chore(ui): clean up resources * fix: lint * fix: lint * fix: lint * fix(ui): alignment of the keymap title from the settings pane * fix: tests * fix(ui): close button for the classic notification tip * fix(ui): polish toaster viewport * enhance(ui): polish the ghost button colors * enhance(ui): demos for tips * fix(ui): accent colors for the rc-datepicker * fix(ui): accent color for the menu item * refactor(ui): remove unless code for the accent colors * enhance(ui): polish pdf viewer background color for the accent color mode * fix: lint * fix: lint * fix: lint * enhance(ui): support button with the custom href link * enhance(ui): polish aside setting items * enhance(ui): polish accent color for buttons * enhance(ui): polish all pages --------- Co-authored-by: Gabriel Horner <97210743+logseq-cldwalker@users.noreply.github.com>
This commit is contained in:
Charlie
@@ -153,8 +153,8 @@ html[data-theme='light'] {
|
||||
--ls-page-checkbox-color: #9dbbd8;
|
||||
--ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
|
||||
--ls-page-blockquote-color: var(--ls-primary-text-color);
|
||||
--ls-page-blockquote-bg-color: #fbfaf8;
|
||||
--ls-page-blockquote-border-color: #799bbc;
|
||||
--ls-page-blockquote-bg-color: var(--lx-gray-03, #fbfaf8);
|
||||
--ls-page-blockquote-border-color: var(--lx-gray-08, #799bbc);
|
||||
--ls-page-mark-color: #262626;
|
||||
--ls-page-mark-bg-color: #fef3ac;
|
||||
--ls-page-inline-code-bg-color: var(--ls-secondary-background-color);
|
||||
@@ -197,8 +197,8 @@ html[data-theme='light'] {
|
||||
|
||||
html:not(.is-native-android) {
|
||||
font-family: var(--ls-font-family), sans-serif, system-ui, -apple-system,
|
||||
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
||||
serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
|
||||
BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
|
||||
serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol !important;
|
||||
}
|
||||
|
||||
/* region Reset top elements */
|
||||
@@ -214,134 +214,128 @@ body {
|
||||
word-break: break-word; /* compatible for overflow-wrap: anywhere */
|
||||
}
|
||||
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
@layer base {
|
||||
svg {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(39, 41, 43, 0.15);
|
||||
border-radius: var(--ls-border-radius-low);
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-size-adjust: 100%;
|
||||
background: var(--ls-primary-background-color);
|
||||
}
|
||||
textarea {
|
||||
overflow: hidden;
|
||||
padding: 8px;
|
||||
border: 1px solid rgba(39, 41, 43, 0.15);
|
||||
border-radius: var(--ls-border-radius-low);
|
||||
font-size: 1em;
|
||||
line-height: 1.5;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
outline: none;
|
||||
font-weight: inherit;
|
||||
letter-spacing: inherit;
|
||||
text-size-adjust: 100%;
|
||||
background: var(--ls-primary-background-color);
|
||||
}
|
||||
|
||||
.dark-theme textarea {
|
||||
background: var(--ls-tertiary-background-color);
|
||||
}
|
||||
ul {
|
||||
list-style: circle;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: circle;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style: decimal;
|
||||
margin-left: 1.2em;
|
||||
}
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: 1.5;
|
||||
margin: 0.5rem 0;
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
pre {
|
||||
background: var(--ls-secondary-background-color, #f6f8fa);
|
||||
margin: 1rem 0;
|
||||
line-height: 1.45em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: or(--ls-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: var(--ls-secondary-background-color, #f6f8fa);
|
||||
margin: 1rem 0;
|
||||
line-height: 1.45em;
|
||||
overflow: auto;
|
||||
}
|
||||
a:hover {
|
||||
color: or(--ls-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: or(--ls-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
|
||||
text-decoration: none;
|
||||
}
|
||||
code {
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: or(--ls-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
|
||||
}
|
||||
pre.code {
|
||||
background: #282a36;
|
||||
background: var(--ls-secondary-background-color);
|
||||
color: var(--ls-primary-text-color, #f8f8f2);
|
||||
}
|
||||
|
||||
code {
|
||||
font-size: 85%;
|
||||
}
|
||||
dl {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
pre.code {
|
||||
background: #282a36;
|
||||
background: var(--ls-secondary-background-color);
|
||||
color: var(--ls-primary-text-color, #f8f8f2);
|
||||
}
|
||||
dt {
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
blockquote {
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
padding: 8px 20px;
|
||||
border-left: 4px solid;
|
||||
border-left-color: var(--ls-page-blockquote-border-color, #d3d3d3);
|
||||
background-color: var(--ls-page-blockquote-bg-color, #f7f7f7);
|
||||
margin: 1rem 0;
|
||||
color: var(--ls-page-blockquote-color, #24292e);
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
display: block;
|
||||
text-indent: 0;
|
||||
padding: 8px 20px;
|
||||
border-left: 4px solid;
|
||||
border-left-color: var(--ls-page-blockquote-border-color, #d3d3d3);
|
||||
background-color: var(--ls-page-blockquote-bg-color, #f7f7f7);
|
||||
margin: 1rem 0;
|
||||
color: var(--ls-page-blockquote-color, #24292e);
|
||||
font-size: 1rem;
|
||||
}
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
color: var(--ls-primary-text-color);
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
input[type='text'],
|
||||
input[type='password'] {
|
||||
color: var(--ls-primary-text-color);
|
||||
background: transparent;
|
||||
font-size: inherit;
|
||||
}
|
||||
summary {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
summary {
|
||||
outline: none;
|
||||
}
|
||||
iframe {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
img,
|
||||
video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
img,
|
||||
video {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
::selection {
|
||||
background: var(--ls-selection-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--ls-selection-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
::-moz-selection {
|
||||
background: var(--ls-selection-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background: var(--ls-selection-background-color);
|
||||
color: var(--ls-primary-text-color);
|
||||
}
|
||||
|
||||
/* endregion */
|
||||
|
||||
/** region App utilities **/
|
||||
@@ -397,6 +391,10 @@ li p:last-child,
|
||||
.external-link {
|
||||
text-decoration: none;
|
||||
border-bottom: 1px solid;
|
||||
|
||||
&:hover {
|
||||
cursor: alias;
|
||||
}
|
||||
}
|
||||
|
||||
.noscroll {
|
||||
@@ -688,15 +686,13 @@ a.tag {
|
||||
cursor: pointer;
|
||||
padding: 0 2px;
|
||||
border-radius: 4px;
|
||||
background: or(--ls-tag-background, --lx-accent-05, transparent);
|
||||
color: or(--ls-tag-text, --lx-accent-11, --ls-tag-text-color, #045591);
|
||||
opacity: var(--ls-tag-text-opacity, 0.8);
|
||||
opacity: var(--ls-tag-text-opacity, 0.7);
|
||||
}
|
||||
|
||||
a.tag:hover {
|
||||
opacity: var(--ls-tag-text-hover-opacity, 1);
|
||||
background: or(--ls-tag-background-hover, --lx-accent-06, transparent);
|
||||
color: or(--ls-tag-text-hvoer, --lx-accent-12, --ls-tag-text-hover-color, #045591);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
svg.note {
|
||||
@@ -800,7 +796,7 @@ mark {
|
||||
font-size: 0.9em;
|
||||
font-style: normal;
|
||||
font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
|
||||
monospace;
|
||||
monospace;
|
||||
letter-spacing: 0;
|
||||
background-color: or(--ls-inline-code-background, --lx-gray-06, --ls-page-inline-code-bg-color, #eee);
|
||||
color: or(--ls-inline-code-text, --lx-gray-11, --ls-page-inline-code-color);
|
||||
@@ -886,7 +882,7 @@ html[data-theme='light'] .keyboard-shortcut > code {
|
||||
|
||||
html[data-theme='dark'] .keyboard-shortcut > code {
|
||||
box-shadow: inset 0 -1px 0 var(--ls-primary-background-color),
|
||||
0 0 1px 1px rgba(255, 255, 255, 0.2);
|
||||
0 0 1px 1px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.ui__modal-panel {
|
||||
|
||||
Reference in New Issue
Block a user