rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(web): navigation styles (#1177)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-30 01:03:25 +05:30
committed by GitHub
parent 92360aaf66
commit 5cd449fe80
28 changed files with 94 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
packages/components/src/Packages/Themes/org.standardnotes.theme-autobiography/src/main.scss
View File

@@ -6,6 +6,13 @@
--highlight-color: #d68420;
--highlight-contrast: #e3ae74;
--sn-stylekit-passive-color-0: #7e582a;
--sn-stylekit-passive-color-1: #a37337;
--sn-stylekit-passive-color-3: #d9c6b1;
--sn-stylekit-passive-color-4: #e3d5c4;
--sn-stylekit-passive-color-4-opacity-variant: #c9995e3d;
--sn-stylekit-passive-color-5: #e9d9c7;
--sn-stylekit-info-color: #a37337;
--sn-stylekit-info-contrast-color: #ebcdaa;
@@ -33,7 +40,7 @@
--sn-stylekit-contrast-foreground-color: var(--foreground-color);
--sn-stylekit-contrast-border-color: var(--border-color);
--sn-stylekit-secondary-background-color: var(--background-1);
--sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-secondary-foreground-color: var(--foreground-color);
--sn-stylekit-secondary-border-color: var(--border-color);
@@ -51,11 +58,6 @@
--sn-desktop-titlebar-border-color: var(--border-color);
--sn-desktop-titlebar-ui-color: var(--foreground-color);
--sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
--sn-stylekit-passive-color-0: #7e582a;
--sn-stylekit-passive-color-1: #a37337;
--sn-stylekit-passive-color-4-opacity-variant: #c9995e3d;
--sn-stylekit-passive-color-5: #e9d9c7;
}
#notes-column .note.selected,

12
packages/components/src/Packages/Themes/org.standardnotes.theme-focus/src/main.scss
View File

@@ -12,6 +12,11 @@
// StyleKit Vars
--sn-stylekit-passive-color-0: #999999;
--sn-stylekit-passive-color-3: #28292b;
--sn-stylekit-passive-color-4: #1c1d1e;
--sn-stylekit-passive-color-5: #1d1f20;
--sn-stylekit-shadow-color: #000000;
--sn-stylekit-info-color: var(--highlight-color);
@@ -40,7 +45,7 @@
--sn-stylekit-contrast-foreground-color: #ffffff;
--sn-stylekit-contrast-border-color: #000000;
--sn-stylekit-secondary-background-color: #0f1011;
--sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-secondary-foreground-color: #ffffff;
--sn-stylekit-secondary-border-color: #000000;
@@ -59,9 +64,4 @@
--sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
--sn-stylekit-menu-border: 1px solid #424242;
--sn-stylekit-passive-color-0: #999999;
--sn-stylekit-passive-color-3: #28292b;
--sn-stylekit-passive-color-4: #1c1d1e;
--sn-stylekit-passive-color-5: #1d1f20;
}

15
packages/components/src/Packages/Themes/org.standardnotes.theme-futura/src/main.scss
View File

@@ -5,6 +5,13 @@
--border-color: #20222c;
// StyleKit Vars
--sn-stylekit-passive-color-0: #a4a5b3;
--sn-stylekit-passive-color-3: #3a3a48;
--sn-stylekit-passive-color-4: #2c2c39;
--sn-stylekit-passive-color-4-opacity-variant: #292937;
--sn-stylekit-passive-color-5: #2e2e3e;
--sn-stylekit-shadow-color: var(--border-color);
--sn-stylekit-info-color: var(--highlight-color);
@@ -33,7 +40,7 @@
--sn-stylekit-contrast-foreground-color: #a9aabe;
--sn-stylekit-contrast-border-color: #0f1116;
--sn-stylekit-secondary-background-color: #20202b;
--sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-secondary-foreground-color: #a9aabe;
--sn-stylekit-secondary-border-color: #20222c;
@@ -52,10 +59,4 @@
--sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
--sn-stylekit-menu-border: 1px solid #434b60;
--sn-stylekit-passive-color-0: #a4a5b3;
--sn-stylekit-passive-color-3: #3a3a48;
--sn-stylekit-passive-color-4: #2c2c39;
--sn-stylekit-passive-color-4-opacity-variant: #292937;
--sn-stylekit-passive-color-5: #2e2e3e;
}

