@ohos-ports/dxos-react-ui-theme 0.6.7-beta.1

package/src/styles/layers/typography.css

@@ -0,0 +1,152 @@
+@import '@fontsource-variable/jetbrains-mono/wght-italic.css';
+@import '@fontsource-variable/jetbrains-mono/wght.css';
+@import '@fontsource-variable/inter/slnt.css';
+
+@layer utilities {
+  /* Font weights & `italic` handling */
+  .not-italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' 0;
+  }
+  .font-thin,
+  .not-italic.font-thin,
+  .not-italic .font-thin,
+  .font-thin .not-italic {
+    font-variation-settings:
+      'wght' 100,
+      'slnt' 0;
+  }
+  .font-extralight,
+  .not-italic.font-extralight,
+  .not-italic .font-extralight,
+  .font-extralight .not-italic {
+    font-variation-settings:
+      'wght' 200,
+      'slnt' 0;
+  }
+  .font-light,
+  .not-italic.font-light,
+  .not-italic .font-light,
+  .font-light .not-italic {
+    font-variation-settings:
+      'wght' 300,
+      'slnt' 0;
+  }
+  .font-normal,
+  .not-italic.font-normal,
+  .not-italic .font-normal,
+  .font-normal .not-italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' 0;
+  }
+  .font-medium,
+  .not-italic.font-medium,
+  .not-italic .font-medium,
+  .font-medium .not-italic {
+    font-variation-settings:
+      'wght' 500,
+      'slnt' 0;
+  }
+  .font-semibold,
+  .not-italic.font-semibold,
+  .not-italic .font-semibold,
+  .font-semibold .not-italic {
+    font-variation-settings:
+      'wght' 600,
+      'slnt' 0;
+  }
+  .font-bold,
+  .not-italic.font-bold,
+  .not-italic .font-bold,
+  .font-bold .not-italic {
+    font-variation-settings:
+      'wght' 700,
+      'slnt' 0;
+  }
+  .font-extrabold,
+  .not-italic.font-extrabold,
+  .not-italic .font-extrabold,
+  .font-extrabold .not-italic {
+    font-variation-settings:
+      'wght' 800,
+      'slnt' 0;
+  }
+  .font-black,
+  .not-italic.font-black,
+  .not-italic .font-black,
+  .font-black .not-italic {
+    font-variation-settings:
+      'wght' 900,
+      'slnt' 0;
+  }
+  .italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' -10;
+  }
+  .italic.font-thin,
+  .italic .font-thin,
+  .font-thin .italic {
+    font-variation-settings:
+      'wght' 100,
+      'slnt' -10;
+  }
+  .italic.font-extralight,
+  .italic .font-extralight,
+  .font-extralight .italic {
+    font-variation-settings:
+      'wght' 200,
+      'slnt' -10;
+  }
+  .italic.font-light,
+  .italic .font-light,
+  .font-light .italic {
+    font-variation-settings:
+      'wght' 300,
+      'slnt' -10;
+  }
+  .italic.font-normal,
+  .italic .font-normal,
+  .font-normal .italic {
+    font-variation-settings:
+      'wght' 400,
+      'slnt' -10;
+  }
+  .italic.font-medium,
+  .italic .font-medium,
+  .font-medium .italic {
+    font-variation-settings:
+      'wght' 500,
+      'slnt' -10;
+  }
+  .italic.font-semibold,
+  .italic .font-semibold,
+  .font-semibold .italic {
+    font-variation-settings:
+      'wght' 600,
+      'slnt' -10;
+  }
+  .italic.font-bold,
+  .italic .font-bold,
+  .font-bold .italic {
+    font-variation-settings:
+      'wght' 700,
+      'slnt' -10;
+  }
+  .italic.font-extrabold,
+  .italic .font-extrabold,
+  .font-extrabold .italic {
+    font-variation-settings:
+      'wght' 800,
+      'slnt' -10;
+  }
+  .italic.font-black,
+  .italic .font-black,
+  .font-black .italic {
+    font-variation-settings:
+      'wght' 900,
+      'slnt' -10;
+  }
+}

package/src/styles/theme.ts

