From cfe7a13cc45715c003944613764d742f98678405 Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sun, 9 Jul 2023 13:42:58 +0800 Subject: [PATCH] Update font for inputs Use the font on the current page for input elements. --- .../react/src/components/ComboBox/index.tsx | 2 +- .../src/components/DropdownSelect/index.tsx | 2 +- .../react/src/components/MenuSelect/index.tsx | 2 +- .../src/components/RadioTickBox/index.tsx | 2 +- .../react/src/components/EmailInput/index.tsx | 2 +- .../src/components/PhoneNumberInput/index.tsx | 18 ++++++------- .../react/src/components/UrlInput/index.tsx | 2 +- .../src/components/MaskedTextInput/index.tsx | 2 +- .../components/MultilineTextInput/index.tsx | 2 +- .../react/src/components/TextInput/index.tsx | 2 +- .../src/components/MenuMultiSelect/index.tsx | 2 +- .../react/src/components/TagInput/index.tsx | 6 ++--- .../src/components/ToggleSwitch/index.tsx | 2 +- .../src/components/ToggleTickBox/index.tsx | 2 +- .../react/src/components/LinkButton/index.tsx | 4 +-- categories/number/react/package.json | 2 +- .../react/src/components/Spinner/index.tsx | 2 +- .../src/components/DateDropdown/index.tsx | 2 +- packages/react-refractor/package.json | 2 +- packages/react-refractor/scripts/build.ts | 8 +++++- .../react-refractor.d.ts | 5 ---- .../src/styles/globals.css | 25 +++++++++++++++++++ .../tailwind.config.js | 1 + .../web-kitchensink-reactnext/tsconfig.json | 2 -- 24 files changed, 63 insertions(+), 38 deletions(-) delete mode 100644 showcases/web-kitchensink-reactnext/react-refractor.d.ts diff --git a/categories/choice/react/src/components/ComboBox/index.tsx b/categories/choice/react/src/components/ComboBox/index.tsx index 6c8e108..5460f70 100644 --- a/categories/choice/react/src/components/ComboBox/index.tsx +++ b/categories/choice/react/src/components/ComboBox/index.tsx @@ -117,7 +117,7 @@ export const ComboBox = React.forwardRef( 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', { diff --git a/categories/choice/react/src/components/DropdownSelect/index.tsx b/categories/choice/react/src/components/DropdownSelect/index.tsx index cd594b6..7c83fc9 100644 --- a/categories/choice/react/src/components/DropdownSelect/index.tsx +++ b/categories/choice/react/src/components/DropdownSelect/index.tsx @@ -88,7 +88,7 @@ export const DropdownSelect = React.forwardRef {subtext && (
{subtext} diff --git a/categories/formatted/react/src/components/EmailInput/index.tsx b/categories/formatted/react/src/components/EmailInput/index.tsx index 36073e7..e365bfb 100644 --- a/categories/formatted/react/src/components/EmailInput/index.tsx +++ b/categories/formatted/react/src/components/EmailInput/index.tsx @@ -85,7 +85,7 @@ export const EmailInput = React.forwardRef( 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', { diff --git a/categories/freeform/react/src/components/MaskedTextInput/index.tsx b/categories/freeform/react/src/components/MaskedTextInput/index.tsx index d89fe99..53fc30c 100644 --- a/categories/freeform/react/src/components/MaskedTextInput/index.tsx +++ b/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', { diff --git a/categories/freeform/react/src/components/MultilineTextInput/index.tsx b/categories/freeform/react/src/components/MultilineTextInput/index.tsx index 93a8c76..9642256 100644 --- a/categories/freeform/react/src/components/MultilineTextInput/index.tsx +++ b/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', { diff --git a/categories/freeform/react/src/components/TextInput/index.tsx b/categories/freeform/react/src/components/TextInput/index.tsx index 3649ac5..27ddc2d 100644 --- a/categories/freeform/react/src/components/TextInput/index.tsx +++ b/categories/freeform/react/src/components/TextInput/index.tsx @@ -104,7 +104,7 @@ export const TextInput = React.forwardRef( }} 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( {subtext && (
{subtext} diff --git a/categories/navigation/react/src/components/LinkButton/index.tsx b/categories/navigation/react/src/components/LinkButton/index.tsx index b0499eb..b0ddd57 100644 --- a/categories/navigation/react/src/components/LinkButton/index.tsx +++ b/categories/navigation/react/src/components/LinkButton/index.tsx @@ -35,7 +35,7 @@ export const LinkButton = React.forwardRef(( 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', diff --git a/categories/temporal/react/src/components/DateDropdown/index.tsx b/categories/temporal/react/src/components/DateDropdown/index.tsx index 0dc448b..0f6bf39 100644 --- a/categories/temporal/react/src/components/DateDropdown/index.tsx +++ b/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', { diff --git a/packages/react-refractor/package.json b/packages/react-refractor/package.json index 5579c19..022e33f 100644 --- a/packages/react-refractor/package.json +++ b/packages/react-refractor/package.json @@ -82,4 +82,4 @@ "typesVersions": { "*": {} } -} +} \ No newline at end of file diff --git a/packages/react-refractor/scripts/build.ts b/packages/react-refractor/scripts/build.ts index e67c1e3..206a282 100644 --- a/packages/react-refractor/scripts/build.ts +++ b/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'); } diff --git a/showcases/web-kitchensink-reactnext/react-refractor.d.ts b/showcases/web-kitchensink-reactnext/react-refractor.d.ts deleted file mode 100644 index f4161a7..0000000 --- a/showcases/web-kitchensink-reactnext/react-refractor.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'react-refractor/all' { - import { Props } from 'react-refractor'; - - export default function Refractor(props: Props): JSX.Element; -} diff --git a/showcases/web-kitchensink-reactnext/src/styles/globals.css b/showcases/web-kitchensink-reactnext/src/styles/globals.css index e986321..edd5c76 100644 --- a/showcases/web-kitchensink-reactnext/src/styles/globals.css +++ b/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; } diff --git a/showcases/web-kitchensink-reactnext/tailwind.config.js b/showcases/web-kitchensink-reactnext/tailwind.config.js index 42b55e1..c7867b6 100644 --- a/showcases/web-kitchensink-reactnext/tailwind.config.js +++ b/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))', diff --git a/showcases/web-kitchensink-reactnext/tsconfig.json b/showcases/web-kitchensink-reactnext/tsconfig.json index bea8868..612534d 100644 --- a/showcases/web-kitchensink-reactnext/tsconfig.json +++ b/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"],