@bettercms-ai/kit 0.1.0

package/src/theme/defaults/colorTokens.ts

@@ -0,0 +1,648 @@
+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'],
+  },
+}