@@ -0,0 +1,69 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import get from 'lodash.get';
+
+import { type ComponentFunction, type Theme } from '@dxos/react-ui-types';
+
+import {
+  anchoredOverflowTheme,
+  avatarTheme,
+  breadcrumbTheme,
+  buttonTheme,
+  dialogTheme,
+  menuTheme,
+  inputTheme,
+  linkTheme,
+  listTheme,
+  mainTheme,
+  messageTheme,
+  popoverTheme,
+  scrollAreaTheme,
+  selectTheme,
+  separatorTheme,
+  statusTheme,
+  tagTheme,
+  toastTheme,
+  toolbarTheme,
+  tooltipTheme,
+  treegridTheme,
+} from './components';
+import { hueTheme } from './fragments';
+
+export const defaultTheme: Theme<Record<string, any>> = {
+  themeName: () => 'default',
+
+  anchoredOverflow: anchoredOverflowTheme,
+  avatar: avatarTheme,
+  breadcrumb: breadcrumbTheme,
+  button: buttonTheme,
+  dialog: dialogTheme,
+  menu: menuTheme,
+  input: inputTheme,
+  link: linkTheme,
+  list: listTheme,
+  main: mainTheme,
+  message: messageTheme,
+  popover: popoverTheme,
+  select: selectTheme,
+  scrollArea: scrollAreaTheme,
+  separator: separatorTheme,
+  status: statusTheme,
+  tag: tagTheme,
+  toast: toastTheme,
+  toolbar: toolbarTheme,
+  tooltip: tooltipTheme,
+  treegrid: treegridTheme,
+
+  hue: hueTheme,
+};
+
+export const bindTheme = <P extends Record<string, any>>(theme: Theme<Record<string, any>>) => {
+  return (path: string, defaultClassName: string, styleProps: P, ...options: any[]): string => {
+    const result: Theme<P> | ComponentFunction<P> = get(theme, path);
+    return typeof result === 'function' ? result(styleProps, ...options) : defaultClassName;
+  };
+};
+
+export const defaultTx = bindTheme(defaultTheme);

package/src/tailwind.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// Empty for vscode tooling.

package/src/theme.css

@@ -0,0 +1,52 @@
+/**
+ * Variable fonts:
+ * https://fontsource.org/?category=sans-serif&variable=true
+ */
+
+@import 'tailwindcss/base';
+@import 'tailwindcss/utilities';
+@import 'tailwindcss/components';
+
+@import './styles/layers/index.css';
+
+/* Base variables */
+
+:root {
+  font-synthesis: none;
+  font-variation-settings:
+    'wght' 400,
+    'slnt' 0;
+  scroll-padding-block-start: theme(spacing.14);
+  scroll-padding-block-end: theme(spacing.2);
+  --surface-bg: theme(colors.neutral.25);
+  --input-bg: theme(colors.neutral.50);
+  --input-bg-hover: theme(colors.neutral.75);
+  --surface-text: black;
+  --description-text: theme(colors.neutral.300);
+  --topbar-size: theme(spacing.12);
+  --statusbar-size: theme(spacing.6);
+  --sticky-top: 0;
+  --rail-size: 48px;
+  --rail-action: 40px;
+}
+
+@media (pointer: coarse) {
+  :root {
+    --statusbar-size: theme(spacing.8);
+  }
+}
+
+.dark {
+  --surface-bg: theme(colors.neutral.850);
+  --surface-text: white;
+  --input-bg: theme(colors.neutral.825);
+  --input-bg-hover: theme(colors.neutral.800);
+  --description-text: theme(colors.neutral.500);
+  color: var(--surface-text);
+}
+
+html {
+  background-color: var(--surface-bg);
+  color: var(--surface-text);
+  @apply font-body;
+}

package/src/typings.d.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+declare module 'tailwindcss/stubs/config.full.js';
+declare module 'tailwindcss-radix';
+declare module 'tailwindcss-logical';

package/src/util/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+export * from './mx';

package/src/util/mx.ts

@@ -0,0 +1,40 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { extendTailwindMerge, validators } from 'tailwind-merge';
+
+import { withLogical, type WithLogicalClassGroups } from './withLogical';
+import { semanticColors } from '../config';
+
+const semanticColorClasses = Object.keys(semanticColors);
+
+type AdditionalClassGroups = 'foreground' | 'surface' | 'separator' | WithLogicalClassGroups;
+
+export const mx = extendTailwindMerge<AdditionalClassGroups>(
+  {
+    extend: {
+      classGroups: {
+        'font-family': ['font-body', 'font-mono'],
+        'font-weight': [
+          // App weights
+          'font-thin',
+          'font-extralight',
+          'font-light',
+          'font-normal',
+          'font-medium',
+          'font-semibold',
+          'font-bold',
+          'font-extrabold',
+          'font-black',
+          // Arbitrary numbers
+          validators.isArbitraryNumber,
+        ],
+        foreground: semanticColorClasses.map((value) => `fg-${value}`),
+        surface: semanticColorClasses.map((value) => `surface-${value}`),
+        separator: semanticColorClasses.map((value) => `separator-${value}`),
+      },
+    },
+  },
+  withLogical,
+);

