@koide-labs/ui 0.0.0

package/src/styles/themes/light.css

@@ -0,0 +1,86 @@
+[data-theme="light"] {
+  @nested-import "prismjs/themes/prism.css";
+
+  --shadow-1: 0px 4px 8px 0px rgba(2, 2, 3, 0.1);
+  --shadow-2: 0px 8px 16px 0px rgba(2, 2, 3, 0.15);
+  --shadow-3: 0px 16px 32px 0px rgba(2, 2, 3, 0.2);
+
+  --background-root: #ebeced;
+  --background-default: #fcfcfc;
+  --background-higher: #f0f1f2;
+  --background-highest: #e4e5e6;
+  --background-overlay: #f0f1f2a0;
+  --foreground-default: #07080a;
+  --foreground-dimmer: #3d4047;
+  --foreground-dimmest: #5c5f66;
+  --outline-dimmest: #d2d4d6;
+  --outline-dimmer: #c0c3c4;
+  --outline-default: #afb1b3;
+  --outline-stronger: #98999c;
+  --outline-strongest: #74767a;
+  --red-dimmest: #ffc7c7;
+  --red-dimmer: #ff9494;
+  --red-default: #fa4b4b;
+  --red-stronger: #c20a0a;
+  --red-strongest: #8a0000;
+  --orange-dimmest: #ffcc99;
+  --orange-dimmer: #ff9933;
+  --orange-default: #d96d00;
+  --orange-stronger: #964b00;
+  --orange-strongest: #693400;
+  --yellow-dimmest: #ebd66e;
+  --yellow-dimmer: #cfb015;
+  --yellow-default: #a68a00;
+  --yellow-stronger: #736000;
+  --yellow-strongest: #4f4200;
+  --lime-dimmest: #c0e378;
+  --lime-dimmer: #93c926;
+  --lime-default: #639400;
+  --lime-stronger: #466900;
+  --lime-strongest: #3a5700;
+  --green-dimmest: #7aeb8d;
+  --green-dimmer: #3cc954;
+  --green-default: #00a11b;
+  --green-stronger: #036e15;
+  --green-strongest: #004d0d;
+  --teal-dimmest: #6fe5fc;
+  --teal-dimmer: #22c1e0;
+  --teal-default: #0093b0;
+  --teal-stronger: #00687d;
+  --teal-strongest: #004857;
+  --blue-dimmest: #b2d9ff;
+  --blue-dimmer: #6bb5ff;
+  --blue-default: #0f87ff;
+  --blue-stronger: #005cb8;
+  --blue-strongest: #004182;
+  --blurple-dimmest: #d7cfff;
+  --blurple-dimmer: #b2a3ff;
+  --blurple-default: #8e78ff;
+  --blurple-stronger: #5b40e3;
+  --blurple-strongest: #412f9c;
+  --purple-dimmest: #e6ccff;
+  --purple-dimmer: #d0a1ff;
+  --purple-default: #b266ff;
+  --purple-stronger: #7f38c7;
+  --purple-strongest: #5b278f;
+  --magenta-dimmest: #ffbfff;
+  --magenta-dimmer: #ff82ff;
+  --magenta-default: #eb3beb;
+  --magenta-stronger: #a321a3;
+  --magenta-strongest: #731c73;
+  --pink-dimmest: #ffc7ec;
+  --pink-dimmer: #ff87d7;
+  --pink-default: #f545ba;
+  --pink-stronger: #ab2980;
+  --pink-strongest: #781e5a;
+  --grey-dimmest: #d5d5d5;
+  --grey-dimmer: #b0b0b0;
+  --grey-default: #898989;
+  --grey-stronger: #616161;
+  --grey-strongest: #454545;
+  --brown-dimmest: #ffc9ab;
+  --brown-dimmer: #dea483;
+  --brown-default: #b07f63;
+  --brown-stronger: #805740;
+  --brown-strongest: #573e30;
+}

package/src/styles/tokens.ts

