@cn-ui/core/src/css/tokens/materialTokens.ts

The @cn-ui/core is a collection of UI components and utilities for building modern web applications with SolidJS.

import type { TokenLike } from ".";

const Token = {
    WhiteBorder: "1px solid rgba(209, 213, 219, 0.3)",
    BlackBorder: "1px solid rgba(255, 255, 255, 0.125)",
};

/**
 *
 * @link https://www.figma.com/file/HEvUIZSLxAQ0mGbllDDBl7/iOS-17-and-iPadOS-17-(Community)?type=design&node-id=224%3A56304&mode=design&t=Tci3XVGl8oCQgr8I-1
 */
export const materialTokens = (): TokenLike => [
    [
        "bg-design-thick",

        {
            "background-color": "rgba(255, 255, 255, 0.93)",
            "backdrop-filter": "blur(5px) saturate(180%)",
            border: Token.WhiteBorder,
        },
        {
            "background-color": "rgba(17, 25, 40, 0.93)",
            "backdrop-filter": "blur(5px) saturate(180%)",
            border: Token.BlackBorder,
        },
    ],
    [
        "bg-design-regular",

        {
            "background-color": "rgba(255, 255, 255, 0.84)",
            "backdrop-filter": "blur(8px) saturate(180%)",
            border: Token.WhiteBorder,
        },
        {
            "background-color": "rgba(17, 25, 40, 0.84)",
            "backdrop-filter": "blur(8px) saturate(180%)",
            border: Token.BlackBorder,
        },
    ],
    [
        "bg-design-thin",

        {
            "background-color": "rgba(255, 255, 255, 0.56)",
            "backdrop-filter": "blur(14px) saturate(180%)",
            border: Token.WhiteBorder,
        },
        {
            "background-color": "rgba(17, 25, 40, 0.56)",
            "backdrop-filter": "blur(14px) saturate(180%)",
            border: Token.BlackBorder,
        },
    ],
    [
        "bg-design-ultra-thin",

        {
            "background-color": "rgba(255, 255, 255, 0.17)",
            "backdrop-filter": "blur(25px) saturate(180%)",
            border: Token.WhiteBorder,
        },
        {
            "background-color": "rgba(17, 25, 40, 0.17)",
            "backdrop-filter": "blur(8px) saturate(180%)",
            border: Token.BlackBorder,
        },
    ],
];