@koide-labs/ui 0.0.0 → 0.0.2

package/src/integrations/react-markdown/react-markdown.stories.tsx

@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { View } from "~/components/view";
-
-import { Markdown } from "./index.tsx";
-
-const meta = {
-  title: "Integrations/Markdown",
-  component: Markdown,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof Markdown>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: `# Introduction
-
-My initial portfolio (v1) was built completely with React and Tailwind. v1.5 is somewhat of a misnomer, considering it is less of a simple upgrade and more an entire rewrite with Remix for routing and serving markdown files.
-
-![Portfolio home page](https://npham.dev/images/portfolio-home.png)
-`,
-  },
-  render: (args) => (
-    <View style={{ maxWidth: "30rem", width: "100%" }}>
-      <Markdown {...args} />
-    </View>
-  ),
-};

package/src/integrations/tailwind.css

@@ -1,173 +0,0 @@
-@theme {
-  --font-sans: var(--font-family-default);
-  --font-mono: var(--font-family-code);
-
-  --text-small: var(--font-size-small);
-  --text-default: var(--font-size-default);
-  --text-subhead-default: var(--font-size-subhead-default);
-  --text-subhead-big: var(--font-size-subhead-big);
-  --text-header-default: var(--font-size-header-default);
-  --text-header-big: var(--font-size-header-big);
-
-  --leading-none: 1;
-  --leading-small: var(--line-height-small);
-  --leading-default: var(--line-height-default);
-  --leading-subhead-default: var(--line-height-subhead-default);
-  --leading-subhead-big: var(--line-height-subhead-big);
-  --leading-header-default: var(--line-height-header-default);
-  --leading-header-big: var(--line-height-header-big);
-
-  --shadow-1: var(--shadow-1);
-  --shadow-2: var(--shadow-2);
-  --shadow-3: var(--shadow-3);
-  --shadow-focus: inset 0 0 0 2px var(--primary-default);
-  --shadow-default: var(--shadow-default);
-  --shadow-none: "";
-
-  --color-transparent: transparent;
-  --color-white: #fcfcfc;
-  --color-black: #0e1525;
-
-  --color-background-root: var(--background-root);
-  --color-background-default: var(--background-default);
-  --color-background-higher: var(--background-higher);
-  --color-background-highest: var(--background-highest);
-  --color-background-overlay: var(--background-overlay);
-  --color-foreground-default: var(--foreground-default);
-  --color-foreground-dimmer: var(--foreground-dimmer);
-  --color-foreground-dimmest: var(--foreground-dimmest);
-  --color-outline-dimmest: var(--outline-dimmest);
-  --color-outline-dimmer: var(--outline-dimmer);
-  --color-outline-default: var(--outline-default);
-  --color-outline-stronger: var(--outline-stronger);
-  --color-outline-strongest: var(--outline-strongest);
-  --color-red-dimmest: var(--red-dimmest);
-  --color-red-dimmer: var(--red-dimmer);
-  --color-red-default: var(--red-default);
-  --color-red-stronger: var(--red-stronger);
-  --color-red-strongest: var(--red-strongest);
-  --color-orange-dimmest: var(--orange-dimmest);
-  --color-orange-dimmer: var(--orange-dimmer);
-  --color-orange-default: var(--orange-default);
-  --color-orange-stronger: var(--orange-stronger);
-  --color-orange-strongest: var(--orange-strongest);
-  --color-yellow-dimmest: var(--yellow-dimmest);
-  --color-yellow-dimmer: var(--yellow-dimmer);
-  --color-yellow-default: var(--yellow-default);
-  --color-yellow-stronger: var(--yellow-stronger);
-  --color-yellow-strongest: var(--yellow-strongest);
-  --color-lime-dimmest: var(--lime-dimmest);
-  --color-lime-dimmer: var(--lime-dimmer);
-  --color-lime-default: var(--lime-default);
-  --color-lime-stronger: var(--lime-stronger);
-  --color-lime-strongest: var(--lime-strongest);
-  --color-green-dimmest: var(--green-dimmest);
-  --color-green-dimmer: var(--green-dimmer);
-  --color-green-default: var(--green-default);
-  --color-green-stronger: var(--green-stronger);
-  --color-green-strongest: var(--green-strongest);
-  --color-teal-dimmest: var(--teal-dimmest);
-  --color-teal-dimmer: var(--teal-dimmer);
-  --color-teal-default: var(--teal-default);
-  --color-teal-stronger: var(--teal-stronger);
-  --color-teal-strongest: var(--teal-strongest);
-  --color-blue-dimmest: var(--blue-dimmest);
-  --color-blue-dimmer: var(--blue-dimmer);
-  --color-blue-default: var(--blue-default);
-  --color-blue-stronger: var(--blue-stronger);
-  --color-blue-strongest: var(--blue-strongest);
-  --color-blurple-dimmest: var(--blurple-dimmest);
-  --color-blurple-dimmer: var(--blurple-dimmer);
-  --color-blurple-default: var(--blurple-default);
-  --color-blurple-stronger: var(--blurple-stronger);
-  --color-blurple-strongest: var(--blurple-strongest);
-  --color-purple-dimmest: var(--purple-dimmest);
-  --color-purple-dimmer: var(--purple-dimmer);
-  --color-purple-default: var(--purple-default);
-  --color-purple-stronger: var(--purple-stronger);
-  --color-purple-strongest: var(--purple-strongest);
-  --color-magenta-dimmest: var(--magenta-dimmest);
-  --color-magenta-dimmer: var(--magenta-dimmer);
-  --color-magenta-default: var(--magenta-default);
-  --color-magenta-stronger: var(--magenta-stronger);
-  --color-magenta-strongest: var(--magenta-strongest);
-  --color-pink-dimmest: var(--pink-dimmest);
-  --color-pink-dimmer: var(--pink-dimmer);
-  --color-pink-default: var(--pink-default);
-  --color-pink-stronger: var(--pink-stronger);
-  --color-pink-strongest: var(--pink-strongest);
-  --color-grey-dimmest: var(--grey-dimmest);
-  --color-grey-dimmer: var(--grey-dimmer);
-  --color-grey-default: var(--grey-default);
-  --color-grey-stronger: var(--grey-stronger);
-  --color-grey-strongest: var(--grey-strongest);
-  --color-brown-dimmest: var(--brown-dimmest);
-  --color-brown-dimmer: var(--brown-dimmer);
-  --color-brown-default: var(--brown-default);
-  --color-brown-stronger: var(--brown-stronger);
-  --color-brown-strongest: var(--brown-strongest);
-
-  /* Primary Aliases */
-  --color-primary-dimmest: var(--primary-dimmest);
-  --color-primary-dimmer: var(--primary-dimmer);
-  --color-primary-default: var(--primary-default);
-  --color-primary-stronger: var(--primary-stronger);
-  --color-primary-strongest: var(--primary-strongest);
-
-  /* Positive Aliases */
-  --color-positive-dimmest: var(--positive-dimmest);
-  --color-positive-dimmer: var(--positive-dimmer);
-  --color-positive-default: var(--positive-default);
-  --color-positive-stronger: var(--positive-stronger);
-  --color-positive-strongest: var(--positive-strongest);
-
-  /* Negative Aliases */
-  --color-negative-dimmest: var(--negative-dimmest);
-  --color-negative-dimmer: var(--negative-dimmer);
-  --color-negative-default: var(--negative-default);
-  --color-negative-stronger: var(--negative-stronger);
-  --color-negative-strongest: var(--negative-strongest);
-
-  /* Warning Aliases */
-  --color-warning-dimmest: var(--warning-dimmest);
-  --color-warning-dimmer: var(--warning-dimmer);
-  --color-warning-default: var(--warning-default);
-  --color-warning-stronger: var(--warning-stronger);
-  --color-warning-strongest: var(--warning-strongest);
-
-  /* View Colorway Aliases */
-  --color-view-colorway-dimmest: var(--view-colorway-dimmest);
-  --color-view-colorway-dimmer: var(--view-colorway-dimmer);
-  --color-view-colorway-default: var(--view-colorway-default);
-  --color-view-colorway-stronger: var(--view-colorway-stronger);
-  --color-view-colorway-strongest: var(--view-colorway-strongest);
-
-  /* Surface Aliases */
-  --color-surface-background: var(--surface-background);
-  --color-surface-interactive-background: var(--surface-interactive-background);
-  --color-surface-interactive-background-active: var(
-    --surface-interactive-background-active
-  );
-  --color-surface-interactive-border: var(--surface-interactive-border);
-  --color-surface-interactive-border-hover: var(
-    --surface-interactive-border-hover
-  );
-
-  --default-transition-duration: var(--transition-duration-snappy);
-  --default-transition-timing-function: var(
-    --transition-timing-function-snappy
-  );
-
-  --ease-snappy: var(--transition-timing-function-snappy);
-  --ease-chill: var(--transition-timing-function-chill);
-
-  --radius-none: 0px;
-  --radius-sm: var(--border-radius-2);
-  --radius-md: var(--border-radius-4);
-  --radius-lg: var(--border-radius-6);
-  --radius-xl: var(--border-radius-8);
-  --radius-2xl: var(--border-radius-12);
-  --radius-3xl: var(--border-radius-16);
-  --radius-full: var(--border-radius-round);
-  --radius-default: var(--border-radius-default);
-}

