@spaced-out/ui-design-system/design-tokens/color/app-color.json

Sense UI components library

{
  "color": {
    "text": {
      "primary": {
        "value": "{baseColor.indigo.940.value}"
      },
      "secondary": {
        "value": "{baseColor.gray.600.value}"
      },
      "tertiary": {
        "value": "{baseColor.gray.400.value}"
      },
      "disabled": {
        "value": "{baseColor.gray.200.value}"
      },
      "clickable": {
        "value": "{baseColor.purple.500.value}"
      },
      "neutral": {
        "value": "{baseColor.indigo.500.value}"
      },
      "success": {
        "value": "{baseColor.green.700.value}"
      },
      "information": {
        "value": "{baseColor.blue.600.value}"
      },
      "warning": {
        "value": "{baseColor.orange.700.value}"
      },
      "danger": {
        "value": "{baseColor.red.600.value}"
      },
      "inverse": {
        "primary": {
          "value": "{baseColor.white.100.value}"
        },
        "secondary": {
          "value": "{baseColor.indigo.300.value}"
        }
      },
      "favorite": {
        "value": "{baseColor.yellow.500.value}"
      }
    },
    "icon": {
      "primary": {
        "value": "{baseColor.indigo.400.value}"
      },
      "secondary": {
        "value": "{baseColor.indigo.800.value}"
      }
    },
    "border": {
      "primary": {
        "value": "{baseColor.gray.100.value}"
      },
      "secondary": {
        "value": "{baseColor.gray.200.value}"
      },
      "tertiary": {
        "value": "{baseColor.gray.250.value}"
      },
      "danger": {
        "value": "{baseColor.red.500.value}"
      }
    },
    "background": {
      "brand": {
        "value": "{baseColor.purple.900.value}"
      },
      "primary": {
        "value": "{baseColor.gray.25.value}"
      },
      "secondary": {
        "value": "{baseColor.gray.50.value}"
      },
      "tertiary": {
        "value": "{baseColor.white.100.value}"
      }
    },
    "focus": {
      "primary": {
        "value": "{baseColor.purple.100.value}"
      },
      "secondary": {
        "value": "{baseColor.purple.500.value}"
      },
      "danger": {
        "value": "{baseColor.red.100.value}"
      }
    },
    "fill": {
      "primary": {
        "value": "{baseColor.purple.500.value}"
      },
      "secondary": {
        "value": "{baseColor.purple.50.value}"
      },
      "none": {
        "value": "{baseColor.transparent.0.value}"
      },
      "disabled": {
        "value": "{baseColor.gray.50.value}"
      },
      "inverse": {
        "primary": {
          "value": "{baseColor.indigo.940.value}"
        }
      }
    },
    "tooltip-fill": {
      "value": "{baseColor.indigo.940.95.value}"
    },
    "backdrop-fill": {
      "value": "{baseColor.indigo.940.70.value}"
    },
    "button-fill": {
      "tableAction": {
        "enabled": {
          "value": "{baseColor.purple.600.value}"
        },
        "hovered": {
          "value": "{baseColor.purple.700.value}"
        },
        "pressed": {
          "value": "{baseColor.purple.700.value}"
        },
        "border": {
          "value": "{baseColor.purple.400.value}"
        }
      },
      "primary": {
        "enabled": {
          "value": "{baseColor.purple.500.value}"
        },
        "hovered": {
          "value": "{baseColor.purple.700.value}"
        },
        "pressed": {
          "value": "{baseColor.purple.700.value}"
        }
      },
      "secondary": {
        "enabled": {
          "value": "{baseColor.purple.50.value}"
        },
        "hovered": {
          "value": "{baseColor.purple.100.value}"
        },
        "pressed": {
          "value": "{baseColor.purple.100.value}"
        }
      },
      "tertiary": {
        "enabled": {
          "value": "{baseColor.white.100.value}"
        },
        "hovered": {
          "value": "{baseColor.gray.75.value}"
        },
        "pressed": {
          "value": "{baseColor.gray.75.value}"
        }
      },
      "ghost": {
        "enabled": {
          "value": "{baseColor.transparent.0.value}"
        },
        "hovered": {
          "value": "{baseColor.gray.75.value}"
        },
        "pressed": {
          "value": "{baseColor.gray.75.value}"
        }
      },
      "danger": {
        "enabled": {
          "value": "{baseColor.red.500.value}"
        },
        "hovered": {
          "value": "{baseColor.red.600.value}"
        },
        "pressed": {
          "value": "{baseColor.red.600.value}"
        }
      }
    },
    "side-menu": {
      "background": {
        "default": {
          "value": "{baseColor.indigo.940.value}"
        },
        "hovered": {
          "value": "{baseColor.indigo.920.value}"
        },
        "selected": {
          "value": "{baseColor.purple.500.value}"
        }
      },
      "icon": {
        "default": {
          "value": "{baseColor.indigo.300.value}"
        },
        "active": {
          "value": "{baseColor.white.100.value}"
        }
      },
      "account-bar": {
        "fill": {
          "value": "{baseColor.indigo.920.value}"
        }
      }
    },
    "group-menu": {
      "background": {
        "default": {
          "value": "{baseColor.indigo.940.value}"
        },
        "hovered": {
          "value": "{baseColor.indigo.920.value}"
        },
        "selected": {
          "value": "{baseColor.purple.500.value}"
        }
      },
      "text": {
        "default": {
          "value": "{baseColor.indigo.200.value}"
        }
      }
    },
    "sub-menu": {
      "background": {
        "default": {
          "value": "{baseColor.indigo.920.value}"
        }
      },
      "star": {
        "value": "{baseColor.yellow.500.value}"
      }
    },
    "data-viz": {
      "1": {
        "value": "{baseColor.blue.200.value}"
      },
      "2": {
        "value": "{baseColor.purple.200.value}"
      },
      "3": {
        "value": "{baseColor.green.200.value}"
      },
      "4": {
        "value": "{baseColor.orange.200.value}"
      },
      "5": {
        "value": "{baseColor.red.200.value}"
      },
      "6": {
        "value": "{baseColor.teal.100.value}"
      },
      "7": {
        "value": "{baseColor.pink.100.value}"
      },
      "8": {
        "value": "{baseColor.yellow.100.value}"
      }
    },
    "score-bar": {
      "level": {
        "1": {
          "value": "{baseColor.gray.400.value}"
        },
        "2": {
          "value": "{baseColor.red.400.value}"
        },
        "3": {
          "value": "{baseColor.orange.400.value}"
        },
        "4": {
          "value": "{baseColor.blue.400.value}"
        },
        "5": {
          "value": "{baseColor.green.400.value}"
        }
      },
      "inactive": {
        "value": "{baseColor.gray.200.value}"
      }
    },
    "gray.lightest": {
      "value": "{baseColor.gray.75.value}"
    },
    "neutral": {
      "value": "{baseColor.indigo.500.value}"
    },
    "neutral.lightest": {
      "value": "{baseColor.indigo.50.value}"
    },
    "neutral.light": {
      "value": "{baseColor.indigo.200.value}"
    },
    "neutral.dark": {
      "value": "{baseColor.indigo.700.value}"
    },
    "neutral.darkest": {
      "value": "{baseColor.indigo.900.value}"
    },
    "success": {
      "value": "{baseColor.green.500.value}"
    },
    "success.lightest": {
      "value": "{baseColor.green.50.value}"
    },
    "success.light": {
      "value": "{baseColor.green.200.value}"
    },
    "success.dark": {
      "value": "{baseColor.green.700.value}"
    },
    "success.darkest": {
      "value": "{baseColor.green.900.value}"
    },
    "information": {
      "value": "{baseColor.blue.500.value}"
    },
    "information.lightest": {
      "value": "{baseColor.blue.50.value}"
    },
    "information.light": {
      "value": "{baseColor.blue.200.value}"
    },
    "information.dark": {
      "value": "{baseColor.blue.700.value}"
    },
    "information.darkest": {
      "value": "{baseColor.blue.900.value}"
    },
    "warning": {
      "value": "{baseColor.orange.500.value}"
    },
    "warning.lightest": {
      "value": "{baseColor.orange.50.value}"
    },
    "warning.light": {
      "value": "{baseColor.orange.200.value}"
    },
    "warning.dark": {
      "value": "{baseColor.orange.700.value}"
    },
    "warning.darkest": {
      "value": "{baseColor.orange.900.value}"
    },
    "danger": {
      "value": "{baseColor.red.500.value}"
    },
    "danger.lightest": {
      "value": "{baseColor.red.50.value}"
    },
    "danger.light": {
      "value": "{baseColor.red.200.value}"
    },
    "danger.dark": {
      "value": "{baseColor.red.700.value}"
    },
    "danger.darkest": {
      "value": "{baseColor.red.900.value}"
    }
  }
}