semantic-tokens.ts

export const semanticTokens = {
  colors: {
    bodyBg: {
      default: `white`,
      _dark: `#0e0f15`
    },
    pageBackgroundGradiant: `radial-gradient(circle at 10% 45%,rgba(149,176,241,0), rgba(149,176,241,0) 50%),radial-gradient(circle at 82% 26%,rgba(43,199,119,0.05), rgba(43,199,119,0) 50%),radial-gradient(circle at 11% 15%,rgba(149,0,255,0.06), rgba(149,0,255,0) 50%),radial-gradient(circle at 27% 54%,rgba(86,210,146,0.06), rgba(86,210,146,0) 30%),radial-gradient(circle at 67% 70%,rgba(101,0,255,0.05), rgba(101,0,255,0) 10%)`,
    bodyText: {
      default: 'gray.700',
      _dark: 'whiteAlpha.900'
    },
    _bodyBg: {
      default: 'white',
      _dark: 'gray.900'
    },
    subtitleText: {
      default: 'gray.500',
      _dark: 'whiteAlpha.600'
    },
    pillNoticeBg: {
      default: 'emerald.50',
      _dark: 'rgba(41, 236, 139, 0.14)'
    },
    pillNoticeText: {
      default: '#226044',
      _dark: 'rgb(170, 255, 213)'
    },
    featuresBorderColor: {
      default: `#19b971`,
      _dark: `rgba(41, 236, 139, 0.5)`
    },
    featuresBorderColorHover: {
      default: `#19b971`,
      _dark: `rgba(41, 236, 139, 0.7)`
    },
    featuresTextColor: {
      default: `rgba(41, 236, 139, 0.1)`,
      _dark: `rgba(41, 236, 139, 0.2)`
    },
    featuresTextColorHover: {
      default: `rgba(41, 236, 139, 0.2)`,
      _dark: `rgba(41, 236, 139, 0.3)`
    }
  }
};