package/src/integrations/twemoij/index.tsx

@@ -1,13 +0,0 @@
-import styles from "./twemoji.module.css";
-
-export function Twemoji(props: { value: string }) {
-  const img = props.value.codePointAt(0)?.toString(16);
-
-  return (
-    <img
-      src={`https://cdn.jsdelivr.net/gh/twitter/twemoji@v14.0.2/assets/svg/${img}.svg`}
-      className={styles["twemoji"]}
-      alt={props.value}
-    />
-  );
-}

package/src/integrations/twemoij/twemoji.module.css

@@ -1,7 +0,0 @@
-.twemoji {
-  display: inline-block;
-  vertical-align: -0.1em;
-  margin: 0 0.05em 0 0.1em;
-  width: 1em;
-  height: 1em;
-}

package/src/integrations/twemoij/twemoji.stories.tsx

@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-
-import { Anchor } from "~/components/anchor";
-import { tokens } from "~/styles/tokens";
-
-import { Twemoji } from ".";
-import { Surface } from "../../components/surface";
-import { Text } from "../../components/text";
-
-const meta = {
-  title: "Integrations/Twemoji",
-  component: Twemoji,
-  parameters: { layout: "centered" },
-} satisfies Meta<typeof Twemoji>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    value: "✨",
-  },
-  render: (args) => (
-    <Surface
-      style={{ padding: tokens.space16, width: tokens.space256 }}
-      elevated
-    >
-      <Text className="mt-2" multiline>
-        Building apps that shine <Twemoji {...args} /> with React and Tailwind.
-        Currently using Typescript, but attempting to learn Go. In my spare time
-        I do{" "}
-        <Anchor href="https://art.natmf.at/" external>
-          generative art
-        </Anchor>
-        , make origami dragons, or vibe to Lo-Fi.
-      </Text>
-    </Surface>
-  ),
-};

