@nuee/registry 0.3.0

package/dist/tokens/color-palette.stylex.ts

@@ -0,0 +1,190 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const colorPalette = stylex.defineVars({
+  neutral0: "oklch(100% 0 0)",
+  neutral50: "oklch(98.510% 0 0)",
+  neutral100: "oklch(97.015% 0 0)",
+  neutral150: "oklch(95.815% 0 0)",
+  neutral175: "oklch(94.007% 0 0)",
+  neutral200: "oklch(92.191% 0 0)",
+  neutral300: "oklch(86.994% 0 0)",
+  neutral400: "oklch(71.547% 0 0)",
+  neutral500: "oklch(55.553% 0 0)",
+  neutral600: "oklch(43.860% 0 0)",
+  neutral700: "oklch(37.149% 0 0)",
+  neutral800: "oklch(26.862% 0 0)",
+  neutral850: "oklch(22.213% 0 0)",
+  neutral900: "oklch(20.463% 0 0)",
+  neutral950: "oklch(14.479% 0 0)",
+  neutral1000: "oklch(0% 0 0)",
+  primaryWeak: "oklch(24.353% 0 0 / 20%)",
+  primaryWeakDark: "oklch(93.846% 0.0041 121.56 / 20%)",
+  primaryMuted: "oklch(24.353% 0 0 / 60%)",
+  primaryMutedDark: "oklch(93.846% 0.0041 121.56 / 60%)",
+  primarySolid: "oklch(24.353% 0 0)",
+  primarySolidDark: "oklch(93.846% 0.0041 121.56)",
+  primaryContrast: "oklch(24.353% 0 0)",
+  primaryContrastDark: "oklch(93.846% 0.0041 121.56)",
+  redWeak: "oklch(88.842% 0.0501 22.71)",
+  redWeakDark: "oklch(79.615% 0.1170 24.47 / 24%)",
+  redMuted: "oklch(82.720% 0.0510 21.28)",
+  redMutedDark: "oklch(71.697% 0.1767 23.77)",
+  redSolid: "oklch(39.780% 0.1604 22.34)",
+  redSolidDark: "oklch(79.615% 0.1170 24.47)",
+  redContrast: "oklch(39.780% 0.1604 22.34)",
+  redContrastDark: "oklch(87.589% 0.0659 24.27)",
+  redFeedback: "oklch(46.019% 0.1794 22.12)",
+  redBadge: "oklch(55.251% 0.1888 22.83)",
+  redBadgeDark: "oklch(71.578% 0.1783 29.77)",
+  orangeWeak: "oklch(88.680% 0.0597 54.50)",
+  orangeWeakDark: "oklch(79.232% 0.1420 57.20 / 24%)",
+  orangeMuted: "oklch(82.749% 0.0598 55.08)",
+  orangeMutedDark: "oklch(70.938% 0.1405 56.89)",
+  orangeSolid: "oklch(39.668% 0.0989 54.41)",
+  orangeSolidDark: "oklch(79.232% 0.1420 57.20)",
+  orangeContrast: "oklch(39.668% 0.0989 54.41)",
+  orangeContrastDark: "oklch(87.437% 0.0803 57.28)",
+  yellowWeak: "oklch(89.932% 0.0846 84.60)",
+  yellowWeakDark: "oklch(78.635% 0.1457 89.67 / 24%)",
+  yellowMuted: "oklch(82.759% 0.0996 85.33)",
+  yellowMutedDark: "oklch(69.931% 0.1403 90)",
+  yellowSolid: "oklch(39.679% 0.0811 89.57)",
+  yellowSolidDark: "oklch(78.635% 0.1457 89.67)",
+  yellowContrast: "oklch(39.679% 0.0811 89.57)",
+  yellowContrastDark: "oklch(87.227% 0.1502 88.76)",
+  yellowFeedback: "oklch(48.284% 0.0987 90.04)",
+  yellowBadge: "oklch(87.026% 0.1672 89.94)",
+  greenWeak: "oklch(88.883% 0.0603 141.35)",
+  greenWeakDark: "oklch(77.164% 0.1234 143.03 / 24%)",
+  greenMuted: "oklch(82.794% 0.0607 140.55)",
+  greenMutedDark: "oklch(68.460% 0.1219 143.49)",
+  greenSolid: "oklch(39.780% 0.1319 141.35)",
+  greenSolidDark: "oklch(77.164% 0.1234 143.03)",
+  greenContrast: "oklch(39.780% 0.1319 141.35)",
+  greenContrastDark: "oklch(85.701% 0.1228 143.15)",
+  greenFeedback: "oklch(47.252% 0.1593 142.77)",
+  greenBadge: "oklch(52.575% 0.1736 141.18)",
+  greenBadgeDark: "oklch(68.292% 0.1540 138.71)",
+  cyanWeak: "oklch(87.036% 0.0651 214.63)",
+  cyanWeakDark: "oklch(77.776% 0.0691 217.66 / 24%)",
+  cyanMuted: "oklch(82.814% 0.0701 214.56)",
+  cyanMutedDark: "oklch(69.157% 0.0701 216.58)",
+  cyanSolid: "oklch(39.727% 0.0705 215.91)",
+  cyanSolidDark: "oklch(77.776% 0.0691 217.66)",
+  cyanContrast: "oklch(39.727% 0.0705 215.91)",
+  cyanContrastDark: "oklch(86.361% 0.0691 217.16)",
+  blueWeak: "oklch(88.873% 0.0494 253.08)",
+  blueWeakDark: "oklch(78.788% 0.1067 269.17 / 24%)",
+  blueMuted: "oklch(82.782% 0.0497 254.11)",
+  blueMutedDark: "oklch(70.325% 0.1529 263.59)",
+  blueSolid: "oklch(39.777% 0.1328 255.38)",
+  blueSolidDark: "oklch(78.788% 0.1067 269.17)",
+  blueContrast: "oklch(39.777% 0.1328 255.38)",
+  blueContrastDark: "oklch(87.221% 0.0624 273.09)",
+  blueBadge: "oklch(56.862% 0.1886 255.20)",
+  purpleWeak: "oklch(88.776% 0.0594 319.84)",
+  purpleWeakDark: "oklch(80.457% 0.1702 322.40 / 24%)",
+  purpleMuted: "oklch(82.803% 0.0587 319.66)",
+  purpleMutedDark: "oklch(72.362% 0.2005 321.31)",
+  purpleSolid: "oklch(39.712% 0.1906 319.94)",
+  purpleSolidDark: "oklch(80.457% 0.1702 322.40)",
+  purpleContrast: "oklch(39.712% 0.1906 319.94)",
+  purpleContrastDark: "oklch(88.122% 0.1033 323.74)",
+  pinkWeak: "oklch(88.765% 0.0609 354.86)",
+  pinkWeakDark: "oklch(79.985% 0.1308 354.26 / 24%)",
+  pinkMuted: "oklch(82.709% 0.0594 355.30)",
+  pinkMutedDark: "oklch(71.991% 0.1660 354.87)",
+  pinkSolid: "oklch(39.812% 0.1633 355.32)",
+  pinkSolidDark: "oklch(79.985% 0.1308 354.26)",
+  pinkContrast: "oklch(39.812% 0.1633 355.32)",
+  pinkContrastDark: "oklch(87.736% 0.0742 353.89)",
+  alphaBlack4: "oklch(0% 0 0 / 5%)",
+  alphaBlack6: "oklch(0% 0 0 / 6%)",
+  alphaBlack8: "oklch(0% 0 0 / 8%)",
+  alphaBlack10: "oklch(0% 0 0 / 10%)",
+  alphaBlack20: "oklch(0% 0 0 / 20%)",
+  alphaBlack30: "oklch(0% 0 0 / 30%)",
+  alphaBlack50: "oklch(0% 0 0 / 50%)",
+  alphaBlack80: "oklch(0% 0 0 / 80%)",
+  alphaWhite5: "oklch(100% 0 0 / 5%)",
+  alphaWhite8: "oklch(100% 0 0 / 8%)",
+  alphaWhite10: "oklch(100% 0 0 / 10%)",
+  alphaWhite12: "oklch(100% 0 0 / 12%)",
+  alphaWhite20: "oklch(100% 0 0 / 20%)",
+  alphaWhite50: "oklch(100% 0 0 / 50%)",
+});
+
+export const colorPaletteGroups = {
+  neutral: {
+    0: colorPalette.neutral0,
+    50: colorPalette.neutral50,
+    100: colorPalette.neutral100,
+    150: colorPalette.neutral150,
+    175: colorPalette.neutral175,
+    200: colorPalette.neutral200,
+    300: colorPalette.neutral300,
+    400: colorPalette.neutral400,
+    500: colorPalette.neutral500,
+    600: colorPalette.neutral600,
+    700: colorPalette.neutral700,
+    800: colorPalette.neutral800,
+    850: colorPalette.neutral850,
+    900: colorPalette.neutral900,
+    950: colorPalette.neutral950,
+    1000: colorPalette.neutral1000,
+  },
+  primary: {
+    weak: colorPalette.primaryWeak,
+    muted: colorPalette.primaryMuted,
+    solid: colorPalette.primarySolid,
+    contrast: colorPalette.primaryContrast,
+  },
+  red: {
+    weak: colorPalette.redWeak,
+    muted: colorPalette.redMuted,
+    solid: colorPalette.redSolid,
+    contrast: colorPalette.redContrast,
+  },
+  orange: {
+    weak: colorPalette.orangeWeak,
+    muted: colorPalette.orangeMuted,
+    solid: colorPalette.orangeSolid,
+    contrast: colorPalette.orangeContrast,
+  },
+  yellow: {
+    weak: colorPalette.yellowWeak,
+    muted: colorPalette.yellowMuted,
+    solid: colorPalette.yellowSolid,
+    contrast: colorPalette.yellowContrast,
+  },
+  green: {
+    weak: colorPalette.greenWeak,
+    muted: colorPalette.greenMuted,
+    solid: colorPalette.greenSolid,
+    contrast: colorPalette.greenContrast,
+  },
+  cyan: {
+    weak: colorPalette.cyanWeak,
+    muted: colorPalette.cyanMuted,
+    solid: colorPalette.cyanSolid,
+    contrast: colorPalette.cyanContrast,
+  },
+  blue: {
+    weak: colorPalette.blueWeak,
+    muted: colorPalette.blueMuted,
+    solid: colorPalette.blueSolid,
+    contrast: colorPalette.blueContrast,
+  },
+  purple: {
+    weak: colorPalette.purpleWeak,
+    muted: colorPalette.purpleMuted,
+    solid: colorPalette.purpleSolid,
+    contrast: colorPalette.purpleContrast,
+  },
+  pink: {
+    weak: colorPalette.pinkWeak,
+    muted: colorPalette.pinkMuted,
+    solid: colorPalette.pinkSolid,
+    contrast: colorPalette.pinkContrast,
+  },
+} as const;

