@purestack/ts-components 1.1.0

package/src/standard/composer/composerCanvasInitialStyle.ts

@@ -0,0 +1,225 @@
+import { styleBuilder } from '@purestack/ts-style'
+import { registerComposerCanvasPreviewDefaults } from './composerCanvasSharedStyle'
+import type { ComposerCanvasStyleContext } from './composerCanvasStyleTypes'
+
+export function registerComposerInitialCanvasStyles(
+  context: ComposerCanvasStyleContext,
+) {
+  styleBuilder
+    .select('.composer__editor, .composer__editor *', context.theme)
+    .all('initial')
+    .boxSizing('border-box')
+
+  styleBuilder
+    .select('.composer__editor *', context.theme)
+    .font('inherit')
+    .color('inherit')
+    .lineHeight('inherit')
+    .caretColor('inherit')
+    .textAlign('inherit')
+
+  registerComposerCanvasPreviewDefaults(context)
+  registerComposerInitialCanvasElementDefaults(context)
+}
+
+function registerComposerInitialCanvasElementDefaults({
+  theme,
+}: ComposerCanvasStyleContext) {
+  styleBuilder
+    .select(
+      [
+        '.composer__editor b',
+        '.composer__editor cite',
+        '.composer__editor code',
+        '.composer__editor del',
+        '.composer__editor em',
+        '.composer__editor font',
+        '.composer__editor i',
+        '.composer__editor ins',
+        '.composer__editor kbd',
+        '.composer__editor s',
+        '.composer__editor samp',
+        '.composer__editor small',
+        '.composer__editor span',
+        '.composer__editor strong',
+        '.composer__editor sub',
+        '.composer__editor sup',
+        '.composer__editor tt',
+        '.composer__editor u',
+        '.composer__editor var',
+      ].join(', '),
+      theme,
+    )
+    .display('inline')
+    .font('inherit')
+    .color('inherit')
+
+  styleBuilder
+    .select(
+      [
+        '.composer__editor address',
+        '.composer__editor blockquote',
+        '.composer__editor caption',
+        '.composer__editor center',
+        '.composer__editor dd',
+        '.composer__editor div',
+        '.composer__editor dl',
+        '.composer__editor dt',
+        '.composer__editor h1',
+        '.composer__editor h2',
+        '.composer__editor h3',
+        '.composer__editor h4',
+        '.composer__editor h5',
+        '.composer__editor h6',
+        '.composer__editor hr',
+        '.composer__editor ol',
+        '.composer__editor p',
+        '.composer__editor pre',
+        '.composer__editor ul',
+      ].join(', '),
+      theme,
+    )
+    .display('block')
+    .font('inherit')
+    .color('inherit')
+    .lineHeight('inherit')
+    .caretColor('inherit')
+
+  styleBuilder
+    .select('.composer__editor div:empty, .composer__editor p:empty', theme)
+    .minHeight('1.55em')
+
+  styleBuilder
+    .select('.composer__editor br', theme)
+    .display('inline')
+    .font('inherit')
+    .lineHeight('inherit')
+    .caretColor('inherit')
+
+  styleBuilder
+    .select('.composer__editor strong, .composer__editor b', theme)
+    .fontWeight('bold')
+
+  styleBuilder
+    .select(
+      '.composer__editor em, .composer__editor i, .composer__editor cite',
+      theme,
+    )
+    .fontStyle('italic')
+
+  styleBuilder.select('.composer__editor small', theme).fontSize('80%')
+
+  styleBuilder
+    .select('.composer__editor sub', theme)
+    .fontSize('75%')
+    .verticalAlign('sub')
+
+  styleBuilder
+    .select('.composer__editor sup', theme)
+    .fontSize('75%')
+    .verticalAlign('super')
+
+  styleBuilder
+    .select('.composer__editor h1', theme)
+    .fontSize('2em')
+    .fontWeight('bold')
+    .margin('0.67em 0')
+
+  styleBuilder
+    .select('.composer__editor h2', theme)
+    .fontSize('1.5em')
+    .fontWeight('bold')
+    .margin('0.83em 0')
+
+  styleBuilder
+    .select('.composer__editor h3', theme)
+    .fontSize('1.17em')
+    .fontWeight('bold')
+    .margin('1em 0')
+
+  styleBuilder
+    .select('.composer__editor h4', theme)
+    .fontWeight('bold')
+    .margin('1.33em 0')
+
+  styleBuilder
+    .select('.composer__editor h5', theme)
+    .fontSize('0.83em')
+    .fontWeight('bold')
+    .margin('1.67em 0')
+
+  styleBuilder
+    .select('.composer__editor h6', theme)
+    .fontSize('0.67em')
+    .fontWeight('bold')
+    .margin('2.33em 0')
+
+  styleBuilder
+    .select('.composer__editor blockquote', theme)
+    .margin('1em 2.5rem')
+
+  styleBuilder
+    .select(
+      '.composer__editor pre, .composer__editor code, .composer__editor kbd, .composer__editor samp, .composer__editor tt',
+      theme,
+    )
+    .fontFamily('monospace')
+
+  styleBuilder
+    .select('.composer__editor ol, .composer__editor ul', theme)
+    .margin('1em 0')
+    .paddingLeft('2.5rem')
+
+  styleBuilder
+    .select('.composer__editor li', theme)
+    .display('list-item')
+    .listStyle('inherit')
+
+  styleBuilder
+    .select('.composer__editor u, .composer__editor ins', theme)
+    .textDecoration('underline')
+
+  styleBuilder
+    .select('.composer__editor s, .composer__editor del', theme)
+    .textDecoration('line-through')
+
+  styleBuilder.select('.composer__editor ul', theme).listStyle('disc')
+
+  styleBuilder.select('.composer__editor ol', theme).listStyle('decimal')
+
+  styleBuilder.select('.composer__editor table', theme).display('table')
+
+  styleBuilder
+    .select('.composer__editor caption', theme)
+    .display('table-caption')
+
+  styleBuilder
+    .select('.composer__editor colgroup', theme)
+    .display('table-column-group')
+
+  styleBuilder.select('.composer__editor col', theme).display('table-column')
+
+  styleBuilder
+    .select('.composer__editor thead', theme)
+    .display('table-header-group')
+
+  styleBuilder
+    .select('.composer__editor tbody', theme)
+    .display('table-row-group')
+
+  styleBuilder
+    .select('.composer__editor tfoot', theme)
+    .display('table-footer-group')
+
+  styleBuilder.select('.composer__editor tr', theme).display('table-row')
+
+  styleBuilder
+    .select('.composer__editor td, .composer__editor th', theme)
+    .display('table-cell')
+    .verticalAlign('inherit')
+
+  styleBuilder
+    .select('.composer__editor th', theme)
+    .fontWeight('bold')
+    .textAlign('center')
+}