package/src/stories/components/all-variants.tsx

@@ -1,40 +0,0 @@
-import { cloneElement, type CSSProperties, type ReactElement } from "react";
-
-import { Surface } from "~/components/surface";
-import { Text } from "~/components/text";
-import { View } from "~/components/view";
-import { tokens } from "~/styles/tokens";
-
-export function AllVariants(props: {
-  /** What's the variant actually called. */
-  variantName: string;
-  /** Possible values for the variant. */
-  variants: string[];
-  /** Element that we'll clone with different variants. */
-  element: ReactElement;
-  /** Override styles on wrapper. */
-  style?: CSSProperties;
-}) {
-  return (
-    <Surface
-      elevated
-      style={{
-        flexDirection: "column",
-        gap: tokens.space16,
-        padding: tokens.space16,
-        ...props.style,
-      }}
-    >
-      {props.variants.map((variant) => (
-        <View key={variant} style={{ gap: tokens.space2 }}>
-          <Text color="dimmest" size="sm">
-            {variant}
-          </Text>
-          {cloneElement(props.element, {
-            [props.variantName]: variant,
-          })}
-        </View>
-      ))}
-    </Surface>
-  );
-}

package/src/stories/data.ts

@@ -1,72 +0,0 @@
-import type { Background } from "~/components/surface";
-import type { TextProps } from "~/components/text";
-import type {
-  Color,
-  ColorStyle,
-  ColorVariant,
-  InteractiveStyle,
-} from "~/components/view";
-
-import { type Size } from "../styles/tokens";
-
-export const textColors: Array<NonNullable<TextProps["color"]>> = [
-  "inherit",
-  "default",
-  "dimmer",
-  "dimmest",
-];
-
-export const surfaceBackgrounds: Background[] = [
-  "root",
-  "default",
-  "higher",
-  "highest",
-];
-
-export const sizes: Size[] = ["sm", "md", "lg", "xl", "2xl", "3xl"];
-
-export const interactiveStyles: InteractiveStyle[] = [
-  "fill",
-  "no-fill",
-  "outline",
-  "fill-outline",
-  "list-item",
-];
-
-export const colors: Color[] = [
-  "primary",
-  "positive",
-  "negative",
-  "warning",
-  "red",
-  "orange",
-  "yellow",
-  "green",
-  "teal",
-  "blue",
-  "blurple",
-  "purple",
-  "magenta",
-  "pink",
-  "grey",
-];
-
-export const colorVariants: ColorStyle[] = [
-  "outline",
-  "outline-static",
-  "mute-static",
-  "fill",
-  "no-fill",
-  "fill-static",
-  "fill-outline",
-];
-
-export const colorway: ColorVariant[] = (() => {
-  const result: ColorVariant[] = [];
-  for (const color of colors) {
-    for (const variant of colorVariants) {
-      result.push(`${color}_${variant}`);
-    }
-  }
-  return result;
-})();