15
packages/components/src/Packages/Themes/org.standardnotes.theme-midnight/src/main.scss
View File

@@ -26,6 +26,13 @@
--sn-desktop-titlebar-ui-hover-color: var(--sn-stylekit-info-color);
// StyleKit Vars
--sn-stylekit-passive-color-0: #94979e;
--sn-stylekit-passive-color-3: #2c2c39;
--sn-stylekit-passive-color-4: #313142;
--sn-stylekit-passive-color-4-opacity-variant: #292937;
--sn-stylekit-passive-color-5: #313142;
--sn-stylekit-shadow-color: #20202b;
--sn-stylekit-background-color: #20202b;
@@ -36,7 +43,7 @@
--sn-stylekit-contrast-foreground-color: var(--ui-text-color);
--sn-stylekit-contrast-border-color: var(--border-color);
--sn-stylekit-secondary-background-color: #292937;
--sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-secondary-foreground-color: var(--ui-text-color);
--sn-stylekit-secondary-border-color: var(--border-color);
@@ -53,10 +60,4 @@
--sn-stylekit-scrollbar-thumb-color: var(--sn-stylekit-info-color);
--sn-stylekit-menu-border: 1px solid #494965;
--sn-stylekit-passive-color-0: #94979e;
--sn-stylekit-passive-color-3: #2c2c39;
--sn-stylekit-passive-color-4: #313142;
--sn-stylekit-passive-color-4-opacity-variant: #292937;
--sn-stylekit-passive-color-5: #313142;
}

17
packages/components/src/Packages/Themes/org.standardnotes.theme-solarized-dark/src/main.scss
View File

@@ -25,6 +25,14 @@
--sn-component-inner-border-color: var(--highlight-color);
// StyleKit Vars
--sn-stylekit-passive-color-0: #a8bdbd;
--sn-stylekit-passive-color-1: #93a1a1;
--sn-stylekit-passive-color-3: #0d4f60;
--sn-stylekit-passive-color-4: #083642;
--sn-stylekit-passive-color-4-opacity-variant: #2aa1983d;
--sn-stylekit-passive-color-5: #003542;
--sn-stylekit-info-color: var(--highlight-color);
--sn-stylekit-info-contrast-color: var(--foreground-color);
@@ -52,7 +60,7 @@
--sn-stylekit-contrast-foreground-color: var(--foreground-color);
--sn-stylekit-contrast-border-color: var(--border-color);
--sn-stylekit-secondary-background-color: var(--background-1);
--sn-stylekit-secondary-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-secondary-foreground-color: var(--foreground-color);
--sn-stylekit-secondary-border-color: var(--border-color);
@@ -72,11 +80,4 @@
--sn-desktop-titlebar-ui-hover-color: var(--highlight-color);
--sn-stylekit-menu-border: 1px solid #1f5461;
--sn-stylekit-passive-color-0: #a8bdbd;
--sn-stylekit-passive-color-1: #93a1a1;
--sn-stylekit-passive-color-3: #0d4f60;
--sn-stylekit-passive-color-4: #083642;
--sn-stylekit-passive-color-4-opacity-variant: #2aa1983d;
--sn-stylekit-passive-color-5: #003542;
}

11
packages/components/src/Packages/Themes/org.standardnotes.theme-titanium/src/main.scss
View File

@@ -6,6 +6,10 @@
--border-color: var(--highlight-color);
// StyleKit Vars
--sn-stylekit-passive-color-0: #626166;
--sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
--sn-stylekit-shadow-color: var(--highlight-color);
--sn-stylekit-info-color: var(--background-color);
@@ -23,7 +27,7 @@
--sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: #ffffff;
--sn-stylekit-background-color: #d9dbde;
--sn-stylekit-background-color: var(--sn-stylekit-passive-color-4);
--sn-stylekit-foreground-color: #3d3c40;
--sn-stylekit-border-color: #c9cccf;
@@ -31,7 +35,7 @@
--sn-stylekit-contrast-foreground-color: #3d3c40;
--sn-stylekit-contrast-border-color: #c9cccf;
--sn-stylekit-secondary-background-color: #d8d9de;
--sn-stylekit-secondary-background-color: #d9dbde;
--sn-stylekit-secondary-foreground-color: #3d3c40;
--sn-stylekit-secondary-border-color: #c9cccf;
@@ -53,7 +57,4 @@
--sn-desktop-titlebar-ui-hover-color: var(--background-color);
--sn-stylekit-menu-border: 1px solid #b2b2b3;
--sn-stylekit-passive-color-0: #626166;
--sn-stylekit-passive-color-4-opacity-variant: #e9e9e9;
}