package/src/standard/composer/composerCanvasRevertStyle.ts

@@ -0,0 +1,14 @@
+import { styleBuilder } from '@purestack/ts-style'
+import { registerComposerCanvasPreviewDefaults } from './composerCanvasSharedStyle'
+import type { ComposerCanvasStyleContext } from './composerCanvasStyleTypes'
+
+export function registerComposerRevertCanvasStyles(
+  context: ComposerCanvasStyleContext,
+) {
+  styleBuilder
+    .select('.composer__editor, .composer__editor *', context.theme)
+    .all('revert')
+    .boxSizing('border-box')
+
+  registerComposerCanvasPreviewDefaults(context)
+}

package/src/standard/composer/composerCanvasSharedStyle.ts

@@ -0,0 +1,60 @@
+import { styleBuilder } from '@purestack/ts-style'
+import type { ComposerCanvasStyleContext } from './composerCanvasStyleTypes'
+
+const EMAIL_FONT =
+  '0.9375rem/1.55 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif'
+
+export function registerComposerCanvasPreviewDefaults({
+  theme,
+}: ComposerCanvasStyleContext) {
+  styleBuilder
+    .select('.composer__editor', theme)
+    .display('block')
+    .width('100%')
+    .boxSizing('border-box')
+    .padding('0')
+    .border('none')
+    .borderRadius('0')
+    .outline('none')
+    .background('#fff')
+    .color('#182018')
+    .font(EMAIL_FONT)
+    .overflowY('auto')
+    .overflowWrap('anywhere')
+    .whiteSpace('normal')
+    .cursor('text')
+    .set('caret-color', '#182018')
+    .set('user-select', 'text')
+    .set('-webkit-user-select', 'text')
+
+  styleBuilder
+    .select('.composer__editor:empty::before', theme)
+    .content('attr(data-placeholder)')
+    .color('#777')
+    .pointerEvents('none')
+
+  styleBuilder
+    .select('.composer__editor [data-composer-body]:empty::before', theme)
+    .content('attr(data-placeholder)')
+    .color('#777')
+    .pointerEvents('none')
+
+  styleBuilder
+    .select('.composer__editor a', theme)
+    .color('#1368d8')
+    .textDecoration('underline')
+
+  styleBuilder
+    .select('.composer__editor img', theme)
+    .maxWidth('100%')
+    .height('auto')
+
+  styleBuilder
+    .select('.composer__editor table', theme)
+    .maxWidth('100%')
+    .borderCollapse('collapse')
+
+  styleBuilder.select('.composer__editor p:first-child', theme).marginTop('0')
+
+  styleBuilder.select('.composer__editor p:last-child', theme).marginBottom('0')
+}

