@sanity/sanity-id 0.0.0

package/src/tokens/semantic-colors.ts

@@ -0,0 +1,574 @@
+import { type PrimitiveColor, primitiveColors } from "./primitive-colors"
+
+export type SemanticColor = {
+  name: string
+  variable: string
+  light: PrimitiveColor
+  dark: PrimitiveColor
+}
+
+export const semanticColors = {
+  fgStrong: color({
+    name: "fg-strong",
+    light: primitiveColors.black,
+    dark: primitiveColors.gray50,
+  }),
+  fgBase: color({
+    name: "fg-base",
+    light: primitiveColors.gray900,
+    dark: primitiveColors.gray200,
+  }),
+  fgDim: color({
+    name: "fg-dim",
+    light: primitiveColors.gray600,
+    dark: primitiveColors.gray400,
+  }),
+  fgFaint: color({
+    name: "fg-faint",
+    light: primitiveColors.gray500,
+    dark: primitiveColors.gray600,
+  }),
+  fgInverseStrong: color({
+    name: "fg-inverse-strong",
+    light: primitiveColors.white,
+    dark: primitiveColors.black,
+  }),
+  fgInverseBase: color({
+    name: "fg-inverse-base",
+    light: primitiveColors.gray200,
+    dark: primitiveColors.gray900,
+  }),
+  fgInverseDim: color({
+    name: "fg-inverse-dim",
+    light: primitiveColors.gray300,
+    dark: primitiveColors.gray700,
+  }),
+  fgBrandStrong: color({
+    name: "fg-brand-strong",
+    light: primitiveColors.red700,
+    dark: primitiveColors.red300,
+  }),
+  fgBrandBase: color({
+    name: "fg-brand-base",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  fgAccentStrong: color({
+    name: "fg-accent-strong",
+    light: primitiveColors.cyan800,
+    dark: primitiveColors.cyan300,
+  }),
+  fgAccentBase: color({
+    name: "fg-accent-base",
+    light: primitiveColors.cyan700,
+    dark: primitiveColors.cyan400,
+  }),
+  fgAccentDim: color({
+    name: "fg-accent-dim",
+    light: primitiveColors.cyan600,
+    dark: primitiveColors.cyan500,
+  }),
+  fgUpsellStrong: color({
+    name: "fg-upsell-strong",
+    light: primitiveColors.purple800,
+    dark: primitiveColors.purple200,
+  }),
+  fgUpsellBase: color({
+    name: "fg-upsell-base",
+    light: primitiveColors.purple600,
+    dark: primitiveColors.purple400,
+  }),
+  fgUpsellDim: color({
+    name: "fg-upsell-dim",
+    light: primitiveColors.purple500,
+    dark: primitiveColors.purple500,
+  }),
+  fgWarningStrong: color({
+    name: "fg-warning-strong",
+    light: primitiveColors.yellow800,
+    dark: primitiveColors.yellow100,
+  }),
+  fgWarningBase: color({
+    name: "fg-warning-base",
+    light: primitiveColors.yellow600,
+    dark: primitiveColors.yellow400,
+  }),
+  bgStrong: color({
+    name: "bg-strong",
+    light: primitiveColors.white,
+    dark: primitiveColors.black,
+  }),
+  bgBase: color({
+    name: "bg-base",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  bgDim: color({
+    name: "bg-dim",
+    light: primitiveColors.gray100,
+    dark: primitiveColors.gray900,
+  }),
+  bgInverseStrong: color({
+    name: "bg-inverse-strong",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  bgInverseBase: color({
+    name: "bg-inverse-base",
+    light: primitiveColors.gray950,
+    dark: primitiveColors.gray50,
+  }),
+  bgBrandBase: color({
+    name: "bg-brand-base",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  bgBrandDim: color({
+    name: "bg-brand-dim",
+    light: primitiveColors.red200,
+    dark: primitiveColors.red900,
+  }),
+  bgAccentStrong: color({
+    name: "bg-accent-strong",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan600,
+  }),
+  bgAccentBase: color({
+    name: "bg-accent-base",
+    light: primitiveColors.cyan200,
+    dark: primitiveColors.cyan800,
+  }),
+  bgAccentDim: color({
+    name: "bg-accent-dim",
+    light: primitiveColors.cyan100,
+    dark: primitiveColors.cyan900,
+  }),
+  bgUpsellStrong: color({
+    name: "bg-upsell-strong",
+    light: primitiveColors.purple400,
+    dark: primitiveColors.purple600,
+  }),
+  bgUpsellBase: color({
+    name: "bg-upsell-base",
+    light: primitiveColors.purple200,
+    dark: primitiveColors.purple800,
+  }),
+  bgUpsellDim: color({
+    name: "bg-upsell-dim",
+    light: primitiveColors.purple100,
+    dark: primitiveColors.purple900,
+  }),
+  bgWarningSubtle: color({
+    name: "bg-warning-subtle",
+    light: primitiveColors.yellow50,
+    dark: primitiveColors.yellow900,
+  }),
+  borderStrong: color({
+    name: "border-strong",
+    light: primitiveColors.gray400,
+    dark: primitiveColors.gray600,
+  }),
+  borderBase: color({
+    name: "border-base",
+    light: primitiveColors.gray300,
+    dark: primitiveColors.gray700,
+  }),
+  borderSubtle: color({
+    name: "border-subtle",
+    light: primitiveColors.gray200,
+    dark: primitiveColors.gray800,
+  }),
+  borderHairline: color({
+    name: "border-hairline",
+    light: primitiveColors.gray100,
+    dark: primitiveColors.gray900,
+  }),
+  borderInverse: color({
+    name: "border-inverse",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  borderBrandStrong: color({
+    name: "border-brand-strong",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  borderBrandBase: color({
+    name: "border-brand-base",
+    light: primitiveColors.red300,
+    dark: primitiveColors.red700,
+  }),
+  borderBrandDim: color({
+    name: "border-brand-dim",
+    light: primitiveColors.red200,
+    dark: primitiveColors.red800,
+  }),
+  borderAccentStrong: color({
+    name: "border-accent-strong",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan400,
+  }),
+  borderAccentBase: color({
+    name: "border-accent-base",
+    light: primitiveColors.cyan300,
+    dark: primitiveColors.cyan700,
+  }),
+  borderAccentDim: color({
+    name: "border-accent-dim",
+    light: primitiveColors.cyan200,
+    dark: primitiveColors.cyan800,
+  }),
+  borderUpsellStrong: color({
+    name: "border-upsell-strong",
+    light: primitiveColors.purple400,
+    dark: primitiveColors.purple400,
+  }),
+  borderUpsellBase: color({
+    name: "border-upsell-base",
+    light: primitiveColors.purple300,
+    dark: primitiveColors.purple700,
+  }),
+  borderUpsellDim: color({
+    name: "border-upsell-dim",
+    light: primitiveColors.purple200,
+    dark: primitiveColors.purple800,
+  }),
+  buttonFocusRing: color({
+    name: "button-focus-ring",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  buttonFocusSpace: color({
+    name: "button-focus-space",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  buttonBgDefault: color({
+    name: "button-bg-default",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  buttonBgDefaultPrimary: color({
+    name: "button-bg-default-primary",
+    light: primitiveColors.gray100,
+    dark: primitiveColors.gray900,
+  }),
+  buttonBgHover: color({
+    name: "button-bg-hover",
+    light: primitiveColors.white,
+    dark: primitiveColors.black,
+  }),
+  buttonBgActive: color({
+    name: "button-bg-active",
+    light: primitiveColors.gray200,
+    dark: primitiveColors.gray800,
+  }),
+  buttonBgInverseDefault: color({
+    name: "button-bg-inverse-default",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  buttonBgInverseHover: color({
+    name: "button-bg-inverse-hover",
+    light: primitiveColors.cyan900,
+    dark: primitiveColors.cyan100,
+  }),
+  buttonBgInverseActive: color({
+    name: "button-bg-inverse-active",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  buttonBgBrandDefault: color({
+    name: "button-bg-brand-default",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  buttonBgBrandDefaultPrimary: color({
+    name: "button-bg-brand-default-primary",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  buttonBgBrandHover: color({
+    name: "button-bg-brand-hover",
+    light: primitiveColors.red50,
+    dark: primitiveColors.red900,
+  }),
+  buttonBgBrandHoverPrimary: color({
+    name: "button-bg-brand-hover-primary",
+    light: primitiveColors.red400,
+    dark: primitiveColors.red400,
+  }),
+  buttonBgBrandActive: color({
+    name: "button-bg-brand-active",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  buttonBgBrandActivePrimary: color({
+    name: "button-bg-brand-active-primary",
+    light: primitiveColors.red600,
+    dark: primitiveColors.red600,
+  }),
+  buttonBgAccentDefault: color({
+    name: "button-bg-accent-default",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  buttonBgAccentDefaultPrimary: color({
+    name: "button-bg-accent-default-primary",
+    light: primitiveColors.cyan300,
+    dark: primitiveColors.cyan900,
+  }),
+  buttonBgAccentHover: color({
+    name: "button-bg-accent-hover",
+    light: primitiveColors.cyan200,
+    dark: primitiveColors.cyan700,
+  }),
+  buttonBgAccentActive: color({
+    name: "button-bg-accent-active",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan400,
+  }),
+  buttonFgDefault: color({
+    name: "button-fg-default",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  buttonFgDisabled: color({
+    name: "button-fg-disabled",
+    light: primitiveColors.gray700,
+    dark: primitiveColors.gray300,
+  }),
+  buttonFgInverseDefault: color({
+    name: "button-fg-inverse-default",
+    light: primitiveColors.white,
+    dark: primitiveColors.black,
+  }),
+  buttonFgInverseHover: color({
+    name: "button-fg-inverse-hover",
+    light: primitiveColors.cyan300,
+    dark: primitiveColors.cyan800,
+  }),
+  buttonFgInverseActive: color({
+    name: "button-fg-inverse-active",
+    light: primitiveColors.cyan300,
+    dark: primitiveColors.cyan800,
+  }),
+  buttonFgBrandDefault: color({
+    name: "button-fg-brand-default",
+    light: primitiveColors.black,
+    dark: primitiveColors.black,
+  }),
+  buttonFgBrandHover: color({
+    name: "button-fg-brand-hover",
+    light: primitiveColors.red900,
+    dark: primitiveColors.red100,
+  }),
+  buttonFgBrandHoverPrimary: color({
+    name: "button-fg-brand-hover-primary",
+    light: primitiveColors.red900,
+    dark: primitiveColors.red900,
+  }),
+  buttonFgBrandActive: color({
+    name: "button-fg-brand-active",
+    light: primitiveColors.black,
+    dark: primitiveColors.black,
+  }),
+  buttonFgBrandActivePrimary: color({
+    name: "button-fg-brand-active-primary",
+    light: primitiveColors.red50,
+    dark: primitiveColors.red50,
+  }),
+  buttonFgAccentDefault: color({
+    name: "button-fg-accent-default",
+    light: primitiveColors.cyan900,
+    dark: primitiveColors.cyan100,
+  }),
+  buttonFgAccentHover: color({
+    name: "button-fg-accent-hover",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  buttonFgAccentActive: color({
+    name: "button-fg-accent-active",
+    light: primitiveColors.black,
+    dark: primitiveColors.black,
+  }),
+  buttonFgIconDefault: color({
+    name: "button-fg-icon-default",
+    light: primitiveColors.gray700,
+    dark: primitiveColors.gray300,
+  }),
+  buttonFgIconInverse: color({
+    name: "button-fg-icon-inverse",
+    light: primitiveColors.cyan300,
+    dark: primitiveColors.cyan700,
+  }),
+  buttonFgIconBrandPrimary: color({
+    name: "button-fg-icon-brand-primary",
+    light: primitiveColors.red700,
+    dark: primitiveColors.red700,
+  }),
+  buttonFgIconAccent: color({
+    name: "button-fg-icon-accent",
+    light: primitiveColors.cyan700,
+    dark: primitiveColors.cyan300,
+  }),
+  buttonFgIconDisabled: color({
+    name: "button-fg-icon-disabled",
+    light: primitiveColors.gray500,
+    dark: primitiveColors.gray500,
+  }),
+  buttonBorderDefault: color({
+    name: "button-border-default",
+    light: primitiveColors.gray200,
+    dark: primitiveColors.gray800,
+  }),
+  buttonBorderHover: color({
+    name: "button-border-hover",
+    light: primitiveColors.gray200,
+    dark: primitiveColors.gray800,
+  }),
+  buttonBorderActive: color({
+    name: "button-border-active",
+    light: primitiveColors.gray300,
+    dark: primitiveColors.gray700,
+  }),
+  buttonBorderDisabled: color({
+    name: "button-border-disabled",
+    light: primitiveColors.gray400,
+    dark: primitiveColors.gray600,
+  }),
+  buttonBorderBrand: color({
+    name: "button-border-brand",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  buttonBorderAccentDefault: color({
+    name: "button-border-accent-default",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan800,
+  }),
+  buttonBorderAccentHover: color({
+    name: "button-border-accent-hover",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan600,
+  }),
+  buttonBorderAccentActive: color({
+    name: "button-border-accent-active",
+    light: primitiveColors.cyan400,
+    dark: primitiveColors.cyan400,
+  }),
+  linkCtaBgDefault: color({
+    name: "link-cta-bg-default",
+    light: primitiveColors.gray50,
+    dark: primitiveColors.gray950,
+  }),
+  linkCtaBgHover: color({
+    name: "link-cta-bg-hover",
+    light: primitiveColors.white,
+    dark: primitiveColors.black,
+  }),
+  linkCtaBgActive: color({
+    name: "link-cta-bg-active",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  linkCtaFgDefault: color({
+    name: "link-cta-fg-default",
+    light: primitiveColors.black,
+    dark: primitiveColors.white,
+  }),
+  linkCtaFgActive: color({
+    name: "link-cta-fg-active",
+    light: primitiveColors.black,
+    dark: primitiveColors.black,
+  }),
+  linkCtaFgIconDefault: color({
+    name: "link-cta-fg-icon-default",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  linkCtaFgIconActive: color({
+    name: "link-cta-fg-icon-active",
+    light: primitiveColors.black,
+    dark: primitiveColors.black,
+  }),
+  linkCtaBorderDefault: color({
+    name: "link-cta-border-default",
+    light: primitiveColors.gray300,
+    dark: primitiveColors.gray700,
+  }),
+  linkCtaBorderHover: color({
+    name: "link-cta-border-hover",
+    light: primitiveColors.red500,
+    dark: primitiveColors.red500,
+  }),
+  linkUnderline: color({
+    name: "link-underline",
+    light: primitiveColors.cyan600,
+    dark: primitiveColors.cyan400,
+  }),
+  logoPrimary: color({
+    name: "logo-primary",
+    light: primitiveColors.red500,
+    dark: primitiveColors.gray50,
+  }),
+  logoSecondary: color({
+    name: "logo-secondary",
+    light: primitiveColors.red400,
+    dark: primitiveColors.gray300,
+  }),
+  logoTertiary: color({
+    name: "logo-tertiary",
+    light: primitiveColors.red300,
+    dark: primitiveColors.gray500,
+  }),
+  fieldBorder: color({
+    name: "field-border",
+    dark: primitiveColors.gray800,
+    light: primitiveColors.gray200,
+  }),
+  fieldBorderHover: color({
+    name: "field-border-hover",
+    dark: primitiveColors.gray400,
+    light: primitiveColors.gray600,
+  }),
+  fieldBg: color({
+    name: "field-bg",
+    dark: primitiveColors.black,
+    light: primitiveColors.white,
+  }),
+  fieldFg: color({
+    name: "field-fg",
+    dark: primitiveColors.white,
+    light: primitiveColors.black,
+  }),
+  fieldFgPlaceholder: color({
+    name: "field-fg-placeholder",
+    dark: primitiveColors.gray400,
+    light: primitiveColors.gray600,
+  }),
+  fieldFgLabel: color({
+    name: "field-fg-label",
+    dark: primitiveColors.gray200,
+    light: primitiveColors.gray900,
+  }),
+  fieldFgHint: color({
+    name: "field-fg-hint",
+    dark: primitiveColors.gray400,
+    light: primitiveColors.gray700,
+  }),
+}
+
+function color(options: {
+  name: string
+  light: PrimitiveColor
+  dark: PrimitiveColor
+}): SemanticColor {
+  return {
+    name: options.name,
+    variable: `--theme-colors-${options.name}`,
+    dark: options.dark,
+    light: options.light,
+  }
+}

package/src/utils.ts

@@ -0,0 +1,58 @@
+/**
+ * Converts pixels to rem units
+ * @param pixels - The number of pixels to convert
+ * @returns The rem value as a string with 'rem' suffix
+ */
+export function rem(pixels: number): string {
+  return `${pixels / 16}rem`
+}
+
+/**
+ * Converts a URL or string to a relative URL path
+ * @param input - The URL or string to convert
+ * @returns A relative URL path string with origin removed
+ */
+export function toRelativeUrl(input: string | URL) {
+  if (input.toString().startsWith("#")) return input.toString()
+  const urlObject = new URL(input, "https://www.sanity.io")
+  return urlObject.href.replace(urlObject.origin, "")
+}
+
+/**
+ * Checks if a URL is internal to sanity.io
+ * @param href - The URL to check
+ * @returns True if the URL is internal, false otherwise
+ */
+export function isInternalHref(href?: string) {
+  if (!href) return false
+  const value = href.replace(/^(https?:\/\/)?(www\.)?sanity\.io/, "")
+  const isRoot = value === ""
+  const isPath = value.startsWith("/")
+  const isAnchor = value.startsWith("#")
+  return isRoot || isPath || isAnchor
+}
+
+/**
+ * Converts a string to a URL-safe slug
+ * @param string - The string to convert to a slug
+ * @returns A URL-safe slug string with special characters removed/replaced
+ */
+export function slugify(string: string) {
+  const a =
+    "àáâäæãåāăąçćčđďèéêëēėęěğǵḧîïíīįìłḿñńǹňôöòóœøōõṕŕřßśšşșťțûüùúūǘůűųẃẍÿýžźż·/_,:;"
+  const b =
+    "aaaaaaaaaacccddeeeeeeeegghiiiiiilmnnnnooooooooprrsssssttuuuuuuuuuwxyyzzz------"
+  const p = new RegExp(a.split("").join("|"), "g")
+
+  return string
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, "-") // Replace spaces with -
+    .replace(p, (c) => b.charAt(a.indexOf(c))) // Replace special characters
+    .replace(/&/g, "-and-") // Replace & with 'and'
+    .replace(/[^\w-]+/g, "") // Remove all non-word characters
+    .replace(/--+/g, "-") // Replace multiple - with single -
+    .replace(/^-+/, "") // Trim - from start of text
+    .replace(/-+$/, "") // Trim - from end of text
+}

package/tailwind.config.ts

@@ -0,0 +1,7 @@
+import { createConfig } from "./src/tailwind"
+
+export default createConfig({
+  content: ["./src/**/*.{css,js,jsx,tsx,mdx}"],
+  theme: {},
+  plugins: [],
+})

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "CommonJS",
+    "lib": ["ES2020", "DOM"],
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "jsx": "react"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

package/vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "vite"
+import { globby } from "globby"
+import preserveDirectives from "rollup-preserve-directives"
+
+const components = await globby("./src/components/*.tsx")
+
+export default defineConfig({
+  plugins: [preserveDirectives()],
+  build: {
+    lib: {
+      entry: [
+        ...components,
+        "./src/tailwind.ts",
+        "./src/utils.ts",
+        "./src/colors.ts",
+      ],
+      cssFileName: "styles",
+      formats: ["es"],
+    },
+    rollupOptions: {
+      external: ["react", "react-dom"],
+      output: {
+        globals: {
+          react: "React",
+        },
+      },
+    },
+  },
+})