Update font for inputs

Use the font on the current page for input elements.

categories/choice/react/src/components/ComboBox/index.tsx

@@ -117,7 +117,7 @@ export const ComboBox = React.forwardRef<ComboBoxDerivedElement, ComboBoxProps>(
           list={datalistId}
           data-testid="input"
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block',
+            'bg-negative rounded-inherit w-full peer block font-inherit',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {

categories/choice/react/src/components/DropdownSelect/index.tsx

@@ -88,7 +88,7 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
         aria-labelledby={labelId}
         data-testid="input"
         className={clsx(
-          'tesseract-design-dropdown-select bg-negative rounded-inherit w-full peer block appearance-none cursor-pointer select-none',
+          'tesseract-design-dropdown-select bg-negative rounded-inherit w-full peer block appearance-none cursor-pointer select-none font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/choice/react/src/components/MenuSelect/index.tsx

@@ -96,7 +96,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
           height: startingHeight,
         }}
         className={clsx(
-          'tesseract-design-menu-select bg-negative rounded-inherit w-full peer block overflow-auto cursor-pointer',
+          'tesseract-design-menu-select bg-negative rounded-inherit w-full peer block overflow-auto cursor-pointer font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/choice/react/src/components/RadioTickBox/index.tsx

@@ -91,7 +91,7 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
       </label>
       {subtext && (
         <div
-          className="block w-full font-semi-expanded text-xs pl-10 order-3"
+          className="block w-full text-xs pl-10 order-3"
           data-testid="subtext"
         >
           {subtext}

categories/formatted/react/src/components/EmailInput/index.tsx

@@ -85,7 +85,7 @@ export const EmailInput = React.forwardRef<EmailInputDerivedElement, EmailInputP
           type="email"
           data-testid="input"
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block',
+            'bg-negative rounded-inherit w-full peer block font-inherit',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {

categories/formatted/react/src/components/PhoneNumberInput/index.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import { delegateTriggerEvent, useClientSide } from '@modal-sh/react-utils';
-import PhoneInput, {Country, Value} from 'react-phone-number-input/input';
+import PhoneInput, { Country, Value } from 'react-phone-number-input/input';
 import clsx from 'clsx';
 
 export type PhoneNumberInputDerivedElement = HTMLInputElement;
@@ -96,7 +96,7 @@ export const PhoneNumberInput = React.forwardRef<
   };
 
   const commonInputStyles = clsx(
-    'bg-negative rounded-inherit w-full peer block',
+    'bg-negative rounded-inherit w-full peer block font-inherit',
     'focus:outline-0',
     'disabled:opacity-50 disabled:cursor-not-allowed',
     {
@@ -253,11 +253,11 @@ PhoneNumberInput.defaultProps = {
   label: undefined,
   hint: undefined,
   indicator: undefined,
-  size: 'medium',
-  border: false,
-  block: false,
-  variant: 'default',
-  hiddenLabel: false,
-  enhanced: false,
-  defaultCountry: 'PH',
+  size: 'medium' as const,
+  border: false as const,
+  block: false as const,
+  variant: 'default' as const,
+  hiddenLabel: false as const,
+  enhanced: false as const,
+  defaultCountry: 'PH' as const,
 };

categories/formatted/react/src/components/UrlInput/index.tsx

@@ -84,7 +84,7 @@ export const UrlInput = React.forwardRef<UrlInputDerivedElement, UrlInputProps>(
         type="url"
         data-testid="input"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block',
+          'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/freeform/react/src/components/MaskedTextInput/index.tsx

@@ -87,7 +87,7 @@ export const MaskedTextInput = React.forwardRef<
         type="password"
         data-testid="input"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block',
+          'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/freeform/react/src/components/MultilineTextInput/index.tsx

@@ -91,7 +91,7 @@ export const MultilineTextInput = React.forwardRef<
           height: 0,
         }}
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block',
+          'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/freeform/react/src/components/TextInput/index.tsx

@@ -104,7 +104,7 @@ export const TextInput = React.forwardRef<TextInputDerivedElement, TextInputProp
         inputMode={resultInputMode}
         data-testid="input"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block',
+          'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/multichoice/react/src/components/MenuMultiSelect/index.tsx

@@ -96,7 +96,7 @@ export const MenuMultiSelect = React.forwardRef<
           height: startingHeight,
         }}
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block overflow-auto',
+          'bg-negative rounded-inherit w-full peer block overflow-auto font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

categories/multichoice/react/src/components/TagInput/index.tsx

@@ -239,7 +239,7 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
         }}
         tabIndex={clientSide ? -1 : undefined}
         className={clsx(
-          'bg-negative rounded-inherit peer block',
+          'bg-negative rounded-inherit peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {
@@ -287,8 +287,8 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
         <TagsInput
           value={tags}
           classNames={{
-            input: 'peer bg-transparent',
-            tag: 'text-xs p-2 select-none',
+            input: 'peer bg-transparent font-inherit',
+            tag: 'text-xs p-2 select-none font-inherit',
           }}
           isEditOnRemove={editOnRemove}
           placeHolder={placeholder}

categories/multichoice/react/src/components/ToggleSwitch/index.tsx

@@ -103,7 +103,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
       {subtext && (
         <div
           className={clsx(
-            'block w-full font-semi-expanded text-xs order-4',
+            'block w-full text-xs order-4',
             !uncheckedLabel && 'pl-16',
             uncheckedLabel && 'pt-2',
           )}

categories/multichoice/react/src/components/ToggleTickBox/index.tsx

@@ -107,7 +107,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
       </label>
       {subtext && (
         <div
-          className="block w-full font-semi-expanded text-xs pl-10 order-3"
+          className="block w-full text-xs pl-10 order-3"
           data-testid="subtext"
         >
           {subtext}

categories/navigation/react/src/components/LinkButton/index.tsx

@@ -35,7 +35,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
     {...etcProps}
     ref={forwardedRef}
     className={clsx(
-      'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none',
+      'items-center justify-center rounded overflow-hidden ring-secondary/50 leading-none select-none no-underline',
       'focus:outline-0 focus:ring-4',
       'active:ring-tertiary/50',
       {
@@ -51,7 +51,7 @@ export const LinkButton = React.forwardRef<LinkButtonDerivedElement, LinkButtonP
       {
         'border-2 border-primary focus:border-secondary active:border-tertiary': variant !== 'bare',
         'bg-negative text-primary focus:text-secondary active:text-tertiary': variant !== 'filled',
-        'bg-primary text-negative focus:bg-secondary active:bg-tertiary': variant === 'filled',
+        'bg-primary text-negative focus:bg-secondary active:bg-tertiary focus:text-negative active:text-negative': variant === 'filled',
       },
       {
         'h-10': size === 'small',

categories/number/react/package.json

@@ -81,4 +81,4 @@
   "typesVersions": {
     "*": {}
   }
-}
+}

categories/number/react/src/components/Spinner/index.tsx

@@ -82,7 +82,7 @@ export const Spinner = React.forwardRef<SpinnerDerivedElement, SpinnerProps>((
         type="number"
         data-testid="input"
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block tabular-nums',
+          'bg-negative rounded-inherit w-full peer block tabular-nums font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           'tesseract-design-spinner',

categories/temporal/react/src/components/DateDropdown/index.tsx

@@ -101,7 +101,7 @@ export const DateDropdown = React.forwardRef<
         onFocus={handleFocus}
         onClick={handleClick}
         className={clsx(
-          'bg-negative rounded-inherit w-full peer block',
+          'bg-negative rounded-inherit w-full peer block font-inherit',
           'focus:outline-0',
           'disabled:opacity-50 disabled:cursor-not-allowed',
           {

packages/react-refractor/package.json

@@ -82,4 +82,4 @@
   "typesVersions": {
     "*": {}
   }
-}
+}

packages/react-refractor/scripts/build.ts

@@ -1,4 +1,4 @@
-import { copyFileSync } from 'fs';
+import {copyFileSync, readFileSync, writeFileSync} from 'fs';
 import { resolve } from 'path';
 
 const doCopy = (src: string, dest: string) => {
@@ -7,6 +7,12 @@ const doCopy = (src: string, dest: string) => {
   console.log('Copying...');
   console.log(`${trueSrc} -> ${trueDest}`);
   copyFileSync(trueSrc, trueDest);
+  const packageJsonContents = readFileSync('./package.json', 'utf-8');
+  const packageJson = JSON.parse(packageJsonContents);
+  packageJson.exports[dest] = dest;
+  const newPackageJsonContents = JSON.stringify(packageJson, null, 2);
+  console.log('Updating package.json...');
+  writeFileSync('./package.json', newPackageJsonContents);
   console.log('Done');
 }
 

showcases/web-kitchensink-reactnext/react-refractor.d.ts

@@ -1,5 +0,0 @@
-declare module 'react-refractor/all' {
-  import { Props } from 'react-refractor';
-
-  export default function Refractor(props: Props): JSX.Element;
-}

showcases/web-kitchensink-reactnext/src/styles/globals.css

@@ -38,10 +38,31 @@
     font-size: 0.75em;
   }
 
+  a {
+    @apply ring-secondary/50 rounded text-primary p-1 -m-1 underline;
+  }
+
+  a.no-underline {
+    text-decoration: none;
+  }
+
   a:focus {
+    @apply ring-4 text-secondary;
     outline: 0;
   }
 
+  a:active {
+    @apply ring-tertiary/50 text-tertiary;
+  }
+
+  a.focus\:text-negative:focus {
+    color: rgb(var(--color-negative));
+  }
+
+  a.active\:text-negative:active {
+    color: rgb(var(--color-negative));
+  }
+
   /*pre {*/
   /*  overflow: auto;*/
   /*  margin: 0 -1rem;*/
@@ -87,6 +108,10 @@
     font-stretch: semi-expanded;
   }
 
+  .font-inherit {
+    font-stretch: inherit;
+  }
+
   .linejoin-round {
     stroke-linejoin: round;
   }

showcases/web-kitchensink-reactnext/tailwind.config.js

@@ -13,6 +13,7 @@ module.exports = {
       sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
       headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
       mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
+      inherit: ['inherit'],
     },
     colors: {
       'shade': 'rgb(var(--color-shade))',

showcases/web-kitchensink-reactnext/tsconfig.json

@@ -17,8 +17,6 @@
     "paths": {
       "@/*": ["./src/*"],
       "tailwind.config": ["./tailwind.config.js"],
-      "@tesseract-design/web-blob-react": ["./src/categories/blob/react"],
-      "@modal-sh/*": ["./src/packages/*"],
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],