@infonomic/uikit 2.0.0 → 2.1.1

package/src/styles/theme/autofill.css

@@ -0,0 +1,58 @@
+@layer infonomic-theme {
+  /* input:-webkit-autofill, input:autofill,
+input:-webkit-autofill:hover, input:autofill:hover,
+input:-webkit-autofill:focus, input:autofill:focus,
+textarea:-webkit-autofill, textarea:autofill,
+textarea:-webkit-autofill:hover,textarea:autofill:hover,
+textarea:-webkit-autofill:focus,textarea:autofill:focus,
+select:-webkit-autofill, select:autofill,
+select:-webkit-autofill:hover,select:autofill:hover,
+select:-webkit-autofill:focus, select:autofill:focus {
+  border: none;
+  -webkit-text-fill-color: #ffb74d !important;
+  -webkit-box-shadow: none !important;
+  transition: background-color 5000s ease-in-out 0s;
+} */
+
+  input:autofill,
+  input:autofill:hover,
+  input:autofill:focus,
+  textarea:autofill,
+  textarea:autofill:hover,
+  textarea:autofill:focus,
+  select:autofill,
+  select:autofill:hover,
+  select:autofill:focus {
+    border: 1px solid #d89d3d !important;
+    -webkit-text-fill-color: black !important;
+    -webkit-box-shadow: 0 0 0px 1000px #fff2dc inset !important;
+    box-shadow: 0 0 0px 1000px #fff2dc inset !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+    color: black !important;
+    background-color: rgb(250, 217, 167) !important;
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the 
+   * consuming application to detect a user's preferred
+   * color scheme - either by header or cookie. and set
+   * a root html class accordingly
+   */
+
+  .dark input:autofill,
+  .dark input:autofill:hover,
+  .dark input:autofill:focus,
+  .dark textarea:autofill,
+  .dark textarea:autofill:hover,
+  .dark textarea:autofill:focus,
+  .dark select:autofill,
+  .dark select:autofill:hover,
+  .dark select:autofill:focus {
+    border: 1px solid var(--theme-600) !important;
+    -webkit-text-fill-color: white !important;
+    -webkit-box-shadow: 0 0 0px 1000px var(--theme-600) inset !important;
+    box-shadow: 0 0 0px 1000px var(--theme-600) inset !important;
+    transition: background-color 5000s ease-in-out 0s !important;
+    color: white !important;
+    background-color: rgba(100, 100, 100, 0.5) !important;
+  }
+}

package/src/styles/theme/scrollers.css

@@ -0,0 +1,52 @@
+@layer infonomic-theme {
+  :root {
+    --scroll-bar-thumb: var(--theme-400);
+    --scroll-bar-track: var(--theme-600);
+  }
+
+  /* rgb(44, 47, 86) = theme secondary 900  */
+  :root.dark {
+    --scroll-bar-thumb: var(--canvas-700);
+    --scroll-bar-track: var(--canvas-900);
+  }
+
+  /* For Google Chrome */
+  ::-webkit-scrollbar {
+    width: 0.6em;
+    height: 0.6em;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--scroll-bar-thumb);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--scroll-bar-track);
+  }
+
+  ::-webkit-scrollbar-corner {
+    background: var(--scroll-bar-track);
+  }
+
+  /* Firefox */
+  html {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+  }
+
+  .component--scroller {
+    --scroll-bar-thumb: var(--scroll-bar-thumb);
+    --scroll-bar-track: var(--scroll-bar-track);
+  }
+
+  .dark .component--scroller {
+    --scroll-bar-thumb: var(--scroll-bar-thumb);
+    --scroll-bar-track: var(--scroll-bar-track);
+  }
+
+  .component--scroller {
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--scroll-bar-thumb) var(--scroll-bar-track);
+  }
+}

package/src/styles/theme/theme.css

