@yahoo/uds-v5-wip 1.3.0 → 1.5.0

package/dist/foundational-presets/dist/highContrast.js

@@ -1,326 +1,230 @@
 import { defaultFoundationPreset } from "./defaultPreset.js";
 //#region ../foundational-presets/dist/highContrast.js
-const highContrastFoundationPreset = defaultFoundationPreset.defineAtomicTokens([
-	{
-		properties: ["color"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "on-brand",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			},
-			{
-				name: "accent",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "on-accent",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			},
-			{
-				name: "alert",
-				value: "#cc0000",
-				modifiers: { _dark: "#ff9999" }
-			},
-			{
-				name: "on-alert",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "positive",
-				value: "#006600",
-				modifiers: { _dark: "#00d500" }
-			},
-			{
-				name: "on-positive",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "warning",
-				value: "#b35a00",
-				modifiers: { _dark: "#ffa113" }
-			},
-			{
-				name: "on-warning",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "primary",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			},
-			{
-				name: "on-primary",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "secondary",
-				value: "#f0f0f0",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "on-secondary",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "tertiary",
-				value: "#e0e0e0",
-				modifiers: { _dark: "#333333" }
-			},
-			{
-				name: "on-tertiary",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "inverse",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "on-inverse",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			}
-		]
+const highContrastFoundationPreset = defaultFoundationPreset.defineVars({
+	color: {
+		brand: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		"on-brand": {
+			value: "#ffffff",
+			_dark: "#000000"
+		},
+		accent: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		"on-accent": {
+			value: "#ffffff",
+			_dark: "#000000"
+		},
+		alert: {
+			value: "#cc0000",
+			_dark: "#ff9999"
+		},
+		"on-alert": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		positive: {
+			value: "#006600",
+			_dark: "#00d500"
+		},
+		"on-positive": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		warning: {
+			value: "#b35a00",
+			_dark: "#ffa113"
+		},
+		"on-warning": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		primary: {
+			value: "#ffffff",
+			_dark: "#000000"
+		},
+		"on-primary": {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		secondary: {
+			value: "#f0f0f0",
+			_dark: "#1a1a1a"
+		},
+		"on-secondary": {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		tertiary: {
+			value: "#e0e0e0",
+			_dark: "#333333"
+		},
+		"on-tertiary": {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		inverse: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		"on-inverse": {
+			value: "#ffffff",
+			_dark: "#000000"
+		}
 	},
-	{
-		properties: ["bg"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "surface",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			},
-			{
-				name: "accent",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#ffffff",
-				modifiers: { _dark: "#000000" }
-			},
-			{
-				name: "elevation-1",
-				value: "#ffffff",
-				modifiers: { _dark: "#333333" }
-			},
-			{
-				name: "elevation-2",
-				value: "#ffffff",
-				modifiers: { _dark: "#4d4d4d" }
-			},
-			{
-				name: "elevation-3",
-				value: "#ffffff",
-				modifiers: { _dark: "#666666" }
-			},
-			{
-				name: "secondary",
-				value: "#f0f0f0",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "tertiary",
-				value: "#e0e0e0",
-				modifiers: { _dark: "#333333" }
-			},
-			{
-				name: "inverse",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "brand-wash",
-				value: "#f0f0f0",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "accent-wash",
-				value: "#f0f0f0",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "alert-wash",
-				value: "#fef2f2",
-				modifiers: { _dark: "#450a0a" }
-			},
-			{
-				name: "positive-wash",
-				value: "#f0fdf4",
-				modifiers: { _dark: "#052e16" }
-			},
-			{
-				name: "warning-wash",
-				value: "#fff7ed",
-				modifiers: { _dark: "#431407" }
-			}
-		]
+	bg: {
+		brand: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		surface: {
+			value: "#ffffff",
+			_dark: "#000000"
+		},
+		accent: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#ffffff",
+			_dark: "#000000"
+		},
+		"elevation-1": {
+			value: "#ffffff",
+			_dark: "#333333"
+		},
+		"elevation-2": {
+			value: "#ffffff",
+			_dark: "#4d4d4d"
+		},
+		"elevation-3": {
+			value: "#ffffff",
+			_dark: "#666666"
+		},
+		secondary: {
+			value: "#f0f0f0",
+			_dark: "#1a1a1a"
+		},
+		tertiary: {
+			value: "#e0e0e0",
+			_dark: "#333333"
+		},
+		inverse: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		"brand-wash": {
+			value: "#f0f0f0",
+			_dark: "#1a1a1a"
+		},
+		"accent-wash": {
+			value: "#f0f0f0",
+			_dark: "#1a1a1a"
+		},
+		"alert-wash": {
+			value: "#fef2f2",
+			_dark: "#450a0a"
+		},
+		"positive-wash": {
+			value: "#f0fdf4",
+			_dark: "#052e16"
+		},
+		"warning-wash": {
+			value: "#fff7ed",
+			_dark: "#431407"
+		}
 	},
-	{
-		properties: ["borderColor"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "surface",
-				value: "#fafafa",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "accent",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "secondary",
-				value: "#000000",
-				modifiers: { _dark: "#ffffff" }
-			},
-			{
-				name: "tertiary",
-				value: "#fafafa",
-				modifiers: { _dark: "#18181b" }
-			},
-			{
-				name: "inverse",
-				value: "#18181b",
-				modifiers: { _dark: "#fafafa" }
-			},
-			{
-				name: "brand-wash",
-				value: "#eff6ff",
-				modifiers: { _dark: "#172554" }
-			},
-			{
-				name: "accent-wash",
-				value: "#fff1f2",
-				modifiers: { _dark: "#4c0519" }
-			},
-			{
-				name: "alert-wash",
-				value: "#fef2f2",
-				modifiers: { _dark: "#450a0a" }
-			},
-			{
-				name: "positive-wash",
-				value: "#f0fdf4",
-				modifiers: { _dark: "#052e16" }
-			},
-			{
-				name: "warning-wash",
-				value: "#fff7ed",
-				modifiers: { _dark: "#431407" }
-			}
-		]
+	borderColor: {
+		brand: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		surface: {
+			value: "#fafafa",
+			_dark: "#09090b"
+		},
+		accent: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		secondary: {
+			value: "#000000",
+			_dark: "#ffffff"
+		},
+		tertiary: {
+			value: "#fafafa",
+			_dark: "#18181b"
+		},
+		inverse: {
+			value: "#18181b",
+			_dark: "#fafafa"
+		},
+		"brand-wash": {
+			value: "#eff6ff",
+			_dark: "#172554"
+		},
+		"accent-wash": {
+			value: "#fff1f2",
+			_dark: "#4c0519"
+		},
+		"alert-wash": {
+			value: "#fef2f2",
+			_dark: "#450a0a"
+		},
+		"positive-wash": {
+			value: "#f0fdf4",
+			_dark: "#052e16"
+		},
+		"warning-wash": {
+			value: "#fff7ed",
+			_dark: "#431407"
+		}
 	},
-	{
-		properties: ["borderRadius"],
-		tokens: [
-			{
-				name: "none",
-				value: "0px"
-			},
-			{
-				name: "xs",
-				value: "2px"
-			},
-			{
-				name: "sm",
-				value: "4px"
-			},
-			{
-				name: "md",
-				value: "6px"
-			},
-			{
-				name: "lg",
-				value: "8px"
-			},
-			{
-				name: "xl",
-				value: "12px"
-			},
-			{
-				name: "full",
-				value: "1e5px"
-			}
-		]
+	radius: {
+		none: { value: "0px" },
+		xs: { value: "2px" },
+		sm: { value: "4px" },
+		md: { value: "6px" },
+		lg: { value: "8px" },
+		xl: { value: "12px" },
+		full: { value: "1e5px" }
 	},
-	{
-		properties: ["fontFamily"],
-		tokens: [
-			{
-				name: "sans",
-				value: "var(--uds-font-family-dm-sans, ui-sans-serif, system-ui, sans-serif)"
-			},
-			{
-				name: "serif",
-				value: "var(--uds-font-family-lora, Georgia, Times, Times New Roman, serif)"
-			},
-			{
-				name: "mono",
-				value: "var(--uds-font-family-ibm-plex-mono, Menlo, Monaco, Courier New, monospace)"
-			}
-		]
+	fontFamily: {
+		sans: { value: "var(--uds-font-family-dm-sans, ui-sans-serif, system-ui, sans-serif)" },
+		serif: { value: "var(--uds-font-family-lora, Georgia, Times, Times New Roman, serif)" },
+		mono: { value: "var(--uds-font-family-ibm-plex-mono, Menlo, Monaco, Courier New, monospace)" }
 	}
-]);
+});
 //#endregion
 export { highContrastFoundationPreset };