@@ -0,0 +1,282 @@
+import type { InvertRecord, ValueOf } from "~/-types";
+
+/**
+ * Size variants for widths, buttons, icon sizes, you name it!
+ * Use `Extract` if you don't want to support all of them but ensure we reuse
+ * correct values.
+ * @example
+ * // only support a subset of size variants
+ * Extract<Size, "sm" | "md" | "lg">
+ */
+export type Size = "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+export type SpaceToken = ValueOf<typeof spaceTokens>;
+export type ColorToken = ValueOf<typeof colorTokens>;
+export type InteractiveToken = ValueOf<typeof interactiveTokens>;
+export type Token = ValueOf<typeof tokens>;
+
+export const colorTokens = {
+  backgroundRoot: "var(--background-root)",
+  backgroundDefault: "var(--background-default)",
+  backgroundHigher: "var(--background-higher)",
+  backgroundHighest: "var(--background-highest)",
+  backgroundOverlay: "var(--background-overlay)",
+  foregroundDefault: "var(--foreground-default)",
+  foregroundDimmer: "var(--foreground-dimmer)",
+  foregroundDimmest: "var(--foreground-dimmest)",
+  outlineDimmest: "var(--outline-dimmest)",
+  outlineDimmer: "var(--outline-dimmer)",
+  outlineDefault: "var(--outline-default)",
+  outlineStronger: "var(--outline-stronger)",
+  outlineStrongest: "var(--outline-strongest)",
+  primaryDimmest: "var(--primary-dimmest)",
+  primaryDimmer: "var(--primary-dimmer)",
+  primaryDefault: "var(--primary-default)",
+  primaryStronger: "var(--primary-stronger)",
+  primaryStrongest: "var(--primary-strongest)",
+  positiveDimmest: "var(--positive-dimmest)",
+  positiveDimmer: "var(--positive-dimmer)",
+  positiveDefault: "var(--positive-default)",
+  positiveStronger: "var(--positive-stronger)",
+  positiveStrongest: "var(--positive-strongest)",
+  negativeDimmest: "var(--negative-dimmest)",
+  negativeDimmer: "var(--negative-dimmer)",
+  negativeDefault: "var(--negative-default)",
+  negativeStronger: "var(--negative-stronger)",
+  negativeStrongest: "var(--negative-strongest)",
+  redDimmest: "var(--red-dimmest)",
+  redDimmer: "var(--red-dimmer)",
+  redDefault: "var(--red-default)",
+  redStronger: "var(--red-stronger)",
+  redStrongest: "var(--red-strongest)",
+  orangeDimmest: "var(--orange-dimmest)",
+  orangeDimmer: "var(--orange-dimmer)",
+  orangeDefault: "var(--orange-default)",
+  orangeStronger: "var(--orange-stronger)",
+  orangeStrongest: "var(--orange-strongest)",
+  yellowDimmest: "var(--yellow-dimmest)",
+  yellowDimmer: "var(--yellow-dimmer)",
+  yellowDefault: "var(--yellow-default)",
+  yellowStronger: "var(--yellow-stronger)",
+  yellowStrongest: "var(--yellow-strongest)",
+  limeDimmest: "var(--lime-dimmest)",
+  limeDimmer: "var(--lime-dimmer)",
+  limeDefault: "var(--lime-default)",
+  limeStronger: "var(--lime-stronger)",
+  limeStrongest: "var(--lime-strongest)",
+  greenDimmest: "var(--green-dimmest)",
+  greenDimmer: "var(--green-dimmer)",
+  greenDefault: "var(--green-default)",
+  greenStronger: "var(--green-stronger)",
+  greenStrongest: "var(--green-strongest)",
+  tealDimmest: "var(--teal-dimmest)",
+  tealDimmer: "var(--teal-dimmer)",
+  tealDefault: "var(--teal-default)",
+  tealStronger: "var(--teal-stronger)",
+  tealStrongest: "var(--teal-strongest)",
+  blueDimmest: "var(--blue-dimmest)",
+  blueDimmer: "var(--blue-dimmer)",
+  blueDefault: "var(--blue-default)",
+  blueStronger: "var(--blue-stronger)",
+  blueStrongest: "var(--blue-strongest)",
+  blurpleDimmest: "var(--blurple-dimmest)",
+  blurpleDimmer: "var(--blurple-dimmer)",
+  blurpleDefault: "var(--blurple-default)",
+  blurpleStronger: "var(--blurple-stronger)",
+  blurpleStrongest: "var(--blurple-strongest)",
+  purpleDimmest: "var(--purple-dimmest)",
+  purpleDimmer: "var(--purple-dimmer)",
+  purpleDefault: "var(--purple-default)",
+  purpleStronger: "var(--purple-stronger)",
+  purpleStrongest: "var(--purple-strongest)",
+  magentaDimmest: "var(--magenta-dimmest)",
+  magentaDimmer: "var(--magenta-dimmer)",
+  magentaDefault: "var(--magenta-default)",
+  magentaStronger: "var(--magenta-stronger)",
+  magentaStrongest: "var(--magenta-strongest)",
+  pinkDimmest: "var(--pink-dimmest)",
+  pinkDimmer: "var(--pink-dimmer)",
+  pinkDefault: "var(--pink-default)",
+  pinkStronger: "var(--pink-stronger)",
+  pinkStrongest: "var(--pink-strongest)",
+  greyDimmest: "var(--grey-dimmest)",
+  greyDimmer: "var(--grey-dimmer)",
+  greyDefault: "var(--grey-default)",
+  greyStronger: "var(--grey-stronger)",
+  greyStrongest: "var(--grey-strongest)",
+  brownDimmest: "var(--brown-dimmest)",
+  brownDimmer: "var(--brown-dimmer)",
+  brownDefault: "var(--brown-default)",
+  brownStronger: "var(--brown-stronger)",
+  brownStrongest: "var(--brown-strongest)",
+  black: "var(--black)",
+  white: "var(--white)",
+} as const;
+
+export const interactiveTokens = {
+  surfaceBackground: "var(--surface-background)",
+  interactiveBackground: "var(--surface-interactive-background)",
+  interactiveBackgroundActive: "var(--surface-interactive-background--active)",
+  interactiveBorder: "var(--surface-interactive-border)",
+  interactiveBorderHover: "var(--surface-interactive-border--hover)",
+} as const;
+
+export const colorwayTokens = {
+  colorwayDimmest: "var(--view-colorway-dimmest)",
+  colorwayDimmer: "var(--view-colorway-dimmer)",
+  colorwayDefault: "var(--view-colorway-default)",
+  colorwayStronger: "var(--view-colorway-stronger)",
+  colorwayStrongest: "var(--view-colorway-strongest)",
+} as const;
+
+export const spaceTokens = {
+  space1: "var(--space-1)",
+  space2: "var(--space-2)",
+  space4: "var(--space-4)",
+  space6: "var(--space-6)",
+  space8: "var(--space-8)",
+  space12: "var(--space-12)",
+  space16: "var(--space-16)",
+  space20: "var(--space-20)",
+  space24: "var(--space-24)",
+  space28: "var(--space-28)",
+  space32: "var(--space-32)",
+  space40: "var(--space-40)",
+  space48: "var(--space-48)",
+  space56: "var(--space-56)",
+  space64: "var(--space-64)",
+  space80: "var(--space-80)",
+  space96: "var(--space-96)",
+  space128: "var(--space-128)",
+  space256: "var(--space-256)",
+  spaceDefault: "var(--space-default)",
+} as const;
+
+export const borderTokens = {
+  borderRadius1: "var(--border-radius-1)",
+  borderRadius2: "var(--border-radius-2)",
+  borderRadius4: "var(--border-radius-4)",
+  borderRadius6: "var(--border-radius-6)",
+  borderRadius8: "var(--border-radius-8)",
+  borderRadius12: "var(--border-radius-12)",
+  borderRadius16: "var(--border-radius-16)",
+  borderRadiusDefault: "var(--border-radius-default)",
+  borderRadiusRound: "var(--border-radius-round)",
+  borderWidthDefault: "var(--border-width-default)",
+} as const;
+
+export const shadowTokens = {
+  shadow1: "var(--shadow-1)",
+  shadow2: "var(--shadow-2)",
+  shadow3: "var(--shadow-3)",
+  shadowDefault: "var(--shadow-default)",
+} as const;
+
+export const typographyTokens = {
+  fontFamilyDefault: "var(--font-family-default)",
+  fontFamilyCode: "var(--font-family-code)",
+
+  fontSizeSmall: "var(--font-size-small)",
+  fontSizeDefault: "var(--font-size-default)",
+  fontSizeSubheadDefault: "var(--font-size-subhead-default)",
+  fontSizeSubheadBig: "var(--font-size-subhead-big)",
+  fontSizeHeaderDefault: "var(--font-size-header-default)",
+  fontSizeHeaderBig: "var(--font-size-header-big)",
+
+  lineHeightSmall: "var(--line-height-small)",
+  lineHeightDefault: "var(--line-height-default)",
+  lineHeightSubheadDefault: "var(--line-height-subhead-default)",
+  lineHeightSubheadBig: "var(--line-height-subhead-big)",
+  lineHeightHeaderDefault: "var(--line-height-header-default)",
+  lineHeightHeaderBig: "var(--line-height-header-big)",
+  lineHeightSingle: "var(--line-height-single)",
+  lineHeightInput: "var(--line-height-input)",
+
+  fontWeightRegular: "var(--font-weight-regular)",
+  fontWeightMedium: "var(--font-weight-medium)",
+  fontWeightBold: "var(--font-weight-bold)",
+} as const;
+
+export const transitionTokens = {
+  transitionDurationSnappy: "var(--transition-duration-snappy)",
+  transitionTimingFunctionSnappy: "var(--transition-timing-function-snappy)",
+  transitionDurationChill: "var(--transition-duration-chill)",
+  transitionTimingFunctionChill: "var(--transition-timing-function-chill)",
+} as const;
+
+export const tokens = {
+  ...colorTokens,
+  ...colorwayTokens,
+  ...interactiveTokens,
+  ...borderTokens,
+  ...spaceTokens,
+  ...shadowTokens,
+  ...typographyTokens,
+  ...transitionTokens,
+} as const;
+
+function invertRecord<T extends Record<string, string>>(record: T) {
+  return Object.entries(record).reduce(
+    (acc, [key, value]) => ({
+      ...acc,
+      [value]: key,
+    }),
+    {},
+  ) as InvertRecord<T>;
+}
+
+const invertedTokens = invertRecord({
+  ...borderTokens,
+  ...spaceTokens,
+});
+
+const rawTokenValues = {
+  borderRadius1: 1,
+  borderRadius2: 2,
+  borderRadius4: 4,
+  borderRadius6: 6,
+  borderRadius8: 8,
+  borderRadius12: 12,
+  borderRadius16: 16,
+  borderRadiusDefault: 8,
+  borderRadiusRound: 1028,
+  borderWidthDefault: 1,
+  space1: 1,
+  space2: 2,
+  space4: 4,
+  space6: 6,
+  space8: 8,
+  space12: 12,
+  space16: 16,
+  space20: 20,
+  space24: 24,
+  space28: 28,
+  space32: 32,
+  space40: 40,
+  space48: 48,
+  space56: 56,
+  space64: 64,
+  space80: 80,
+  space96: 96,
+  space128: 128,
+  space256: 256,
+  spaceDefault: 8,
+} as const;
+
+/**
+ * Get the actual value from a CSS variable \
+ * You really can't get color values reliably without extracting them from the DOM because of theming
+ * @param token (CSS variable)
+ * @returns Raw value, or null if one is not found
+ *
+ * @example
+ * getTokenValue(tokens.space80)
+ * getTokenValue("var(--space-80)")
+ */
+export function getTokenValue(token: keyof typeof invertedTokens) {
+  // TODO create JS values alongside css themes
+  // something like getTokenValue(token.primaryDefault, "light")
+  // or try dom extraction?
+  const tokenKey = invertedTokens[token];
+  return rawTokenValues[tokenKey];
+}

