@thi.ng/meta-css/specs/colors.mcss.json

Data-driven CSS framework codegen, transpiler & bundler

{
	"tables": {
		"__grays_comment": "Tachyons CSS colors",
		"grays": {
			"black": "#000",
			"near-black": "#111",
			"dark-gray": "#333",
			"mid-gray": "#555",
			"gray": "#777",
			"silver": "#999",
			"light-silver": "#aaa",
			"moon-gray": "#ccc",
			"light-gray": "#eee",
			"near-white": "#f4f4f4",
			"white": "#fff"
		},
		"__palette_comment": "Tachyons CSS colors",
		"palette": {
			"current": "currentcolor",
			"transparent": "transparent",
			"blue": "#357edd",
			"dark-blue": "#00449e",
			"dark-green": "#137752",
			"dark-pink": "#d5008f",
			"dark-red": "#e7040f",
			"gold": "#ffb700",
			"green": "#19a974",
			"hot-pink": "#ff41b4",
			"light-blue": "#96ccff",
			"light-green": "#9eebcf",
			"light-pink": "#ffa3d7",
			"light-purple": "#a463f2",
			"light-red": "#ff725c",
			"light-yellow": "#fbf1a9",
			"lightest-blue": "#cdecff",
			"navy": "#001b44",
			"orange": "#ff6300",
			"pink": "#ff80cc",
			"purple": "#5e2ca5",
			"red": "#ff4136",
			"washed-blue": "#f6fffe",
			"washed-green": "#e8fdf5",
			"washed-red": "#ffdfdf",
			"washed-yellow": "#fffceb",
			"yellow": "#ffd700"
		}
	},
	"vars": {
		"schemes": ["border-", "background-", ""],
		"fill-stroke": ["fill", "stroke"]
	},
	"specs": [
		{
			"name": "color-scheme-<k>",
			"doc": { "group": "color scheme", "desc": "<v>" },
			"props": "color-scheme",
			"values": {
				"light": "light",
				"dark": "dark",
				"light-dark": "light dark"
			}
		},
		{
			"name": "border-color-<k>",
			"doc": { "group": "border color", "desc": "<v>" },
			"props": "border-color",
			"values": "palette"
		},
		{
			"name": "border-color-<k>",
			"doc": { "group": "border color", "desc": "<v>" },
			"props": "border-color",
			"values": "grays"
		},
		{
			"name": "color-<k>",
			"doc": { "group": "text color", "desc": "<v>" },
			"props": "color",
			"values": "palette"
		},
		{
			"name": "color-<k>",
			"doc": { "group": "text color", "desc": "<v>" },
			"props": "color",
			"values": "grays"
		},
		{
			"name": "bg-color-<k>",
			"doc": { "group": "background color", "desc": "<v>" },
			"props": "background-color",
			"values": "palette"
		},
		{
			"name": "bg-color-<k>",
			"doc": { "group": "background color", "desc": "<v>" },
			"props": "background-color",
			"values": "grays"
		},
		{
			"name": "<var>-<k>",
			"doc": { "group": "svg", "desc": "<v>" },
			"props": { "<var>": "<v>" },
			"values": "palette",
			"vars": ["fill-stroke"]
		},
		{
			"name": "<var>-<k>",
			"doc": { "group": "svg", "desc": "<v>" },
			"props": { "<var>": "<v>" },
			"values": "grays",
			"vars": ["fill-stroke"]
		},
		{
			"name": "o-<k>",
			"doc": { "group": "opacity", "desc": "<v>" },
			"props": "opacity",
			"values": {
				"0": 0,
				"10": 0.1,
				"20": 0.2,
				"30": 0.3,
				"40": 0.4,
				"50": 0.5,
				"60": 0.6,
				"70": 0.7,
				"80": 0.8,
				"90": 0.9,
				"100": 1
			}
		}
	],
	"templates": [
		{
			"name": "border-light-dark",
			"doc": {
				"group": "color scheme",
				"desc": "Sets `border-color` using CSS light-dark() function",
				"args": [
					"light: variable name (without `--` prefix)",
					"dark: variable name (without `--` prefix)"
				]
			},
			"props": {
				"border-color": "light-dark(var(--{0}), var(--{1}))"
			}
		},
		{
			"name": "bg-light-dark",
			"doc": {
				"group": "color scheme",
				"desc": "Sets `background-color` using CSS light-dark() function",
				"args": [
					"light: variable name (without `--` prefix)",
					"dark: variable name (without `--` prefix)"
				]
			},
			"props": {
				"background-color": "light-dark(var(--{0}), var(--{1}))"
			}
		},
		{
			"name": "light-dark",
			"doc": {
				"group": "color scheme",
				"desc": "Sets `color` using CSS light-dark() function",
				"args": [
					"light: variable name (without `--` prefix)",
					"dark: variable name (without `--` prefix)"
				]
			},
			"props": {
				"color": "light-dark(var(--{0}), var(--{1}))"
			}
		},
		{
			"name": "<var>-light-dark",
			"doc": {
				"group": "color scheme",
				"desc": "Sets `<var>` color using CSS light-dark() function",
				"args": [
					"light: variable name (without `--` prefix)",
					"dark: variable name (without `--` prefix)"
				]
			},
			"props": { "<var>": "light-dark(var(--{0}), var(--{1}))" },
			"vars": ["fill-stroke"]
		},
		{
			"name": "border-color",
			"doc": {
				"group": "border color",
				"args": ["name: variable name (without `--` prefix)"]
			},
			"props": { "border-color": "var(--{0})" }
		},
		{
			"name": "color",
			"doc": {
				"group": "text color",
				"args": ["name: variable name (without `--` prefix)"]
			},
			"props": { "color": "var(--{0})" }
		},
		{
			"name": "bg-color",
			"doc": {
				"group": "background color",
				"args": ["name: variable name (without `--` prefix)"]
			},
			"props": { "background-color": "var(--{0})" }
		},
		{
			"name": "<var>",
			"doc": {
				"group": "svg",
				"args": ["name: variable name (without `--` prefix)"]
			},
			"props": { "<var>": "var(--{0})" },
			"vars": ["fill-stroke"]
		}
	]
}