package/src/util/semanticColors.ts

@@ -0,0 +1,57 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+// Based upon https://github.com/synw/tailwindcss-semantic-colors/blob/main/index.js retrieved 22 Jan 2024
+
+import plugin from 'tailwindcss/plugin.js';
+import { type CSSRuleObject } from 'tailwindcss/types/config';
+
+export type SemanticColorValue = {
+  light: string;
+  dark: string;
+  fg?: SemanticColorValue;
+};
+
+// TODO(burdon): Move out of util (should not to be exported as lib).
+export const semanticColors = plugin(({ addUtilities, theme, e }) => {
+  const values: Record<string, SemanticColorValue> = theme('semanticColors');
+  const semanticColorUtilities = Object.entries(values).map(([key, value]) => {
+    return {
+      // TODO(thure): Refactor all of these tokens to simply prefix the properties they apply with `s-` as with `s-accent`.
+      [`.fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.light ?? value.light}`,
+      },
+      [`.dark .fg-${e(`${key}`)}`]: {
+        color: `${value.fg?.dark ?? value.dark}`,
+      },
+      [`.s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.light ?? value.light}`,
+      },
+      [`.dark .s-accent-${e(`${key}`)}`]: {
+        accentColor: `${value.fg?.dark ?? value.dark}`,
+      },
+      [`.surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.light}`,
+        '--sticky-bg': `${value.light}`,
+      },
+      [`.dark .surface-${e(`${key}`)}`]: {
+        backgroundColor: `${value.dark}`,
+        '--sticky-bg': `${value.dark}`,
+      },
+      [`.separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.light ?? value.light}`,
+      },
+      [`.dark .separator-${e(`${key}`)}`]: {
+        borderColor: `${value.fg?.dark ?? value.dark}`,
+      },
+      [`.s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.light ?? value.light}`,
+      },
+      [`.dark .s-outline-${e(`${key}`)}`]: {
+        outlineColor: `${value.fg?.dark ?? value.dark}`,
+      },
+    } as CSSRuleObject;
+  });
+  addUtilities(semanticColorUtilities);
+});

package/src/util/withLogical.ts

