@bettercms-ai/kit 0.1.1 → 2.0.0-next.0

package/src/theme/defaults/colorTokens.ts

@@ -1,648 +0,0 @@
-import {ThemeColorTokens} from '../config'
-
-export const defaultColorTokens: ThemeColorTokens = {
-  base: {
-    '*': {
-      _blend: ['multiply', 'screen'],
-      accent: {
-        fg: ['purple/600', 'purple/400'],
-      },
-      avatar: {
-        '*': {
-          _blend: ['screen', 'multiply'],
-          bg: ['500', '400'],
-          fg: ['white', 'black'],
-        },
-      },
-      backdrop: ['gray/200/0.5', 'black/0.5'],
-      badge: {
-        '*': {
-          bg: ['100', '900'],
-          fg: ['600', '400'],
-          icon: ['500', '500'],
-          dot: ['500', '500'],
-        },
-        'positive': {
-          bg: ['200 50%', '900'],
-          fg: ['600', '500'],
-        },
-        'caution': {
-          bg: ['200 50%', '900'],
-          fg: ['600', '500'],
-        },
-      },
-      bg: ['50', '950'],
-      border: ['200', '800'],
-      code: {
-        bg: ['50', '950'],
-        fg: ['600', '400'],
-      },
-      fg: ['800', '200'],
-      focusRing: ['blue/500', 'blue/500'],
-      icon: ['600', '400'],
-      kbd: {
-        bg: ['white', 'black'],
-        fg: ['600', '400'],
-        border: ['200', '800'],
-      },
-      link: {
-        fg: ['blue/600', 'blue/300'],
-      },
-      muted: {
-        bg: ['50', '950'],
-        fg: ['700 75%', '300 75%'],
-      },
-      shadow: {
-        outline: ['500/0.3', '500/0.4'],
-        umbra: ['gray/500/0.1', 'black/0.2'],
-        penumbra: ['gray/500/0.07', 'black/0.14'],
-        ambient: ['gray/500/0.06', 'black/0.12'],
-      },
-      skeleton: {
-        from: ['100', '900'],
-        to: ['100 50%', '900 50%'],
-      },
-    },
-    'transparent': {
-      bg: ['50', 'black'],
-    },
-    'default': {
-      bg: ['white', '950'],
-      fg: ['800', '200'],
-      muted: {
-        fg: ['600', '400'],
-      },
-    },
-    'primary': {_hue: 'blue'},
-    'suggest': {_hue: 'purple'},
-    'positive': {
-      _hue: 'green',
-      shadow: {outline: ['500/0.4', '500/0.4']},
-    },
-    'caution': {
-      _hue: 'yellow',
-      shadow: {outline: ['600/0.3', '500/0.4']},
-    },
-    'critical': {_hue: 'red'},
-  },
-  button: {
-    default: {
-      '*': {
-        '*': {
-          _blend: ['screen', 'multiply'],
-          accent: {
-            fg: ['purple/300', 'purple/700'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['500', '400'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              bg: ['900', '100'],
-              fg: ['400', '600'],
-              dot: ['500', '500'],
-              icon: ['500', '500'],
-            },
-          },
-          bg: ['500', '400'],
-          border: ['500/0', '400/0'],
-          code: {
-            bg: ['500 20%', '400 20%'],
-            fg: ['200', '600'],
-          },
-          fg: ['white', 'black'],
-          icon: ['100 70%', '900 70%'],
-          kbd: {
-            bg: ['black', 'white'],
-            fg: ['200', '600'],
-            border: ['800', '200'],
-          },
-          link: {
-            fg: ['blue/200', 'blue/600'],
-          },
-          muted: {
-            bg: ['950', '50'],
-            fg: ['100 70%', '900 70%'],
-          },
-          skeleton: {
-            from: ['900', '100'],
-            to: ['900 50%', '100 50%'],
-          },
-        },
-        'hovered': {
-          bg: ['600', '300'],
-          border: ['700/0', '300/0'],
-        },
-        'pressed': {
-          bg: ['700', '300'],
-        },
-        'selected': {
-          bg: ['700', '300'],
-        },
-        'disabled': {
-          _hue: 'gray',
-          accent: {
-            fg: ['100 70%', '900 70%'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['gray/500', 'gray/400'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              bg: ['gray/700', 'gray/300'],
-              fg: ['white', 'black'],
-              dot: ['white', 'black'],
-              icon: ['white', 'black'],
-            },
-          },
-          bg: ['300', '600'],
-          code: {
-            bg: ['950', '50'],
-            fg: ['300', '600'],
-          },
-          fg: ['300', '600'],
-          muted: {
-            bg: ['950', '50'],
-            fg: ['300', '600'],
-          },
-          kbd: {
-            bg: ['black', 'white'],
-            fg: ['white', 'black'],
-            border: ['700', '300'],
-          },
-          link: {
-            fg: ['100 70%', '900 70%'],
-          },
-        },
-      },
-      'default': {
-        '*': {
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['500', '400'],
-              fg: ['white', 'black'],
-            },
-          },
-          bg: ['800', '200'],
-          muted: {
-            bg: ['950', '50'],
-            fg: ['400', '600'],
-          },
-        },
-        'hovered': {
-          bg: ['900', '100'],
-        },
-        'pressed': {
-          bg: ['black', 'white'],
-        },
-        'selected': {
-          bg: ['black', 'white'],
-        },
-      },
-    },
-    ghost: {
-      '*': {
-        '*': {
-          _blend: ['multiply', 'screen'],
-          accent: {
-            fg: ['purple/700 60%', 'purple/300 70%'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['500', '400'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              bg: ['100', '900'],
-              fg: ['600', '400'],
-              dot: ['500', '500'],
-              icon: ['500', '500'],
-            },
-          },
-          bg: ['50', '950'],
-          border: ['100', '900'],
-          code: {
-            bg: ['500 10%', '400 10%'],
-            fg: ['700 60%', '400 60%'],
-          },
-          fg: ['600', '400'],
-          icon: ['700 60%', '300 60%'],
-          kbd: {
-            bg: ['white', 'black'],
-            fg: ['600', '400'],
-            border: ['200', '800'],
-          },
-          link: {
-            fg: ['blue/700 60%', 'blue/300 60%'],
-          },
-          muted: {
-            bg: ['100', '950'],
-            fg: ['700 60%', '300 60%'],
-          },
-          skeleton: {
-            from: ['100', '900'],
-            to: ['100 50%', '900 50%'],
-          },
-        },
-        'hovered': {
-          bg: ['100', '900'],
-          fg: ['700', '300'],
-        },
-        'pressed': {
-          bg: ['200', '800'],
-          fg: ['800', '200'],
-        },
-        'selected': {
-          bg: ['200', '800'],
-          fg: ['800', '200'],
-        },
-        'disabled': {
-          _hue: 'gray',
-          accent: {
-            fg: ['200', '800'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['gray/100', 'gray/900'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              _hue: 'gray',
-              bg: ['50', '950'],
-              fg: ['gray/200', 'gray/800'],
-              dot: ['gray/200', 'gray/800'],
-              icon: ['gray/200', 'gray/800'],
-            },
-          },
-          border: ['100', '900'],
-          code: {
-            bg: ['50', '950'],
-            fg: ['200', '800'],
-          },
-          fg: ['400', '600'],
-          icon: ['300', '700'],
-          muted: {
-            fg: ['300', '700'],
-          },
-          kbd: {
-            bg: ['white', 'black'],
-            fg: ['200', '800'],
-            border: ['100', '900'],
-          },
-          link: {
-            fg: ['200', '800'],
-          },
-        },
-      },
-      'positive': {
-        '*': {
-          border: ['600 20%', '800'],
-        },
-      },
-      'caution': {
-        '*': {
-          border: ['600 20%', '800'],
-        },
-      },
-    },
-    bleed: {
-      '*': {
-        '*': {
-          _blend: ['multiply', 'screen'],
-          accent: {
-            fg: ['purple/700 70%', 'purple/300 70%'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['500', '400'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              bg: ['100', '900'],
-              fg: ['600', '400'],
-              dot: ['500', '500'],
-              icon: ['500', '500'],
-            },
-          },
-          bg: ['white', 'black'],
-          border: ['white/0', 'black/0'],
-          code: {
-            bg: ['50', '950'],
-            fg: ['700 75%', '300 75%'],
-          },
-          fg: ['700', '300'],
-          icon: ['700 75%', '300 75%'],
-          kbd: {
-            bg: ['white', 'black'],
-            fg: ['700', '300'],
-            border: ['200', '800'],
-          },
-          link: {
-            fg: ['blue/700 70%', 'blue/300 70%'],
-          },
-          muted: {
-            bg: ['100', '950'],
-            fg: ['700 75%', '300 75%'],
-          },
-          skeleton: {
-            from: ['100', '900'],
-            to: ['100 50%', '900 50%'],
-          },
-        },
-        'hovered': {
-          bg: ['50', '900'],
-          fg: ['800', '200'],
-          icon: ['800 70%', '300 70%'],
-        },
-        'pressed': {
-          bg: ['100', '800'],
-          fg: ['800', '200'],
-          icon: ['800 70%', '200 70%'],
-        },
-        'selected': {
-          bg: ['100', '900'],
-          fg: ['800', '200'],
-          icon: ['800 60%', '200 60%'],
-        },
-        'disabled': {
-          _hue: 'gray',
-          accent: {
-            fg: ['200', '800'],
-          },
-          avatar: {
-            '*': {
-              _blend: ['screen', 'multiply'],
-              bg: ['gray/100', 'gray/900'],
-              fg: ['white', 'black'],
-            },
-          },
-          badge: {
-            '*': {
-              _hue: 'gray',
-              bg: ['50', '950'],
-              fg: ['gray/200', 'gray/800'],
-              dot: ['gray/200', 'gray/800'],
-              icon: ['gray/200', 'gray/800'],
-            },
-          },
-          code: {
-            bg: ['50', '950'],
-            fg: ['200', '800'],
-          },
-          fg: ['400', '600'],
-          icon: ['300', '700'],
-          muted: {
-            fg: ['400', '600'],
-          },
-          kbd: {
-            bg: ['white', 'black'],
-            fg: ['200', '800'],
-            border: ['100', '900'],
-          },
-          link: {
-            fg: ['200', '800'],
-          },
-        },
-      },
-    },
-  },
-  input: {
-    '*': {
-      '*': {
-        _blend: ['multiply', 'screen'],
-        bg: ['white', 'black'],
-        border: ['200', '700'],
-        fg: ['black', '200'],
-        muted: {
-          bg: ['50', '950'],
-        },
-        placeholder: ['400', '600'],
-      },
-      'hovered': {
-        border: ['300', '700'],
-      },
-      'readOnly': {
-        bg: ['50', '950'],
-        border: ['200', '800'],
-        fg: ['800', '200'],
-      },
-      'disabled': {
-        bg: ['50', '950'],
-        fg: ['400', '600'],
-        border: ['100', '900'],
-        placeholder: ['200', '800 50%'],
-      },
-    },
-    'invalid': {
-      '*': {
-        _hue: 'red',
-        bg: ['100', '950'],
-      },
-    },
-  },
-  selectable: {
-    '*': {
-      '*': {
-        _blend: ['multiply', 'screen'],
-        accent: {
-          fg: ['purple/700 70%', 'purple/300 70%'],
-        },
-        avatar: {
-          '*': {
-            _blend: ['screen', 'multiply'],
-            bg: ['500', '400'],
-            fg: ['white', 'black'],
-          },
-        },
-        badge: {
-          '*': {
-            bg: ['100', '900'],
-            fg: ['600', '400'],
-            dot: ['500', '500'],
-            icon: ['500', '500'],
-          },
-        },
-        bg: ['white', 'black'],
-        border: ['200', '800'],
-        code: {
-          bg: ['50', '950'],
-          fg: ['600', '400'],
-        },
-        fg: ['700', '300'],
-        icon: ['700 75%', '300 75%'],
-        kbd: {
-          bg: ['white', 'black'],
-          fg: ['600', '400'],
-          border: ['200', '800'],
-        },
-        link: {
-          fg: ['blue/700 70%', 'blue/300 70%'],
-        },
-        muted: {
-          bg: ['50', '950'],
-          fg: ['700 75%', '300 75%'],
-        },
-        skeleton: {
-          from: ['100', '900'],
-          to: ['100 50%', '900 50%'],
-        },
-      },
-      'hovered': {
-        bg: ['50', '950'],
-      },
-      'pressed': {
-        bg: ['100', '900'],
-      },
-      'selected': {
-        _blend: ['screen', 'multiply'],
-        accent: {
-          fg: ['purple/300', 'purple/700'],
-        },
-        avatar: {
-          '*': {
-            _blend: ['multiply', 'screen'],
-            bg: ['white', 'black'],
-            fg: ['black', 'white'],
-          },
-        },
-        badge: {
-          '*': {
-            bg: ['900', '100'],
-            fg: ['400', '600'],
-            dot: ['500', '500'],
-            icon: ['500', '500'],
-          },
-        },
-        bg: ['500', '400'],
-        border: ['500 20%', '400 20%'],
-        code: {
-          bg: ['500 20%', '400 20%'],
-          fg: ['200', '600'],
-        },
-        fg: ['white', 'black'],
-        icon: ['100 70%', '900 70%'],
-        kbd: {
-          bg: ['black', 'white'],
-          fg: ['200', '600'],
-          border: ['800', '200'],
-        },
-        link: {
-          fg: ['blue/200', 'blue/600'],
-        },
-        muted: {
-          bg: ['500 10%', '400 10%'],
-          fg: ['100 70%', '900 70%'],
-        },
-        skeleton: {
-          from: ['900', '100'],
-          to: ['900 50%', '100 50%'],
-        },
-      },
-      'disabled': {
-        _hue: 'gray',
-        accent: {
-          fg: ['200', '800'],
-        },
-        avatar: {
-          '*': {
-            _blend: ['screen', 'multiply'],
-            bg: ['gray/100', 'gray/900'],
-            fg: ['white', 'black'],
-          },
-        },
-        badge: {
-          '*': {
-            _hue: 'gray',
-            bg: ['50', '950'],
-            fg: ['gray/200', 'gray/800'],
-            dot: ['gray/200', 'gray/800'],
-            icon: ['gray/200', 'gray/800'],
-          },
-        },
-        border: ['100', '900'],
-        code: {
-          bg: ['50', '950'],
-          fg: ['200', '800'],
-        },
-        fg: ['200', '800'],
-        icon: ['200', '800'],
-        kbd: {
-          bg: ['white', 'black'],
-          fg: ['200', '800'],
-          border: ['100', '900'],
-        },
-        link: {
-          fg: ['200', '800'],
-        },
-        muted: {
-          bg: ['50 50%', '950 50%'],
-          fg: ['200', '800'],
-        },
-      },
-    },
-    'default': {
-      selected: {
-        _hue: 'blue',
-      },
-    },
-    'critical': {
-      disabled: {
-        bg: ['50 50%', '950 50%'],
-      },
-    },
-  },
-  syntax: {
-    atrule: ['purple/600', 'purple/400'],
-    attrName: ['green/600', 'green/400'],
-    attrValue: ['yellow/600', 'yellow/400'],
-    attribute: ['yellow/600', 'yellow/400'],
-    boolean: ['purple/600', 'purple/400'],
-    builtin: ['purple/600', 'purple/400'],
-    cdata: ['yellow/600', 'yellow/400'],
-    char: ['yellow/600', 'yellow/400'],
-    class: ['orange/600', 'orange/400'],
-    className: ['cyan/600', 'cyan/400'],
-    comment: ['gray/400', 'gray/600'],
-    constant: ['purple/600', 'purple/400'],
-    deleted: ['red/600', 'red/400'],
-    entity: ['red/600', 'red/400'],
-    function: ['green/600', 'green/400'],
-    hexcode: ['blue/600', 'blue/400'],
-    id: ['purple/600', 'purple/400'],
-    important: ['purple/600', 'purple/400'],
-    inserted: ['yellow/600', 'yellow/400'],
-    keyword: ['magenta/600', 'magenta/400'],
-    number: ['purple/600', 'purple/400'],
-    operator: ['magenta/600', 'magenta/400'],
-    property: ['blue/600', 'blue/400'],
-    pseudoClass: ['yellow/600', 'yellow/400'],
-    pseudoElement: ['yellow/600', 'yellow/400'],
-    punctuation: ['gray/600', 'gray/400'],
-    regex: ['blue/600', 'blue/400'],
-    selector: ['red/600', 'red/400'],
-    string: ['yellow/600', 'yellow/400'],
-    symbol: ['purple/600', 'purple/400'],
-    tag: ['red/600', 'red/400'],
-    unit: ['orange/600', 'orange/400'],
-    url: ['red/600', 'red/400'],
-    variable: ['red/600', 'red/400'],
-  },
-}