package/src/stories/utils.ts

@@ -1,20 +0,0 @@
-/**
- * Shorthand to disable many properties in a story
- * @param keys List of controls to disable
- * @returns
- *
- * @example
- * { argTypes: { message: { table: { disable: true } } } }
- * disable(["message"])
- */
-export function disable<T extends string>(keys: T[]) {
-  const result = {} as Record<T, { table: { disable: true } }>;
-  for (const key of keys) {
-    result[key] = {
-      table: {
-        disable: true,
-      },
-    };
-  }
-  return result;
-}

package/src/styles/core.css

@@ -1,153 +0,0 @@
-@import "modern-normalize/modern-normalize.css";
-
-@import "./themes/light.css";
-@import "./themes/dark.css";
-
-/*
-  1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
-  2. Remove default margins and padding
-  3. Reset all borders.
-*/
-*,
-::after,
-::before,
-::backdrop,
-::file-selector-button {
-  box-sizing: border-box; /* 1 */
-  margin: 0; /* 2 */
-  border: 0 solid; /* 3 */
-  padding: 0; /* 2 */
-}
-
-/*
-  TODO maybe revisit to add custom animations (just fade)
-  @media (prefers-reduced-motion: reduce)
-*/
-
-:root {
-  --black: #0e1525;
-  --white: #fcfcfc;
-
-  --shadow-default: var(--shadow-1);
-
-  --border-radius-1: 1px;
-  --border-radius-2: 2px;
-  --border-radius-4: 4px;
-  --border-radius-6: 6px;
-  --border-radius-8: 8px;
-  --border-radius-12: 12px;
-  --border-radius-16: 16px;
-  --border-radius-default: var(--border-radius-8);
-  --border-radius-round: 1028px;
-
-  --space-1: 1px;
-  --space-2: 2px;
-  --space-4: 4px;
-  --space-6: 6px;
-  --space-8: 8px;
-  --space-12: 12px;
-  --space-16: 16px;
-  --space-20: 20px;
-  --space-24: 24px;
-  --space-28: 28px;
-  --space-32: 32px;
-  --space-40: 40px;
-  --space-48: 48px;
-  --space-56: 56px;
-  --space-64: 64px;
-  --space-80: 80px;
-  --space-96: 96px;
-  --space-128: 128px;
-  --space-256: 256px;
-  --space-default: var(--space-8);
-
-  --font-family-default: "IBM Plex Sans", sans-serif;
-  --font-family-code: "IBM Plex Mono", monospace;
-
-  --font-size-small: 12px;
-  --font-size-default: 14px;
-  --font-size-subhead-default: 16px;
-  --font-size-subhead-big: 20px;
-  --font-size-header-default: 24px;
-  --font-size-header-big: 32px;
-
-  --line-height-small: 1.5;
-  --line-height-default: 1.6;
-  --line-height-subhead-default: 1.375;
-  --line-height-subhead-big: 1.4;
-  --line-height-header-default: 1.333;
-  --line-height-header-big: 1.25;
-  --line-height-input: 22px;
-  --line-height-single: 1;
-
-  --font-weight-regular: 400;
-  --font-weight-medium: 500;
-  --font-weight-bold: 600;
-
-  --transition-duration-snappy: 120ms;
-  --transition-timing-function-snappy: ease-out;
-
-  --transition-duration-chill: 300ms;
-  --transition-timing-function-chill: ease-in-out;
-
-  --border-width-default: 1px;
-}
-
-body {
-  /* https://base-ui.com/react/overview/quick-start */
-  position: relative;
-  overflow-x: hidden;
-  font-size: var(--font-size-default);
-  line-height: var(--line-height-default);
-  font-family: var(--font-family-default);
-}
-
-.root {
-  isolation: isolate;
-}
-
-[data-theme] {
-  --shadow-focus: inset 0 0 0 1.5px var(--primary-default);
-
-  /* Colorway aliases */
-  --primary-dimmest: var(--blue-dimmest);
-  --primary-dimmer: var(--blue-dimmer);
-  --primary-default: var(--blue-default);
-  --primary-stronger: var(--blue-stronger);
-  --primary-strongest: var(--blue-strongest);
-
-  --positive-dimmest: var(--green-dimmest);
-  --positive-dimmer: var(--green-dimmer);
-  --positive-default: var(--green-default);
-  --positive-stronger: var(--green-stronger);
-  --positive-strongest: var(--green-strongest);
-
-  --negative-dimmest: var(--red-dimmest);
-  --negative-dimmer: var(--red-dimmer);
-  --negative-default: var(--red-default);
-  --negative-stronger: var(--red-stronger);
-  --negative-strongest: var(--red-strongest);
-
-  --warning-dimmest: var(--yellow-dimmest);
-  --warning-dimmer: var(--yellow-dimmer);
-  --warning-default: var(--yellow-default);
-  --warning-stronger: var(--yellow-stronger);
-  --warning-strongest: var(--yellow-strongest);
-
-  /* Default colorway styles */
-  --view-colorway-dimmest: var(--primary-dimmest);
-  --view-colorway-dimmer: var(--primary-dimmer);
-  --view-colorway-default: var(--primary-default);
-  --view-colorway-stronger: var(--primary-stronger);
-  --view-colorway-strongest: var(--primary-strongest);
-
-  /* Default interactive styles  */
-  --surface-background: var(--background-root);
-  --surface-interactive-background: var(--background-default);
-  --surface-interactive-background-active: var(--background-higher);
-  --surface-interactive-border: var(--outline-dimmest);
-  --surface-interactive-border-hover: var(--outline-default);
-
-  background-color: var(--background-root);
-  color: var(--foreground-default);
-}

