@yahoo/uds-v5-wip 1.4.0 → 1.5.0

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

@@ -1,326 +1,230 @@
 import { defaultFoundationPreset } from "./defaultPreset.js";
 //#region ../foundational-presets/dist/terminal.js
-const terminalFoundationPreset = defaultFoundationPreset.defineAtomicTokens([
-	{
-		properties: ["color"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "on-brand",
-				value: "#09090b",
-				modifiers: { _dark: "#0a0a0a" }
-			},
-			{
-				name: "accent",
-				value: "#00cd00",
-				modifiers: { _dark: "#33ff33" }
-			},
-			{
-				name: "on-accent",
-				value: "#09090b",
-				modifiers: { _dark: "#0a0a0a" }
-			},
-			{
-				name: "alert",
-				value: "#df1313",
-				modifiers: { _dark: "#fa9b9b" }
-			},
-			{
-				name: "on-alert",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "positive",
-				value: "#17843f",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "on-positive",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "warning",
-				value: "#bf5105",
-				modifiers: { _dark: "#fca156" }
-			},
-			{
-				name: "on-warning",
-				value: "#ffffff",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "primary",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#0a0a0a" }
-			},
-			{
-				name: "on-primary",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "secondary",
-				value: "#1a1a1a",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "on-secondary",
-				value: "#00d000",
-				modifiers: { _dark: "#00d000" }
-			},
-			{
-				name: "tertiary",
-				value: "#141414",
-				modifiers: { _dark: "#141414" }
-			},
-			{
-				name: "on-tertiary",
-				value: "#00ce00",
-				modifiers: { _dark: "#00ce00" }
-			},
-			{
-				name: "inverse",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "on-inverse",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#0a0a0a" }
-			}
-		]
+const terminalFoundationPreset = defaultFoundationPreset.defineVars({
+	color: {
+		brand: {
+			value: "#00ff00",
+			_dark: "#00ff00"
+		},
+		"on-brand": {
+			value: "#09090b",
+			_dark: "#0a0a0a"
+		},
+		accent: {
+			value: "#00cd00",
+			_dark: "#33ff33"
+		},
+		"on-accent": {
+			value: "#09090b",
+			_dark: "#0a0a0a"
+		},
+		alert: {
+			value: "#df1313",
+			_dark: "#fa9b9b"
+		},
+		"on-alert": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		positive: {
+			value: "#17843f",
+			_dark: "#4ade80"
+		},
+		"on-positive": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		warning: {
+			value: "#bf5105",
+			_dark: "#fca156"
+		},
+		"on-warning": {
+			value: "#ffffff",
+			_dark: "#09090b"
+		},
+		primary: {
+			value: "#0a0a0a",
+			_dark: "#0a0a0a"
+		},
+		"on-primary": {
+			value: "#00ff00",
+			_dark: "#00ff00"
+		},
+		secondary: {
+			value: "#1a1a1a",
+			_dark: "#1a1a1a"
+		},
+		"on-secondary": {
+			value: "#00d000",
+			_dark: "#00d000"
+		},
+		tertiary: {
+			value: "#141414",
+			_dark: "#141414"
+		},
+		"on-tertiary": {
+			value: "#00ce00",
+			_dark: "#00ce00"
+		},
+		inverse: {
+			value: "#00ff00",
+			_dark: "#00ff00"
+		},
+		"on-inverse": {
+			value: "#0a0a0a",
+			_dark: "#0a0a0a"
+		}
 	},
-	{
-		properties: ["bg"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "surface",
-				value: "#050505",
-				modifiers: { _dark: "#050505" }
-			},
-			{
-				name: "accent",
-				value: "#00cc00",
-				modifiers: { _dark: "#33ff33" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#0a0a0a" }
-			},
-			{
-				name: "elevation-1",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#141414" }
-			},
-			{
-				name: "elevation-2",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#1f1f1f" }
-			},
-			{
-				name: "elevation-3",
-				value: "#0a0a0a",
-				modifiers: { _dark: "#2a2a2a" }
-			},
-			{
-				name: "secondary",
-				value: "#1a1a1a",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "tertiary",
-				value: "#141414",
-				modifiers: { _dark: "#141414" }
-			},
-			{
-				name: "inverse",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "brand-wash",
-				value: "#001a00",
-				modifiers: { _dark: "#001a00" }
-			},
-			{
-				name: "accent-wash",
-				value: "#001500",
-				modifiers: { _dark: "#001500" }
-			},
-			{
-				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: "#00ff00",
+			_dark: "#00ff00"
+		},
+		surface: {
+			value: "#050505",
+			_dark: "#050505"
+		},
+		accent: {
+			value: "#00cc00",
+			_dark: "#33ff33"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#0a0a0a",
+			_dark: "#0a0a0a"
+		},
+		"elevation-1": {
+			value: "#0a0a0a",
+			_dark: "#141414"
+		},
+		"elevation-2": {
+			value: "#0a0a0a",
+			_dark: "#1f1f1f"
+		},
+		"elevation-3": {
+			value: "#0a0a0a",
+			_dark: "#2a2a2a"
+		},
+		secondary: {
+			value: "#1a1a1a",
+			_dark: "#1a1a1a"
+		},
+		tertiary: {
+			value: "#141414",
+			_dark: "#141414"
+		},
+		inverse: {
+			value: "#00ff00",
+			_dark: "#00ff00"
+		},
+		"brand-wash": {
+			value: "#001a00",
+			_dark: "#001a00"
+		},
+		"accent-wash": {
+			value: "#001500",
+			_dark: "#001500"
+		},
+		"alert-wash": {
+			value: "#fef2f2",
+			_dark: "#450a0a"
+		},
+		"positive-wash": {
+			value: "#f0fdf4",
+			_dark: "#052e16"
+		},
+		"warning-wash": {
+			value: "#fff7ed",
+			_dark: "#431407"
+		}
 	},
-	{
-		properties: ["borderColor"],
-		tokens: [
-			{
-				name: "brand",
-				value: "#00ff00",
-				modifiers: { _dark: "#00ff00" }
-			},
-			{
-				name: "surface",
-				value: "#fafafa",
-				modifiers: { _dark: "#09090b" }
-			},
-			{
-				name: "accent",
-				value: "#00cc00",
-				modifiers: { _dark: "#33ff33" }
-			},
-			{
-				name: "alert",
-				value: "#eb1616",
-				modifiers: { _dark: "#f98d8d" }
-			},
-			{
-				name: "positive",
-				value: "#188841",
-				modifiers: { _dark: "#4ade80" }
-			},
-			{
-				name: "warning",
-				value: "#c55405",
-				modifiers: { _dark: "#fb923c" }
-			},
-			{
-				name: "primary",
-				value: "#1a1a1a",
-				modifiers: { _dark: "#1a1a1a" }
-			},
-			{
-				name: "secondary",
-				value: "#2a2a2a",
-				modifiers: { _dark: "#2a2a2a" }
-			},
-			{
-				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: "#00ff00",
+			_dark: "#00ff00"
+		},
+		surface: {
+			value: "#fafafa",
+			_dark: "#09090b"
+		},
+		accent: {
+			value: "#00cc00",
+			_dark: "#33ff33"
+		},
+		alert: {
+			value: "#eb1616",
+			_dark: "#f98d8d"
+		},
+		positive: {
+			value: "#188841",
+			_dark: "#4ade80"
+		},
+		warning: {
+			value: "#c55405",
+			_dark: "#fb923c"
+		},
+		primary: {
+			value: "#1a1a1a",
+			_dark: "#1a1a1a"
+		},
+		secondary: {
+			value: "#2a2a2a",
+			_dark: "#2a2a2a"
+		},
+		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: "0px"
-			},
-			{
-				name: "sm",
-				value: "2px"
-			},
-			{
-				name: "md",
-				value: "2px"
-			},
-			{
-				name: "lg",
-				value: "4px"
-			},
-			{
-				name: "xl",
-				value: "4px"
-			},
-			{
-				name: "full",
-				value: "1e5px"
-			}
-		]
+	radius: {
+		none: { value: "0px" },
+		xs: { value: "0px" },
+		sm: { value: "2px" },
+		md: { value: "2px" },
+		lg: { value: "4px" },
+		xl: { value: "4px" },
+		full: { value: "1e5px" }
 	},
-	{
-		properties: ["fontFamily"],
-		tokens: [
-			{
-				name: "sans",
-				value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)"
-			},
-			{
-				name: "serif",
-				value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)"
-			},
-			{
-				name: "mono",
-				value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)"
-			}
-		]
+	fontFamily: {
+		sans: { value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)" },
+		serif: { value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)" },
+		mono: { value: "var(--uds-font-family-jetbrains-mono, Menlo, Monaco, Courier New, monospace)" }
 	}
-]);
+});
 //#endregion
 export { terminalFoundationPreset };