package/src/standard/composer/composerCanvasStyleTypes.ts

@@ -0,0 +1,8 @@
+import type { ThemeMode, ThemePalette } from '@purestack/ts-style'
+
+export type ComposerCanvasStyleOption = 'theme' | 'revert' | 'initial'
+
+export interface ComposerCanvasStyleContext {
+  palette: ThemePalette
+  theme: ThemeMode
+}

package/src/standard/composer/composerCanvasThemeStyle.ts

@@ -0,0 +1,53 @@
+import { styleBuilder } from '@purestack/ts-style'
+import type { ComposerCanvasStyleContext } from './composerCanvasStyleTypes'
+
+export function registerComposerThemeCanvasStyles({
+  palette,
+  theme,
+}: ComposerCanvasStyleContext) {
+  styleBuilder
+    .select('.composer__editor', theme)
+    .width('100%')
+    .boxSizing('border-box')
+    .padding('0.85em 0.95em')
+    .border('none')
+    .borderRadius('0')
+    .outline('none')
+    .background('transparent')
+    .color(palette.current.text.default)
+    .apply(palette.applyFont(palette.font.size.body))
+    .lineHeight('1.55')
+    .overflowY('auto')
+    .whiteSpace('normal')
+
+  styleBuilder
+    .select('.composer__editor:empty::before', theme)
+    .content('attr(data-placeholder)')
+    .color(palette.current.text.subtle)
+    .pointerEvents('none')
+
+  styleBuilder
+    .select('.composer__editor a', theme)
+    .color(palette.current.tone)
+    .textDecoration('underline')
+
+  styleBuilder
+    .select('.composer__editor img', theme)
+    .maxWidth('100%')
+    .height('auto')
+    .borderRadius('0.25rem')
+
+  styleBuilder
+    .select('.composer__editor table', theme)
+    .maxWidth('100%')
+    .borderCollapse('collapse')
+
+  styleBuilder.select('.composer__editor p', theme).margin('0 0 0.7em')
+
+  styleBuilder.select('.composer__editor p:last-child', theme).marginBottom('0')
+
+  styleBuilder
+    .select('.composer__editor ul, .composer__editor ol', theme)
+    .margin('0 0 0.7em')
+    .paddingLeft('1.4em')
+}

package/src/standard/composer/composerStyle.ts

