SELECT 'black' AS outline_color
FROM elements parent
JOIN elements child ON parent.id = child.parent_id
WHERE parent.data_theme = 'light'
AND child.data_theme = 'dark'
AND child.focused = true
there's a lot of ways to express the same thing! it's interesting to notice the connections between them, I think, and their strengths and weaknesses, e.g. I probably wouldn't want to write my whole design system in SQL, but since it's relational queries over the elements structure and properties, you could. [data-theme="dark"] [data-theme="light"] :focus {
outline-color: black;
}
means, in English/pseudocode, roughly: "If you have an element X with attribute data-theme="dark", and X has a child Y with attribute data-theme="light", and Y is focused, then the outline-color of Y is black". outline-color(Y, black) if
data-theme(X, "dark") and
parent(X, Y) and
data-theme(Y, "light") and
focused(Y)
that's Datalog, except I went ahead and replaced :- with "if" and "," with "and". Y.outline_color := black if
X.data-theme == dark and
Y.parent == X and
Y.data-theme == dark and
Y.focused
imagine `X.attr == val` <==> `attr(X, val)` as a kind of UFCS for Datalog to make it palatable to Regular Programmers, right forall Y {
Y.outline_color := black if
Y.data_theme == "dark" and
Y.focused and
Y.parent.data_theme == "light"
}
here we've explicitly introduced Y, and made one of our joins implicit, and it looks even more like Regular Programming now, except the Datalog engine (or equivalent) is kind of running all these loops for you, every time one of their dependencies changes, in an efficient way ...