package/dist/tokens/semantic.stylex.ts

@@ -0,0 +1,112 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { colorPalette } from "./color-palette.stylex";
+
+export const colorVars = stylex.defineVars({
+  bgCanvas: colorPalette.neutral100,
+  bgSurface: colorPalette.neutral0,
+  bgSurfacePressed: "oklch(97% 0 0)",
+  bgSubtle: colorPalette.neutral50,
+  bgRaised: colorPalette.neutral0,
+  bgRaisedPressed: "oklch(97% 0 0)",
+  bgActionPrimary: colorPalette.primarySolid,
+  bgActionDestructive: colorPalette.redFeedback,
+  bgFeedbackInfo: colorPalette.blueWeak,
+  bgFeedbackSuccess: colorPalette.greenWeak,
+  bgFeedbackWarning: colorPalette.yellowWeak,
+  bgFeedbackError: colorPalette.redWeak,
+  fgPrimary: colorPalette.neutral950,
+  fgSecondary: colorPalette.neutral600,
+  fgTertiary: colorPalette.neutral500,
+  fgDisabled: colorPalette.alphaBlack50,
+  fgInverse: colorPalette.neutral0,
+  fgOnActionPrimary: colorPalette.neutral0,
+  fgOnActionDestructive: colorPalette.neutral0,
+  fgAction: colorPalette.primarySolid,
+  fgFeedbackInfo: colorPalette.blueSolid,
+  fgFeedbackSuccess: colorPalette.greenFeedback,
+  fgFeedbackWarning: colorPalette.yellowFeedback,
+  fgFeedbackError: colorPalette.redFeedback,
+  strokeDefault: colorPalette.neutral200,
+  strokeStrong: colorPalette.neutral300,
+  strokeFocus: colorPalette.blueBadge,
+  strokeAction: colorPalette.primarySolid,
+  strokeFeedbackInfo: colorPalette.blueMuted,
+  strokeFeedbackSuccess: colorPalette.greenMuted,
+  strokeFeedbackWarning: colorPalette.yellowMuted,
+  strokeFeedbackError: colorPalette.redMuted,
+  interactionDefault: "transparent",
+  interactionHover: colorPalette.alphaBlack6,
+  interactionPressed: "oklch(97% 0 0)",
+  interactionSolidHover: colorPalette.alphaWhite10,
+  interactionSolidPressed: colorPalette.alphaWhite20,
+  interactionSelected: "oklch(97% 0 0)",
+  interactionDisabled: colorPalette.alphaBlack8,
+  interactionFocus: colorPalette.blueBadge,
+});
+
+export const spacingVars = stylex.defineVars({
+  space0: "0",
+  space1: "0.25rem",
+  space2: "0.5rem",
+  space3: "0.75rem",
+  space4: "1rem",
+  space5: "1.25rem",
+  space6: "1.5rem",
+  space8: "2rem",
+  space10: "2.5rem",
+  space12: "3rem",
+});
+
+export const sizeVars = stylex.defineVars({
+  controlSm: "2rem",
+  controlMd: "2.25rem",
+  controlLg: "2.5rem",
+  iconSm: "0.875rem",
+  iconMd: "1rem",
+  contentSm: "24rem",
+  contentMd: "32rem",
+  touchTarget: "2.75rem",
+  stroke: "0.0625rem",
+  focusRing: "0.125rem",
+});
+
+export const radiusVars = stylex.defineVars({
+  sm: "0.375rem",
+  md: "0.5rem",
+  lg: "0.75rem",
+  full: "9999px",
+});
+
+export const shadowVars = stylex.defineVars({
+  subtle: "0 1px 4px oklch(0% 0 0 / 8%)",
+  floating: "0 2px 10px oklch(0% 0 0 / 10%)",
+  overlay: "0 4px 16px oklch(0% 0 0 / 12%)",
+});
+
+export const typographyVars = stylex.defineVars({
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  fontSizeXs: "0.75rem",
+  fontSizeSm: "0.875rem",
+  fontSizeMd: "1rem",
+  fontSizeLg: "1.125rem",
+  fontSizeXl: "1.5rem",
+  lineHeightTight: "1.25",
+  lineHeightNormal: "1.5",
+  fontWeightRegular: "400",
+  fontWeightMedium: "500",
+  fontWeightSemibold: "600",
+});
+
+export const opacityVars = stylex.defineVars({
+  disabled: "0.8",
+});
+
+export const motionVars = stylex.defineVars({
+  durationFast: "120ms",
+  durationNormal: "180ms",
+  durationSlow: "240ms",
+  easingStandard: "cubic-bezier(0.2, 0, 0, 1)",
+  easingEnter: "cubic-bezier(0.16, 1, 0.3, 1)",
+  easingExit: "cubic-bezier(0.4, 0, 1, 1)",
+});

