tesseract-design
/
tesseract
1
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

Fix styles 

Ensure styles are consistent per platform.
pull/1/head
TheoryOfNekomata 1 year ago
parent
68a554b442
commit
65889ada1f
12 changed files with 368 additions and 375 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +3
    -3
      packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx
  2. +2
    -2
      packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx
  3. +1
    -8
      packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx
  4. +1
    -8
      packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx
  5. +11
    -5
      packages/web-kitchensink-reactnext/src/pages/_document.tsx
  6. +221
    -223
      packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx
  7. +1
    -3
      packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx
  8. +20
    -22
      packages/web-kitchensink-reactnext/src/pages/index.tsx
  9. +75
    -0
      packages/web-kitchensink-reactnext/src/styles/globals.css
  10. +2
    -81
      packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css
  11. +21
    -18
      packages/web-kitchensink-reactnext/src/styles/theme.ts
  12. +10
    -2
      packages/web-kitchensink-reactnext/tailwind.config.js

+ 3
- 3
packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx View File

@@ -124,8 +124,8 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
data-testid="preview" data-testid="preview"
barWidth={1} barWidth={1}
barGap={1} barGap={1}
progressColor={`rgb(${theme.primary})`}
waveColor={`rgb(${theme.primary.split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
progressColor={`rgb(${theme['color-primary']})`}
waveColor={`rgb(${theme['color-primary'].split(' ').map((c) => Math.floor(Number(c) / 2)).join(' ')})`}
interact interact
// waveColor={`rgb(${theme.primary})`} // waveColor={`rgb(${theme.primary})`}
// barHeight={4} // barHeight={4}
@@ -143,7 +143,7 @@ export const AudioFilePreview = React.forwardRef<AudioFilePreviewDerivedComponen
data-testid="preview" data-testid="preview"
barWidth={1} barWidth={1}
barGap={1} barGap={1}
waveColor={`rgb(${theme.primary})`}
waveColor={`rgb(${theme['color-primary']})`}
cursorWidth={2} cursorWidth={2}
minPxPerSec={20000} minPxPerSec={20000}
hideScrollbar hideScrollbar


+ 2
- 2
packages/web-kitchensink-reactnext/src/components/DefaultLayout/index.tsx View File

@@ -21,11 +21,11 @@ export const DefaultLayout: FC<DefaultLayoutProps> = ({
{ {
title title
&& ( && (
<meta name="display-title" className="block" content={title} />
<meta name="display-title" className="block lowercase text-6xl font-headings container mx-auto px-4 font-thin" content={title} />
) )
} }
</Head> </Head>
<main className="mt-8 mb-16 md:mt-16 md:mb-32">
<main>
{children} {children}
</main> </main>
</> </>


+ 1
- 8
packages/web-kitchensink-reactnext/src/packages/react-binary-data-canvas/index.tsx View File

@@ -44,6 +44,7 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
return ( return (
<div <div
className={clsx( className={clsx(
'binary-file-preview',
className, className,
)} )}
style={{ style={{
@@ -56,9 +57,6 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
{headers && ( {headers && (
<pre <pre
style={{ style={{
padding: 0,
overflow: 'visible',
margin: 0,
textAlign: 'right', textAlign: 'right',
}} }}
> >
@@ -83,11 +81,6 @@ export const BinaryDataCanvas = React.forwardRef<BinaryDataCanvasDerivedElement,
<pre <pre
{...etcProps} {...etcProps}
ref={forwardedRef} ref={forwardedRef}
style={{
padding: 0,
overflow: 'visible',
margin: 0,
}}
> >
<code> <code>
{headers && new Array(BYTES_PER_LINE).fill(0).map((_, i) => ( {headers && new Array(BYTES_PER_LINE).fill(0).map((_, i) => (


+ 1
- 8
packages/web-kitchensink-reactnext/src/packages/react-prism/index.tsx View File

@@ -34,18 +34,11 @@ export const Prism = React.forwardRef<PrismDerivedElement, PrismProps>(({
'react-prism', 'react-prism',
className, className,
)} )}
style={{
...(style ?? {}),

}}
style={style}
> >
{lineNumbers && ( {lineNumbers && (
<pre <pre
style={{ style={{
padding: 0,
overflow: 'visible',
margin: 0,
lineHeight: 1.2,
textAlign: 'right', textAlign: 'right',
}} }}
> >


+ 11
- 5
packages/web-kitchensink-reactnext/src/pages/_document.tsx View File

@@ -3,11 +3,17 @@ import theme from '@/styles/theme'


export default function Document() { export default function Document() {
return ( return (
<Html lang="en" className="bg-negative text-positive">
<Head>
<style>
{`:root{${Object.entries(theme).map(([key, value]) => `--color-${key}: ${value};`).join('')}}`}
</style>
<Html lang="en" className="bg-negative text-positive mt-8 mb-16 md:mt-16 md:mb-32">
<Head className="block">
<style
dangerouslySetInnerHTML={{
__html: `
:root {
${Object.entries(theme).map(([name, value]) => `--${name}: ${value};`).join('\n')}
}
`,
}}
/>
</Head> </Head>
<body> <body>
<Main /> <Main />


+ 221
- 223
packages/web-kitchensink-reactnext/src/pages/categories/action/index.tsx View File

@@ -8,236 +8,234 @@ const ActionPage: NextPage = () => {
<DefaultLayout <DefaultLayout
title="Action" title="Action"
> >
<main className="mt-8 mb-16 md:mt-16 md:mb-32">
<section>
<div className="container mx-auto px-4">
<h1>
ActionButton
</h1>
<div>
<section>
<h2>Variants</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
variant="bare"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="outline"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="bare"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="outline"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
disabled
>
Button
</Action.ActionButton>
</div>
<section>
<div className="container mx-auto px-4">
<h1>
ActionButton
</h1>
<div>
<section>
<h2>Variants</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
variant="bare"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="outline"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="bare"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="outline"
block
disabled
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
variant="filled"
block
disabled
>
Button
</Action.ActionButton>
</div> </div>
</div> </div>
</section>
<section>
<h2>Sizes</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
block
variant="outline"
size="small"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="small"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="outline"
size="medium"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="medium"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="outline"
size="large"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="large"
>
Button
</Action.ActionButton>
</div>
</div>
</section>
<section>
<h2>Sizes</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
block
variant="outline"
size="small"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="small"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="outline"
size="medium"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="medium"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="outline"
size="large"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
variant="filled"
size="large"
>
Button
</Action.ActionButton>
</div> </div>
</div> </div>
</section>
<section>
<h2>Compact</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
block
compact
variant="outline"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="outline"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="outline"
size="small"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
size="small"
subtext={
<>
Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
</>
}
>
Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
</Action.ActionButton>
</div>
</div>
</section>
<section>
<h2>Compact</h2>
<div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 my-4">
<div>
<Action.ActionButton
block
compact
variant="outline"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="outline"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="outline"
size="small"
subtext={
<>
Subtext
</>
}
>
Button
</Action.ActionButton>
</div>
<div>
<Action.ActionButton
block
compact
variant="filled"
size="small"
subtext={
<>
Very Long Line of Subtext That Spans More Than The Component Width For Testing Overflow
</>
}
>
Very Long Line of Text That Spans More Than The Component Width For Testing Overflow
</Action.ActionButton>
</div> </div>
</div> </div>
</section>
</div>
</div>
</section>
</div> </div>
</section>
</main>
</div>
</section>
</DefaultLayout> </DefaultLayout>
) )
} }


+ 1
- 3
packages/web-kitchensink-reactnext/src/pages/categories/blob/index.tsx View File

@@ -75,7 +75,7 @@ const BlobPage: NextPage = () => {
}, []); }, []);


return ( return (
<DefaultLayout>
<DefaultLayout title="Blob">
<Section title="ImageFilePreview"> <Section title="ImageFilePreview">
<Subsection title="Single File"> <Subsection title="Single File">
<BlobReact.ImageFilePreview <BlobReact.ImageFilePreview
@@ -153,8 +153,6 @@ const BlobPage: NextPage = () => {
className="sm:h-64" className="sm:h-64"
/> />
</Subsection> </Subsection>
</Section>
<Section title="TextFilePreview">
<Subsection title="Single File (Code)"> <Subsection title="Single File (Code)">
<BlobReact.TextFilePreview <BlobReact.TextFilePreview
file={ file={


+ 20
- 22
packages/web-kitchensink-reactnext/src/pages/index.tsx View File

@@ -41,32 +41,30 @@ const IndexPage: NextPage<Props> = ({
<DefaultLayout <DefaultLayout
title="Kitchen Sink" title="Kitchen Sink"
> >
<main className="mt-8 mb-16 md:mt-16 md:mb-32">
<section>
<div className="container mx-auto px-4">
<h1>
Components
</h1>
<div>
<div className="grid md:grid-cols-2 gap-4 my-4">
{componentPages.map(createPageLink)}
</div>
<section>
<div className="container mx-auto px-4">
<h1>
Components
</h1>
<div>
<div className="grid md:grid-cols-2 gap-4 my-4">
{componentPages.map(createPageLink)}
</div> </div>
</div> </div>
</section>
<section>
<div className="container mx-auto px-4">
<h1>
Examples
</h1>
<div>
<div className="grid md:grid-cols-2 gap-4 my-4">
{examplePages.map(createPageLink)}
</div>
</div>
</section>
<section>
<div className="container mx-auto px-4">
<h1>
Examples
</h1>
<div>
<div className="grid md:grid-cols-2 gap-4 my-4">
{examplePages.map(createPageLink)}
</div> </div>
</div> </div>
</section>
</main>
</div>
</section>
</DefaultLayout> </DefaultLayout>
) )
} }


+ 75
- 0
packages/web-kitchensink-reactnext/src/styles/globals.css View File

@@ -1,6 +1,75 @@
@tailwind base; @tailwind base;
@tailwind utilities; @tailwind utilities;


@layer base {
body {
margin: 0;
}

h1 {
@apply font-headings lowercase text-5xl font-thin;
}

h2 {
@apply font-headings lowercase text-4xl font-light;
}

h3 {
@apply font-headings lowercase text-3xl;
}

h4 {
@apply font-headings lowercase text-2xl;
}

h5 {
@apply font-headings lowercase text-xl;
}

h6 {
@apply font-headings lowercase text-lg;
}

p {
margin: 2em 0;
}

small {
font-size: 0.75em;
}

a:focus {
outline: 0;
}

/*pre {*/
/* overflow: auto;*/
/* margin: 0 -1rem;*/
/* padding: 0 1rem;*/
/* line-height: 1.2;*/
/* box-sizing: border-box;*/
/*}*/

@media only print {
pre, pre * {
color: inherit !important;
}

code, code * {
color: inherit !important;
}

img {
filter: grayscale(100%);
}

:root {
--color-accent: black !important;
--color-active: black !important;
}
}
}

@layer utilities { @layer utilities {
.font-condensed { .font-condensed {
font-stretch: condensed; font-stretch: condensed;
@@ -35,6 +104,9 @@


.react-prism pre { .react-prism pre {
overflow: visible; overflow: visible;
padding: 0;
margin: 0;
line-height: 1.2;
} }


.react-prism .token.number { color: rgb(var(--color-code-number)); } .react-prism .token.number { color: rgb(var(--color-code-number)); }
@@ -53,6 +125,9 @@


.binary-file-preview pre { .binary-file-preview pre {
overflow: visible; overflow: visible;
padding: 0;
margin: 0;
line-height: 1.2;
} }


.binary-file-preview .x00 { color: rgb(var(--color-code-keyword)); } .binary-file-preview .x00 { color: rgb(var(--color-code-keyword)); }


+ 2
- 81
packages/web-kitchensink-reactnext/src/styles/kitchen-sink.css View File

@@ -1,15 +1,7 @@
body {
margin: 0;
}

title {
font-size: 4em;
text-transform: lowercase;
}
/* kitchen-sink styles */


meta[name="display-title"] { meta[name="display-title"] {
font-size: 4em;
text-transform: lowercase;
max-width: 720px;
} }


meta[name="display-title"]::before { meta[name="display-title"]::before {
@@ -17,77 +9,6 @@ meta[name="display-title"]::before {
content: attr(content); content: attr(content);
} }


h1 {
font-size: 3em;
text-transform: lowercase;
}

h2 {
font-size: 2em;
text-transform: lowercase;
}

h3 {
font-size: 1.75em;
text-transform: lowercase;
}

h4 {
font-size: 1.5em;
text-transform: lowercase;
}

h5 {
font-size: 1.25em;
text-transform: lowercase;
}

h6 {
font-size: 1.125em;
text-transform: lowercase;
}

p {
margin: 2em 0;
}

small {
font-size: 0.75em;
}

a:focus {
outline: 0;
}

pre {
overflow: auto;
margin: 0 -1rem;
padding: 0 1rem;
line-height: 1.2;
box-sizing: border-box;
}

@media only print {
pre, pre * {
color: inherit !important;
}

code, code * {
color: inherit !important;
}

img {
filter: grayscale(100%);
}

:root {
--color-accent: black !important;
--color-active: black !important;
}
}

/* kitchen-sink styles */

.container { .container {
max-width: 720px; max-width: 720px;
} }

+ 21
- 18
packages/web-kitchensink-reactnext/src/styles/theme.ts View File

@@ -1,22 +1,25 @@
const theme = { const theme = {
"shade": "0 0 0",
"negative": "34 34 34",
"positive": "238 238 238",
"primary": "199 138 179",
"secondary": "215 95 75",
"tertiary": "255 153 0",
"code-number": "116 249 94",
"code-keyword": "255 67 137",
"code-type": "80 151 210",
"code-instance-attribute": "118 167 210",
"code-function": "103 194 82",
"code-parameter": "145 94 194",
"code-property": "255 161 201",
"code-string": "238 211 113",
"code-variable": "139 194 117",
"code-regexp": "116 167 43",
"code-url": "0 153 204",
"code-global": "194 128 80",
"color-shade": "0 0 0",
"color-negative": "34 34 34",
"color-positive": "238 238 238",
"color-primary": "199 138 179",
"color-secondary": "215 95 75",
"color-tertiary": "255 153 0",
"color-code-number": "116 249 94",
"color-code-keyword": "255 67 137",
"color-code-type": "80 151 210",
"color-code-instance-attribute": "118 167 210",
"color-code-function": "103 194 82",
"color-code-parameter": "145 94 194",
"color-code-property": "255 161 201",
"color-code-string": "238 211 113",
"color-code-variable": "139 194 117",
"color-code-regexp": "116 167 43",
"color-code-url": "0 153 204",
"color-code-global": "194 128 80",
"font-sans": '"Encode Sans"',
"font-headings": 'Glory, var(--font-sans)',
"font-mono": 'MonoLisa, mononoki',
} as const; } as const;


export default theme; export default theme;

+ 10
- 2
packages/web-kitchensink-reactnext/tailwind.config.js View File

@@ -9,8 +9,9 @@ module.exports = {
], ],
theme: { theme: {
fontFamily: { fontFamily: {
sans: ['Encode Sans', ...defaultTheme.fontFamily.sans],
mono: ['MonoLisa', 'mononoki', ...defaultTheme.fontFamily.mono],
sans: ['var(--font-sans)', ...defaultTheme.fontFamily.sans],
headings: ['var(--font-headings)', ...defaultTheme.fontFamily.sans],
mono: ['var(--font-mono)', ...defaultTheme.fontFamily.mono],
}, },
colors: { colors: {
'shade': 'rgb(var(--color-shade))', 'shade': 'rgb(var(--color-shade))',
@@ -36,6 +37,13 @@ module.exports = {
}, },
extend: { extend: {
fontSize: { fontSize: {
'lg': '1.125em',
'xl': '1.25em',
'2xl': '1.5em',
'3xl': '1.75em',
'4xl': '2em',
'5xl': '3em',
'6xl': '4em',
'xxs': '0.625rem', 'xxs': '0.625rem',
}, },
borderRadius: { borderRadius: {


Write Preview
Loading…
Cancel
Save