@@ -0,0 +1,130 @@
+@import "./autofill.css";
+@import "./scrollers.css";
+
+@layer infonomic-theme {
+  :root {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --text: var(--gray-900);
+    --headings: var(--primary-700);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --border-color: var(--gray-100);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--primary-500);
+
+    --invert-background: var(--canvas-900);
+    --invert-foreground: var(--gray-50);
+    --invert-text: var(--gray-50);
+    --invert-headings: var(--gray-50);
+    --invert-muted: oklch(from var(--foreground) calc(l * 0.75) c h);
+    --invert-border-color: var(--canvas-700);
+    --invert-shadow: var(--shadow-lg);
+    --invert-loader-color: var(--gray-50);
+  }
+
+  /* 🌙 Dark via `.dark` class. We rely on the consuming 
+   * application to detect a user's preferred color scheme 
+   * - either by header or cookie, and to set a root html 
+   * class accordingly
+   */
+  .dark {
+    --background: var(--invert-background);
+    --foreground: var(--invert-foreground);
+    --text: var(--invert-text);
+    --headings: var(--invert-headings);
+    --border-color: var(--invert-border-color);
+    --shadow: var(--invert-shadow);
+    --muted: var(--invert-muted);
+    --loader-color: var(--invert-loader-color);
+  }
+
+  /* Brute force our not-dark class for now until we figure out
+   * a better way to do this. Note - the following does NOT work:
+   .dark:not(:where([class~="not-dark"], [class~="not-dark"] *)) {
+   */
+  .not-dark {
+    --background: var(--canvas-25);
+    --foreground: var(--gray-900);
+    --text: var(--gray-900);
+    --headings: var(--primary-800);
+    --muted: oklch(from var(--foreground) calc(l * 2) c h);
+    --border-color: var(--gray-100);
+    --shadow: var(--shadow-md);
+    --loader-color: var(--primary-500);
+  }
+
+  html {
+    font-size: 1rem;
+    color: var(--text);
+  }
+
+  /* Redeclared here to change the specificity and scope of --prose-body */
+  html .not-dark {
+    color: var(--text);
+  }
+
+  /* Default (light mode) */
+  ::selection {
+    background-color: var(--theme-600);
+    color: white;
+  }
+
+  /* Dark mode */
+  .dark ::selection {
+    background-color: var(--theme-200);
+    color: var(--gray-900);
+  }
+
+  .background {
+    background-color: var(--background);
+  }
+
+  .foreground {
+    color: var(--foreground);
+  }
+
+  .text {
+    color: var(--text);
+  }
+
+  .headings {
+    color: var(--headings);
+  }
+
+  .muted {
+    font-size: 0.925rem;
+    color: var(--muted);
+  }
+
+  .shadow {
+    box-shadow: var(--shadow);
+  }
+
+  .border-color {
+    border-color: var(--border-color);
+  }
+
+  .border {
+    border-color: var(--border-color);
+    border-width: var(--border-width-thin);
+    border-style: var(--border-style-solid);
+    border-radius: var(--border-radius-sm);
+  }
+
+  /* External link */
+  .external-link::after {
+    content: "";
+    display: inline-block;
+    background-image: url("/external-link-light.svg");
+    background-repeat: no-repeat;
+    background-position: 20% 50%;
+    background-size: 65% auto;
+    width: 1.1rem;
+    height: 1.1rem;
+    margin-right: -5px;
+  }
+
+  .dark .external-link::after {
+    background-image: url("/external-link-dark.svg");
+  }
+}

package/src/styles/theme/theme.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Base = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: 'auto' }}>
+          <div className="shadow p-3 border rounded">
+            <h2>Heading 2</h2>
+            <span className="muted">Muted text here.</span>
+            <p>
+              This is a paragraph of text that we&apos;ll use for our theme storybook page. This is
+              a paragraph of text that we&apos;ll use for our theme storybook page. This is a
+              paragraph of text that we&apos;ll use for our theme storybook page. This is a
+              paragraph of text that we&apos;ll use for our theme storybook page.
+            </p>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Theme',
+  component: Base,
+}
+
+export default meta

package/src/styles/typography/code.stories.tsx

