Apple System Colors

<script>
const colorList = `-apple-system-header-text
-apple-system-text-background
-apple-system-control-background
-apple-system-placeholder-text
-apple-system-label
-apple-system-secondary-label
-apple-system-tertiary-label
-apple-system-tertiary-fill
-apple-system-quaternary-label
-apple-system-quinary-label
-apple-system-grid
-apple-system-separator
-apple-system-container-border
-apple-system-background
-apple-system-secondary-background
-apple-system-tertiary-background
-apple-system-grouped-background
-apple-system-secondary-grouped-background
-apple-system-tertiary-grouped-background
-apple-system-selected-content-background
-apple-system-unemphasized-selected-content-background
-apple-wireless-playback-target-active
-apple-system-blue
-apple-system-brown
-apple-system-gray
-apple-system-green
-apple-system-orange
-apple-system-pink
-apple-system-purple
-apple-system-red
-apple-system-yellow
-apple-system-app-highlight-background
-apple-system-alternate-selected-text
-apple-system-control-accent
-apple-system-even-alternating-content-background
-apple-system-odd-alternating-content-background
-apple-system-selected-text
-apple-system-unemphasized-selected-text
-apple-system-selected-text-background
-apple-system-unemphasized-selected-text-background
-apple-system-find-highlight-background
-apple-system-indigo
-apple-system-teal
-apple-system-opaque-fill
-apple-system-opaque-secondary-fill
-apple-system-opaque-secondary-fill-disabled
-apple-system-opaque-tertiary-fill
-apple-system-quaternary-fill
-apple-system-opaque-separator
-webkit-control-background
activebuttontext
-webkit-activelink
-webkit-link
-webkit-focus-ring-color
-internal-document-text-color`.split("\n").map(c => c.trim());

        const container = document.getElementById("colors-container");

        colorList.forEach(color => {
            const wrapper = document.createElement("div");
            wrapper.setAttribute("class", "wrapper");

            const square = document.createElement("div");
            square.setAttribute("class", "square");
            square.style.backgroundColor = color;

            const label = document.createElement("span");
            label.textContent = color;

            wrapper.appendChild(square);
            wrapper.appendChild(label);
            container.appendChild(wrapper);
        });
</script>