package/src/styles/themes/dark.css

@@ -1,86 +0,0 @@
-[data-theme="dark"] {
-  @nested-import "prismjs/themes/prism-tomorrow.css";
-
-  --shadow-1: 0px 4px 8px 0px rgba(2, 2, 3, 0.16);
-  --shadow-2: 0px 8px 16px 0px rgba(2, 2, 3, 0.32);
-  --shadow-3: 0px 16px 32px 0px rgba(2, 2, 3, 0.48);
-
-  --background-root: #0e1525;
-  --background-default: #1c2333;
-  --background-higher: #2b3245;
-  --background-highest: #3c445c;
-  --background-overlay: #0e1525a0;
-  --foreground-default: #f5f9fc;
-  --foreground-dimmer: #c2c8cc;
-  --foreground-dimmest: #9da2a6;
-  --outline-dimmest: #2b3245;
-  --outline-dimmer: #3c445c;
-  --outline-default: #4e5569;
-  --outline-stronger: #5f677a;
-  --outline-strongest: #70788c;
-  --red-dimmest: #660000;
-  --red-dimmer: #a60808;
-  --red-default: #e52222;
-  --red-stronger: #ff6666;
-  --red-strongest: #ffcfcf;
-  --orange-dimmest: #542a00;
-  --orange-dimmer: #703800;
-  --orange-default: #ad5700;
-  --orange-stronger: #d4781c;
-  --orange-strongest: #ffbd7a;
-  --yellow-dimmest: #4d4000;
-  --yellow-dimmer: #635300;
-  --yellow-default: #967d00;
-  --yellow-stronger: #bfa730;
-  --yellow-strongest: #f2e088;
-  --lime-dimmest: #314a00;
-  --lime-dimmer: #3d5c00;
-  --lime-default: #5a8700;
-  --lime-stronger: #87b825;
-  --lime-strongest: #c4e581;
-  --green-dimmest: #044a10;
-  --green-dimmer: #046113;
-  --green-default: #009118;
-  --green-stronger: #6cd97e;
-  --green-strongest: #7aeb8d;
-  --teal-dimmest: #004452;
-  --teal-dimmer: #006073;
-  --teal-default: #0093b0;
-  --teal-stronger: #27b9d6;
-  --teal-strongest: #69d9f0;
-  --blue-dimmest: #004182;
-  --blue-dimmer: #0053a6;
-  --blue-default: #0079f2;
-  --blue-stronger: #57abff;
-  --blue-strongest: #b2d9ff;
-  --blurple-dimmest: #39298a;
-  --blurple-dimmer: #5239cc;
-  --blurple-default: #795eff;
-  --blurple-stronger: #a694ff;
-  --blurple-strongest: #cec4ff;
-  --purple-dimmest: #582987;
-  --purple-dimmer: #7633b8;
-  --purple-default: #a64dff;
-  --purple-stronger: #c78fff;
-  --purple-strongest: #e2c4ff;
-  --magenta-dimmest: #6b1a6b;
-  --magenta-dimmer: #8a218a;
-  --magenta-default: #c73ac7;
-  --magenta-stronger: #f562f5;
-  --magenta-strongest: #ffbfff;
-  --pink-dimmest: #6e1b52;
-  --pink-dimmer: #8f226b;
-  --pink-default: #d4359f;
-  --pink-stronger: #ff70cf;
-  --pink-strongest: #ffbae8;
-  --grey-dimmest: #404040;
-  --grey-dimmer: #545454;
-  --grey-default: #808080;
-  --grey-stronger: #a6a6a6;
-  --grey-strongest: #d4d4d4;
-  --brown-dimmest: #594031;
-  --brown-dimmer: #75503b;
-  --brown-default: #a3765c;
-  --brown-stronger: #d49877;
-  --brown-strongest: #ffc8a8;
-}