package/src/styles/transitions.module.css

@@ -0,0 +1,31 @@
+.transition_opacity {
+  transition: opacity var(--transition-duration-snappy)
+    var(--transition-timing-function-snappy);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+  }
+}
+
+.transition_fade-out {
+  &[data-ending-style] {
+    opacity: 0;
+    transition: opacity var(--transition-duration-snappy)
+      var(--transition-timing-function-snappy);
+  }
+}
+
+.transition_scale {
+  transition:
+    opacity var(--transition-duration-snappy)
+      var(--transition-timing-function-snappy),
+    transform var(--transition-duration-snappy)
+      var(--transition-timing-function-snappy);
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    transform: scale(0.96);
+    opacity: 0;
+  }
+}

package/stylelint.config.mjs

@@ -0,0 +1,29 @@
+/** @type {import("stylelint").Config} */
+export default {
+  extends: ["stylelint-config-standard"],
+  plugins: ["stylelint-selector-bem-pattern"],
+  /**
+   * I kind of want to ignore globals since we break a shit ton of rules
+   * https://stylelint.io/user-guide/configure#ignorefiles
+   */
+  ignoreFiles: ["src/styles/**/*.css", "src/integrations/tailwind.css"],
+  rules: {
+    /**
+     * We want to use BEM instead
+     * Defined here:
+     * https://github.com/postcss/postcss-bem-linter?tab=readme-ov-file
+     * https://en.bem.info/methodology/naming-convention/
+     */
+    "selector-class-pattern": null,
+    "plugin/selector-bem-pattern": {
+      preset: "bem",
+      implicitComponents: true,
+    },
+    "max-nesting-depth": [
+      1,
+      {
+        ignore: ["pseudo-classes", "blockless-at-rules"],
+      },
+    ],
+  },
+};

