@atproto/oauth-provider 0.5.0 → 0.5.1

package/src/output/build-customization-data.ts

@@ -9,8 +9,32 @@ export const colorNames = ['brand', 'error', 'warning', 'success'] as const
 export const colorNameSchema = z.enum(colorNames)
 export type ColorName = z.infer<typeof colorNameSchema>
 
-export const ColorsDefinitionSchema = z.record(colorNameSchema, z.string())
-export type ColorsDefinition = z.infer<typeof ColorsDefinitionSchema>
+const parsedColorSchema = z.string().transform((value, ctx): RgbColor => {
+  try {
+    const { r, g, b, a } = parseColor(value)
+    if (a != null) {
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: 'Alpha values are not supported',
+      })
+    }
+    return { r, g, b }
+  } catch (e) {
+    ctx.addIssue({
+      code: z.ZodIssueCode.custom,
+      message: e instanceof Error ? e.message : 'Invalid color value',
+    })
+    // Won't actually be used (since an issue was added):
+    return { r: 0, g: 0, b: 0 }
+  }
+})
+export type ParsedColor = z.infer<typeof parsedColorSchema> // Same as RgbColor
+
+export const colorsDefinitionSchema = z.record(
+  colorNameSchema,
+  parsedColorSchema.optional(),
+)
+export type ColorsDefinition = z.infer<typeof colorsDefinitionSchema>
 
 export const localizedStringSchema = z.union([
   z.string(),
@@ -34,10 +58,11 @@ export type LinkDefinition = z.infer<typeof linkDefinitionSchema>
 export const brandingConfigSchema = z.object({
   name: z.string().optional(),
   logo: z.string().optional(),
-  colors: ColorsDefinitionSchema.optional(),
+  colors: colorsDefinitionSchema.optional(),
   links: z.array(linkDefinitionSchema).readonly().optional(),
 })
-export type BrandingConfig = z.infer<typeof brandingConfigSchema>
+export type BrandingInput = z.input<typeof brandingConfigSchema>
+export type Branding = z.infer<typeof brandingConfigSchema>
 
 export const customizationSchema = z.object({
   /**
@@ -58,6 +83,7 @@ export const customizationSchema = z.object({
    */
   hcaptcha: hcaptchaConfigSchema.optional(),
 })
+export type CustomizationInput = z.input<typeof customizationSchema>
 export type Customization = z.infer<typeof customizationSchema>
 
 export type CustomizationData = {
@@ -99,19 +125,13 @@ export function buildCustomizationCss({ branding }: Customization) {
   return ''
 }
 
-function* buildCustomizationVars(branding?: BrandingConfig) {
+function* buildCustomizationVars(branding?: Branding) {
   if (branding?.colors) {
     for (const name of colorNames) {
       const value = branding.colors[name]
-      if (!value) continue
-
-      // Skip undefined values
-      if (value === undefined) continue
+      if (!value) continue // Skip missing colors
 
-      const { r, g, b, a } = parseColor(value)
-
-      // Tailwind does not apply alpha values to base colors
-      if (a !== undefined) throw new TypeError('Alpha not supported')
+      const { r, g, b } = value
 
       const contrast = computeLuma({ r, g, b }) > 128 ? '0 0 0' : '255 255 255'
 
@@ -121,54 +141,71 @@ function* buildCustomizationVars(branding?: BrandingConfig) {
   }
 }
 
+type RgbColor = { r: number; g: number; b: number }
 type RgbaColor = { r: number; g: number; b: number; a?: number }
-function parseColor(color: unknown): RgbaColor {
-  if (typeof color !== 'string') {
-    throw new TypeError(`Invalid color value: ${typeof color}`)
+function parseColor(color: string): RgbaColor {
+  if (color.startsWith('#')) {
+    return parseHexColor(color)
   }
 
-  if (color.startsWith('#')) {
-    if (color.length === 4 || color.length === 5) {
-      const r = parseUi8Hex(color.slice(1, 2))
-      const g = parseUi8Hex(color.slice(2, 3))
-      const b = parseUi8Hex(color.slice(3, 4))
-      const a = color.length > 4 ? parseUi8Hex(color.slice(4, 5)) : undefined
-      return { r, g, b, a }
-    }
+  if (color.startsWith('rgba(')) {
+    return parseRgbaColor(color)
+  }
 
-    if (color.length === 7 || color.length === 9) {
-      const r = parseUi8Hex(color.slice(1, 3))
-      const g = parseUi8Hex(color.slice(3, 5))
-      const b = parseUi8Hex(color.slice(5, 7))
-      const a = color.length > 8 ? parseUi8Hex(color.slice(7, 9)) : undefined
-      return { r, g, b, a }
-    }
+  if (color.startsWith('rgb(')) {
+    return parseRgbColor(color)
+  }
+
+  // Should never happen (as long as the input is a validated WebColor)
+  throw new TypeError(`Invalid color value: ${color}`)
+}
 
-    throw new TypeError(`Invalid hex color: ${color}`)
+function parseHexColor(v: string) {
+  // parseInt('az', 16) does not return NaN so we need to check the format
+  if (!/^#[0-9a-f]+$/i.test(v)) {
+    throw new TypeError(`Invalid hex color value: ${v}`)
   }
 
-  const rgbMatch = color.match(
-    /^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
-  )
-  if (rgbMatch) {
-    const r = parseUi8Dec(rgbMatch[1])
-    const g = parseUi8Dec(rgbMatch[2])
-    const b = parseUi8Dec(rgbMatch[3])
-    return { r, g, b }
+  if (v.length === 4 || v.length === 5) {
+    const r = parseUi8Hex(v.slice(1, 2))
+    const g = parseUi8Hex(v.slice(2, 3))
+    const b = parseUi8Hex(v.slice(3, 4))
+    const a = v.length > 4 ? parseUi8Hex(v.slice(4, 5)) : undefined
+    return { r, g, b, a }
   }
 
-  const rgbaMatch = color.match(
-    /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
-  )
-  if (rgbaMatch) {
-    const r = parseUi8Dec(rgbaMatch[1])
-    const g = parseUi8Dec(rgbaMatch[2])
-    const b = parseUi8Dec(rgbaMatch[3])
-    const a = parseUi8Dec(rgbaMatch[4])
+  if (v.length === 7 || v.length === 9) {
+    const r = parseUi8Hex(v.slice(1, 3))
+    const g = parseUi8Hex(v.slice(3, 5))
+    const b = parseUi8Hex(v.slice(5, 7))
+    const a = v.length > 8 ? parseUi8Hex(v.slice(7, 9)) : undefined
     return { r, g, b, a }
   }
 
-  throw new TypeError(`Unsupported color format: ${color}`)
+  throw new TypeError(`Invalid hex color value: ${v}`)
+}
+
+function parseRgbColor(v: string) {
+  const matches = v.match(/^\s*rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/)
+  if (!matches) throw new TypeError(`Invalid rgb color value: ${v}`)
+
+  const r = parseUi8Dec(matches[1])
+  const g = parseUi8Dec(matches[2])
+  const b = parseUi8Dec(matches[3])
+  return { r, g, b }
+}
+
+function parseRgbaColor(v: string) {
+  const matches = v.match(
+    /^\s*rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)\s*$/,
+  )
+  if (!matches) throw new TypeError(`Invalid rgba color value: ${v}`)
+
+  const r = parseUi8Dec(matches[1])
+  const g = parseUi8Dec(matches[2])
+  const b = parseUi8Dec(matches[3])
+  const a = parseUi8Dec(matches[4])
+  return { r, g, b, a }
 }
 
 function computeLuma({ r, g, b }: RgbaColor) {
@@ -185,5 +222,7 @@ function parseUi8Dec(v: string) {
 
 function asUi8(v: number) {
   if (v >= 0 && v <= 255 && v === (v | 0)) return v
-  throw new TypeError(`Invalid color component: ${v}`)
+  throw new TypeError(
+    `Invalid color component "${v}" (expected an integer between 0 and 255)`,
+  )
 }