From 713174c45824e6caae2e3b9347f5ae7f6a60f319 Mon Sep 17 00:00:00 2001
From: Baku Hashimoto <mail@baku89.com>
Date: Fri, 29 Sep 2023 15:36:30 +0900
Subject: [PATCH] Use useTheme in Tweeq

---
 package.json                            |  2 +
 src/components/App.vue                  | 39 +++-------
 src/components/OverlayNumberSlider.vue  |  4 +-
 src/components/OverlayPointHandle.vue   |  6 +-
 src/main.ts                             |  2 +-
 src/tweeq/FloatingPane/FloatingPane.vue | 16 ++--
 src/tweeq/RoundButton/index.ts          |  2 +
 src/tweeq/Tabs/Tabs.vue                 |  4 +-
 src/tweeq/TitleBar/TitleBar.vue         |  4 +-
 src/tweeq/common.styl                   |  8 ++
 src/tweeq/index.ts                      |  1 +
 src/{ => tweeq}/style.styl              | 23 +-----
 src/tweeq/useTheme.ts                   | 97 +++++++++++++++++++++++++
 src/tweeq/useTweeq.ts                   | 20 +++++
 yarn.lock                               | 10 +++
 15 files changed, 171 insertions(+), 67 deletions(-)
 create mode 100644 src/tweeq/RoundButton/index.ts
 create mode 100644 src/tweeq/common.styl
 create mode 100644 src/tweeq/index.ts
 rename src/{ => tweeq}/style.styl (55%)
 create mode 100644 src/tweeq/useTheme.ts
 create mode 100644 src/tweeq/useTweeq.ts