@@ -0,0 +1,76 @@
+import type { Meta } from '@storybook/react-vite'
+
+import { Highlight, themes } from 'prism-react-renderer'
+
+const code = `const x = 'foo';
+function printFoo() {
+  console.log(x);
+}
+printFoo();`
+
+type CodeIntrinsicProps = React.JSX.IntrinsicElements['pre']
+interface CodeProps extends CodeIntrinsicProps {
+  className?: string
+  title?: string
+  code: string
+  language?: string
+}
+
+function CodeDemo({ code, className, language = 'jsx' }: CodeProps): React.JSX.Element {
+  return (
+    <Highlight theme={themes.nightOwl} code={code} language={language}>
+      {({ tokens, getLineProps, getTokenProps }) => (
+        <pre style={{ backgroundColor: 'var(--canvas-800)' }} className={className}>
+          {tokens.map((line, i) => {
+            const lineProps = getLineProps({ line, key: i })
+            return (
+              // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+              <div {...lineProps} key={i} style={{ lineHeight: 1.3 }}>
+                <span style={{ marginLeft: '-8px', marginRight: '12px' }}>{i + 1}</span>
+                {line.map((token, key) => (
+                  // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
+                  <span key={key} {...getTokenProps({ token })} />
+                ))}
+              </div>
+            )
+          })}
+        </pre>
+      )}
+    </Highlight>
+  )
+}
+
+export const Code = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+          <h1>Heading 1</h1>
+          <p>
+            This is a <code>inline code here</code> of text that we&apos;ll use for our typography
+            and code storybook page. This is a paragraph of text that we&apos;ll use for our
+            typography and code storybook page. Here is a code block...
+          </p>
+          <CodeDemo code={code} />
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Code,
+}
+
+export default meta

package/src/styles/typography/default.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Default = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+          <h1>Heading 1 - With Some More Text to Test on Mobile</h1>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+          <h2>Heading 2 - With Some More Text to Test on Mobile</h2>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+          <h3>Heading 3 - With Some More Text to Test on Mobile</h3>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+          <h4>Heading 4 - With Some More Text to Test on Mobile</h4>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Default,
+}
+
+export default meta

package/src/styles/typography/fonts.css

@@ -0,0 +1,30 @@
+@layer infonomic-typography {
+  :root {
+    --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    --font-display: "Roboto", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+
+    --font-serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
+
+    --font-mono: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+      "Liberation Mono", "Courier New", monospace;
+  }
+
+  .sans {
+    font-family: var(--font-sans);
+  }
+
+  .serif {
+    font-family: var(--font-serif);
+  }
+
+  .mono {
+    font-family: var(--font-mono);
+  }
+
+  .display {
+    font-family: var(--font-display);
+  }
+}

package/src/styles/typography/lists.stories.tsx

@@ -0,0 +1,50 @@
+import type { Meta } from '@storybook/react-vite'
+
+export const Lists = (): React.JSX.Element => {
+  return (
+    <>
+      <div style={{ marginBottom: '48px' }}>
+        <div style={{ maxWidth: '700px', margin: 'auto' }} className="prose">
+          <h1>Lists</h1>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+          <ol>
+            <li>One - item in a list here</li>
+            <li>Two - item in a list here</li>
+            <li>Three - item in a list here</li>
+            <li>Four - item in a list here</li>
+            <li>Five - item in a list here</li>
+          </ol>
+          <p>
+            This is a paragraph of text that we&apos;ll use for our typography storybook page. This
+            is a paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page. This is a
+            paragraph of text that we&apos;ll use for our typography storybook page.
+          </p>
+          <ul>
+            <li>Item - item in a list here</li>
+            <li>Item - item in a list here</li>
+            <li>Item - item in a list here</li>
+            <li>Item - item in a list here</li>
+            <li>Item - item in a list here</li>
+          </ul>
+        </div>
+      </div>
+    </>
+  )
+}
+
+const meta: Meta = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Typography',
+  component: Lists,
+}
+
+export default meta