package/tsconfig.app.json

@@ -0,0 +1,35 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+
+    "plugins": [{ "name": "typescript-plugin-css-modules" }],
+
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,103 @@
+/// <reference types="vitest/config" />
+// https://vite.dev/config/
+
+import { fileURLToPath } from "node:url";
+import path from "path";
+import { storybookTest } from "@storybook/addon-vitest/vitest-plugin";
+import react from "@vitejs/plugin-react";
+import { playwright } from "@vitest/browser-playwright";
+import { glob } from "glob";
+import { defineConfig } from "vite";
+import dts from "vite-plugin-dts";
+import { libInjectCss } from "vite-plugin-lib-inject-css";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+const dirname =
+  typeof __dirname !== "undefined"
+    ? __dirname
+    : path.dirname(fileURLToPath(import.meta.url));
+
+const IGNORE_STORIES = ["src/**/*.stories.tsx", "src/stories/**/*"];
+
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+export default defineConfig({
+  plugins: [
+    tsconfigPaths(),
+    libInjectCss(),
+    react(),
+    dts({
+      include: ["src"],
+      exclude: IGNORE_STORIES,
+      tsconfigPath: "./tsconfig.app.json",
+    }),
+  ],
+  build: {
+    minify: "esbuild",
+    lib: {
+      entry: {
+        index: path.resolve(__dirname, "src/index.ts"),
+      },
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["react", "react/jsx-runtime", "react-dom"],
+      input: Object.fromEntries(
+        glob
+          .sync(
+            [
+              "src/**/!(*.d).{ts,tsx}",
+              "src/styles/core.css",
+              "src/styles/reset.css",
+              "src/integrations/tailwind.css",
+            ],
+            {
+              ignore: IGNORE_STORIES,
+            },
+          )
+          .map((file) => [
+            path.relative(
+              "src",
+              file.substring(0, file.length - path.extname(file).length),
+            ),
+            path.resolve(__dirname, file),
+          ]),
+      ),
+      output: {
+        globals: {
+          react: "React",
+          "react/jsx-runtime": "react/jsx-runtime",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+    copyPublicDir: false,
+  },
+  test: {
+    projects: [
+      {
+        extends: true,
+        plugins: [
+          // The plugin will run tests for the stories defined in your Storybook config
+          // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+          storybookTest({
+            configDir: path.join(dirname, ".storybook"),
+          }),
+        ],
+        test: {
+          name: "storybook",
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: playwright({}),
+            instances: [
+              {
+                browser: "chromium",
+              },
+            ],
+          },
+          setupFiles: [".storybook/vitest.setup.ts"],
+        },
+      },
+    ],
+  },
+});

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser-playwright" />