@@ -0,0 +1,156 @@
+import type { ThemePalette } from '@purestack/ts-style'
+import { styleBuilder, type ThemeMode, themes } from '@purestack/ts-style'
+import { registerComposerInitialCanvasStyles } from './composerCanvasInitialStyle'
+import { registerComposerRevertCanvasStyles } from './composerCanvasRevertStyle'
+import type { ComposerCanvasStyleOption } from './composerCanvasStyleTypes'
+import { registerComposerThemeCanvasStyles } from './composerCanvasThemeStyle'
+
+const COMPOSER_CANVAS_STYLE: ComposerCanvasStyleOption = 'initial'
+
+export function registerComposerStyles() {
+  themes.forEach((theme, palette) => {
+    registerComposerFieldStyles(theme, palette)
+    registerComposerShellStyles(theme, palette)
+    registerComposerToolbarStyles(theme, palette)
+    registerComposerSurfaceStyles(theme, palette)
+  })
+}
+
+function registerComposerFieldStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.composer-field', theme)
+    .display('grid')
+    .minWidth('0')
+    .gap('0.6em')
+  styleBuilder
+    .select('.composer-field__label', theme)
+    .apply(palette.applyFont(palette.font.size.xxs, palette.font.weight.w700))
+    .color(palette.current.tone)
+    .lineHeight('1')
+}
+
+function registerComposerShellStyles(theme: ThemeMode, palette: ThemePalette) {
+  styleBuilder
+    .select('.composer', theme)
+    .display('grid')
+    .width('100%')
+    .boxSizing('border-box')
+    .overflow('hidden')
+    .borderRadius(palette.radii.md)
+    .transition('border-color 160ms ease, box-shadow 160ms ease')
+
+  styleBuilder
+    .select('.composer:focus-within', theme)
+    .borderColor(palette.current.border.default)
+    .boxShadow(`0 0 0 3px ${palette.current.border.focus}`)
+}
+
+function registerComposerToolbarStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.composer__toolbar', theme)
+    .display('flex')
+    .flexWrap('wrap')
+    .alignItems('center')
+    .gap('0.25rem')
+    .padding('0.35em')
+    .borderBottom(`1px solid ${palette.current.border.default}`)
+    .background(palette.current.surfaceAlt.rest.background)
+
+  styleBuilder
+    .select('.composer__tool', theme)
+    .display('inline-flex')
+    .flexShrink('0')
+    .alignItems('center')
+    .justifyContent('center')
+    .width('2.1em')
+    .height('2.1em')
+    .padding('0')
+    .border('none')
+    .borderRadius('0.375rem')
+    .background('transparent')
+    .color(palette.current.text.default)
+    .cursor('pointer')
+    .transition('background 150ms ease, color 150ms ease')
+
+  styleBuilder
+    .select('.composer__tool:hover:not(:disabled)', theme)
+    .background(palette.current.button.hover.background)
+    .color(palette.current.button.hover.text)
+
+  styleBuilder
+    .select('.composer__tool[aria-pressed="true"]', theme)
+    .background(palette.current.button.active.background)
+    .color(palette.current.button.active.text)
+
+  styleBuilder
+    .select('.composer__tool:disabled', theme)
+    .cursor('not-allowed')
+    .opacity('0.55')
+
+  styleBuilder
+    .select('.composer__tool .icon', theme)
+    .width('1.1em')
+    .height('1.1em')
+
+  styleBuilder
+    .select('.composer__divider', theme)
+    .width('1px')
+    .height('1.4em')
+    .margin('0 0.2em')
+    .background(palette.current.border.default)
+
+  styleBuilder.select('.composer__tool--source', theme).marginLeft('auto')
+}
+
+function registerComposerSurfaceStyles(
+  theme: ThemeMode,
+  palette: ThemePalette,
+) {
+  styleBuilder
+    .select('.composer__surface', theme)
+    .position('relative')
+    .overflowX('auto')
+
+  registerComposerCanvasStyles(theme, palette)
+
+  styleBuilder
+    .select('.composer__source', theme)
+    .width('100%')
+    .boxSizing('border-box')
+    .padding('0.85em 0.95em')
+    .border('none')
+    .borderRadius('0')
+    .outline('none')
+    .background('transparent')
+    .color(palette.current.text.default)
+    .apply(palette.applyFont(palette.font.size.body))
+    .lineHeight('1.55')
+
+  styleBuilder
+    .select('.composer__source', theme)
+    .display('block')
+    .resize('vertical')
+    .fontFamily('ui-monospace, SFMono-Regular, Menlo, Consolas, monospace')
+    .background(palette.current.surface.rest.background)
+    .borderTop(`1px solid ${palette.current.border.default}`)
+    .borderBottomLeftRadius(palette.radii.md)
+    .borderBottomRightRadius(palette.radii.md)
+}
+
+function registerComposerCanvasStyles(theme: ThemeMode, palette: ThemePalette) {
+  const context = { palette, theme }
+  if (COMPOSER_CANVAS_STYLE === 'theme') {
+    registerComposerThemeCanvasStyles(context)
+    return
+  }
+
+  if (COMPOSER_CANVAS_STYLE === 'initial') {
+    registerComposerInitialCanvasStyles(context)
+    return
+  }
+
+  registerComposerRevertCanvasStyles(context)
+}