Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 11:47:54 +01:00
Code Issues Packages Projects Releases Wiki Activity

theme: get rid of shade & textSelection colors

Browse Source
This commit is contained in:
Abdullah Atta
2023-09-05 11:28:44 +05:00
committed by Abdullah Atta
parent ac9be8360a
commit 59f6b5e411
11 changed files with 102 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/theme-builder/src/components/theme-builder/index.tsx
View File

@@ -23,7 +23,8 @@ import {
ThemeDefinition,
THEME_SCOPES,
Variants,
validateTheme
validateTheme,
ALPHA_COLORS
} from "@notesnook/theme";
import { Button, Flex, Input, Text } from "@theme-ui/components";
import FileSaver from "file-saver";
@@ -524,9 +525,7 @@ export default function ThemeBuilder() {
}
}}
title={
/hover|shade|backdrop|textSelection/g.test(
colorName
)
ALPHA_COLORS.includes(colorName)
? `Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)`
: `Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)`
}
@@ -555,9 +554,7 @@ export default function ThemeBuilder() {
);
}}
title={
/hover|shade|backdrop|textSelection/g.test(
colorName
)
ALPHA_COLORS.includes(colorName)
? `Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)`
: `Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)`
}

12
apps/web/src/app.css
View File

@@ -138,25 +138,25 @@ textarea,
}
.rpv-core__text-layer-text::selection {
background-color: var(--textSelection) !important;
background-color: var(--background-selected) !important;
color: transparent;
}
.rpv-core__text-layer-text::-moz-selection {
/* Code for Firefox */
background-color: var(--textSelection) !important;
background-color: var(--background-selected) !important;
color: transparent;
}
::-moz-selection {
/* Code for Firefox */
background-color: var(--textSelection);
color: var(--paragraph);
background-color: var(--background-selected);
color: var(--paragraph-selected);
}
::selection {
background-color: var(--textSelection);
color: var(--paragraph);
background-color: var(--background-selected);
color: var(--paragraph-selected);
}
*::-moz-focus-inner {

2
apps/web/src/components/list-item/index.tsx
View File

@@ -147,7 +147,7 @@ function ListItem(props: ListItemProps) {
":focus-visible": {
outline: `1px solid`,
outlineColor: accent === "accent" ? "accent" : alpha("accent", 0.7),
backgroundColor: isSelected ? "textSelection" : background
backgroundColor: isSelected ? "background-selected" : background
}
}}
onKeyPress={(e) => {

8
extensions/web-clipper/src/index.css
View File

@@ -31,13 +31,13 @@ textarea {
::-moz-selection {
/* Code for Firefox */
background-color: var(--textSelection);
color: var(--paragraph);
background-color: var(--background-selected);
color: var(--paragraph-selected);
}
::selection {
background-color: var(--textSelection);
color: var(--paragraph);
background-color: var(--background-selected);
color: var(--paragraph-selected);
}
.ms-track:hover,

10
packages/editor/src/extensions/code-block/component.tsx
View File

@@ -72,12 +72,12 @@ export function CodeblockComponent(
borderRadius: `0px !important`,
"::selection,*::selection": {
bg: "textSelection",
color: "currentColor"
bg: "background-selected",
color: "paragraph-selected"
},
"::-moz-selection,*::-moz-selection": {
bg: "textSelection",
color: "currentColor"
bg: "background-selected",
color: "paragraph-selected"
}
},
fontFamily: "monospace",
@@ -139,7 +139,7 @@ export function CodeblockComponent(
opacity: "1 !important",
p: 1,
mr: 1,
bg: isOpen ? "textSelection" : "transparent"
bg: isOpen ? "background-selected" : "transparent"
}}
disabled={!editor.isEditable}
onClick={() => {

2
packages/theme/scripts/prebuild.mjs
View File

@@ -24,7 +24,7 @@ import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const DEFAULT_THEMES = ["default-light", "default-dark", "default-pitch-black"];
const DEFAULT_THEMES = ["default-light", "default-dark"];
const THEMES_DIRECTORY = path.resolve(
path.join(__dirname, "..", "src", "theme-engine", "themes")

33
packages/theme/scripts/schema-generator.mjs
View File

@@ -33,8 +33,33 @@ const generator = tsj.createGenerator({
const schema = generator.createSchema("ThemeDefinition");
delete schema.definitions.ThemeDefinition.properties.codeBlockCSS;
const required = schema.definitions.ThemeDefinition.required;
required.splice(required.indexOf("codeBlockCSS"), 1);
removeProperty("ThemeDefinition", "codeBlockCSS");
removeProperty("Colors", "shade");
removeProperty("PartialOrFullColors<false>", "shade");
addProperty(
"ThemeDefinition",
"$schema",
{
type: "string",
const:
"https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json"
},
true
);
await writeFile(`v1.schema.json`, JSON.stringify(schema, undefined, 2));
function removeProperty(definition, propertyName) {
delete schema.definitions[definition].properties[propertyName];
const required = schema.definitions[definition].required;
if (required && required.includes(propertyName)) {
required.splice(required.indexOf("shade"), 1);
}
}
function addProperty(definition, propertyName, value, required) {
schema.definitions[definition].properties[propertyName] = value;
if (required) {
schema.definitions[definition].required.push(propertyName);
}
}

10
packages/theme/src/theme-engine/index.ts
View File

@@ -27,12 +27,10 @@ import {
import { create } from "zustand";
import _ThemeLight from "./themes/default-light.json";
import _ThemeDark from "./themes/default-dark.json";
import _ThemePitchBlack from "./themes/default-pitch-black.json";
import { buildVariants } from "./utils";
const ThemeLight = _ThemeLight as ThemeDefinition;
const ThemeDark = _ThemeDark as ThemeDefinition;
const ThemePitchBlack = _ThemePitchBlack as ThemeDefinition;
type ThemeScope = {
colors: VariantsWithStaticColors<true>;
@@ -74,12 +72,6 @@ export function useThemeColors(scope?: keyof ThemeScopes): ThemeScope {
export const useCurrentThemeScope = () => useContext(ThemeScopeContext);
export const ScopedThemeProvider = ThemeScopeContext.Provider;
export const THEME_COMPATIBILITY_VERSION: ThemeCompatibilityVersion = 1;
export {
ThemeLight,
ThemeDark,
ThemePitchBlack,
useThemeEngineStore,
type ThemeEngineState
};
export { ThemeLight, ThemeDark, useThemeEngineStore, type ThemeEngineState };
export { getPreviewColors, themeToCSS } from "./utils";
export { validateTheme } from "./validator";

27
packages/theme/src/theme-engine/types.ts
View File

@@ -37,9 +37,6 @@ export type ThemeCompatibilityVersion = 1;
* @description This is a schema for validation of Notesnook themes.
*/
export type ThemeDefinition = {
// we need to allow this to make linters happy.
$schema: "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json";
/**
* Name of the theme
*/
@@ -223,21 +220,13 @@ export type Colors = {
* @pattern ^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$
*/
hover: string;
/**
* Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)
* @pattern ^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$
*/
shade: string;
/**
* Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)
* @pattern ^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$
*/
backdrop: string;
/**
* Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)
* @pattern ^#(?:(?:[\da-fA-F]{3}){1,2}|(?:[\da-fA-F]{4}){1,2})$
*/
textSelection: string;
shade: string;
};
export type VariantsWithStaticColors<TRequired extends boolean = false> =
@@ -305,17 +294,11 @@ export const COLORS: readonly (keyof Colors)[] = [
"separator",
"placeholder",
"hover",
"shade",
"backdrop",
"textSelection"
"accentForeground",
"backdrop"
];
export const ALPHA_COLORS: readonly (keyof Colors)[] = [
"hover",
"shade",
"backdrop",
"textSelection"
];
export const ALPHA_COLORS: readonly (keyof Colors)[] = ["hover", "backdrop"];
export const Variants: readonly (keyof Variants)[] = [
"primary",

35
packages/theme/src/theme-engine/utils.ts
View File

@@ -28,6 +28,7 @@ import {
VariantsWithStaticColors
} from "./types";
import _ThemeLight from "./themes/default-light.json";
import tc from "tinycolor2";
import _ThemeDark from "./themes/default-dark.json";
const ThemeLight = _ThemeLight as ThemeDefinition;
@@ -97,44 +98,60 @@ export function buildVariants(
const defaultTheme = theme.colorScheme === "dark" ? ThemeDark : ThemeLight;
const defaultThemeBase = defaultTheme.scopes.base;
const defaultThemeScope = defaultTheme.scopes[scope] || {};
const variant = {
function getColor(variant: keyof Variants, color: keyof Colors) {
return tc(
themeScope[variant]?.[color] ||
theme.scopes.base[variant]?.[color] ||
defaultThemeScope[variant]?.[color] ||
defaultThemeBase[variant]?.[color]
);
}
const variant: VariantsWithStaticColors<true> = {
...defaultThemeBase,
...defaultThemeScope,
primary: {
...defaultThemeBase.primary,
...defaultThemeScope.primary,
...theme.scopes.base.primary,
...themeScope.primary
...themeScope.primary,
shade: deriveShadeColor(getColor("primary", "accent"))
},
secondary: {
...defaultThemeBase.secondary,
...defaultThemeScope.secondary,
...theme.scopes.base.secondary,
...themeScope.secondary
...themeScope.secondary,
shade: deriveShadeColor(getColor("secondary", "accent"))
},
disabled: {
...defaultThemeBase.disabled,
...defaultThemeScope.disabled,
...theme.scopes.base.disabled,
...themeScope.disabled
...themeScope.disabled,
shade: deriveShadeColor(getColor("disabled", "accent"))
},
error: {
...defaultThemeBase.error,
...defaultThemeScope.error,
...theme.scopes.base.error,
...themeScope.error
...themeScope.error,
shade: deriveShadeColor(getColor("error", "accent"))
},
success: {
...defaultThemeBase.success,
...defaultThemeScope.success,
...theme.scopes.base.success,
...themeScope.success
...themeScope.success,
shade: deriveShadeColor(getColor("success", "accent"))
},
selected: {
...defaultThemeBase.selected,
...defaultThemeScope.selected,
...theme.scopes.base.selected,
...themeScope.selected
...themeScope.selected,
shade: deriveShadeColor(getColor("selected", "accent"))
},
static: StaticColors
};
@@ -151,3 +168,7 @@ export function colorsToCSSVariables(colors: Colors, variantKey?: string) {
}
return root;
}
function deriveShadeColor(color: tc.Instance) {
return color.setAlpha(0.04).toHex8String();
}

47
packages/theme/v1.schema.json
View File

@@ -5,10 +5,6 @@
"ThemeDefinition": {
"type": "object",
"properties": {
"$schema": {
"type": "string",
"const": "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json"
},
"name": {
"type": "string",
"description": "Name of the theme"
@@ -71,10 +67,13 @@
"scopes": {
"$ref": "#/definitions/ThemeScopes",
"description": "All the theme scopes."
},
"$schema": {
"type": "string",
"const": "https://raw.githubusercontent.com/streetwriters/notesnook-themes/main/schemas/v1.schema.json"
}
},
"required": [
"$schema",
"name",
"id",
"version",
@@ -83,7 +82,8 @@
"authors",
"description",
"colorScheme",
"scopes"
"scopes",
"$schema"
],
"additionalProperties": false,
"title": "Notesnook Theme schema",
@@ -206,6 +206,11 @@
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
},
"accentForeground": {
"type": "string",
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
},
"paragraph": {
"type": "string",
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
@@ -246,24 +251,15 @@
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"shade": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"backdrop": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"textSelection": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
}
},
"required": [
"accent",
"accentForeground",
"paragraph",
"background",
"border",
@@ -272,9 +268,7 @@
"separator",
"placeholder",
"hover",
"shade",
"backdrop",
"textSelection"
"backdrop"
],
"additionalProperties": false
},
@@ -310,6 +304,11 @@
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
},
"accentForeground": {
"type": "string",
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
"pattern": "^#(?:[0-9a-fA-F]{3}){1,2}$"
},
"paragraph": {
"type": "string",
"description": "Only Hex RGB values are supported. No Alpha. (e.g. #f33ff3)",
@@ -350,20 +349,10 @@
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"shade": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"backdrop": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
},
"textSelection": {
"type": "string",
"description": "Hex RGB & ARGB values both are supported. (e.g. #dbdbdb99)",
"pattern": "^#(?:(?:[\\da-fA-F]{3}){1,2}|(?:[\\da-fA-F]{4}){1,2})$"
}
},
"additionalProperties": false