@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/dist/tokens/configs/button.cjs

@@ -0,0 +1,948 @@
+/*! © 2025 Yahoo, Inc. UDS v0.0.0-development */
+
+//#region src/tokens/configs/button.ts
+const noneOrCustomEffectOptions = ["none", "custom"];
+const scaleEffectOptions = [
+	"none",
+	"up",
+	"down"
+];
+const defaultFillEffect = {
+	hover: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "up",
+			options: scaleEffectOptions
+		}
+	},
+	pressed: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "down",
+			options: scaleEffectOptions
+		}
+	}
+};
+const defaultOutlineEffect = {
+	hover: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "up",
+			options: scaleEffectOptions
+		}
+	},
+	pressed: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "down",
+			options: scaleEffectOptions
+		}
+	}
+};
+const defaultGhostEffect = {
+	hover: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "up",
+			options: scaleEffectOptions
+		}
+	},
+	pressed: {
+		backgroundColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		borderColor: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		color: {
+			value: "none",
+			options: noneOrCustomEffectOptions
+		},
+		scale: {
+			value: "down",
+			options: scaleEffectOptions
+		}
+	}
+};
+const defaultShadows = {
+	dropShadow: {
+		value: "none",
+		config: null
+	},
+	insetShadow: {
+		value: "none",
+		config: null
+	}
+};
+function getDefaultFillBase(alias) {
+	return {
+		borderWidth: "none",
+		borderRadius: "full",
+		borderColor: {
+			type: "palette",
+			value: "transparent"
+		},
+		backgroundColor: {
+			type: "palette",
+			value: alias
+		},
+		color: {
+			type: "palette",
+			value: "on-color"
+		},
+		scale: "none",
+		...defaultShadows
+	};
+}
+function getDefaultOutlineBase(alias) {
+	return {
+		borderWidth: "thin",
+		borderRadius: "full",
+		backgroundColor: {
+			type: "palette",
+			value: "transparent"
+		},
+		borderColor: {
+			type: "palette",
+			value: alias
+		},
+		color: {
+			type: "palette",
+			value: alias
+		},
+		scale: "none",
+		...defaultShadows
+	};
+}
+function getDefaultGhostBase(alias) {
+	return {
+		borderWidth: "none",
+		borderRadius: "full",
+		backgroundColor: {
+			type: "palette",
+			value: "transparent"
+		},
+		borderColor: {
+			type: "palette",
+			value: "transparent"
+		},
+		color: {
+			type: "palette",
+			value: alias
+		},
+		scale: "none",
+		...defaultShadows
+	};
+}
+const getDefaultButtonBaseMap = {
+	fill: getDefaultFillBase,
+	outline: getDefaultOutlineBase,
+	ghost: getDefaultGhostBase
+};
+const button = {
+	defaults: {
+		palette: "accent",
+		variant: "primary",
+		size: "md"
+	},
+	size: {
+		sm: {
+			spacingHorizontal: "4",
+			spacingVertical: "1",
+			gap: "2",
+			iconSize: "sm",
+			textVariant: "label1"
+		},
+		md: {
+			spacingHorizontal: "6",
+			spacingVertical: "3",
+			gap: "2",
+			iconSize: "sm",
+			textVariant: "label1"
+		},
+		lg: {
+			spacingHorizontal: "7",
+			spacingVertical: "4",
+			gap: "2",
+			iconSize: "md",
+			textVariant: "headline1"
+		}
+	},
+	palette: {
+		info: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("info"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "blue-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "blue-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("info"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "blue-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "blue-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "blue-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "blue-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("info"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "blue-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "info"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "blue-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "info"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		},
+		accent: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("accent"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "carbon-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "carbon-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("accent"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "carbon-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "carbon-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "carbon-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "carbon-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("accent"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "carbon-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "accent"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "carbon-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "accent"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		},
+		brand: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("brand"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "purple-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "purple-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("brand"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "purple-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "purple-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "purple-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "purple-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("brand"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "purple-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "brand"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "purple-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "brand"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		},
+		alert: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("alert"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "red-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "red-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("alert"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "red-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "red-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "red-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "red-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("alert"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "red-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "alert"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "red-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "alert"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		},
+		positive: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("positive"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "green-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "green-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("positive"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "green-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "green-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "green-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "green-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("positive"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "green-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "positive"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "green-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "positive"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		},
+		warning: {
+			primary: {
+				kind: "fill",
+				effect: defaultFillEffect,
+				base: getDefaultFillBase("warning"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "orange-10"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "orange-11"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "on-color"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			secondary: {
+				kind: "outline",
+				effect: defaultOutlineEffect,
+				base: getDefaultOutlineBase("warning"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "orange-10"
+						},
+						color: {
+							type: "spectrum",
+							value: "orange-10"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						borderColor: {
+							type: "spectrum",
+							value: "orange-11"
+						},
+						color: {
+							type: "spectrum",
+							value: "orange-11"
+						},
+						...defaultShadows
+					}
+				}
+			},
+			tertiary: {
+				kind: "ghost",
+				effect: defaultGhostEffect,
+				base: getDefaultGhostBase("warning"),
+				state: {
+					hover: {
+						scale: "up",
+						backgroundColor: {
+							type: "spectrum",
+							value: "orange-2"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "warning"
+						},
+						...defaultShadows
+					},
+					pressed: {
+						scale: "down",
+						backgroundColor: {
+							type: "spectrum",
+							value: "orange-4"
+						},
+						borderColor: {
+							type: "palette",
+							value: "transparent"
+						},
+						color: {
+							type: "palette",
+							value: "warning"
+						},
+						...defaultShadows
+					}
+				}
+			}
+		}
+	}
+};
+
+//#endregion
+exports.button = button;
+exports.getDefaultButtonBaseMap = getDefaultButtonBaseMap;