diff --git a/package.json b/package.json
index d2c85e2..5eb0c52 100644
--- a/package.json
+++ b/package.json
@@ -13,12 +13,14 @@
 		"postversion": "git push && git push --tags"
 	},
 	"devDependencies": {
+		"@material/material-color-utilities": "^0.2.7",
 		"@types/wicg-file-system-access": "^2020.9.6",
 		"@typescript-eslint/eslint-plugin": "^6.7.0",
 		"@typescript-eslint/parser": "^6.7.0",
 		"@vitejs/plugin-vue": "^4.3.4",
 		"@vueuse/core": "^10.4.1",
 		"bndr-js": "^0.9.4",
+		"case": "^1.6.3",
 		"eslint": "^8.49.0",
 		"eslint-config-prettier": "^9.0.0",
 		"eslint-plugin-jest": "^27.2.3",
diff --git a/src/components/App.vue b/src/components/App.vue
index ca5cb55..3cb95ef 100644
--- a/src/components/App.vue
+++ b/src/components/App.vue
@@ -20,12 +20,12 @@ import paper from 'paper'
 import PaperOffset from 'paperjs-offset'
 PaperOffset(paper)
 
+import {useTweeq} from '@/tweeq'
 import FloatingPane from '@/tweeq/FloatingPane'
 import MonacoEditor, {ErrorInfo} from '@/tweeq/MonacoEditor'
 import RoundButton from '@/tweeq/RoundButton'
 import {Tab, Tabs} from '@/tweeq/Tabs'
 import TitleBar from '@/tweeq/TitleBar'
-import {provideAppStorage} from '@/tweeq/useAppStorage'
 import {useCommentMeta} from '@/use/useCommentMeta'
 import {useZUI} from '@/use/useZUI'
 import {replaceTextBetween} from '@/utils'
@@ -34,7 +34,7 @@ import OverlayColorPicker from './OverlayColorPicker.vue'
 import OverlayNumberSlider from './OverlayNumberSlider.vue'
 import OverlayPointHandle from './OverlayPointHandle.vue'
 
-const {appStorage} = provideAppStorage('com.baku89.paperjs-editor')
+const {appStorage} = useTweeq('com.baku89.paperjs-editor')
 
 interface PaperDesc {
 	id?: string
@@ -192,10 +192,12 @@ const canvasGridStyle = computed(() => {
 
 	const opacity = scalar.smoothstep(0.1, 0.4, zoom.value)
 
+	const op = `${opacity * 100}%`
+
 	return {
 		backgroundSize: size,
 		backgroundPosition: offset,
-		'--dot-color': `rgba(var(--ui-color-rgb), ${opacity})`,
+		'--dot-color': `color-mix(in srgb, var(--tq-color-text) ${op}, transparent)`,
 	}
 })
 
@@ -376,10 +378,11 @@ window.addEventListener('drop', async e => {
 </template>
 
 <style lang="stylus" scoped>
+@import '../tweeq/common.styl'
 
 .title
 	.zoom
-		font-variant-numeric: tabular-nums;
+		font-numeric()
 		font-size 11px
 		border 1px solid transparent
 		border-radius 4px
@@ -389,7 +392,7 @@ window.addEventListener('drop', async e => {
 		transition all ease .1s
 
 		&:hover
-			border-color var(--ui-button)
+			border-color var(--tq-color-primary)
 
 .main
 	position relative
@@ -411,35 +414,13 @@ window.addEventListener('drop', async e => {
 
 .canvas-grid
 	// draws dotted grid
-	--axis-color 'rgba(%s, .1)' % var(--ui-color-rgb)
-	background-image radial-gradient(circle at 0 0, var(--dot-color) 1px, transparent 0), linear-gradient(to bottom, var(--axis-color) 1px, transparent 0), linear-gradient(to right, var(--axis-color) 1px, transparent 0)
+	--axis-color var(--tq-color-text)
+	background-image radial-gradient(circle at 0 0, var(--tq-color-text) 1px, transparent 0), linear-gradient(to bottom, var(--axis-color) 1px, transparent 0), linear-gradient(to right, var(--axis-color) 1px, transparent 0)
 	background-repeat repeat, repeat-x, repeat-y
 
 .inspector-tab
 	height 100%
 
-.play
-	display inline-flex
-	justify-content center
-	align-items center
-	background var(--ui-button)
-	color var(--ui-color)
-	width 32px
-	height 32px
-	border-radius 9999px
-	vertical-align middle
-	padding 0 6px
-	gap .4em
-	transition all ease .2s
-	width auto
-	padding 0 12px 0 6px
-	background var(--ui-color)
-	color var(--ui-bg)
-
-	&:hover
-		background var(--ui-accent)
-		color var(--ui-bg)
-
 
 .editor
 	height 100%
diff --git a/src/components/OverlayNumberSlider.vue b/src/components/OverlayNumberSlider.vue
index 1d6d603..82b68c8 100644
--- a/src/components/OverlayNumberSlider.vue
+++ b/src/components/OverlayNumberSlider.vue
@@ -94,11 +94,11 @@ function onPointerup(e: PointerEvent) {
 	transform translateX(-50%)
 	width 8rem
 	height 1.6rem
-	background var(--ui-button)
+	background var(--md-sys-color-inverse-surface)
 	border-radius 9999px
 	cursor col-resize
 
-	background-image linear-gradient(to right, var(--ui-color) 4%, transparent 4%)
+	background-image linear-gradient(to right, var(--md-sys-color-inverse-on-surface) 4%, transparent 4%)
 	background-size 25px 40%
 	background-repeat repeat-x
 </style>
diff --git a/src/components/OverlayPointHandle.vue b/src/components/OverlayPointHandle.vue
index 75b3fb9..8c36d5b 100644
--- a/src/components/OverlayPointHandle.vue
+++ b/src/components/OverlayPointHandle.vue
@@ -116,9 +116,9 @@ onMounted(() => {
 	width 17px
 	height 17px
 	outline 1px solid rgba(255, 255, 255, 0.5)
-	border 1px solid var(--ui-accent)
+	border 1px solid var(--tq-color-primary)
 	border-radius 50%
-	background var(--ui-bg)
+	background var(--tq-color-bg)
 
 	&:before
 		content ''
@@ -127,5 +127,5 @@ onMounted(() => {
 		border-radius 50%
 
 	&:hover
-		background var(--ui-accent)
+		background var(--tq-color-primary)
 </style>
diff --git a/src/main.ts b/src/main.ts
index 7aef1ee..a0c8502 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import './style.styl'
+import '@/tweeq/style.styl'
 
 import {createApp} from 'vue'
 
diff --git a/src/tweeq/FloatingPane/FloatingPane.vue b/src/tweeq/FloatingPane/FloatingPane.vue
index 2a1e130..c87d2d0 100644
--- a/src/tweeq/FloatingPane/FloatingPane.vue
+++ b/src/tweeq/FloatingPane/FloatingPane.vue
@@ -126,21 +126,19 @@ onMounted(() => {
 </template>
 
 <style lang="stylus" scoped>
+@import '../common.styl'
 
 .FloatingPane
+	pane()
 	--resize-width 2rem
 
 	position absolute
 	padding 1rem
-	border 1px solid 'rgba(%s, .1)' % var(--ui-color-rgb)
-	outline 'rgba(%s, .5)' % var(--ui-bg-rgb) 1px solid
-	background 'rgba(%s, .95)' % var(--ui-bg-rgb)
-	backdrop-filter blur(4px)
 	right 0
 
 	top calc(env(titlebar-area-y, 0px) + var(--titlebar-area-height))
 	border-width 1px
-	border-radius var(--ui-pane-border-radius) 0 0 var(--ui-pane-border-radius)
+	border-radius var(--tq-pane-border-radius) 0 0 var(--tq-pane-border-radius)
 	display grid
 	grid-template-columns 1fr
 	grid-template-rows 1fr
@@ -157,7 +155,7 @@ onMounted(() => {
 
 	&.w-fill
 		width 100vw
-		--ui-pane-border-radius 0rem
+		--tq-pane-border-radius 0rem
 
 		& > .left:before
 			left calc(50% - 1px)
@@ -193,9 +191,9 @@ onMounted(() => {
 
 .left
 	left 0
-	top var(--ui-pane-border-radius)
+	top var(--tq-pane-border-radius)
 	width var(--resize-width)
-	bottom var(--ui-pane-border-radius)
+	bottom var(--tq-pane-border-radius)
 	cursor col-resize
 	margin-left calc(-0.5 * var(--resize-width))
 
@@ -204,7 +202,7 @@ onMounted(() => {
 		left calc(50% - 2.5px)
 
 .bottom
-	left var(--ui-pane-border-radius)
+	left var(--tq-pane-border-radius)
 	bottom 0
 	right 0
 	height var(--resize-width)
diff --git a/src/tweeq/RoundButton/index.ts b/src/tweeq/RoundButton/index.ts
new file mode 100644
index 0000000..040cf0c
--- /dev/null
+++ b/src/tweeq/RoundButton/index.ts
@@ -0,0 +1,2 @@
+import RoundButton from './RoundButton.vue'
+export default RoundButton
diff --git a/src/tweeq/Tabs/Tabs.vue b/src/tweeq/Tabs/Tabs.vue
index 4b44195..46efa3d 100644
--- a/src/tweeq/Tabs/Tabs.vue
+++ b/src/tweeq/Tabs/Tabs.vue
@@ -166,11 +166,11 @@ onMounted(() => {
 	transition border-bottom-color .2s ease
 
 	&.active
-		border-bottom-color var(--ui-color)
+		border-bottom-color var(--tq-color-text)
 
 .tablist-link
 	text-decoration none
-	color var(--ui-color)
+	color var(--tq-color-text)
 	opacity .4
 	transition opacity .2s ease
 
diff --git a/src/tweeq/TitleBar/TitleBar.vue b/src/tweeq/TitleBar/TitleBar.vue
index b0fa626..cc4d26a 100644
--- a/src/tweeq/TitleBar/TitleBar.vue
+++ b/src/tweeq/TitleBar/TitleBar.vue
@@ -31,7 +31,7 @@ defineSlots<{
 	z-index 100
 	user-select none
 	position fixed
-	background 'linear-gradient(to bottom, rgba(%s, .7) 0, transparent)' % var(--ui-bg-rgb)
+	background linear-gradient(to bottom, var(--tq-color-bg), transparent)
 	backdrop-filter blur(2px)
 	gap .6rem
 	padding .4rem .4rem .4rem .6rem
@@ -40,7 +40,7 @@ defineSlots<{
 	line-height calc(var(--titlebar-area-height) - 0.8rem)
 
 	@media (display-mode: window-controls-overlay)
-		background 'linear-gradient(to bottom, rgba(%s, .5) 20%, transparent)' % var(--ui-bg-rgb), linear-gradient(to right, var(--ui-bg) 0, transparent 15%, transparent 85%, var(--ui-bg) 100%)
+		background linear-gradient(to bottom, var(--tq-color-bg) 20%, transparent), linear-gradient(to right, var(--tq-color-bg) 0, transparent 15%, transparent 85%, var(--tq-color-bg) 100%)
 
 
 .icon
diff --git a/src/tweeq/common.styl b/src/tweeq/common.styl
new file mode 100644
index 0000000..30230bf
--- /dev/null
+++ b/src/tweeq/common.styl
@@ -0,0 +1,8 @@
+font-numeric()
+	font-family var(--tq-font-numeric)
+	font-variant-numeric tabular-nums
+
+pane()
+	border 1px solid var(--tq-color-pane-border)
+	background var(--tq-color-pane)
+	backdrop-filter blur(4px)
diff --git a/src/tweeq/index.ts b/src/tweeq/index.ts
new file mode 100644
index 0000000..d12517e
--- /dev/null
+++ b/src/tweeq/index.ts
@@ -0,0 +1 @@
+export {useTweeq} from './useTweeq'
diff --git a/src/style.styl b/src/tweeq/style.styl
similarity index 55%
rename from src/style.styl
rename to src/tweeq/style.styl
index 93b173e..a2cfbc3 100644
--- a/src/style.styl
+++ b/src/tweeq/style.styl
@@ -1,4 +1,4 @@
-@import '../node_modules/reset-css/reset.css'
+@import '../../node_modules/reset-css/reset.css'
 
 :root
 	font-size 13px
@@ -8,23 +8,8 @@
 	-moz-osx-font-smoothing grayscale
 	-webkit-text-size-adjust 100%
 	--titlebar-area-height env(titlebar-area-height, 38px)
-	// Color scheme
-	--ui-bg #ffffff
-	--ui-bg-rgb 255, 255, 255
-	--ui-color #000
-	--ui-color-rgb 0, 0, 0
-	--ui-button #eee
-	--ui-accent blue
 	// UI Metrics
-	--ui-pane-border-radius 1.4rem
-
-	@media (prefers-color-scheme dark)
-		--ui-bg #222
-		--ui-bg-rgb 34, 34, 34
-		--ui-color #fff
-		--ui-color-rgb 255, 255, 255
-		--ui-button #333
-		--ui-accent skyblue
+	--tq-pane-border-radius 1.4rem
 
 *, *:before, *:after
 	box-sizing border-box
@@ -46,5 +31,5 @@ body
 	overflow hidden
 	margin 0
 	height 100vh
-	background var(--ui-bg)
-	color var(--ui-color)
+	background var(--tq-color-bg)
+	color var(--tq-color-text)
diff --git a/src/tweeq/useTheme.ts b/src/tweeq/useTheme.ts
new file mode 100644
index 0000000..7b6c419
--- /dev/null
+++ b/src/tweeq/useTheme.ts
@@ -0,0 +1,97 @@
+import {
+	applyTheme,
+	argbFromHex,
+	hexFromArgb,
+	themeFromSourceColor,
+} from '@material/material-color-utilities'
+import {kebab} from 'case'
+import {inject, InjectionKey, provide, Ref} from 'vue'
+
+export interface Theme {
+	// Colors
+	colorPrimary: string
+	colorOnPrimary: string
+	colorPrimaryContainer: string
+	colorOnPrimaryContainer: string
+	colorBg: string
+	colorText: string
+	colorPane: string
+	colorPaneBorder: string
+
+	// Font
+	fontCode: string
+	fontHeading: string
+	fontUi: string
+	fontNumeric: string
+
+	// UI Metrics
+	paneBorderRadius: string
+	inputHeight: string
+}
+
+const ThemeKey: InjectionKey<Theme> = Symbol('tqTheme')
+
+export function provideTheme(accentColor: Ref<string>) {
+	// Get the theme from a hex color
+	const materialTheme = themeFromSourceColor(argbFromHex(accentColor.value))
+
+	const dark = false
+
+	const scheme = dark ? materialTheme.schemes.dark : materialTheme.schemes.light
+
+	const theme: Theme = {
+		colorPrimary: toColor(scheme.primary),
+		colorPrimaryContainer: toColor(scheme.primaryContainer),
+		colorOnPrimaryContainer: toColor(scheme.onPrimaryContainer),
+		colorOnPrimary: toColor(scheme.onPrimary),
+		colorText: toColor(scheme.onBackground),
+		colorBg: toColor(scheme.background),
+		colorPane: toColor(scheme.background, 0.95),
+		colorPaneBorder: toColor(scheme.onBackground, 0.12),
+
+		fontCode: "'Fira Code', monospace",
+		fontHeading: 'Inter, sans-serif',
+		fontUi: 'Inter, system-ui, sans-serif',
+		fontNumeric: 'Inter, system-ui, sans-serif',
+
+		paneBorderRadius: '20px',
+		inputHeight: '16px',
+	}
+
+	// Promote all
+	for (const [key, value] of Object.entries(theme)) {
+		const varName = '--tq-' + kebab(key)
+		document.body.style.setProperty(varName, value)
+	}
+
+	provide(ThemeKey, theme)
+
+	// Apply the theme to the body by updating custom properties for material tokens
+	applyTheme(materialTheme, {target: document.body, dark})
+
+	return theme
+}
+
+// function
+
+function toColor(color: number, opacity?: number) {
+	let alpha = ''
+
+	if (opacity !== undefined) {
+		alpha = Math.round(opacity * 255)
+			.toString(16)
+			.padStart(2, '0')
+	}
+
+	return `${hexFromArgb(color)}${alpha}`
+}
+
+export function useTheme() {
+	const theme = inject(ThemeKey)
+
+	if (!theme) {
+		throw new Error('theme is not provided')
+	}
+
+	return theme
+}
diff --git a/src/tweeq/useTweeq.ts b/src/tweeq/useTweeq.ts
new file mode 100644
index 0000000..1fe10a9
--- /dev/null
+++ b/src/tweeq/useTweeq.ts
@@ -0,0 +1,20 @@
+import {provideAppStorage} from './useAppStorage'
+import {provideTheme} from './useTheme'
+
+interface TweeqOptions {
+	scheme?: 'dark' | 'light' | 'auto'
+	accentColor?: string
+}
+
+export function useTweeq(appId: string, options: TweeqOptions = {}) {
+	const {appStorage} = provideAppStorage(appId)
+
+	const accentColor = appStorage(
+		'accentColor',
+		options.accentColor || '#0000ff'
+	)
+
+	const theme = provideTheme(accentColor)
+
+	return {appStorage, theme}
+}
diff --git a/yarn.lock b/yarn.lock
index ed1e6b3..dac9608 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1154,6 +1154,11 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@material/material-color-utilities@^0.2.7":
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz#ff2a638d2db295a796fa02671410df4f4f97c33e"
+  integrity sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -1744,6 +1749,11 @@ caniuse-lite@^1.0.30001538:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001538.tgz#9dbc6b9af1ff06b5eb12350c2012b3af56744f3f"
   integrity sha512-HWJnhnID+0YMtGlzcp3T9drmBJUVDchPJ08tpUGFLs9CYlwWPH2uLgpHn8fND5pCgXVtnGS3H4QR9XLMHVNkHw==
 
+case@^1.6.3:
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/case/-/case-1.6.3.tgz#0a4386e3e9825351ca2e6216c60467ff5f1ea1c9"
+  integrity sha512-mzDSXIPaFwVDvZAHqZ9VlbyF4yyXRuX6IvB06WvPYkqJVO24kX1PPhv9bfpKNFZyxYFmmgo03HUiD8iklmJYRQ==
+
 chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"