@@ -0,0 +1,110 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+// This tailwind-merge plugin is based upon https://github.com/vltansky/tailwind-merge-logical-plugin
+
+import { type Config, mergeConfigs, validators } from 'tailwind-merge';
+
+const getLength = () => [validators.isLength, validators.isArbitraryLength] as const;
+const getLengthWithAuto = () => ['auto', validators.isLength, validators.isArbitraryLength] as const;
+const getLengthWithEmpty = () => ['', validators.isLength, validators.isArbitraryLength] as const;
+const getAny = () => [validators.isAny] as const;
+const getRounded = () => ['none', '', validators.isTshirtSize, 'full', validators.isArbitraryLength] as const;
+
+const classGroupsConfig = {
+  float: [{ float: ['start', 'end'] }],
+  clear: [{ clear: ['start', 'end'] }],
+  resize: [{ resize: ['block ', 'inline'] }],
+  'text-alignment': [{ text: ['start', 'end'] }],
+  'logical.overscroll-b': [{ 'overscroll-b': ['auto ', 'contain', 'auto'] }],
+  'logical.overscroll-i': [{ 'overscroll-b': ['auto ', 'contain', 'auto'] }],
+  'logical.bs': [{ bs: getLength() }],
+  'logical.min-bs': [{ 'min-bs': getAny() }],
+  'logical.max-bs': [{ 'max-bs': getAny() }],
+  'logical.is': [{ is: getLength() }],
+  'logical.min-is': [{ 'min-is': getAny() }],
+  'logical.max-is': [{ 'max-is': getAny() }],
+  'logical.mlb': [{ mlb: getLength() }],
+  'logical.mli': [{ mli: getLength() }],
+  'logical.mbs': [{ mbs: getLength() }],
+  'logical.mbe': [{ mbe: getLength() }],
+  'logical.mis': [{ mis: getLength() }],
+  'logical.mie': [{ mie: getLength() }],
+  'logical.plb': [{ plb: getLength() }],
+  'logical.pli': [{ pli: getLength() }],
+  'logical.pbs': [{ pbs: getLength() }],
+  'logical.pbe': [{ pbe: getLength() }],
+  'logical.pis': [{ pis: getLength() }],
+  'logical.pie': [{ pie: getLength() }],
+  'logical.space-b': [{ 'space-b': getLength() }],
+  'logical.space-i': [{ 'space-i': getLength() }],
+  'logical.inset-block': [{ 'inset-block': getLengthWithAuto() }],
+  'logical.inset-inline': [{ 'inset-inline': getLengthWithAuto() }],
+  'logical.block-start': [{ 'block-start': getLengthWithAuto() }],
+  'logical.block-end': [{ 'block-end': getLengthWithAuto() }],
+  'logical.inline-start': [{ 'inline-start': getLengthWithAuto() }],
+  'logical.inline-end': [{ 'inline-end': getLengthWithAuto() }],
+  'logical.border-bs': [{ 'border-bs': getLengthWithEmpty() }],
+  'logical.border-be': [{ 'border-be': getLengthWithEmpty() }],
+  'logical.border-is': [{ 'border-is': getLengthWithEmpty() }],
+  'logical.border-ie': [{ 'border-ie': getLengthWithEmpty() }],
+  'logical.border-color-bs': [{ 'border-bs': getAny() }],
+  'logical.border-color-be': [{ 'border-be': getAny() }],
+  'logical.border-color-is': [{ 'border-is': getAny() }],
+  'logical.border-color-ie': [{ 'border-ie': getAny() }],
+  'logical.rounded-bs': [{ 'rounded-bs': getRounded() }],
+  'logical.rounded-be': [{ 'rounded-be': getRounded() }],
+  'logical.rounded-is': [{ 'rounded-is': getRounded() }],
+  'logical.rounded-ie': [{ 'rounded-ie': getRounded() }],
+  'logical.rounded-ss': [{ 'rounded-ss': getRounded() }],
+  'logical.rounded-se': [{ 'rounded-se': getRounded() }],
+  'logical.rounded-es': [{ 'rounded-es': getRounded() }],
+  'logical.rounded-ee': [{ 'rounded-ee': getRounded() }],
+  'logical.divide-b': [{ 'divide-b': getLengthWithEmpty() }],
+  'logical.divide-i': [{ 'divide-i': getLengthWithEmpty() }],
+};
+
+export type WithLogicalClassGroups = keyof typeof classGroupsConfig;
+
+type WithLogicalConfig = Config<WithLogicalClassGroups, string>;
+
+export const withLogical = (prevConfig: WithLogicalConfig): WithLogicalConfig => {
+  return mergeConfigs(prevConfig, {
+    extend: {
+      classGroups: classGroupsConfig,
+      conflictingClassGroups: {
+        'inset-block': ['logical.block-start', 'logical.block-end'],
+        'inset-inline': ['logical.inline-start', 'logical.inline-end'],
+        p: ['logical.plb', 'logical.pli', 'logical.pbs', 'logical.pbe', 'logical.pis', 'logical.pie'],
+        pli: ['logical.pis', 'logical.pie'],
+        plb: ['logical.pbs', 'logical.pbe'],
+        m: ['logical.mlb', 'logical.mli', 'logical.mbs', 'logical.mbe', 'logical.mis', 'logical.mie'],
+        mli: ['logical.mis', 'logical.mie'],
+        mlb: ['logical.mbs', 'logical.mbe'],
+        overscroll: ['overscroll-i', 'overscroll-b'],
+        rounded: [
+          'logical.rounded-bs',
+          'logical.rounded-be',
+          'logical.rounded-is',
+          'logical.rounded-ie',
+          'logical.rounded-ss',
+          'logical.rounded-se',
+          'logical.rounded-es',
+          'logical.rounded-ee',
+        ],
+        'logical.rounded-bs': ['logical.rounded-ss', 'logical.rounded-se'],
+        'logical.rounded-be': ['logical.rounded-es', 'logical.rounded-ee'],
+        'logical.rounded-is': ['logical.rounded-ss', 'logical.rounded-es'],
+        'logical.rounded-ie': ['logical.rounded-ee', 'logical.rounded-se'],
+        'border-color': [
+          'logical.border-color-bs',
+          'logical.border-color-be',
+          'logical.border-color-is',
+          'logical.border-color-ie',
+        ],
+        border: ['logical.border-bs', 'logical.border-be', 'logical.border-is', 'logical.border-ie'],
+      },
+    },
+  });
+};