8
packages/styles/src/Styles/_colors.scss
View File

@@ -1,5 +1,5 @@
:root {
--sn-stylekit-neutral-color: #989898;
--sn-stylekit-neutral-color: #72767e;
--sn-stylekit-neutral-contrast-color: #ffffff;
--sn-stylekit-info-color: #086dd6;
@@ -20,14 +20,14 @@
--sn-stylekit-background-color: #ffffff;
// For borders inside background-color
--sn-stylekit-border-color: #dfe1e4;
--sn-stylekit-foreground-color: #000000;
--sn-stylekit-foreground-color: #19191C;
// Colors for layers placed on top of non-prefixed background, border, and foreground
--sn-stylekit-contrast-background-color: #f6f6f6;
--sn-stylekit-contrast-background-color: rgba(244, 245, 247, 0.72);
--sn-stylekit-contrast-foreground-color: #2e2e2e;
--sn-stylekit-contrast-border-color: #e3e3e3; // For borders inside contrast-background-color
// Alternative set of background and contrast options
--sn-stylekit-secondary-background-color: #f6f6f6;
--sn-stylekit-secondary-background-color: #EEEFF1;
--sn-stylekit-secondary-foreground-color: #2e2e2e;
--sn-stylekit-secondary-border-color: #e3e3e3;

4
packages/web/src/javascripts/Components/AccountMenu/AdvancedOptions.tsx
View File

@@ -126,7 +126,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
{isPrivateWorkspace && (
<>
<DecoratedInput
className={'mb-2'}
className={{ container: 'mb-2' }}
left={[<Icon type="server" className="text-neutral" />]}
type="text"
placeholder="Userphrase"
@@ -135,7 +135,7 @@ const AdvancedOptions: FunctionComponent<Props> = ({
disabled={disabled}
/>
<DecoratedInput
className={'mb-2'}
className={{ container: 'mb-2' }}
left={[<Icon type="folder" className="text-neutral" />]}
type="text"
placeholder="Name"

2
packages/web/src/javascripts/Components/AccountMenu/ConfirmPassword.tsx
View File

@@ -119,7 +119,7 @@ const ConfirmPassword: FunctionComponent<Props> = ({
</div>
<form onSubmit={handleConfirmFormSubmit} className="mb-1 px-3">
<DecoratedPasswordInput
className="mb-2"
className={{ container: 'mb-2' }}
disabled={isRegistering}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}

4
packages/web/src/javascripts/Components/AccountMenu/CreateAccount.tsx
View File

@@ -114,7 +114,7 @@ const CreateAccount: FunctionComponent<Props> = ({
</div>
<form onSubmit={handleRegisterFormSubmit} className="mb-1 px-3">
<DecoratedInput
className="mb-2"
className={{ container: 'mb-2' }}
disabled={isPrivateWorkspace}
left={[<Icon type="email" className="text-neutral" />]}
onChange={handleEmailChange}
@@ -125,7 +125,7 @@ const CreateAccount: FunctionComponent<Props> = ({
value={email}
/>
<DecoratedPasswordInput
className="mb-2"
className={{ container: 'mb-2' }}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}
onKeyDown={handleKeyDown}

4
packages/web/src/javascripts/Components/AccountMenu/SignIn.tsx
View File

@@ -153,7 +153,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
</div>
<div className="mb-1 px-3">
<DecoratedInput
className={`mb-2 ${error ? 'border-danger' : null}`}
className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
left={[<Icon type="email" className="text-neutral" />]}
type="email"
placeholder="Email"
@@ -165,7 +165,7 @@ const SignInPane: FunctionComponent<Props> = ({ application, viewControllerManag
ref={emailInputRef}
/>
<DecoratedPasswordInput
className={`mb-2 ${error ? 'border-danger' : null}`}
className={{ container: `mb-2 ${error ? 'border-danger' : null}` }}
disabled={isSigningIn}
left={[<Icon type="password" className="text-neutral" />]}
onChange={handlePasswordChange}

2
packages/web/src/javascripts/Components/Bubble/Bubble.tsx
View File

@@ -8,7 +8,7 @@ type Props = {
const styles = {
base: 'active:border-info active:bg-info active:text-neutral-contrast flex-grow cursor-pointer rounded-full border border-solid px-2 py-1 text-center transition',
unselected: 'text-neutral border-secondary-border',
unselected: 'text-neutral border-secondary-border bg-default',
selected: 'text-neutral-contrast border-info bg-info',
}

4
packages/web/src/javascripts/Components/ChallengeModal/ChallengePrompt.tsx
View File

@@ -65,14 +65,14 @@ const ChallengeModalPrompt: FunctionComponent<Props> = ({ prompt, values, index,
<DecoratedPasswordInput
ref={inputRef}
placeholder={prompt.placeholder}
className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
onChange={(value) => onValueChange(value, prompt)}
/>
) : (
<DecoratedInput
ref={inputRef}
placeholder={prompt.placeholder}
className={`w-full max-w-76 ${isInvalid ? 'border-danger' : ''}`}
className={{ container: `w-full max-w-76 ${isInvalid ? 'border-danger' : ''}` }}
onChange={(value) => onValueChange(value, prompt)}
/>
)}

2
packages/web/src/javascripts/Components/Icon/Icon.tsx
View File

@@ -56,6 +56,7 @@ import {
MenuArrowRightIcon,
MenuCloseIcon,
MoreIcon,
NotesFilledIcon,
NotesIcon,
PasswordIcon,
PencilFilledIcon,
@@ -123,6 +124,7 @@ export const ICONS = {
'menu-arrow-down': MenuArrowDownIcon,
'menu-arrow-right': MenuArrowRightIcon,
'menu-close': MenuCloseIcon,
'notes-filled': NotesFilledIcon,
'pencil-filled': PencilFilledIcon,
'pencil-off': PencilOffIcon,
'pin-filled': PinFilledIcon,

8
packages/web/src/javascripts/Components/Input/DecoratedInput.tsx
View File

@@ -3,7 +3,7 @@ import { DecoratedInputProps } from './DecoratedInputProps'
const getClassNames = (hasLeftDecorations: boolean, hasRightDecorations: boolean, roundedFull?: boolean) => {
return {
container: `position-relative flex items-stretch overflow-hidden border border-solid border-border bg-default text-sm focus-within:ring-2 focus-within:ring-info ${
container: `position-relative flex items-stretch overflow-hidden border border-solid border-passive-3 bg-default text-sm focus-within:ring-2 focus-within:ring-info bg-clip-padding ${
!hasLeftDecorations && !hasRightDecorations ? 'px-2 py-1.5' : ''
} ${roundedFull ? 'rounded-full' : 'rounded'}`,
input: `focus:ring-none w-full border-0 bg-transparent text-text focus:shadow-none focus:outline-none ${
@@ -20,7 +20,7 @@ const DecoratedInput = forwardRef(
(
{
autocomplete = false,
className = '',
className,
disabled = false,
id,
left,
@@ -43,7 +43,7 @@ const DecoratedInput = forwardRef(
const classNames = getClassNames(hasLeftDecorations, hasRightDecorations, roundedFull)
return (
<div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className}`}>
<div className={`${classNames.container} ${disabled ? classNames.disabled : ''} ${className?.container}`}>
{left && (
<div className="flex items-center px-2 py-1.5">
{left.map((leftChild, index) => (
@@ -54,7 +54,7 @@ const DecoratedInput = forwardRef(
<input
autoComplete={autocomplete ? 'on' : 'off'}
className={`${classNames.input} ${disabled ? classNames.disabled : ''}`}
className={`${classNames.input} ${disabled ? classNames.disabled : ''} ${className?.input}`}
data-lpignore={type !== 'password' ? true : false}
disabled={disabled}
id={id}

5
packages/web/src/javascripts/Components/Input/DecoratedInputProps.ts
View File

@@ -2,7 +2,10 @@ import { FocusEventHandler, KeyboardEventHandler, ReactNode } from 'react'
export type DecoratedInputProps = {
autocomplete?: boolean
className?: string
className?: {
container?: string
input?: string
}
disabled?: boolean
id?: string
left?: ReactNode[]

2
packages/web/src/javascripts/Components/NoAccountWarning/NoAccountWarningContent.tsx
View File

@@ -24,7 +24,7 @@ const NoAccountWarningContent = ({ accountMenuController, noAccountWarningContro
}, [noAccountWarningController])
return (
<div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow">
<div className="mt-4 grid grid-cols-1 rounded-md p-4 shadow-main">
<h1 className="sk-h3 m-0 text-sm font-semibold">Data not backed up</h1>
<p className="col-start-1 col-end-3 m-0 mt-1 text-sm">Sign in or register to back up your notes.</p>
<Button primary small className="col-start-1 col-end-3 mt-3 justify-self-start" onClick={showAccountMenu}>

2
packages/web/src/javascripts/Components/NoteTags/NoteTag.tsx
View File

@@ -116,7 +116,7 @@ const NoteTag = ({ viewControllerManager, tag }: Props) => {
return (
<button
ref={tagRef}
className="hover:bg-secondary-contrast focus:bg-secondary-contrast mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-contrast py-2 pl-1 pr-2 text-xs text-text"
className="mt-2 mr-2 flex h-6 cursor-pointer items-center rounded border-0 bg-passive-4-opacity-variant py-2 pl-1 pr-2 text-xs text-text hover:bg-contrast focus:bg-contrast"
onClick={onTagClick}
onKeyDown={onKeyDown}
onFocus={onFocus}

2
packages/web/src/javascripts/Components/Preferences/Panes/Account/OfflineSubscription.tsx
View File

@@ -89,7 +89,7 @@ const OfflineSubscription: FunctionComponent<Props> = ({ application }) => {
placeholder={'Offline Subscription Code'}
value={activationCode}
disabled={isSuccessfullyActivated}
className={'mb-3'}
className={{ container: 'mb-3' }}
/>
)}
</div>

2
packages/web/src/javascripts/Components/Preferences/Panes/Security/PasscodeLock.tsx
View File

@@ -205,7 +205,7 @@ const PasscodeLock = ({ application, viewControllerManager }: Props) => {
placeholder="Passcode"
/>
<DecoratedPasswordInput
className="mt-2"
className={{ container: 'mt-2' }}
type="password"
value={passcodeConfirmation ? passcodeConfirmation : ''}
onChange={handleConfirmPasscodeChange}

2
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/ScanQRCode.tsx
View File

@@ -45,7 +45,7 @@ const ScanQRCode: FunctionComponent<Props> = ({ activation: act }) => {
</div>
<div className="min-h-2" />
<DecoratedInput
className="w-92 ml-4"
className={{ container: 'w-92 ml-4' }}
disabled={true}
value={act.secretKey}
right={[<CopyButton copyValue={act.secretKey} />]}

4
packages/web/src/javascripts/Components/Preferences/Panes/TwoFactorAuth/Verification.tsx
View File

@@ -28,7 +28,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
Enter your <b>secret key</b>:
</div>
<div className="min-w-2" />
<DecoratedInput className={`w-92 ${secretKeyClass}`} onChange={act.setInputSecretKey} />
<DecoratedInput className={{ container: `w-92 ${secretKeyClass}` }} onChange={act.setInputSecretKey} />
</div>
<div className="flex flex-row items-center">
<Bullet />
@@ -37,7 +37,7 @@ const Verification: FunctionComponent<Props> = ({ activation: act }) => {
Verify the <b>authentication code</b> generated by your authenticator app:
</div>
<div className="min-w-2" />
<DecoratedInput className={`w-30 ${authTokenClass}`} onChange={act.setInputOtpToken} />
<DecoratedInput className={{ container: `w-30 ${authTokenClass}` }} onChange={act.setInputOtpToken} />
</div>
</div>
</ModalDialogDescription>

5
packages/web/src/javascripts/Components/SearchBar/SearchBar.tsx
View File

@@ -48,7 +48,10 @@ const SearchBar = ({ itemListController, searchOptionsController }: Props) => {
<DecoratedInput
autocomplete={false}
title="Searches notes and files in the currently selected tag"
className="placeholder:color-passive-0 rounded-full bg-contrast bg-clip-padding px-1"
className={{
container: 'px-1',
input: 'placeholder:text-passive-0',
}}
placeholder="Search"
value={noteFilterText}
ref={searchInputRef}

10
packages/web/src/javascripts/Components/Tags/SmartViewsListItem.tsx
View File

@@ -23,12 +23,12 @@ type Props = {
const PADDING_BASE_PX = 14
const PADDING_PER_LEVEL_PX = 21
const smartViewIconType = (view: SmartView): IconType => {
const smartViewIconType = (view: SmartView, isSelected: boolean): IconType => {
if (view.uuid === SystemViewId.AllNotes) {
return 'notes'
return isSelected ? 'notes-filled' : 'notes'
}
if (view.uuid === SystemViewId.Files) {
return 'file'
return 'folder'
}
if (view.uuid === SystemViewId.ArchivedNotes) {
return 'archive'
@@ -101,7 +101,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
}, [tagsState, view])
const isFaded = false
const iconType = smartViewIconType(view)
const iconType = smartViewIconType(view, isSelected)
return (
<>
@@ -113,7 +113,7 @@ const SmartViewsListItem: FunctionComponent<Props> = ({ view, tagsState }) => {
}}
>
<div className="tag-info">
<div className={'tag-icon mr-1'}>
<div className={'tag-icon mr-2'}>
<Icon type={iconType} className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
</div>
<input

2
packages/web/src/javascripts/Components/Tags/TagsListItem.tsx
View File

@@ -216,7 +216,7 @@ export const TagsListItem: FunctionComponent<Props> = observer(({ tag, features,
</a>
</div>
)}
<div className={'tag-icon draggable mr-1'} ref={dragRef}>
<div className={'tag-icon draggable mr-2'} ref={dragRef}>
<Icon type="hashtag" className={`${isSelected ? 'text-info' : 'text-neutral'}`} />
</div>
<input

7
packages/web/src/stylesheets/_navigation.scss
View File

@@ -136,7 +136,7 @@ $content-horizontal-padding: 16px;
.count {
padding-right: 4px;
padding-top: 1px;
font-weight: bold;
font-weight: 400;
color: var(--navigation-item-count-color);
min-width: 15px;
text-align: right;
@@ -174,6 +174,11 @@ $content-horizontal-padding: 16px;
.title {
cursor: text;
}
.count {
--navigation-item-count-color: var(--sn-stylekit-foreground-color);
font-weight: 700;
}
}
}

2
packages/web/src/stylesheets/_theme.scss
View File

@@ -32,7 +32,7 @@
--navigation-section-title-color: var(--sn-stylekit-secondary-foreground-color);
--navigation-item-text-color: var(--sn-stylekit-secondary-foreground-color);
--navigation-item-count-color: var(--sn-stylekit-neutral-color);
--navigation-item-selected-background-color: var(--sn-stylekit-secondary-contrast-background-color);
--navigation-item-selected-background-color: var(--sn-stylekit-background-color);
--preferences-navigation-icon-color: var(--sn-stylekit-neutral-color);
--preferences-navigation-selected-background-color: var(--sn-stylekit-info-backdrop-color);

1
packages/web/tailwind.config.js
View File

@@ -85,6 +85,7 @@ module.exports = {
default: 'var(--sn-stylekit-background-color)',
foreground: 'var(--sn-stylekit-foreground-color)',
contrast: 'var(--sn-stylekit-contrast-background-color)',
'secondary-contrast': 'var(--sn-stylekit-secondary-contrast-border-color)',
text: 'var(--sn-stylekit-contrast-foreground-color)',
border: 'var(--sn-stylekit-border-color)',
'secondary-border': 'var(--sn-stylekit-secondary-border-color)',