package/dist/tokens/themes.stylex.ts

@@ -0,0 +1,102 @@
+import * as stylex from "@stylexjs/stylex";
+
+import { colorPalette } from "./color-palette.stylex";
+import { colorVars, shadowVars } from "./semantic.stylex";
+
+export const lightColorTheme = stylex.createTheme(colorVars, {
+  bgCanvas: colorPalette.neutral100,
+  bgSurface: colorPalette.neutral0,
+  bgSurfacePressed: "oklch(97% 0 0)",
+  bgSubtle: colorPalette.neutral50,
+  bgRaised: colorPalette.neutral0,
+  bgRaisedPressed: "oklch(97% 0 0)",
+  bgActionPrimary: colorPalette.primarySolid,
+  bgActionDestructive: colorPalette.redFeedback,
+  bgFeedbackInfo: colorPalette.blueWeak,
+  bgFeedbackSuccess: colorPalette.greenWeak,
+  bgFeedbackWarning: colorPalette.yellowWeak,
+  bgFeedbackError: colorPalette.redWeak,
+  fgPrimary: colorPalette.neutral950,
+  fgSecondary: colorPalette.neutral600,
+  fgTertiary: colorPalette.neutral500,
+  fgDisabled: colorPalette.alphaBlack50,
+  fgInverse: colorPalette.neutral0,
+  fgOnActionPrimary: colorPalette.neutral0,
+  fgOnActionDestructive: colorPalette.neutral0,
+  fgAction: colorPalette.primarySolid,
+  fgFeedbackInfo: colorPalette.blueSolid,
+  fgFeedbackSuccess: colorPalette.greenFeedback,
+  fgFeedbackWarning: colorPalette.yellowFeedback,
+  fgFeedbackError: colorPalette.redFeedback,
+  strokeDefault: colorPalette.neutral200,
+  strokeStrong: colorPalette.neutral300,
+  strokeFocus: colorPalette.blueBadge,
+  strokeAction: colorPalette.primarySolid,
+  strokeFeedbackInfo: colorPalette.blueMuted,
+  strokeFeedbackSuccess: colorPalette.greenMuted,
+  strokeFeedbackWarning: colorPalette.yellowMuted,
+  strokeFeedbackError: colorPalette.redMuted,
+  interactionDefault: "transparent",
+  interactionHover: colorPalette.alphaBlack6,
+  interactionPressed: "oklch(97% 0 0)",
+  interactionSolidHover: colorPalette.alphaWhite10,
+  interactionSolidPressed: colorPalette.alphaWhite20,
+  interactionSelected: "oklch(97% 0 0)",
+  interactionDisabled: colorPalette.alphaBlack8,
+  interactionFocus: colorPalette.blueBadge,
+});
+
+export const darkColorTheme = stylex.createTheme(colorVars, {
+  bgCanvas: colorPalette.neutral950,
+  bgSurface: colorPalette.alphaWhite5,
+  bgSurfacePressed: colorPalette.alphaWhite10,
+  bgSubtle: colorPalette.alphaWhite8,
+  bgRaised: colorPalette.neutral850,
+  bgRaisedPressed: colorPalette.neutral800,
+  bgActionPrimary: colorPalette.primarySolidDark,
+  bgActionDestructive: colorPalette.redFeedback,
+  bgFeedbackInfo: colorPalette.blueWeakDark,
+  bgFeedbackSuccess: colorPalette.greenWeakDark,
+  bgFeedbackWarning: colorPalette.yellowWeakDark,
+  bgFeedbackError: colorPalette.redWeakDark,
+  fgPrimary: colorPalette.neutral50,
+  fgSecondary: colorPalette.neutral300,
+  fgTertiary: colorPalette.neutral400,
+  fgDisabled: colorPalette.alphaWhite50,
+  fgInverse: colorPalette.neutral950,
+  fgOnActionPrimary: colorPalette.neutral950,
+  fgOnActionDestructive: colorPalette.neutral0,
+  fgAction: colorPalette.primaryContrastDark,
+  fgFeedbackInfo: colorPalette.blueContrastDark,
+  fgFeedbackSuccess: colorPalette.greenContrastDark,
+  fgFeedbackWarning: colorPalette.yellowContrastDark,
+  fgFeedbackError: colorPalette.redContrastDark,
+  strokeDefault: colorPalette.neutral700,
+  strokeStrong: colorPalette.neutral600,
+  strokeFocus: colorPalette.blueSolidDark,
+  strokeAction: colorPalette.primarySolidDark,
+  strokeFeedbackInfo: colorPalette.blueMutedDark,
+  strokeFeedbackSuccess: colorPalette.greenMutedDark,
+  strokeFeedbackWarning: colorPalette.yellowMutedDark,
+  strokeFeedbackError: colorPalette.redMutedDark,
+  interactionDefault: "transparent",
+  interactionHover: colorPalette.alphaWhite5,
+  interactionPressed: colorPalette.alphaWhite10,
+  interactionSolidHover: colorPalette.alphaBlack10,
+  interactionSolidPressed: colorPalette.alphaBlack20,
+  interactionSelected: colorPalette.primaryWeakDark,
+  interactionDisabled: colorPalette.alphaWhite10,
+  interactionFocus: colorPalette.blueSolidDark,
+});
+
+export const lightShadowTheme = stylex.createTheme(shadowVars, {
+  subtle: "0 1px 4px oklch(0% 0 0 / 8%)",
+  floating: "0 2px 10px oklch(0% 0 0 / 10%)",
+  overlay: "0 4px 16px oklch(0% 0 0 / 12%)",
+});
+
+export const darkShadowTheme = stylex.createTheme(shadowVars, {
+  subtle: "0 1px 4px oklch(0% 0 0 / 50%)",
+  floating: "0 2px 10px oklch(0% 0 0 / 68%)",
+  overlay: "0 4px 16px oklch(0% 0 0 / 80%)",
+});

package/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@nuee/registry",
+  "version": "0.3.0",
+  "private": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nueexyz/ui.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "exports": {
+    "types": "./dist/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/node": "^22.20.1",
+    "typescript": "7.0.2"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node --experimental-strip-types scripts/build.ts",
+    "typecheck": "tsc -p tsconfig.build.json --noEmit"
+  }
+}