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', '950'],
          fg: ['800', '200'],
          icon: ['800 70%', '300 70%'],
        },
        'pressed': {
          bg: ['100', '900'],
          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'],
  },
}