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

fix: sass deprecation warning (#1100)

Browse Source
This commit is contained in:
Aman Harwara
2022-06-14 13:21:11 +05:30
committed by GitHub
parent 93606da126
commit fd115bc113
35 changed files with 118 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/components/src/org.standardnotes.advanced-checklist/public/index.html
View File

@@ -1,20 +1,21 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#000000" /> <meta
<meta name="description" name="description"
content="A great way to manage short-term and long-term to-do's. You can mark tasks as completed, change their order, and edit the text naturally in place." /> content="A great way to manage short-term and long-term to-do's. You can mark tasks as completed, change their order, and edit the text naturally in place."
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> />
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@@ -23,13 +24,13 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Advanced Checklist</title> <title>Advanced Checklist</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div class="sn-component" id="root"></div> <div class="sn-component" id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
If you open it directly in the browser, you will see an empty page. If you open it directly in the browser, you will see an empty page.
@@ -39,6 +40,5 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>

2
packages/components/src/org.standardnotes.advanced-checklist/src/app/hooks.ts
View File

@@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react' import React, { useEffect, useState } from 'react'
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux' import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux'
import type { RootState, AppDispatch } from './store' import type { AppDispatch, RootState } from './store'
export const useAppDispatch = () => useDispatch<AppDispatch>() export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

2
packages/components/src/org.standardnotes.advanced-checklist/src/app/store.ts
View File

@@ -1,7 +1,7 @@
import { configureStore } from '@reduxjs/toolkit' import { configureStore } from '@reduxjs/toolkit'
import tasksReducer from '../features/tasks/tasks-slice'
import settingsReducer from '../features/settings/settings-slice' import settingsReducer from '../features/settings/settings-slice'
import tasksReducer from '../features/tasks/tasks-slice'
import listenerMiddleware from './listenerMiddleware' import listenerMiddleware from './listenerMiddleware'
export const store = configureStore({ export const store = configureStore({

2
packages/components/src/org.standardnotes.advanced-checklist/src/common/components/ConfirmDialog.tsx
View File

@@ -1,7 +1,7 @@
import '@reach/dialog/styles.css' import '@reach/dialog/styles.css'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import React, { useRef } from 'react' import React, { useRef } from 'react'
import { AlertDialog, AlertDialogLabel, AlertDialogDescription } from '@reach/alert-dialog'
import { sanitizeHtmlString } from '@standardnotes/utils' import { sanitizeHtmlString } from '@standardnotes/utils'

6
packages/components/src/org.standardnotes.advanced-checklist/src/common/components/icons/index.ts
View File

@@ -1,9 +1,9 @@
export { AddIcon } from './AddIcon'
export { ChevronDownIcon } from './ChevronDownIcon' export { ChevronDownIcon } from './ChevronDownIcon'
export { ChevronUpIcon } from './ChevronUpIcon' export { ChevronUpIcon } from './ChevronUpIcon'
export { DottedCircleIcon } from './DottedCircleIcon'
export { MergeIcon } from './MergeIcon' export { MergeIcon } from './MergeIcon'
export { MoreIcon } from './MoreIcon' export { MoreIcon } from './MoreIcon'
export { RenameIcon } from './RenameIcon'
export { ReorderIcon } from './ReorderIcon' export { ReorderIcon } from './ReorderIcon'
export { TrashIcon } from './TrashIcon' export { TrashIcon } from './TrashIcon'
export { RenameIcon } from './RenameIcon'
export { AddIcon } from './AddIcon'
export { DottedCircleIcon } from './DottedCircleIcon'

4
packages/components/src/org.standardnotes.advanced-checklist/src/common/components/index.ts
View File

@@ -1,10 +1,10 @@
export * from './TextInput'
export * from './CheckBoxInput' export * from './CheckBoxInput'
export * from './CircularProgressBar' export * from './CircularProgressBar'
export * from './ConfirmDialog'
export * from './GenericInlineText' export * from './GenericInlineText'
export * from './MainTitle' export * from './MainTitle'
export * from './RoundButton' export * from './RoundButton'
export * from './SubTitle' export * from './SubTitle'
export * from './TextAreaInput' export * from './TextAreaInput'
export * from './TextInput'
export * from './WideButton' export * from './WideButton'
export * from './ConfirmDialog'

6
packages/components/src/org.standardnotes.advanced-checklist/src/common/utils.test.ts
View File

@@ -1,13 +1,13 @@
import { GroupPayload, TaskPayload } from '../features/tasks/tasks-slice' import { GroupPayload, TaskPayload } from '../features/tasks/tasks-slice'
import { import {
arrayMoveMutable,
arrayMoveImmutable, arrayMoveImmutable,
arrayMoveMutable,
getPercentage, getPercentage,
groupTasksByCompletedStatus,
truncateText,
getPlainPreview, getPlainPreview,
getTaskArrayFromGroupedTasks, getTaskArrayFromGroupedTasks,
groupTasksByCompletedStatus,
parseMarkdownTasks, parseMarkdownTasks,
truncateText,
} from './utils' } from './utils'
describe('arrayMoveMutable', () => { describe('arrayMoveMutable', () => {

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/settings/settings-slice.test.ts
View File

@@ -1,5 +1,5 @@
import reducer, { setCanEdit, setIsRunningOnMobile, setSpellCheckerEnabled } from './settings-slice'
import type { SettingsState } from './settings-slice' import type { SettingsState } from './settings-slice'
import reducer, { setCanEdit, setIsRunningOnMobile, setSpellCheckerEnabled } from './settings-slice'
it('should return the initial state', () => { it('should return the initial state', () => {
return expect( return expect(

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/CompletedTasksActions.tsx
View File

@@ -4,7 +4,7 @@ import styled from 'styled-components'
import { useAppDispatch, useAppSelector } from '../../app/hooks' import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { ConfirmDialog } from '../../common/components' import { ConfirmDialog } from '../../common/components'
import { openAllCompleted, deleteAllCompleted } from './tasks-slice' import { deleteAllCompleted, openAllCompleted } from './tasks-slice'
const ActionButton = styled.button` const ActionButton = styled.button`
background-color: var(--sn-stylekit-contrast-background-color); background-color: var(--sn-stylekit-contrast-background-color);

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/CreateGroup.test.tsx
View File

@@ -2,8 +2,8 @@ import { fireEvent, screen } from '@testing-library/react'
import { RootState } from '../../app/store' import { RootState } from '../../app/store'
import { testRender } from '../../testUtils' import { testRender } from '../../testUtils'
import { tasksGroupAdded } from './tasks-slice'
import CreateGroup from './CreateGroup' import CreateGroup from './CreateGroup'
import { tasksGroupAdded } from './tasks-slice'
const defaultTasksState = { const defaultTasksState = {
tasks: { tasks: {

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/CreateTask.tsx
View File

@@ -1,6 +1,6 @@
import { ChangeEvent, createRef, KeyboardEvent, useState } from 'react' import { ChangeEvent, createRef, KeyboardEvent, useState } from 'react'
import { v4 as uuidv4 } from 'uuid'
import styled from 'styled-components' import styled from 'styled-components'
import { v4 as uuidv4 } from 'uuid'
import { useAppDispatch, useAppSelector } from '../../app/hooks' import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { GroupPayload, taskAdded, tasksGroupDraft } from './tasks-slice' import { GroupPayload, taskAdded, tasksGroupDraft } from './tasks-slice'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/MergeTaskGroups.test.tsx
View File

@@ -1,4 +1,4 @@
import { screen, fireEvent } from '@testing-library/react' import { fireEvent, screen } from '@testing-library/react'
import { RootState } from '../../app/store' import { RootState } from '../../app/store'
import { testRender } from '../../testUtils' import { testRender } from '../../testUtils'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/MergeTaskGroups.tsx
View File

@@ -1,7 +1,7 @@
import '@reach/dialog/styles.css' import '@reach/dialog/styles.css'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import React, { useRef, useState } from 'react' import React, { useRef, useState } from 'react'
import { AlertDialog, AlertDialogLabel, AlertDialogDescription } from '@reach/alert-dialog'
import { useAppDispatch, useAppSelector } from '../../app/hooks' import { useAppDispatch, useAppSelector } from '../../app/hooks'
import { tasksGroupMerged } from './tasks-slice' import { tasksGroupMerged } from './tasks-slice'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/MigrateLegacyContent.tsx
View File

@@ -1,7 +1,7 @@
import '@reach/dialog/styles.css' import '@reach/dialog/styles.css'
import React, { useRef } from 'react'
import { AlertDialog, AlertDialogLabel } from '@reach/alert-dialog' import { AlertDialog, AlertDialogLabel } from '@reach/alert-dialog'
import React, { useRef } from 'react'
import { useAppDispatch } from '../../app/hooks' import { useAppDispatch } from '../../app/hooks'
import { tasksLegacyContentMigrated } from './tasks-slice' import { tasksLegacyContentMigrated } from './tasks-slice'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/RenameTaskGroups.test.tsx
View File

@@ -1,4 +1,4 @@
import { screen, fireEvent } from '@testing-library/react' import { fireEvent, screen } from '@testing-library/react'
import { RootState } from '../../app/store' import { RootState } from '../../app/store'
import { testRender } from '../../testUtils' import { testRender } from '../../testUtils'

4
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/RenameTaskGroups.tsx
View File

@@ -1,11 +1,11 @@
import '@reach/dialog/styles.css' import '@reach/dialog/styles.css'
import { AlertDialog, AlertDialogDescription, AlertDialogLabel } from '@reach/alert-dialog'
import React, { KeyboardEvent, useRef, useState } from 'react' import React, { KeyboardEvent, useRef, useState } from 'react'
import { AlertDialog, AlertDialogLabel, AlertDialogDescription } from '@reach/alert-dialog'
import { useAppDispatch } from '../../app/hooks' import { useAppDispatch } from '../../app/hooks'
import { tasksGroupRenamed } from './tasks-slice'
import { TextInput } from '../../common/components' import { TextInput } from '../../common/components'
import { tasksGroupRenamed } from './tasks-slice'
type RenameTaskGroupsProps = { type RenameTaskGroupsProps = {
groupName: string groupName: string

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskGroup.test.tsx
View File

@@ -1,4 +1,4 @@
import { screen, fireEvent } from '@testing-library/react' import { fireEvent, screen } from '@testing-library/react'
import { RootState } from '../../app/store' import { RootState } from '../../app/store'
import { testRender } from '../../testUtils' import { testRender } from '../../testUtils'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskGroup.tsx
View File

@@ -11,7 +11,7 @@ import TaskItemList from './TaskItemList'
import TaskGroupOptions from './TaskGroupOptions' import TaskGroupOptions from './TaskGroupOptions'
import { CircularProgressBar, GenericInlineText, MainTitle, RoundButton } from '../../common/components' import { CircularProgressBar, GenericInlineText, MainTitle, RoundButton } from '../../common/components'
import { ChevronDownIcon, ReorderIcon, ChevronUpIcon } from '../../common/components/icons' import { ChevronDownIcon, ChevronUpIcon, ReorderIcon } from '../../common/components/icons'
const TaskGroupContainer = styled.div<{ isLast?: boolean }>` const TaskGroupContainer = styled.div<{ isLast?: boolean }>`
background-color: var(--sn-stylekit-background-color); background-color: var(--sn-stylekit-background-color);

6
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskGroupOptions.tsx
View File

@@ -1,11 +1,11 @@
import { useState } from 'react' import { Menu, MenuButton, MenuItem, MenuList } from '@reach/menu-button'
import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button'
import VisuallyHidden from '@reach/visually-hidden' import VisuallyHidden from '@reach/visually-hidden'
import { useState } from 'react'
import { useAppDispatch } from '../../app/hooks' import { useAppDispatch } from '../../app/hooks'
import { tasksGroupDeleted } from './tasks-slice' import { tasksGroupDeleted } from './tasks-slice'
import { MoreIcon, MergeIcon, TrashIcon, RenameIcon } from '../../common/components/icons' import { MergeIcon, MoreIcon, RenameIcon, TrashIcon } from '../../common/components/icons'
import { ConfirmDialog } from '../../common/components' import { ConfirmDialog } from '../../common/components'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskItem.test.tsx
View File

@@ -1,8 +1,8 @@
import { fireEvent, screen, waitFor } from '@testing-library/react' import { fireEvent, screen, waitFor } from '@testing-library/react'
import { taskDeleted, taskModified, TaskPayload, taskToggled } from './tasks-slice'
import { testRender } from '../../testUtils' import { testRender } from '../../testUtils'
import TaskItem from './TaskItem' import TaskItem from './TaskItem'
import { taskDeleted, taskModified, TaskPayload, taskToggled } from './tasks-slice'
const groupName = 'default group' const groupName = 'default group'
const task: TaskPayload = { const task: TaskPayload = {

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskItem.tsx
View File

@@ -3,8 +3,8 @@ import './TaskItem.scss'
import { ChangeEvent, createRef, KeyboardEvent, useEffect, useState } from 'react' import { ChangeEvent, createRef, KeyboardEvent, useEffect, useState } from 'react'
import styled from 'styled-components' import styled from 'styled-components'
import { taskDeleted, taskModified, TaskPayload, taskToggled } from './tasks-slice'
import { useAppDispatch, useAppSelector, useDidMount } from '../../app/hooks' import { useAppDispatch, useAppSelector, useDidMount } from '../../app/hooks'
import { taskDeleted, taskModified, TaskPayload, taskToggled } from './tasks-slice'
import { CheckBoxInput, TextAreaInput } from '../../common/components' import { CheckBoxInput, TextAreaInput } from '../../common/components'

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TaskItemList.tsx
View File

@@ -6,8 +6,8 @@ import { useAppDispatch } from '../../app/hooks'
import { groupTasksByCompletedStatus } from '../../common/utils' import { groupTasksByCompletedStatus } from '../../common/utils'
import { GroupPayload, tasksReordered } from './tasks-slice' import { GroupPayload, tasksReordered } from './tasks-slice'
import TasksContainer from './TasksContainer'
import CompletedTasksActions from './CompletedTasksActions' import CompletedTasksActions from './CompletedTasksActions'
import TasksContainer from './TasksContainer'
const Container = styled.div` const Container = styled.div`
position: relative; position: relative;

2
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/TasksContainer.tsx
View File

@@ -2,8 +2,8 @@ import './TasksContainer.scss'
import React from 'react' import React from 'react'
import { Draggable, DraggingStyle, Droppable, NotDraggingStyle } from 'react-beautiful-dnd' import { Draggable, DraggingStyle, Droppable, NotDraggingStyle } from 'react-beautiful-dnd'
import styled from 'styled-components'
import { CSSTransition, TransitionGroup } from 'react-transition-group' import { CSSTransition, TransitionGroup } from 'react-transition-group'
import styled from 'styled-components'
import { useAppSelector } from '../../app/hooks' import { useAppSelector } from '../../app/hooks'
import { SubTitle } from '../../common/components' import { SubTitle } from '../../common/components'

16
packages/components/src/org.standardnotes.advanced-checklist/src/features/tasks/tasks-slice.test.ts
View File

@@ -1,22 +1,22 @@
import type { TasksState } from './tasks-slice'
import reducer, { import reducer, {
openAllCompleted,
deleteAllCompleted, deleteAllCompleted,
openAllCompleted,
taskAdded, taskAdded,
taskDeleted, taskDeleted,
taskModified, taskModified,
tasksLoaded,
taskToggled,
tasksGroupAdded, tasksGroupAdded,
tasksReordered,
tasksGroupReordered,
tasksGroupDeleted,
tasksGroupMerged,
tasksGroupCollapsed, tasksGroupCollapsed,
tasksGroupDeleted,
tasksGroupDraft, tasksGroupDraft,
tasksGroupLastActive, tasksGroupLastActive,
tasksGroupMerged,
tasksGroupRenamed, tasksGroupRenamed,
tasksGroupReordered,
tasksLoaded,
tasksReordered,
taskToggled,
} from './tasks-slice' } from './tasks-slice'
import type { TasksState } from './tasks-slice'
it('should return the initial state', () => { it('should return the initial state', () => {
return expect( return expect(

10
packages/components/src/org.standardnotes.advanced-checklist/src/index.tsx
View File

@@ -1,24 +1,24 @@
import './stylesheets/main.scss' import './stylesheets/main.scss'
import EditorKit, { EditorKitDelegate } from '@standardnotes/editor-kit'
import React, { useCallback, useEffect, useRef } from 'react' import React, { useCallback, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom' import ReactDOM from 'react-dom'
import { renderToString } from 'react-dom/server' import { renderToString } from 'react-dom/server'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import EditorKit, { EditorKitDelegate } from '@standardnotes/editor-kit'
import styled from 'styled-components' import styled from 'styled-components'
import { store } from './app/store'
import { useAppDispatch, useAppSelector } from './app/hooks' import { useAppDispatch, useAppSelector } from './app/hooks'
import CreateGroup from './features/tasks/CreateGroup' import { store } from './app/store'
import { setCanEdit, setIsRunningOnMobile, setSpellCheckerEnabled } from './features/settings/settings-slice' import { setCanEdit, setIsRunningOnMobile, setSpellCheckerEnabled } from './features/settings/settings-slice'
import { tasksLoaded } from './features/tasks/tasks-slice' import CreateGroup from './features/tasks/CreateGroup'
import InvalidContentError from './features/tasks/InvalidContentError' import InvalidContentError from './features/tasks/InvalidContentError'
import MigrateLegacyContent from './features/tasks/MigrateLegacyContent' import MigrateLegacyContent from './features/tasks/MigrateLegacyContent'
import NotePreview from './features/tasks/NotePreview' import NotePreview from './features/tasks/NotePreview'
import TaskGroupList from './features/tasks/TaskGroupList' import TaskGroupList from './features/tasks/TaskGroupList'
import { tasksLoaded } from './features/tasks/tasks-slice'
import { getPlainPreview } from './common/utils'
import { CheckBoxElementsDefs } from './common/components/svg' import { CheckBoxElementsDefs } from './common/components/svg'
import { getPlainPreview } from './common/utils'
const MainContainer = styled.div` const MainContainer = styled.div`
margin: 16px; margin: 16px;

2
packages/components/src/org.standardnotes.advanced-checklist/src/testUtils.tsx
View File

@@ -1,6 +1,6 @@
import { render as rtlRender, RenderOptions } from '@testing-library/react'
import React from 'react' import React from 'react'
import { Provider } from 'react-redux' import { Provider } from 'react-redux'
import { render as rtlRender, RenderOptions } from '@testing-library/react'
import configureStore from 'redux-mock-store' import configureStore from 'redux-mock-store'
import { RootState } from './app/store' import { RootState } from './app/store'

34
packages/components/src/org.standardnotes.markdown-visual-editor/public/index.html
View File

@@ -1,19 +1,18 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<head> <meta charset="utf-8" />
<meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#000000" /> <meta name="description" content="A lightweight WYSIWYG markdown editor, derivated from Milkdown editor" />
<meta name="description" content="A lightweight WYSIWYG markdown editor, derivated from Milkdown editor" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <!--
<!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML. Only files inside the `public` folder can be referenced from the HTML.
@@ -22,12 +21,11 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>Markdown Visual</title> <title>Markdown Visual</title>
</head> </head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html> </html>

15
packages/components/src/org.standardnotes.markdown-visual-editor/tsconfig.json
View File

@@ -1,11 +1,7 @@
{ {
"compilerOptions": { "compilerOptions": {
"target": "es6", "target": "es6",
"lib": [ "lib": ["dom", "dom.iterable", "esnext"],
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true, "allowJs": true,
"skipLibCheck": true, "skipLibCheck": true,
"esModuleInterop": true, "esModuleInterop": true,
@@ -20,11 +16,6 @@
"noEmit": true, "noEmit": true,
"jsx": "react-jsx" "jsx": "react-jsx"
}, },
"include": [ "include": ["src"],
"src" "exclude": ["node_modules", "types"]
],
"exclude": [
"node_modules",
"types"
]
} }

9
packages/components/src/org.standardnotes.theme-autobiography/src/main.scss
View File

@@ -1,9 +1,9 @@
:root { :root {
--background-1: #EDE4DA; --background-1: #ede4da;
--background-2: #e8d9c8; --background-2: #e8d9c8;
--foreground-color: #5C3F27; --foreground-color: #5c3f27;
--border-color: #d9c6b1; --border-color: #d9c6b1;
--highlight-color: #D68420; --highlight-color: #d68420;
--highlight-contrast: #e3ae74; --highlight-contrast: #e3ae74;
--sn-stylekit-info-color: #a37337; --sn-stylekit-info-color: #a37337;
@@ -58,7 +58,8 @@
--sn-stylekit-passive-color-5: #e9d9c7; --sn-stylekit-passive-color-5: #e9d9c7;
} }
#notes-column .note.selected, .notes .note.selected { #notes-column .note.selected,
.notes .note.selected {
background-color: #e9d9c7; background-color: #e9d9c7;
color: var(--sn-stylekit-contrast-foreground-color); color: var(--sn-stylekit-contrast-foreground-color);
} }

5
packages/components/src/org.standardnotes.theme-focus/src/main.scss
View File

@@ -1,5 +1,4 @@
:root { :root {
--foreground-color: #eeeeee; --foreground-color: #eeeeee;
--background-color: #0f1011; --background-color: #0f1011;
--highlight-color: #a464c2; --highlight-color: #a464c2;
@@ -21,13 +20,13 @@
--sn-stylekit-neutral-color: #7c7c7c; --sn-stylekit-neutral-color: #7c7c7c;
--sn-stylekit-neutral-contrast-color: #ffffff; --sn-stylekit-neutral-contrast-color: #ffffff;
--sn-stylekit-success-color: #2B9612; --sn-stylekit-success-color: #2b9612;
--sn-stylekit-success-contrast-color: #ffffff; --sn-stylekit-success-contrast-color: #ffffff;
--sn-stylekit-warning-color: #f6a200; --sn-stylekit-warning-color: #f6a200;
--sn-stylekit-warning-contrast-color: #ffffff; --sn-stylekit-warning-contrast-color: #ffffff;
--sn-stylekit-danger-color: #F80324; --sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: #ffffff; --sn-stylekit-danger-contrast-color: #ffffff;
--sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);

5
packages/components/src/org.standardnotes.theme-futura/src/main.scss
View File

@@ -1,5 +1,4 @@
:root { :root {
--foreground-color: #a9aabe; --foreground-color: #a9aabe;
--background-color: #20202b; --background-color: #20202b;
--highlight-color: #fca429; --highlight-color: #fca429;
@@ -14,13 +13,13 @@
--sn-stylekit-neutral-color: #7c7c7c; --sn-stylekit-neutral-color: #7c7c7c;
--sn-stylekit-neutral-contrast-color: #ffffff; --sn-stylekit-neutral-contrast-color: #ffffff;
--sn-stylekit-success-color: #2B9612; --sn-stylekit-success-color: #2b9612;
--sn-stylekit-success-contrast-color: #ffffff; --sn-stylekit-success-contrast-color: #ffffff;
--sn-stylekit-warning-color: #f6a200; --sn-stylekit-warning-color: #f6a200;
--sn-stylekit-warning-contrast-color: #ffffff; --sn-stylekit-warning-contrast-color: #ffffff;
--sn-stylekit-danger-color: #F80324; --sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: #ffffff; --sn-stylekit-danger-contrast-color: #ffffff;
--sn-stylekit-editor-background-color: var(--sn-stylekit-background-color); --sn-stylekit-editor-background-color: var(--sn-stylekit-background-color);

6
packages/components/src/org.standardnotes.theme-midnight/src/main.scss
View File

@@ -5,19 +5,19 @@
--border-color: #13131a; --border-color: #13131a;
--ui-text-color: #d8d8d8; --ui-text-color: #d8d8d8;
--sn-stylekit-info-color: #4CA3FF; --sn-stylekit-info-color: #4ca3ff;
--sn-stylekit-info-contrast-color: white; --sn-stylekit-info-contrast-color: white;
--sn-stylekit-neutral-color: #7c7c7c; --sn-stylekit-neutral-color: #7c7c7c;
--sn-stylekit-neutral-contrast-color: white; --sn-stylekit-neutral-contrast-color: white;
--sn-stylekit-success-color: #01BE79; --sn-stylekit-success-color: #01be79;
--sn-stylekit-success-contrast-color: white; --sn-stylekit-success-contrast-color: white;
--sn-stylekit-warning-color: #f6a200; --sn-stylekit-warning-color: #f6a200;
--sn-stylekit-warning-contrast-color: white; --sn-stylekit-warning-contrast-color: white;
--sn-stylekit-danger-color: #F80324; --sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: white; --sn-stylekit-danger-contrast-color: white;
--sn-desktop-titlebar-bg-color: var(--primary-bg-color); --sn-desktop-titlebar-bg-color: var(--primary-bg-color);

21
packages/components/src/org.standardnotes.theme-solarized-dark/src/main.scss
View File

@@ -1,17 +1,16 @@
:root { :root {
--background-1: #002b36;
--background-1: #002B36;
--background-2: #083642; --background-2: #083642;
--foreground-color: #FDF6E3; --foreground-color: #fdf6e3;
--highlight-color: #2AA198; --highlight-color: #2aa198;
--border-color: #00252e; --border-color: #00252e;
--pre-color: #d6dbdb; --pre-color: #d6dbdb;
--content-1: #586D75; --content-1: #586d75;
--content-2: #667A83; --content-2: #667a83;
--content-3: #839496; --content-3: #839496;
--content-4: #93A1A1; --content-4: #93a1a1;
/* Footer */ /* Footer */
--footer-bar-border-top-color: 0; --footer-bar-border-top-color: 0;
@@ -32,13 +31,13 @@
--sn-stylekit-neutral-color: #7c7c7c; --sn-stylekit-neutral-color: #7c7c7c;
--sn-stylekit-neutral-contrast-color: white; --sn-stylekit-neutral-contrast-color: white;
--sn-stylekit-success-color: #2B9612; --sn-stylekit-success-color: #2b9612;
--sn-stylekit-success-contrast-color: white; --sn-stylekit-success-contrast-color: white;
--sn-stylekit-warning-color: #f6a200; --sn-stylekit-warning-color: #f6a200;
--sn-stylekit-warning-contrast-color: white; --sn-stylekit-warning-contrast-color: white;
--sn-stylekit-danger-color: #F80324; --sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: white; --sn-stylekit-danger-contrast-color: white;
--sn-stylekit-shadow-color: var(--background-2); --sn-stylekit-shadow-color: var(--background-2);
@@ -75,9 +74,9 @@
--sn-stylekit-menu-border: 1px solid #1f5461; --sn-stylekit-menu-border: 1px solid #1f5461;
--sn-stylekit-passive-color-0: #a8bdbd; --sn-stylekit-passive-color-0: #a8bdbd;
--sn-stylekit-passive-color-1: #93A1A1; --sn-stylekit-passive-color-1: #93a1a1;
--sn-stylekit-passive-color-3: #0d4f60; --sn-stylekit-passive-color-3: #0d4f60;
--sn-stylekit-passive-color-4: #083642; --sn-stylekit-passive-color-4: #083642;
--sn-stylekit-passive-color-4-opacity-variant: #2AA1983d; --sn-stylekit-passive-color-4-opacity-variant: #2aa1983d;
--sn-stylekit-passive-color-5: #003542; --sn-stylekit-passive-color-5: #003542;
} }

5
packages/components/src/org.standardnotes.theme-titanium/src/main.scss
View File

@@ -1,5 +1,4 @@
:root { :root {
--foreground-color: #3d3c40; --foreground-color: #3d3c40;
--background-color: #663399; --background-color: #663399;
--highlight-color: #c9cccf; --highlight-color: #c9cccf;
@@ -15,13 +14,13 @@
--sn-stylekit-neutral-color: #7c7c7c; --sn-stylekit-neutral-color: #7c7c7c;
--sn-stylekit-neutral-contrast-color: #ffffff; --sn-stylekit-neutral-contrast-color: #ffffff;
--sn-stylekit-success-color: #2B9612; --sn-stylekit-success-color: #2b9612;
--sn-stylekit-success-contrast-color: #ffffff; --sn-stylekit-success-contrast-color: #ffffff;
--sn-stylekit-warning-color: #f6a200; --sn-stylekit-warning-color: #f6a200;
--sn-stylekit-warning-contrast-color: #ffffff; --sn-stylekit-warning-contrast-color: #ffffff;
--sn-stylekit-danger-color: #F80324; --sn-stylekit-danger-color: #f80324;
--sn-stylekit-danger-contrast-color: #ffffff; --sn-stylekit-danger-contrast-color: #ffffff;
--sn-stylekit-background-color: #d9dbde; --sn-stylekit-background-color: #d9dbde;

16
packages/styles/src/Styles/_ui.scss
View File

@@ -1,3 +1,5 @@
@use 'sass:math';
.red { .red {
color: var(--sn-stylekit-danger-color); color: var(--sn-stylekit-danger-color);
} }
@@ -702,16 +704,16 @@ svg.sk-circular-progress {
$pi: 3.14159265358979; $pi: 3.14159265358979;
$circle-size: 18px; $circle-size: 18px;
$stroke-width: $circle-size * (0.1 / 100) * 100 + 1; $stroke-width: $circle-size * math.div(0.1, 100) * 100 + 1;
$radius: ($circle-size - $stroke-width) / 2; $radius: math.div($circle-size - $stroke-width, 2);
$circumference: ($radius * $pi * 2); $circumference: ($radius * $pi * 2);
height: $circle-size; height: $circle-size;
width: $circle-size; width: $circle-size;
circle.background { circle.background {
cx: $circle-size / 2; cx: math.div($circle-size, 2);
cy: $circle-size / 2; cy: math.div($circle-size, 2);
r: $radius; r: $radius;
fill: none; fill: none;
stroke: var(--sn-stylekit-contrast-border-color); stroke: var(--sn-stylekit-contrast-border-color);
@@ -719,8 +721,8 @@ svg.sk-circular-progress {
} }
circle.progress { circle.progress {
cx: $circle-size / 2; cx: math.div($circle-size, 2);
cy: $circle-size / 2; cy: math.div($circle-size, 2);
r: $radius; r: $radius;
fill: none; fill: none;
stroke: var(--sn-stylekit-info-color); stroke: var(--sn-stylekit-info-color);
@@ -731,7 +733,7 @@ svg.sk-circular-progress {
transform-origin: 50% 50%; transform-origin: 50% 50%;
@mixin set-progress($progress) { @mixin set-progress($progress) {
$dash: ($progress * $circumference) / 100; $dash: math.div($progress * $circumference, 100);
stroke-dasharray: $dash $circumference - $dash; stroke-dasharray: $dash $circumference - $dash;
} }